/* Gemeinsames Aussehen aller Werkzeuge auf menschoderki.com */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:optional;
  src:url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:optional;
  src:url("/fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:optional;
  src:url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:optional;
  src:url("/fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:600;font-display:optional;
  src:url("/fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:600;font-display:optional;
  src:url("/fonts/ibm-plex-serif-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Kyrillisch. Bis zum 02.09.2026 gab es diesen Schnitt nicht, obwohl es
   russische, ukrainische und serbische Seiten gibt. Der gesamte Text dort fiel
   auf eine Systemschrift zurück, was auf jedem Gerät anders aussah. Der
   Zeichenbereich deckt Russisch und Ukrainisch ab, also auch і, ї, є und ґ. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:optional;
  src:url("/fonts/ibm-plex-sans-cyrillic-400-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:optional;
  src:url("/fonts/ibm-plex-sans-cyrillic-600-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Serif";font-style:normal;font-weight:600;font-display:optional;
  src:url("/fonts/ibm-plex-serif-cyrillic-600-normal.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:optional;
  src:url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:optional;
  src:url("/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#F4F6F9;--surface:#FFFFFF;--surface-2:#EDF0F5;--line:#DBE0E9;--line-soft:#E7EBF1;
  --ink:#13161D;--ink-2:#3F4653;--ink-3:#595F6D;--ink-4:#676D77;
  --accent:#2E5AAC;--accent-soft:#E4EBF8;
  --platzhalter:#676D77;
  --hit:#BE400C;--hit-soft:#FCE9DF;--caution:#96620A;--caution-soft:#FAF0DA;
  --clean:#0F766E;--clean-soft:#DCF0ED;
  --shadow:0 1px 2px rgba(19,22,29,.05),0 8px 24px -12px rgba(19,22,29,.18);
  --radius:12px;--radius-sm:6px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E1016;--surface:#161923;--surface-2:#1D2130;--line:#2A3040;--line-soft:#232838;
  --ink:#E5E8EF;--ink-2:#BDC4D2;--ink-3:#8B94A6;--ink-4:#838A99;
  --accent:#7FA3EE;--accent-soft:#1B2540;
  --platzhalter:#818A9C;
  --hit:#F98650;--hit-soft:#2E1B12;--caution:#DFB552;--caution-soft:#2B2313;
  --clean:#37D6C0;--clean-soft:#0F2A28;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --paper:#0E1016;--surface:#161923;--surface-2:#1D2130;--line:#2A3040;--line-soft:#232838;
  --ink:#E5E8EF;--ink-2:#BDC4D2;--ink-3:#8B94A6;--ink-4:#838A99;
  --accent:#7FA3EE;--accent-soft:#1B2540;
  --platzhalter:#818A9C;
  --hit:#F98650;--hit-soft:#2E1B12;--caution:#DFB552;--caution-soft:#2B2313;
  --clean:#37D6C0;--clean-soft:#0F2A28;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
/* Eine Regel wie .felder label{display:flex} ueberstimmt sonst das
   hidden-Attribut, und ausgeblendete Felder bleiben sichtbar. */
[hidden]{display:none !important}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1000px;margin:0 auto;padding:0 clamp(20px,4vw,40px) 72px}

/* ---- Kopf ---- */
/* Die Leiste bleibt auf jeder Breite einzeilig. Mit flex-wrap:wrap
   verschiebt das Nachladen der Schrift Punkte in eine zweite Zeile, die
   Leiste wird hoeher und die ganze Seite rutscht nach unten. Einzeilig
   haengt die Hoehe nur an font-size und line-height, also an nichts, was
   sich beim Schriftwechsel aendert. */
.tnav{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  font-size:12.5px;line-height:1.55;
  margin:0 calc(-1*clamp(20px,4vw,40px));
  padding:16px clamp(20px,4vw,40px) 0}
.tnav::-webkit-scrollbar{display:none}
.tnav a{color:var(--ink-3);text-decoration:none;padding:5px 10px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap;flex:0 0 auto}
.tnav a:hover{color:var(--ink);background:var(--surface-2)}
.tnav a[aria-current="page"]{color:var(--ink);border-color:var(--line);background:var(--surface)}

/* Ab 1000px ist die Leiste breit genug fuer zwei Zeilen und schmal genug,
   dass es nie drei werden. Dort darf sie umbrechen, damit auf dem Rechner
   alle Punkte sichtbar sind. Die min-height reserviert beide Zeilen, also
   springt nichts, egal ob die Leiste ein oder zwei Zeilen braucht.
   ACHTUNG: Kommen weitere Punkte dazu, diesen Wert nachrechnen.
   Eine Zeile misst 31px (12,5px mal 1,55 Zeilenhoehe, 5px Innenabstand
   oben und unten, 1px Rahmen oben und unten), zwei Zeilen plus 6px Abstand
   ergeben 68px, dazu 16px Abstand nach oben. */
@media (min-width:1000px){
  .tnav{flex-wrap:wrap;overflow-x:visible;align-content:flex-start;
    min-height:86px;margin:0;padding:16px 0 0}
}

header{padding:20px 0 18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
h1{font-family:"IBM Plex Serif",Georgia,serif;font-weight:600;font-size:27px;
  line-height:1.15;margin:0 0 6px;letter-spacing:-.015em;text-wrap:balance}
header p{margin:0;color:var(--ink-3);font-size:13.5px;max-width:58ch}

/* ---- Haftungshinweis: ruhige Zeile statt Warnkasten.
       Ausführlich steht er weiterhin unter dem Werkzeug, unter dem Ergebnis
       und im gekauften PDF — dreimal reicht, einmal laut wäre schlechter. ---- */
.garantie{margin:0 0 14px;font-size:12.2px;line-height:1.5;color:var(--ink-4)}
.garantie a{color:var(--ink-3);text-decoration:underline;text-underline-offset:2px}
.garantie a:hover{color:var(--accent)}
.hinweis:target{border-left-color:var(--caution);box-shadow:var(--shadow)}

/* ---- Fragen und Antworten ---- */
.faq{margin-top:36px}
.faq h2{font-family:"IBM Plex Serif",Georgia,serif;font-size:21px;font-weight:600;
  margin:0 0 4px;letter-spacing:-.01em}
.faq > p.intro{margin:0 0 18px;color:var(--ink-3);font-size:13.3px;max-width:60ch}
.faq details{border-bottom:1px solid var(--line-soft);background:none}
.faq details:first-of-type{border-top:1px solid var(--line-soft)}
.faq summary{cursor:pointer;list-style:none;padding:14px 26px 14px 0;position:relative;
  font-size:14.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:21px;width:8px;height:8px;
  border-right:1.6px solid var(--ink-4);border-bottom:1.6px solid var(--ink-4);
  transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg);top:24px}
.faq summary:hover{color:var(--accent)}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.faq .antwort{padding:0 8px 18px 0;color:var(--ink-2);font-size:13.6px;line-height:1.72;max-width:68ch}
.faq .antwort p{margin:0 0 10px}
.faq .antwort p:last-child{margin-bottom:0}
.faq .antwort ul{margin:0 0 10px;padding-left:19px}
.faq .antwort li{margin-bottom:5px}
.faq .antwort strong{color:var(--ink);font-weight:600}
.faq .antwort .quelle{font-size:12px;color:var(--ink-4)}
.faq .antwort a{color:var(--accent)}

/* ---- Verweise auf die anderen Werkzeuge ---- */
.weitere{margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.weitere h2{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin:0 0 12px}
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.kachel{display:block;padding:14px 16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);text-decoration:none;transition:border-color .15s,transform .15s}
.kachel:hover{border-color:var(--accent);transform:translateY(-1px)}
.kachel b{display:block;font-size:13.6px;color:var(--ink);margin-bottom:3px}
.kachel span{font-size:12.4px;color:var(--ink-3);line-height:1.5}

/* ---- Eingabe ---- */
textarea{width:100%;min-height:300px;max-height:70vh;resize:vertical;
  font-family:"IBM Plex Sans",sans-serif;font-size:14.5px;line-height:1.6;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
/* Platzhalter sind Vorschlaege, kein Inhalt. Ohne eigene Regel nimmt der
   Browser seinen Standardton, der hell zu dunkel und dunkel zu blass ist —
   dann liest sich ein Vorschlag wie ein bereits ausgefuelltes Feld.
   opacity:1 ist fuer Firefox noetig, das sonst zusaetzlich abblendet. */
textarea::placeholder,input::placeholder{color:var(--platzhalter);opacity:1}
.drop{border:2px dashed var(--line);border-radius:var(--radius);background:var(--surface);
  padding:44px 20px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop b{display:block;font-size:15px;margin-bottom:5px}
.drop span{font-size:13px;color:var(--ink-3)}
/* ---- PDF einlesen, damit niemand abtippen muss ---- */
.pdfrein{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px;
  font-size:12.4px;color:var(--ink-4)}
.pdfrein .zieh{color:var(--ink-4)}
.pdfrein button{padding:6px 13px;font-size:12.5px}

/* Auf den Dokumentseiten liegt die Datei schon auf der Festplatte. Deshalb ist
   dort das Öffnen der erste Weg und das Textfeld der zweite, nicht umgekehrt.
   Auf der Startseite bleibt es andersherum: dort hat man Text, keine Datei. */
.dropfeld{display:block;width:100%;text-align:center;cursor:pointer;
  border:1.5px dashed var(--line);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow);
  padding:30px 20px;margin:0 0 12px;
  font-family:inherit;font-weight:400;
  transition:border-color .15s,background .15s}
.dropfeld:hover{border-color:var(--accent);background:var(--accent-soft)}
.dropfeld b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.dropfeld span{display:block;font-size:13px;color:var(--ink-3);line-height:1.55}
.dropfeld .dropfein{margin-top:5px;font-size:12.2px;color:var(--ink-4)}
.odertext{margin:16px 0 8px;font-size:12.8px;color:var(--ink-4)}
.odertext ~ textarea{min-height:190px}
.pdfstatus{margin:0;font-size:12.6px;color:var(--accent);font-weight:500}
.pdfstatus[hidden]{display:none}
.pdfstatus.warn{color:var(--caution)}
textarea.zielt{border-color:var(--accent);border-style:dashed;background:var(--accent-soft)}
.bar{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
button{font-family:inherit;font-size:14px;font-weight:500;padding:10px 18px;
  border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);cursor:pointer;transition:background .13s,color .13s}
button:hover{background:var(--surface-2);color:var(--ink)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.primary:hover{filter:brightness(1.08);color:#fff}
:root[data-theme="dark"] button.primary{color:#0E1016}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) button.primary{color:#0E1016}}
.ghost{font-size:12.5px;padding:6px 11px;color:var(--ink-3)}
.spacer{flex:1}
.count{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
  color:var(--ink-4);font-variant-numeric:tabular-nums}

/* ---- Ergebnis ---- */
.result{margin-top:22px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 24px;text-align:center}
.result[hidden]{display:none}
.big{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:62px;font-weight:600;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;transition:color .3s}
.big small{font-size:22px;font-weight:400;color:var(--ink-4)}
.kopf{font-family:"IBM Plex Serif",Georgia,serif;font-size:19px;font-weight:600;
  margin:14px auto 0;max-width:36ch;line-height:1.3;text-wrap:balance}
.unter{margin:10px auto 0;color:var(--ink-3);font-size:13.5px;max-width:52ch}
.nogo{margin:18px auto 0;font-size:12.3px;color:var(--ink-4);max-width:56ch;
  padding-top:14px;border-top:1px solid var(--line-soft)}
.t-gut .big,.t-gut .kopf{color:var(--clean)}
.t-mittel .big,.t-mittel .kopf{color:var(--caution)}
.t-schlecht .big,.t-schlecht .kopf{color:var(--hit)}
.t-neutral .big{color:var(--ink-4)} .t-neutral .kopf{color:var(--ink-2)}

/* ---- Befunde ---- */
.sec-head{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);margin:28px 0 10px}
.karten{display:flex;flex-direction:column;gap:10px}
.karte{background:var(--surface);border:1px solid var(--line);border-left-width:3px;
  border-radius:var(--radius-sm);padding:14px 16px}
.karte.s-hoch{border-left-color:var(--hit)}
.karte.s-mittel{border-left-color:var(--caution)}
.karte.s-info{border-left-color:var(--accent)}
.karte.s-gut{border-left-color:var(--clean)}
.karte h3{margin:0 0 5px;font-size:14px;font-weight:600;line-height:1.35}
.karte p{margin:0;color:var(--ink-3);font-size:13px;line-height:1.55}
.karte .zitat{display:block;margin-top:8px;padding:8px 10px;background:var(--surface-2);
  border-radius:4px;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-2);
  word-break:break-word}
.leer{padding:26px 16px;text-align:center;color:var(--ink-4);font-size:13.5px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm)}

/* ---- Zeilenwerte ---- */
.zeile{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 16px;border-bottom:1px solid var(--line-soft);background:var(--surface)}
.zeile:first-of-type{border-radius:var(--radius-sm) var(--radius-sm) 0 0;border-top:1px solid var(--line)}
.zeile:last-of-type{border-radius:0 0 var(--radius-sm) var(--radius-sm);border-bottom:1px solid var(--line)}
.zeile .k{font-size:13.3px;color:var(--ink-2)}
.zeile .v{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;
  font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap}
.zeile .v b{color:var(--hit);font-weight:600}
.zeile .v i{color:var(--clean);font-style:normal}

/* ---- Markierter Text ---- */
.markbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 24px;max-height:none;overflow:auto;
  white-space:pre-wrap;word-break:break-word;font-size:14.5px;line-height:1.95}
mark{border-radius:3px;padding:1px 2px;background:transparent;color:inherit;cursor:help}
mark.m-hoch{background:color-mix(in srgb,var(--hit) 34%,transparent)}
mark.m-mittel{background:color-mix(in srgb,var(--caution) 32%,transparent)}
mark.m-gut{background:color-mix(in srgb,var(--clean) 28%,transparent)}
@supports not (color: color-mix(in srgb,red 50%,blue)){
  mark.m-hoch{background:var(--hit-soft)} mark.m-mittel{background:var(--caution-soft)}
  mark.m-gut{background:var(--clean-soft)}
}

/* ---- Kaufbereich ---- */
.kauf{margin-top:26px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px}
.kauf[hidden]{display:none}
.kauf h2{font-family:"IBM Plex Serif",Georgia,serif;font-size:17px;font-weight:600;
  margin:0 0 6px;line-height:1.3}
.kauf > p{margin:0 0 14px;color:var(--ink-3);font-size:13.3px;line-height:1.6;max-width:56ch}
.kauf ul{margin:0 0 16px;padding-left:18px;color:var(--ink-2);font-size:13.3px;line-height:1.75}
.kauf ul li::marker{color:var(--accent)}
.zustimmung{display:flex;gap:9px;align-items:flex-start;margin:0 0 14px;
  font-size:12.4px;line-height:1.5;color:var(--ink-3);cursor:pointer;max-width:60ch}
.zustimmung input{margin:2px 0 0;accent-color:var(--accent);width:15px;height:15px;flex:none}
.zustimmung a{color:var(--accent)}
.kaufbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.preis{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:15px;font-weight:600;
  color:var(--ink);font-variant-numeric:tabular-nums}
.kaufdyn{margin:0 0 14px;padding:10px 13px;background:var(--surface-2);
  border-radius:var(--radius-sm);font-size:13px;color:var(--ink-2);line-height:1.55;max-width:64ch}
.kaufdyn[hidden]{display:none}
.kaufstatus{margin:12px 0 0;font-size:12.8px;color:var(--ink-3);line-height:1.55}
.kaufstatus[hidden]{display:none}
.kauffelder{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.kauffelder[hidden]{display:none}
/* Gilt auch außerhalb eines Kaufblocks, etwa im Vertragsersteller. */
.kauffelder p.hint,p.hint{margin:0 0 12px;font-size:12.6px;color:var(--ink-3);
  line-height:1.6;max-width:74ch}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;align-items:end}
@media (max-width:560px){.felder{grid-template-columns:1fr}}
/* Eingabefelder bringen eine eigene Mindestbreite mit. Ohne min-width:0 wächst
   die Rasterspalte daran mit und die Seite lässt sich seitlich schieben. */
.felder label{display:block;font-size:11.5px;color:var(--ink-3);min-width:0}
.felder label > input,.felder label > select,.felder label > textarea{
  display:block;width:100%;min-width:0;margin-top:4px}
.felder input{font-family:inherit;font-size:13.5px;padding:8px 10px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm)}
.felder input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Auswahlfelder sehen im Vertragsersteller sonst wie Fremdkörper aus. */
.felder select{font-family:inherit;font-size:13.5px;padding:8px 10px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  appearance:none;-webkit-appearance:none;line-height:1.35;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-4) 50%),
    linear-gradient(135deg,var(--ink-4) 50%,transparent 50%);
  background-position:calc(100% - 15px) calc(50% + 1px),calc(100% - 10px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}
.felder select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.felder .weit{grid-column:1 / -1}
.felder textarea{grid-column:1 / -1;font-family:inherit;font-size:13.5px;padding:8px 10px;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-sm);min-height:auto;max-height:none;box-shadow:none;
  line-height:1.5;resize:vertical}
.felder textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* Zwischenüberschriften im Formular. Ohne sie ist die längere Liste unübersichtlich. */
.feldkopf{grid-column:1 / -1;margin:8px 0 0;font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-4)}
.feldkopf:first-child{margin-top:0}
/* „optional" steht jetzt in derselben Zeile wie die Beschriftung. Als kleine
   Marke statt als Fließtext, sonst liest es sich wie Teil der Beschriftung. */
.felder .opt{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  font-weight:400;font-size:10.5px;letter-spacing:0;line-height:1.5;color:var(--ink-4);
  background:var(--surface-2);vertical-align:1px;white-space:nowrap}

/* ---- Formulargruppen ----
   Ein Formular mit über zwanzig Feldern wirkt als eine Liste wie eine Wand.
   In Gruppen zerlegt sieht man auf einen Blick, wie weit man ist. */
.feldgruppe{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px 18px;margin-bottom:12px;
  box-shadow:var(--shadow)}
.feldgruppe > h3{display:flex;align-items:baseline;gap:8px;margin:0 0 12px;
  font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3)}
.feldgruppe > h3 .zahl{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:999px;background:var(--accent-soft);
  color:var(--accent);font-size:10.5px;letter-spacing:0;flex:0 0 auto}
.feldgruppe > h3 .dazu{margin-left:auto;font-weight:400;font-size:10.5px;
  letter-spacing:0;text-transform:none;color:var(--ink-4)}

/* ---- Leiste mit den Schaltflächen ----
   Bleibt am unteren Rand stehen, damit man in einem langen Formular nicht
   erst ans Ende scrollen muss, um den Vertrag zu erzeugen. */
.aktionsleiste{position:sticky;bottom:14px;z-index:5;display:flex;align-items:center;
  gap:10px;flex-wrap:wrap;margin-top:44px;padding:14px 16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 -2px 6px -4px rgba(19,22,29,.18),var(--shadow)}
.aktionsleiste .fuellt{flex:1 1 auto}
.aktionsleiste .stand{font-size:12px;color:var(--ink-4)}
@media (prefers-reduced-motion:reduce){.aktionsleiste{position:static}}

.hinweis{margin-top:22px;padding:16px 18px;border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--radius-sm);background:var(--surface)}
.hinweis h3{margin:0 0 8px;font-size:13px;font-weight:600}
.hinweis p{margin:0 0 8px;color:var(--ink-3);font-size:12.8px;line-height:1.6}
.hinweis p:last-child{margin-bottom:0}
.hinweis strong{color:var(--ink-2);font-weight:600}
footer{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--ink-4);font-size:11.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--ink-4);margin-left:14px}
footer a:hover{color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important}}

