/* ============================================
   MKPI DESIGN – Design Tokens & Design-System
   ============================================ */

:root {
  /* ----------------------------------------
     FARBEN – Hintergruende
     ---------------------------------------- */
  --mkpi-bg-primary: #FFFFFF;
  --mkpi-bg-secondary: #F5F5F7;
  --mkpi-bg-dark: #1D1D1F;
  --mkpi-bg-darker: #111111;
  --mkpi-bg-hero: #000000;

  /* ----------------------------------------
     FARBEN – Text
     ---------------------------------------- */
  --mkpi-text-primary: #1D1D1F;
  --mkpi-text-secondary: #6E6E73;
  --mkpi-text-tertiary: #86868B;

  --mkpi-text-primary-dark: #F5F5F7;
  --mkpi-text-secondary-dark: #A1A1A6;
  --mkpi-text-tertiary-dark: #6E6E73;

  /* ----------------------------------------
     FARBEN – Akzente & Interaktion
     ---------------------------------------- */
  --mkpi-accent: #0071E3;
  --mkpi-accent-hover: #0077ED;
  --mkpi-accent-active: #006ADB;
  --mkpi-link: #0066CC;
  --mkpi-link-dark: #2997FF;

  --mkpi-gradient-start: #0071E3;
  --mkpi-gradient-end: #00B4A0;
  --mkpi-gradient: linear-gradient(to right, var(--mkpi-gradient-start), var(--mkpi-gradient-end));

  --mkpi-icon-color: #00B4A0;

  /* ----------------------------------------
     FARBEN – Oberflaechen & Borders
     ---------------------------------------- */
  --mkpi-border-light: #E5E7EB;
  --mkpi-border-dark: rgba(255,255,255,0.12);
  --mkpi-grid-line: 1px solid rgba(255, 255, 255, 0.5);
  --mkpi-card-bg: #FFFFFF;
  --mkpi-card-shadow: 0 0 0 1px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  --mkpi-card-shadow-hover: 0 4px 12px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.06);

  /* ----------------------------------------
     FARBEN – System-Feedback
     ---------------------------------------- */
  --mkpi-success: #198754;
  --mkpi-success-hover: #157347;
  --mkpi-success-active: #146C43;
  --mkpi-success-muted: #D1E7DD;
  --mkpi-error: #FF3B30;
  --mkpi-warning: #FF9500;

  /* ----------------------------------------
     TYPOGRAFIE
     ---------------------------------------- */
  --mkpi-font: 'Inter', 'Inter-Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Fluid Type Scale */
  --mkpi-text-display: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  --mkpi-text-h1: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  --mkpi-text-h2: clamp(1.75rem, 1.3rem + 2vw, 3rem);
  --mkpi-text-h3: clamp(1.5rem, 1.2rem + 1.25vw, 2rem);
  --mkpi-text-h4: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --mkpi-text-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --mkpi-text-small: 0.875rem;
  --mkpi-text-caption: 0.75rem;

  /* Schriftgewichte */
  --mkpi-weight-regular: 400;
  --mkpi-weight-medium: 500;
  --mkpi-weight-semibold: 600;
  --mkpi-weight-bold: 700;
  --mkpi-weight-extrabold: 800;

  /* ----------------------------------------
     SPACING – 8-Punkt-Rastersystem
     ---------------------------------------- */
  --mkpi-space-1: 0.25rem;
  --mkpi-space-2: 0.5rem;
  --mkpi-space-3: 0.75rem;
  --mkpi-space-4: 1rem;
  --mkpi-space-5: 1.5rem;
  --mkpi-space-6: 2rem;
  --mkpi-space-8: 3rem;
  --mkpi-space-10: 4rem;
  --mkpi-space-12: 5rem;
  --mkpi-space-16: 6rem;
  --mkpi-space-20: 8rem;

  /* ----------------------------------------
     RESPONSIVE T-SHIRT SPACING
     Fluide Abstände mit clamp() – skalieren
     automatisch zwischen 320px und 1440px Viewport.
     Basis: Bootstrap-Stufen 1–6 als Max-Werte.
     ---------------------------------------- */
  --space-xs:  clamp(0.125rem, 0.19vw + 0.08rem, 0.25rem);   /*  2px –  4px  (Bootstrap 1) */
  --space-s:   clamp(0.25rem, 0.375vw + 0.15rem, 0.5rem);     /*  4px –  8px  (Bootstrap 2) */
  --space-m:   clamp(0.5rem, 0.75vw + 0.35rem, 1rem);         /*  8px – 16px  (Bootstrap 3) */
  --space-l:   clamp(0.75rem, 1.125vw + 0.5rem, 1.5rem);      /* 12px – 24px  (Bootstrap 4) */
  --space-xl:  clamp(1.5rem, 2.25vw + 1rem, 3rem);            /* 24px – 48px  (Bootstrap 5) */
  --space-xxl: clamp(3rem, 5vw + 1.5rem, 6rem);               /* 48px – 96px  (Bootstrap 6) */

  --mkpi-section-padding: clamp(4rem, 5vw + 1.5rem, 6rem);
  --mkpi-section-gap: clamp(2rem, 3vw + 0.5rem, 4rem);

  /* Content-Container */
  --mkpi-content-width: 1140px;
  --mkpi-content-wide: 1320px;
  --mkpi-content-narrow: 720px;
  --mkpi-content-medium: 800px;

  /* ----------------------------------------
     BUTTON T-SHIRT-SIZING
     S/M/L: gleiche Font-Groesse (1rem), Unterschied nur durch Padding/Hoehe.
     XS und XL haben eigene Font-Groessen.
     ---------------------------------------- */
  --mkpi-btn-xs-py: 0.25rem;            /* 4px */
  --mkpi-btn-xs-px: 0.75rem;            /* 12px */
  --mkpi-btn-xs-height: 1.75rem;         /* 28px */
  --mkpi-btn-xs-font: 0.8125rem;         /* 13px */

  --mkpi-btn-s-py: 0.625rem;            /* 10px */
  --mkpi-btn-s-px: 1.25rem;             /* 20px */
  --mkpi-btn-s-height: 2.75rem;          /* 44px */
  --mkpi-btn-s-font: 1rem;               /* 16px = Body */

  --mkpi-btn-m-py: 0.75rem;             /* 12px – 75% von 16px */
  --mkpi-btn-m-px: 1.75rem;             /* 28px */
  --mkpi-btn-m-height: 3rem;             /* 48px */
  --mkpi-btn-m-font: 1rem;               /* 16px = Body */

  --mkpi-btn-l-py: 0.875rem;            /* 14px */
  --mkpi-btn-l-px: 2rem;                /* 32px */
  --mkpi-btn-l-height: 3.25rem;          /* 52px */
  --mkpi-btn-l-font: 1rem;               /* 16px = Body */

  --mkpi-btn-xl-py: 1rem;               /* 16px */
  --mkpi-btn-xl-px: 2.5rem;             /* 40px */
  --mkpi-btn-xl-height: 3.5rem;          /* 56px */
  --mkpi-btn-xl-font: 1.125rem;          /* 18px */

  /* Legacy-Aliase (Abwaertskompatibilitaet) */
  --mkpi-btn-padding-y: var(--mkpi-btn-l-py);
  --mkpi-btn-padding-x: var(--mkpi-btn-l-px);
  --mkpi-btn-min-height: var(--mkpi-btn-l-height);
  --mkpi-btn-gap: var(--mkpi-space-2);

  --mkpi-btn-sm-padding-y: var(--mkpi-btn-m-py);
  --mkpi-btn-sm-padding-x: var(--mkpi-btn-m-px);
  --mkpi-btn-sm-min-height: var(--mkpi-btn-m-height);

  --mkpi-btn-lg-padding-y: var(--mkpi-btn-xl-py);
  --mkpi-btn-lg-padding-x: var(--mkpi-btn-xl-px);
  --mkpi-btn-lg-min-height: var(--mkpi-btn-xl-height);

  /* ----------------------------------------
     ICON-DIMENSIONEN – Token-System (konsistent siteweit)
     S = klein, M = mittel, L = gross (z. B. Service-Cards), XL = sehr gross
     ---------------------------------------- */
  --mkpi-icon-container: 3.5rem;         /* 56px, Legacy */
  --mkpi-icon-size-s: 1.5rem;            /* 24px */
  --mkpi-icon-size-m: 2rem;              /* 32px */
  --mkpi-icon-size-l: 3rem;              /* 48px */
  --mkpi-icon-size-xl: 4rem;             /* 64px */

  /* ----------------------------------------
     BORDER-RADIUS
     ---------------------------------------- */
  --mkpi-radius-sm: 8px;
  --mkpi-radius-md: 12px;
  --mkpi-radius-lg: 16px;
  --mkpi-radius-xl: 24px;
  --mkpi-radius-btn: 12px;
  --mkpi-radius-pill: 980px;

  /* ----------------------------------------
     TRANSITIONS
     ---------------------------------------- */
  --mkpi-transition-fast: 150ms ease;
  --mkpi-transition-base: 200ms ease-in-out;
  --mkpi-transition-slow: 300ms ease-in-out;
}


/* ============================================
   MKPI RESPONSIVE SPACING UTILITIES
   ============================================ */

/* --- Resets (alle Werte auf 0) --- */
.mkpi-m-0   { margin: 0 !important; }
.mkpi-p-0   { padding: 0 !important; }
.mkpi-mx-0  { margin-left: 0 !important; margin-right: 0 !important; }
.mkpi-my-0  { margin-top: 0 !important; margin-bottom: 0 !important; }
.mkpi-mt-0  { margin-top: 0 !important; }
.mkpi-mb-0  { margin-bottom: 0 !important; }
.mkpi-ms-0  { margin-inline-start: 0 !important; }
.mkpi-me-0  { margin-inline-end: 0 !important; }
.mkpi-px-0  { padding-left: 0 !important; padding-right: 0 !important; }
.mkpi-py-0  { padding-top: 0 !important; padding-bottom: 0 !important; }
.mkpi-pt-0  { padding-top: 0 !important; }
.mkpi-pb-0  { padding-bottom: 0 !important; }

/* --- Auto-Margins (Zentrierung, Flex-Push) --- */
.mkpi-m-auto   { margin: auto !important; }
.mkpi-mt-auto  { margin-top: auto !important; }
.mkpi-mb-auto  { margin-bottom: auto !important; }
.mkpi-ms-auto  { margin-inline-start: auto !important; }
.mkpi-me-auto  { margin-inline-end: auto !important; }
.mkpi-mx-auto  { margin-left: auto !important; margin-right: auto !important; }
.mkpi-my-auto  { margin-top: auto !important; margin-bottom: auto !important; }

/* --- Margin Bottom --- */
.mkpi-mb-xs  { margin-bottom: var(--space-xs) !important; }
.mkpi-mb-s   { margin-bottom: var(--space-s) !important; }
.mkpi-mb-m   { margin-bottom: var(--space-m) !important; }
.mkpi-mb-l   { margin-bottom: var(--space-l) !important; }
.mkpi-mb-xl  { margin-bottom: var(--space-xl) !important; }
.mkpi-mb-xxl { margin-bottom: var(--space-xxl) !important; }

/* --- Margin Top --- */
.mkpi-mt-xs  { margin-top: var(--space-xs) !important; }
.mkpi-mt-s   { margin-top: var(--space-s) !important; }
.mkpi-mt-m   { margin-top: var(--space-m) !important; }
.mkpi-mt-l   { margin-top: var(--space-l) !important; }
.mkpi-mt-xl  { margin-top: var(--space-xl) !important; }
.mkpi-mt-xxl { margin-top: var(--space-xxl) !important; }

/* --- Margin Start (links) --- */
.mkpi-ms-xs  { margin-inline-start: var(--space-xs) !important; }
.mkpi-ms-s   { margin-inline-start: var(--space-s) !important; }
.mkpi-ms-m   { margin-inline-start: var(--space-m) !important; }
.mkpi-ms-l   { margin-inline-start: var(--space-l) !important; }
.mkpi-ms-xl  { margin-inline-start: var(--space-xl) !important; }
.mkpi-ms-xxl { margin-inline-start: var(--space-xxl) !important; }

