/* Bauteile und Seitenregeln.
   Die Bauteile sind 1:1-Übertragungen der React-Komponenten aus components/core
   und components/patterns. Was dort per useState im Browser umgeschaltet wurde
   (hover, focus), steht hier als CSS-Regel — dafür braucht eine Seite kein React. */

/* ── hidden muss verstecken ───────────────────────────────────────────────
   Die Browser-Grundregel dafür ist nur [hidden]{display:none} und verliert
   gegen JEDE Klassen- oder Inline-Angabe von display. Diese Seite stammt aus
   einer Vorlage, die display überall inline mitführt — ohne diese Regel bleiben
   der Kopf-CTA, der Play-Knopf über dem Video und der Sparhinweis sichtbar,
   obwohl das Attribut gesetzt ist. Gilt ausnahmslos, deshalb !important. */
[hidden]{display:none !important}

/* ── Button ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-body);font-weight:600;font-size:17px;line-height:1;
  min-height:var(--cta-min-height);padding:0 var(--space-5);
  border-radius:var(--radius-sm);border:var(--border-width) solid transparent;
  cursor:pointer;text-decoration:none;
  background:var(--cta-bg);color:var(--cta-text);
  transition:background-color var(--duration-fast) var(--ease),
             color var(--duration-fast) var(--ease),
             border-color var(--duration-fast) var(--ease);
}
.btn:hover{background:var(--cta-bg-hover);color:var(--cta-text)}
.btn--ghost{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn--ghost:hover{background:transparent;color:var(--text-primary);border-color:var(--text-primary)}
.btn--inverse{background:var(--paper,var(--white));color:var(--ink-900)}
.btn--inverse:hover{background:#fff;color:var(--ink-900)}
.btn--full{width:100%}

/* ── TextLink ─────────────────────────────────────────────────────────── */
.textlink{
  font-family:var(--font-body);font-size:inherit;color:var(--text-link);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  transition:color var(--duration-fast) var(--ease);
}
.textlink:hover{color:var(--text-link-hover);text-decoration-thickness:2px}
.textlink--inverse{color:var(--text-on-inverse)}
.textlink--inverse:hover{color:var(--teal-300)}

/* ── Chip ─────────────────────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-mono);font-size:14px;line-height:1;
  color:var(--text-secondary);
  border:var(--border-width) solid var(--border-hairline);
  border-radius:var(--radius-pill);padding:8px 14px;background:transparent;
}

/* ── Input (auf dunklem Grund) ────────────────────────────────────────── */
.feld{display:block}
.feld > span{
  display:block;font-family:var(--font-body);font-weight:500;font-size:var(--step-label);
  letter-spacing:var(--label-tracking);text-transform:uppercase;
  color:var(--text-on-inverse);margin-bottom:var(--space-2);
}
.feld input{
  width:100%;min-height:var(--cta-min-height);padding:0 var(--space-4);
  font-family:var(--font-body);font-size:17px;
  background:rgba(255,255,255,0.06);color:var(--text-on-inverse);
  border:var(--border-width) solid var(--border-on-dark);border-radius:var(--radius-sm);
  transition:border-color var(--duration-fast) var(--ease);
}
.feld input::placeholder{color:rgba(239,244,246,0.5)}
.feld input:focus{outline:none;border-color:var(--teal-300);box-shadow:var(--focus-ring-dark)}

/* ── Akkordeon ────────────────────────────────────────────────────────── */
.akkordeon{border-top:var(--border-width) solid var(--border-hairline)}
.akkordeon__eintrag{border-bottom:var(--border-width) solid var(--border-hairline)}
.akkordeon__frage{
  display:flex;width:100%;gap:var(--space-4);align-items:baseline;justify-content:space-between;
  background:none;border:0;cursor:pointer;text-align:left;
  padding:var(--space-5) 0;min-height:44px;
  font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--text-primary);
}
.akkordeon__zeichen{
  font-family:var(--font-mono);font-size:18px;color:var(--teal-600);
  transition:transform var(--duration-fast) var(--ease);
}
.akkordeon__frage[aria-expanded="true"] .akkordeon__zeichen{transform:rotate(45deg)}
.akkordeon__antwort{
  padding-bottom:var(--space-5);max-width:var(--measure);
  font-size:var(--step-body);line-height:var(--leading-body);color:var(--text-secondary);
}
.akkordeon__frage[aria-expanded="false"] + .akkordeon__antwort{display:none}

