/* ============================================================
   ui-polish.css — sitewide Feinschliff, Bewegung, Bedienbarkeit
   ------------------------------------------------------------
   Additive Ebene: setzt auf premium-site.css und die
   seiteneigenen Inline-Styles auf und ueberschreibt bewusst
   nur dort, wo etwas fehlte oder gestoert hat.

   Reihenfolge: NACH cro.css einbinden.
   Aenderungen brauchen ein neues ?v=JJJJMMTT (Assets werden 24h gecacht).
   ============================================================ */

/* ---------- 1) Sprungmarken landeten unter der fixen Nav ----------
   #site-nav ist position:fixed mit 64px Hoehe. Ohne scroll-margin-top
   verschwindet das Ziel eines Ankerlinks hinter der Navigation. */
:target,
[id] {
  scroll-margin-top: 84px;
}

/* ---------- 2) Sichtbarer Tastaturfokus ----------
   Mehrere Formularfelder setzten outline:none ohne Ersatz –
   wer per Tastatur ausfuellt, sah nicht, wo er steht. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold, #C9A84C);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Formularfelder zusaetzlich mit ruhigem Ring statt hartem Sprung */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color: var(--brand, #0E1B2C);
  box-shadow: 0 0 0 4px rgba(14, 27, 44, 0.12);
}

/* Maus-Klick soll keinen Ring hinterlassen (nur :focus-visible) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- 3) Touch ----------
   300ms-Verzoegerung durch Doppeltipp-Zoom entfernen, Tap-Highlight zaehmen. */
a, button, summary, label, input[type="checkbox"], input[type="radio"], .cro-float-btn, .cro-sticky-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(14, 27, 44, 0.08);
}

/* ---------- 4) Typografie ----------
   Ueberschriften ohne Schusterjungen, Zahlen in gleicher Laufweite. */
h1, h2, h3 {
  text-wrap: balance;
}
p, li {
  text-wrap: pretty;
}
.proof-num,
.zahl-karte .wert,
.calc-result-value,
.stat-value,
table.grenzwerte td.num,
.num,
time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- 5) Mikrointeraktionen ----------
   Nur transform/opacity/box-shadow animieren (compositor-freundlich),
   nie "transition: all". */
.btn-primary,
.btn-cta,
.btn-cta-white,
.btn-hero,
.btn-download,
.calc-cta-btn,
#site-nav .nav-cta,
#site-nav .nav-cta-dropdown,
.cro-float-btn,
button[type="submit"] {
  transition: transform .18s cubic-bezier(.2, .7, .3, 1),
              box-shadow .18s cubic-bezier(.2, .7, .3, 1),
              background-color .18s ease;
  will-change: transform;
}
.btn-primary:hover,
.btn-cta:hover,
.btn-cta-white:hover,
.btn-hero:hover,
.btn-download:hover,
.calc-cta-btn:hover,
#site-nav .nav-cta:hover,
.cro-float-btn:hover,
button[type="submit"]:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(14, 27, 44, 0.22);
}
.btn-primary:active,
.btn-cta:active,
.btn-cta-white:active,
.btn-hero:active,
.calc-cta-btn:active,
button[type="submit"]:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(14, 27, 44, 0.18);
}
button[type="submit"]:disabled {
  opacity: .65;
  cursor: progress;
  transform: none;
}

/* Karten heben sich leicht an — signalisiert Klickbarkeit */
.zahl-karte,
.fakt-box,
.review-card,
.leistung-karte {
  transition: transform .2s cubic-bezier(.2, .7, .3, 1),
              box-shadow .2s cubic-bezier(.2, .7, .3, 1),
              border-color .2s ease;
}
a > .zahl-karte:hover,
a.karte:hover,
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(14, 27, 44, 0.12);
}

/* Inhaltslinks: Unterstreichung waechst statt hart zu erscheinen */
.quelle-link,
main p > a:not([class]) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  text-decoration: none;
  transition: background-size .22s cubic-bezier(.2, .7, .3, 1), color .18s ease;
}
.quelle-link:hover,
main p > a:not([class]):hover {
  background-size: 100% 1.5px;
}

/* Akkordeon-Pfeil dreht weich mit */
details summary::after {
  transition: transform .2s cubic-bezier(.2, .7, .3, 1);
}
details[open] summary::after {
  transform: rotate(180deg);
}

/* ---------- 6) Scroll-Reveal ----------
   Startzustand wird NUR gesetzt, wenn JS laeuft (html.js-reveal).
   Ohne JavaScript bleibt alles sofort sichtbar. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.2, .7, .3, 1),
              transform .55s cubic-bezier(.2, .7, .3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- 7) Bewegung respektiert Systemeinstellung ----------
   Wer "Bewegung reduzieren" aktiviert hat, bekommt keine Transformationen. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .btn-primary:hover,
  .btn-cta:hover,
  .btn-cta-white:hover,
  .btn-hero:hover,
  .calc-cta-btn:hover,
  .review-card:hover,
  a.karte:hover,
  button[type="submit"]:hover:not(:disabled) {
    transform: none;
  }
}

/* ---------- 8) Layout-Sicherheit ----------
   Kein horizontales Wackeln, lange Woerter brechen um. */
html, body {
  overflow-x: clip;
}
h1, h2, h3, p, li, td, th, summary {
  overflow-wrap: break-word;
}

/* Safe-Area auf Geraeten mit Notch: die Sticky-Leiste sass sonst im Homebar-Bereich */
.cro-sticky {
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

/* ---------- 9) Bilder ----------
   Verhindert Verzerrung, wenn width/height vom Layout abweichen. */
img {
  max-width: 100%;
  height: auto;
}

/* ---------- 10) Lesefortschritt ----------
   Die Ratgeberseiten sind 6.000-8.000 px lang. Der Balken beantwortet
   die Frage "wie viel kommt noch?", ohne Platz zu kosten. */
#leseFortschritt {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold, #C9A84C), var(--gold-soft, #D9C07A));
  z-index: 1200;
  pointer-events: none;
  will-change: transform;
}

/* ---------- 11) Formular-Rueckmeldung ----------
   Gruen/rot erst, NACHDEM das Feld verlassen wurde – nicht schon
   waehrend des Tippens, sonst blinkt jede E-Mail-Adresse kurz rot. */
input.is-geprueft:valid:not(:placeholder-shown) {
  border-color: #15803d !important;
}
input.is-geprueft:invalid:not(:placeholder-shown),
input.ist-unplausibel {
  border-color: #b91c1c !important;
}
/* gruen nur, wenn auch die strengere Pruefung bestanden ist */
input.is-geprueft.ist-unplausibel:valid:not(:placeholder-shown) {
  border-color: #b91c1c !important;
}
.feld-hinweis {
  display: block;
  font-size: 11.5px;
  line-height: 1.5;
  margin-top: 5px;
  color: #b91c1c;
  font-family: 'Inter', sans-serif;
}

/* Checkbox-Zeilen: ganze Zeile klickbar, keine toten Zonen */
label[for] { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  #leseFortschritt { transition: none !important; }
}