/* ---- Breiteres Layout: Kästen dürfen die volle Breite nutzen,
       Fließtext bleibt bei angenehmer Zeilenlänge ---- */
.karte p,.hinweis p,.leer{max-width:78ch}
.faq .antwort{max-width:74ch}
.markbox{max-height:min(70vh,760px)}
@media (min-width:900px){
  .result{padding:34px 30px}
  .big{font-size:70px}
  .karten{gap:11px}
}

/* ---- Ablagefläche über der ganzen Seite ---- */
.ablage{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(2px);
  pointer-events:none;animation:ablageAuf .12s ease-out}
@keyframes ablageAuf{from{opacity:0}to{opacity:1}}
.ablage-innen{border:2px dashed var(--accent);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow);padding:34px 46px;text-align:center}
.ablage-innen b{display:block;font-family:"IBM Plex Serif",Georgia,serif;font-size:19px;
  font-weight:600;color:var(--ink);margin-bottom:6px}
.ablage-innen span{font-size:13px;color:var(--ink-3)}
@supports not (backdrop-filter: blur(2px)){.ablage{background:var(--paper);opacity:.94}}

/* ---- Rückfrage, wenn das Dokument nicht zur Seite passt ---- */
.artfrage{margin-top:18px;padding:16px 18px;background:var(--surface);
  border:1px solid var(--caution);border-left-width:3px;border-radius:var(--radius-sm)}
