/* =============================================================================
   CYI Consulting – Theme
   Bootstrap 5.3 wird über CSS-Variablen überschrieben (kein Sass-Build nötig).
   Systemschriften = keine externen Requests (DSGVO) + schnellster First Paint.
   ============================================================================= */

:root {
  /* Markenfarben – abgestimmt auf die Präsentationsfolien (Hauptfarbe #2B3B5D,
     Sekundärfarbe #7C8594 nur für gezielte Akzente, nie als Fläche für Fließtext). */
  --cyi-navy: #2b3b5d;
  --cyi-navy-soft: #3c4f72;
  --cyi-primary: #2b3b5d;
  --cyi-primary-dark: #1f2c46;
  --cyi-accent: #7c8594;
  --cyi-accent-soft: #eef0f3;
  --cyi-sand: #f5f8fb;
  --cyi-line: #e3e9f0;
  --cyi-muted: #5b6b7c;

  /* Bootstrap-Overrides */
  --bs-primary: var(--cyi-primary);
  --bs-primary-rgb: 43, 59, 93;
  --bs-body-color: #24303c;
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.7;
  --bs-heading-color: var(--cyi-navy);
  --bs-link-color: var(--cyi-primary);
  --bs-link-hover-color: var(--cyi-primary-dark);
  --bs-border-color: var(--cyi-line);
  --bs-border-radius: .625rem;
  --bs-border-radius-lg: .875rem;
  /* Fokusring kräftiger (.5 statt .3): für die Zielgruppe 45+ muss der
     Tastaturfokus auch bei nachlassender Kontrastempfindlichkeit klar
     erkennbar sein. Speist die Ringe von Bootstrap (Formular, Accordion). */
  --bs-focus-ring-color: rgba(43, 59, 93, .5);

  /* WCAG 1.4.11 (Non-Text Contrast, ≥ 3:1): sichtbarer Rahmen für
     Eingabefelder und Outline-Buttons. Sekundärfarbe #7c8594 = 4:1 auf Weiß –
     hier als gezielter Akzent für Rahmen statt Fläche eingesetzt. */
  --cyi-border-strong: #7c8594;
  /* WCAG 1.4.3: Fehlermeldungen dunkler als Bootstrap-Default (#dc3545 ≈ 4.5:1)
     → #b02a37 = 6.5:1, komfortabler Puffer für normalen Text. */
  --cyi-danger-text: #b02a37;
}

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body { -webkit-font-smoothing: antialiased; text-wrap: pretty; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700; letter-spacing: -.015em; text-wrap: balance;
  overflow-wrap: break-word;
}
p, li, dd, td, .lead { overflow-wrap: break-word; }

/* Lange deutsche Komposita ("Informationssicherheit") sprengen sonst schmale Viewports.
   Silbentrennung greift dank lang="de" mit korrekten Trennregeln. */
@media (max-width: 767.98px) {
  h1, h2, h3, p, li, address, .badge { hyphens: auto; overflow-wrap: anywhere; }
  .badge { white-space: normal; }   /* Bootstrap setzt nowrap – sprengt lange Begriffe */
}

/* Flex-Kinder dürfen unter ihre min-content-Breite schrumpfen – sonst schieben
   lange Wörter das Layout auf schmalen Screens auseinander. Icons bleiben ausgenommen. */
.d-flex > * { min-width: 0; }
.d-flex > .bi, .d-flex > [class*="bi-"], .d-flex > .step-number, .d-flex > img {
  min-width: auto; flex-shrink: 0;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.12; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.35rem); line-height: 1.2; }
h3 { font-size: clamp(1.2rem, 1.05rem + .55vw, 1.5rem); }

.lead { font-size: clamp(1.075rem, 1rem + .35vw, 1.25rem); color: var(--cyi-muted); }

/* Bootstrap-Gotcha: Ein .row mit g-5/gx-5 erzeugt negative Aussenränder von 24px,
   während der Container nur 12px Innenabstand hat – auf schmalen Viewports führt das
   zu horizontalem Überlauf. Unterhalb von lg (Spalten stapeln ohnehin) neutralisieren. */
@media (max-width: 991.98px) {
  .container > .row[class*="g-5"],
  .container > .row[class*="gx-5"],
  .container > .row[class*="g-4"],
  .container > .row[class*="gx-4"] { --bs-gutter-x: 1.5rem; }
}

/* --- Utilities ------------------------------------------------------------ */
.text-brand { color: var(--cyi-primary) !important; }
.text-accent { color: var(--cyi-accent) !important; }
.text-muted-2 { color: var(--cyi-muted) !important; }
.bg-sand { background-color: var(--cyi-sand) !important; }
.bg-navy { background-color: var(--cyi-navy) !important; }
.section { padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0; }
.section-sm { padding: clamp(2.5rem, 1.5rem + 3vw, 4rem) 0; }
.measure { max-width: 62ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyi-primary);
}
.eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: var(--cyi-accent); }

