/* ====================================================================
   shared.css – Gemeinsame Grundlage aller Kautionsretter-Seiten
   --------------------------------------------------------------------
   Eine Wahrheitsquelle (DRY) für alles, was Landingpage und Unterseiten
   identisch nutzen: Design-Tokens, Basis-Layout, Buttons, Header/Nav,
   Kicker, Final-CTA und Footer.
   Seitenspezifisches (Hero, Cards, Formular, Story, Portrait …) bleibt
   bewusst im <style>-Block der jeweiligen Seite.
   ==================================================================== */

:root{
  /* Palette: tiefes "Tresor"-Petrol, warmes Messing als Vertrauensakzent, ruhiges Off-White */
  --ink:#10241f;          /* fast schwarz, grünstichig */
  --deep:#103b32;         /* dunkles Petrol */
  --pine:#1c5a4a;         /* mittleres Grün */
  --mint:#e6f0ea;         /* zartes Grün */
  --paper:#f7f5ef;        /* warmes Off-White */
  --paper-2:#fffdf8;
  --sand:#f3efe4;         /* warmer Sandton – ruhiges Abheben vom Paper (Story-BG, Belege) */
  --sand-2:#ece3d1;       /* etwas tieferer Sand für Verläufe/Rahmen */
  --brass:#c08a3e;        /* Messing/Gold – Akzent */
  --brass-soft:#e8d3ac;
  --line:#dcd8cc;
  --text:#21302b;
  --muted:#5d6b64;
  --radius:18px;
  --shadow:0 1px 2px rgba(16,36,31,.04),0 12px 40px rgba(16,36,31,.08);
  --shadow-lg:0 30px 80px -30px rgba(16,36,31,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
/* scroll-behavior: weiches Scrollen bei Anker-Sprüngen.
   scroll-padding-top: hält jedes Anker-Ziel um die Höhe des sticky Headers (~61px:
   34px Logo + 2×.85rem Padding) frei, sonst verschwindet die Oberkante der
   angesprungenen Section hinter dem Header. Eine Wahrheitsquelle für alle Seiten,
   da Header und Anker-Navigation überall aus shared.css/-js stammen. */
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
/* Scrollbar ausblenden – Scrollen bleibt voll funktionsfähig */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{width:0;height:0;display:none}
body{
  font-family:"Inter",system-ui,sans-serif;
  color:var(--text);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::-webkit-scrollbar{width:0;height:0;display:none}
.wrap{width:min(1140px,88vw);margin-inline:auto}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
a{color:inherit}
section{position:relative}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-weight:600;font-size:1rem;
  padding:.95rem 1.5rem;border-radius:999px;
  text-decoration:none;cursor:pointer;border:0;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  white-space:nowrap;
}
.btn .arr{transition:transform .18s ease}
.btn:hover .arr{transform:translateX(3px)}
.btn-primary{background:var(--brass);color:#231708;box-shadow:0 8px 24px -8px rgba(192,138,62,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(192,138,62,.8)}
.btn-ghost{background:transparent;color:var(--mint);border:1.5px solid rgba(230,240,234,.32)}
.btn-ghost:hover{background:rgba(230,240,234,.08);transform:translateY(-2px)}
.btn-dark{background:var(--deep)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(140%) blur(12px);
  background:rgba(247,245,239,.82);
  border-bottom:1px solid transparent;
  transition:border-color .3s,background .3s}
header.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0}

/* Telefon-Link im Header: niedrigste Hemmschwelle für die telefonaffine
   Zielgruppe. Messing-Akzent als Marken-Detail; auf Mobil bleibt nur das
   Hörer-Icon (Text klappt weg, siehe Responsive), damit die Kopfzeile nicht
   überläuft. Auf allen Seiten identisch – daher hier in shared.css. */
.nav-tel{position:relative;display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;white-space:nowrap;transition:color .15s}
.nav-tel:hover{color:var(--brass)}
.nav-tel svg{flex:none;color:var(--brass)}
/* Telefon-CTA Desktop/Mobil-Tausch (kein JS): Standard (Desktop) zeigt den direkten
   tel:-Anruf, der mobile Sprung-Link zum Kontaktbereich bleibt verborgen. Der Tausch
   auf Mobil erfolgt im Responsive-Block unten. */
.nav-tel--jump{display:none}
/* ---------- Hover-Popup: Erreichbarkeits-Status am Header-Telefon (nur Desktop) ----
   Optik übernommen vom Hero-Scroll-Label (.cue-label): helle Pille (--paper) mit
   dunklem Text, weicher Schatten, fade+slide beim Hover. Anders als das Hero-Label
   klappt es nach UNTEN auf (der Header sitzt am Viewport-Oberrand) – das Dreieck
   zeigt daher nach OBEN auf den Telefon-Link. Dot-Farbe + Status-Text setzt
   shared.js (refreshAvailability), Quelle ist dieselbe wie beim großen .tel-cta. */
.nav-tel-pop{
  position:absolute;top:calc(100% + .55rem);left:50%;
  display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;
  font-size:.78rem;font-weight:600;letter-spacing:.01em;
  color:var(--ink);background:var(--paper);padding:.38rem .7rem;border-radius:999px;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-6px);
  transition:opacity .25s ease,transform .25s ease}
/* Dreieck oben mittig, zeigt auf den Telefon-Link (gleiche Pillenfarbe). */
.nav-tel-pop::before{
  content:"";position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-bottom-color:var(--paper)}
/* X-Zentrierung bleibt im sichtbaren Zustand erhalten (nur das Y-Slide wird aufgelöst). */
.nav-tel:hover .nav-tel-pop,.nav-tel:focus-visible .nav-tel-pop{
  opacity:1;transform:translateX(-50%) translateY(0)}
/* Status-Dot: gedämpft (geschlossen) bzw. grün leuchtend (offen) – schaltet shared.js
   über .is-open/.is-closed am .nav-tel. Default (vor JS) neutral-gedämpft. */
.nav-tel-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--muted);opacity:.5;transition:background .2s,opacity .2s}
.nav-tel.is-open .nav-tel-dot{background:#2faa6e;opacity:1}
.nav-tel.is-closed .nav-tel-dot{background:var(--muted);opacity:.5}
.brand{display:flex;align-items:center;gap:.6rem;font-family:"Fraunces",serif;font-weight:600;font-size:1.22rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.brand .mark{width:34px;height:34px;flex:none}
/* Header-Gruppierung: Text-Link + CTA bilden ein zusammengehöriges Paar, das
   ZENTRIERT im freien Raum zwischen Logo (links) und Telefon (rechts) sitzt.
   Trick: beidseitige Auto-Margins um das Paar. margin-left:auto an .nav-links
   verschluckt allen Platz links des Paars, margin-right:auto am CTA allen Platz
   rechts davon – gleich große Auto-Margins zentrieren das Paar exakt mittig,
   unabhängig von Text-/Buttonbreiten (anders als feste Margins, die nur „ungefähr“
   trafen). Der kleine gap zwischen Link und CTA hält beide als dichtes Paar. */
.nav-links{display:flex;align-items:center;gap:2rem;margin-left:auto}
.nav-links a{text-decoration:none;color:var(--muted);font-weight:500;font-size:.95rem;transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-cta{margin-left:2rem;margin-right:auto}
.nav-cta.btn-dark{color:var(--paper)}
.nav .btn{padding:.62rem 1.15rem;font-size:.92rem}
.nav-toggle{display:none}

/* ---------- Erreichbarkeits-Status an den CTAs ----------
   Der Telefon-Status steckt im tel:-CTA (.tel-cta), damit Punkt und Sprechzeiten
   eindeutig dem Telefon zugeordnet sind. Der „immer offen“-Hinweis sitzt am
   ANDEREN CTA (.cta-always, E-Mail bzw. Fallprüfung), wo er inhaltlich hingehört.
   Geschäftszeiten sind zentrale Wahrheitsquelle in shared.js; JS füllt den
   Telefon-Status und schaltet .is-open/.is-closed am .tel-cta.
   Beide Buttons tragen denselben zweizeiligen Aufbau (Haupttext + kleine Zeile),
   damit ihre Höhe gleich bleibt. Die Zusatzzeilen sind dauerhaft sichtbar – kein
   Hover-Sprung, der die Button-Höhe verändert. */
.tel-cta,.cta-always{position:relative;flex-direction:column;gap:.25rem;line-height:1.3;white-space:normal;text-align:center}
/* Extra Innenraum links, damit der zentrierte Haupttext nicht unter das absolut
   positionierte Telefon-Symbol rutscht – Symmetrie über gleiches Padding rechts. */
.tel-cta{padding-left:2.75rem;padding-right:2.75rem}
/* Haupttext bleibt mittig im Button; das Telefon-Symbol sitzt absolut davor (an
   der früheren Dot-Position). Bezug ist der GANZE Button (.tel-cta), damit es über
   beide Zeilen vertikal mittig steht und den Text nicht aus der Mitte schiebt. */
.tel-cta-main{display:inline-flex;align-items:center;justify-content:center}
/* Der Erreichbarkeits-Status steckt jetzt in der Farbe des Telefon-Symbols
   (kein separater Punkt mehr, der sich mit dem Symbol beißt): gedämpft, wenn
   geschlossen – grün leuchtend, wenn die Leitung offen ist. */
.tel-ic{position:absolute;left:1rem;top:50%;transform:translateY(-50%);opacity:.45;transition:opacity .2s,color .2s}
.tel-cta.is-open .tel-ic{opacity:1;color:#2faa6e}
/* „Jetzt“ nur zeigen, wenn die Leitung offen ist. Außerhalb der Sprechzeiten bleibt
   neutral „anrufen:“ stehen – kein „Jetzt“, das ins Leere führt. Ausgeblendet wird
   nur explizit bei .is-closed; ohne JS (Klasse nicht gesetzt) bleibt „Jetzt anrufen“
   sichtbar wie bisher. */
.tel-cta.is-closed .tel-when{display:none}
/* Fällt „Jetzt“ weg, beginnt der Text mit dem Verb – dann großschreiben („Anrufen:“).
   capitalize trifft nur .tel-verb (die Nummer steht außerhalb), also sauber begrenzt. */
.tel-cta.is-closed .tel-verb{text-transform:capitalize}
/* Untertitel bewusst leichter (dünner + dezenter), damit der Haupttext den
   visuellen Fokus behält. */
.tel-cta-status,.cta-always-note{font-size:.74rem;font-weight:400;opacity:.7}
/* Der „jederzeit“-Hinweis steht immer – er gilt unabhängig von der Telefonzeit
   (E-Mail/Fallprüfung sind jederzeit erreichbar). So bleibt der Button zweizeilig
   und zeigt keine leere Platzhalterzeile, wenn das Telefon gerade erreichbar ist. */

/* ---------- Kicker ----------
   Eigenständige Section-Auszeichnung mit Messing-Strich als
   Wiedererkennungsmerkmal. Funktioniert überall (auch außerhalb von
   .sec-head). Auf hellem Grund dunkles --brass; für dunkle Sections
   siehe .section--dark. */
.kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-feature-settings:"case" on;color:var(--brass);margin-bottom:.8rem}
.kicker::before{content:"";flex:none;width:26px;height:1.5px;background:var(--brass)}

/* Dark-Variante: Marker-Klasse .section--dark auf jeder Section mit dunklem
   Hintergrund (Hero, FAQ, …). Kicker- und Überschrift-Farben passen sich
   automatisch an – der Kicker-Strich bleibt kräftiges --brass als
   gemeinsames Marken-Detail. */
.section--dark .kicker{color:var(--brass-soft)}
.section--dark .sec-head h2{color:#fff}
.section--dark .sec-head p{color:#aebfb8}
.section--dark h1,.section--dark h2{color:#fff}

/* ---------- Final CTA ---------- */
.final{padding:5rem 0}
.final-card{background:
   radial-gradient(120% 120% at 0% 0%,rgba(192,138,62,.25),transparent 55%),
   linear-gradient(160deg,var(--pine),var(--deep));
  border-radius:26px;padding:3.5rem;text-align:center;color:#fff;box-shadow:var(--shadow-lg)}
.final-card h2{color:#fff;font-size:clamp(1.8rem,4vw,2.6rem)}
.final-card p{color:#cfe0d8;font-size:1.1rem;max-width:48ch;margin:1rem auto 2rem}
.final-cta{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap}
.final-card .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
/* Umlenkung außerhalb der Sprechzeiten: Ist die Leitung zu (.tel-cta.is-closed),
   rückt die IMMER erreichbare Option (E-Mail bzw. Fallprüfung, .cta-always) per
   flex-order nach vorne – der Kunde landet dann zuerst auf dem Weg, der ihm sofort
   antwortet, statt auf einem Anruf ins Leere. Über order (nicht DOM-Umbau), damit
   es auf beiden Seiten trotz umgekehrter Markup-Reihenfolge greift. Fällt :has()
   aus (alte Browser), bleibt schlicht die Standard-Reihenfolge – kein Bruch. */
.final-cta:has(.tel-cta.is-closed) .cta-always{order:-1}
/* …und die Betonung mitwandern lassen: dominante Messing-Fläche (btn-primary) an die
   E-Mail, Telefon wird dezent (ghost-Optik). Nur dort, wo das Telefon der primäre
   Button ist (Startseite: .tel-cta.btn-primary) – auf Seiten, wo eine ANDERE Aktion
   die Primärfläche trägt (z.B. „Fall prüfen“), bleibt deren Betonung unberührt.
   Farbwerte aus denselben Tokens/Regeln wie .btn-primary/.btn-ghost oben – eine
   Wahrheitsquelle, hier nur zustandsabhängig zugewiesen. */
.final-cta:has(.tel-cta.btn-primary.is-closed) .cta-always.btn-ghost{
  background:var(--brass);color:#231708;border-color:transparent;
  box-shadow:0 8px 24px -8px rgba(192,138,62,.7)}
.final-cta:has(.tel-cta.btn-primary.is-closed) .tel-cta.btn-primary{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);box-shadow:none}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:#9fb3ab;padding:3rem 0 2rem;border-top:1px solid rgba(255,255,255,.08)}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:2rem;align-items:flex-start}
.foot-brand{max-width:30ch}
.foot-brand .brand{color:#fff;margin-bottom:.7rem}
.foot-brand p{font-size:.9rem;color:#8aa49b}
.foot-col h4{color:#dfeae4;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.9rem;font-family:"Inter";font-weight:700}
.foot-col a{display:block;color:#9fb3ab;text-decoration:none;font-size:.94rem;margin-bottom:.55rem;transition:color .15s}
.foot-col a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:2.5rem;padding-top:1.5rem;font-size:.84rem;color:#7a918a;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}

/* ---------- Scroll-Dots (Section-Navigation) ----------
   Seitliche Punkt-Navigation, die zur jeweils sichtbaren Section springt.
   Auf jeder Seite identisch gestylt; welche Sections es gibt, bestimmt das
   <nav class="scroll-dots"> der Seite, die Aktiv-Logik steckt in shared.js. */
.scroll-dots{
  position:fixed;top:50%;right:max(1rem,calc((100vw - min(1140px,88vw))/2 - 30px));transform:translateY(-50%);
  z-index:60;display:flex;flex-direction:column;gap:1.05rem;align-items:center;
}
.scroll-dots a{
  --d:9px;position:relative;width:26px;height:26px;display:grid;place-items:center;
  text-decoration:none;border-radius:50%;
}
/* Punkt */
.scroll-dots a::before{
  content:"";width:var(--d);height:var(--d);border-radius:50%;
  background:var(--pine);opacity:.35;
  transition:opacity .3s ease,transform .3s ease,background .3s ease;
}
/* Ring (nur bei aktiv sichtbar) */
.scroll-dots a::after{
  content:"";position:absolute;inset:2px;border-radius:50%;
  border:1.5px solid var(--brass);
  transform:scale(1.3);opacity:0;
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .4s ease;
}
.scroll-dots a:hover::before{opacity:.7;transform:scale(1.15)}
.scroll-dots a.active::before{opacity:1;background:var(--brass);transform:scale(.9)}
.scroll-dots a.active::after{transform:scale(1);opacity:1;animation:dotRingPulse .55s cubic-bezier(.22,1,.36,1)}
/* Einmaliger, dezenter Puls beim Aktivwerden – kein Dauer-Loop */
@keyframes dotRingPulse{
  0%{transform:scale(.7);opacity:.5}
  55%{transform:scale(1.18);opacity:1}
  100%{transform:scale(1);opacity:1}
}
/* Tooltip-Label */
.scroll-dots a span{
  position:absolute;right:calc(100% + .55rem);top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;font-size:.78rem;font-weight:600;letter-spacing:.01em;color:var(--paper);
  background:var(--ink);padding:.34rem .66rem;border-radius:999px;
  box-shadow:0 8px 22px -10px rgba(16,36,31,.6);
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;
}
.scroll-dots a span::after{
  content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);
  border:5px solid transparent;border-left-color:var(--ink);
}
.scroll-dots a:hover span{opacity:1;transform:translateY(-50%) translateX(0)}
@media(max-width:900px){.scroll-dots{display:none}}
@media(prefers-reduced-motion:reduce){.scroll-dots a::before,.scroll-dots a::after{transition:opacity .2s ease}.scroll-dots a.active::after{animation:none}}

/* ---------- Gemeinsame Responsive-Regeln ---------- */
@media(max-width:900px){
  /* Mobile-Nav-Drawer (Header) – auf jeder Seite identisch.
     Der CTA (.nav-cta) liegt jetzt AUSSERHALB von .nav-links und bleibt daher in der
     Kopfzeile sichtbar; nur der sekundäre Text-Link kollabiert in den Drawer. */
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--paper-2);border-bottom:1px solid var(--line);padding:1.2rem 5vw;gap:1.1rem;align-items:flex-start}
  .nav-links.open{display:flex}
  .nav-links a{font-size:1.05rem}
  .nav-toggle{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;background:var(--paper-2);cursor:pointer}
  /* Wortmarke auf das Logo-Zeichen reduzieren: schafft Platz, damit CTA, Telefon-
     Icon und Menü-Button nebeneinander passen. Der Text "Der Kautionsretter" wird
     ausgeblendet (font-size:0), das Logo-Bild bleibt; aria/alt tragen den Namen. */
  .brand{font-size:0;gap:0}
  /* CTA fest sichtbar in der Kopfzeile, kompakter: er ist der wichtigste
     Conversion-Pfad und soll nicht im Drawer verschwinden. Wie auf Desktop zentrieren
     beidseitige Auto-Margins den CTA exakt mittig im freien Raum zwischen Logo (links)
     und der Gruppe Telefon + Menü (rechts). */
  .nav-cta{margin-left:auto;margin-right:auto;padding:.55rem .9rem;font-size:.88rem}
  /* Telefon-CTA-Tausch auf Mobil: statt direkt zu wählen springt der Header-Telefon-
     CTA erst zum Kontaktbereich (siehe .nav-tel--jump im Markup). Der direkte tel:-Link
     (--call) verschwindet, der Sprung-Link (--jump) tritt an seine Stelle. */
  .nav-tel--call{display:none}
  .nav-tel--jump{display:inline-flex}
  /* Hover-Popup ist ein reines Desktop-Detail (Touch kennt kein Hover); auf Mobil
     zeigt der Header ohnehin nur das Hörer-Icon. */
  .nav-tel-pop{display:none}
  .nav-tel{margin-left:.6rem;margin-right:.4rem}
  .final-card{padding:2.3rem 1.5rem}

  /* Geringere vertikale Section-Abstände auf Mobil: die großzügigen Desktop-
     Paddings (5–5.5rem) wirken einspaltig als zu große Leerflächen zwischen den
     Inhaltsblöcken. Zentrale Wahrheitsquelle für ALLE Sections, die diese
     Abstände teilen (Landingpage wie Unterseiten) – seitenspezifische Sections
     überschreiben das bei Bedarf in ihrem eigenen <style>. */
  .alt,.steps,.checker,.faq,.final,.story,.creds{padding-top:3.25rem;padding-bottom:3.25rem}

  /* Anruf-CTA mobil: "Jetzt anrufen:"/"Anrufen:" weglassen – das Hörer-Icon plus
     die sichtbare Nummer tragen die Botschaft bereits, der Vorspann ist
     redundant und kostet auf schmalen Buttons nur Platz. Die Nummer steht in
     einem eigenen <span class="tel-label">, der hier ausgeblendet wird. */
  .tel-cta .tel-label{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}