.artfrage[hidden]{display:none}
.artfrage p{margin:0 0 12px;font-size:13.4px;line-height:1.6;color:var(--ink-2);max-width:66ch}
.artfrage p:last-child{margin-bottom:0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.artfrage b{color:var(--ink)}
.knopflink{display:inline-block;padding:9px 16px;border-radius:var(--radius-sm);
  background:var(--accent);color:#fff;text-decoration:none;font-size:13.5px;font-weight:600}
.knopflink:hover{filter:brightness(1.08)}
:root[data-theme="dark"] .knopflink{color:#0E1016}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .knopflink{color:#0E1016}}

/* ---- Der Kaufbereich soll auffallen, ohne aufdringlich zu sein ---- */
.kauf{border-color:var(--accent);border-width:1px;box-shadow:0 2px 4px rgba(46,90,172,.07),0 14px 34px -18px rgba(46,90,172,.35)}
.kauf h2{font-size:19px}
.vorschau{margin:0 0 16px;padding:0}
.vorschau img{display:block;width:100%;max-width:600px;height:auto;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--paper)}
.vorschau figcaption{margin-top:7px;font-size:12px;color:var(--ink-4)}
.sec-zwischen{margin:22px 0 10px !important}

/* ---- Mitlaufender Kaufhinweis ---- */
.kaufleiste{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:60;
  display:flex;align-items:center;gap:12px;max-width:min(94vw,720px);
  padding:11px 12px 11px 18px;background:var(--surface);border:1px solid var(--accent);
  border-radius:999px;box-shadow:0 4px 10px rgba(19,22,29,.09),0 18px 40px -16px rgba(46,90,172,.5);
  animation:kaufAuf .22s ease-out}
@keyframes kaufAuf{from{opacity:0;transform:translateX(-50%) translateY(10px)}
                   to{opacity:1;transform:translateX(-50%) translateY(0)}}
.kaufleiste .kl-text{font-size:13.2px;color:var(--ink);font-weight:500;line-height:1.35}
.kaufleiste .kl-go{padding:8px 16px;font-size:13px;border-radius:999px;flex:none}
.kaufleiste .kl-zu{border:none;background:transparent;color:var(--ink-4);font-size:18px;
  line-height:1;padding:4px 6px;flex:none;cursor:pointer}
.kaufleiste .kl-zu:hover{color:var(--ink-2);background:transparent}
@media (max-width:560px){
  .kaufleiste{left:12px;right:12px;transform:none;max-width:none;border-radius:var(--radius);
    padding:11px 12px}
  @keyframes kaufAuf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.kaufleiste{animation:none}}

/* ---- Was genau geliefert wird ---- */
.liefer{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;margin:0 0 16px}
.lief{background:var(--surface);padding:12px 15px}
.lief b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:3px}
.lief span{font-size:12.8px;color:var(--ink-3);line-height:1.55}
@media (min-width:700px){.liefer{grid-template-columns:1fr 1fr 1fr}}
.nichtdafuer{margin:0 0 14px;font-size:12.2px;color:var(--ink-4);line-height:1.55;max-width:66ch}
.kauf h2 .preis{font-size:inherit;font-family:inherit;color:var(--accent)}

/* ---- Begleittext für die E-Mail ---- */
.mailbox{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.mailbox[hidden]{display:none}
.mailbox label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--ink-3);margin-bottom:10px}
.mailbox input,.mailfeld{font-family:inherit;font-size:13.3px;padding:9px 11px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);width:100%}
.mailfeld{line-height:1.55;resize:vertical;min-height:150px}
.mailbox input:focus-visible,.mailfeld:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---- Paket für alle vier Schreiben ---- */
.paket{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;
  margin:14px 0 0;padding:13px 16px;background:var(--surface-2);
  border:1px dashed var(--line);border-radius:var(--radius-sm)}
