,
die Begruendung klappt auf. Ein Aufklapper braucht einen inhaltlichen
Anfasser – deshalb steht die h3 IM summary und nicht ein blosses „Mehr". */
.sz-b{padding:clamp(1.25rem,2.4vw,1.7rem);}
.sz-b>summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;
justify-content:space-between;gap:.9rem;}
.sz-b>summary::-webkit-details-marker{display:none;}
.sz-b>summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}
.sz-b>summary h3{font-family:var(--disp);font-size:1.06rem;font-weight:700;transition:var(--t);}
.sz-b>summary:hover h3{color:var(--accent-d);}
/* Chevron in eigenem Kaestchen, damit die Drehung um die Mitte laeuft. */
.sz-b>summary::after{content:'';flex:0 0 auto;width:9px;height:9px;margin-top:.35rem;
border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
transform:translateY(-1px) rotate(45deg);transition:transform var(--t);}
.sz-b[open]>summary::after{transform:translateY(2px) rotate(-135deg);}
.sz-b p{font-size:.95rem;color:var(--ink-2);}
.sz-b>p{margin-top:.75rem;}
.sz-b p b{color:var(--ink);font-weight:600;}
/* Hinweis-Band § 377 HGB */
.hgb-note{margin-top:clamp(1.4rem,3vw,2rem);display:flex;gap:1.1rem;align-items:flex-start;background:var(--accent-l);border:1px solid #ccd8ee;border-radius:var(--r-lg);padding:clamp(1.2rem,2.4vw,1.7rem);}
.hgb-note .hn-ic{width:44px;height:44px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;flex-shrink:0;}
.hgb-note .hn-ic svg{width:24px;height:24px;}
.hgb-note h3{font-family:var(--disp);font-size:1.08rem;font-weight:700;margin-bottom:.35rem;color:var(--ink);}
.hgb-note p{font-size:.94rem;color:var(--ink-2);max-width:78ch;}
.hgb-note p b{color:var(--accent-deep);font-weight:700;}
/* ---------- Ablauf: Zickzack-Treppe (Referenz-Layout) ----------
Geometrie aus der Referenz: die rechte Karte sitzt um --zig-off tiefer,
das nächste Paar startet unter der vorherigen Karte. Verbindungslinien
hängen an den Karten (::after), wandern also bei jedem Umbruch mit. */
.zsteps{
--zig-off:clamp(3rem,10.5vw,9.5rem);/* Versatz der rechten Karte nach unten (~150px wie Referenz) */
--zig-gap:clamp(2rem,6vw,5.8rem); /* Spaltenabstand = Länge der Querlinie */
--zig-row:.4rem; /* Abstand zum nächsten Kartenpaar */
display:grid;grid-template-columns:1fr 1fr;
column-gap:var(--zig-gap);row-gap:var(--zig-row);align-items:start;
}
.zstep{position:relative;background:#fff;border:1.5px solid var(--accent-l);border-radius:20px;padding:clamp(1.3rem,2.3vw,1.85rem);box-shadow:0 18px 40px -26px rgba(13,22,45,.32);transition:var(--t);}
.zstep:hover{box-shadow:0 24px 50px -26px rgba(13,22,45,.4);transform:translateY(-2px);}
.zstep:nth-child(even){margin-top:var(--zig-off);}
/* links → rechts: waagerechte Linie durch den Spaltenabstand */
.zstep:nth-child(odd)::after{content:'';position:absolute;left:100%;top:calc(var(--zig-off) + 3.5rem);width:var(--zig-gap);border-top:1.5px solid var(--accent);}
/* rechts → links: Bogen nach links, dann runter auf die nächste Karte */
.zstep:nth-child(even):not(:last-child)::after{content:'';position:absolute;right:100%;top:calc(100% - 3.9rem);height:calc(3.9rem + var(--zig-row));width:calc(var(--zig-gap) + 42%);border-top:1.5px solid var(--accent);border-left:1.5px solid var(--accent);border-top-left-radius:14px;}
.zs-top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.05rem;}
.zs-n{font-family:var(--disp);font-weight:700;font-size:1.15rem;color:var(--accent);letter-spacing:-.01em;}
.zs-ic{color:var(--accent);opacity:.9;flex-shrink:0;}
.zs-ic svg{width:38px;height:38px;}
.zs-pill{display:inline-block;background:var(--accent);color:#fff;font-family:var(--disp);font-weight:700;font-size:.95rem;line-height:1.25;padding:.5rem 1.05rem;border-radius:99px;margin-bottom:1rem;}
.zstep p{font-size:.95rem;color:var(--ink-2);margin-bottom:1.15rem;}
.zs-time{display:flex;align-items:center;gap:.5rem;font-family:var(--disp);font-weight:700;font-size:.9rem;color:var(--ink);}
.zs-time svg{width:17px;height:17px;color:var(--accent);flex-shrink:0;}
/* Breiter Intro-Text (Referenz: eine durchlaufende Zeile statt schmaler Block) */
.lp .s-head p.s-wide{max-width:70ch;}
/* ---------- Vergleichstabelle ---------- */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg);}
.cmp{width:100%;min-width:760px;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.cmp th,.cmp td{padding:1rem 1.1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:.92rem;}
.cmp thead th{font-family:var(--disp);font-weight:700;font-size:.95rem;color:var(--ink);background:var(--bg-soft);white-space:nowrap;}
.cmp thead th.cmp-us{background:var(--accent-deep);color:#fff;}
.cmp tbody th{font-family:var(--disp);font-weight:700;color:var(--ink);width:22%;background:var(--bg-soft);}
.cmp td{color:var(--ink-2);width:26%;}
.cmp td.cmp-us{background:var(--accent-l);color:var(--accent-d);font-weight:500;}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none;}
.cm-no,.cm-yes{display:inline;font-size:1.05rem;font-weight:700;margin-right:.4rem;}
/* Haengender Einzug ab der Tabellendarstellung: Haken bzw. Kreuz stehen neben
der ERSTEN Zeile, der Text bleibt ueber alle Zeilen bündig darunter.
Absolut positioniert, weil display:grid am | die Zelle aus dem
Tabellenmodell nehmen und das Spaltenraster zerlegen wuerde.
Mobil greift das nicht: dort stapelt die Tabelle zu Karten, und ueber dem
Text steht das Spaltenlabel – da gehoert das Zeichen in den Textfluss. */
@media(min-width:921px){
.cmp td{position:relative;padding-left:2.7rem;}
.cmp td .cm-no,.cmp td .cm-yes{position:absolute;left:1.1rem;top:1rem;margin-right:0;}
}
.cm-no{color:#c0392b;}
.cm-yes{color:var(--accent);}
/* ---------- Kredo ---------- */
/* Zweispaltig: links der Text, rechts das Portrait als Vertrauensanker. */
.kredo{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(1.6rem,3.5vw,2.8rem);align-items:center;
background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(1.6rem,4vw,3rem);max-width:62rem;margin-inline:auto;box-shadow:var(--shadow-sm);}
.kredo>*{min-width:0;}
.kredo-foto{display:flex;flex-direction:column;gap:.9rem;}
.kredo-foto img{width:100%;height:auto;border-radius:var(--r-lg);box-shadow:0 18px 40px -22px rgba(13,22,45,.5);}
.kredo-foto figcaption{font-size:.9rem;color:var(--ink-2);line-height:1.4;}
.kredo-foto b{display:block;font-family:var(--disp);font-weight:700;font-size:1.02rem;color:var(--ink);}
.kredo h3{font-family:var(--disp);font-size:clamp(1.25rem,2.4vw,1.6rem);font-weight:700;margin-bottom:1rem;text-wrap:balance;}
.kredo p{color:var(--ink-2);font-size:1rem;}
.ks-av{overflow:hidden;}
.ks-av img{width:100%;height:100%;object-fit:cover;display:block;}
/* ---------- Erstcheck-Sektion – Teaser + Button (Formular auf eigener Seite) ---------- */
.ec-box{max-width:44rem;margin-inline:auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-card);padding:clamp(1.8rem,4vw,3.2rem);}
.ec-box h2{font-size:clamp(1.8rem,3.6vw,2.5rem);font-weight:800;margin-bottom:1.6rem;}
.ec-qs{display:grid;gap:.8rem;margin-bottom:1.8rem;}
.ec-qs li{display:flex;align-items:flex-start;gap:.7rem;font-family:var(--disp);font-weight:600;font-size:1.05rem;color:var(--ink);list-style:none;text-align:left;}
.ec-qs .ck{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex-shrink:0;margin-top:.1rem;}
.ec-qs .ck svg{width:13px;height:13px;}
/* Fragenliste mittig als Block, Text links – nie zentrierter Flattersatz */
.ec-box .ec-qs{max-width:30rem;margin-inline:auto;}
.ec-qs-center{max-width:32rem;margin:0 auto 2rem;text-align:left;}
/* Einstiegsfrage direkt auf der LP: Optionen sind Links, kein JS noetig. */
.ec-lead{font-family:var(--disp);font-weight:700;font-size:clamp(1.05rem,1.7vw,1.22rem);color:var(--ink);margin-bottom:1.3rem;}
.lpq{display:grid;gap:.65rem;max-width:34rem;margin-inline:auto;text-align:left;}
.lpq-opt{display:flex;align-items:center;justify-content:space-between;gap:1rem;
border:1.5px solid var(--line);border-radius:var(--r);background:#fff;
padding:.95rem 1.1rem;font-family:var(--disp);font-weight:600;font-size:1rem;color:var(--ink);
transition:var(--t);}
.lpq-opt:hover,.lpq-opt:focus-visible{border-color:var(--accent);background:var(--accent-l);color:var(--accent-d);transform:translateY(-2px);box-shadow:0 12px 26px -18px rgba(13,48,115,.75);}
.lpq-ar{flex-shrink:0;color:var(--accent);font-weight:700;transition:var(--t);}
.lpq-opt:hover .lpq-ar{transform:translateX(3px);}
.ec-sub{font-size:.9rem;color:var(--ink-3);margin-top:1.1rem;}
.trustbar.ec-trust{justify-content:center;margin-top:2rem;}
/* ---------- Kundenstimmen – Slider (nativer overflow-x, wisch-/tastaturfähig) ---------- */
.vslider{max-width:46rem;margin-inline:auto;}
.vs-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:clamp(1rem,2.2vw,1.5rem);scrollbar-width:none;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg);}
.vs-track::-webkit-scrollbar{display:none;}
.vs-track:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
/* snap-align:start statt center – deterministisch: die Folie rastet an der
Container-Kante ein. Bei center kann der Browser beim Re-Snap (z. B. nach
einer Transform-Animation am Elternelement) auf die Nachbarfolie springen. */
.vs-track .voice{flex:0 0 100%;scroll-snap-align:start;}
/* Echtheits-Hinweis zum Rezensions-Block (§ 5b Abs. 3 UWG) – muss lesbar sein,
darf den Stimmen aber nicht die Bühne nehmen. */
/* Sichtbarer Entwurfs-Hinweis MITTEN auf der Seite (heller Grund!).
Nicht .footer-todo verwenden: das ist weiß auf 40 % und nur im dunklen
Footer lesbar – auf einer hellen Sektion wäre der Hinweis unsichtbar. */
.entwurf-note{max-width:62rem;margin:0 auto clamp(1.6rem,3vw,2.4rem);padding:1rem 1.2rem;
background:var(--amber-l);border:1px solid var(--amber);border-left-width:4px;border-radius:var(--r);
font-size:.84rem;line-height:1.6;color:#5b4a1f;}
.entwurf-note b{color:#3d3114;}
.vs-note{max-width:60ch;margin:1.4rem auto 0;text-align:center;font-size:.78rem;line-height:1.55;color:var(--ink-3);}
.vs-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.4rem;}
.vs-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:var(--t);flex-shrink:0;}
.vs-btn:hover:not(:disabled){border-color:var(--accent);background:var(--accent);color:#fff;}
.vs-btn:disabled{opacity:.35;cursor:default;}
.vs-btn svg{width:18px;height:18px;}
.vs-dots{display:flex;align-items:center;gap:.45rem;}
.vs-dot{width:8px;height:8px;border-radius:50%;border:none;padding:0;background:var(--line);cursor:pointer;transition:var(--t);}
.vs-dot.active{background:var(--accent);width:22px;border-radius:99px;}
.voice{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.3rem,2.4vw,1.8rem);}
.voice blockquote{font-size:.92rem;color:var(--ink-2);line-height:1.65;}
.voice blockquote::before{content:'“';font-family:var(--disp);font-size:2.6rem;line-height:.1;color:var(--accent);display:block;margin-bottom:1rem;}
.voice figcaption{display:flex;align-items:center;gap:.75rem;margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-3);line-height:1.4;}
.voice .v-av{width:42px;height:42px;border-radius:50%;background:var(--accent-l);color:var(--accent-d);display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:.82rem;flex-shrink:0;}
.voice figcaption b{display:block;font-family:var(--disp);font-weight:700;font-size:.95rem;color:var(--ink);}
/* ---------- Über die Kanzlei – Akkordeon + Foto (Referenz-Layout) ----------
Nutzt bewusst die FAQ-Klassen (.fitem/.fq/.fa), damit die vorhandene
Akkordeon-Logik in app.js ohne Zusatzcode greift. */
/* Überschrift steht in der linken Spalte über dem Akkordeon (linksbündig),
damit die Spalte eingeklappt etwa die Höhe des Fotos erreicht. */
.ku-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;}
.ku-head{margin-bottom:clamp(1.4rem,2.5vw,2rem);max-width:none;}
.ku-head h2{font-size:clamp(1.7rem,3.2vw,2.4rem);}
.ku-acc .fitem{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);margin-bottom:.9rem;overflow:hidden;}
.ku-acc .fq{padding:1.05rem 1.25rem;gap:.85rem;justify-content:flex-start;font-size:1rem;}
.ku-acc .fq .fic{order:-1;width:18px;height:18px;}
.ku-acc .fq .fic::before,.ku-acc .fq .fic::after{width:14px;}
.ku-acc .fa{padding-inline:1.25rem;}
.ku-acc .fa p{padding:0 0 .9rem;font-size:.94rem;max-width:none;}
.ku-acc .fa>*:last-child{padding-bottom:1.35rem;}
.ku-acc .ka-lead{font-family:var(--disp);font-weight:700;color:var(--ink);}
.ku-acc .ka-list{margin:0 0 .9rem;padding-left:1.1rem;display:grid;gap:.35rem;}
.ku-acc .ka-list li{font-size:.94rem;color:var(--ink-2);}
.ku-acc .ka-list li::marker{color:var(--accent);}
/* Kein overflow:hidden: die Ansprechpartner-Kachel darf ueber die Bildkante
ragen und braucht ihren Schatten. Rundung und Schatten sitzen deshalb am
Bild selbst. position:sticky ist bereits ein Bezug fuer die Kachel. */
.ku-photo{position:sticky;top:6.5rem;}
/* Hier haengt die Kachel bewusst unten rechts aus dem Bild heraus. Die 40 px
nach unten braucht die Sektion als zusaetzlichen Fussraum, sonst stiesse sie
an den naechsten Abschnitt. */
.ku-photo .exp-badge{left:auto;right:40px;bottom:-40px;}
.ku-photo>img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.1;
border-radius:var(--r-xl);box-shadow:var(--shadow);}
/* ---------- Fallbeispiele – Tabs ---------- */
.tabs{max-width:56rem;margin-inline:auto;}
.tab-bar{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.6rem;}
.tab{font-family:var(--disp);font-weight:700;font-size:.9rem;color:var(--ink-2);background:#fff;border:1.5px solid var(--line);border-radius:99px;padding:.6rem 1.1rem;cursor:pointer;transition:var(--t);}
.tab:hover{border-color:var(--accent);color:var(--accent-d);}
.tab.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.tab-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2.2rem);animation:wzIn .4s var(--t);}
.tab-panel h3{font-family:var(--disp);font-size:1.25rem;font-weight:700;margin-bottom:.7rem;}
.tab-panel h4{font-family:var(--disp);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-d);margin:1.4rem 0 .5rem;}
.tab-panel p{font-size:.95rem;color:var(--ink-2);}
.tab-panel p b{color:var(--ink);font-weight:600;}
.tp-case{background:var(--bg-soft);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:.9rem 1.1rem;}
.tp-out{margin-top:1.1rem;background:var(--accent-l);border-radius:10px;padding:.9rem 1.1rem;color:var(--accent-d);}
.tp-out b{color:var(--accent-deep);}
/* ---------- Unser Standort – Karte + Text ----------
Karte ist eine EINMALIG bei uns gerenderte OSM-Grafik (werkzeuge/karte.py),
kein iframe: keine Fremd-Requests/Cookies beim Besucher, kein Consent nötig. */
/* Die Ansprechpartner-Kachel haengt 40 px aus dem Foto – der Abschnitt
braucht unten entsprechend mehr Luft, damit sie nicht an den naechsten
stoesst. */
#kanzlei{padding-bottom:calc(var(--pad) + 40px);}
/* Ueber „Unser Standort" stand zu viel Weiss: der Abschnitt beginnt mit
einer Karte statt einer Ueberschrift, dadurch wirkt der volle
Standardabstand groesser als anderswo. */
/* Symmetrisch – und der Vorlauf des Banners darunter faellt weg, sonst
addierte er sich auf den Fussraum dieses Abschnitts und unten stuende
doppelt so viel Luft wie oben. */
#standort{padding-block:clamp(2.5rem,5vw,4.5rem);}
.st-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;}
.st-grid>*{min-width:0;}
.st-map{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow);}
.st-map img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.2;}
.st-card{position:absolute;top:1rem;left:1rem;right:1rem;max-width:19rem;background:#fff;border-radius:12px;box-shadow:var(--shadow-sm);padding:.85rem 1rem;display:flex;align-items:flex-start;gap:.8rem;}
.st-card b{display:block;font-family:var(--disp);font-weight:700;font-size:.98rem;color:var(--ink);margin-bottom:.15rem;}
.st-card span{display:block;font-size:.8rem;color:var(--ink-2);line-height:1.4;}
.st-ext{width:32px;height:32px;border-radius:8px;background:var(--bg-soft);color:var(--ink-2);display:grid;place-items:center;flex-shrink:0;margin-left:auto;transition:var(--t);}
.st-ext:hover{background:var(--accent);color:#fff;}
.st-ext svg{width:15px;height:15px;}
/* Attribution ist von karte.py bereits ins Bild eingebrannt – kein zweites Label. */
.st-copy h2{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:800;margin-bottom:1.1rem;text-wrap:balance;}
.st-copy p{color:var(--ink-2);font-size:1rem;margin-bottom:1rem;max-width:52ch;}
.st-copy .btn{margin-top:.8rem;}
/* ---------- Finale CTA – Banner, ragt zur Hälfte in den Footer ---------- */
/* Kein eigener Vorlauf: den Abstand zum Banner setzt der Fussraum des
Abschnitts darueber. Beides zusammen ergaebe ein doppelt so breites
weisses Band, wie es oberhalb des Abschnitts steht. */
.cta-final{padding-block:0;text-align:center;background:var(--bg);}
.cta-banner{position:relative;z-index:2;border-radius:var(--r-xl);overflow:hidden;padding:clamp(2.2rem,5vw,3.6rem) clamp(1.4rem,4vw,3rem);
background:linear-gradient(rgba(13,22,45,.84),rgba(13,22,45,.84)),url('assets/img/kanzlei-standort.jpg') center/cover no-repeat;
color:#fff;box-shadow:var(--shadow);
/* halbe Höhe in den Footer schieben; der Footer gleicht das unten wieder aus */
margin-bottom:calc(-1 * var(--cta-overlap));}
.cta-banner h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800;margin-bottom:1.2rem;color:#fff;text-wrap:balance;}
.cta-qs{list-style:none;display:grid;gap:.4rem;margin-bottom:1.8rem;}
.cta-qs li{font-size:1rem;color:rgba(255,255,255,.9);}
.btn-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.7);}
.btn-outline:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px);}
/* ---------- LP-Footer ---------- */
/* Footer holt den vom Banner überlappten Bereich per padding-top wieder auf,
sonst läge der Banner auf dem Footer-Inhalt. */
.lp-footer{padding-top:calc(var(--cta-overlap) + clamp(3rem,6vw,4.5rem));}
.lp-footer .lpf-top{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;}
.lp-footer .logo{color:#fff;}
/* Das Logo ist dunkelblau und waere im dunklen Footer unsichtbar.
brightness(0) faerbt alles Sichtbare schwarz (Alpha bleibt), invert(1)
macht daraus Weiss – aus dem zweifarbigen Logo wird die uebliche
einfarbige Negativfassung. */
.lp-footer .logo-img img{height:56px;filter:brightness(0) invert(1);}
.lpf-badges{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;}
.lpf-badges span{display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;color:rgba(255,255,255,.6);}
.lpf-badges svg{width:16px;height:16px;}
.lp-footer .footer-todo{margin-top:1.4rem;}
.lp-footer .footer-bottom{margin-top:1.6rem;}
/* ---------- LP – Responsive ---------- */
@media(max-width:920px){
/* Mobile Hero-Reihenfolge: Text → weiße Kachel → Foto. Das Motiv samt
Ansprechpartner-Kachel kommt bewusst NACH „Bereits 5.000+ Fälle geprüft"
(Kundenwunsch) – die Spaltenreihenfolge dreht sich also mobil um.
display:contents löst das Grid auf, damit Foto und Kachel (verschiedene
Eltern) in einer gemeinsamen Flex-Spalte sortiert werden können. */
.lp-hero .wrap{display:flex;flex-direction:column;}
.lph-grid{display:contents;}
.lph-copy{order:1;max-width:38rem;align-self:auto;padding-bottom:0;}
.lph-card{order:2;margin-top:2rem;padding-top:1.5rem;display:flex;flex-direction:column;}
.lph-visual{order:3;margin-top:2.4rem;}
/* Reihenfolge in der Kachel: CTA → „bekannt aus" → 5.000 Fälle.
display:contents löst .lph-card-actions auf, damit CTA und .proof
einzeln zwischen die Presse-Leiste sortiert werden können. */
.lph-card-actions{display:contents;}
.lph-card-actions .btn-lg{order:1;}
.press{order:2;}
.proof{order:3;justify-content:center;margin-bottom:1.5rem;}
/* „Wir sind bekannt aus": zentriert + endlos laufende Logo-Leiste.
Gekapselt in .press-viewport (overflow:hidden) → kein Seiten-Scroll. */
.press{flex-direction:column;align-items:center;gap:.9rem;}
.press-label{text-align:center;}
.press-viewport{width:100%;overflow:hidden;}
.press-track{width:max-content;animation:pressMarquee 34s linear infinite;}
.press-logos.press-dup{display:flex;}
/* Abstand liegt IM Listenelement (padding-right), damit translateX(-50%)
exakt eine Listenbreite wandert und die Schleife nahtlos ist. */
.press-logos{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-start;gap:1.8rem;padding-right:1.8rem;}
.press-viewport:hover .press-track{animation-play-state:paused;}
.rechte-grid{grid-template-columns:1fr;}
.szen{grid-template-columns:1fr;}
.kredo{grid-template-columns:1fr;}
.kredo-foto img{max-height:60vh;object-fit:cover;object-position:top;}
.st-grid{grid-template-columns:1fr;}
.st-map img{aspect-ratio:16/11;}
.ku-grid{grid-template-columns:1fr;}
/* Foto ans ENDE des Abschnitts, unter den Text (Kundenwunsch). Damit ist
unter der Kachel nichts mehr, was sie verdecken koennte – sie darf hier
also genauso ueberhaengen wie auf dem Desktop, nur mittig statt rechts.
Den Fussraum dafuer bringt #kanzlei bereits mit. */
.ku-photo{order:1;position:relative;top:auto;}
.ku-photo>img{aspect-ratio:16/10;}
.ku-photo .exp-badge{right:auto;left:50%;bottom:-40px;transform:translateX(-50%);}
/* Zickzack auflösen: gestapelt, ohne Versatz und ohne Verbindungslinien */
.zsteps{grid-template-columns:1fr;row-gap:1rem;}
.zstep:nth-child(even){margin-top:0;}
.zstep::after{display:none!important;}
/* Vergleich: Tabelle → gestapelte Karten je Kriterium, damit NICHT
horizontal gescrollt werden muss. Spaltenkopf kommt per data-col. */
.cmp-scroll{overflow:visible;}
.cmp{min-width:0;border:none;background:none;border-radius:0;}
.cmp thead{display:none;}
.cmp tbody,.cmp tr,.cmp tbody th,.cmp td{display:block;width:auto;}
.cmp tr{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:1rem;overflow:hidden;}
.cmp tbody th{width:auto;background:var(--bg-soft);font-size:1rem;padding:.95rem 1.1rem;border-bottom:1px solid var(--line);}
.cmp td{width:auto;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);}
.cmp tr td:last-child{border-bottom:none;}
.cmp td::before{content:attr(data-col);display:block;font-family:var(--disp);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.25rem;}
}
/* Endlos-Laufschrift der Presse-Logos */
@keyframes pressMarquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){
.press-track{animation:none!important;}
.press-logos.press-dup{display:none!important;}
/* ohne Laufschrift dürfen die Logos wieder umbrechen statt abgeschnitten zu werden */
.press-track{width:100%!important;}
.press-logos{flex-wrap:wrap!important;}
}
@media(max-width:560px){
.hgb-note{flex-direction:column;gap:.8rem;}
/* CTA-Beschriftung darf NICHT umbrechen: Button bleibt einzeilig und
skaliert stattdessen Schrift/Innenabstand mit der Viewportbreite. */
.btn-lg{font-size:clamp(.8rem,3.5vw,1.02rem);padding:1rem clamp(.9rem,3.5vw,1.8rem);white-space:nowrap;}
.mid-cta .btn,.lph-card-actions .btn-lg,.ec-btn,.cta-actions .btn{display:flex;width:100%;}
.lph-card-actions{gap:1rem;}
}
/* ============================================================
ERSTCHECK-FORMULAR (body.ec, Seite /erstcheck)
Eigener Funnel ohne Navigation: Schritt-Übersicht links,
Formularkarte rechts. Alles unter body.ec gescopet, damit die
gleichnamigen Teaser-Klassen der Landingpage unberührt bleiben.
============================================================ */
body.ec{background:var(--bg-soft);}
/* ---- Kopf ---- */
.ec-head{background:var(--white);border-bottom:1px solid var(--line);}
.ec-head-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px;}
.ec-head .logo{color:var(--ink);}
.ec-head-t{font-family:var(--disp);font-weight:700;font-size:clamp(.95rem,2.6vw,1.2rem);color:var(--ink);}
/* ---- Layout ---- */
.ec-main{padding-block:clamp(1.5rem,4vw,3rem) clamp(3rem,7vw,5rem);}
.ec-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(1.25rem,3vw,2.5rem);align-items:start;max-width:1040px;margin-inline:auto;}
/* ---- Schritt-Übersicht ---- */
.ec-side{position:sticky;top:1.5rem;}
.ec-steps{list-style:none;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:1.6rem 1.4rem;display:grid;gap:1.5rem;}
.ec-st{display:flex;align-items:center;gap:.85rem;font-family:var(--disp);font-weight:700;font-size:.98rem;color:var(--ink-3);transition:var(--t);}
.ec-st.active,.ec-st.done{color:var(--ink);}
.ec-num{width:40px;height:40px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;border:1.5px solid var(--line);background:var(--white);color:var(--ink-3);font-size:.95rem;transition:var(--t);}
.ec-num-ck{width:18px;height:18px;display:none;}
.ec-st.active .ec-num{background:var(--accent);border-color:var(--accent);color:#fff;}
.ec-st.done .ec-num{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;}
.ec-st.done .ec-num-n{display:none;}
.ec-st.done .ec-num-ck{display:block;}
/* ---- Karte ---- */
.ec-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:clamp(1.4rem,3.5vw,2.5rem);}
.ec-h{font-family:var(--disp);font-weight:700;font-size:clamp(1.5rem,3.5vw,1.9rem);color:var(--ink);margin-bottom:1.8rem;letter-spacing:-.01em;}
/* Zeile = Feldblock + Erklär-Button daneben. Die Button-Spalte steht auch
dann, wenn die Zeile keinen Button hat – sonst wären die Felder
unterschiedlich breit. */
.ec-row{display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:.9rem;margin-bottom:1.5rem;}
/* Der Block wird aus dem Layout genommen, damit Frage und Feld eigene
Grid-Zeilen bilden: die Frage läuft über beide Spalten, das Feld steht
allein neben dem Erklär-Button. Nur so sitzt der Button mittig zum FELD –
sonst zentriert er über Frage + Feld und rutscht bei mehrzeiligen Fragen
(mobil die Regel) nach oben. */
.ec-block{display:contents;}
.ec-block>*{min-width:0;}
.ec-q{grid-column:1/-1;font-family:var(--body);font-size:.95rem;color:var(--ink-2);margin-bottom:.6rem;line-height:1.45;}
/* Folgefrage: Der Pfeil sagt, dass sie aus der Frage darüber folgt und keine
neue Sache beginnt. Dekorativ als ::before – als Zeichen im Markup läse ihn
ein Screenreader mit vor („Pfeil nach rechts Möchten Sie …“). Als SVG statt
als „→“, damit er nicht von der geladenen Schrift abhängt.
Der Text rückt mit ein: Sonst begänne die zweite Zeile – am Handy die Regel –
unter dem Pfeil und die Einrückung wäre wieder weg. */
/* Untertext einer Frage (Hinweis „freiwillig“ o. Ä.): steht IN der .ec-q,
damit er mobil mit ihr in Zeile 1 bleibt und nicht unter die Antworten rutscht. */
.ec-q-sub{display:block;margin-top:.2rem;font-size:.84rem;color:var(--ink-3);}
.ec-cond .ec-q{position:relative;padding-left:1.5rem;}
.ec-cond .ec-q::before{content:"";position:absolute;left:0;top:.3em;width:.95rem;height:.95rem;
opacity:.6;background:no-repeat center/contain;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D3073' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");}
/* ---- Auswahl-Optionen ---- */
/* kein overflow:hidden – sonst kappt der Container den Gültigkeits-Balken.
Die Ecken runden stattdessen die Optionen selbst ab. */
.ec-opts{position:relative;border:1.5px solid var(--line);border-radius:12px;background:var(--white);transition:var(--t);}
.ec-opts.stacked{display:grid;}
.ec-opts.stacked .ec-opt+.ec-opt{border-top:1.5px solid var(--line);}
.ec-opts.stacked .ec-opt:first-child{border-radius:11px 11px 0 0;}
.ec-opts.stacked .ec-opt:last-child{border-radius:0 0 11px 11px;}
/* grid-auto-flow:column statt fester Spalten: „Ja / Nein / Weiß nicht" steht
damit in EINER Zeile, ohne dass die Spaltenzahl gepflegt werden muss. */
.ec-opts.inline{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;}
.ec-opts.inline .ec-opt+.ec-opt{border-left:1.5px solid var(--line);}
.ec-opts.inline .ec-opt:first-child{border-radius:11px 0 0 11px;}
.ec-opts.inline .ec-opt:last-child{border-radius:0 11px 11px 0;}
.ec-opt{display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;cursor:pointer;font-size:1rem;color:var(--ink);transition:var(--t);min-height:52px;}
.ec-opt:hover{background:var(--bg-soft);}
.ec-opt input{accent-color:var(--accent);width:17px;height:17px;flex-shrink:0;cursor:pointer;margin:0;}
.ec-opt:has(input:checked){background:var(--accent-l);font-weight:600;}
/* ---- Felder ---- */
.ec-f{position:relative;}
.ec-f input,.ec-f select,.ec-f textarea{width:100%;font-family:var(--body);font-size:16px;color:var(--ink);background:var(--white);border:1.5px solid var(--line);border-radius:12px;padding:1rem;transition:var(--t);}
.ec-f textarea{resize:vertical;min-height:110px;line-height:1.5;}
.ec-f input:focus,.ec-f select:focus,.ec-f textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(13,48,115,.13);}
.ec-f input::placeholder,.ec-f textarea::placeholder{color:var(--ink-3);}
/* Schwebendes Label: liegt auf dem Rahmen, sobald das Feld gefüllt ist */
/* Schwebendes Label: erscheint erst, wenn das Feld gefüllt ist – im leeren
Feld steht der Platzhalter. Dadurch darf der Platzhalter ausführlich sein
(„Welche Erkrankung oder Beschwerden liegen vor?"), während das Label kurz
bleibt: es liegt auf der Rahmenlinie und würde sonst auf schmalen Geräten
die ganze obere Kante verdecken statt sie nur zu unterbrechen. */
.ec-f>input+label,.ec-f>textarea+label{position:absolute;left:.75rem;top:0;transform:translateY(-50%);padding-inline:.35rem;max-width:calc(100% - 1.5rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--white);color:var(--ink-3);font-family:var(--body);font-size:.78rem;line-height:1;opacity:0;pointer-events:none;transition:var(--t);}
.ec-f>input:focus+label,.ec-f>input:not(:placeholder-shown)+label,
.ec-f>textarea:focus+label,.ec-f>textarea:not(:placeholder-shown)+label{opacity:1;}
/* Selects mit fest stehendem Label darüber */
.ec-sel>label:not(.sr-only){display:block;font-family:var(--body);font-size:.95rem;color:var(--ink-2);margin-bottom:.5rem;}
.ec-f select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237F8C84' 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 1rem center;background-size:18px;padding-right:2.8rem;}
/* Betragsfeld mit Währungszeichen */
.ec-money .ec-cur{position:absolute;right:1rem;top:1rem;color:var(--accent);font-weight:700;pointer-events:none;}
.ec-money input{padding-right:2.5rem;}
.ec-duo{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;}
/* Gültig: blauer Balken direkt am rechten Feldrand. Bei den Eingabefeldern
als innerer Schatten – so folgt er der Rundung des Feldes von allein und
sitzt nur am Feld, nicht am Label darüber. */
.ec-f.valid input,.ec-f.valid select,.ec-f.valid textarea{box-shadow:inset -5px 0 0 var(--accent);}
.ec-f.valid input:focus,.ec-f.valid select:focus,.ec-f.valid textarea:focus{box-shadow:inset -5px 0 0 var(--accent),0 0 0 3px rgba(13,48,115,.13);}
/* Bei den Auswahl-Boxen überdecken die Optionen einen inneren Schatten –
daher hier ein eigenes Element, das die Rundung nachzieht. */
.ec-opts.valid::after{content:"";position:absolute;right:0;top:0;height:100%;width:5px;border-radius:0 11px 11px 0;background:var(--accent);}
.ec-opts.valid{position:relative;}
.ec-f.invalid input,.ec-f.invalid select,.ec-f.invalid textarea,.ec-opts.invalid{border-color:#C0392B;}
.ec-f.invalid::before,.ec-opts.invalid::before{content:"Bitte ausfüllen";position:absolute;right:0;bottom:-1.15rem;font-size:.75rem;color:#C0392B;font-family:var(--disp);font-weight:600;}
.ec-f.invalid,.ec-opts.invalid{margin-bottom:.4rem;}
/* ---- Erklär-Tooltip ---- */
/* place-items statt Button-Textzentrierung: mit line-height allein sass das
Fragezeichen sichtbar zu hoch im Kreis. */
.ec-help{position:relative;display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--ink-3);background:var(--white);color:var(--ink-3);font-family:var(--disp);font-weight:700;font-size:.9rem;line-height:1;cursor:pointer;transition:var(--t);padding:0;}
/* Steht über dem Feld noch ein sichtbares Label (Monat/Jahr des Vertrags,
Versicherungspaket), zentriert die Zeile den Button über Label + Feld und
er sitzt zu hoch. Hier am Feld-Ende ausrichten: halbe Feldhöhe (54px)
minus halbe Buttonhöhe (28px) = 13px. */
.ec-row:has(.ec-sel>label:not(.sr-only)) .ec-help{align-self:end;margin-bottom:13px;}
.ec-help:hover,.ec-help.open{border-color:var(--accent);color:var(--accent);}
.ec-tip{position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%) scale(.96);width:250px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:1.5rem 1rem 1rem;font-family:var(--body);font-weight:400;font-size:.82rem;line-height:1.5;color:var(--ink-2);text-align:left;opacity:0;visibility:hidden;transition:var(--t);z-index:20;}
.ec-help.open .ec-tip{opacity:1;visibility:visible;transform:translateY(-50%) scale(1);}
.ec-tip::before{content:"";position:absolute;left:-6px;top:50%;width:11px;height:11px;margin-top:-5px;background:var(--white);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg);}
/* Zu wenig Platz rechts: Blase klappt auf die andere Seite (per JS gesetzt) */
.ec-help.flip .ec-tip{left:auto;right:calc(100% + 14px);}
.ec-help.flip .ec-tip::before{left:auto;right:-6px;border-left:0;border-bottom:0;border-right:1px solid var(--line);border-top:1px solid var(--line);}
.ec-help.flip .ec-tip-av{right:auto;left:12px;}
.ec-tip-av{position:absolute;top:-16px;right:12px;width:38px;height:38px;border-radius:50%;background:var(--accent-deep);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:.72rem;overflow:hidden;box-shadow:0 0 0 2px #fff;}
.ec-tip-av img{width:100%;height:100%;object-fit:cover;display:block;}
.ec-tip-t{display:block;}
/* ---- Sprechblase im Kontakt-Schritt ---- */
.ec-says{display:flex;align-items:flex-start;gap:.9rem;margin-bottom:1.8rem;}
.ec-says .ks-av{width:72px;height:72px;border-radius:50%;background:var(--accent-deep);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:1.05rem;flex-shrink:0;}
.ec-bubble{position:relative;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.15rem;font-size:.9rem;line-height:1.6;color:var(--ink-2);}
.ec-bubble::before{content:"";position:absolute;left:-6px;top:20px;width:11px;height:11px;background:var(--bg-soft);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg);}
/* ---- Hinweis + Navigation ---- */
/* ---------- Einwilligung in die Verarbeitung von Gesundheitsdaten ----------
Sonderfall Art. 9 DSGVO: Gesundheitsdaten sind besondere Kategorien und
brauchen eine AUSDRÜCKLICHE Einwilligung (Art. 9 Abs. 2 lit. a) – also ein
aktives, nicht vorbelegtes Häkchen. Das ist die dokumentierte Ausnahme von
unserer Regel „Kontaktformular ohne Datenschutz-Checkbox"; die gilt nur,
wo Art. 6 trägt. Bewusst NICHT .ec-f: die Textfeld-Regeln (Float-Label,
Gültigkeitsbalken) passen auf eine Checkbox nicht. */
/* „Weiß nicht“ rechts neben Betragsfeldern (Feld wächst, Häkchen schrumpft nicht;
auf schmalen Screens wandert das Häkchen unter das Feld). */
.ec-moneyrow{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;}
.ec-moneyrow .ec-f{flex:1 1 11rem;min-width:0;}
.ec-nk{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.92rem;color:var(--ink-2);user-select:none;white-space:nowrap;flex:0 0 auto;}
.ec-nk input{width:1.05rem;height:1.05rem;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
/* Ist „Weiß nicht“ gesetzt, wird das Betragsfeld ausgegraut. */
.ec-f.nk input{opacity:.5;background:var(--bg-soft);}
.ec-f.nk .ec-cur{opacity:.4;}
.ec-consent{display:flex;align-items:flex-start;gap:.8rem;padding:1rem 1.1rem;margin:1.6rem 0 .4rem;
background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);transition:var(--t);}
.ec-consent input{flex-shrink:0;width:20px;height:20px;margin-top:.1rem;accent-color:var(--accent);cursor:pointer;}
.ec-consent span{font-size:.84rem;line-height:1.6;color:var(--ink-2);}
.ec-consent b{color:var(--ink);font-weight:600;}
.ec-consent.valid{border-color:var(--accent);background:var(--accent-l);}
.ec-consent.invalid{border-color:#c0392b;background:#FDECEA;}
/* ── Dokumenten-Auswahl (Erstcheck Schritt 3 + Danke-Seite) ─────────────────
Flächenfolge: Formularkarte weiß → Upload-Block soft → Ablagefeld und
Dateizeilen wieder weiß. Jede Fläche hat damit Kontrast zu ihrer
Umgebung; ein weißer Block in der weißen Karte wäre kein Block mehr. */
.ec-up{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);
padding:clamp(1rem,3vw,1.4rem);}
.ec-up-lead{font-size:.9rem;line-height:1.6;color:var(--ink-2);margin-bottom:1rem;}
.ec-up-lead b{color:var(--ink);font-weight:600;}
.ec-up-docs{list-style:none;display:grid;gap:.55rem;margin:0 0 1.2rem;}
.ec-up-docs li{position:relative;padding-left:1.1rem;font-size:.86rem;line-height:1.55;color:var(--ink-2);
overflow-wrap:anywhere;}
.ec-up-docs li::before{content:"";position:absolute;left:0;top:.52em;width:5px;height:5px;
border-radius:50%;background:var(--accent);opacity:.55;}
.ec-up-docs b{color:var(--ink);font-weight:600;}
/* Zwei Gruppen statt eines „falls vorhanden“-Etiketts je Zeile: Als Etikett
hing es bei längeren Punkten hinter dem Umbruch allein in der nächsten Zeile
und sah aus wie ein eigener Listenpunkt. Die Zweiteilung sagt dasselbe
kürzer – und nimmt dem Nutzer die Sorge, er müsse alles fünf beibringen. */
.ec-up-sub{font-family:var(--disp);font-weight:700;font-size:.74rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem;}
.ec-up-docs+.ec-up-sub{margin-top:1rem;}
.ec-up-drop{display:grid;justify-items:center;gap:.5rem;padding:1.4rem 1rem;text-align:center;
background:var(--white);border:1.5px dashed var(--line);border-radius:12px;transition:var(--t);}
.ec-up-drop.over{border-color:var(--accent);background:var(--accent-l);}
.ec-up-ic{width:30px;height:30px;color:var(--accent);opacity:.75;}
.ec-up-call{font-family:var(--disp);font-weight:600;font-size:.92rem;color:var(--ink);}
.ec-up-drop label{cursor:pointer;}
/* Das Dateifeld ist sr-only (1x1px), bleibt aber per Tab erreichbar – ohne
diese Regel landet ein Tastaturnutzer auf einem unsichtbaren Element und
sieht nicht, dass der Fokus beim Dateiknopf steht. Der Ring sitzt deshalb
auf dem sichtbaren Label. */
.ec-up-drop:has(input:focus-visible) label{outline:2px solid var(--accent);outline-offset:3px;
border-color:var(--ink);background:var(--ink);color:#fff;}
.ec-up-hint{font-size:.76rem;line-height:1.5;color:var(--ink-3);max-width:28rem;}
/* Format, Grenze und Anzahl je als Einheit – sonst steht „10“ am Zeilenende
und „MB“ in der nächsten Zeile. Der Satz selbst bricht normal um. */
.ec-up-hint span{white-space:nowrap;}
/* Am Handy zieht niemand Dateien irgendwohin – dort nur der Knopf. */
@media (max-width:600px){
.ec-up-call{display:none;}
.ec-up-drop{padding:1.1rem .8rem;}
}
.ec-up-files{list-style:none;display:grid;gap:.5rem;margin:.9rem 0 0;}
.ec-up-file{display:grid;grid-template-columns:20px minmax(0,1fr) auto 26px;align-items:center;
gap:.6rem;padding:.6rem .7rem;background:var(--white);border:1px solid var(--line);
border-radius:10px;}
.ec-up-fic{display:grid;place-items:center;color:var(--accent);}
.ec-up-fic svg{width:17px;height:17px;}
/* Dateinamen sind oft lang („Scan_2026-10-02_Ablehnung_Allianz.pdf“) – kürzen,
nicht umbrechen, sonst wächst die Zeile auf dem Handy auf drei Zeilen. */
.ec-up-fname{font-size:.86rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ec-up-fsize{font-size:.75rem;color:var(--ink-3);white-space:nowrap;}
.ec-up-del{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;
background:transparent;color:var(--ink-3);cursor:pointer;transition:var(--t);}
.ec-up-del svg{width:13px;height:13px;}
.ec-up-del:hover{background:#FDECEA;color:#C0392B;}
/* Schmal: Größe unter den Namen. In einer Zeile frisst die Größenangabe die
Spalte des Namens auf – auf 320px blieb von „Ablehnung_Allianz….pdf“ ein
„A…“ übrig, und damit war nicht mehr erkennbar, welche Datei da liegt. */
@media (max-width:460px){
.ec-up-file{grid-template-columns:20px minmax(0,1fr) 26px;row-gap:.1rem;}
.ec-up-fic,.ec-up-del{grid-row:1/3;}
.ec-up-fname{grid-column:2;grid-row:1;}
.ec-up-fsize{grid-column:2;grid-row:2;}
}
.ec-up-err{margin-top:.7rem;font-size:.8rem;line-height:1.55;color:#C0392B;font-weight:600;}
/* Der Entwurfs-Hinweis sitzt INNEN im Upload-Block – .entwurf-note bringt
eigene Außenabstände für ganze Sektionen mit, die hier nicht passen. */
.ec-up-todo{max-width:none;margin:1rem 0 0;}
.ec-legal{font-size:.84rem;line-height:1.6;color:var(--ink-2);margin:1.8rem 0 1.4rem;}
.ec-legal a{color:var(--accent);font-weight:600;}
/* Rechts bündig mit den Feldern – nicht mit der Erklär-Spalte daneben */
.ec-nav{display:flex;align-items:center;justify-content:flex-end;gap:1rem;margin-top:2rem;margin-right:calc(28px + .9rem);}
.ec-back{background:none;border:0;font-family:var(--disp);font-weight:600;font-size:.95rem;color:var(--ink-3);cursor:pointer;padding:.85rem .5rem;transition:var(--t);}
.ec-back:hover{color:var(--ink);}
/* ---- Bestätigung nach dem Absenden ---- */
.ec-done{text-align:center;padding:1.5rem 0;}
.ec-done-ic{width:64px;height:64px;border-radius:50%;background:var(--accent-l);color:var(--accent);display:grid;place-items:center;margin:0 auto 1.2rem;}
.ec-done-ic svg{width:30px;height:30px;}
.ec-done h2{font-family:var(--disp);font-weight:700;font-size:1.5rem;color:var(--ink);margin-bottom:.7rem;}
.ec-done p{font-size:.95rem;line-height:1.65;color:var(--ink-2);max-width:44ch;margin:0 auto 1.6rem;}
/* ---- Footer ---- */
.ec-footer{padding-block:2.5rem;}
.ec-foot-badges{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;margin-bottom:1rem;}
.ec-foot-badges span{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;color:rgba(255,255,255,.72);}
.ec-foot-badges svg{width:16px;height:16px;}
.ec-footer .footer-todo{text-align:center;}
.ec-footer .footer-bottom{justify-content:center;gap:1rem;flex-wrap:wrap;text-align:center;}
/* ---- Tablet: Schritt-Übersicht wird zur Leiste über der Karte ---- */
@media (max-width:900px){
/* minmax(0,1fr) statt 1fr: `1fr` ist kurz für `minmax(auto,1fr)`, und `auto`
heißt hier min-content. Die Schrittleiste hat nebeneinander eine
Mindestbreite von ~350px – damit zog sie auf 320px das ganze Grid auf 350
und die Formularkarte ragte 48px über den Bildschirm. Sichtbar wurde das
nur rechts abgeschnitten, ohne Scrollbalken (html{overflow-x:clip}). */
.ec-layout{grid-template-columns:minmax(0,1fr);}
.ec-side{position:static;}
.ec-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;padding:1.1rem .8rem;}
.ec-st{flex-direction:column;text-align:center;gap:.5rem;font-size:.8rem;}
/* Die Titel müssen jetzt in die enge Spalte passen – umbrechen statt den
Container aufzudrücken. */
.ec-st-t{min-width:0;overflow-wrap:anywhere;line-height:1.3;}
.ec-num{width:34px;height:34px;font-size:.85rem;}
}
/* ---- Mobil ---- */
@media (max-width:640px){
/* Kopf einzeilig halten: beide Texte schrumpfen, statt umzubrechen */
.ec-head-bar{min-height:64px;gap:.6rem;}
.ec-head .logo{gap:.5rem;}
.logo-img img{height:38px;}
.ec-head-t{font-size:.8rem;white-space:nowrap;}
/* Erklär-Button bleibt neben dem Feld (spart Höhe); nur die Blase
klappt unter den Button. Kein justify-items:start – sonst schrumpfen
die Felder auf ihre Inhaltsbreite statt die Karte zu füllen. */
.ec-row{gap:.6rem;}
/* Mobil sitzt die Blase immer unter dem Button – schlägt das Flip-Muster */
.ec-tip,.ec-help.flip .ec-tip{left:auto;right:0;top:calc(100% + 12px);transform:translateY(0) scale(.96);width:min(78vw,280px);}
.ec-help.open .ec-tip{transform:translateY(0) scale(1);}
.ec-tip::before,.ec-help.flip .ec-tip::before{left:auto;right:8px;top:-6px;margin-top:0;border-left:1px solid var(--line);border-bottom:0;border-top:1px solid var(--line);border-right:0;}
.ec-tip-av,.ec-help.flip .ec-tip-av{top:-14px;right:auto;left:12px;width:34px;height:34px;}
/* Erklär-Button mobil: weder Rahmen noch Fläche – sichtbar ist nur das
Fragezeichen. Die Trefferfläche bleibt trotzdem 26 px gross. Die
Rasterspalte der Zeile muss mitschrumpfen, sonst stünde der Button in
einer 28-px-Spalte nicht mehr mittig. */
.ec-row{grid-template-columns:minmax(0,1fr) 26px;}
/* Ausnahme: Der Upload-Block hat keinen Erklär-Button. Auf dem Desktop
bleibt die Spalte trotzdem frei, damit seine rechte Kante auf der Kante
der Felder darüber sitzt – mobil wiegt der Platz schwerer: Spalte und
Abstand kosteten 42 von 209px, und vom Dateinamen blieb „A…“ übrig.
Muss NACH der Zeile darüber stehen, sonst gewinnt die (gleich spezifisch,
aber später notiert). */
.ec-up-row{grid-template-columns:minmax(0,1fr);}
.ec-help{width:26px;height:26px;border:0;background:none;color:var(--accent-d);font-size:1rem;}
.ec-help:hover,.ec-help.open{background:none;color:var(--accent);}
.ec-duo{grid-template-columns:1fr;}
.ec-opts.inline{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;}
/* Fragezeichen gehört mobil NEBEN die Frage, nicht neben das Feld – dadurch
bekommt das Feld die volle Breite. Explizite Platzierung ist nötig, weil
der Erklär-Button im Markup nach dem Feld steht und die automatische
Platzierung ihn sonst in die zweite Zeile schiebt. */
.ec-row:has(> .ec-block > .ec-q){align-items:start;}
.ec-row:has(> .ec-block > .ec-q) .ec-q{grid-column:1;grid-row:1;margin-bottom:0;align-self:center;}
.ec-row:has(> .ec-block > .ec-q) .ec-help{grid-column:2;grid-row:1;align-self:center;margin-bottom:0;}
.ec-row:has(> .ec-block > .ec-q) .ec-block > *:not(.ec-q){grid-column:1/-1;grid-row:2;margin-top:.7rem;}
/* Felder ohne eigenes Label bekommen mobil eines ÜBER der Box. Das Label
steht im Markup NACH dem Eingabefeld (das braucht der
:not(:placeholder-shown)-Trick auf dem Desktop), deshalb Raster mit
expliziten Zeilen statt DOM-Umbau. Der Platzhalter bleibt im Ruhezustand
sichtbar und wird beim Tippen einfach überschrieben – wie auf dem Desktop. */
/* EINE Spalte erzwingen: sonst schiebt die automatische Platzierung das
Währungszeichen in eine zweite Spalte neben das Feld. */
.ec-f:has(> input + label),.ec-f:has(> textarea + label){display:grid;grid-template-columns:minmax(0,1fr);}
.ec-f > input + label,.ec-f > textarea + label{grid-column:1;grid-row:1;position:static;transform:none;
opacity:1;max-width:none;white-space:normal;overflow:visible;text-overflow:clip;
background:none;padding:0;margin-bottom:.5rem;
font-family:var(--body);font-size:.95rem;line-height:1.45;color:var(--ink-2);}
/* Alle drei Kinder brauchen die feste Spalte 1: haette nur das
Währungszeichen eine, legte die automatische Platzierung das
Eingabefeld in eine zweite, implizite Spalte daneben. */
.ec-f > input,.ec-f > textarea{grid-column:1;grid-row:2;}
/* Währungszeichen liegt in derselben Rasterzelle wie das Feld, sonst säße es
über dem neuen Label. */
.ec-money .ec-cur{position:static;grid-column:1;grid-row:2;justify-self:end;align-self:center;
top:auto;right:auto;margin-right:1rem;}
/* „Weiß nicht" mobil unter das Betragsfeld, sonst bleiben beiden zu wenig
Platz und der Platzhalter wird abgeschnitten. */
.ec-moneyrow{flex-direction:column;align-items:flex-start;gap:.65rem;}
.ec-moneyrow .ec-f{flex:0 0 auto;width:100%;}
/* Zeilen ohne Frage, aber mit dem neuen Label über der Box: Fragezeichen
oben rechts auf Höhe des Labels, Feld darunter über die volle Breite.
Beide liegen in derselben Rasterzeile – das Label hält mit padding-right
Abstand, damit sein Text nicht unter den Button läuft. */
.ec-row:not(:has(> .ec-block > .ec-q)):has(.ec-f > input + label),
.ec-row:not(:has(> .ec-block > .ec-q)):has(.ec-f > textarea + label){align-items:start;}
.ec-row:not(:has(> .ec-block > .ec-q)):has(.ec-f > input + label) > .ec-block > *,
.ec-row:not(:has(> .ec-block > .ec-q)):has(.ec-f > textarea + label) > .ec-block > *{grid-column:1/-1;grid-row:1;}
.ec-row:not(:has(> .ec-block > .ec-q)):has(.ec-f > input + label) > .ec-help,
.ec-row:not(:has(> .ec-block > .ec-q)):has(.ec-f > textarea + label) > .ec-help{grid-column:2;grid-row:1;align-self:start;margin-bottom:0;}
.ec-row:not(:has(> .ec-block > .ec-q)) .ec-f > input + label,
.ec-row:not(:has(> .ec-block > .ec-q)) .ec-f > textarea + label{padding-right:2.2rem;}
.ec-opts.inline .ec-opt+.ec-opt{border-left:0;border-top:1.5px solid var(--line);}
.ec-opts.inline .ec-opt:first-child{border-radius:11px 11px 0 0;}
.ec-opts.inline .ec-opt:last-child{border-radius:0 0 11px 11px;}
.ec-nav{gap:.5rem;margin-right:calc(28px + .6rem);}
.ec-nav .btn{flex:1;}
.ec-says{gap:.7rem;}
.ec-says .ks-av{width:56px;height:56px;font-size:.9rem;}
}
/* Sehr schmale Geräte (≤380px): der Kopftitel würde neben dem Logo
abgeschnitten – Marke hat Vorrang, den Kontext liefert der Stepper. */
@media (max-width:380px){
body.ec .ec-head-t{display:none;}
}
/* ============================================================
DANKE-SEITE (body.dk) – eigene URL nach dem Absenden (Tracking-Ziel).
Nur hier Vollhöhe: Kopf/Inhalt/Footer teilen sich den Bildschirm, damit
unter der kurzen Karte kein leerer Rest stehen bleibt.
============================================================ */
body.dk{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;}
/* minmax(0,1fr) statt der impliziten auto-Spalte: Sonst nimmt die Spalte die
min-content-Breite ihres Inhalts an und wächst über den Bildschirm hinaus –
auf 320px ragte die Karte 32px heraus. Lange deutsche Komposita in den
Dokumentenlisten („Rechtsschutzversicherung“) reichen dafür schon. */
body.dk .dk-main{flex:1 0 auto;display:grid;grid-template-columns:minmax(0,1fr);
align-items:center;padding-block:clamp(2rem,6vw,4rem);}
body.dk .ec-footer{flex-shrink:0;}
.dk-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:clamp(1.8rem,5vw,3.5rem);max-width:720px;margin-inline:auto;text-align:center;}
.dk-card .ec-done-ic{margin:0 auto 1.4rem;}
.dk-h{font-family:var(--disp);font-weight:700;font-size:clamp(1.6rem,4.2vw,2.2rem);color:var(--ink);letter-spacing:-.01em;margin-bottom:.6rem;text-wrap:balance;}
.dk-lead{font-family:var(--disp);font-weight:600;font-size:clamp(1rem,2.6vw,1.15rem);color:var(--ink-2);margin-bottom:1.8rem;}
/* Liste linksbündig – Fließtext liest sich zentriert schlecht */
.dk-list{list-style:none;display:grid;gap:.9rem;text-align:left;max-width:46rem;margin-inline:auto;}
.dk-list li{display:flex;align-items:flex-start;gap:.8rem;font-size:clamp(.92rem,2.4vw,1rem);line-height:1.6;color:var(--ink-2);}
.dk-ck{width:22px;height:22px;border-radius:50%;background:var(--accent-l);color:var(--accent);display:grid;place-items:center;flex-shrink:0;margin-top:.15rem;}
.dk-ck svg{width:12px;height:12px;}
.dk-out{font-size:clamp(.9rem,2.4vw,.98rem);line-height:1.65;color:var(--ink-2);max-width:46rem;margin:1.8rem auto 0;text-align:left;}
.dk-btn{margin-top:2rem;}
/* ── Danke-Seite: Unterlagen nachreichen ────────────────────────────────────
Eigene Karte unter der Bestätigung, bewusst linksbündig: die Dankes-Karte
ist zentriert, ein Formular mit Liste und Feldern liest sich zentriert nicht. */
.dk-up{margin-top:clamp(1.4rem,3.5vw,2.2rem);text-align:left;}
.dk-ende{margin-top:clamp(1.4rem,3.5vw,2.2rem);text-align:center;}
.dk-up-h{font-family:var(--disp);font-weight:700;font-size:clamp(1.25rem,3.2vw,1.55rem);
color:var(--ink);letter-spacing:-.01em;margin-bottom:.5rem;}
.dk-up-lead{font-size:clamp(.9rem,2.4vw,.98rem);line-height:1.65;color:var(--ink-2);margin-bottom:1.5rem;}
/* Nachreichen per E-Mail. Der Knopf steht im Markup auf hidden und wird erst
von app.js freigeschaltet – die Adresse wird dort zusammengesetzt, damit sie
nicht im Quelltext steht. Ohne JS greift der noscript-Block. */
.dk-mail{margin-top:1.4rem;}
.dk-mail-alt{margin-top:1.4rem;font-size:.95rem;line-height:1.6;color:var(--ink-2);}
.dk-mail-alt b{color:var(--ink);}
.dk-mail-hint{margin-top:.9rem;font-size:.84rem;line-height:1.6;color:var(--ink-3);}
.dk-mail-hint b{color:var(--ink-2);font-weight:600;}
/* .footer-todo ist weiß auf 40 % – im hellen Karton unlesbar. Hier dunkel. */
.dk-mail-todo{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line);
font-size:.78rem;line-height:1.55;color:var(--ink-3);opacity:1;text-align:left;}
@media (max-width:640px){
.dk-btn{display:flex;width:100%;}
}
/* Versand-Fehler (Netz/Server) – erscheint nur im Fehlerfall über der Navigation */
.ec-err{background:#FDECEA;border:1px solid #F5C6C0;border-radius:var(--r);padding:.9rem 1.1rem;font-size:.88rem;line-height:1.55;color:#8E2A1D;margin-top:1.2rem;}
/* ============================================================
Rechtstext-Seiten (Impressum / Datenschutz)
Schmale Lesespalte, ruhige Typo – gleiche Tokens wie die LP.
============================================================ */
.legal{padding:3rem 0 4.5rem;}
.legal .wrap{max-width:820px;}
.legal h1{font-family:var(--disp);font-size:clamp(1.9rem,4vw,2.6rem);font-weight:800;letter-spacing:-.02em;margin-bottom:1.4rem;color:var(--ink);}
.legal h2{font-family:var(--disp);font-size:1.12rem;font-weight:700;margin:2rem 0 .5rem;color:var(--ink);}
.legal h3{font-family:var(--disp);font-weight:700;font-size:1rem;margin:1.3rem 0 .3rem;color:var(--ink);}
.legal p{color:var(--ink-2);line-height:1.7;margin-bottom:.65rem;}
.legal a{color:var(--accent);text-decoration:underline;word-break:break-word;}
.legal ul{margin:.2rem 0 .9rem;padding-left:1.3rem;color:var(--ink-2);line-height:1.7;}
.legal li{margin-bottom:.35rem;}
.legal .legal-lead{margin-bottom:1.8rem;}
/* Die beiden Widerspruchs-Absätze stehen in Versalien (Art. 21 DSGVO) –
in Großbuchstaben braucht der Satz mehr Luft und darf kleiner sein. */
.legal p[style*="uppercase"]{font-size:.84rem;letter-spacing:.01em;line-height:1.75;color:var(--ink-3);}
/* Rechtstext-Fußzeile: ohne Badge-Zeile darüber braucht die Schlusszeile
keine Trennlinie – sonst steht ein leerer dunkler Streifen über ihr. */
.legal-footer .footer-bottom{margin-top:0;padding-top:0;border-top:0;}
|