/* --- Buttons -------------------------------------------------------------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-padding-y: .7rem; --bs-btn-padding-x: 1.5rem; border-radius: .5rem; }
.btn-primary {
  --bs-btn-bg: var(--cyi-primary); --bs-btn-border-color: var(--cyi-primary);
  --bs-btn-hover-bg: var(--cyi-primary-dark); --bs-btn-hover-border-color: var(--cyi-primary-dark);
  --bs-btn-active-bg: var(--cyi-primary-dark); --bs-btn-active-border-color: var(--cyi-primary-dark);
  box-shadow: 0 6px 18px rgba(43, 59, 93, .18);
}
.btn-outline-primary {
  /* Rahmen von #b9cfdd (1.6:1) auf #7e8fa1 (3.3:1) angehoben – der Umriss ist
     die einzige visuelle Grenze des Buttons und muss WCAG 1.4.11 erfüllen. */
  --bs-btn-color: var(--cyi-primary); --bs-btn-border-color: var(--cyi-border-strong);
  --bs-btn-hover-bg: var(--cyi-primary); --bs-btn-hover-border-color: var(--cyi-primary);
}
.btn-lg { --bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1.9rem; --bs-btn-font-size: 1.0625rem; }

/* --- Navigation ----------------------------------------------------------- */
.navbar {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--cyi-line);
}
.navbar .nav-link { font-weight: 600; color: var(--cyi-muted); padding-inline: .9rem !important; }
.navbar .nav-link:hover, .navbar .nav-link:focus { color: var(--cyi-primary); }
.navbar .nav-link.active { color: var(--cyi-primary); }
.navbar .nav-link.active::after {
  content: ""; display: block; height: 2px; background: var(--cyi-accent);
  margin-top: .25rem; border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--cyi-navy); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 .5rem 0;
}
.skip-link:focus { left: 0; }

/* --- Fokus-Sichtbarkeit (WCAG 2.4.7 / 2.4.11) ----------------------------
   Ein einheitlicher, kräftiger Fokusring für ALLE mit Tastatur ansteuerbaren
   Elemente. :focus-visible greift nur bei Tastatur-/Programmfokus, nicht bei
   Mausklick – so bekommen Tastaturnutzer (und die Zielgruppe 45+) überall eine
   klar sichtbare Markierung, ohne dass Mausklicks störende Ringe zeigen.
   Primärfarbe auf Weiß = 7.2:1, Offset hebt den Ring vom Element ab. */
:focus-visible {
  outline: 3px solid var(--cyi-primary);
  outline-offset: 2px;
}
/* Auf dunklen Flächen (Footer, Navy-Buttons) würde der blaue Ring untergehen –
   dort hell umranden. */
