/* ==========================================================================
   Funnel – gemeinsame Bausteine fuer Schadenmeldung und Bewerbung
   --------------------------------------------------------------------------
   Diese Datei traegt alles, was die gefuehrten Formulare brauchen:
   Fortschrittsanzeige, Felder, Auswahlkacheln, Zusammenfassung, Toast und
   die Korrekturen, mit denen sich der Funnel in den Website-Rahmen fuegt.

   Reihenfolge im <head>: fonts.css, site.css, DANN funnel.css – der
   Korrekturteil am Ende setzt bewusst Regeln aus site.css zurueck.
   ========================================================================== */

/* ============================================================
   DESIGN TOKENS – 1:1 von agentur-hessling.de abgenommen
   Grundflaeche  #FFFFFF  die Website ist weiß, Blau ist nur Akzent
   Navy          #192B47  Buttons, Überschriften, Fußzeile
   Akzentband    #EBF8FF  hellblauer Abschnittston, sparsam eingesetzt
   Fließtext     #3B3B3B  Body-Farbe der Website
   Akzent        #246CB4  mittleres Blau aus dem Agenturlogo
   Radien    5px / 10px wie auf der Website
   Schrift   Montserrat (große Überschriften) + Open Sans (alles andere)
   ============================================================ */
:root{
  /* Die Seite ist immer hell – wie agentur-hessling.de, das keinen Dark Mode
     hat. Ohne diese Zeile faerben Systeme im Dunkelmodus native Bedienelemente
     (Datumsfeld, Scrollleiste, Autofill) dunkel ein. */
  color-scheme:light;

  --navy:#192B47;
  --navy-700:#24395E;
  --accent:#246CB4;
  --accent-strong:#1D5893;
  --accent-soft:#EBF8FF;   /* Akzentband der Website – Auswahl, Chips, Hinweise */
  --on-accent:#FFFFFF;     /* Text/Icons auf Akzentflächen */

  --bg:#FFFFFF;            /* weiße Grundfläche wie auf agentur-hessling.de */
  --surface:#FFFFFF;
  --surface-2:#F5FAFE;
  --surface-3:#E4F2FB;
  --border:#D3E6F4;        /* dekorative Trenner */
  --border-strong:#678DAB; /* Rahmen von Bedienelementen – >=3:1 (WCAG 1.4.11) */

  --text:#3B3B3B;
  --text-muted:#56636F;

  --danger:#C0392B;
  --danger-bg:#FCEDEB;
  --danger-border:#EFC3BC;
  --success:#1B7A4C;
  --success-bg:#E9F6EF;
  --warning:#8A5B00;
  --warning-bg:#FDF4E3;
  --warning-border:#EFD9A9;

  --btn-primary-bg:#192B47;
  --btn-primary-bg-hover:#24395E;
  --btn-primary-fg:#FFFFFF;

  --ring:#246CB4;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px;

  --r-sm:5px; --r-md:8px; --r-lg:10px; --r-pill:999px;

  /* Auf weißem Grund trägt der Schatten die Abgrenzung, nicht der Rahmen –
     wie bei den weißen Karten auf agentur-hessling.de. */
  --shadow-1:0 1px 2px rgba(25,43,71,.08), 0 2px 5px -1px rgba(25,43,71,.10);
  --shadow-2:0 2px 4px rgba(25,43,71,.10), 0 6px 14px -3px rgba(25,43,71,.14);
  --shadow-3:0 2px 5px rgba(25,43,71,.11), 0 10px 22px -4px rgba(25,43,71,.17), 0 28px 56px -16px rgba(25,43,71,.16);

  --z-sticky:40; --z-overlay:100;

  --dur:200ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);

  --content:1120px;
  --card:780px;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
/* Kein globales scroll-behavior:smooth – das Scrollen steuert das Skript
   gezielt pro Schrittwechsel, sonst wird jedes Anker-Ziel träge. */
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* Wie auf der Website: Montserrat nur für die großen Headlines,
   alle kleineren Überschriften und Buttons in Open Sans 700. */