/* ── wiederkehrende Seitenbausteine ───────────────────────────────────── */
.huelle{max-width:var(--content-max);margin:0 auto;padding:0 36px}
.karte{
  background:var(--surface-page);border:var(--border-width) solid var(--border-hairline);
  border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:28px;
}
.karte h3{margin:0 0 12px;font-size:21px}
.karte p{color:var(--text-secondary);font-size:17px;margin:0}

/* Verweis auf das LinkedIn-Profil: nur das Zeichen, keine Beschriftung.
   Der Name steht direkt darüber. */
.linkedin{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--radius-sm);
  color:var(--text-secondary);text-decoration:none;
  border:var(--border-width) solid var(--border-hairline);
  transition:color var(--duration-fast) var(--ease),border-color var(--duration-fast) var(--ease);
}
.linkedin:hover{color:var(--teal-600);border-color:var(--teal-600)}
.linkedin:focus-visible{outline:2px solid var(--teal-600);outline-offset:2px;box-shadow:none}

.navlink{color:var(--text-primary);text-decoration:none}
.navlink:hover{color:var(--teal-600)}
.inline-link{color:var(--navy-600);text-underline-offset:3px}
.inline-link:hover{color:var(--teal-600)}

.sprungmarke{
  position:absolute;left:-9999px;top:0;
  background:var(--navy-900);color:var(--ink-on-dark);padding:12px 20px;z-index:100;
}
.sprungmarke:focus{left:0}

.lupe-knopf{
  appearance:none;margin:0;padding:0;
  border:var(--border-width) solid var(--border-hairline);background:var(--surface-1);
  font:inherit;text-align:left;display:block;position:relative;
  border-radius:var(--radius-md);overflow:hidden;cursor:zoom-in;box-shadow:var(--shadow-card);
  transition:box-shadow var(--duration-base) var(--ease);
}
.lupe-knopf:hover{box-shadow:var(--shadow-lift)}

/* ── Rechner ──────────────────────────────────────────────────────────── */
.schalter{
  min-height:44px;padding:0 18px;cursor:pointer;
  font-family:var(--font-body);font-size:16px;border-radius:var(--radius-sm);
  border:var(--border-width) solid var(--border-strong);background:transparent;color:var(--text-primary);
  transition:border-color var(--duration-fast) var(--ease);
}
.schalter:hover{border-color:var(--teal-600)}
.schalter[aria-pressed="true"]{border-color:var(--navy-900);background:var(--navy-900);color:var(--ink-on-dark)}
.zuruecksetzen{
  background:none;border:0;padding:0;margin-top:10px;cursor:pointer;
  font-family:var(--font-body);font-size:14px;color:var(--navy-600);
  text-decoration:underline;text-underline-offset:3px;
}
.zuruecksetzen:hover{color:var(--teal-600)}

/* ── Overlays ─────────────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(10,33,53,0.86);display:grid;place-items:center}
.overlay__schliessen{
  min-width:44px;min-height:44px;border-radius:var(--radius-sm);
  border:var(--border-width) solid var(--border-hairline);background:var(--surface-page);
  color:var(--text-primary);font-family:var(--font-body);font-size:22px;line-height:1;cursor:pointer;
}
.overlay__schliessen:hover{background:var(--surface-1)}
.lupe__schliessen{
  position:fixed;top:24px;right:28px;min-width:44px;min-height:44px;border-radius:var(--radius-pill);
  border:var(--border-width) solid rgba(239,244,246,0.28);background:rgba(16,24,32,0.55);
  color:#fff;font-family:var(--font-body);font-size:22px;line-height:1;cursor:pointer;
}
.lupe__schliessen:hover{background:rgba(16,24,32,0.8)}
.pdf-laden{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--radius-sm);
  background:var(--teal-600);color:#fff;text-decoration:none;font-size:15px;font-weight:500;
}
.pdf-laden:hover{background:var(--navy-600);color:#fff}

/* Haltebalken am Fuß */
.haltebalken{
  position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface-page);
  border-top:var(--border-width) solid var(--border-hairline);
  box-shadow:0 -4px 16px rgba(16,24,32,0.06);padding:12px 0;
}


