/* =====================================================================
   k.css · Zusatz für k.bauernschwoof.de (Klausurmaterial) auf fs-basis.css
   Nur seiteneigene Bausteine: Schritte, Modulbaum, gestempelte Papierseite,
   Regeln als Zahlen, Datei-Feld, Dateiliste. Farben nur aus der Basis:
   Tinte, Papier, Grau, Linie, Weidegrün (--ak) für Hover/Markierung.
   Kein Fell, kein Maul.
   ===================================================================== */
.k{--rot-fehler:#B00020}
/* fs-basis setzt „.fs button“ (Hintergrund none) stärker als „.knopf“ – Knöpfe hier ausdrücklich schwarz */
.fs button.knopf{background:var(--tinte);color:var(--papier);border:1px solid var(--tinte);padding:14px 22px;font-size:15px}
.fs button.knopf:hover{background:var(--ak);border-color:var(--ak)}
.fs button.knopf[disabled]{opacity:.6;cursor:progress}
.k .hilfe{font-size:14px;color:var(--grau);margin:0 0 14px;line-height:1.5}
.k .hilfe a{color:var(--tinte)}
.k .feld-fehler{font-size:14px;color:var(--rot-fehler);border-left:2px solid var(--rot-fehler);padding:2px 0 2px 10px;margin:8px 0 12px}
.k .feld-fehler[hidden]{display:none}
.k .lesen{margin-bottom:28px}
.k .lesen a{border-bottom:2px solid var(--ak)}
.k h2{font-weight:600}

/* ---------- zwei Spalten: links Formular/Liste, rechts Papierseite ---------- */
.k-zwei{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,5vw,80px);align-items:start}

/* ---------- Schritte ---------- */
.schritt{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 16px;border-top:1px solid var(--tinte);padding:20px 0 34px;margin:0}
.schritt-nr{font-size:44px;font-weight:300;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.schritt h2{margin:0 0 4px;font-size:22px;line-height:1.25;letter-spacing:-.01em}
.schritt h2 label{cursor:pointer}
.k-absenden{margin:26px 0 12px}

/* Eingaben: nur Unterstrich, groß */
.k-gross,.k-felder input,.k-felder select,.k-filter input{font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--tinte);border-radius:0;width:100%;padding:8px 0}
.k-gross{font-size:22px;letter-spacing:-.01em}
.k-gross::placeholder,.k-filter input::placeholder{color:#8a8a8a}
.k-gross:focus,.k-felder input:focus,.k-felder select:focus,.k-filter input:focus{outline:2px solid var(--ak);outline-offset:2px}
.k-gross[aria-invalid="true"],.k-felder [aria-invalid="true"]{border-bottom:2px solid var(--rot-fehler)}
.k-felder{display:grid;gap:6px}
.k-felder > label{font-size:14px;color:var(--grau);margin-top:12px}
.k-felder select,.k-felder input{font-size:18px}
.nachgereicht{display:grid;gap:6px}
.nachgereicht[data-versteckt]{display:none}
.k-filter{display:block;margin:6px 0 14px}
.k-filter input{font-size:16px}
.k-filter input::-webkit-search-cancel-button{cursor:pointer}

/* ---------- Modulbaum ---------- */
.sgbaum{border-bottom:1px solid var(--linie)}
.sgbaum details[hidden]{display:none}
.sgbaum summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:10px;padding:12px 0 8px}
.sgbaum summary::-webkit-details-marker{display:none}
.sgbaum summary::before{content:"+";flex:0 0 14px;font-weight:400;color:var(--grau)}
.sgbaum details[open] > summary::before{content:"–"}
.sgbaum summary:hover .sg-name,.sgbaum summary:hover > span:first-of-type{color:var(--ak)}
.sg + .sg{border-top:1px solid var(--linie)}
.sg > summary{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.sg-zusatz{letter-spacing:0;text-transform:none;font-weight:400;color:var(--grau);font-size:13px}
.sg-zahl{margin-left:auto;font-size:12px;letter-spacing:0;text-transform:none;font-weight:400;color:var(--grau);white-space:nowrap}
.sg-gewaehlt{font-size:12px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--ak);white-space:nowrap}
.sg-gewaehlt[hidden]{display:none}
.sg-inhalt{padding:0 0 12px 24px}
.gr > summary{font-size:15px;font-weight:500;padding:8px 0 6px}
.gr{border-top:1px solid var(--linie)}
.gr:first-child{border-top:0}
.ug{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--grau);margin:12px 0 2px}
.ug[hidden]{display:none}
.auswahl{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.auswahl[hidden],.auswahl li[hidden]{display:none}
.auswahl label{display:flex;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--linie);font-size:15px;cursor:pointer;line-height:1.35}
.auswahl input{appearance:none;-webkit-appearance:none;flex:0 0 15px;width:15px;height:15px;margin:0;border:1.5px solid var(--tinte);background:var(--papier);position:relative;top:2px;cursor:pointer;border-radius:0}
.auswahl input:checked{background:var(--tinte);box-shadow:inset 0 0 0 2px var(--papier)}
.auswahl label:hover .name{color:var(--ak)}
.auswahl .name{min-width:0}
.auswahl .bestand{margin-left:auto;padding-left:8px;font-size:12px;color:var(--grau);white-space:nowrap;font-variant-numeric:tabular-nums}
.auswahl li.leer label{color:var(--grau);cursor:default}
.auswahl li.leer input{border-color:var(--linie);cursor:default}
.auswahl li.leer label:hover .name{color:var(--grau)}
.zaehler{font-size:13px;margin:12px 0 0}
.zaehler b{font-variant-numeric:tabular-nums;font-weight:700}
.zaehler.voll b{color:var(--ak)}
.zaehler.zuviel{color:var(--rot-fehler)}
.zaehler.zuviel b{color:var(--rot-fehler)}
.keine-treffer{margin-top:12px}