/* --- Margin End (rechts) --- */
.mkpi-me-xs  { margin-inline-end: var(--space-xs) !important; }
.mkpi-me-s   { margin-inline-end: var(--space-s) !important; }
.mkpi-me-m   { margin-inline-end: var(--space-m) !important; }
.mkpi-me-l   { margin-inline-end: var(--space-l) !important; }
.mkpi-me-xl  { margin-inline-end: var(--space-xl) !important; }
.mkpi-me-xxl { margin-inline-end: var(--space-xxl) !important; }

/* --- Padding (alle Seiten) --- */
.mkpi-p-xs  { padding: var(--space-xs) !important; }
.mkpi-p-s   { padding: var(--space-s) !important; }
.mkpi-p-m   { padding: var(--space-m) !important; }
.mkpi-p-l   { padding: var(--space-l) !important; }
.mkpi-p-xl  { padding: var(--space-xl) !important; }
.mkpi-p-xxl { padding: var(--space-xxl) !important; }

/* --- Padding Top + Bottom --- */
.mkpi-py-xs  { padding-top: var(--space-xs) !important; padding-bottom: var(--space-xs) !important; }
.mkpi-py-s   { padding-top: var(--space-s) !important; padding-bottom: var(--space-s) !important; }
.mkpi-py-m   { padding-top: var(--space-m) !important; padding-bottom: var(--space-m) !important; }
.mkpi-py-l   { padding-top: var(--space-l) !important; padding-bottom: var(--space-l) !important; }
.mkpi-py-xl  { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; }
.mkpi-py-xxl { padding-top: var(--space-xxl) !important; padding-bottom: var(--space-xxl) !important; }

/* --- Padding Left + Right --- */
.mkpi-px-xs  { padding-left: var(--space-xs) !important; padding-right: var(--space-xs) !important; }
.mkpi-px-s   { padding-left: var(--space-s) !important; padding-right: var(--space-s) !important; }
.mkpi-px-m   { padding-left: var(--space-m) !important; padding-right: var(--space-m) !important; }
.mkpi-px-l   { padding-left: var(--space-l) !important; padding-right: var(--space-l) !important; }
.mkpi-px-xl  { padding-left: var(--space-xl) !important; padding-right: var(--space-xl) !important; }
.mkpi-px-xxl { padding-left: var(--space-xxl) !important; padding-right: var(--space-xxl) !important; }

/* --- Margin Top + Bottom --- */
.mkpi-my-xs  { margin-top: var(--space-xs) !important; margin-bottom: var(--space-xs) !important; }
.mkpi-my-s   { margin-top: var(--space-s) !important; margin-bottom: var(--space-s) !important; }
.mkpi-my-m   { margin-top: var(--space-m) !important; margin-bottom: var(--space-m) !important; }
.mkpi-my-l   { margin-top: var(--space-l) !important; margin-bottom: var(--space-l) !important; }
.mkpi-my-xl  { margin-top: var(--space-xl) !important; margin-bottom: var(--space-xl) !important; }
.mkpi-my-xxl { margin-top: var(--space-xxl) !important; margin-bottom: var(--space-xxl) !important; }

/* --- Margin Left + Right --- */
.mkpi-mx-xs  { margin-left: var(--space-xs) !important; margin-right: var(--space-xs) !important; }
.mkpi-mx-s   { margin-left: var(--space-s) !important; margin-right: var(--space-s) !important; }
.mkpi-mx-m   { margin-left: var(--space-m) !important; margin-right: var(--space-m) !important; }
.mkpi-mx-l   { margin-left: var(--space-l) !important; margin-right: var(--space-l) !important; }
.mkpi-mx-xl  { margin-left: var(--space-xl) !important; margin-right: var(--space-xl) !important; }
.mkpi-mx-xxl { margin-left: var(--space-xxl) !important; margin-right: var(--space-xxl) !important; }

/* --- Padding Top --- */
.mkpi-pt-xs  { padding-top: var(--space-xs) !important; }
.mkpi-pt-s   { padding-top: var(--space-s) !important; }
.mkpi-pt-m   { padding-top: var(--space-m) !important; }
.mkpi-pt-l   { padding-top: var(--space-l) !important; }
.mkpi-pt-xl  { padding-top: var(--space-xl) !important; }
.mkpi-pt-xxl { padding-top: var(--space-xxl) !important; }

/* --- Padding Bottom --- */
.mkpi-pb-xs  { padding-bottom: var(--space-xs) !important; }
.mkpi-pb-s   { padding-bottom: var(--space-s) !important; }
.mkpi-pb-m   { padding-bottom: var(--space-m) !important; }
.mkpi-pb-l   { padding-bottom: var(--space-l) !important; }
.mkpi-pb-xl  { padding-bottom: var(--space-xl) !important; }
.mkpi-pb-xxl { padding-bottom: var(--space-xxl) !important; }

/* --- Padding Start (links) --- */
.mkpi-ps-xs  { padding-inline-start: var(--space-xs) !important; }
.mkpi-ps-s   { padding-inline-start: var(--space-s) !important; }
.mkpi-ps-m   { padding-inline-start: var(--space-m) !important; }
.mkpi-ps-l   { padding-inline-start: var(--space-l) !important; }
.mkpi-ps-xl  { padding-inline-start: var(--space-xl) !important; }
.mkpi-ps-xxl { padding-inline-start: var(--space-xxl) !important; }

/* --- Padding End (rechts) --- */
.mkpi-pe-xs  { padding-inline-end: var(--space-xs) !important; }
.mkpi-pe-s   { padding-inline-end: var(--space-s) !important; }
.mkpi-pe-m   { padding-inline-end: var(--space-m) !important; }
.mkpi-pe-l   { padding-inline-end: var(--space-l) !important; }
.mkpi-pe-xl  { padding-inline-end: var(--space-xl) !important; }
.mkpi-pe-xxl { padding-inline-end: var(--space-xxl) !important; }

/* Gap-Utilities (T-Shirt-Sizing) */
.mkpi-gap-xs  { gap: var(--space-xs) !important; }
.mkpi-gap-s   { gap: var(--space-s) !important; }
.mkpi-gap-m   { gap: var(--space-m) !important; }
.mkpi-gap-l   { gap: var(--space-l) !important; }
.mkpi-gap-xl  { gap: var(--space-xl) !important; }
.mkpi-gap-xxl { gap: var(--space-xxl) !important; }

/* Responsive Margin-Resets */
@media (min-width: 768px) {
  .mkpi-mt-md-0 { margin-top: 0 !important; }
  .mkpi-mb-md-0 { margin-bottom: 0 !important; }
}


/* ============================================
   GLOBALE TYPOGRAFIE
   Ersetzt Titillium Web + Roboto Condensed
   durch Inter
   ============================================ */

/* Bootstrap-Variablen ueberschreiben */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-font-sans-serif: var(--mkpi-font);
  --bs-body-font-family: var(--mkpi-font);
  --bs-body-font-size: var(--mkpi-text-body);
  --bs-body-font-weight: var(--mkpi-weight-regular);
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--mkpi-text-primary);
  --bs-body-bg: var(--mkpi-bg-primary);
  --bs-link-color: var(--mkpi-link);
  --bs-link-hover-color: var(--mkpi-accent-hover);
}

body,
body *,
.navbar,
.btn,
.card,
.modal,
input,
textarea,
select {
  font-family: var(--mkpi-font) !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-size: var(--mkpi-text-body);
  line-height: 1.6;
  color: var(--mkpi-text-primary);
  background-color: var(--mkpi-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

ul,
li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* ============================================
   UEBERSCHRIFTEN-HIERARCHIE
   Grosse Schrift = enge Zeilenhoehe + negatives Letter-Spacing
   Kleine Schrift = weite Zeilenhoehe + neutrales Letter-Spacing
   ============================================ */

h1, .h1 {
  font-size: var(--mkpi-text-h1) !important;
  font-weight: var(--mkpi-weight-bold) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  color: var(--mkpi-text-primary);
  margin-bottom: var(--mkpi-space-5);
}

h2, .h2 {
  font-size: var(--mkpi-text-h2) !important;
  font-weight: var(--mkpi-weight-bold) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--mkpi-text-primary);
  margin-bottom: var(--mkpi-space-5);
  /* Optische Ausrichtung: Half-Leading oben entfernen (Progressive Enhancement) */
  text-box-trim: trim-start;
  text-box-edge: cap alphabetic;
}

h3, .h3 {
  font-size: var(--mkpi-text-h3) !important;
  font-weight: var(--mkpi-weight-semibold) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--mkpi-text-primary);
  text-box-trim: trim-start;
  text-box-edge: cap alphabetic;
  margin-bottom: var(--mkpi-space-4);
}

h4, .h4 {
  font-size: var(--mkpi-text-h4) !important;
  font-weight: var(--mkpi-weight-semibold) !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  color: var(--mkpi-text-primary);
  margin-bottom: var(--mkpi-space-5);
}

h5, .h5 {
  font-size: var(--mkpi-text-body) !important;
  font-weight: var(--mkpi-weight-semibold) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  margin-bottom: var(--mkpi-space-3);
}

/* Section-Intro-Text – Einleitender Satz, visuell auf h4-Groesse,
   semantisch h3 unter verstecktem h2 */
.section-intro-text {
  font-size: var(--mkpi-text-h4) !important;
  font-weight: var(--mkpi-weight-semibold) !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  color: var(--mkpi-text-primary);
  margin-bottom: var(--mkpi-space-5);
}

