/* ===== Basis: Reset & Typo ===== */ /* // Abschnitts-Kommentar: Basis-Stile */
* { box-sizing: border-box; } /* // Einheitliche Box-Berechnung */
/* auskommentiert, das doppelt definiert   html, body { margin: 0; padding: 0; } */  /* // Standardabstände entfernen */
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #111; background: #fff; } /* // Grundschrift, Farben */

/* ===== Layout-Helfer ===== */ /* // Abschnitts-Kommentar: Helferklassen */
.container {
  /* Zentrales Layout-Raster:
     - max-width begrenzt Text-/Contentbreite (besser lesbar, hochwertiger)
     - margin: 0 auto zentriert den Inhalt
     - padding-inline hält Abstand zum Rand auf kleinen Screens
  */
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: 24px;
} /* // Zentrierter Container mit Seitenabstand */



/* ===== Container-Varianten =====
   Ergänzende Breiten-Modifikatoren für unterschiedliche Inhaltsarten.
   Verwendung im HTML:
   <div class="container container--narrow"> … </div>
   <div class="container container--wide"> … </div>
   Hinweis: Diese Klassen überschreiben NUR die max-width.
   Padding, Zentrierung und Grid bleiben unverändert.
================================ */

.container--narrow {
  max-width: 760px;   /* Ideal für Fließtext, Gutachten, Datenschutz */
}

.container--wide {
  max-width: 1400px;  /* Ideal für Hero, Karten-Grids, Referenzen */
}


/* ===== Utility-Leiste (Sprache) ===== */ /* // Abschnitts-Kommentar: Utility-Bar */
.utility-bar { height: 16px; display: flex; align-items: center; } /* // Dünne obere Leiste */
.utility-right { display: flex; justify-content: flex-end; align-items: center; } /* // Inhalt nach rechts schieben */
.lang-switch { display: flex; gap: 8px; font-size: 14px; font-weight: 500; } /* // Sprachen nebeneinander mit Abstand */
.lang-switch a { text-decoration: none; color: #111; } /* // Sprachlinks ohne Unterstreichung */
.lang-switch a.is-active { font-weight: 700; } /* // Aktive Sprache hervorheben */
.lang-switch span { color: #111; } /* // Trennstrich einfärben */

/* ===== Header-Grid ===== */
/* Abschnitt: Haupt-Header (Desktop/Notebook als Standard) */

.site-header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1000;
  border-bottom: 1px solid rgba(0,0,0,.06); /* Neue Linie unter dem Header */
} /* Header klebt oben */




.header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto; /* Desktop: Brand | Navigation | CTA */
  align-items: center;
  height: 70px;
} /* Drei-Spalten-Layout */

/* =========================================================
   HEADER: Container bewusst full-width
   ---------------------------------------------------------
   Begründung:
   - Der globale .container ist zentriert (max-width: 1100px)
   - Im Header soll das Logo optisch links sitzen
   - Daher heben wir NUR IM HEADER die Begrenzung auf
   ========================================================= */
.site-header .container {
  max-width: none;   /* hebt die 1100px-Begrenzung auf */
  margin: 0;         /* verhindert Zentrierung */
}



.header-left { display: flex; align-items: center; } /* Linker Bereich */
.header-center { display: flex; justify-content: center; } /* Navigation zentrieren */
.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
} /* Rechter Bereich stapeln */

.brand-name { font-weight: 700; line-height: 1.05; } /* Name */
.brand-phone { font-weight: 600; line-height: 1.05; } /* Telefon */

/* ===== Logo ===== */ /* // Abschnitts-Kommentar: Logo */
.logo { display: inline-flex; align-items: center; text-decoration: none; } /* // Logo-Wrapper ohne Deko */
.logo img { width: 220px; height: auto; display: block; margin-top: -12px; } /* // Logo-Breite festlegen */

/* ===== Navigation (Mitte) ===== */ /* // Abschnitts-Kommentar: Navigation */
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px;  margin-left: -75px;} /* // Horizontale Liste mit Abstand */
.main-nav a { position: relative; display: inline-block; font-size: 18px; font-weight: 400; text-decoration: none; color: #111; padding: 4px 0; } /* // Links typografisch setzen */
.main-nav a::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 0; height: 2px; background: black; transform: translateX(-50%); transition: width 180ms ease-out; } /* // Unterstreichungs-Linie vorbereitet */
.main-nav a:hover::after, .main-nav a:focus-visible::after { width: 100%; } /* // Hover/Focus: Linie fährt von der Mitte aus */
.main-nav a:focus-visible { outline: 2px solid black; outline-offset: 2px;  } /* // Tastaturfokus klar anzeigen */

.main-nav a.active {
  font-weight: 700; /* fett */
}

.main-nav a.active::after {
  width: 100%;      /* Unterstreichung direkt sichtbar */
}


