/* ==========================================================================
   Immobilien-Vorabcheck Wien — Gestaltung des Werkzeugs
   Ergänzt styles.css, gilt nur auf immobilien-vorabcheck.html. Alles steht
   unter .vorabcheck, damit nichts auf Kopf, Fuß oder andere Seiten durchgreift.
   Farben aus den Tokens von styles.css. Die Seite ist wie die ganze Website
   bewusst hell, deshalb kein dunkles Farbschema.
   ========================================================================== */

:root{
  --vc-dunkel:#0e1a1f;
  --vc-dunkel-rand:#131c20;
  --vc-flaeche:#fffefa;
  --vc-sunk:#efeae0;
  --vc-linie-zart:#17252b17;
}

.vorabcheck p{margin:0}
.vorabcheck h1,.vorabcheck h2,.vorabcheck h3{margin:0;font-family:var(--serif);font-weight:600;line-height:1.15;text-wrap:balance}
.vorabcheck button{cursor:pointer}
.vorabcheck dl{margin:0}
/* styles.css nimmt Links die Unterstreichung. Im Fließtext des Werkzeugs
   muss man sie aber als Links erkennen. */
.vorabcheck .umfang-kurz a,.vorabcheck .abgerufen a,.vorabcheck .einstieg-fuss a,
.vorabcheck .pegel-hinweis a,.vorabcheck .quelle-zeile a,.vorabcheck .hinweis a,.vorabcheck .cta p a{
  color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Auf dunklem Grund ein heller Fokusring, wie in den übrigen dunklen Abschnitten */
.vorabcheck .einstieg :focus-visible,.vorabcheck .buehne :focus-visible,.vorabcheck .cta :focus-visible{outline-color:#d4c5ad}
.nur-leser{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Einstieg: die Adresse ---------- */
.einstieg{background:var(--vc-dunkel);color:#e9e2d6;padding:64px 0 48px}
.augenbraue{font-size:0.6875rem;letter-spacing:.16em;text-transform:uppercase;color:#b6c0b9;margin-bottom:14px}
.einstieg h1{font-size:clamp(1.875rem,4.6vw,3rem);color:var(--white);letter-spacing:-.01em;max-width:18ch}
.einstieg .lead{margin-top:14px;color:#d3dbd7;font-size:1rem;max-width:52ch}
.umfang-kurz{margin-top:12px;font-size:0.8125rem;color:#b6c0b9;max-width:62ch}
.suche{margin-top:28px;max-width:560px;position:relative}
.suche-zeile{display:flex;border:1px solid #ffffff40;background:#ffffff0f}
.suche input{flex:1;background:none;border:0;padding:15px 18px;font-size:1rem;color:var(--white);min-width:0}
.suche input::placeholder{color:#8d9a95}
.suche input:focus{outline:0}
.suche-zeile:focus-within{border-color:var(--copper-on-dark);background:#ffffff17}
.suche button[type="submit"]{background:var(--copper-solid);color:var(--white);border:0;padding:15px 24px;
  font-size:0.9375rem;font-weight:600;white-space:nowrap;min-height:52px}
.suche button[type="submit"]:hover{background:var(--copper-solid-hover)}
.suche.laedt button[type="submit"]{opacity:.6}
.vorschlaege{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:100%;z-index:5;
  background:var(--vc-dunkel-rand);border:1px solid #ffffff33;border-top:0}
.vorschlaege li button{display:block;width:100%;text-align:left;background:none;border:0;
  padding:13px 18px;font-size:0.9375rem;color:#e9e2d6;min-height:48px;border-bottom:1px solid #ffffff14}
.vorschlaege li:last-child button{border-bottom:0}
.vorschlaege li button:hover,.vorschlaege li button:focus-visible{background:#ffffff14;color:var(--white)}
.vorschlaege small{display:block;color:#9fb0aa;font-size:0.75rem;margin-top:2px}
.suche-hinweis{margin-top:12px;font-size:0.84375rem;color:#d9c4b0;min-height:20px}
.suche-hinweis:empty{display:none}
.einstieg-fuss{margin-top:22px;padding-top:14px;border-top:1px solid #ffffff1f;font-size:0.6875rem;line-height:1.55;color:#9fada8;max-width:70ch}
.ohne-js{margin-top:18px;font-size:0.875rem;color:#d9c4b0}

/* Vorgeschmack rechts neben dem Adressfeld: die Zeitreise an einem festen
   Beispiel (Seestadt Aspern, Bilder in vorabcheck/beispiel/, über den eigenen
   Vermittler erzeugt). Nur ab 980 px — am Handy steht das Adressfeld allein
   oben, und die Bilder werden dort gar nicht geladen (das Skript setzt src erst
   bei breitem Fenster). Ohne Bewegungswunsch steht 2022 still da. */
.einstieg-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px 64px;align-items:center}
.vorschau{display:none;margin:0}
/* Einblenden, sobald das erste Bild da ist. Nur wenn das Seitenskript läuft
   (.js-ablauf) — sonst bliebe die Vorschau unsichtbar. */
.js-ablauf .vorschau{opacity:0;transform:translateY(14px) scale(.985);transition:opacity 1.4s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}
.js-ablauf .vorschau.da{opacity:1;transform:none}
@media (min-width:61.25em){
  .einstieg-grid{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
  .vorschau{display:block}
}
.vorschau-bild{position:relative;aspect-ratio:1}
/* Weiche Ränder: das Bild läuft nach allen vier Seiten in den dunklen Grund
   aus, statt hart zu enden (Wunsch des Inhabers). Zwei Verläufe, deren
   Schnittmenge die Maske ist. Die Jahreszahl liegt außerhalb der Maske,
   sonst würde sie mit ausgeblendet. */
.vorschau-fenster{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);
  mask-composite:intersect}
.vorschau-fenster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.025);transition:opacity 1.5s ease-in-out,transform 7s linear}
.vorschau-fenster img.an{opacity:1;transform:scale(1)}
.vorschau-fenster svg{position:absolute;inset:0;width:100%;height:100%}
.vorschau-kontur{fill:#a6654421;stroke:#f4cda9;stroke-width:3.4;stroke-linejoin:round;
  stroke-dasharray:1200;stroke-dashoffset:0;transition:opacity .6s ease;
  filter:drop-shadow(0 0 3px #0a1114cc) drop-shadow(0 0 10px #a6654466)}
.vorschau-kontur.leise{opacity:.35}
.vorschau-kontur.zeichnen{animation:vc-zeichnen-v 1.4s ease forwards}
@keyframes vc-zeichnen-v{from{stroke-dashoffset:1200}to{stroke-dashoffset:0}}
.vorschau-jahr{position:absolute;left:12%;bottom:8%;text-shadow:0 1px 14px #0a1114,0 0 3px #0a1114;font-family:var(--serif);font-size:2.125rem;
  line-height:1;color:var(--white);font-variant-numeric:tabular-nums;font-weight:400}
.vorschau figcaption{margin-top:10px;font-size:0.6875rem;line-height:1.5;color:#9fada8}
.vorschau figcaption a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* ---------- Bühne: das Haus ---------- */
.buehne{background:var(--vc-dunkel);color:#e9e2d6;padding:44px 0 52px;border-top:1px solid #ffffff1a}
.buehne-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:44px;align-items:start}
@media (max-width:56.25em){.buehne-grid{grid-template-columns:1fr;gap:30px}}
.buehne h2.titel{font-size:clamp(1.75rem,4.4vw,2.625rem);color:var(--white);letter-spacing:-.01em}
.buehne h2.titel em{font-style:normal;color:#d4c5ad;display:block}
.buehne .lead{margin-top:16px;color:#d3dbd7;font-size:1rem;max-width:46ch}
.abgerufen{margin-top:12px;font-size:0.78125rem;line-height:1.55;color:#9fada8}

.bild-halter{position:relative;aspect-ratio:1;background:#0a1114;overflow:hidden;border:1px solid #ffffff26}
.bild-halter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.07);transition:opacity .55s ease,transform 5.6s linear}
.bild-halter.ruhe img{transform:scale(1)}
.bild-halter img.an{opacity:1}
.bild-halter svg{position:absolute;inset:0;width:100%;height:100%}
.kontur{fill:#a6654421;stroke:#f4cda9;stroke-width:3.2;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:0;
  filter:drop-shadow(0 0 3px #0a1114cc) drop-shadow(0 0 10px #a6654466)}
.kontur.zeichnen{animation:vc-zeichnen 1.1s ease forwards}
@keyframes vc-zeichnen{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.jahr{position:absolute;left:0;bottom:0;padding:14px 18px;background:linear-gradient(to top,#0a1114f2,#0a111400);
  width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.jahr b{font-family:var(--serif);font-size:2.25rem;line-height:1;color:var(--white);font-variant-numeric:tabular-nums}
.jahr span{font-size:0.6875rem;color:#b6c0b9;text-align:right;line-height:1.4}

.strahl{margin-top:14px;display:flex;gap:1px;background:#ffffff1f;border:1px solid #ffffff1f}
.strahl button{flex:1;background:var(--vc-dunkel-rand);border:0;padding:9px 4px;font-size:0.75rem;color:#a9b6b1;
  font-variant-numeric:tabular-nums;position:relative;min-height:38px}
.strahl button[aria-pressed="true"]{background:var(--copper-solid);color:var(--white);font-weight:600}
.strahl button:hover{color:#e9e2d6}
.quelle-zeile{margin-top:10px;font-size:0.71875rem;color:#9fada8}

.fakten{display:flex;flex-direction:column;border-top:1px solid #ffffff26;margin-top:26px}
.fakt{display:grid;grid-template-columns:128px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid #ffffff17;font-size:0.875rem}
.fakt dt{color:#a3aeaa;font-size:0.6875rem;letter-spacing:.08em;text-transform:uppercase;padding-top:3px}
.fakt dd{margin:0;color:#efe9df}
.fakt dd small{display:block;color:#9fada8;font-size:0.71875rem;margin-top:3px}
.fakt.leer dd{color:#9fada8;font-style:italic}

.umgebung{margin-top:28px;display:flex;flex-direction:column;gap:22px}
.umgebung h3{font-family:var(--sans);font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:#a3aeaa;font-weight:500;margin-bottom:10px}
.pegel{display:flex;flex-direction:column;gap:9px}
.pegel-zeile{display:grid;grid-template-columns:minmax(0,1fr) 110px 104px;gap:12px;align-items:center;font-size:0.84375rem;color:#d3dbd7}
.pegel-balken{height:6px;background:#ffffff14;position:relative}
.pegel-balken i{position:absolute;left:0;top:0;bottom:0;background:var(--copper-on-dark)}
.pegel-balken i.stark{background:#d98f6a}
.pegel-wert{color:#efe9df;font-variant-numeric:tabular-nums;text-align:right}
.pegel-wert.leise{color:#9fada8}
.pegel-hinweis{font-size:0.71875rem;color:#9fada8;margin-top:2px}
.plan-liste{display:flex;flex-direction:column;gap:8px}
.plan{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;font-size:0.84375rem;color:#d3dbd7}
.plan .art{font-size:0.65625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--vc-dunkel);background:var(--copper-on-dark);
  padding:2px 7px;font-weight:600}
.plan .art.baustelle{background:#5c6b68;color:#e9e2d6}
.plan .weit{color:#9fada8;font-size:0.78125rem;white-space:nowrap}
.plan-leer{font-size:0.8125rem;color:#9fada8}
@media (max-width:35em){.pegel-zeile{grid-template-columns:1fr 70px 96px}}

/* ---------- Ablauf: ein Schritt nach dem anderen ---------- */
.js-ablauf .stufe[hidden]{display:none}
.stufe{animation:vc-auf .22s ease}
@keyframes vc-auf{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Übergang zur Checkliste: eigener Kasten über die ganze Breite, großer
   Knopf, der sich beim Hinkommen meldet wie „Textvorschlag erstellen“.
   Bis 11.09.2026 ein kleiner Knopf unter dem Luftbild — dem Inhaber zu
   unauffällig für den Schritt, um den es eigentlich geht. */
.weiter-leiste{margin-top:44px;padding:26px 28px;background:#ffffff0d;border:1px solid #ffffff26;
  border-left:4px solid var(--copper-solid);display:flex;flex-wrap:wrap;gap:18px 32px;
  align-items:center;justify-content:space-between}
.weiter-text{font-family:var(--serif);font-size:clamp(1.3125rem,2.4vw,1.6875rem);line-height:1.2;color:var(--white)}
.weiter-text span{display:block;max-width:52ch;margin-top:7px;font-family:var(--sans);font-size:0.875rem;line-height:1.55;color:#b6c0b9}
@media (max-width:35em){.weiter-leiste{padding:20px}}
.neu-starten{margin-top:26px}
.neu-starten button{background:none;border:1px solid var(--copper-on-dark);color:#e9e2d6;
  padding:12px 20px;font-size:0.875rem;min-height:46px}
.neu-starten button:hover{border-color:#e9e2d6}

/* ---------- Was vor dem Kauf zu klären ist ---------- */
.vc-offen{padding:60px 0 66px;background:var(--paper)}
.offen-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 20px;margin-bottom:6px}
.vc-offen h2{font-size:clamp(1.5rem,3.4vw,2.125rem)}
.zaehler{font-family:var(--serif);font-size:0.9375rem;color:var(--copper-text);font-variant-numeric:tabular-nums}
.zaehler.fertig{color:var(--ink)}
.vc-offen .unter{color:var(--muted);max-width:58ch;margin-bottom:26px}

.anbot{background:var(--vc-flaeche);border:1px solid var(--line);border-left:4px solid var(--copper-solid);
  padding:18px 22px;margin:4px 0 26px;display:grid;grid-template-columns:1fr auto;gap:10px 24px;align-items:center}
.anbot b{display:block;font-family:var(--serif);font-size:1.125rem;font-weight:600;margin-bottom:5px}
.anbot p{font-size:0.90625rem;color:var(--muted);max-width:62ch}
.anbot a{white-space:nowrap;font-size:0.875rem;font-weight:600;color:var(--copper-text);
  text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.anbot ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.anbot li{padding-left:22px;position:relative;font-size:0.90625rem;color:var(--ink);font-weight:500}
/* Pfeil als gezeichnete Linie. Vorher aus zwei Rahmenstücken zusammengesetzt,
   die Spitze saß dabei schief über dem Schaft (beanstandet 11.09.2026). */
.anbot li::before{content:"";position:absolute;left:0;top:.4em;width:14px;height:12px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'%3E%3Cpath d='M1 6h11M8 2l4 4-4 4' fill='none' stroke='%23a66544' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center/contain;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
@media (max-width:40em){.anbot{grid-template-columns:1fr}}

.haus-hinweise{margin-bottom:30px}
.haus-hinweise h3,.liste-kopf h3{font-family:var(--serif);font-size:1.25rem;margin-bottom:12px}
/* Trennlinien über die Ränder der Kacheln statt über einen durchscheinenden
   Hintergrund — sonst stünde neben einem einzelnen Hinweis eine leere
   graue Fläche. Die Ränder überlappen um ein Pixel, damit keine doppelt wird. */
.hh-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));padding:1px 0 0 1px}
.hh{background:var(--vc-flaeche);padding:16px 18px;display:flex;gap:12px;
  border:1px solid var(--vc-linie-zart);margin:-1px 0 0 -1px}
.hh::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:8px;background:var(--copper-solid);border-radius:50%}
.hh b{display:block;font-size:0.9375rem;font-weight:600;margin-bottom:3px}
.hh span{font-size:0.875rem;color:var(--muted);line-height:1.55}

.zutrifft{margin:6px 0 30px;padding:18px 20px;background:var(--vc-flaeche);border:1px solid var(--line)}
.zutrifft-titel{font-size:0.9375rem;font-weight:600;margin-bottom:12px}
.zutrifft-titel span{font-weight:400;color:var(--muted)}
.zutrifft-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.zutrifft-knoepfe button{border:1px solid #17252b8c;background:var(--vc-flaeche);padding:10px 16px;font-size:0.90625rem;min-height:44px}
.zutrifft-knoepfe button:hover{border-color:var(--copper)}
.zutrifft-knoepfe button[aria-pressed="true"]{background:var(--copper-solid);border-color:var(--copper-solid);color:var(--white);font-weight:600}

.liste-kopf{margin:6px 0 14px}
.liste-kopf p{color:var(--muted);font-size:0.90625rem;max-width:62ch}
.liste{display:flex;flex-direction:column;gap:30px}
.gruppe h3{font-family:var(--sans);font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--copper-text);font-weight:600;margin-bottom:8px}
.gruppe-hinweis{font-size:0.8125rem;color:var(--muted);margin:-2px 0 10px}
.gruppe-punkte{display:flex;flex-direction:column;gap:1px;background:var(--vc-linie-zart);border:1px solid var(--vc-linie-zart)}
.ck{display:grid;grid-template-columns:28px 1fr;gap:12px;background:var(--vc-flaeche);padding:16px 18px;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 #17252b8c;
  background:var(--vc-flaeche);display:grid;place-content:center;cursor:pointer}
.ck input::after{content:"";width:10px;height:6px;border-left:2px solid var(--white);border-bottom:2px solid var(--white);
  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:4px}
.ck span{display:block;font-size:0.875rem;color:var(--muted);line-height:1.55}
.ck.erledigt span{color:#6b777a}

/* ---------- Was noch fehlt, anfordern ---------- */
.liste-block{padding:56px 0;background:var(--paper)}
.vorschlag-kopf h2{font-size:clamp(1.375rem,3vw,1.75rem);margin-bottom:8px}
.vorschlag-rahmen{max-width:720px}
/* Der Knopf zum Textvorschlag: eigene Karte, groß, und er meldet sich,
   wenn man hinkommt — drei ruhige Wellen, dann ist Ruhe */
.vorschlag-start{background:var(--vc-flaeche);border:1px solid var(--line);border-left:4px solid var(--copper-solid);
  padding:22px 24px;max-width:720px;display:flex;flex-direction:column;gap:18px;align-items:flex-start;margin-top:14px}
.vorschlag-start[hidden]{display:none}
.vorschlag-start p{font-size:0.96875rem}
.knopf{display:inline-flex;align-items:center;gap:10px;background:var(--copper-solid);color:var(--white);
  border:0;padding:15px 26px;font-size:0.9375rem;font-weight:600;text-decoration:none;white-space:nowrap}
.knopf:hover{background:var(--copper-solid-hover)}
.knopf svg{display:inline-block}
.knopf-gross{font-size:1.03125rem;padding:17px 30px;gap:12px;min-height:56px}
.knopf-gross.ruft{animation:vc-ruf 1.7s ease-out 3}
@keyframes vc-ruf{0%{box-shadow:0 0 0 0 #a6654499}70%{box-shadow:0 0 0 16px #a6654400}100%{box-shadow:0 0 0 0 #a6654400}}
@media (max-width:35em){.knopf-gross{width:100%;justify-content:center}}
.anrede-wahl{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-bottom:12px;font-size:0.875rem;color:var(--muted)}
.anrede-knoepfe{display:flex;flex-wrap:wrap;gap:6px}
.anrede-knoepfe button{border:1px solid #17252b8c;background:var(--vc-flaeche);padding:8px 14px;font-size:0.875rem;min-height:40px}
.anrede-knoepfe button:hover{border-color:var(--copper)}
.anrede-knoepfe button[aria-pressed="true"]{background:var(--copper-solid);border-color:var(--copper-solid);color:var(--white);font-weight:600}
.name-hinweis{flex-basis:100%;font-size:0.8125rem;color:var(--copper-text);margin-top:2px}
.vorschlag{background:var(--vc-flaeche);border:1px solid var(--line);padding:22px 24px;white-space:pre-wrap;
  font-family:var(--serif);font-size:0.96875rem;line-height:1.65;color:var(--ink)}
.vorschlag .betreff{display:block;font-family:var(--sans);font-size:0.78125rem;color:var(--muted);margin-bottom:14px;
  padding-bottom:10px;border-bottom:1px solid var(--vc-linie-zart)}
.vorschlag-knoepfe{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:14px}
.knopf-hell{background:var(--vc-flaeche);border:1px solid #17252b8c;padding:14px 22px;font-size:0.9375rem;min-height:48px}
.knopf-hell:hover{border-color:var(--copper)}
.kopiert{font-size:0.84375rem;color:var(--copper-text)}
.vollstaendig{background:var(--vc-flaeche);border:1px solid var(--line);border-left:4px solid var(--copper-solid);padding:18px 22px;max-width:720px;margin-top:14px}
.vollstaendig b{display:block;font-family:var(--serif);font-size:1.125rem;margin-bottom:4px}

/* ---------- Kontakt ---------- */
.cta{background:var(--vc-dunkel);color:#e9e2d6;padding:56px 0}
.cta-inner{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center}
@media (max-width:47.5em){.cta-inner{grid-template-columns:1fr;gap:22px}}
.cta h2{color:var(--white);font-size:clamp(1.375rem,3vw,1.875rem)}
.cta p{color:#d3dbd7;margin-top:12px;max-width:52ch;font-size:0.9375rem}
.cta .cta-klein{font-size:0.8125rem;color:#b6c0b9;margin-top:14px}
.cta-knoepfe{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.knopf-zwei{background:none;border:1px solid #ffffff4d;color:#e9e2d6;padding:13px 22px;font-size:0.90625rem;min-height:48px}
.knopf-zwei:hover{border-color:var(--copper-on-dark);color:var(--white)}

/* ---------- Leistungsumfang und Quellen ---------- */
/* Kleingedrucktes: bewusst klein und auf dem Computer zweispaltig, damit der
   Block am Seitenende nicht dominiert (Wunsch des Inhabers 11.09.2026). Der
   Text bleibt vollständig — er setzt Abschnitt 9 des Prüfergebnisses und die
   CC-BY-Angaben um. Kontrast #57666a auf #efeae0 = 4,8:1. */
.hinweis{background:var(--vc-sunk);color:var(--muted);font-size:0.71875rem;padding:22px 0 26px;line-height:1.55}
.hinweis .shell{display:grid;grid-template-columns:1fr 1fr;gap:14px 48px;align-items:start}
@media (max-width:56.25em){.hinweis .shell{grid-template-columns:1fr}}
.hinweis b{color:var(--ink);font-weight:600}
.hinweis p+p,.hinweis div+p,.hinweis p+div>p:first-child{margin-top:6px}
/* Langtext und Quellen zum Aufklappen. Die Rechtsprüfung verlangt sichtbar nur
   die Kurzfassungen (oben und unter den Angaben), der Langtext muss „leicht
   erreichbar“ bleiben: ein Klick, und die Verweise „Mehr dazu“ klappen ihn
   selbst auf. Zum Drucken öffnet das Seitenskript alles. */
.klapp summary{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;
  font-size:0.78125rem;font-weight:600;color:var(--ink)}
.klapp summary::-webkit-details-marker{display:none}
.klapp summary::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-left:2px;
  border-right:1.5px solid var(--copper-text);border-bottom:1.5px solid var(--copper-text);
  transform:rotate(-45deg);transition:transform .2s ease}
.klapp[open] summary::before{transform:rotate(45deg)}
.klapp summary:hover{color:var(--copper-text)}
.klapp>:not(summary){margin-left:19px}
.klapp[open]{padding-bottom:6px}

@media (prefers-reduced-motion:reduce){
  .vorabcheck *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  /* Ausnahme Vorschau: ruhiges Überblenden bleibt, Zoom und Einschweben nicht.
     Ein Überblenden ist keine Bewegung im Raum. */
  .vorabcheck .vorschau.sanft .vorschau-fenster img{transform:none !important;transition-property:opacity !important;transition-duration:1.8s !important}
  .vorabcheck .vorschau.sanft{transform:none !important;transition-property:opacity !important;transition-duration:1s !important}
}


/* ---------- Druck: ein Blatt zum Mitnehmen, schwarz auf weiß ---------- */
@media print{
  .site-header,.skip-link,.einstieg,.bild-halter,.strahl,.quelle-zeile,.weiter-leiste,.zutrifft,
  .cta-knoepfe,.neu-starten,.cta-klein,.anbot a,.vorschlag-knoepfe,.liste-kopf p,.anrede-wahl,.name-hinweis,
  #stufe-listen{display:none !important}
  .vorabcheck,.buehne,.vc-offen,.liste-block,.cta,.hinweis{background:#fff !important;color:#000 !important}
  .buehne *,.cta *,.vc-offen *,.liste-block *,.hinweis *{color:#000 !important}
  .buehne-grid{display:block}
  .buehne,.vc-offen,.liste-block,.cta{padding:12px 0 !important}
  .stufe[hidden]{display:none !important}
  .pegel-balken{display:none}
  .ck{break-inside:avoid;padding:8px 0}
  .ck input{-webkit-appearance:none;appearance:none;border:1.2px solid #000 !important;background:#fff !important}
  .ck input:checked::after{border-color:#000 !important;opacity:1}
  .gruppe{break-inside:avoid-page}
  .hh-liste{display:block;border:0}
  .hh{padding:4px 0}
  .hh::before{background:#000}
  .anbot{border-left-color:#000}
}