.paket[hidden]{display:none}
.paket-text{flex:1 1 320px;min-width:0}
.paket-text b{display:block;font-size:13.4px;color:var(--ink);margin-bottom:3px}
.paket-text span{font-size:12.6px;color:var(--ink-3);line-height:1.55}
.paket button{flex:none;white-space:nowrap;background:var(--surface)}
.paket-hinweis{margin:12px 0 0;padding:11px 14px;background:var(--clean-soft);
  border:1px solid var(--clean);border-radius:var(--radius-sm);
  font-size:12.9px;line-height:1.6;color:var(--ink-2)}
.paket-hinweis[hidden]{display:none}
.paket-hinweis b{color:var(--ink)}
.paket-hinweis a{color:var(--accent);white-space:nowrap}

/* ---- Zusage und Kontakt im Kaufbereich ---- */
.zusage{margin:0 0 12px;padding:13px 16px;background:var(--clean-soft);
  border:1px solid var(--clean);border-radius:var(--radius-sm)}
.zusage p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2);max-width:64ch}
.zusage b{color:var(--ink)}
.zusage-mail{margin-top:8px !important;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12.5px}
.zusage-mail a{color:var(--clean);text-decoration:none;font-weight:600}
.zusage-mail a:hover{text-decoration:underline}


/* ---- Ratgeberseiten ----
   Eigene Seite je Frage. Sie beantworten eine Suchanfrage vollständig und
   führen am Ende zum passenden Werkzeug. Bewusst textlastig und ruhig. */