/* ---------- Papierseite mit Stempel ---------- */
.vorschau{position:sticky;top:36px;margin:0}
.blatt{position:relative;aspect-ratio:1/1.414;background:var(--papier);border:1px solid var(--linie);box-shadow:0 30px 60px -30px rgba(0,0,0,.25);overflow:hidden;padding:9% 10%;transform:rotate(-1.2deg);transition:transform 1.2s var(--weich)}
.vorschau:hover .blatt{transform:rotate(-.4deg)}
.blatt .zl{display:block;height:7px;background:#e7e7e7;margin:0 0 11px}
.blatt .zl.k{width:62%}
.blatt .zl.h{height:12px;width:48%;background:#d4d4d4;margin-bottom:22px}
/* Winkel wie auf dem PDF: entlang der Diagonale (A4: atan(297/210) ≈ 54,7°), 16 % Schwarz, über dem Inhalt */
.stempel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-54.7deg);white-space:pre;font-size:clamp(12px,1.35vw,21px);font-weight:600;color:rgba(0,0,0,.16);letter-spacing:.01em;line-height:1;pointer-events:none}
.unterschrift{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:18px 0 0;font-size:13px;color:var(--grau)}
.vorschau.klein{max-width:360px;justify-self:end;width:100%}

/* ---------- Regeln als große Zahlen ---------- */
.k-zahlen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--tinte);margin:88px 0 0}
.k-zahlen div{padding:18px 18px 0 0}
.k-zahlen b{display:block;font-size:clamp(30px,3vw,44px);font-weight:300;letter-spacing:-.03em;line-height:1.1;white-space:nowrap}
.k-zahlen span{display:block;font-size:14px;color:var(--grau);margin-top:6px;line-height:1.4}