.site-footer :focus-visible,
.btn-primary:focus-visible,
.step-number:focus-visible,
.skip-link:focus-visible {
  outline-color: #fff;
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 480px at 88% -10%, var(--cyi-accent-soft) 0%, rgba(230, 246, 246, 0) 62%),
    linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
  /* ponytail: unten kein Padding – das Porträt schließt bündig mit der Section ab. */
  padding: clamp(3.5rem, 2rem + 6vw, 7rem) 0 0;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(var(--cyi-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--cyi-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(720px 380px at 78% 12%, #000 0%, transparent 72%);
}
.hero > .container { position: relative; z-index: 1; }

/* Freigestelltes Porträt auf einer Markenfläche. Der Kreis endet unten bündig
   mit dem Bild, Kopf und Schultern ragen darüber hinaus – das erzeugt Tiefe,
   ohne dass das Foto beschnitten werden muss. */
.hero-portrait {
  position: relative; margin: 0 auto; max-width: 24rem;
}
.hero-portrait::before {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 100%; aspect-ratio: 1 / 1; transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, #ffffff 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(155deg, var(--cyi-accent-soft) 0%, #d8ebf4 60%, #c9e0ef 100%);
}
.hero-portrait img {
  position: relative; display: block; width: 100%; height: auto;
  filter: drop-shadow(0 18px 28px rgba(43, 59, 93, .28));
}

/* --- Karten --------------------------------------------------------------- */
.card-service {
  /* position: relative ist Pflicht, nicht Kosmetik: die Karten enthalten
     .stretched-link. Ohne positionierten Vorfahren spannt dessen ::after sich
     über die halbe Seite und verschluckt Klicks auf andere Elemente. */
  position: relative;
  height: 100%; background: #fff; border: 1px solid var(--cyi-line); border-radius: .875rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-service:hover, .card-service:focus-within {
  transform: translateY(-4px); border-color: #c9dbe6;
  box-shadow: 0 18px 40px -24px rgba(43, 59, 93, .38);
}
.card-icon {
  width: 3rem; height: 3rem; display: grid; place-items: center;
  border-radius: .75rem; background: var(--cyi-accent-soft); color: var(--cyi-primary);
  font-size: 1.35rem;
}

/* Kennzahl: der Petrol-Strich steht oben wie beim Eyebrow-Label, nicht als
   Seitenbalken. Gleiche Maße (1.75rem × 2px) – dadurch dieselbe Sprache und
   ein Muster weniger, das man aus tausend generierten Oberflächen kennt. */
.stat::before {
  content: ""; display: block; width: 1.75rem; height: 2px;
  background: var(--cyi-accent); margin-bottom: .85rem;
}
.stat-value { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 800; color: var(--cyi-navy); line-height: 1; }
.stat-label { font-size: .9rem; color: var(--cyi-muted); }

.badge-cert {
  background: #fff; border: 1px solid var(--cyi-line); color: var(--cyi-navy);
  font-weight: 600; padding: .5rem .85rem; border-radius: 999px; font-size: .875rem;
}

/* --- Timeline ------------------------------------------------------------- */
.timeline { position: relative; padding-left: 1.85rem; }
.timeline::before {
  content: ""; position: absolute; left: .45rem; top: .35rem; bottom: .35rem;
  width: 2px; background: linear-gradient(var(--cyi-accent), var(--cyi-line));
}
.timeline-item { position: relative; padding-bottom: 1.85rem; }
.timeline-item::before {
  content: ""; position: absolute; left: -1.65rem; top: .45rem;
  width: .75rem; height: .75rem; border-radius: 50%;
  background: #fff; border: 2px solid var(--cyi-primary);
}

/* --- Prozess -------------------------------------------------------------- */
.step-number {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--cyi-navy); color: #fff; font-weight: 700; flex: 0 0 auto;
}

/* --- Accordion / FAQ ------------------------------------------------------ */
.accordion { --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.accordion-button { font-weight: 600; color: var(--cyi-navy); }
.accordion-button:not(.collapsed) { background: var(--cyi-accent-soft); color: var(--cyi-primary-dark); }

/* --- Formular ------------------------------------------------------------- */
.form-control, .form-select {
  /* Rahmen von #cfd9e4 (1.4:1) auf #7e8fa1 (3.3:1) – Feldgrenzen müssen für die
     Zielgruppe 45+ klar sichtbar sein (WCAG 1.4.11). */
  border-color: var(--cyi-border-strong); padding: .75rem .9rem; border-radius: .5rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--cyi-primary); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color);
}
/* Checkbox-Umriss ebenfalls verstärken (Datenschutz-Pflichtfeld). */
.form-check-input { border-color: var(--cyi-border-strong); }
/* Placeholder als Hilfetext: opacity:1 gegen Firefox-Abdunklung, Farbe = 5.5:1. */
.form-control::placeholder { color: var(--cyi-muted); opacity: 1; }
/* Fehlermeldungen dunkler → sicher über 4.5:1 (WCAG 1.4.3). */
.invalid-feedback { color: var(--cyi-danger-text); }
.form-label { font-weight: 600; color: var(--cyi-navy); margin-bottom: .35rem; }
.hp-field { position: absolute !important; left: -9999px !important; opacity: 0; height: 0; overflow: hidden; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--cyi-navy); color: #c7d5e2; }
.site-footer a { color: #e6eef5; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus { color: #fff; text-decoration: underline; }
.site-footer h2, .site-footer h3 { color: #fff; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }

/* --- Consent-Banner ------------------------------------------------------- */
.consent {
  position: fixed; inset: auto 1rem 1rem 1rem; z-index: 1080; max-width: 34rem;
  background: #fff; border: 1px solid var(--cyi-line); border-radius: .875rem;
  box-shadow: 0 24px 60px -20px rgba(43, 59, 93, .4); padding: 1.25rem;
}
.consent[hidden] { display: none !important; }

/* --- Print ---------------------------------------------------------------- */
/* --- Rechtstexte ----------------------------------------------------------
   Das Inhaltsverzeichnis der AGB umfasst 19 Einträge – einspaltig schöbe es
   den Vertragstext weit unter die Falz. */
.legal-toc ul { margin-bottom: 0; }
@media (min-width: 576px) {
  .legal-toc ul { columns: 2; column-gap: 2rem; }
  .legal-toc li { break-inside: avoid; }
}

/* --- Druck / PDF-Export ---------------------------------------------------
   Der PDF-Button der Rechtstexte (data-print, siehe assets/js/main.js) ruft den
   Druckdialog auf. Damit daraus ein vorzeigbares Dokument wird, fällt hier alles
   weg, was nur am Bildschirm Sinn ergibt, und der Inhalt bekommt die volle
   Seitenbreite statt der auf Lesbarkeit gerechneten acht Spalten. */
@page { margin: 18mm 16mm 20mm; }

@media print {
  .navbar, .site-footer, .consent, .btn, .skip-link, #toTop { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }

  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.45; }
  a { color: #000; text-decoration: underline; }

  /* Gitter aufheben: im Druck gibt es keine Sidebar, für die Platz bleiben müsste. */
  .section, .section-sm { padding-top: 0 !important; padding-bottom: 0 !important; }
  .container { width: 100%; max-width: none; padding: 0; }
  .col-lg-8 { flex: 0 0 100%; max-width: 100%; width: 100%; }

  h1 { font-size: 17pt; margin-bottom: .5rem; }
  h2 { font-size: 11.5pt; margin-top: 1.2rem !important; }
  /* Eine Überschrift allein am Seitenfuss ist der häufigste Fehler im Ausdruck. */
  h1, h2, h3 { break-after: avoid-page; page-break-after: avoid; break-inside: avoid; }
  p, li { orphans: 3; widows: 3; }
  ul { margin-bottom: .6rem; }
}

/* --- Selbstcheck (NIS-2 / CRA, CYI-9) ------------------------------------- */
/* Interaktiver Lead-Magnet. Ruhige, sachliche Tonalität ("ohne Panikmache"):
   Betroffenheit wird in Petrol/Navy gesetzt, nicht in Alarmrot. */
.check-card {
  background: #fff; border: 1px solid var(--cyi-line); border-radius: .875rem;
  box-shadow: 0 18px 40px -30px rgba(43, 59, 93, .35);
}

/* Auswahl des Regelwerks */
.check-track {
  height: 100%; background: #fff; border: 1px solid var(--cyi-line); border-radius: .875rem;
  padding: 1.5rem; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.check-track:hover, .check-track:focus-visible {
  transform: translateY(-3px); border-color: #c9dbe6;
  box-shadow: 0 18px 40px -24px rgba(43, 59, 93, .38); outline: none;
}
.check-track-icon {
  width: 3rem; height: 3rem; display: grid; place-items: center; margin-bottom: .85rem;
  border-radius: .75rem; background: var(--cyi-accent-soft); color: var(--cyi-primary); font-size: 1.35rem;
}
.check-track-title { font-weight: 700; font-size: 1.25rem; color: var(--cyi-navy); }
.check-track-sub { font-size: .9rem; }

/* Fortschritt */
.check-progress { height: 6px; background: var(--cyi-line); border-radius: 999px; overflow: hidden; }
.check-progress-fill {
  /* transform statt width: eine Breitenänderung würde Layout neu berechnen (Layout-Thrash),
     scaleX ist reiner Compositor-Job. */
  height: 100%; width: 100%; background: var(--cyi-accent); border-radius: 999px;
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}

/* Antwortoptionen */
.check-options { display: grid; gap: .75rem; }
.check-option {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: #fff; border: 1px solid var(--cyi-line); border-radius: .625rem;
  padding: .9rem 1.15rem; font-weight: 600; color: var(--cyi-navy);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.check-option:hover, .check-option:focus-visible {
  border-color: var(--cyi-primary); background: var(--cyi-accent-soft); outline: none;
  box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}
.check-option.is-selected { border-color: var(--cyi-primary); background: var(--cyi-accent-soft); }
.check-option-label { text-align: left; }
.check-option-arrow { color: var(--cyi-primary); flex: 0 0 auto; }
.check-select { max-width: 42rem; }

/* Ergebnis – Ton wird ausschließlich über das Badge signalisiert (kein Seitenbalken,
   siehe DESIGN.md „Don't farbige Seitenbalken an Karten oder Blöcken setzen"). */
.check-badge {
  display: inline-block; font-weight: 700; font-size: .8125rem; letter-spacing: .04em;
  text-transform: uppercase; padding: .4rem .85rem; border-radius: 999px;
  background: var(--cyi-accent-soft); color: var(--cyi-primary-dark);
}
.check-badge.tone-warning { background: #fdf1df; color: #9a5b0c; }
.check-badge.tone-neutral { background: #e8f3ee; color: #1a7f47; }
.check-cta {
  background: var(--cyi-sand); border: 1px solid var(--cyi-line); border-radius: .75rem;
}