.ratgeber{max-width:720px}
.ratgeber h1{font-size:clamp(24px,3.6vw,32px);line-height:1.22;margin:0 0 14px}
.kurz{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);padding:16px 18px;margin:0 0 26px}
.kurz b{display:block;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:6px}
.kurz p{margin:0;font-size:15px;line-height:1.6;color:var(--ink)}
.ratgeber h2{font-size:18px;margin:30px 0 10px;font-weight:600}
.ratgeber h3{font-size:15px;margin:22px 0 8px;font-weight:600}
.ratgeber p{margin:0 0 13px;font-size:15px;line-height:1.68;color:var(--ink-2)}
.ratgeber ul,.ratgeber ol{margin:0 0 14px;padding-left:22px;color:var(--ink-2);
  font-size:15px;line-height:1.68}
.ratgeber li{margin-bottom:6px}
.ratgeber strong{color:var(--ink);font-weight:600}
.quelle{font-size:12.6px;color:var(--ink-4);margin:18px 0 0}
.werkzeugkarte{display:block;margin:30px 0;padding:20px 22px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  text-decoration:none;transition:border-color .15s,transform .15s}
.werkzeugkarte:hover{border-color:var(--accent);transform:translateY(-1px)}
.werkzeugkarte b{display:block;font-size:16px;color:var(--ink);margin-bottom:4px}
.werkzeugkarte span{display:block;font-size:13.4px;color:var(--ink-3);line-height:1.55}
.werkzeugkarte .frei{display:inline-block;margin-top:9px;font-size:12px;color:var(--accent);
  font-family:"IBM Plex Mono",ui-monospace,monospace}
/* ---- Ratgeber-Übersicht ---- */
.ratliste{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.rateintrag{display:block;padding:18px 20px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;
  box-shadow:var(--shadow);transition:border-color .16s ease,transform .16s ease}
.rateintrag:hover{border-color:var(--accent);transform:translateY(-2px)}
.rateintrag b{display:block;font-size:15.5px;font-weight:600;color:var(--ink);
  margin-bottom:6px;line-height:1.35}
.rateintrag span{display:block;font-size:13px;color:var(--ink-3);line-height:1.55}
@media (prefers-reduced-motion:reduce){.rateintrag{transition:none}
  .rateintrag:hover{transform:none}}

/* ---- Ratgeber: Pfad, Stand und Belege ---- */
.krume{padding:14px 0 0;font-size:12px;color:var(--ink-4)}
.krume a{color:var(--ink-3);text-decoration:none}
.krume a:hover{color:var(--accent);text-decoration:underline}
.krume span{margin:0 6px}
.ratgeber .stand{margin:-6px 0 16px;font-size:12px;color:var(--ink-4)}
/* Die Belege stehen sichtbar auf der Seite und nicht nur in den Daten.
   Wer eine Aussage nachlesen will, kommt in einem Klick zum Gesetzestext. */
.quellen{margin-top:32px;padding:16px 18px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm)}
.quellen h2{margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-4)}
.quellen p{margin:0 0 10px;font-size:12.4px;color:var(--ink-4)}
.quellen ul{margin:0;padding-left:18px;font-size:13.2px;line-height:1.7;color:var(--ink-3)}
.quellen li{margin-bottom:3px}
.quellen a{color:var(--accent);text-decoration:none}
.quellen a:hover{text-decoration:underline}