.content-subheadline {
  display: flex;
  align-items: center;
  width: fit-content;
  font-size: var(--mkpi-text-h4) !important;
  font-weight: var(--mkpi-weight-semibold) !important;
  line-height: 1.3 !important;
  margin-top: var(--mkpi-space-8);       /* 3rem Abstand nach oben zum vorherigen Absatz */
  margin-bottom: var(--mkpi-space-4);    /* 1rem Abstand nach unten zum Fliesstext */
  background: var(--mkpi-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Icon innerhalb der Subheadline behaelt eigene Farbe (nicht vom Gradient betroffen) */
.content-subheadline .icon {
  -webkit-text-fill-color: initial;
  color: var(--mkpi-icon-color);
}
.content-subheadline:first-child {
  margin-top: 0;
}
/* Absaetze nach content-subheadline linksbuendig zum Headline-TEXT ausrichten.
   margin-left = Icon-Breite (icon-m: 2rem) + Icon-Abstand (space-m).
   Das Icon steht frei als haengendes Aufzaehlungszeichen links davor. */
.content-subheadline ~ p {
  margin-left: calc(var(--mkpi-icon-size-m) + var(--space-m));
}

/* Gradient-Text – nur gezielt auf einzelne Headlines anwenden, NICHT global */
.text-gradient {
  background: var(--mkpi-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

h6, .h6 {
  font-size: var(--mkpi-text-small) !important;
  font-weight: var(--mkpi-weight-semibold) !important;
  line-height: 1.4 !important;
  letter-spacing: 0.01em !important;
  margin-bottom: var(--mkpi-space-3);
}

.hero-text-headline {
  font-size: var(--mkpi-text-display) !important;
  font-weight: var(--mkpi-weight-extrabold) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.04em !important;
  text-align: center;
  color: var(--mkpi-text-primary-dark);
  /* Premium Multi-Layer Text-Shadow:
     Drei Ebenen erzeugen einen weichen Halo-Effekt
     ohne sichtbaren Offset – hebt Text auf jedem Hintergrund ab */
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.35),
    0 0 30px rgba(0, 0, 0, 0.2),
    0 0 60px rgba(0, 0, 0, 0.1) !important;
}

.hero-text-subline {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem) !important;
  font-weight: var(--mkpi-weight-medium) !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  max-width: 1200px;
  margin: auto 0;
  text-align: center;
  color: var(--mkpi-text-primary-dark);
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(0, 0, 0, 0.25),
    0 0 60px rgba(0, 0, 0, 0.1) !important;
}


.intro-text-headline {
  font-size: var(--mkpi-text-h2) !important;
  font-weight: var(--mkpi-weight-bold) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  display: block;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.intro-text-subline {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem) !important;
  font-weight: var(--mkpi-weight-regular) !important;
  line-height: 1.5 !important;
  color: var(--mkpi-text-secondary);
  display: block;
  margin-top: var(--mkpi-space-3);
  max-width: var(--mkpi-content-narrow);
  margin-left: auto;
  margin-right: auto;
}


.lead {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem) !important;
  font-weight: var(--mkpi-weight-regular) !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: var(--mkpi-text-secondary);
}


/* ============================================
   FLIESSTEXT
   Optimale Lesbarkeit: 45-90 Zeichen pro Zeile
   ============================================ */

p {
  font-size: var(--mkpi-text-body) !important;
  font-weight: var(--mkpi-weight-regular) !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  color: var(--mkpi-text-primary);
  margin-bottom: var(--mkpi-space-4);
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
}

/* Content-Wide: Hebt die 65ch-Begrenzung auf, damit Text, Bilder
   und Headlines auf gleicher Breite laufen (z.B. Redaktionsbereiche) */
.content-wide p {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.content-wide h4 {
  text-align: left;
}

.text-secondary,
.text-muted {
  color: var(--mkpi-text-secondary) !important;
}

.text-success {
  color: var(--mkpi-success) !important;
}

.text-caption,
small,
.small {
  font-size: var(--mkpi-text-small) !important;
  color: var(--mkpi-text-tertiary);
  line-height: 1.5 !important;
}

blockquote,
.blockquote {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem) !important;
  font-weight: var(--mkpi-weight-regular) !important;
  font-style: italic;
  line-height: 1.6 !important;
  color: var(--mkpi-text-primary);
  border-left: none;
  padding-left: 0;
}

strong, b,
.text-bold {
  font-weight: var(--mkpi-weight-semibold) !important;
}

a {
  color: var(--mkpi-link) !important;
  text-decoration: none;
  transition: color var(--mkpi-transition-fast);
}

a:hover {
  color: var(--mkpi-accent-hover) !important;
}

/* Links auf dunklem Hintergrund */
.section-dark a:not(.btn),
.section-black a:not(.btn),
.bg-main-color a:not(.btn) {
  color: var(--mkpi-link-dark) !important;
}

/* Weisse Text-Links beibehalten wo noetig */
.text-white a,
.hero-section a:not(.btn) {
  color: var(--mkpi-text-primary-dark) !important;
}

.text-white a:hover,
.hero-section a:not(.btn):hover {
  color: #FFFFFF !important;
}

/* UPPERCASE komplett entfernen fuer alle Headlines, Buttons und spezielle Elemente */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.hero-text-headline,
.intro-text-headline,
.card-title,
.section-title,
.btn-primary, .btn-mkpi-primary, .btn-cta,
.btn-outline-primary, .btn-mkpi-secondary, .btn-outline-dark,
.stat-card p:last-child {
  text-transform: none !important;
}

/* ============================================
   RESPONSIVE TYPOGRAFIE – Mobile Anpassungen
   Die clamp()-Werte decken das meiste ab,
   hier nur spezielle Mobile-Optimierungen
   ============================================ */

@media (max-width: 575px) {
  h1, .h1,
  h2, .h2 {
    word-break: normal;
    hyphens: none;
    overflow-wrap: break-word;
  }

  p {
    max-width: 100%;
  }

  .hero-text-headline {
    font-size: clamp(2rem, 6vw, 2.75rem) !important;
  }

  .hero-text-subline {
    font-size: clamp(1rem, 3.5vw, 1.25rem) !important;
  }
}



.btn-primary,
.btn-mkpi-primary,
.btn-cta {
  background-color: var(--mkpi-accent) !important;
  border: 2px solid var(--mkpi-accent) !important;
  color: #FFFFFF !important;
  font-size: 1rem;
  font-weight: var(--mkpi-weight-medium);
  padding: var(--mkpi-btn-padding-y) var(--mkpi-btn-padding-x);
  min-height: var(--mkpi-btn-min-height);
  border-radius: var(--mkpi-radius-pill) !important;
  transition: all var(--mkpi-transition-base);
  letter-spacing: -0.01em;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mkpi-btn-gap);
  cursor: pointer;
  text-decoration: none !important;
}

.btn-primary:hover,
.btn-mkpi-primary:hover,
.btn-cta:hover {
  background-color: var(--mkpi-accent-hover) !important;
  border-color: var(--mkpi-accent-hover) !important;
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0, 114, 227, 0.25);
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.btn-primary:active,
.btn-mkpi-primary:active,
.btn-cta:active {
  background-color: var(--mkpi-accent-active) !important;
  border-color: var(--mkpi-accent-active) !important;
  transform: scale(0.98);
  box-shadow: none;
}

.btn-primary:focus-visible,
.btn-mkpi-primary:focus-visible,
.btn-cta:focus-visible {
  outline: 2px solid var(--mkpi-accent);
  outline-offset: 3px;
}

/* Primary auf dunklem Hintergrund – blau beibehalten, kein Invertieren */
.section-dark .btn-primary,
.section-dark .btn-mkpi-primary,
.section-dark .btn-cta,
.section-black .btn-primary,
.section-black .btn-cta,
.bg-dark .btn-primary {
  background-color: var(--mkpi-accent) !important;
  border-color: var(--mkpi-accent) !important;
  color: #FFFFFF !important;
}

.section-dark .btn-primary:hover,
.section-dark .btn-cta:hover,
.section-black .btn-primary:hover,
.section-black .btn-cta:hover,
.bg-dark .btn-primary:hover {
  background-color: var(--mkpi-accent-hover) !important;
  border-color: var(--mkpi-accent-hover) !important;
  color: #FFFFFF !important;
}

/* ---- STUFE 2: Outline Button ---- */

.btn-outline-primary,
.btn-mkpi-secondary,
.btn-outline-dark {
  background-color: transparent !important;
  border: 1.5px solid var(--mkpi-border-light) !important;
  color: var(--mkpi-text-primary) !important;
  font-size: 1rem;
  font-weight: var(--mkpi-weight-medium);
  padding: var(--mkpi-btn-padding-y) var(--mkpi-btn-padding-x);
  min-height: var(--mkpi-btn-min-height);
  border-radius: var(--mkpi-radius-pill) !important;
  transition: all var(--mkpi-transition-base);
  letter-spacing: -0.01em;
  line-height: 1.4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mkpi-btn-gap);
  cursor: pointer;
  text-decoration: none !important;
}

.btn-outline-primary:hover,
.btn-mkpi-secondary:hover,
.btn-outline-dark:hover {
  border-color: var(--mkpi-text-primary) !important;
  background-color: rgba(0, 0, 0, 0.04) !important;
  color: var(--mkpi-text-primary) !important;
  text-decoration: none !important;
}

.btn-outline-primary:active,
.btn-mkpi-secondary:active,
.btn-outline-dark:active {
  background-color: rgba(0, 0, 0, 0.08) !important;
}

/* Outline auf dunklem Hintergrund */
.section-dark .btn-outline-primary,
.section-dark .btn-mkpi-secondary,
.section-dark .btn-outline-dark,
.section-black .btn-outline-primary,
.bg-dark .btn-outline-primary,
.bg-main-color .btn-outline-dark {
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: var(--mkpi-text-primary-dark) !important;
}

.section-dark .btn-outline-primary:hover,
.section-dark .btn-outline-dark:hover,
.section-black .btn-outline-primary:hover,
.bg-dark .btn-outline-primary:hover,
.bg-main-color .btn-outline-dark:hover {
  border-color: rgba(255, 255, 255, 0.7) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

/* Hero: Outline-Button auf Foto-Hintergrund verstaerkt sichtbar */
.hero-section .btn-outline-primary,
.hero-section .btn-mkpi-secondary,
.section-hero .btn-outline-primary,
[class*="hero"] .btn-outline-primary,
[class*="banner"] .btn-outline-primary {
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-weight: var(--mkpi-weight-medium);
  padding: 14px 32px;
  min-height: 48px;
}

.hero-section .btn-outline-primary:hover,
.section-hero .btn-outline-primary:hover,
[class*="hero"] .btn-outline-primary:hover,
[class*="banner"] .btn-outline-primary:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
}

.btn-link,
a.btn-text,
button.btn-text,
.btn-mkpi-text {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--mkpi-link) !important;
  font-weight: var(--mkpi-weight-medium);
  font-size: var(--mkpi-text-body);
  line-height: 1.4;
  padding: 0 !important;
  margin: 0;
  text-decoration: none !important;
  transition: color var(--mkpi-transition-fast);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--mkpi-space-1);
  /* Optische Ausrichtung: Half-Leading unten entfernen */
  margin-block-end: calc(0.5cap - 0.5lh);
}

.btn-link:hover,
a.btn-text:hover,
button.btn-text:hover,
.btn-mkpi-text:hover {
  color: var(--mkpi-accent-hover) !important;
  text-decoration: none !important;
}

/* Text-Link auf dunklem Hintergrund */
.section-dark .btn-link,
.section-dark a.btn-text,
.section-dark .btn-mkpi-text,
.bg-dark .btn-link,
.bg-dark a.btn-text {
  color: var(--mkpi-link-dark) !important;
}

.section-dark .btn-link:hover,
.section-dark a.btn-text:hover,
.section-dark .btn-mkpi-text:hover,
.bg-dark .btn-link:hover,
.bg-dark a.btn-text:hover {
  color: #FFFFFF !important;
}

a.btn-text::after,
button.btn-text::after,
.btn-mkpi-text::after {
  content: ' \203A';
  font-size: 1.1em;
  transition: transform var(--mkpi-transition-fast);
  display: inline-block;
}

a.btn-text:hover::after,
button.btn-text:hover::after,
.btn-mkpi-text:hover::after {
  transform: translateX(3px);
}

/* Download-Links in Artikel-Bereichen: Pfeil + Hover-Animation
   Verwendet in Portfolio-Detailseiten (Infos und Downloads) */
.article-text ul:not(.article-list) {
  list-style: none;
  padding-left: 0 !important;
  margin-bottom: 0;
}

.article-text ul:not(.article-list) li {
  margin-bottom: var(--space-xs);
}

.article-text ul:not(.article-list) li:last-child {
  margin-bottom: 0;
}

.article-text ul:not(.article-list) a {
  font-weight: var(--mkpi-weight-medium);
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: var(--mkpi-space-1);
  transition: color var(--mkpi-transition-fast);
}

.article-text ul:not(.article-list) a::after {
  content: '\203A';
  font-size: 1.1em;
  transition: transform var(--mkpi-transition-fast);
  display: inline-block;
}

.article-text ul:not(.article-list) a:hover::after {
  transform: translateX(3px);
}

/* Artikelbeschreibungs-Liste: Chevron statt Disc-Bullet
   !important noetig um basic.css Global-Reset zu ueberschreiben
   (ul, li { padding: 0 !important; margin: 0 !important; }) */
.article-list {
  list-style: none !important;
  padding-left: 0 !important;
}

.article-list > li {
  padding-left: 1.25em !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: var(--space-xs) !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  position: relative;
  font-weight: var(--mkpi-weight-regular);
  line-height: 1.5;
}

.article-list > li:last-child {
  margin-bottom: 0 !important;
}

.article-list > li::before {
  content: '\203A';
  position: absolute;
  left: 0;
  color: var(--mkpi-text-tertiary);
  font-weight: var(--mkpi-weight-semibold);
  font-size: 1em;
  line-height: inherit;
}

/* Farb-Vererbung fuer Spans innerhalb von Buttons sicherstellen */
.btn span.btn-text,
.btn span.btn-loading,
.btn-sidebar-submit span.btn-text,
.btn-sidebar-submit span.btn-loading {
  color: inherit !important;
}