/* ===== Kontaktbereich (rechts) ===== */ /* // Abschnitts-Kommentar: rechter Block */
.contact-name { font-size: 16px; font-weight: 450; letter-spacing: 0.06em; color: #666; text-transform: uppercase; } /* // Name dezent grau und in Versalien */
.contact-phone { font-size: 16px; font-weight: 600; color: #111; text-decoration: none; margin-top: 8px; } /* // Telefonnummer fett und klickbar */
.contact-phone:hover, .contact-phone:focus-visible { text-decoration: underline; } /* // Hover/Focus: Nummer unterstreichen */

/* ===== Responsive ===== */ /* // Abschnitts-Kommentar: Breakpoints */
@media (max-width: 1024px) { .main-nav ul { gap: 24px; } } /* // Tablet: Abstand der Nav reduzieren */
@media (max-width: 768px) {

  /* =========================================================
     MOBILE-HEADER (Responsive)
     ---------------------------------------------------------
     Ziel:
     - Oben: Brand/Logo links, CTA/Telefon rechts (2 Spalten)
     - Darunter: Navigation über volle Breite
     ========================================================= */

  .header-grid {
    grid-template-columns: 1fr auto; /* Mobile: Brand | CTA */
    height: auto;
    padding-block: 12px;
    row-gap: 8px;
  }

  .header-center {
    grid-column: 1 / -1;           /* Navigation über beide Spalten */
    order: 3;                      /* Navigation unter Brand/CTA */
    justify-content: flex-start;   /* linksbündig */
  }

  .main-nav a { font-size: 18px; } /* Mobile: etwas kleinere Nav-Schrift */
  .logo img { width: 140px; }      /* Mobile: Logo etwas kleiner */
  .header-right { align-items: flex-start; } /* Mobile: rechter Block linksbündig */
} /* Ende Media-Query */


/* ===== Hero-Slider ===== */ /* // Abschnitts-Kommentar: Slider unter Header */

/* Der gesamte Slider-Bereich */
.hero-slider {
  position: relative;            /* // Container für übereinanderliegende Bilder */
  width: 100%;                   /* // nimmt gesamte Seitenbreite ein */
  height: 50vh;                  /* // 70 % der Viewport-Höhe, anpassbar */
  overflow: hidden;              /* // versteckt überstehende Bildteile */
}

/* Jedes einzelne Slide-Element */
.hero-slider .slide {
  position: absolute;            /* // übereinander gestapelt */
  top: 0; left: 0;               /* // Startpunkt oben links */
  width: 100%; height: 100%;     /* // füllt den Container vollständig */
  opacity: 0;                    /* // unsichtbar als Standardzustand */
  transition: opacity 1s ease-in-out; /* // sanfter Übergang beim Ein-/Ausblenden */
}

/* Sichtbares Slide */
.hero-slider .slide.active {
  opacity: 1;                    /* // aktuell sichtbares Bild */
  z-index: 2;                    /* // liegt über den anderen */
}

/* Die Bilder selbst */
.hero-slider img {
  width: 100%;                   /* // passt sich Breite an */
  height: 100%;                  /* // füllt Höhe */
  object-fit: cover;             /* // schneidet überstehende Ränder ab, behält Verhältnis */
  display: block;                /* // entfernt Zwischenräume */
}
/* ===== Hero-Overlay & -Content ===== */ /* // Abschnitts-Kommentar: Text über Slider */

/* Abdunkelung über allen Slides */
.hero-overlay { /* // Selektor für die Overlay-Fläche */
  position: absolute; /* // Über dem Bild-Stack positionieren */
  inset: 0; /* // Alle vier Seiten an den Container anlegen */
  background: linear-gradient( /* // Sanfter Verlauf für bessere Lesbarkeit */
    90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.05) 100% /* // Links dunkler, rechts heller */
  ); /* // Ende Verlauf */
  z-index: 3; /* // Liegt über den Bildern, aber unter dem Text */
  pointer-events: none; /* // Klicks gehen durch zur Seite */
} /* // Ende Overlay */

/* Textblock über dem Slider */
.hero-content { /* // Container für Headline, Subline, Button */
  position: absolute; /* // Frei positionierbar im Slider */
  top: 50%; /* // Vertikal zentrieren */
  transform: translateY(-50%); /* // Exakte Vertikalzentrierung */
  left: clamp(24px, 6vw, 120px); /* // Linker Rand responsiv zwischen 24px und 120px */
  display: flex; /* // Vertikales Stacken der Elemente */
  flex-direction: column; /* // Untereinander anordnen */
  gap: 16px; /* // Abstand zwischen Headline, Subline, Button */
  max-width: min(720px, 60%); /* // Zeilenlänge begrenzen für gute Lesbarkeit */
  color: #fff; /* // Weißer Text */
  z-index: 4; /* // Über Overlay und Bildern */
  text-shadow: 0 2px 8px rgba(0,0,0,0.35); /* // Leichter Schatten für Kontrast */
} /* // Ende hero-content */

/* Headline-Stil */
.hero-content h1 { /* // Stil für die Hauptüberschrift */
  margin: 0; /* // Standardabstand entfernen */
  font-weight: 700; /* // Fett für Präsenz */
  font-size: clamp(28px, 5vw, 48px); /* // Responsiv skalierende Größe */
  line-height: 1.15; /* // Kompakte, aber lesbare Zeilenhöhe */
} /* // Ende Headline */

/* Subline-Stil */
.hero-content p { /* // Stil für die Unterzeile */
  margin: 0; /* // Standardabstand entfernen */
  font-weight: 400; /* // Normalgewicht für Ruhe */
  font-size: clamp(16px, 2.2vw, 22px); /* // Responsiv skalierende Größe */
  color: rgba(255,255,255,0.90); /* // Helles Weiß für Hierarchie */
} /* // Ende Subline */

/* Button-Basis */
.btn { /* // Generische Button-Klasse */
  display: inline-flex; /* // Inline, aber mit Flex für Zentrierung */
  align-items: center; /* // Vertikal zentrieren */
  justify-content: center; /* // Horizontal zentrieren */
  padding: 12px 20px; /* // Innenabstand für Klickfläche */
  border-radius: 6px; /* // Leicht abgerundete Ecken */
  text-decoration: none; /* // Keine Unterstreichung */
  font-weight: 600; /* // Halb-fett für Klarheit */
  font-size: 16px; /* // Lesbare Größe */
    width: 190px; /* // Fixe Breite für gleichmäßige Optik */
  text-align: center; /* // Text mittig halten */
  cursor: pointer; /* // Mauszeiger als Hinweis */
  transition: transform 120ms ease, opacity 120ms ease; /* // Kleine Hover-Animation */
} /* // Ende btn */

/* Primär-Button (Akzent) */
.btn-primary { /* // Stil für den Haupt-Call-to-Action */
  background: #2157a8; /* // Firmen-/Akzentblau */
  color: #fff; /* // Weiße Schrift */
} /* // Ende btn-primary */

.btn-primary:hover, .btn-primary:focus-visible { /* // Hover- und Tastaturfokus-Zustand */
  transform: translateY(-1px); /* // Minimaler Lift-Effekt */
  opacity: 0.95; /* // Leichte Abdunklung für Feedback */
  outline: 2px solid #0A5BD3; /* // Sichtbarer Fokusrahmen */
  outline-offset: 2px; /* // Abstand zwischen Button und Rahmen */
} /* // Ende Hover/Focus */

/* ===== Leistungen (Karten) ===== */ /* // Abschnitts-Kommentar: Card-Layout wie KPMG */
.services { padding-block: 48px; background: #fff; } /* // Außenabstand oben/unten, weißer Hintergrund */
.services-title { font-size: 28px; font-weight: 700; margin: 0 0 24px; color: rgb(56, 54, 54) } /* // Abschnittstitel kräftig, Abstand nach unten */

.services-grid {
  display: grid; /* // Grid aktivieren */
  grid-template-columns: repeat(3, 1fr); /* // Drei Spalten */
  gap: 24px; /* // Abstand zwischen Karten */
} /* // Ende Grid */

.service-card {
  position: relative; /* // Für überlagerte Inhaltsbox */
  display: block; /* // Anker als Blockelement */
  border-radius: 12px; /* // Sanft gerundete Ecken */
  overflow: hidden; /* // Bild und Inhalt werden beschnitten */
  background: #f6f7f9; /* // Fallback-Hintergrund */
  box-shadow: 0 6px 18px rgba(0,0,0,0.08); /* // Dezenter Schatten */
  transition: transform 160ms ease, box-shadow 160ms ease; /* // Hover-Animation */
} /* // Ende Karte */

.service-card:hover, .service-card:focus-visible {
  transform: translateY(-4px); /* // Leichter Lift-Effekt */
  box-shadow: 0 10px 28px rgba(0,0,0,0.12); /* // Stärkerer Schatten */
  outline: none; /* // Standard-Outline entfernen */
} /* // Hover/Fokus */

.service-media {
  margin: 0; /* // Standardabstände entfernen */
  aspect-ratio: 16/9; /* // Einheitliches Seitenverhältnis */
  background: #eaeef3; /* // Platzhalter-Farbe */
} /* // Bildrahmen */

.service-media img {
  width: 100%; height: 100%; /* // Füllt den Rahmen */
  object-fit: cover; /* // Bild sauber zuschneiden */
  display: block; /* // Keine Lücken */
} /* // Bild */

.service-content {
  position: absolute; /* // Über dem Bild platzieren */
  left: 16px; right: 16px; bottom: 16px; /* // Innenabstand vom Kartenrand */
  background: #fff; /* // Weiße Box über dem Bild */
  padding: 16px; /* // Innenabstand der Box */
  border-radius: 10px; /* // Abgerundete Ecken der Box */
  box-shadow: 0 8px 24px rgba(0,0,0,0.18); /* // Schatten für schwebende Optik */
  display: grid; gap: 8px; /* // Vertikaler Abstand der Texte */
} /* // Inhaltliche Box */

.service-tag {
  display: inline-block; /* // Badge als Inline-Block */
  font-size: 12px; font-weight: 600; /* // Kompakte Schrift, halb-fett */
  letter-spacing: 0.04em; /* // Etwas Laufweite */
  color: #0b3575; /* // Akzentblau für Text */
  background: #e7f0ff; /* // Zartes Blau als Hintergrund */
  padding: 4px 8px; border-radius: 999px; /* // Pillenform */
} /* // Badge */

.service-heading {
  font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0;color: #0b3575;/* // Titel kräftig und kompakt */
} /* // Kartentitel */

.service-text {
  font-size: 14px; line-height: 1.5; color: #444; margin: 0; /* // Beschreibung dezent grau */
} /* // Kartentext */

.service-cta {
  font-size: 14px; font-weight: 600; color:#0b5dd8; /* // CTA in Akzentblau */
} /* // CTA-Zeile */

/* Responsive: 2 Spalten auf Tablet, 1 Spalte auf Mobile */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); } /* // Zwei Spalten */
} /* // Tablet */