.weiterlesen{margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.weiterlesen h2{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-4);margin:0 0 10px}
.weiterlesen a{display:block;font-size:14px;color:var(--ink-2);text-decoration:none;
  padding:7px 0;border-bottom:1px solid var(--line-soft)}
.weiterlesen a:hover{color:var(--accent)}
.rathinweis{margin-top:26px;font-size:12.8px;color:var(--ink-4);line-height:1.6}

/* Verweis auf die andere Sprachfassung, direkt unter der Einleitung. */
.sprachwahl{margin:10px 0 0;font-size:13px}
.sprachwahl a{color:#2563eb;text-decoration:none;border-bottom:1px solid rgba(37,99,235,.35)}
.sprachwahl a:hover{border-bottom-color:currentColor}
@media (prefers-color-scheme:dark){.sprachwahl a{color:#8ab4ff;border-bottom-color:rgba(138,180,255,.35)}}

/* Blick in den eigenen Brief, noch vor dem Kauf.
   Kein Bild, sondern der echte Brief mit den echten Angaben. Was noch fehlt,
   steht grau als Luecke da, und die bezahlten Begruendungen bleiben zu. */
.kauffelder.vorab{display:block;margin-top:22px}
.feldkopf.gross{font-size:15px;font-weight:600;color:var(--ink);margin:0 0 4px}

.briefblick{margin:22px 0 4px}
.vs-kopf{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px}
.vs-blatt{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:6px;padding:26px 30px 0;font-size:12.5px;line-height:1.6;
  color:var(--ink-2);max-height:520px;overflow:hidden}
.vs-blatt p{margin:0 0 10px}
.vs-abs{font-size:11px;line-height:1.5;color:var(--ink-2);margin-bottom:20px}
.vs-empf{line-height:1.5;margin-bottom:24px;color:var(--ink)}
.vs-datum{text-align:right;margin-bottom:16px}
.vs-betreff{font-weight:600;color:var(--ink);margin-bottom:16px;white-space:pre-line}
.vs-leer{color:var(--ink-4);background:var(--surface-2);border-radius:3px;
  padding:0 5px;font-style:italic}
.vs-posten{list-style:none;margin:0 0 12px;padding:0}
.vs-posten li{margin:0 0 10px;padding-left:14px;border-left:2px solid var(--line)}
.vs-posten b{display:block;color:var(--ink);font-weight:600}
.vs-zu{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-4);
  background:repeating-linear-gradient(115deg,var(--surface-2),var(--surface-2) 7px,
    transparent 7px,transparent 14px);
  border-radius:3px;padding:3px 7px}
.vs-rest{font-size:11.5px;color:var(--ink-3);padding:10px 0 40px}
/* Der Bogen laeuft nach unten aus, damit klar ist: Das geht noch weiter. */
.vs-blatt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
  background:linear-gradient(to bottom,transparent,var(--surface));pointer-events:none}

@media (max-width:620px){
  .vs-blatt{padding:18px 18px 0;font-size:12px;max-height:420px}
}

/* Hinweis auf die eigene Sprache. Fest am unteren Rand, damit er nichts
   verschiebt und keinen Layout Shift erzeugt. Sitzt unter der Kaufleiste,
   falls beide gleichzeitig da sind, und weicht ihr nach oben aus. */
.sprachbar{position:fixed;left:50%;transform:translateX(-50%);bottom:16px;z-index:55;
  display:flex;align-items:center;gap:12px;max-width:min(94vw,560px);
  padding:10px 10px 10px 18px;background:var(--surface);
  border:1px solid var(--line);border-radius:999px;
  box-shadow:0 4px 10px rgba(19,22,29,.08),0 18px 40px -18px rgba(19,22,29,.4);
  animation:sbAuf .22s ease-out}
@keyframes sbAuf{from{opacity:0;transform:translateX(-50%) translateY(10px)}
                 to{opacity:1;transform:translateX(-50%) translateY(0)}}
.sprachbar .sb-text{font-size:13.2px;color:var(--ink-2);line-height:1.35}
.sprachbar .sb-go{flex:none;padding:7px 15px;font-size:13px;font-weight:600;
  border-radius:999px;background:var(--accent);color:#fff;text-decoration:none;
  white-space:nowrap}
.sprachbar .sb-go:hover{filter:brightness(1.08)}
.sprachbar .sb-zu{flex:none;border:none;background:transparent;color:var(--ink-4);
  font-size:18px;line-height:1;padding:4px 6px;cursor:pointer}
.sprachbar .sb-zu:hover{color:var(--ink-2)}
.sprachbar[dir="rtl"]{padding:10px 18px 10px 10px}

/* Ist die Kaufleiste da, rutscht der Sprachhinweis darueber. */
body:has(.kaufleiste) .sprachbar{bottom:78px}

@media (max-width:640px){
  .sprachbar{left:12px;right:12px;transform:none;max-width:none;
    border-radius:var(--radius);padding:10px 10px 10px 14px;gap:9px}
  @keyframes sbAuf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .sprachbar .sb-text{font-size:12.6px}
  .sprachbar .sb-go{padding:7px 12px;font-size:12.6px}
  body:has(.kaufleiste) .sprachbar{bottom:84px}
}
@media (prefers-reduced-motion:reduce){.sprachbar{animation:none}}

/* Nachschlagetabellen in den Ratgebern. Sie stehen dort, wo Leser suchen statt
   lesen, also vor allem bei der Notenskala im Arbeitszeugnis. Auf dem Telefon
   rollen sie waagerecht, statt die ganze Seite zu sprengen. */
.rollbar{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0}
.rollbar table{border-collapse:collapse;width:100%;min-width:420px;font-size:15px}
.rollbar th,.rollbar td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.rollbar th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;white-space:nowrap;color:var(--ink-2)}
.rollbar tbody tr:last-child td{border-bottom:none}
.rollbar td:last-child{white-space:nowrap;font-weight:600}