/* ── Kopfbereich ──────────────────────────────────────────────────────── */
.kopf-nav{display:flex;align-items:center;gap:32px;font-size:16px}
.kopf-aktionen{display:flex;align-items:center;gap:12px}
/* Der CTA im Menü erscheint nur am Telefon. */
.menue-cta{display:none}

/* Der Menüknopf existiert nur auf schmalen Fenstern. */
.menue-knopf{
  display:none;align-items:center;gap:8px;
  min-height:44px;padding:0 14px;cursor:pointer;
  font-family:var(--font-body);font-size:16px;color:var(--text-primary);
  background:transparent;border:var(--border-width) solid var(--border-strong);
  border-radius:var(--radius-sm);
}
.menue-knopf:hover{border-color:var(--teal-600)}
.menue-strich{
  display:block;width:16px;height:2px;background:currentColor;position:relative;
}
.menue-strich::before,
.menue-strich::after{
  content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;
  transition:transform var(--duration-fast) var(--ease),opacity var(--duration-fast) var(--ease);
}
.menue-strich::before{top:-5px}
.menue-strich::after{top:5px}
.menue-knopf[aria-expanded="true"] .menue-strich{background:transparent}
.menue-knopf[aria-expanded="true"] .menue-strich::before{transform:translateY(5px) rotate(45deg)}
.menue-knopf[aria-expanded="true"] .menue-strich::after{transform:translateY(-5px) rotate(-45deg)}

/* ── Ersatz für die Prüfansicht auf kleinen Bildschirmen ──────────────────
   Die Prüfansicht ist eine dreispaltige Bedienoberfläche. Am Telefon lässt
   sie sich nicht sinnvoll bedienen, deshalb tritt dort eine Abbildung an
   ihre Stelle. Der erklärende Text darüber trägt die Aussage ohnehin. */
.review-ersatz{margin:0;display:none}
.review-ersatz > div{
  display:block;width:100%;aspect-ratio:4/3;
  background:var(--surface-page);
  border:var(--border-width) solid var(--border-hairline);
  border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden;
}
.review-ersatz figcaption{
  margin-top:var(--space-3);font-size:15px;line-height:1.5;color:var(--text-secondary);
}

/* ── Schmale Fenster ──────────────────────────────────────────────────────
   Die Vorlage trägt ihre Maße als Inline-Styles. Inline schlägt Stylesheet,
   deshalb steht hier überall !important — ohne das greift keine dieser Regeln. */
@media (max-width:900px){
  .huelle{padding:0 20px}
  .raster-3,.raster-2{grid-template-columns:1fr !important}
  .split-portrait,.split-abschluss{grid-template-columns:1fr !important;gap:32px !important}
  .aussage{grid-template-columns:1fr !important;gap:20px !important}
  .aussage__strich{display:none !important}
  .fuss-raster{grid-template-columns:1fr !important}
  .haltebalken .huelle{flex-direction:column;gap:12px;text-align:center}
  .kopf-zeile{padding:0 16px;gap:10px}
  .kopf-zeile img{height:24px}
  .menue-knopf{display:inline-flex;padding:0 12px}
  /* Beschriftung weg, Symbol genügt — sonst passt die Kopfzeile bei 375px nicht.
     Der Knopf trägt dafür ein aria-label. */
  .menue-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* Die Navigation wird zur ausklappbaren Fläche unter der Kopfzeile. */
  .kopf-nav{
    display:none;position:absolute;left:0;right:0;top:80px;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface-page);
    border-bottom:var(--border-width) solid var(--border-hairline);
    box-shadow:var(--shadow-card);padding:8px 20px 16px;
  }
  .kopf-nav.offen{display:flex}
  .kopf-nav .navlink{
    padding:14px 4px;min-height:44px;display:flex;align-items:center;
    border-bottom:var(--border-width) solid var(--border-hairline);
  }
  .kopf-nav .navlink:last-child{border-bottom:0}
  /* Kopfzeile am Telefon: nur Logo und Symbol. Der CTA sitzt im Menü. */
  #kopf-cta{display:none !important}
  .kopf-nav .menue-cta{display:inline-flex;justify-content:center;margin-top:12px}
  /* Prüfansicht tauschen */
  #review-split{display:none !important}
  .review-ersatz{display:block}
}
@media (max-width:620px){
  .haltebalken span{font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;scroll-behavior:auto !important}
}