/* ---- Light / Glass Button (Hero-Bereich) ---- */
.btn-light {
  background-color: rgba(255, 255, 255, 0.65) !important;
  border: none !important;
  color: var(--mkpi-text-primary, #1d1d1f) !important;
  font-size: 1rem;
  font-weight: var(--mkpi-weight-medium);
  padding: var(--mkpi-btn-padding-y) var(--mkpi-btn-padding-x);
  min-height: var(--mkpi-btn-min-height);
  border-radius: var(--mkpi-radius-pill) !important;
  transition: all var(--mkpi-transition-base);
  text-decoration: none !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.btn-light:hover {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: #FFFFFF !important;
  color: var(--mkpi-text-primary, #1d1d1f) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}

/* Hero-Bereich: CTA-Button mit dezentnem Glow */
.hero-section .btn-cta,
.hero-section .btn-primary {
  box-shadow: 0 2px 8px rgba(0, 114, 227, 0.4);
}

.hero-section .btn-cta:hover,
.hero-section .btn-primary:hover {
  box-shadow: 0 4px 16px rgba(0, 114, 227, 0.5);
}

/* ---- Dark Button ---- */
.btn-dark {
  background-color: var(--mkpi-bg-dark) !important;
  border: 2px solid var(--mkpi-bg-dark) !important;
  color: #FFFFFF !important;
  font-size: 1rem;
  font-weight: var(--mkpi-weight-medium);
  padding: var(--mkpi-btn-padding-y) var(--mkpi-btn-padding-x);
  min-height: var(--mkpi-btn-min-height);
  border-radius: var(--mkpi-radius-pill) !important;
  transition: all var(--mkpi-transition-base);
  text-decoration: none !important;
}

.btn-dark:hover {
  background-color: #333336 !important;
  border-color: #333336 !important;
  color: #FFFFFF !important;
}

/* ---- Button T-Shirt-Groessen ----
   Utility-Klassen: .mkpi-btn-xs / -s / -m / -l / -xl
   Anwendung im HTML: <a class="btn btn-cta mkpi-btn-s">
   Jede Klasse setzt Padding, Min-Height und Font-Size. */
.mkpi-btn-xs {
  padding: var(--mkpi-btn-xs-py) var(--mkpi-btn-xs-px) !important;
  font-size: var(--mkpi-btn-xs-font) !important;
  min-height: var(--mkpi-btn-xs-height) !important;
}

.mkpi-btn-s {
  padding: var(--mkpi-btn-s-py) var(--mkpi-btn-s-px) !important;
  font-size: var(--mkpi-btn-s-font) !important;
  min-height: var(--mkpi-btn-s-height) !important;
}

.mkpi-btn-m {
  padding: var(--mkpi-btn-m-py) var(--mkpi-btn-m-px) !important;
  font-size: var(--mkpi-btn-m-font) !important;
  min-height: var(--mkpi-btn-m-height) !important;
}

.mkpi-btn-l {
  padding: var(--mkpi-btn-l-py) var(--mkpi-btn-l-px) !important;
  font-size: var(--mkpi-btn-l-font) !important;
  min-height: var(--mkpi-btn-l-height) !important;
}

.mkpi-btn-xl {
  padding: var(--mkpi-btn-xl-py) var(--mkpi-btn-xl-px) !important;
  font-size: var(--mkpi-btn-xl-font) !important;
  min-height: var(--mkpi-btn-xl-height) !important;
}

/* Legacy-Mapping: Bootstrap .btn-sm → M, .btn-lg → XL */
.btn-lg {
  padding: var(--mkpi-btn-xl-py) var(--mkpi-btn-xl-px) !important;
  font-size: var(--mkpi-btn-xl-font) !important;
  min-height: var(--mkpi-btn-xl-height);
}

.btn-sm {
  padding: var(--mkpi-btn-m-py) var(--mkpi-btn-m-px) !important;
  font-size: var(--mkpi-btn-m-font) !important;
  min-height: var(--mkpi-btn-m-height);
}

/* ---- Button-Gruppe (nebeneinander) ---- */
.btn-group-mkpi,
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mkpi-space-3);
  align-items: center;
}

/* In Cards: Button-Gruppe am unteren Rand */
.card-text .button-group,
.card-text .btn-group-mkpi {
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
  margin-top: auto;
  padding-top: var(--space-l);
}

/* Card-CTA-Buttons: Responsive T-Shirt-Sizing.
   Mobile/Tablet: S (44px, kompakt fuer kleinere Karten).
   Desktop: M (48px, mehr Luft bei groesseren Karten). */
.card-text .button-group .btn-cta,
.card-text .button-group .btn-primary,
.card-text .button-group .btn-mkpi-primary {
  padding: var(--mkpi-btn-s-py) var(--mkpi-btn-s-px) !important;
  min-height: var(--mkpi-btn-s-height) !important;
  font-size: var(--mkpi-btn-s-font) !important;
}

@media (min-width: 992px) {
  .card-text .button-group .btn-cta,
  .card-text .button-group .btn-primary,
  .card-text .button-group .btn-mkpi-primary {
    padding: var(--mkpi-btn-m-py) var(--mkpi-btn-m-px) !important;
    min-height: var(--mkpi-btn-m-height) !important;
    font-size: var(--mkpi-btn-m-font) !important;
  }
}

.button-group .btn-outline-dark,
.button-group .btn-mkpi-secondary {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--mkpi-link) !important;
  font-weight: var(--mkpi-weight-medium);
  font-size: var(--mkpi-text-body);
  padding: 0 !important;
  min-height: auto;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: var(--mkpi-space-1);
  transition: color var(--mkpi-transition-fast);
  text-decoration: none !important;
}

.button-group .btn-outline-dark::after,
.button-group .btn-mkpi-secondary::after {
  content: ' \203A';
  font-size: 1.2em;
  transition: transform var(--mkpi-transition-fast);
  display: inline-block;
}

.button-group .btn-outline-dark:hover,
.button-group .btn-mkpi-secondary:hover {
  color: var(--mkpi-accent-hover) !important;
  background: none !important;
  border: none !important;
  text-decoration: none !important;
}

.button-group .btn-outline-dark:hover::after,
.button-group .btn-mkpi-secondary:hover::after {
  transform: translateX(3px);
}

.btn-page-nav,
a.btn-page-nav {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--mkpi-link) !important;
  font-weight: var(--mkpi-weight-medium);
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  padding: 0 !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: var(--mkpi-space-2);
  transition: color var(--mkpi-transition-fast);
  cursor: pointer;
  line-height: 1.4;
}

.btn-page-nav::after,
a.btn-page-nav::after {
  content: '\2192';
  font-size: 1.1em;
  transition: transform var(--mkpi-transition-fast);
  display: inline-block;
}

.btn-page-nav:hover,
a.btn-page-nav:hover {
  color: var(--mkpi-accent-hover) !important;
  text-decoration: none !important;
}

.btn-page-nav:hover::after,
a.btn-page-nav:hover::after {
  transform: translateX(4px);
}

/* Page-Nav auf dunklem Hintergrund */
.section-dark .btn-page-nav,
.bg-dark .btn-page-nav {
  color: var(--mkpi-link-dark) !important;
}

.section-dark .btn-page-nav:hover,
.bg-dark .btn-page-nav:hover {
  color: #FFFFFF !important;
}

.page-nav-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mkpi-space-6);
  align-items: center;
  justify-content: center;
}


/* ---- Utility: Mehr anzeigen / Read-More ---- */

.read-more-btn {
  background: transparent !important;
  border: 1px solid var(--mkpi-border-light) !important;
  color: var(--mkpi-text-secondary) !important;
  font-weight: var(--mkpi-weight-medium);
  font-size: 0.8125rem !important;
  padding: var(--mkpi-space-2) var(--mkpi-space-5) !important;
  border-radius: var(--mkpi-radius-pill) !important;
  transition: all var(--mkpi-transition-base);
  cursor: pointer;
  display: inline-block;
  min-height: auto;
  line-height: 1.4;
}

.read-more-btn:hover {
  border-color: var(--mkpi-text-primary) !important;
  color: var(--mkpi-text-primary) !important;
  background: rgba(0, 0, 0, 0.03) !important;
}


/* ---- Formular-Buttons ---- */