h1,h2{font-family:Montserrat,"Open Sans",sans-serif;font-weight:700;color:var(--text);line-height:1.25;margin:0}
h3,h4,legend{font-family:"Open Sans",sans-serif;font-weight:700;color:var(--text);line-height:1.3;margin:0}
p{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-strong);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--navy-700)}
button{font:inherit;color:inherit}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--ring);
  outline-offset:2px;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;left:16px;top:-100px;z-index:var(--z-overlay);
  background:var(--surface);color:var(--text);padding:12px 16px;
  border-radius:var(--r-sm);box-shadow:var(--shadow-2);font-weight:700;
  text-decoration:none;transition:top var(--dur) var(--ease-out);
}
.skip-link:focus{top:16px}
.wrap{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:16px}
@media (min-width:768px){ .wrap{padding-inline:32px} }
@media (min-width:1280px){ .wrap{padding-inline:48px} }
.icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon-sm{width:18px;height:18px}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:var(--z-sticky);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-1);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
/* flex:none – sonst staucht der Flexcontainer das Logo, und object-fit:cover
   wuerde den Schriftzug rechts abschneiden statt ihn zu verkleinern. */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:none;min-height:44px}
/* logo-hessling.png ist bereits zugeschnitten und auf 682x112 gerechnet – also
   die doppelte Darstellungsgroesse fuer Retina. Deshalb hier kein object-fit
   und kein aspect-ratio mehr: der Browser skaliert hoechstens um Faktor 2
   statt wie zuvor um Faktor 10, was den Schriftzug ausgefranst wirken liess. */
.brand img{
  display:block;flex:none;
  height:36px;
  width:auto;
}
@media (min-width:360px){  .brand img{height:42px} }
@media (min-width:420px){  .brand img{height:46px} }
@media (min-width:560px){  .brand img{height:50px} }
@media (min-width:768px){  .brand img{height:52px} }
@media (min-width:1024px){ .brand img{height:56px} }
.header-contact{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:8px 14px;
  border-radius:var(--r-pill);border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text);
  font-weight:700;font-size:15px;text-decoration:none;white-space:nowrap;
  transition:border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.header-contact:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.header-contact .icon{color:var(--accent-strong)}
/* Je schmaler die Kopfzeile, desto knapper der Button – damit das grosse Logo Platz hat. */
.header-contact .label,.header-contact .num{display:none}
@media (min-width:768px){  .header-contact .num{display:inline} }
@media (min-width:1024px){ .header-contact .label{display:inline} }

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:48px 0 24px}
@media (min-width:768px){ .hero{padding:64px 0 32px} }
.hero-inner{max-width:720px;margin-inline:auto;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--accent-strong);
  font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.hero h1{margin-top:16px;font-size:clamp(28px,5.2vw,44px);letter-spacing:-.015em}
.hero .lead{margin-top:16px;color:var(--text-muted);font-size:clamp(16px,2.2vw,18px);max-width:56ch;margin-inline:auto}
.trust-marquee{margin-top:24px}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;margin:0;list-style:none;padding:0}
.trust-row li{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--border);
  font-size:14px;font-weight:600;color:var(--text-muted);
  box-shadow:var(--shadow-1);
  white-space:nowrap;
}
.trust-row .icon{color:var(--accent)}
/* Ab Tablet reicht der Platz fuer eine ruhige Zeile – Duplikate weg. */
@media (min-width:560px){ .trust-row li[data-clone]{display:none} }

/* --- Handy: durchlaufender Laufband-Slider statt Umbruch untereinander --- */
@media (max-width:559px){
  .trust-marquee{
    overflow:hidden;
    /* Weiche Kanten, damit die Chips nicht hart abgeschnitten wirken */
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  }
  .trust-row{
    flex-wrap:nowrap;justify-content:flex-start;
    width:max-content;
    gap:0;                 /* Abstand kommt ueber margin-right, siehe unten */
  }
  /* margin-right statt gap: so ist der Track exakt doppelt so breit wie ein
     Durchlauf und translateX(-50%) trifft die Schleife ohne Sprung. */
  .trust-row li{flex:none;margin-right:12px}
  .trust-marquee.is-marquee .trust-row{
    animation:trustScroll 26s linear infinite;
    will-change:transform;
  }
}
@keyframes trustScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ============================================================
   HINWEIS
   ============================================================ */