@media (max-width: 680px) {
  .services-grid { grid-template-columns: 1fr; } /* // Eine Spalte */
  .services { padding-block: 32px; } /* // Weniger Außenabstand auf Mobile */
} /* // Mobile */

/* ===== Abschnitt: Referenzen ===== */ /* // Kommentar: Referenzen & Divider */

/* Linie zwischen Abschnitten */
.section-divider {
  border-top: 1px solid #d8d8d8; /* // Dezente graue Linie */
  width: 100%; /* // Etwas kürzer als ganze Seite */
}

/* ===== Abschnitt: Über uns ===== */ /* // Neuer Infobereich unter Leistungen */

.about {
  padding-bottom: 32px;         /* // unten: steuert Abstand zum hr */
}

.about .container {
  max-width: 80%; /* // Angenehme Zeilenlänge */
  margin-inline: auto; /* // Zentriert */
  padding-inline: 64px; /* // Seitenabstand */
}

.about-title {
  font-size: 28px; /* // Responsiv skalierend */
  font-weight: 800; /* // kräftig */
  color: #111; /* // fast Schwarz */
}

.about-intro {
  font-size: 18px; /* // Lesbare Schriftgröße */
  line-height: 1.7; /* // lockere Zeilenhöhe */
  color: #333; /* // dezentes Dunkelgrau */
  margin-bottom: 20px; /* // Abstand zwischen Absätzen */
}