/* Musterbriefe in den Ratgebertexten */
pre.brief{white-space:pre-wrap;word-break:break-word;font-family:inherit;
  font-size:14px;line-height:1.6;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:10px;padding:20px 22px;margin:0 0 18px;color:var(--ink-2)}

/* Aufklapper für die freiwilligen Angaben */
details.mehr{margin:0 0 18px}
details.mehr>summary{cursor:pointer;padding:11px 14px;border:1px solid var(--line);
  border-radius:10px;background:var(--paper);font-weight:600;font-size:14px;
  list-style:none}
details.mehr>summary::-webkit-details-marker{display:none}
details.mehr>summary::before{content:"+ ";color:var(--accent)}
details.mehr[open]>summary::before{content:"– "}
details.mehr[open]>summary{margin-bottom:16px}
.extra-teil{margin-bottom:26px}
.extra-teil h3{font-size:17px;margin:0 0 8px}
.extra-hinweis{color:var(--ink-3);font-size:13px;margin:0 0 10px}
@media print{details.mehr,.kauf>ul,.kauf>p,.kauf>h2{display:none}}

/* ---- Teilen. Kein Zaehler, kein fremdes Skript, keine Meldung. ---------- */
.weitergeben{margin:28px 0;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--surface-2)}
.weitergeben>b{display:block;font-size:15px;color:var(--ink);margin:0 0 5px}
.weitergeben>p{margin:0 0 13px;font-size:13px;line-height:1.55;color:var(--ink-3)}
.wg-reihe{display:flex;flex-wrap:wrap;gap:8px}
.wg-knopf{display:inline-block;padding:9px 14px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-2);
  font:inherit;font-size:14px;font-weight:600;line-height:1.2;
  text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.wg-knopf:hover{border-color:var(--accent);color:var(--accent)}
.wg-haupt{background:var(--accent);border-color:var(--accent);color:#fff}
.wg-haupt:hover{color:#fff;border-color:var(--accent);opacity:.92}
.wg-sagt{display:block;margin-top:10px;font-size:13px;font-weight:600;
  color:var(--clean);min-height:18px}
@media print{.weitergeben{display:none}}

/* ---- Barrierefreiheit, nachgemessen mit axe-core gegen WCAG 2.1 AA. ------

   Links im Fliesstext waren nur an der Farbe zu erkennen, WCAG 1.4.1. Wer
   Farben nicht unterscheiden kann, sieht dort keinen Link. Deshalb eine
   Unterstreichung, und zwar nur im Text: in Navigation, Kacheln und Knoepfen
   traegt die Form schon die Unterscheidung. */
.rehber p a,.rehber li a,.ratgeber p a,.ratgeber li a,
.rehber blockquote a,.ratgeber blockquote a,
.quellen a,.krume a{text-decoration:underline;text-underline-offset:2px}

/* Ein Kasten, der seitwaerts rollt, muss mit der Tastatur erreichbar sein,
   sonst kommt man an die rechten Spalten nie, WCAG 2.1.1. Der Fokus muss
   dabei sichtbar sein, WCAG 2.4.7. */
.rollbar:focus-visible,.tabellenrahmen:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px;border-radius:var(--radius-sm)}

/* ---- Die Fusszeile trug sechs Verweise in einer Zeile, die nicht umbrach.
   Das waren bei 390 Pixeln Fensterbreite 408 Pixel Inhalt, und damit liess
   sich die ganze Seite auf dem Telefon seitwaerts schieben. Nachgemessen an
   window.scrollX, nicht geschaetzt: mit Umbruch bleibt es bei 0.
   Vorher hatte ich die Themenleiste oben verdaechtigt. Falsch, siehe
   patch-aufraeumen.py. ---------------------------------------------------- */
footer>span{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}

/* ---- B2-Briefpruefer. Alle Farben ueber die Variablen, damit hell, dunkel
   und der gemessene Kontrast von selbst stimmen. ------------------------- */
.feldhilfe{display:block;margin-top:5px;font-size:12.5px;line-height:1.5;
  color:var(--ink-3);font-weight:400}
.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.zweispalt{grid-template-columns:1fr}}

.b2lauf{display:block;margin-top:6px;font-size:13px;font-weight:600;
  color:var(--ink-3)}
.b2lauf.erreicht{color:var(--clean)}

.b2ergebnis{margin-top:24px}
.b2zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:10px;margin-bottom:22px}
.b2zahlen>div{padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--surface)}
.b2zahlen b{display:block;font-size:19px;line-height:1.2;color:var(--ink)}
.b2zahlen span{display:block;margin-top:3px;font-size:12px;color:var(--ink-3)}

.b2teil{margin-bottom:26px}
.b2teil h3{font-size:17px;margin:0 0 5px}
.b2unter{margin:0 0 12px;font-size:13.5px;line-height:1.55;color:var(--ink-3)}

.bfd{padding:11px 14px;margin-bottom:9px;border-radius:var(--radius-sm);
  border-inline-start:3px solid var(--line);background:var(--surface-2)}
.bfd b{display:block;font-size:14.5px;color:var(--ink)}
.bfd p{margin:5px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.bfd .beleg{margin-top:7px;font-size:13px;color:var(--ink-3);
  word-break:break-word}
.bfd.hit{border-inline-start-color:var(--hit);background:var(--hit-soft)}
.bfd.caution{border-inline-start-color:var(--caution);background:var(--caution-soft)}
.bfd.clean{border-inline-start-color:var(--clean);background:var(--clean-soft)}
.bfd.hit b{color:var(--hit)}
.bfd.caution b{color:var(--caution)}
.bfd.clean b{color:var(--clean)}
@media print{.aktionsleiste{display:none}}

/* ---- Hinweis auf ein Buch ----
   Steht nur auf den Seiten, die dieselbe Frage behandeln. Kein Kasten mit
   Rahmen in Signalfarbe: die Seite lebt davon, dass sie nichts aufdraengt. */
.buchtipp{border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius,12px);background:var(--surface);
  padding:16px 18px;margin:28px 0 0}