.notice{
  display:flex;gap:12px;align-items:flex-start;
  max-width:var(--card);margin:0 auto 24px;
  padding:16px;border-radius:var(--r-md);
  background:var(--warning-bg);border:1px solid var(--warning-border);
  color:var(--text);font-size:15px;line-height:1.55;
}
.notice .icon{color:var(--warning)}
.notice a{color:var(--text);font-weight:700}

/* ============================================================
   FUNNEL
   ============================================================ */
.funnel{padding-bottom:64px}
.card{
  max-width:var(--card);margin-inline:auto;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-3);
  overflow:hidden;
}
.progress{padding:24px 16px 16px;border-bottom:1px solid var(--border);background:var(--surface-2)}
@media (min-width:768px){ .progress{padding:24px 32px 16px} }
.progress-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.progress-step{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-strong);white-space:nowrap}
.progress-title{font-family:"Open Sans",sans-serif;font-weight:700;font-size:15px;text-align:right}
.progress-track{height:6px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.progress-fill{
  height:100%;width:0%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--accent),var(--accent-strong));
  transition:width 320ms var(--ease-out);
}
.steps-list{display:none;list-style:none;margin:16px 0 0;padding:0;gap:8px}
@media (min-width:880px){ .steps-list{display:flex;justify-content:space-between} }
.steps-list li{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text-muted);min-width:0}
.steps-list .dot{
  width:24px;height:24px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-3);color:var(--text-muted);
  font-size:12px;font-weight:700;border:1px solid var(--border-strong);
}
.steps-list li[data-state="current"]{color:var(--text)}
.steps-list li[data-state="current"] .dot{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.steps-list li[data-state="done"] .dot{background:var(--success-bg);border-color:var(--success);color:var(--success)}
.steps-list .dot .icon{width:14px;height:14px;stroke-width:2.6}

.step{padding:24px 16px 32px;scroll-margin-top:92px}
@media (min-width:768px){ .step{padding:32px 32px 40px} }
.step[hidden]{display:none}
/* Sprungziele aus der Fehlerliste nicht unter die Sticky-Kopfzeile schieben */
.field,.fieldgroup,.sparte{scroll-margin-top:104px}
.step-intro{margin-bottom:24px}
.step-intro h2{font-size:clamp(21px,3.4vw,26px);letter-spacing:-.01em}
.step-intro p{margin-top:8px;color:var(--text-muted);font-size:15.5px;max-width:60ch}

.error-summary{margin-bottom:24px;padding:16px;border-radius:var(--r-md);background:var(--danger-bg);border:1px solid var(--danger-border);scroll-margin-top:100px}
.error-summary[hidden]{display:none}
.error-summary h3{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--danger)}
.error-summary ul{margin:8px 0 0;padding-left:24px;font-size:15px}
.error-summary li{margin-top:4px}
.error-summary a{color:var(--danger);font-weight:700}

/* --- Felder --- */
.grid{display:grid;gap:16px}
@media (min-width:640px){
  .grid-2{grid-template-columns:1fr 1fr}
  .span-2{grid-column:1 / -1}
}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > label,.field-label{font-size:14.5px;font-weight:600;color:var(--text)}
.req{color:var(--danger);font-weight:700;margin-left:2px}
.opt{color:var(--text-muted);font-weight:400;font-size:13px;margin-left:4px}
.hint{font-size:13.5px;color:var(--text-muted);line-height:1.5}
input[type="text"],input[type="tel"],input[type="email"],input[type="date"],
input[type="time"],input[type="number"],select,textarea{
  width:100%;min-height:48px;padding:12px 14px;
  font:inherit;font-size:16px;color:var(--text);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--r-sm);
  transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
  -webkit-appearance:none;appearance:none;
}
textarea{min-height:124px;resize:vertical;line-height:1.6}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356636F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:20px;
  padding-right:44px;cursor:pointer;
}
input:hover,select:hover,textarea:hover{border-color:var(--accent)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:.8}
[aria-invalid="true"]{border-color:var(--danger) !important;background:var(--danger-bg) !important}
[aria-invalid="true"]:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 28%, transparent) !important}
.err{display:none;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--danger)}
.err:not(:empty){display:flex}
.err .icon{width:16px;height:16px;stroke-width:2.3}