.about-cta {
  margin-top: 0px;          /* // Abstand zum letzten Absatz */
  display: inline-block;     /* // Button bleibt als Block sichtbar */
}

/* ===== Artikel-Übersicht ===== */ /* // Abschnitt für Blog/News */
.articles {
  padding-block: 30px; /* // Luft oben und unten */
  background: #fff; /* // Weißer Hintergrund */
}

.articles-title {
  font-size: 28px;
  font-weight: 800;
  color: #111; /* // Akzentblau */
  margin: 0 0 32px;
  text-align: center; /* // Überschrift zentriert */
}




.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* // 3 Spalten auf Desktop */
  gap: 32px;
}

.article-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.article-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.article-media img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.article-content {
  padding: 16px;
}

/* eingefügt für "kostenfrei"  */
.free-badge {
  background: #e6ecef;   /* kühles, helles Grau-Blau */
  color: #1f3a4d;        /* seriöses Dunkelblau */
  font-weight: 700;
  padding: 0.15em 0.5em;
  border-radius: 4px;
  margin-inline: 0.2em;
  white-space: nowrap;
}

.article-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #0b5dd8;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.article-heading {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin: 0 0 8px;
}

.article-text {
  font-size: 14px;
  color: #444;
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .articles-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Referenz-Teaser unter Artikeln ===== */ /* // Stil für Frage + Kurztext + Button */
.reference-intro { padding: 32px 0 40px; background: #fff; } /* // Luft oben/unten, weißer Hintergrund */
.reference-intro .container { max-width: 80%; margin-inline: auto; padding-inline: 64px; } /* // Schmale Zeilen + Seitenabstand */

.ref-title { margin: 0 0 12px; font-size: clamp(26px, 4vw, 36px); font-weight: 600; color: #2a2a2a; } /* // Überschrift-Stil */
.ref-lead  { margin: 0 0 20px; font-size: 18px; line-height: 1.7; color: #4a4a4a; } /* // Einleitungs-Text */

.btn-outline { /* // Sekundärer Outline-Button */
  display: inline-flex; align-items: center; justify-content: center; /* // Inhalt zentrieren */
  padding: 12px 22px; border: 2px solid #0b3575; color: #0b3575; /* // Rahmen- & Textfarbe (Akzent) */
  background: transparent; border-radius: 10px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; /* // Typo & Optik */
  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease; /* // Hover-Feedback */
} /* // Ende Outline-Button */

.btn-outline:hover, .btn-outline:focus-visible { background: #0b3575; color: #fff; box-shadow: 0 6px 16px rgba(11,53,117,0.24); outline: none; } /* // Hover/Fokus-Stil */

/* ===== Kontakt-Sektion ===== */ /* // Zwei-Spalten-Layout mit Bild */
.contact-section {
  padding-block: 64px; /* // Luft oben/unten */
  background: #fff;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* // 2 Spalten */
  align-items: center;
  gap: 48px; /* // Abstand zwischen Bild und Text */
}

.contact-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.contact-content {
  color: #222;
}

.contact-title {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 600;
  margin: 0 0 12px;
}

.contact-lead {
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 12px;
}

.contact-link {
  display: inline-block;
  margin-bottom: 24px;
  color: #0b3575;
  font-weight: 600;
  text-decoration: none;
}

.contact-link:hover {
  text-decoration: underline;
}

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
  font-size: 16px;
}

.contact-info .icon {
  margin-right: 6px;
}

/* ===== Responsive ===== */
@media (max-width: 880px) {
  .contact-grid {
    grid-template-columns: 1fr; /* // Untereinander */
    text-align: center;
  }
  .contact-image {
    order: -1; /* // Bild nach oben */
  }
  .contact-info {
    justify-items: center;
  }
}

/* ===== Vollbreiter CTA-Banner ===== */ /* // Abschnitt ganz ohne Seitenränder */
.cta-banner {
  position: relative;
  width: 100%;
  height: 40vh; /* // Höhe des Banners */
  background: url("assets/img/slide1.jpg") center/cover no-repeat; /* // Vollbreites Hintergrundbild */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* // Abdunkelung für Lesbarkeit */
  z-index: 1;
}

.cta-content {
  position: relative;
  z-index: 2; /* // Über Overlay */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.cta-content h2 {
  font-size: 18px;   /* korrigiert, es fehlte die Einhaut px */
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.cta-btn {
  padding: 14px 28px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 6px;
}

/* Mobile */
@media (max-width: 680px) {
  .cta-banner {
    height: 32vh;
  }
  .cta-content h2 {
    font-size: 22px;
  }
}

/* ===== Footer (dunkel) ===== */ /* // Corporate Footer-Stile */
.site-footer { background: #1f2428; color: #e8eaed; } /* // Dunkler Grund, helle Schrift */
.site-footer a { color: #e8eaed; text-decoration: none; } /* // Linkfarbe dezent blau */
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; } /* // Hover/Fokus-Feedback */

/* Oberer Bereich */
.footer-top { padding-block: 100px; border-top: 1px solid #2a3136; } /* // Luft & feine Linie oben */
.footer-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; /* // 4 Spalten Grid */
} /* // Ende Grid */

.footer-title {
  margin: 0 0 12px; font-size: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #ffffff;
} /* // Spaltenüberschriften */
.footer-text { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: #cbd2d9; } /* // Lauftext */
.footer-link { font-weight: 700; font-size: 14px; } /* // „Weitere Infos“-Links */

.footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } /* // Kontaktliste */
.footer-contact li { font-size: 15px; color: #e2e6ea; } /* // Kontaktzeilen */
.footer-contact a { color: #e2e6ea; } /* // E-Mail in gleicher Farbe */

/* Untere Leiste */
.footer-bottom { background: #1b2024; border-top: 1px solid #2a3136; } /* // Noch dunklerer Streifen */
.footer-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 30px; } /* // Layout unten */

.footer-brand img { height: 50px; width: auto;  } /* // Logo dezent */
.footer-nav { display: flex; gap: 20px; flex-wrap: wrap; } /* // Links rechtsbündig */
.footer-nav-link { font-size: 16px; color: #cbd2d9; } /* // Linkstil unten */

/* Responsive */
@media (max-width: 1024px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } /* // 2 Spalten auf Tablet */
@media (max-width: 640px)  {
  .footer-grid { grid-template-columns: 1fr; } /* // 1 Spalte auf Handy */
  .footer-bottom-row { flex-direction: column; align-items: flex-start; } /* // Unten untereinander */
} /* // Ende Media-Queries */




/* ===== 3 Säulen – Layout & Design ===== */
/* ===== 3 Säulen – farbige Akzente & Icons ===== */
.pillars { padding: 64px 0; }

.pillars-title { text-align: center; margin-bottom: 40px; font-size: 2rem; font-weight: 600; }

.pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.pillar-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e8e8ee;
  border-radius: 14px;
  padding: 28px 22px;
  text-align: center;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
  /* dezenter „Top-Border“ via pseudo-element */
}
.pillar-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding-top: 3px;             /* Höhe der Top-Zierlinie */
  background:
    linear-gradient(var(--pill-soft, rgba(11,53,117,0.10)), var(--pill-soft, rgba(11,53,117,0.10))) content-box,
    linear-gradient(90deg, var(--pill, #0b3575), rgba(11,53,117,0.35)) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) padding-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.pillar-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--pill, #0b3575); /* Icon-Farbe */
  background: radial-gradient(110% 110% at 30% 30%, rgba(11,53,117,.12), rgba(11,53,117,.04) 70%, rgba(11,53,117,0) 100%);
  box-shadow: 0 6px 18px rgba(11,53,117,.12) inset, 0 2px 8px rgba(11,53,117,.06);
}

.pillar-card h3 {
  font-size: 21px;
  margin-bottom: 10px;
  color: #0b3575;
  font-weight: 600;
}

.pillar-card p {
  font-size: 0.99rem;
  line-height: 1.5;
  color: #3c3f44;
}

/* Hover – subtiler Lift + Schatten */
.pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.10);
  border-color: transparent;
  background-color: rgba(11,53,117,0.015); /* leichtes Tönchen */
}

/* Variantenfarben pro Säule (gleiche Familie, modern/techy) */
.pillar-card.is-1 { --pill: #0b3575; --pill-soft: rgba(11,53,117,0.14); } /* pbf Blau */
.pillar-card.is-2 { --pill: #1d4ed8; --pill-soft: rgba(29,78,216,0.14); }  /* kräftiges Blau */
.pillar-card.is-3 { --pill: #0ea5e9; --pill-soft: rgba(14,165,233,0.18); } /* cyan/tech */

@media (max-width: 992px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pillars-grid { grid-template-columns: 1fr; } }

/* Subheadline unter dem Säulen-Titel */
.pillars-subtitle {
  text-align: center;
  max-width: 900px;
  margin: -25px auto 28px; /* knapp an die H2 heran */
  font-size: 18px;
  line-height: 1.5;
  color: #4a4f56;
}

/* Micro-Motion für Icons – dezent */
.pillar-icon {
  transition: transform .22s ease, box-shadow .22s ease;
  will-change: transform;
}
.pillar-card:hover .pillar-icon {
  transform: translateY(-2px) rotate(-2deg) scale(1.04);
  box-shadow: 0 8px 24px rgba(0,0,0,.08), 0 2px 10px rgba(0,0,0,.06);
}

/* Leichter Motion-Lift des Titels */
.pillar-card h3 {
  transition: transform .22s ease, color .22s ease;
}
.pillar-card:hover h3 {
  transform: translateY(-1px);
  color: var(--pill, #0b3575);
}

/* Respektiert Systemeinstellung „Bewegung reduzieren“ */
@media (prefers-reduced-motion: reduce) {
  .pillar-icon,
  .pillar-card,
  .pillar-card h3 {
    transition: none !important;
  }
  .pillar-card:hover .pillar-icon,
  .pillar-card:hover h3 {
    transform: none !important;
  }
}


/* ===== Philosophie (scoped) ===== */
:root{
  --philo-bg: #f6f9ff;
  --philo-ink: #0f2746;
  --philo-muted: #5a6f92;
  --philo-brand: #1a4d94;
  --philo-border: #e3edff;
  --philo-radius: 16px;
  --philo-maxw: 1100px;
}

.philo-section{
  background: linear-gradient(180deg, var(--philo-bg), #fff);
  padding: clamp(32px, 4vw, 72px) 20px;
}

.philo-wrap{
  width: min(var(--philo-maxw), 100%);
  margin-inline: auto;
  display: grid;
  gap: 28px;
  color: var(--philo-ink);
}

.philo-kicker{
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .8rem;
  color: var(--philo-brand);
  margin: 0 0 .4rem 0;
}

.philo-title{
  font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.2rem);
  margin: .2rem 0 .6rem;
}

.philo-lead{
  color: var(--philo-muted);
  font-size: 1.05rem;
  max-width: 70ch;
  line-height: 1.6;
  margin: 0;
}

.philo-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width:1000px){ .philo-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:640px){ .philo-grid{ grid-template-columns: 1fr; } }

.philo-card{
  background: #fff;
  border: 1px solid var(--philo-border);
  border-radius: var(--philo-radius);
  padding: 16px;
  display: grid;
  gap: 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.philo-card:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(16,37,70,.08); }

.philo-badge{
  display: inline-block;
  font-size: .72rem;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid var(--philo-border);
  color: var(--philo-brand);
  font-weight: 600;
}

.philo-h3{
  font-size: 1rem;
  margin: 0;
}

.philo-card p{
  margin: 0;
  color: var(--philo-muted);
  font-size: .96rem;
  line-height: 1.55;
}
/* ===== /Philosophie ===== */


.leader-card{
  display:grid; grid-template-columns: 1.4fr .9fr; gap: clamp(16px,4vw,40px);
  align-items:center; padding: clamp(24px,4vw,40px);
  background:#fff; border:1px solid var(--border, #e6e8ee); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(16,24,40,.08);
}
@media (max-width: 960px){ .leader-card{ grid-template-columns:1fr; } }

.leader-card-headline{
  margin:0 0 .5rem 0; line-height:1.15;
  font-size: clamp(1.6rem,2.4vw + .6rem,2.3rem);
}

.leader-quote {
  margin: 0;
  position: relative;
}

.leader-quote blockquote {
  margin: 0;
  padding-left: 2rem;
  padding-right: 2rem;
  position: relative;
  color: var(--ink-soft, #4a5568);
  line-height: 1.7;
}

.leader-quote blockquote::before {
  content: "„";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 3rem;
  opacity: 0.18;
  color: currentColor;
  pointer-events: none;
}

.leader-quote blockquote::after {
  content: "”";
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 3rem;
  opacity: 0.18;
  color: currentColor;
  pointer-events: none;
}


.leader-sign{ margin-top: 1rem; }
.leader-modern-name{ margin:0; font-weight:700; }
.leader-modern-role{ margin:.15rem 0 0 0; color: var(--ink-soft, #4a5568); }

.leader-card-photo{
  margin:0; width: clamp(240px, 32vw, 320px); height: clamp(240px, 32vw, 320px);
  box-shadow: 0 12px 36px rgba(0,0,0,.10);
  justify-self: end;
}
.leader-card-photo img{ width:100%; height:100%; object-fit:cover; }
@media (max-width: 960px){ .leader-card-photo{ justify-self: start; } }


/* Smooth Scroll + Offset für fixen Header */
html {
  scroll-behavior: smooth;   /* weiches Scrollen aktivieren */
  scroll-padding-top: 80px;  /* Höhe deines fixen Headers (bei Bedarf anpassen) */
}
/* Barrierefreiheit: Wenn Nutzer „Bewegungen reduzieren“ aktivieren,
   deaktivieren wir Smooth-Scrolling (und andere Animationen ggf. separat). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ===== Kontakt-Banner (unten) ===== */
.anruf-banner {
  position: relative;
  width: 100%;
  height: 40vh;
  background: url("assets/img/slide10.png") center/cover no-repeat; /* Pfad relativ zu styles.css */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.anruf-overlay { position:absolute; inset:0; background: rgba(0,0,0,.45); z-index:1; }
.anruf-content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:16px; }
.anruf-btn { padding:14px 28px; font-size:17px; font-weight:600; border-radius:6px; }


/* ===== Artikel-Seite: Seitenkopf ===== */
.page-hero {
  background: #f6f9ff;
  padding: 60px 24px;
  text-align: center;
}

.page-hero h1 {
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 800;
  color: #0b3575;
  margin-bottom: 12px;
}

.page-intro {
  font-size: 18px;
  color: #444;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ===== Artikel-Links neutral ===== */
.article-heading a {
  color: inherit;             /* // übernimmt die Schriftfarbe des H3 */
  text-decoration: none;      /* // entfernt Unterstreichung */
}

.article-heading a:hover,
.article-heading a:focus-visible {
  color: #0b3575;             /* // optional: leichtes Firmenblau beim Hover */
}



/* ===== Einzelartikel (ohne großes Bild, zentriert, luftig) ===== */

.single-article {
  background: #fff;
  color: #222;
  line-height: 1.7;
  padding-block: 60px;
}

.article-header {
  text-align: center;
  margin-bottom: 10px;
}

.article-header .container {
  max-width: 70%;
  margin: 0 auto;
}

.article-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #0b3575;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.article-title {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  color: #0b3575;
  margin: 0 0 12px;
}

.article-subtitle {
  font-size: 18px;
  color: #555;
  margin-bottom: 0;
}

.article-body {
  max-width: 70%;
  margin: 0 auto;
  padding-inline: 24px;
  line-height: 1.7;
  color: #333;
  font-size: 17px;
}

.article-body h2,
.article-body h3 {
  margin-top: 32px;
  color: #0b3575;
}

.article-body p {
  margin-bottom: 16px;
}

.article-back {
  max-width: 850px;
  margin: 40px auto 0;
  text-align: center;
  padding-inline: 24px;
}




/* ===== Hero-Bild über volle Seitenbreite ===== */
.article-hero {
  width: 100%;
  margin: 0;
}

.article-hero img {
  display: block;
  width: 100%;
  height: 460px; /* kannst du anpassen */
  object-fit: cover;
}







.about-section {
  background: #fff;
  padding-block: clamp(20px, 4vw, 60px); /* ✅ weniger Abstand oben/unten */
}

/* --- Header --- */
.about-header {
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
  margin-bottom: clamp(24px, 4vw, 48px);
}

.about-kicker {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--primary-ink, #0a58ca);
  font-weight: 600;
  margin-bottom: .3rem;
  font-size: .85rem;
}

.about-title {
  font-size: clamp(1.6rem, 2.4vw + .6rem, 2.4rem);
  line-height: 1.2;
  color: var(--ink, #0e1116);
  margin: 0 0 .5rem 0;
}

.about-lead {
  color: var(--ink-soft, #4a5568);
  line-height: 1.6;
  font-size: clamp(1rem, .35vw + .95rem, 1.1rem);
  margin: 0 auto;
  max-width: 70ch;
}

/* --- Layout --- */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr; /* ✅ Bild weiter rechts, Text etwas breiter */
  align-items: start;
  gap: clamp(16px, 4vw, 60px);
  max-width: 1400px; /* ✅ Text kann breiter wirken */
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}

.about-image {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  justify-self: end; /* ✅ schiebt das Bild weiter nach rechts */
  max-width: 700px;
}

.about-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  aspect-ratio: 4 / 3;
}

.about-text {
  color: var(--ink-soft, #4a5568);
  font-size: clamp(1rem, .3vw + 1rem, 1.125rem);
  line-height: 1.7;
  max-width: none; /* ✅ keine künstliche Begrenzung */
}

.about-text p {
  margin-bottom: 1rem;
}

.about-cta {
  margin-top: .5rem;
}

/* --- Responsiv --- */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-image {
    order: -1;
    justify-self: center;
    margin-bottom: 1.5rem;
  }
}

.impressum{
  padding: 3rem 0;
}
.impressum h1{
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  margin-bottom: 1.5rem;
}
.impressum h2{
  font-size: 1.3rem;
  margin-top: 2rem;
  margin-bottom: .75rem;
}
.impressum p{
  margin-bottom: 1rem;
  max-width: 65ch;
  line-height: 1.6;
}
.impressum a{
  color: var(--c-primary, #3b82f6);
  text-decoration: none;
}
.impressum a:hover{
  text-decoration: underline;
}
.impressum .stand{
  margin-top: 2rem;
  color: #666;
}


.datenschutz{
  padding: 3rem 0;
}
.datenschutz h1{
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  margin-bottom: 1.5rem;
}
.datenschutz h2{
  font-size: 1.3rem;
  margin-top: 2rem;
  margin-bottom: .75rem;
}
.datenschutz p,
.datenschutz li{
  margin-bottom: 1rem;
  max-width: 70ch;
  line-height: 1.6;
}
.datenschutz ul{
  margin-left: 1.5rem;
  list-style-type: disc;
}
.datenschutz a{
  color: var(--c-primary, #3b82f6);
  text-decoration: none;
}
.datenschutz a:hover{
  text-decoration: underline;
}


.refs{
  padding: 3rem 0;
}
.refs h1{
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  margin-bottom: 1rem;
}
.refs-intro{
  max-width: 65ch;
  color: #666;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.refs-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.ref-card{
  background: #f7f8fb;
  border: 1px solid #e4e6ee;
  border-radius: 16px;
  padding: 1.5rem;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ref-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}

.ref-logo{
  margin: 0 0 1rem;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.ref-logo img{
  max-height: 60px;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.9;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.ref-card:hover .ref-logo img{
  filter: grayscale(0%);
  opacity: 1;
}

.ref-name{
  font-size: 1.1rem;
  margin: 0 0 .4rem;
  color: #111827;
}
.ref-text{
  color: #4b5563;
  line-height: 1.5;
  font-size: 0.95rem;
}


.knowhow{
  padding: 3rem 0;
}
.knowhow h1{
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  margin-bottom: 1rem;
}
.knowhow-intro{
  max-width: 65ch;
  color: #666;
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* Filter-Buttons */
.knowhow-filter{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 2rem;
}
.knowhow-filter button{
  background: #f3f4f6;
  border: 1px solid #e2e4ea;
  border-radius: 8px;
  padding: .6rem 1rem;
  cursor: pointer;
  font-size: .95rem;
  transition: all .2s ease;
}
.knowhow-filter button:hover{
  background: #e5e7eb;
}
.knowhow-filter button.active{
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

/* Grid */
.knowhow-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Cards */
.know-card{
  background: #f7f8fb;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.know-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}
.know-img img{
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.know-content{
  padding: 1.2rem 1.4rem 1.4rem;
}
.know-content h2{
  font-size: 1.1rem;
  margin: 0 0 .4rem;
  color: #111827;
}
.know-content p{
  color: #4b5563;
  font-size: .95rem;
  line-height: 1.5;
  margin-bottom: .8rem;
}
.know-tags{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.know-tags li{
  background: #e0e7ff;
  color: #1e3a8a;
  padding: .25rem .6rem;
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 500;
}

.know-card {
  transition: opacity .25s ease, transform .25s ease;
}
/* =========================================================
   FIX: Leistungen – Karten vollständig anzeigen
   ========================================================= */

/* Karte als vertikales Layout */
.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Bild bleibt oben */
.service-media {
  aspect-ratio: 16 / 9;
}

/* WICHTIG: Content nicht mehr absolut positionieren */
.service-content {
  position: static;            /* <-- entscheidend */
  background: #ffffff;
  padding: 20px 20px 24px;
  border-radius: 0 0 12px 12px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Überschrift klar & fett */
.service-heading {
  font-size: 20px;
  font-weight: 800;            /* fett */
  line-height: 1.25;
  color: #0b3575;
  margin: 0;
}

/* Text besser lesbar */
.service-text {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

/* Listen sauber darstellen */
.service-content ul {
  padding-left: 18px;
  margin: 0;
}

.service-content li {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 6px;
}

/* Badge etwas Abstand nach oben */
.service-tag {
  align-self: flex-start;
}


/* =========================================================
   INDEX: Zwei Blöcke nebeneinander (Intro-Duo)
   ---------------------------------------------------------
   Verwendung im HTML:
   <section class="intro-duo"> ... <div class="intro-duo-grid"> ... </div>
   Ziel:
   - Desktop: 2 schicke Karten nebeneinander
   - Mobile: untereinander
   ========================================================= */

.intro-duo{
  padding: clamp(28px, 4vw, 64px) 0;
  background: linear-gradient(180deg, rgba(246,249,255,0.9) 0%, #fff 70%);
}

.intro-duo .container{
  max-width: 1100px;
}

.intro-duo-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.6vw, 28px);
  align-items: stretch;
}

.intro-card{
  position: relative;
  background: #fff;
  border: 1px solid rgba(11,53,117,0.14);
  border-radius: 18px;
  padding: clamp(18px, 2.4vw, 28px);
  box-shadow: 0 10px 28px rgba(16,24,40,.08);
  overflow: hidden;
}

.intro-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding-top: 4px; /* Akzentlinie oben */
  background:
    linear-gradient(rgba(11,53,117,0.12), rgba(11,53,117,0.12)) content-box,
    linear-gradient(90deg, #0b3575, rgba(29,78,216,0.55), rgba(14,165,233,0.45)) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) padding-box;
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.intro-kicker{
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #0b3575;
  background: rgba(11,53,117,0.08);
  border: 1px solid rgba(11,53,117,0.12);
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.intro-title{
  margin: 0 0 12px 0;
  font-size: clamp(20px, 1.2rem + .6vw, 26px);
  line-height: 1.25;
  color: #0f2746;
  font-weight: 800;
}

.intro-text{
  margin: 0 0 12px 0;
  color: #3c4653;
  font-size: 16px;
  line-height: 1.65;
}

.intro-text strong{
  color: #0f2746;
}

.intro-list{
  margin: 10px 0 0 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  color: #3c4653;
  line-height: 1.6;
}

.intro-list li strong{
  color: #0f2746;
}

@media (max-width: 920px){
  .intro-duo-grid{ grid-template-columns: 1fr; }
}

/* Optional: falls alte Klasse noch genutzt wird */
.intro-usecase{ padding: 0; background: transparent; }