.buchtipp h2{margin:0 0 6px;font-size:1.05rem;line-height:1.35}
.buchtipp h2 a{color:var(--ink);text-decoration:none}
.buchtipp h2 a:hover{text-decoration:underline}
.buchtipp p{margin:0;color:var(--ink-2);line-height:1.6;font-size:.94rem}
.buchtipp-fuss{margin-top:10px !important;font-size:.9rem}
.buchtipp-fuss a{color:var(--accent)}

/* ---- Verwandte Beiträge ----
   Kein Kasten mit Rahmen. Der Block soll wie ein Teil des Textes wirken und
   nicht wie eine Anzeige. */
.verwandt{margin:34px 0 0;border-top:1px solid var(--line);padding-top:18px}
.verwandt h2{margin:0 0 10px;font-size:1.05rem}
.verwandtliste{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.verwandtliste li{line-height:1.5}
.verwandtliste a{font-weight:600}
.verwandtliste span{display:block;color:var(--ink-2);font-size:.92rem;
  margin-top:2px}
.verwandt .werkzeugzeile{margin:14px 0 0;font-size:.94rem;color:var(--ink-2)}

/* ---- Knöpfe unter einem Musterbrief ---- */
.briefknoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin:10px 0 0}
.briefstatus{font-size:.9rem;color:var(--ink-2)}

/* ---- Garagenmietvertrag: vier Felder und eine Vorschau ----
   Die Vorschau ist der Grund, warum man nach vier Feldern schon etwas sieht.
   Sie zeigt denselben Text wie das spätere PDF, damit auf dem Bildschirm
   nichts anderes steht als in der Datei. Die Klasse heißt nicht .vorschau,
   die gibt es hier schon für Bildvorschauen. */
.feldgruppe.schnell{margin-top:6px}
.feldgruppe.schnell .felder{display:grid;gap:12px}

#vorschauBox{margin:18px 0 0}
.vorschau-kopf{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:0 0 8px}
.vorschau-kopf h3{margin:0;font-size:1.02rem}
.vertragsvorschau{border:1px solid var(--line);border-radius:var(--radius,12px);
  background:var(--surface);color:var(--ink);padding:22px 24px;
  max-height:460px;overflow:auto;font-size:.94rem;line-height:1.6}
.vertragsvorschau .v-titel{font-weight:700;font-size:1.1rem;text-align:center;
  margin:0 0 18px;color:var(--ink)}
.vertragsvorschau .v-h{font-weight:700;margin:18px 0 4px;color:var(--ink)}
.vertragsvorschau .v-t{margin:0 0 10px;color:var(--ink-2)}
.vertragsvorschau .v-klein{color:var(--ink-3);font-size:.88rem;margin:0 0 6px}

details.alle{margin:20px 0 0;border-top:1px solid var(--line);padding-top:14px}
details.alle > summary{cursor:pointer;font-weight:600;color:var(--ink-2);
  padding:6px 0}
details.alle[open] > summary{margin-bottom:8px}

.kaufpreis{font-size:1.15rem;color:var(--ink);margin:14px 0 6px}
.kaufpreis b{font-size:1.5rem;letter-spacing:-.02em}

@media (max-width:640px){
  .vertragsvorschau{padding:16px 16px;max-height:340px}
}

/* ---- Bestellkasten ----
   § 312j Abs. 2 BGB verlangt, dass die wesentlichen Merkmale und der
   Gesamtpreis unmittelbar vor der Bestellung klar, verständlich und in
   hervorgehobener Weise dastehen. Genau dafür ist der Rahmen da, er ist
   keine Verzierung. */
.bestellkasten{border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius,12px);background:var(--surface);color:var(--ink);
  padding:20px 22px;margin:20px 0 0}
.bestellkasten h3{margin:0 0 12px;font-size:1.05rem}
.bestellzeilen{margin:0;display:grid;grid-template-columns:minmax(0,150px) 1fr;
  gap:8px 18px}
.bestellzeilen dt{color:var(--ink-3);font-size:.9rem;padding-top:2px}
.bestellzeilen dd{margin:0;color:var(--ink-2);line-height:1.55}
.preisgross{font-size:1.45rem;color:var(--ink);letter-spacing:-.02em}
.widerrufshinweis{margin:16px 0 0;padding:12px 14px;background:var(--surface-2);
  border-radius:var(--radius-sm,6px);color:var(--ink-2);font-size:.92rem;
  line-height:1.55}
.bestellkasten .primary{width:100%;margin-top:14px}
.bestellkasten .klein{color:var(--ink-3);font-size:.88rem;margin:10px 0 0}

@media (max-width:640px){
  .bestellzeilen{grid-template-columns:1fr;gap:2px 0}
  .bestellzeilen dt{padding-top:10px}
}

/* ---- Kleine Rechner in Ratgeberseiten ---- */
.rechner{border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius,12px);background:var(--surface);padding:16px 18px;margin:26px 0}
.rechner h2{margin:0 0 10px;font-size:1.1rem}
.rechner label{display:block;font-weight:600;margin:0 0 10px}
.rechner input[type=date]{display:block;margin-top:6px;font:inherit;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;background:transparent;color:inherit}
.rechner .ergebnis{margin:10px 0;line-height:1.6}
.rechner .klein{margin:8px 0 0;font-size:.88rem;color:var(--ink-3);line-height:1.5}
.hinweis-garage{border:1px solid var(--line);border-radius:var(--radius,12px);
  padding:10px 14px;margin:10px 0 14px;font-size:.95rem;color:var(--ink-2)}