.fieldgroup{border:0;margin:0;padding:0;min-width:0}
.fieldgroup legend{font-size:14.5px;font-weight:600;color:var(--text);padding:0;margin-bottom:6px;font-family:"Open Sans",sans-serif}
.fieldgroup .hint{margin-bottom:12px}
.choices{display:grid;gap:8px;margin-top:4px}
@media (min-width:560px){ .choices-2{grid-template-columns:1fr 1fr} }
.choice{
  display:flex;align-items:flex-start;gap:12px;
  min-height:48px;padding:12px 14px;
  border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:var(--surface);cursor:pointer;
  transition:border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.choice:hover{border-color:var(--accent);background:var(--accent-soft)}
.choice input{margin:3px 0 0;width:20px;height:20px;flex:none;accent-color:var(--accent);cursor:pointer}
.choice span{font-size:15.5px;line-height:1.45}
/* Doppelt abgesichert: :has() für moderne Browser, .is-checked/.is-focus per
   JS als Fallback – sonst wäre auf älteren Browsern gar keine Auswahl sichtbar. */
.choice:has(input:checked),.choice.is-checked{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.choice:has(input:focus-visible),.choice.is-focus{outline:3px solid var(--ring);outline-offset:2px}

/* --- Sparten --- */
.sparten{display:grid;gap:12px;list-style:none;margin:0;padding:0}
@media (min-width:640px){ .sparten{grid-template-columns:1fr 1fr} }
.sparte{
  position:relative;display:flex;gap:16px;align-items:flex-start;
  padding:16px;padding-right:44px;min-height:96px;
  border:1px solid var(--border-strong);border-radius:var(--r-md);
  background:var(--surface);cursor:pointer;
  transition:border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.sparte:hover{border-color:var(--accent);box-shadow:var(--shadow-2)}
.sparte:active{transform:scale(.99)}
.sparte input{position:absolute;opacity:0;width:1px;height:1px}
.sparte .sp-icon{
  width:48px;height:48px;flex:none;border-radius:var(--r-sm);
  display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-strong);
  transition:background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.sparte .sp-icon .icon{width:26px;height:26px}
.sparte .sp-title{font-family:"Open Sans",sans-serif;font-weight:700;font-size:16px;display:block;line-height:1.3}
.sparte .sp-desc{display:block;margin-top:4px;font-size:13.5px;color:var(--text-muted);line-height:1.5}
.sparte .sp-check{
  position:absolute;top:12px;right:12px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:var(--on-accent);
  opacity:0;transform:scale(.7);
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.sparte .sp-check .icon{width:15px;height:15px;stroke-width:3}
.sparte:has(input:checked),.sparte.is-checked{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.sparte:has(input:checked) .sp-check,.sparte.is-checked .sp-check{opacity:1;transform:scale(1)}
.sparte:has(input:checked) .sp-icon,.sparte.is-checked .sp-icon{background:var(--accent);color:var(--on-accent)}
.sparte:has(input:focus-visible),.sparte.is-focus{outline:3px solid var(--ring);outline-offset:2px}

/* --- Bedingte Blöcke --- */
.cond{
  margin-top:16px;padding:16px;
  border-left:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--surface-2);display:grid;gap:16px;
}
.cond[hidden],.branch[hidden]{display:none}
.subhead{
  display:flex;align-items:center;gap:8px;
  margin:8px 0 -4px;padding-top:8px;
  font-family:"Open Sans",sans-serif;font-weight:700;font-size:15px;
}
.subhead .icon{color:var(--accent)}
.subhead:first-child{margin-top:0;padding-top:0}
hr.sep{border:0;border-top:1px solid var(--border);margin:8px 0}

/* --- Repeater (Stehlgutliste) --- */
.repeater{display:grid;gap:12px}
.rep-row{
  display:grid;gap:12px;padding:14px;
  border:1px solid var(--border-strong);border-radius:var(--r-md);
  background:var(--surface);
}
.rep-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rep-num{
  font-family:"Open Sans",sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);
}
.rep-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.rep-bez{grid-column:1/-1}
@media (min-width:560px){
  .rep-grid{grid-template-columns:2fr 1fr 1fr}
  .rep-bez{grid-column:auto}
}
.rep-del{
  width:44px;height:44px;flex:none;display:grid;place-items:center;
  border:1px solid var(--border);border-radius:var(--r-sm);
  background:transparent;color:var(--text-muted);cursor:pointer;
  transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.rep-del:hover{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}

/* --- Buttons --- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:52px;padding:14px 24px;
  font-family:"Open Sans",sans-serif;font-size:16px;font-weight:700;
  border-radius:var(--r-sm);border:1px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
             color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform 120ms var(--ease-out);
}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg);box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--btn-primary-bg-hover);color:var(--btn-primary-fg);box-shadow:var(--shadow-2)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--accent);color:var(--text)}
.btn-quiet{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)}
.btn-quiet:hover{background:var(--surface-3);color:var(--text)}
.btn-sm{min-height:44px;padding:10px 16px;font-size:14.5px}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn[disabled]:active{transform:none}

.step-nav{display:flex;gap:12px;align-items:center;margin-top:32px;padding-top:24px;border-top:1px solid var(--border);flex-direction:column-reverse}
@media (min-width:560px){ .step-nav{flex-direction:row;justify-content:space-between} }
.step-nav .btn{width:100%}
@media (min-width:560px){ .step-nav .btn{width:auto} }

/* --- Zusammenfassung --- */
.summary-block{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);margin-bottom:16px;overflow:hidden}
.summary-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--surface-3);border-bottom:1px solid var(--border)}
.summary-head h3{font-size:15px}
.summary-edit{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 12px;
  background:transparent;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  font-size:13.5px;font-weight:700;color:var(--accent-strong);cursor:pointer;
  transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.summary-edit:hover{background:var(--surface);border-color:var(--accent)}
.summary-body{margin:0;padding:8px 16px}
.summary-body > div{display:grid;gap:2px;padding:10px 0;border-bottom:1px solid var(--border)}
@media (min-width:600px){ .summary-body > div{grid-template-columns:minmax(160px,36%) 1fr;gap:16px;align-items:baseline} }
.summary-body > div:last-child{border-bottom:0}
.summary-body dt{font-size:13.5px;font-weight:600;color:var(--text-muted)}
.summary-body dd{margin:0;font-size:15px;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.summary-empty{padding:16px;color:var(--text-muted);font-size:14.5px}

.consent{margin-top:24px;padding:16px;border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface)}
.consent .choice{border:0;padding:0;min-height:0;background:transparent}
.consent .choice:hover{background:transparent}
.consent .choice:has(input:checked){box-shadow:none;background:transparent}
.consent .err{margin-top:10px}

.send-note{margin-top:16px;display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-muted);line-height:1.55}
.send-note .icon{color:var(--accent);width:20px;height:20px}

/* --- Fertig-Panel --- */
.done-hero{text-align:center;padding:8px 0 0}
.done-badge{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;background:var(--success-bg);color:var(--success);border:2px solid var(--success)}
.done-badge .icon{width:32px;height:32px;stroke-width:2.5}
.done-hero h2{font-size:clamp(22px,3.6vw,28px)}
.done-hero p{margin-top:12px;color:var(--text-muted);max-width:52ch;margin-inline:auto}
.paste-note{
  display:flex;gap:12px;align-items:flex-start;
  margin-top:24px;padding:16px;border-radius:var(--r-md);
  background:var(--accent-soft);border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  font-size:15px;line-height:1.55;
}
.paste-note[hidden]{display:none}
.paste-note .icon{color:var(--accent-strong)}
.todo-list{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:12px;counter-reset:t}
.todo-list li{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2)}
.todo-list li::before{
  counter-increment:t;content:counter(t);
  width:28px;height:28px;flex:none;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:var(--on-accent);
  font-family:"Open Sans",sans-serif;font-weight:700;font-size:14px;
}
.todo-list strong{display:block;font-family:"Open Sans",sans-serif;font-size:15.5px}
.todo-list span{display:block;margin-top:2px;font-size:14.5px;color:var(--text-muted)}
.fallback{margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
.fallback h3{font-size:16px}
.fallback > p{margin-top:8px;font-size:14.5px;color:var(--text-muted)}
.fallback textarea{margin-top:12px;min-height:200px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.55}
.fallback-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}