/* ---------- So funktioniert es, Listen ---------- */
.k-so{margin-top:96px;max-width:900px;scroll-margin-top:24px}
.k-tab{grid-template-columns:11em minmax(0,1fr)}
.k-tab dd{font-size:16px}
.k-tab.schmal{max-width:560px}
.k-so .pfeil{display:inline-block;margin-top:6px}
.k-liste{list-style:none;margin:0 0 24px;padding:0;border-top:1px solid var(--tinte)}
.k-liste li{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--linie);font-size:16px}
.k-liste li > a{display:flex;justify-content:space-between;gap:16px;align-items:baseline;width:100%}
.k-liste .meta{white-space:nowrap}
.k-liste.dateien{border-top:0}
.k-modul{margin:0 0 44px}
.k-modul .kl{border-top:1px solid var(--tinte);padding-top:12px}
.k-modul .kl2{color:var(--grau);margin:18px 0 0;padding-bottom:6px;border-bottom:1px solid var(--linie)}
.k-kopfzeile{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 40px;font-size:15px}
.k-oeffnen{margin:28px 0 16px}
.k-aktionen{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;margin:28px 0 0}
.k-schritte{list-style:none;margin:0 0 24px;padding:0}
.k-schritte li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:baseline;padding:14px 0;border-top:1px solid var(--linie);font-size:16px}
.k-schritte li:first-child{border-top-color:var(--tinte)}
.k-schritte b{font-size:30px;font-weight:300;letter-spacing:-.03em;line-height:1}
.k-schritte.breit{max-width:720px;margin-top:8px}
.k-danach{position:sticky;top:36px}

/* ---------- Art wählen: zwei Felder ---------- */
.k-wahl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.k-wahl label{position:relative;display:grid;gap:4px;border:1px solid var(--tinte);padding:16px 18px 14px;cursor:pointer;transition:border-color .3s,box-shadow .3s}
.k-wahl input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.k-wahl .w-name{font-size:18px;font-weight:500;padding-left:24px;position:relative}
.k-wahl .w-name::before{content:"";position:absolute;left:0;top:.28em;width:13px;height:13px;border:1.5px solid var(--tinte);border-radius:50%}
.k-wahl .w-credits{font-size:14px;color:var(--grau);padding-left:24px}
.k-wahl .w-credits b{font-size:24px;font-weight:300;color:var(--tinte);letter-spacing:-.02em}
.k-wahl label:hover{border-color:var(--ak)}
.k-wahl label:has(input:checked){border-color:var(--ak);box-shadow:inset 0 0 0 1px var(--ak)}
.k-wahl label:has(input:checked) .w-name::before{background:var(--ak);border-color:var(--ak);box-shadow:inset 0 0 0 2px var(--papier)}
.k-wahl label:has(input:focus-visible){outline:2px solid var(--ak);outline-offset:3px}
.k-wahl[aria-invalid="true"] label{border-color:var(--rot-fehler)}

/* ---------- Datei-Feld, groß ---------- */
.k-datei{position:relative;display:grid;place-content:center;gap:6px;text-align:center;min-height:170px;border:1px solid var(--tinte);padding:28px 20px;margin-top:10px;cursor:pointer;transition:border-color .3s,background .3s}
.k-datei input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.k-datei .d-titel{font-size:21px;letter-spacing:-.01em;background:linear-gradient(var(--ak),var(--ak)) 0 100%/0 2px no-repeat;transition:background-size .5s var(--weich);justify-self:center}
.k-datei .d-meta{font-size:13px;color:var(--grau)}
.k-datei:hover,.k-datei.ueber{border-color:var(--ak)}
.k-datei:hover .d-titel,.k-datei.ueber .d-titel{background-size:100% 2px}
.k-datei:focus-within{outline:2px solid var(--ak);outline-offset:3px}
.k-datei.gewaehlt{border-color:var(--ak);box-shadow:inset 0 0 0 1px var(--ak)}
.k-datei.fehlt{border-color:var(--rot-fehler)}
.k-datei ~ .hilfe{margin-top:14px}

