/* ==========================================================================
   Mängel-Wegweiser — Gestaltung des Werkzeugs
   Ergänzt styles.css, gilt nur auf gewaehrleistungsfrist.html. Die Tokens und
   Grundregeln stehen unter .wegweiser (das <main> der Seite), damit nichts auf
   Kopf, Fuß oder andere Seiten durchgreift. Wie die ganze Website bewusst hell.
   Entstanden am 14.09.2026 aus dem Testaufbau C:\Claude\maengel-test und seither
   hier gepflegt. Skript und Texte kommen weiter von dort (nach_website.py).
   Achtung: .gabel gibt es in styles.css schon (Zivilverfahren), die Gabel des
   Wegweisers heißt deshalb .weg-gabel.
   ========================================================================== */
/* Schriften wie auf zoehrer.legal - kein Abruf bei Google */
.wegweiser{
  --ink:#17252b; --paper:#f4f0e8; --paper-light:#faf8f3; --white:#fffefa;
  --copper:#b56f4c; --copper-solid:#a66544; --copper-hover:#93583a; --copper-on-dark:#bb7b5a; --copper-text:#9a5e40;
  --line:#17252b2e; --line-soft:#17252b17; --muted:#57666a; --kasten:#17252b8c;
  --surface:#fffefa; --sunk:#efeae0; --copper-wash:#a665441f; --petrol:#2f5a5e;
  --dunkel:#0e1a1f; --dunkel-rand:#131c20; --dunkel-leiste:#1b262a;
  --hell-auf-dunkel:#e9e2d6; --mittel-auf-dunkel:#b3bfba; --leise-auf-dunkel:#8d9a95; --creme:#d4c5ad;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
.wegweiser{line-height:1.6}
.wegweiser h1,.wegweiser h2,.wegweiser h3{margin:0;letter-spacing:normal;max-width:none;font-family:var(--serif);font-weight:600;line-height:1.15;text-wrap:balance}
.wegweiser p{margin:0}
.wegweiser button{cursor:pointer}
.wegweiser :focus-visible{outline:2px solid var(--copper-solid);outline-offset:3px}
/* Auf dunklem Grund der helle Fokusring der übrigen dunklen Abschnitte */
.wegweiser .dunkel :focus-visible{outline-color:#d4c5ad}
.augenbraue{font-size:0.6875rem;letter-spacing:.16em;text-transform:uppercase;color:#b6c0b9;margin-bottom:14px}

/* ---------- Dunkle Flaechen ---------- */
.dunkel{background:var(--dunkel);color:var(--hell-auf-dunkel)}
.einstieg{padding:52px 0 48px}
.zwei-spalten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:48px;align-items:start}
@media (max-width:56.25em){.zwei-spalten{grid-template-columns:1fr;gap:32px}}
.einstieg h1{font-size:clamp(1.875rem,4.6vw,2.875rem);color:#fffefa;letter-spacing:-.01em;max-width:21ch}
/* Fallblatt-Anzeige im Einstieg: 1.095 Tage auf hellen Klappen, die herunterzaehlen.
   Der Ruhezustand steht im Markup, das Skript fuegt nur die Bewegung hinzu. */
.einstieg-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:center}
@media (max-width:56.25em){.einstieg-grid{grid-template-columns:1fr;gap:28px}.fb-rechts{order:-1}}
.fb-rechts{max-width:360px}
.fb-tafel{--w:64px;--h:96px;--fs:68px;--gap:6px;--r:5px;--dauer:90ms;
  display:flex;gap:var(--gap);perspective:700px}
@media (max-width:30em){.fb-tafel{--w:54px;--h:82px;--fs:58px}}
.fb-kl{position:relative;flex:none;width:var(--w);height:var(--h);border-radius:var(--r);box-shadow:0 10px 22px #00000080}
.fb-h{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:#f4f3ef;color:#111;backface-visibility:hidden}
.fb-h i{display:block;height:var(--h);font:700 var(--fs)/var(--h) var(--sans);font-style:normal;text-align:center;font-variant-numeric:tabular-nums}
.fb-o,.fb-ko{top:0;border-radius:var(--r) var(--r) 0 0;background:linear-gradient(#f4f3ef,#e2e0da)}
.fb-u,.fb-ku{bottom:0;border-radius:0 0 var(--r) var(--r)}
.fb-u i,.fb-ku i{transform:translateY(-50%)}
.fb-kl::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;background:#9a9a9a;z-index:5}
.fb-kl::before{content:"";position:absolute;left:-2px;right:-2px;top:calc(50% - 4px);height:8px;z-index:6;
  background:radial-gradient(circle at 2px 50%,#6b6b6b 2px,transparent 2.5px),radial-gradient(circle at calc(100% - 2px) 50%,#6b6b6b 2px,transparent 2.5px)}
.fb-ko{transform-origin:bottom;z-index:3}
.fb-ku{transform-origin:top;z-index:3;transform:rotateX(90deg)}
.fb-kl.fb-dreht .fb-ko{animation:fb-klappe-o var(--dauer) ease-in forwards}
.fb-kl.fb-dreht .fb-ku{animation:fb-klappe-u var(--dauer) ease-out forwards;animation-delay:var(--dauer)}
@keyframes fb-klappe-o{from{transform:rotateX(0)}to{transform:rotateX(-90deg);filter:brightness(.55)}}
@keyframes fb-klappe-u{from{transform:rotateX(90deg);filter:brightness(1.4)}to{transform:rotateX(0)}}
.fb-punkt{flex:none;width:calc(var(--w) * .28);font:700 var(--fs)/var(--h) var(--sans);color:#fffefa;text-align:center}
.fb-einheit{display:block;margin-top:14px;font-size:0.8125rem;letter-spacing:.16em;text-transform:uppercase;color:#b6c0b9}
.fb-text{margin-top:12px;color:#d3dbd7;font-size:0.9375rem;max-width:34ch}

.lead{margin-top:14px;color:#d3dbd7;font-size:1rem;max-width:52ch}

.eingabe{margin-top:30px;display:flex;flex-direction:column;gap:24px;max-width:600px}
.feld-titel{display:block;font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mittel-auf-dunkel);margin-bottom:10px;font-weight:500}
.datum-zeile{display:flex;border:1px solid #ffffff66;background:#ffffff0f;max-width:320px}
.datum-zeile:focus-within{border-color:var(--copper-on-dark);background:#ffffff17}
.datum-zeile input{flex:1;background:none;border:0;padding:14px 16px;font:500 18px var(--sans);color:#fffefa;min-width:0;
  color-scheme:dark;font-variant-numeric:tabular-nums}
.datum-zeile input:focus{outline:0}
.feld-hilfe{margin-top:8px;font-size:0.8125rem;color:var(--leise-auf-dunkel);max-width:52ch}
/* Antwortknoepfe nebeneinander, gewaehlt in Kupfer (Fassung B) */
.antworten{display:flex;flex-wrap:wrap;gap:8px}
.antworten button{border:1px solid #ffffff66;background:#ffffff0a;color:var(--hell-auf-dunkel);padding:12px 20px;
  font-size:0.9375rem;min-height:50px;transition:border-color .15s ease,background .15s ease}
.antworten button:hover{border-color:var(--copper-on-dark)}
.antworten button:active{background:#ffffff1a}
.antworten button[aria-pressed="true"]{background:var(--copper-solid);border-color:var(--copper-solid);color:#fffefa;font-weight:600}
.los{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.knopf{display:inline-flex;align-items:center;gap:10px;background:var(--copper-solid);color:#fffefa;border:0;
  padding:15px 26px;font-size:0.9375rem;font-weight:600;text-decoration:none;white-space:nowrap;min-height:50px}
.knopf:hover,.knopf:active{background:var(--copper-hover)}
.eingabe-hinweis{font-size:0.875rem;color:#e2c7b3}
.einstieg-fuss{margin-top:26px;padding-top:18px;border-top:1px solid #ffffff1f;font-size:0.78125rem;color:var(--leise-auf-dunkel);max-width:62ch}

/* ---------- Die Fristuhr ---------- */
.uhr{margin:0}
.uhr-flaeche{position:relative;max-width:400px}
.uhr svg{display:block;width:100%;height:auto;overflow:visible}
.uhr .seg{fill:#ffffff14}
.uhr .seg.bleibt{fill:var(--creme)}
.uhr .seg.gelb{fill:#ffffff1f;stroke:#e0b43a;stroke-width:1.2;stroke-dasharray:3 2.2}
.uhr .seg.bleibt.gelb{fill:#e0b43a;stroke:none}
.uhr .seg.rot{fill:#ffffff1f;stroke:#e0523f;stroke-width:1.2;stroke-dasharray:3 2.2}
.uhr .seg.bleibt.rot{fill:#e0523f;stroke:none}
.uhr .seg.jetzt{fill:#fffefa}
.uhr .marke{stroke:#ffffff55;stroke-width:1}
.uhr .marke-text{fill:var(--leise-auf-dunkel);font:500 10px var(--sans);letter-spacing:.06em}
.uhr .kopf-text{fill:var(--mittel-auf-dunkel);font:500 10.5px var(--sans);letter-spacing:.1em;text-transform:uppercase}
.uhr .zeiger line{stroke:#fffefa;stroke-width:2.2;stroke-linecap:round}
.uhr .zeiger circle{fill:#fffefa;stroke:var(--dunkel);stroke-width:2}
.uhr .zeiger{transform-box:view-box;transform-origin:150px 168px;transform:rotate(var(--winkel,0deg))}
.uhr-mitte{position:absolute;left:50%;top:52.2%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;width:50%}
.uhr-mitte b{display:block;font:600 clamp(46px,9vw,68px)/1 var(--serif);color:#fffefa;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.uhr-mitte span{display:block;margin-top:6px;font-size:0.78125rem;color:var(--mittel-auf-dunkel);line-height:1.35}
.uhr-mitte.vorbei b{color:var(--copper-on-dark)}
.legende{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;font-size:0.78125rem;color:var(--mittel-auf-dunkel);max-width:400px}
.legende li{display:flex;gap:9px;align-items:flex-start;line-height:1.4}
.legende i{flex:0 0 auto;width:14px;height:10px;display:inline-block;margin-top:3px}
.legende .l-weg{background:#ffffff1f}
.legende .l-bleibt{background:var(--creme)}
.legende .l-gelb{background:#e0b43a}
.legende .l-rot{background:#e0523f}
.legende .l-jetzt{background:#fffefa}
.wegweiser .uhr-nachsatz{margin:12px 0 0;max-width:400px;font-size:0.78125rem;line-height:1.45;color:var(--mittel-auf-dunkel)}
.uhr-anim .seg{animation:seg-auf .5s ease both;animation-delay:calc(var(--i) * 22ms)}
@keyframes seg-auf{from{opacity:.15}to{opacity:1}}
.uhr-anim .zeiger{animation:zeiger 1.2s cubic-bezier(.3,.7,.2,1) both}
@keyframes zeiger{from{transform:rotate(var(--start,8deg))}to{transform:rotate(var(--winkel,0deg))}}

/* ---------- Ergebnis ---------- */
.js-ablauf .stufe[hidden]{display:none}
.stufe{animation:auf .22s ease}
@keyframes auf{from{opacity:.5;transform:translateY(6px)}to{opacity:1;transform:none}}
.buehne{padding:48px 0 56px;border-top:1px solid #ffffff1a}
.frist-grid{grid-template-areas:"oben uhr" "unten uhr";grid-template-rows:auto 1fr;row-gap:0}
.frist-oben{grid-area:oben}.frist-unten{grid-area:unten}.frist-uhr{grid-area:uhr}
@media (max-width:56.25em){
  .frist-grid{grid-template-areas:"oben" "uhr" "unten";row-gap:30px}
  .frist-uhr .uhr-flaeche{margin-inline:auto;padding-inline:26px}
  .frist-uhr .legende,.wegweiser .frist-uhr .uhr-nachsatz{margin-inline:auto}
}
.frist-kopf{font-size:clamp(1.75rem,4.2vw,2.625rem);color:#fffefa;letter-spacing:-.01em}
.frist-kopf em{font-style:normal;color:var(--creme);display:block;margin-top:6px;font-size:.62em;font-weight:500}
.stand-etikett{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:4px 11px;font-size:0.75rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;border:1px solid #ffffff38;color:var(--hell-auf-dunkel)}
.stand-etikett::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--creme)}
.stand-etikett.knapp::before{background:var(--copper-on-dark)}
.stand-etikett.sehr_eilig,.stand-etikett.vorbei{background:var(--copper-solid);border-color:var(--copper-solid);color:#fffefa}
.stand-etikett.sehr_eilig::before,.stand-etikett.vorbei::before{background:#fffefa}
.zweifel{margin-top:20px;padding:12px 16px;border-left:3px solid var(--copper-on-dark);background:#ffffff0a;color:#efe9df;font-size:0.9375rem;max-width:56ch}
.frist-hinweise{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.fh{display:grid;grid-template-columns:10px 1fr;gap:12px;font-size:0.875rem;color:#d3dbd7;max-width:62ch}
.fh::before{content:"";width:7px;height:7px;margin-top:8px;border-radius:50%;background:var(--copper-on-dark)}
.fh b{display:block;color:#fffefa;font-weight:600;font-size:0.90625rem;margin-bottom:2px}
.rechnung{margin-top:24px;border-top:1px solid #ffffff1f;padding-top:14px;max-width:62ch}
.rechnung summary{cursor:pointer;font-size:0.875rem;color:var(--creme);font-weight:600;min-height:40px;display:flex;align-items:center;gap:8px;list-style:none}
.rechnung summary::-webkit-details-marker{display:none}
.rechnung summary::before{content:"+";font:600 16px var(--sans);width:18px;color:var(--copper-on-dark)}
.rechnung[open] summary::before{content:"–"}
.rechnung div{display:flex;flex-direction:column;gap:12px;margin-top:8px;font-size:0.875rem;color:#c9d2ce}
.rechnung div b{color:#fffefa;display:block;font-weight:600}

/* ---------- Privatverkauf: so weit oben wie moeglich ---------- */
.privat-kurz{margin-top:12px;padding:10px 14px;border-left:3px solid var(--copper-on-dark);background:#a6654426;color:#f1e4da;font-size:0.875rem;max-width:56ch}
.privat-box{margin:0 0 24px;padding:16px 20px;border:1px solid var(--copper-on-dark);border-left-width:4px;background:#a665442e;max-width:640px}
.privat-box b{display:block;font:600 19px/1.3 var(--serif);color:#fffefa;margin-bottom:6px}
.privat-box p{font-size:0.9375rem;color:#efe4da}

/* ---------- Woran Ansprueche scheitern ---------- */
.risiken{background:var(--sunk);padding:50px 0 54px}
.risiken-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-bottom:8px}
.risiken h2{font-size:clamp(1.5rem,3.4vw,2.125rem)}
.risiken-zahl{padding:4px 12px;font-size:0.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--copper-solid);color:#fffefa}
.risiken-zahl:empty{display:none}
.risiko-liste{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;border-bottom:1px solid var(--line)}
.risiko{padding:15px 18px 16px;border-top:1px solid var(--line);position:relative}
.risiko b{font:600 19px/1.3 var(--serif);display:block}
.risiko p{color:var(--muted);font-size:0.9375rem;max-width:62ch;margin-top:6px}
.risiko .tag{display:inline-block;margin-top:8px;padding:3px 8px;font-size:0.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--copper-solid);color:#fffefa}
.risiko.trifft{background:var(--copper-wash)}
.risiko.trifft::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--copper-solid)}
.risiko.trifft p{color:var(--ink)}
@media (max-width:47.5em){.risiko-liste{grid-template-columns:1fr}}
.frist-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
@media (max-width:56.25em){.frist-knoepfe{justify-content:center}}
/* Anrufen und E-Mail, ueberall dasselbe Knopfpaar */
.kontakt-knoepfe{display:flex;flex-wrap:wrap;gap:10px}
a.knopf-hell{display:inline-flex;align-items:center;text-decoration:none}
.privat-box .kontakt-knoepfe,.station .kontakt-knoepfe{margin-top:12px}
.station .kontakt-knoepfe .knopf,.station .kontakt-knoepfe .knopf-hell{padding:10px 16px;min-height:44px;font-size:0.875rem}
@media (max-width:56.25em){.frist-knoepfe .kontakt-knoepfe{justify-content:center}}
.frist-knoepfe .knopf,.frist-knoepfe .knopf-hell{padding-inline:18px}
/* Telefonzeile: nur am Computer, dort springt „Anrufen" hierher */
.wegweiser .telefon-zeile{display:none;margin:18px 0 26px;font-size:0.875rem;color:var(--muted)}
.wegweiser .telefon-zeile a{margin-left:4px;padding:2px 6px;font:400 22px/1.2 var(--serif);color:var(--ink);text-decoration:none}
.telefon-zeile.blitz a{animation:blitz 2.2s ease-out}
@keyframes blitz{0%,45%{background:var(--copper-wash)}100%{background:transparent}}
@media (hover:hover) and (pointer:fine){.wegweiser .telefon-zeile{display:block}}
@media print{.wegweiser .telefon-zeile{display:block !important}}

/* ---------- So gehen wir vor ---------- */
.hell{background:var(--paper);padding:50px 0 54px}
.hell h2{font-size:clamp(1.5rem,3.4vw,2.125rem);margin-bottom:8px}
.unter{color:var(--muted);max-width:60ch;margin-bottom:24px;font-size:0.96875rem}
.weg-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:52px;align-items:start}
@media (max-width:60em){.weg-grid{grid-template-columns:1fr;gap:44px}}
.weg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.weg>li{position:relative;padding-left:66px;min-height:44px}
.weg>li:not(:last-child)::before{content:"";position:absolute;left:21px;top:22px;bottom:-36px;width:2px;background:var(--copper)}
.knoten{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;background:var(--paper);border:2px solid var(--copper);
  display:grid;place-items:center;font:600 17px var(--serif);color:var(--copper-text);z-index:1}
.weg-start .knoten{width:18px;height:18px;left:13px;top:6px;background:var(--copper-solid);border:0}
.weg-start b{font-family:var(--serif);font-size:1.125rem;display:block;padding-top:2px}
/* Ablauf beim Hinscrollen: Linie laeuft durch, Punkte leuchten nacheinander auf.
   Rein zusaetzlich - der Ruhezustand ist sichtbar, ohne Beobachter bleibt alles stehen. */
.weg>li:nth-child(2){--n:1}.weg>li:nth-child(3){--n:2}.weg>li:nth-child(4){--n:3}
.weg>li:nth-child(5){--n:4}.weg>li:nth-child(6){--n:5}.weg>li:nth-child(7){--n:6}
.weg.laeuft>li:not(:last-child)::before{transform-origin:top;animation:weg-linie .55s ease-out both;animation-delay:calc(var(--n,0) * .5s + .2s)}
.weg.laeuft .knoten{animation:weg-knoten .6s ease-out both;animation-delay:calc(var(--n,0) * .5s)}
.weg.laeuft>li>.karte,.weg.laeuft>li>.sack,.weg.laeuft>li>.gabel-titel,.weg.laeuft>li>.weg-gabel,.weg.laeuft>li>b{
  animation:weg-karte .55s ease-out both;animation-delay:calc(var(--n,0) * .5s + .1s)}
@keyframes weg-linie{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes weg-knoten{0%{transform:scale(.4);opacity:0}55%{transform:scale(1.18);opacity:1;background:var(--copper-solid);border-color:var(--copper-solid);color:#fffefa}100%{transform:scale(1)}}
@keyframes weg-karte{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.karte{background:var(--surface);border:1px solid var(--line);padding:12px 16px}
.karte b{display:block;font-size:1rem;font-weight:600;margin-bottom:4px}
.karte p{font-size:0.90625rem;color:var(--muted);line-height:1.55}
.wer{display:inline-block;margin-bottom:3px;font-size:0.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--petrol)}
.station.ihr .knoten{background:var(--copper-solid);border-color:var(--copper-solid);color:#fffefa;box-shadow:0 0 0 6px var(--copper-wash)}
.station.ihr .karte{border-color:var(--copper);box-shadow:inset 3px 0 0 var(--copper-solid)}
.station.ihr .wer{color:var(--copper-text)}
/* Sackgasse: was man nicht selbst tun soll */
.sack{position:relative;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:stretch;padding:14px 18px;
  border:1.5px dashed var(--kasten);color:var(--muted);max-width:560px;
  background:repeating-linear-gradient(135deg,transparent 0 9px,var(--line-soft) 9px 10px)}
.sack::before{content:"";position:absolute;left:-45px;top:26px;width:44px;border-top:2px dashed var(--kasten)}
.sack small{display:block;font-size:0.65625rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sack s{display:block;margin-bottom:4px;font-weight:600;color:var(--ink);text-decoration-thickness:1.5px;text-decoration-color:var(--copper-solid)}
.sack span{display:block;font-size:0.84375rem;line-height:1.5;color:var(--ink)}
.sack-ende{width:5px;background:var(--kasten)}
/* Gabel am Ende */
.gabel-titel{font:600 16px var(--sans);padding-top:10px}
.weg-gabel{margin-top:12px;display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch}
.weg-gabel .karte{border-top:3px solid var(--copper-solid)}
.weg-gabel .oder{align-self:center;font:italic 500 15px var(--serif);color:var(--copper-text)}
@media (max-width:38.75em){.weg-gabel{grid-template-columns:1fr}.weg-gabel .oder{justify-self:start;padding-left:4px}}

/* ---------- Was haben Sie schon ---------- */
.liste-kopf h3{font-size:1.375rem;margin-bottom:6px}
.liste-kopf p{color:var(--muted);font-size:0.90625rem}
.zaehler{margin-top:12px;font-family:var(--serif);font-size:0.9375rem;color:var(--copper-text);font-variant-numeric:tabular-nums}
.fortschritt{display:flex;gap:3px;margin:8px 0 20px}
.fortschritt i{flex:1;height:5px;background:var(--line)}
.fortschritt i.an{background:var(--copper-solid)}
.liste{display:flex;flex-direction:column;gap:22px}
.gruppe h4{margin:0 0 8px;font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--copper-text);font-weight:600}
.gruppe-punkte{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.ck{display:grid;grid-template-columns:28px 1fr;gap:12px;background:var(--surface);padding:14px 16px;cursor:pointer;transition:background .15s ease}
.ck:hover{background:var(--paper-light)}
.ck input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:2px 0 0;border:1.5px solid var(--kasten);
  background:var(--surface);display:grid;place-content:center;cursor:pointer}
.ck input::after{content:"";width:10px;height:6px;border-left:2px solid #fffefa;border-bottom:2px solid #fffefa;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.ck input:checked{background:var(--copper-solid);border-color:var(--copper-solid)}
.ck input:checked::after{opacity:1}
.ck b{display:block;font-size:0.9375rem;font-weight:600;margin-bottom:3px}
.ck span{display:block;font-size:0.84375rem;color:var(--muted);line-height:1.5}

/* ---------- Anfrage als Blatt ---------- */
.brief{background:var(--paper-light);padding:50px 0 54px;border-top:1px solid var(--line-soft)}
.brief h2{font-size:clamp(1.375rem,3vw,1.875rem);margin-bottom:8px}
.blatt{position:relative;max-width:720px;background:#fffefa;color:#17252b;border:1px solid #17252b24;
  box-shadow:0 1px 0 #17252b0f,0 22px 44px -28px #0e1a1f59;padding:0 40px 32px}
.blatt::before{content:"";display:block;height:3px;background:var(--copper-solid);margin:0 -40px 22px}
.blatt-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;color:#57666a;margin-bottom:22px}
.betreff{display:block;font:600 15px var(--sans);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #17252b17}
.brieftext{white-space:pre-wrap;font-family:var(--serif);font-size:1rem;line-height:1.6;overflow-wrap:anywhere}
.luecke{background:#a6654424;color:#7e4a31;border-bottom:1.5px dotted #a66544;padding:0 .35em}
.blatt-fuss{margin-top:12px;font-size:0.8125rem;color:var(--muted);display:flex;gap:8px;align-items:center;max-width:720px}
.blatt-fuss .luecke{font-size:0.75rem;color:#7e4a31}
.blatt-knoepfe{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:18px}
.knopf-hell{background:var(--surface);border:1px solid var(--line);padding:14px 22px;font-size:0.9375rem;min-height:50px;color:var(--ink)}
.knopf-hell:hover{border-color:var(--copper)}
.kopiert{font-size:0.84375rem;color:var(--copper-text)}
.klein{margin-top:18px;font-size:0.8125rem;color:var(--muted);max-width:720px}
.neu-starten{margin-top:30px;padding-top:22px;border-top:1px solid var(--line-soft);max-width:720px}
@media (max-width:35em){.blatt{padding:0 22px 28px}.blatt::before{margin:0 -22px 20px}.brieftext{font-size:0.9375rem}}

/* ---------- Fuss ---------- */
.hinweis{background:var(--sunk);color:var(--muted);font-size:0.8125rem;padding:24px 0;line-height:1.6}
.hinweis .shell{max-width:78ch}
.hinweis b{color:var(--ink);font-weight:600}

@media (prefers-reduced-motion:reduce){.wegweiser *{animation-duration:.001ms !important;animation-delay:0s !important;transition-duration:.001ms !important}}
@media print{
  .site-header,.einstieg,.blatt-knoepfe,.neu-starten,.rechnung summary,.legende,.frist-knoepfe,.kontakt-knoepfe{display:none !important}
  body,.dunkel,.hell,.brief,.hinweis,.risiken{background:#fff !important;color:#000 !important}
  .dunkel *,.hell *,.brief *,.risiken *{color:#000 !important}
  .zwei-spalten,.weg-grid{display:block}
  .uhr{max-width:260px;margin:12px 0}
  .stufe[hidden]{display:none !important}
  .blatt{box-shadow:none;border:1px solid #000}
  .uhr .seg{fill:#ddd !important;stroke:none !important}
  .uhr .seg.bleibt{fill:#888 !important}
  .uhr .seg.jetzt,.uhr .zeiger line,.uhr .zeiger circle{fill:#000 !important;stroke:#000 !important}
  .uhr-mitte b,.uhr-mitte span,.uhr text{color:#000 !important;fill:#000 !important}
}

/* ---------- Anpassungen an die Website ---------- */
/* Knoepfe als Link: styles.css setzt a{color:inherit}, die Knopffarben muessen gewinnen */
.wegweiser a.knopf{color:#fffefa}
.wegweiser a.knopf-hell{color:var(--ink)}