/* --- Toast --- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);
  z-index:var(--z-overlay);display:flex;align-items:center;gap:10px;
  max-width:min(520px,calc(100vw - 32px));
  padding:12px 18px;border-radius:var(--r-sm);
  background:#192B47;color:#fff;box-shadow:var(--shadow-3);
  font-size:14.5px;font-weight:600;
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.toast[data-show="true"]{opacity:1;transform:translate(-50%,0)}
.toast .icon{color:#8FD3AD;width:20px;height:20px}

/* --- Entwurf --- */
.draft-bar{
  max-width:var(--card);margin:0 auto 16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:12px 16px;border-radius:var(--r-md);
  background:var(--accent-soft);border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  font-size:14.5px;
}
.draft-bar[hidden]{display:none}
.draft-bar p{flex:1;min-width:200px}
.draft-bar .icon{color:var(--accent-strong)}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:#192B47;color:#C9D6E6;padding:32px 0;font-size:14px}
.footer-inner{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.footer-links{display:flex;flex-wrap:wrap;gap:0 24px;list-style:none;margin:0;padding:0}
.footer-links a{color:#fff;text-decoration:none;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.footer-links a:hover{text-decoration:underline;color:#fff}
.footer-note{max-width:62ch;line-height:1.6}

/* ============================================================
   MOTION
   ============================================================ */
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.step:not([hidden]){animation:stepIn 260ms var(--ease-out) both}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  /* Die Regel darueber wuerde das Laufband im durchgelaufenen Zustand
     einfrieren – also halb leer. Stattdessen steht es still und laesst
     sich von Hand schieben. */
  .trust-marquee .trust-row{animation:none !important;transform:none !important}
  .trust-row li[data-clone]{display:none !important}
}
@media (prefers-reduced-motion: reduce) and (max-width:559px){
  .trust-marquee{
    overflow-x:auto;
    -webkit-mask-image:none;mask-image:none;
  }
}
@media print{
  .header,.drawer,.footer,.step-nav,.hero,.toast,.draft-bar,.notice{display:none !important}
  .card{box-shadow:none;border:0}
}

/* Korrekturen fuer den Website-Rahmen. Die Schadenmeldung bringt eigene
   Definitionen fuer .wrap, .btn, .brand und .skip-link mit, die spaeter im
   Dokument stehen und deshalb gewinnen. Hier stellen wir fuer Kopf-, Menue-
   und Fussbereich das Aussehen der uebrigen Website wieder her. */
.header .wrap,
.drawer .wrap,
.footer .wrap{
  width:min(100% - 2 * clamp(16px,5vw,40px), 1180px);
  max-width:none; padding-inline:0;
}
/* Gleiche Logogroesse wie im Rest der Website (site.css). */
.header .brand img{ height:clamp(32px,10vw,50px); width:auto; }
.header .btn,
.drawer .btn{
  border-radius:var(--r-pill);
  border:2px solid var(--btn-bd);
  font-family:Montserrat,sans-serif;
  font-size:15.5px; padding:0 26px;
}
.header .btn--sm{ min-height:44px; padding:0 20px; font-size:14.5px; }
.drawer .btn{ min-height:52px; }
.skip-link{ background:#192B47; color:#fff; box-shadow:none; }
.skip-link:focus{ color:#fff; }
.footer h3{ font-family:Montserrat,sans-serif; }

/* Die Klassen .hero, .eyebrow, .card und .grid gibt es in beiden Stylesheets.
   Hier gelten wieder die Regeln der Schadenmeldung: nur die Eigenschaften,
   die site.css zusaetzlich mitbringt, werden zurueckgenommen. */
.hero{
  position:static; isolation:auto; overflow:visible;
  background:none; color:inherit;
}
.hero::after{ content:none; }
.hero h1{ max-width:none; }
.eyebrow{ margin-bottom:0; font-family:"Open Sans",sans-serif; }
.eyebrow::before{ content:none; }
.card{ padding:0; }

/* Auf schmalen Displays bleibt neben Logo und Menuebutton kein Platz fuer die
   Rufnummer – dort zeigt der Knopf nur noch das Telefonsymbol. Unter 560 px
   faellt auch das weg: Logo, Symbol und Menueknopf zusammen waeren breiter
   als die Kopfzeile. Die Rufnummer steht dann als Knopf im Menue. */
@media (max-width:719px){
  .header .header__cta{ width:48px; min-width:48px; padding:0; }
  .header__cta-num{ display:none; }
}
@media (max-width:559px){
  .header .header__cta{ display:none; }
}