/* ---------- Kontaktformular ---------- */
.k-vorab{font-size:16px;margin:-6px 0 34px;max-width:40em}
.k-wahl.themen label{padding:14px 16px 12px}
.k-wahl.themen .w-name{font-size:16px;line-height:1.3}
.k-wahl .w-text{font-size:13px;color:var(--grau);padding-left:24px;line-height:1.4}
.k-text{display:block;font:inherit;font-size:17px;line-height:1.5;color:inherit;background:transparent;width:100%;min-height:200px;border:1px solid var(--tinte);border-radius:0;padding:12px 14px;resize:vertical;margin-top:6px}
.k-text:focus{outline:2px solid var(--ak);outline-offset:2px}
.k-text[aria-invalid="true"]{border-color:var(--rot-fehler);box-shadow:inset 0 0 0 1px var(--rot-fehler)}
.k-zeichen{display:block;text-align:right;font-size:12px;color:var(--grau);margin-top:4px;font-variant-numeric:tabular-nums}
.k-frei{font-size:12px;color:var(--grau);font-weight:400;margin-left:4px}
.k-felder .hilfe{margin:4px 0 0}
.k-haken,.k-felder > label.k-haken{display:flex;gap:10px;align-items:baseline;font-size:15px;color:var(--tinte);margin-top:22px;cursor:pointer;line-height:1.45}
.k-haken input{appearance:none;-webkit-appearance:none;flex:0 0 15px;width:15px;height:15px;margin:0;border:1.5px solid var(--tinte);background:var(--papier);position:relative;top:2px;cursor:pointer;border-radius:0}
.k-haken input:checked{background:var(--tinte);box-shadow:inset 0 0 0 2px var(--papier)}
.k-haken input:focus-visible{outline:2px solid var(--ak);outline-offset:2px}
.k-haken.fehlt input{border-color:var(--rot-fehler)}
.k .fuss-mail{color:var(--grau)}
.k .fuss-mail a{color:inherit}

/* ---------- Fuß ---------- */
.k .fuss{margin-top:110px}
.k .fuss-links{display:flex;flex-wrap:wrap;gap:4px 6px}

/* ---------- Handy ---------- */
@media (max-width:1100px){
  .k-zahlen{grid-template-columns:repeat(3,minmax(0,1fr))}
  .k-zahlen div{padding-bottom:18px}
}
@media (max-width:860px){
  .k-zwei{grid-template-columns:1fr;gap:48px}
  .vorschau,.k-danach{position:relative;top:0}
  .vorschau{max-width:300px}
  .vorschau.klein{justify-self:start;max-width:260px}
  .schritt{grid-template-columns:40px minmax(0,1fr);gap:0 10px}
  .schritt-nr{font-size:36px}
  .auswahl{grid-template-columns:1fr}
  .sg-inhalt{padding-left:0}
  .k-zahlen{grid-template-columns:1fr 1fr;margin-top:64px}
  .k-tab{grid-template-columns:1fr}
  .k-tab dt{border-bottom:0;padding-bottom:0;font-size:13px}
  .k-wahl{grid-template-columns:1fr}
  .k-gross{font-size:19px}
  .k-so{margin-top:72px}
  .k .fuss{margin-top:80px}
  .leiste.offen .innen .oben .kuh{display:none}   /* Kuh steht schon in der Kopfzeile */
}

/* ---------- Barrierefrei: eigene Bewegungen und Drehungen aus ---------- */
body.a11y .blatt,body.a11y .vorschau:hover .blatt{transform:none;box-shadow:none;border-color:var(--tinte)}
body.a11y .stempel{color:rgba(0,0,0,.4)}
body.a11y .auswahl input,body.a11y .k-wahl .w-name::before{border-width:2px}
body.a11y .hilfe,body.a11y .unterschrift,body.a11y .k-zahlen span{color:var(--grau)}
body.a11y .k-datei .d-titel{background-size:100% 1px}
@media (prefers-reduced-motion:reduce){.blatt,.vorschau:hover .blatt{transition:none;transform:rotate(-1.2deg)}}