.btn-success {
  /* Bootstrap-Variablen ueberschreiben */
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: var(--mkpi-success);
  --bs-btn-border-color: var(--mkpi-success);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: var(--mkpi-success-hover);
  --bs-btn-hover-border-color: var(--mkpi-success-hover);
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: var(--mkpi-success-active);
  --bs-btn-active-border-color: var(--mkpi-success-active);
  --bs-btn-disabled-color: #86868B;
  --bs-btn-disabled-bg: #D4EDDA;
  --bs-btn-disabled-border-color: #D4EDDA;
  --bs-btn-disabled-opacity: 1;
  /* Eigene Styles */
  background-color: var(--mkpi-success) !important;
  border: 2px solid var(--mkpi-success) !important;
  color: #FFFFFF !important;
  font-weight: var(--mkpi-weight-medium);
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  border-radius: var(--mkpi-radius-pill) !important;
  padding: var(--mkpi-btn-sm-padding-y) 1.75rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-success:hover {
  background-color: var(--mkpi-success-hover) !important;
  border-color: var(--mkpi-success-hover) !important;
  color: #FFFFFF !important;
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(52, 199, 89, 0.3);
}

.btn-success:active {
  background-color: var(--mkpi-success-active) !important;
  border-color: var(--mkpi-success-active) !important;
  transform: scale(0.98);
  box-shadow: none;
}

.btn-success:focus-visible {
  outline: 2px solid var(--mkpi-success);
  outline-offset: 3px;
}

.btn-success:disabled,
.btn-success.disabled {
  background-color: #D4EDDA !important;
  border-color: #D4EDDA !important;
  color: var(--mkpi-text-tertiary, #86868B) !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.btn-secondary {
  background-color: transparent !important;
  border: 1.5px solid var(--mkpi-border-light) !important;
  color: var(--mkpi-text-secondary) !important;
  font-weight: var(--mkpi-weight-medium);
  border-radius: var(--mkpi-radius-pill) !important;
  transition: all var(--mkpi-transition-base);
}

.btn-secondary:hover {
  border-color: var(--mkpi-text-primary) !important;
  color: var(--mkpi-text-primary) !important;
}


/* Responsive Buttons */
@media (max-width: 575px) {
  .btn-lg {
    padding: var(--mkpi-btn-padding-y) 1.75rem !important;
    font-size: 1rem !important;
  }

  /* Hero-Buttons: horizontal nebeneinander, kompakt.
     flex-wrap als Fallback fuer sehr schmale Displays. */
  .hero-buttons {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mkpi-space-3);
  }

  .hero-buttons .btn {
    width: auto;
    padding: var(--mkpi-btn-s-py) var(--mkpi-btn-s-px) !important;
    font-size: var(--mkpi-btn-s-font) !important;
    min-height: var(--mkpi-btn-s-height) !important;
  }

  /* Button-Gruppen ausserhalb des Hero: vertikal gestapelt */
  .btn-group-mkpi {
    flex-direction: column !important;
    width: 100%;
    align-items: center;
  }

  .btn-group-mkpi .btn,
  .btn-group-mkpi .btn-mkpi-primary {
    width: auto;
    min-width: 14rem;
  }

  .page-nav-group {
    flex-direction: column;
    gap: var(--mkpi-space-4);
    align-items: center;
  }
}


/* ============================================
   NAVIGATION
   ============================================ */

/* Fixed Header – Glassmorphism */
.header {
  background-color: rgba(0, 0, 0, 0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: top 0.3s ease-in-out, background-color var(--mkpi-transition-slow);
}

#header.reveal {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.center .navigation {
  font-weight: var(--mkpi-weight-medium);
  text-transform: none;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

.center .navigation a {
  color: rgba(255, 255, 255, 0.95) !important;
  transition: color var(--mkpi-transition-fast);
  text-decoration: none !important;
}

.center .navigation a:hover {
  color: #FFFFFF !important;
}

/* Dropdown / Sub-Nav – dunkler Glaseffekt */
.center .navigation li ul {
  background-color: rgba(30, 30, 30, 0.95);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--mkpi-radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.center .sub-nav li {
  font-size: 1rem;
  font-weight: var(--mkpi-weight-regular);
  transition: transform 0.3s ease-in-out;
}

/* Hover: Text nach rechts verschieben (Original-Effekt) */
.center .sub-nav li:hover {
  transform: translateX(10px);
}

/* Pfeil-Indikator vor dem Text bei Hover (Original-Effekt) */
.center .sub-nav li:before {
  padding-right: 5px;
  content: "\F285";
  font-family: "Bootstrap-icons";
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.center .sub-nav li:hover:before {
  opacity: 1;
}

.center .sub-nav li a {
  color: rgba(255, 255, 255, 0.75);
}

.center .sub-nav li:hover a {
  color: #FFFFFF;
}

/* Hero Header – sanfter Verlauf fuer Lesbarkeit */
.hero-section-header {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  border-bottom: var(--mkpi-grid-line);
}

/* Sidebar Navigation (Mobile) */
.sidebar-navigation a {
  font-weight: var(--mkpi-weight-medium) !important;
  letter-spacing: 0.01em;
  font-size: var(--mkpi-text-small) !important;
}

.sidebar-navigation .main-nav {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.sidebar-navigation .sub-nav li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Hamburger-Menu Icon */
.right.menu {
  display: flex;
  align-items: center;
  justify-content: center;
}

.right.menu i {
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--mkpi-transition-fast);
  font-size: 1.75rem;
}

.right.menu:hover i {
  color: #FFFFFF;
}

/* Phone Icon */
.phone a {
  color: rgba(255, 255, 255, 0.85) !important;
  transition: color var(--mkpi-transition-fast) !important;
}

.phone a:hover {
  color: #FFFFFF !important;
}

/* Keywords neben Navigation */
.keywords {
  font-size: var(--mkpi-text-caption) !important;
  font-weight: var(--mkpi-weight-medium) !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}


/* ============================================
   HERO-SECTION SPACING
   Konsistenter Abstand: Buttons → Hero-Ende = Section-Padding
   ============================================ */

/* Hero-Buttons: gap zentral steuern (ersetzt Bootstrap gap-3) */
.hero-buttons {
  gap: var(--mkpi-space-4);
}

/* Seiten ohne Hero-Bild: dunkler Header-Hintergrund fuer Kontrast zur weissen Navigation */
.page-no-hero .hero-section {
  height: 90px;
  background-color: var(--mkpi-bg-dark);
}

/* Leere 90px/80px/50px Footer-Zeile im Hero-Grid entfernen,
   da auf Produktseiten kein hero-section-footer verwendet wird */
.page-messestand .hero-section,
.page-eventausstattung .hero-section,
.page-virtueller-messestand .hero-section,
.page-virtueller-showroom .hero-section,
.page-podcast .hero-section,
.page-insights .hero-section,
.page-karriere .hero-section {
  grid-template-rows: 90px 1fr;
}

/* Button-Container: padding-bottom = section-padding fuer konsistenten Abstand */
.page-messestand .hero-button-container,
.page-eventausstattung .hero-button-container,
.page-virtueller-messestand .hero-button-container,
.page-virtueller-showroom .hero-button-container,
.page-podcast .hero-button-container,
.page-insights .hero-button-container,
.page-karriere .hero-button-container {
  padding-bottom: var(--mkpi-section-padding);
}

@media (max-width: 1400px) {
  .page-messestand .hero-section,
  .page-eventausstattung .hero-section,
  .page-virtueller-messestand .hero-section,
  .page-virtueller-showroom .hero-section,
  .page-podcast .hero-section,
  .page-insights .hero-section,
  .page-karriere .hero-section {
    grid-template-rows: 80px 1fr;
  }
}

@media (max-width: 1200px) {
  .page-messestand .hero-section,
  .page-eventausstattung .hero-section,
  .page-virtueller-messestand .hero-section,
  .page-virtueller-showroom .hero-section,
  .page-podcast .hero-section,
  .page-insights .hero-section,
  .page-karriere .hero-section {
    grid-template-rows: 50px 1fr;
  }
}

/* Tablet-Landscape: Hero vergroessern, da 61.8dvh bei begrenzter
   Viewport-Hoehe zu wenig Luft unter den CTA-Buttons laesst.
   max-height statt max-width, da das Problem die begrenzte Hoehe ist.
   Greift bei iPad 11" (834px), iPad Air (~820px), aber NICHT bei
   iPad 12.9" (1024px) oder Desktop-Monitoren (>900px). */
@media (orientation: landscape) and (max-height: 900px) {
  .page-messestand .hero-section,
  .page-eventausstattung .hero-section,
  .page-virtueller-messestand .hero-section,
  .page-virtueller-showroom .hero-section,
  .page-podcast .hero-section,
  .page-insights .hero-section,
  .page-karriere .hero-section {
    height: 75dvh;
  }
}

/* Mobile-Landscape: Viewport-Hoehe ist extrem begrenzt (~375-430px).
   Hero darf ueber den Viewport hinauswachsen, damit Headline,
   Subline und Buttons vollstaendig sichtbar bleiben.
   max-height: 500px grenzt sicher gegen Tablets ab. */
@media (orientation: landscape) and (max-height: 500px) {
  .page-messestand .hero-section,
  .page-eventausstattung .hero-section,
  .page-virtueller-messestand .hero-section,
  .page-virtueller-showroom .hero-section,
  .page-podcast .hero-section,
  .page-insights .hero-section,
  .page-karriere .hero-section,
  .page-index .hero-section {
    height: auto;
    min-height: 100dvh;
  }

  .page-messestand .hero-button-container,
  .page-eventausstattung .hero-button-container,
  .page-virtueller-messestand .hero-button-container,
  .page-virtueller-showroom .hero-button-container,
  .page-podcast .hero-button-container,
  .page-insights .hero-button-container,
  .page-karriere .hero-button-container {
    padding-bottom: var(--mkpi-section-padding);
  }

  /* Index-Hero: Grid-Spacer reduzieren, Text einruecken.
     38.2vh waere ~163px – viel zu viel bei ~430px Viewport-Hoehe.
     Stattdessen kompakter Abstand + grosszuegiger horizontaler Rand
     fuer bessere Lesbarkeit und Premium-Wirkung. */
  .page-index .hero-section-content > .center-large {
    grid-template-rows: var(--space-xl) max-content auto;
    padding: 0 clamp(2rem, 8vw, 6rem);
  }

  .page-index .hero-text-headline {
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
  }

  .page-index .hero-text-subline {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mobile-Portrait: Hero darf wachsen, damit Buttons nicht ueberlaufen */
@media (max-width: 576px) and (orientation: portrait) {
  .page-messestand .hero-section,
  .page-eventausstattung .hero-section,
  .page-virtueller-messestand .hero-section,
  .page-virtueller-showroom .hero-section,
  .page-podcast .hero-section,
  .page-insights .hero-section {
    height: auto;
    min-height: 61.8dvh;
  }

  .page-messestand .hero-button-container,
  .page-eventausstattung .hero-button-container,
  .page-virtueller-messestand .hero-button-container,
  .page-virtueller-showroom .hero-button-container,
  .page-podcast .hero-button-container,
  .page-insights .hero-button-container {
    padding-bottom: var(--space-xl);
  }
}


/* ============================================
   SEKTIONS-SYSTEM
   ============================================ */

section,
.section {
  padding-top: var(--mkpi-section-padding);
  padding-bottom: var(--mkpi-section-padding);
}

.section-header {
  text-align: center;
  margin-bottom: var(--mkpi-section-gap);
}

.section-header p {
  max-width: var(--mkpi-content-narrow);
  margin-left: auto;
  margin-right: auto;
}

/* Section-CTA (Call-to-Action / Page-Nav am Ende eines Abschnitts) */
.section-cta {
  text-align: center;
  margin-top: var(--mkpi-section-gap);
}

section.portfolio-navigation,
.portfolio-navigation {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: var(--mkpi-space-5) !important;
}

/* Grosse Sektionen (Hero, CTA-Banner, Kernbereiche) */
.section-hero,
.section-featured {
  padding-top: clamp(5rem, 8vw + 2rem, 10rem);
  padding-bottom: clamp(5rem, 8vw + 2rem, 10rem);
}

/* Kompakte Sektionen (Logos, schmale Baender) */
.section-compact {
  padding-top: clamp(2rem, 3vw + 0.5rem, 4rem);
  padding-bottom: clamp(2rem, 3vw + 0.5rem, 4rem);
}


/* ============================================
   INNERE SEKTIONS-ABSTAENDE
   Abstand zwischen Headline und Content
   ============================================ */

section h2,
.section h2 {
  margin-bottom: clamp(2rem, 3vw, 3.5rem);
}

section h2 + p,
section h2 + .lead,
.section h2 + p {
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
  max-width: var(--mkpi-content-narrow);
  margin-left: auto;
  margin-right: auto;
}

.content-block + .content-block,
.row + .row {
  margin-top: clamp(3rem, 4vw + 0.5rem, 5rem);
}


/* ============================================
   SECTION DIVIDER
   ============================================ */

.section-divider {
  width: 100%;
  max-width: var(--mkpi-content-width);
  margin: 0 auto;
  border: none;
  border-top: 1px solid var(--mkpi-border-light);
  opacity: 0.6;
}

.section-dark .section-divider,
.bg-dark .section-divider {
  border-top-color: var(--mkpi-border-dark);
}


/* Bild-Spalte: Bild fuellt volle Spaltenhoehe (fuer Row-Alignment) */
.mkpi-img-cover {
  display: flex;
}

.mkpi-img-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ============================================
   SPLIT-BLOCK – Bild-Text-Layout
   Wiederverwendbares Split-Layout mit Bild auf
   einer Seite und Text auf der anderen.
   ============================================ */

.mkpi-split-block img.img-fluid {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Optische Ausrichtung: Erster Absatz buendig mit Bild-Oberkante */
.mkpi-split-block .row > [class*="col"] > p:first-child {
  margin-block-start: calc(0.5cap - 0.5lh);
}


.mkpi-split-block .d-flex.align-items-start {
  margin-bottom: var(--mkpi-space-4) !important;
}

.mkpi-split-block .d-flex.align-items-start:last-child {
  margin-bottom: 0 !important;
}

.mkpi-split-block .d-flex.align-items-start span {
  font-size: var(--mkpi-text-small) !important;
  color: var(--mkpi-text-secondary) !important;
  line-height: 1.5 !important;
}

.mkpi-split-block .d-flex.align-items-start span .text-bold {
  color: var(--mkpi-text-primary) !important;
}

.mkpi-split-block .d-flex.align-items-start i {
  font-size: 0.875rem;
  opacity: 0.7;
}

/* Falls die Bloecke in separaten Rows liegen */
section .row + h2,
section .row + h3 {
  margin-top: clamp(4rem, 6vw, 7rem);
}


.section-light {
  background-color: var(--mkpi-bg-primary) !important;
  color: var(--mkpi-text-primary);
}

.section-light h1, .section-light h2, .section-light h3,
.section-light h4, .section-light h5, .section-light h6 {
  color: var(--mkpi-text-primary);
}

.section-light p {
  color: var(--mkpi-text-primary);
}

.section-light .intro-text-subline {
  color: var(--mkpi-text-secondary);
}

.section-gray {
  background-color: var(--mkpi-bg-secondary) !important;
  color: var(--mkpi-text-primary);
}

.section-gray h1, .section-gray h2, .section-gray h3,
.section-gray h4, .section-gray h5, .section-gray h6 {
  color: var(--mkpi-text-primary);
}

.section-gray p {
  color: var(--mkpi-text-primary);
}

.section-gray .intro-text-subline {
  color: var(--mkpi-text-secondary);
}

.section-dark {
  background-color: var(--mkpi-bg-dark) !important;
  color: var(--mkpi-text-primary-dark);
}

.section-dark h1, .section-dark h2, .section-dark h3,
.section-dark h4, .section-dark h5, .section-dark h6,
.section-dark .intro-text-headline {
  color: var(--mkpi-text-primary-dark) !important;
}

.section-dark p {
  color: var(--mkpi-text-secondary-dark);
  line-height: 1.7 !important;
}

.section-dark .intro-text-subline {
  color: var(--mkpi-text-secondary-dark) !important;
}

.section-dark a:not(.btn) {
  color: var(--mkpi-link-dark) !important;
}

.section-dark .text-bold,
.section-dark strong, .section-dark b {
  color: var(--mkpi-text-primary-dark);
}

/* Markenfarbene Sektionen (Hauptfarbe als Hintergrund, erbt section-dark Textstile) */
.section-brand {
  background-color: var(--mkpi-bg-dark) !important;
}

.section-black {
  background-color: var(--mkpi-bg-hero) !important;
  color: var(--mkpi-text-primary-dark);
}

.section-black h1, .section-black h2, .section-black h3,
.section-black h4, .section-black h5, .section-black h6 {
  color: var(--mkpi-text-primary-dark) !important;
}

.section-black p {
  color: var(--mkpi-text-secondary-dark);
  line-height: 1.7 !important;
}

/* Bestehende dunkle Klassen kompatibel machen */
.bg-main-color {
  background-color: var(--mkpi-bg-dark) !important;
  color: var(--mkpi-text-primary-dark);
}

.bg-main-color h1, .bg-main-color h2, .bg-main-color h3,
.bg-main-color h4, .bg-main-color .intro-text-headline {
  color: var(--mkpi-text-primary-dark) !important;
}

.bg-main-color p {
  color: var(--mkpi-text-secondary-dark);
}

.bg-main-color .intro-text-subline {
  color: var(--mkpi-text-secondary-dark) !important;
}

.section-bg-sustainability {
  background-color: var(--mkpi-bg-dark) !important;
  color: var(--mkpi-text-primary-dark);
}

.section-bg-sustainability h1, .section-bg-sustainability h2,
.section-bg-sustainability h3, .section-bg-sustainability h4,
.section-bg-sustainability .intro-text-headline {
  color: var(--mkpi-text-primary-dark) !important;
}

.section-bg-sustainability p {
  color: var(--mkpi-text-secondary-dark);
}

.section-bg-sustainability .intro-text-subline {
  color: var(--mkpi-text-secondary-dark) !important;
}

/* Cards innerhalb Sustainability: weiss auf Foto-Hintergrund */
.section-bg-sustainability .card {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12),
              0 8px 32px rgba(0, 0, 0, 0.08) !important;
}

.section-bg-sustainability .card h3,
.section-bg-sustainability .card h4 {
  color: var(--mkpi-text-primary) !important;
}

.section-bg-sustainability .card p {
  color: var(--mkpi-text-secondary) !important;
}


/* ============================================
   BOOTSTRAP ROW GUTTER OVERRIDE
   Horizontales Spacing an T-Shirt-System angleichen,
   damit row-gap (via mkpi-mb-l) und column-gap
   auf allen Viewports identisch sind.
   ============================================ */

section .row {
  --bs-gutter-x: var(--space-l);
}

/* Explizite Bootstrap-Gutter-Klassen wiederherstellen (Desktop) */
@media (min-width: 992px) {
  section .g-lg-5 {
    --bs-gutter-x: 3rem;
  }
}


/* ============================================
   CARDS
   Border-Entfernung global: Schatten statt Borders
   ============================================ */

.card,
.card-wrapper,
.feature-card,
.service-card,
[class*="card"] {
  border: none !important;
  outline: none !important;
}

.card {
  background-color: var(--mkpi-card-bg) !important;
  border-radius: var(--mkpi-radius-lg) !important;
  box-shadow: var(--mkpi-card-shadow) !important;
  transition: all var(--mkpi-transition-base);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--mkpi-card-shadow-hover) !important;
  transform: translateY(-2px);
}

.card-body {
  padding: var(--space-xl) !important;
}

.card-title {
  font-size: var(--mkpi-text-h4) !important;
  font-weight: var(--mkpi-weight-semibold) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: var(--mkpi-space-3);
}

.card-text {
  font-size: var(--mkpi-text-body) !important;
  color: var(--mkpi-text-secondary);
  line-height: 1.6 !important;
}
/* In Cards: Text linksbuendig, max-width/Zentrierung vom globalen p aufheben */
.card-text p,
.card p {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Cards auf dunklem Hintergrund – kein Border, Glaseffekt */
.section-dark .card,
.section-black .card {
  background-color: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2),
              0 4px 16px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
}

.section-dark .card:hover,
.section-black .card:hover {
  background-color: rgba(255, 255, 255, 0.11) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
              0 8px 32px rgba(0, 0, 0, 0.2) !important;
  transform: translateY(-2px);
}

.section-dark .card h3, .section-dark .card h4,
.section-dark .card-title {
  color: var(--mkpi-text-primary-dark) !important;
}

.section-dark .card p,
.section-dark .card-text {
  color: var(--mkpi-text-secondary-dark) !important;
}

/* Cards auf grauem Hintergrund */
.section-gray .card {
  background-color: var(--mkpi-bg-primary) !important;
}


/* ============================================
   ICON-SYSTEM – CSS mask-image (Lucide)
   Verwendung: <i class="icon icon-NAME icon-SIZE icon-COLOR"></i>
   SVGs liegen in /images/icons/ (komplette Lucide-Bibliothek).
   Neues Icon nutzen = 1 CSS-Zeile hier ergaenzen.
   ============================================ */

/* Basis-Klasse – jedes Icon braucht .icon + .icon-NAME */
.icon {
  display: inline-block;
  width: var(--mkpi-icon-size-m);      /* Default: 32px */
  height: var(--mkpi-icon-size-m);
  background-color: currentColor;       /* Farbe erbt vom Eltern-Element */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Groessen-Klassen (Token-basiert) */
.icon-s  { width: var(--mkpi-icon-size-s);  height: var(--mkpi-icon-size-s);  }  /* 24px */
.icon-m  { width: var(--mkpi-icon-size-m);  height: var(--mkpi-icon-size-m);  }  /* 32px */
.icon-l  { width: var(--mkpi-icon-size-l);  height: var(--mkpi-icon-size-l);  }  /* 48px */
.icon-xl { width: var(--mkpi-icon-size-xl); height: var(--mkpi-icon-size-xl); }  /* 64px */

/* Farb-Klassen (optional – Icon erbt standardmaessig via currentColor) */
.icon-accent  { color: var(--mkpi-accent); }      /* Interaktiv – nur fuer klickbare Icons */
.icon-teal    { color: var(--mkpi-icon-color); }   /* Dekorativ – kleine Icons (inline, Listen) */
.icon-success { color: var(--mkpi-success); }
.icon-dark    { color: var(--mkpi-text-primary); }
.icon-light   { color: var(--mkpi-text-primary-dark); }

/* Gradient-Klasse – fuer grosse dekorative Icons (Cards, Features) */
.icon-gradient {
  background: var(--mkpi-gradient);
  /* ueberschreibt background-color: currentColor der Basis-Klasse */
}

/* ---- Icon-Definitionen (mask-image pro genutztem Icon) ----
   Alphabetisch sortiert. Neues Icon = 1 Zeile ergaenzen.    */
.icon-circle-minus     { -webkit-mask-image: url(/images/icons/circle-minus.svg);     mask-image: url(/images/icons/circle-minus.svg); }
.icon-circle-dollar-sign { -webkit-mask-image: url(/images/icons/circle-dollar-sign.svg); mask-image: url(/images/icons/circle-dollar-sign.svg); }
.icon-circle-plus      { -webkit-mask-image: url(/images/icons/circle-plus.svg);      mask-image: url(/images/icons/circle-plus.svg); }
.icon-clipboard-list   { -webkit-mask-image: url(/images/icons/clipboard-list.svg);   mask-image: url(/images/icons/clipboard-list.svg); }
.icon-download         { -webkit-mask-image: url(/images/icons/download.svg);         mask-image: url(/images/icons/download.svg); }
.icon-external-link    { -webkit-mask-image: url(/images/icons/external-link.svg);    mask-image: url(/images/icons/external-link.svg); }
.icon-euro             { -webkit-mask-image: url(/images/icons/euro.svg);             mask-image: url(/images/icons/euro.svg); }
.icon-eye              { -webkit-mask-image: url(/images/icons/eye.svg);              mask-image: url(/images/icons/eye.svg); }
.icon-file-text        { -webkit-mask-image: url(/images/icons/file-text.svg);        mask-image: url(/images/icons/file-text.svg); }
.icon-lightbulb        { -webkit-mask-image: url(/images/icons/lightbulb.svg);        mask-image: url(/images/icons/lightbulb.svg); }
.icon-settings         { -webkit-mask-image: url(/images/icons/settings.svg);         mask-image: url(/images/icons/settings.svg); }
.icon-sliders          { -webkit-mask-image: url(/images/icons/sliders.svg);          mask-image: url(/images/icons/sliders.svg); }
.icon-trophy           { -webkit-mask-image: url(/images/icons/trophy.svg);           mask-image: url(/images/icons/trophy.svg); }
.icon-x                { -webkit-mask-image: url(/images/icons/x.svg);                mask-image: url(/images/icons/x.svg); }
.icon-blocks           { -webkit-mask-image: url(/images/icons/blocks.svg);           mask-image: url(/images/icons/blocks.svg); }
.icon-bar-chart-2      { -webkit-mask-image: url(/images/icons/bar-chart-2.svg);      mask-image: url(/images/icons/bar-chart-2.svg); }
.icon-box              { -webkit-mask-image: url(/images/icons/box.svg);              mask-image: url(/images/icons/box.svg); }
.icon-boxes            { -webkit-mask-image: url(/images/icons/boxes.svg);            mask-image: url(/images/icons/boxes.svg); }
.icon-calendar-check   { -webkit-mask-image: url(/images/icons/calendar-check.svg);   mask-image: url(/images/icons/calendar-check.svg); }
.icon-camera           { -webkit-mask-image: url(/images/icons/camera.svg);           mask-image: url(/images/icons/camera.svg); }
.icon-clock            { -webkit-mask-image: url(/images/icons/clock.svg);            mask-image: url(/images/icons/clock.svg); }
.icon-cloud            { -webkit-mask-image: url(/images/icons/cloud.svg);            mask-image: url(/images/icons/cloud.svg); }
.icon-code             { -webkit-mask-image: url(/images/icons/code.svg);             mask-image: url(/images/icons/code.svg); }
.icon-globe            { -webkit-mask-image: url(/images/icons/globe.svg);            mask-image: url(/images/icons/globe.svg); }
.icon-headphones       { -webkit-mask-image: url(/images/icons/headphones.svg);       mask-image: url(/images/icons/headphones.svg); }
.icon-layers           { -webkit-mask-image: url(/images/icons/layers.svg);           mask-image: url(/images/icons/layers.svg); }
.icon-leaf             { -webkit-mask-image: url(/images/icons/leaf.svg);             mask-image: url(/images/icons/leaf.svg); }
.icon-map-pin          { -webkit-mask-image: url(/images/icons/map-pin.svg);          mask-image: url(/images/icons/map-pin.svg); }
.icon-message-circle   { -webkit-mask-image: url(/images/icons/message-circle.svg);   mask-image: url(/images/icons/message-circle.svg); }
.icon-monitor          { -webkit-mask-image: url(/images/icons/monitor.svg);          mask-image: url(/images/icons/monitor.svg); }
.icon-paintbrush       { -webkit-mask-image: url(/images/icons/paintbrush.svg);       mask-image: url(/images/icons/paintbrush.svg); }
.icon-palette          { -webkit-mask-image: url(/images/icons/palette.svg);          mask-image: url(/images/icons/palette.svg); }
.icon-pen-tool         { -webkit-mask-image: url(/images/icons/pen-tool.svg);         mask-image: url(/images/icons/pen-tool.svg); }
.icon-pencil-ruler     { -webkit-mask-image: url(/images/icons/pencil-ruler.svg);     mask-image: url(/images/icons/pencil-ruler.svg); }
.icon-play-circle      { -webkit-mask-image: url(/images/icons/play-circle.svg);      mask-image: url(/images/icons/play-circle.svg); }
.icon-recycle          { -webkit-mask-image: url(/images/icons/recycle.svg);          mask-image: url(/images/icons/recycle.svg); }
.icon-refresh-cw       { -webkit-mask-image: url(/images/icons/refresh-cw.svg);       mask-image: url(/images/icons/refresh-cw.svg); }
.icon-rotate-3d        { -webkit-mask-image: url(/images/icons/rotate-3d.svg);        mask-image: url(/images/icons/rotate-3d.svg); }
.icon-sparkles         { -webkit-mask-image: url(/images/icons/sparkles.svg);         mask-image: url(/images/icons/sparkles.svg); }
.icon-tree-pine        { -webkit-mask-image: url(/images/icons/tree-pine.svg);        mask-image: url(/images/icons/tree-pine.svg); }
.icon-truck            { -webkit-mask-image: url(/images/icons/truck.svg);            mask-image: url(/images/icons/truck.svg); }
.icon-video            { -webkit-mask-image: url(/images/icons/video.svg);            mask-image: url(/images/icons/video.svg); }
.icon-wrench           { -webkit-mask-image: url(/images/icons/wrench.svg);           mask-image: url(/images/icons/wrench.svg); }
.icon-zap              { -webkit-mask-image: url(/images/icons/zap.svg);              mask-image: url(/images/icons/zap.svg); }

/* FAQ-Seite Icons */
.icon-building-2       { -webkit-mask-image: url(/images/icons/building-2.svg);       mask-image: url(/images/icons/building-2.svg); }
.icon-package          { -webkit-mask-image: url(/images/icons/package.svg);          mask-image: url(/images/icons/package.svg); }
.icon-phone            { -webkit-mask-image: url(/images/icons/phone.svg);            mask-image: url(/images/icons/phone.svg); }
.icon-arrow-right      { -webkit-mask-image: url(/images/icons/arrow-right.svg);      mask-image: url(/images/icons/arrow-right.svg); }
.icon-chevron-down     { -webkit-mask-image: url(/images/icons/chevron-down.svg);     mask-image: url(/images/icons/chevron-down.svg); }

/* Karriere-Seite Icons */
.icon-briefcase        { -webkit-mask-image: url(/images/icons/briefcase.svg);        mask-image: url(/images/icons/briefcase.svg); }
.icon-user-check       { -webkit-mask-image: url(/images/icons/user-check.svg);       mask-image: url(/images/icons/user-check.svg); }
.icon-star             { -webkit-mask-image: url(/images/icons/star.svg);             mask-image: url(/images/icons/star.svg); }
.icon-send             { -webkit-mask-image: url(/images/icons/send.svg);             mask-image: url(/images/icons/send.svg); }
.icon-mail             { -webkit-mask-image: url(/images/icons/mail.svg);             mask-image: url(/images/icons/mail.svg); }

/* ============================================
   SERVICE-CARDS / FEATURE-CARDS – Icon-Container
   Steuern Layout (Zentrierung, Abstand) und Farbe.
   Icon-Groesse wird per .icon-l / .icon-xl auf dem <i> gesetzt.
   ============================================ */

/* Icon-Container – Gradient (grosse dekorative Icons) */
.service-icon-blue {
  margin: 0 auto var(--mkpi-space-5);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Grosse dekorative Icons: Gradient statt Solid-Farbe */
.service-icon-blue .icon {
  background: var(--mkpi-gradient);
  /* background statt background-color => Gradient wird via mask sichtbar */
}

/* Icon-Container – Gruen (Nachhaltigkeit) */
.service-icon-green {
  margin: 0 auto var(--mkpi-space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mkpi-success);
}

/* Responsive Cards */
@media (max-width: 575px) {
  .card-body {
    padding: var(--mkpi-space-5) !important;
  }

  .card {
    border-radius: var(--mkpi-radius-md) !important;
  }
}


/* ============================================
   LEISTUNGSBESCHREIBUNG – Vertikaler Rhythmus
   Mehr Raum zwischen den Textbloecken
   ============================================ */

/* Headlines mit Icons in Leistungs-Abschnitten */
span.text-bold.fs-4 {
  margin-top: clamp(2rem, 3vw, 3rem);
  padding-top: clamp(2rem, 3vw, 3rem);
  border-top: 1px solid var(--mkpi-border-light);
  display: flex;
  align-items: center;
  gap: var(--mkpi-space-3);
  font-size: var(--mkpi-text-h4, clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem)) !important;
  font-weight: var(--mkpi-weight-semibold) !important;
  line-height: 1.3;
}

span.text-bold.fs-4:first-of-type {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

span.text-bold.fs-4 i {
  flex-shrink: 0;
  opacity: 0.7;
}


/* Location-Cards: Stacking-Gap auf Mobile wenn Karten untereinander */
@media (max-width: 767.98px) {
  .location-cards > [class*="col"] {
    margin-bottom: var(--space-l);
  }

  .location-cards > [class*="col"]:last-child {
    margin-bottom: 0;
  }
}


/* ============================================
   STATISTIKEN-SEKTION
   Grosse Zahlen auf dunklem Hintergrund
   ============================================ */

/* Counter-Cards Spalten: Stacking-Gap nur wenn Karten umbrechen */
@media (max-width: 991.98px) {
  .counter-cards > [class*="col"] {
    margin-bottom: var(--space-l);
  }
}

.counter-cards .card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--mkpi-space-6) var(--mkpi-space-5) !important;
}

.stat-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* Prefix ueber der Zahl: "mehr als", "ueber" etc. */
.stat-card p:first-child {
  display: block;
  font-size: 0.75rem !important;
  font-weight: var(--mkpi-weight-regular) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Die Zahl – mittig zwischen Prefix und Label */
.stat-card h3,
.stat-card .counter-value {
  font-size: clamp(2.75rem, 2.25rem + 2.25vw, 4rem) !important;
  font-weight: var(--mkpi-weight-extrabold) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  max-width: none !important;
}

.stat-card p:last-child {
  font-size: 1rem !important;
  font-weight: var(--mkpi-weight-medium) !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Counter auf hellem Hintergrund */
.section-light .stat-card .counter-value,
.section-gray .stat-card .counter-value,
.counter-section.section-light .stat-card .counter-value,
.counter-section.section-gray .stat-card .counter-value {
  color: var(--mkpi-text-primary) !important;
}

.section-light .stat-card p:first-child,
.section-gray .stat-card p:first-child,
.counter-section.section-light .stat-card p:first-child,
.counter-section.section-gray .stat-card p:first-child {
  color: var(--mkpi-text-secondary) !important;
}

.section-light .stat-card p:last-child,
.section-gray .stat-card p:last-child,
.counter-section.section-light .stat-card p:last-child,
.counter-section.section-gray .stat-card p:last-child {
  color: var(--mkpi-text-primary) !important;
}

/* Auf dunklem Hintergrund */
.section-dark .stat-card h3,
.section-dark .counter-value {
  color: var(--mkpi-text-primary-dark) !important;
}

.section-dark .stat-card p:first-child {
  color: rgba(255, 255, 255, 0.4) !important;
}

.section-dark .stat-card p:last-child {
  color: var(--mkpi-text-secondary-dark) !important;
}

/* Counter-Cards mit explizitem bg-success: Gruenen Hintergrund
   gegen den globalen .card { background: white } durchsetzen.
   Bewusste Ausnahme fuer thematisch passende Bereiche (z.B. Umweltschutz). */
.counter-cards .card.bg-success {
  background-color: var(--bs-success, #198754) !important;
}

.counter-cards .card.bg-success:hover {
  background-color: #157347 !important;
  box-shadow: 0 4px 16px rgba(25, 135, 84, 0.35),
              0 8px 32px rgba(25, 135, 84, 0.18) !important;
}

.counter-cards .card.bg-success .stat-card h3,
.counter-cards .card.bg-success .stat-card .counter-value,
.counter-cards .card.bg-success .stat-card p,
.counter-cards .card.bg-success .stat-card small {
  color: #fff !important;
}

.counter-cards .card.bg-success .stat-card small {
  opacity: 0.75;
}

/* Text-Gradient Gruen – fuer thematische Headlines (Umweltschutz etc.) */
.text-gradient-green {
  background: linear-gradient(135deg, #198754 0%, #20c997 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-green a {
  background: linear-gradient(135deg, #198754 0%, #20c997 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
}


/* ============================================
   TESTIMONIALS
   Dekoratives Anfuehrungszeichen, zentriert
   ============================================ */

.testimonial-item {
  text-align: center;
  padding: 0 var(--space-xl);
}

.testimonial-text {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.25rem) !important;
  font-weight: var(--mkpi-weight-regular) !important;
  font-style: italic;
  line-height: 1.65 !important;
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-xl);
  position: relative;
}

.testimonial-text::before {
  content: '\201C';
  display: block;
  font-size: 5rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  color: var(--mkpi-accent, #0071E3);
  opacity: 0.4;
  margin-bottom: var(--mkpi-space-4);
  text-align: center;
}

/* Auf dunklem Hintergrund */
.section-dark .testimonial-text,
.bg-main-color .testimonial-text {
  color: var(--mkpi-text-primary-dark) !important;
}

.testimonial-author {
  font-size: var(--mkpi-text-body) !important;
  font-weight: var(--mkpi-weight-semibold) !important;
  margin-bottom: var(--mkpi-space-1) !important;
}

.testimonial-company {
  font-size: var(--mkpi-text-small) !important;
  font-weight: var(--mkpi-weight-regular) !important;
  color: var(--mkpi-text-secondary-dark) !important;
  margin-bottom: 0 !important;
}

.testimonial-image img {
  border-radius: var(--mkpi-radius-md);
}

.testimonial-content {
  padding: 0;
  text-align: center !important;
}

.testimonial-author,
.testimonial-company {
  text-align: center !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ============================================
   FAQ AKKORDEON
   ============================================ */

.product-faq .accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--mkpi-border-light);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: 0;
  max-width: var(--mkpi-content-medium);
  margin-left: auto;
  margin-right: auto;
}

.product-faq .accordion-item {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid var(--mkpi-border-light) !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

.product-faq .accordion-item:first-child {
  border-top: 1px solid var(--mkpi-border-light) !important;
}

.product-faq .accordion-button {
  font-size: var(--mkpi-text-body) !important;
  font-weight: var(--mkpi-weight-semibold) !important;
  color: var(--mkpi-text-primary) !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: var(--mkpi-space-5) 0 !important;
  line-height: 1.4 !important;
  border-radius: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--mkpi-space-4);
}

.product-faq .accordion-button:not(.collapsed) {
  color: var(--mkpi-text-primary) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.product-faq .accordion-button:focus {
  box-shadow: none !important;
}

/* Chevron-Pfeil rechts: nach unten = geschlossen, nach oben = offen */
.product-faq .accordion-button::after {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: auto;
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231d1d1f'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1.1rem;
  transition: transform var(--mkpi-transition-base);
  transform: rotate(0deg);
}

.product-faq .accordion-button:not(.collapsed)::after {
  transform: rotate(-180deg);
}

.product-faq .accordion-body {
  padding: 0 0 var(--mkpi-space-5) 0 !important;
  font-size: var(--mkpi-text-body) !important;
  color: var(--mkpi-text-secondary) !important;
  line-height: 1.6 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.product-faq .accordion-body p {
  color: var(--mkpi-text-secondary);
}

/* FAQ Text-Styling */
.product-faq .faq-bold {
  font-weight: var(--mkpi-weight-semibold) !important;
}

/* Accordion Header h2 zuruecksetzen (Bootstrap nutzt h2 fuer Header) */
.product-faq .accordion-header {
  font-size: inherit !important;
  margin-bottom: 0 !important;
}


/* ============================================
   KUNDENLOGOS
   Einheitliche Premium-Darstellung: Graustufen, gleiche Hoehe,
   Farbe nur bei Hover
   ============================================ */

.client-logos,
.customer-logos,
.logo-grid,
.partner-logos,
[class*="logo-section"] .row,
[class*="kunden"] .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 3vw, 4rem);
}

/* Jedes Logo: einheitliche Box, gut sichtbar in Graustufen
   Achtung: .logo-box / .gallery-slider .logo-box bewusst NICHT hier – die Bilder liegen
   in Bootstrap .ratio (direct child = 100% Breite/Höhe); height:36px/max-width:140px
   würden dort die Darstellung zerstören (weiße Kästchen). Siehe eigene Regel unten. */
.client-logos img,
.customer-logos img,
.logo-grid img,
.partner-logos img,
[class*="logo"] .card img,
[class*="kunden"] img {
  height: 36px !important;
  width: auto !important;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 1;
  transition: all var(--mkpi-transition-base);
}

.client-logos img:hover,
.customer-logos img:hover,
.logo-grid img:hover,
.partner-logos img:hover,
[class*="logo"] .card img:hover,
[class*="kunden"] img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Logo-Slider (.gallery-slider .logo-box): nur Graustufen/Transition, KEINE festen Maße
   (img ist direct child von .ratio – feste height/max-width führen zu unsichtbaren Logos) */
.gallery-slider .logo-box img {
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 1;
  transition: all var(--mkpi-transition-base);
}
.gallery-slider .logo-box img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

[class*="kunden"] .card,
[class*="logo"] .card,
.client-logos .card {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: var(--mkpi-space-3);
}

/* Auf dunklem Hintergrund: aufgehellt fuer Sichtbarkeit */
.section-dark .client-logos img,
.section-dark .customer-logos img,
.bg-dark [class*="logo"] img,
.section-dark .logo-box img,
.section-dark .gallery-slider .logo-box img {
  filter: grayscale(100%) brightness(1.3);
  opacity: 1;
}

.section-dark .client-logos img:hover,
.section-dark .customer-logos img:hover,
.section-dark .logo-box img:hover,
.section-dark .gallery-slider .logo-box img:hover {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
}

/* ============================================
   FOOTER
   Dark Theme, klare Struktur
   ============================================ */

footer,
.site-footer {
  background-color: var(--mkpi-bg-darker) !important;
  color: var(--mkpi-text-secondary-dark);
  padding-top: var(--space-xxl) !important;
  padding-bottom: var(--space-xl) !important;
}

footer h4, footer h5, footer h6,
.site-footer h4, .site-footer h5, .site-footer h6 {
  color: var(--mkpi-text-primary-dark) !important;
  font-size: var(--mkpi-text-small) !important;
  font-weight: var(--mkpi-weight-semibold) !important;
  letter-spacing: 0.02em !important;
  margin-bottom: var(--mkpi-space-4) !important;
  text-transform: uppercase !important;
}

footer a,
.site-footer a {
  color: var(--mkpi-text-secondary-dark) !important;
  font-size: var(--mkpi-text-small) !important;
  text-decoration: none !important;
  transition: color var(--mkpi-transition-fast) !important;
}

footer a:hover,
.site-footer a:hover {
  color: var(--mkpi-text-primary-dark) !important;
}

footer p,
.site-footer p {
  color: var(--mkpi-text-secondary-dark) !important;
  font-size: var(--mkpi-text-small) !important;
}

footer hr,
.site-footer hr {
  border-color: rgba(255, 255, 255, 0.1) !important;
  margin: var(--space-xl) 0 !important;
}

.footer-social a {
  color: var(--mkpi-text-secondary-dark) !important;
  font-size: 1.25rem !important;
  transition: color var(--mkpi-transition-fast) !important;
}

.footer-social a:hover {
  color: var(--mkpi-text-primary-dark) !important;
}

.footer-disclaimer {
  margin-top: var(--mkpi-space-4);
  padding-top: var(--space-xl);
}

.footer-disclaimer p {
  font-size: var(--mkpi-text-caption) !important;
  color: var(--mkpi-text-tertiary-dark) !important;
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  margin-bottom: 0;
}

.contact-item {
  color: var(--mkpi-text-secondary-dark);
}

.contact-item i {
  color: var(--mkpi-text-secondary-dark) !important;
}

.contact-item address {
  color: var(--mkpi-text-secondary-dark) !important;
  font-size: var(--mkpi-text-small) !important;
  font-style: normal;
  margin-bottom: 0;
}


/* ============================================
   GLOBALE FEINHEITEN
   ============================================ */

.text-white {
  color: var(--mkpi-text-primary-dark) !important;
}

.bg-white {
  background-color: var(--mkpi-bg-primary) !important;
}

.rounded-small {
  border-radius: var(--mkpi-radius-sm) !important;
}

.rounded-medium,
.img-fluid.rounded-medium,
article img {
  border-radius: var(--mkpi-radius-md) !important;
}

/* Hero-Bilder: Volle Breite, keine Rundung */
.hero-img,
.hero-section img {
  border-radius: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* Fokus-Styles fuer Accessibility */
:focus-visible {
  outline: 2px solid var(--mkpi-accent);
  outline-offset: 2px;
  border-radius: var(--mkpi-radius-sm);
}

::selection {
  background-color: rgba(0, 114, 227, 0.2);
  color: var(--mkpi-text-primary);
}

::-moz-selection {
  background-color: rgba(0, 114, 227, 0.2);
  color: var(--mkpi-text-primary);
}

/* Scrollbar-Styling (Webkit) – dezent statt Standard-Grau */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Image-Rendering – Scharfe Bilder */
img {
  image-rendering: -webkit-optimize-contrast;
}

p a {
  text-decoration: none;
  color: var(--mkpi-link);
  transition: color var(--mkpi-transition-fast);
}

p a:hover {
  color: var(--mkpi-accent-hover);
}

hr {
  border-color: var(--mkpi-border-light) !important;
  opacity: 1 !important;
  margin: var(--space-xl) 0 !important;
}

/* Offcanvas / Sidebar Styling */
.offcanvas {
  background-color: var(--mkpi-bg-dark) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.offcanvas .btn-close {
  filter: invert(1);
}

/* Sidebar – Alle Texte auf dunklem Hintergrund lesbar */
.offcanvas,
.offcanvas .sidebar-contact {
  color: var(--mkpi-text-primary-dark) !important;
}

.offcanvas .offcanvas-title,
.offcanvas h3,
.offcanvas h4 {
  color: var(--mkpi-text-primary-dark) !important;
  font-weight: var(--mkpi-weight-semibold) !important;
}

.offcanvas .sidebar-contact p,
.offcanvas .sidebar-contact > span,
.offcanvas .sidebar-contact i + span {
  color: var(--mkpi-text-secondary-dark) !important;
}

/* Button-Text in der Sidebar NICHT ueberschreiben */
.offcanvas .sidebar-contact .btn-sidebar-submit span {
  color: inherit !important;
}

.offcanvas .sidebar-contact i {
  color: var(--mkpi-text-secondary-dark) !important;
}

.offcanvas .sidebar-contact i:hover {
  color: var(--mkpi-text-primary-dark) !important;
}

/* Sidebar Formular-Labels */
.offcanvas .form-label {
  color: var(--mkpi-text-primary-dark) !important;
  font-weight: var(--mkpi-weight-medium) !important;
  font-size: var(--mkpi-text-small) !important;
}

/* Sidebar Trennlinie */
.offcanvas hr {
  border-color: rgba(255, 255, 255, 0.12) !important;
  opacity: 1;
}

/* Sidebar text-muted Override (auf dunklem Hintergrund) */
.offcanvas .text-muted {
  color: var(--mkpi-text-secondary-dark) !important;
}

/* ---- Sidebar Submit-Button (dunkler Hintergrund) ---- */
/* Nutzt das gleiche gruene Farbschema wie .btn-success,
   aber mit voller Breite und angepasstem Disabled-State fuer dark UI. */
.btn-sidebar-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--mkpi-btn-sm-padding-y) var(--mkpi-btn-sm-padding-x) !important;
  font-weight: var(--mkpi-weight-medium) !important;
  font-size: 0.9375rem !important;
  letter-spacing: -0.01em;
  border-radius: var(--mkpi-radius-pill) !important;
  background-color: var(--mkpi-success) !important;
  border: 2px solid var(--mkpi-success) !important;
  color: #FFFFFF !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.btn-sidebar-submit:hover {
  background-color: var(--mkpi-success-hover) !important;
  border-color: var(--mkpi-success-hover) !important;
  color: #FFFFFF !important;
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(52, 199, 89, 0.3);
}

.btn-sidebar-submit:active {
  background-color: var(--mkpi-success-active) !important;
  border-color: var(--mkpi-success-active) !important;
  transform: scale(0.98);
}

/* Disabled auf dunklem Hintergrund: helles, gedaempftes Gruen */
.btn-sidebar-submit:disabled,
.btn-sidebar-submit.disabled {
  background-color: rgba(52, 199, 89, 0.15) !important;
  border-color: rgba(52, 199, 89, 0.15) !important;
  color: rgba(52, 199, 89, 0.4) !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Social-Media Icons in der Sidebar */
.offcanvas .social-media i {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--mkpi-text-primary-dark) !important;
  border-radius: var(--mkpi-radius-pill) !important;
  transition: all var(--mkpi-transition-base);
}

.offcanvas .social-media i:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

/* Container-Breite optimieren */
@media (min-width: 1400px) {
  .container {
    max-width: var(--mkpi-content-wide);
  }
}

/* Portfolio-Cards spezifisch */
.card-01,
.card-02 {
  border-radius: var(--mkpi-radius-lg) !important;
  overflow: hidden;
}

.card-01 img,
.card-02 img {
  border-radius: var(--mkpi-radius-lg) !important;
  transition: transform var(--mkpi-transition-slow) !important;
}

.card-wrapper .card-text h3,
.card-wrapper .card-text h4 {
  font-size: var(--mkpi-text-h4) !important;
  margin-top: 0;
  margin-bottom: var(--space-s);
}

/* Mobile: Mehr Freiraum zwischen Card-Bild und Headline */
@media (max-width: 767.98px) {
  .card-wrapper .card-text {
    padding-top: var(--space-xl) !important;
  }
}

/* Abstand Subline (text-bold) zum darunter liegenden Fließtext */
.card-text p.text-bold + p {
  margin-top: var(--mkpi-space-4);
}

/* Responsive globale Anpassungen */
@media (max-width: 992px) {
  section,
  .section {
    padding-top: clamp(3rem, 5vw + 0.5rem, 5rem);
    padding-bottom: clamp(3rem, 5vw + 0.5rem, 5rem);
  }

  .section-hero,
  .section-featured {
    padding-top: clamp(3.5rem, 6vw, 6rem);
    padding-bottom: clamp(3.5rem, 6vw, 6rem);
  }

  section h2,
  .section h2 {
    margin-bottom: clamp(1.5rem, 2.5vw, 2.5rem);
  }
}

@media (max-width: 575px) {
  .container {
    padding-left: var(--mkpi-space-5) !important;
    padding-right: var(--mkpi-space-5) !important;
  }

  section,
  .section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .section-hero,
  .section-featured {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .section-compact {
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
  }

  section h2,
  .section h2 {
    margin-bottom: var(--mkpi-space-5);
  }


}

/* ============================================
   TEXT-UTILITIES (ehem. text.css)
   ============================================ */

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.text-truncate-custom {
  position: relative;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.text-truncate-custom .truncated-content {
  position: relative;
  height: 6em;
  overflow: hidden;
  transition: height 0.3s ease-out;
}

.text-truncate-custom .truncated-content::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 2em;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease-out;
}

.text-truncate-custom.expanded .truncated-content::after {
  opacity: 0;
}

@media (max-width: 768px) {
  .hero-text-subline {
    margin: var(--space-m) 0 !important;
    padding: 0 !important;
  }
}

@media (max-height: 576px) and (orientation: landscape) {
  .hero-text-subline {
    margin: var(--space-m) 0 !important;
    padding: 0 !important;
  }
}