/* ═══ v2 · dokumente.css — Dokumente (Mockup 76a) und Lesedokument (76b).
   Zeilen wie in MEHR: Symbolkachel · Titel · Unterzeile · Chevron. Nur Werte aus tokens.css. ═══ */

.dk-body{padding:0 var(--edge) var(--sp-7)}
.dk-eb{font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);text-transform:uppercase;
  color:var(--hl-text);margin:var(--sp-7) 0 var(--sp-1)}

.dk-row{display:flex;align-items:center;gap:var(--sp-4);width:100%;padding:var(--row-y) 0;border-bottom:1px solid var(--line);
  background:transparent;border-left:0;border-right:0;border-top:0;color:var(--ink);text-align:left;font:inherit;
  text-decoration:none}
.dk-ic{width:30px;height:30px;border-radius:10px;background:var(--field);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--muted)}
.dk-ic.hell{border-color:var(--hl);color:var(--hl-text)}
.dk-ic svg{width:15px;height:15px}
.dk-tx{flex:1;min-width:0}
.dk-tx b{display:block;font-size:var(--fs-row);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-tx i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-chev{width:16px;height:16px;color:var(--muted);flex-shrink:0}
.dk-pdf{margin-top:var(--sp-6);border-top:1px solid var(--line)}   /* Luft zwischen Stand und Speichern-Zeile */
.dk-pdf .dk-tx b{color:var(--hl-text)}
.dk-pdf .dk-chev{color:var(--hl-text)}

/* Lesedokument: Vorwort, Paragraphen-Ueberschrift, Text */
.dk-vor{font-size:var(--fs-body);line-height:1.6;color:var(--muted);margin-top:var(--sp-6);text-wrap:pretty}
.dk-para{font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);text-transform:uppercase;
  color:var(--hl-text);margin:var(--sp-7) 0 var(--sp-3)}
.dk-text{font-size:var(--fs-body);line-height:1.6;color:var(--ink);text-wrap:pretty}
.dk-liste{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:12px}
.dk-liste li{font-size:var(--fs-body);line-height:1.6;color:var(--ink);text-wrap:pretty}
.dk-liste li::marker{color:var(--muted);font-weight:700}
.dk-punkte{margin:12px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px;list-style:none}
.dk-punkte li{position:relative;font-size:var(--fs-body);line-height:1.6;color:var(--ink);text-wrap:pretty}
.dk-punkte li::before{content:"";position:absolute;left:-16px;top:8px;width:6px;height:6px;border-radius:99px;background:var(--hl)}
/* Absprache mit eigener Ueberschrift (Verhaltenskodex, Notfallplan) */
.dk-thema{padding:12px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.dk-thema b{font-size:var(--fs-row);font-weight:700;color:var(--ink)}
.dk-thema span{font-size:var(--fs-body);line-height:1.6;color:var(--muted);text-wrap:pretty}
/* Kontakt ohne Nummer zum Tippen */
.dk-z{padding:12px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.dk-z b{font-size:var(--fs-row);font-weight:700}
.dk-z span{font-size:var(--fs-sub);color:var(--muted)}
/* Kontaktzeile: Name, Zweck, Nummer in Vereinsgelb, Hoerer rechts — keine Kaesten.
   Kein Umbruch: die Texte sind kurz gehalten. Die Mail bekommt eine eigene, ruhige Zeile. */
.dk-kon{align-items:center;gap:12px}
.dk-kon .dk-tx{display:flex;flex-direction:column;gap:2px}
.dk-kon .dk-tx u{font-size:var(--fs-sub);font-weight:700;color:var(--hl-text);text-decoration:none;margin-top:2px}
.dk-mail{padding-top:8px;border-bottom:1px solid var(--line)}
.dk-mail .dk-tx b{font-size:var(--fs-sub);font-weight:700;color:var(--hl-text)}

/* Wertzeile in den Unterlagen (Antrag, SEPA) */
.dk-z2{display:flex;align-items:baseline;gap:var(--sp-4);padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.dk-z2 .lab{flex:1;min-width:0;font-size:var(--fs-body);color:var(--muted)}
.dk-z2 .wert{font-size:var(--fs-row);font-weight:700;text-align:right}
/* Stand eines Antrags */
.dk-stand{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5);font-size:var(--fs-sub);color:var(--muted)}
.dk-stand span{width:9px;height:9px;border-radius:99px;flex-shrink:0}
/* Unterschrift als Bild */
.dk-sig{margin-top:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-field);background:var(--field);
  height:104px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.dk-sig img{max-width:100%;max-height:100%}
.dk-sig-tx{font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-3)}

/* Zerstoerendes: stiller Textlink, nie ein angebotener Knopf. */
.dk-weg{display:block;width:100%;margin-top:var(--sp-8);background:transparent;border:0;padding:var(--sp-3) 0;
  font:700 var(--fs-sub)/1 var(--f);color:var(--bad);text-align:center}
.dk-eb.rot{color:var(--bad)}
.dk-ende{color:var(--bad)}

/* Die EINE grosse Zahl eines Dokuments (offener Betrag, Enddatum): gleiche Groesse wie in
   der Verwaltung, nur die Farbe unterscheidet — Gelb = Marke, Rot = Ende. */
.dk-gross,.dk-ende{font-size:var(--fs-zahl);font-weight:800;letter-spacing:-1.2px;line-height:1.1;
  color:var(--hl-text);margin-top:var(--sp-1)}
.dk-gross + .dk-text,.dk-ende + .dk-text{margin-top:var(--sp-4)}
.dk-text.leise,.dk-ende + .dk-text{color:var(--muted)}
.dk-text b{color:var(--ink);font-weight:700}

/* ── 94a: Personen-Kürzel am Symbol ──
   Dasselbe Muster wie der Spielberechtigungs-Punkt im Kader: das Zeichen sitzt am
   Symbol, nicht in einer eigenen Spalte — so zerfällt die Liste nicht in Blöcke. */
.dk-ic-wrap{position:relative;flex:0 0 auto;display:flex}
.dk-kuerzel{position:absolute;right:-4px;bottom:-4px;padding:1px 4px;border-radius:6px;
  background:var(--hl);border:2px solid var(--bg);color:var(--hl-ink);
  font-size:var(--fs-mini);font-weight:800;letter-spacing:.5px;line-height:1.3}
.dk-tx i b.hell{color:var(--hl-text);font-weight:700}
.dk-eb-r{margin-left:auto;color:var(--muted)}
.dk-eb{display:flex;align-items:baseline;gap:var(--sp-4)}

/* ── 95b: Mitgliedschaft als Karte ──
   Gelb markiert, worum es geht: Kartensymbol, Abschnittsüberschriften, Listensymbole,
   Betrag und Einzug. Inhalt bleibt weiß, Beiwerk grau, Ausstieg rot. */
.dk-kkopf{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-6) var(--edge) 0}
.dk-ktx{min-width:0}
.dk-ktx b{display:block;font-size:var(--fs-lead);font-weight:800;letter-spacing:-.45px;line-height:1.15;color:var(--ink)}
.dk-ktx i{display:flex;align-items:center;gap:var(--sp-2);font-style:normal;font-size:var(--fs-sub);
  color:var(--muted);padding-top:var(--sp-1)}
.dk-ic.gross{width:38px;height:38px;border-radius:12px}
.dk-ic.gross svg{width:19px;height:19px}
/* Gelbes Symbol: Umrandung und Zeichen in Vereinsgelb, Fläche unverändert. */
.dk-ic.hl{border-color:var(--hl);color:var(--hl-text)}

/* Geldkachel: Umrandung und Radius, KEIN eigener Hintergrund (Kachelregel). */
.dk-kachel{margin-top:var(--sp-5);border:1px solid var(--line);border-radius:16px;padding:var(--sp-4) var(--sp-5)}
.dk-betrag{display:flex;align-items:baseline;gap:var(--sp-3)}
.dk-betrag span{font-size:var(--fs-title);font-weight:800;letter-spacing:-.6px;color:var(--hl-text)}
.dk-betrag span.aus{color:var(--muted)}
.dk-betrag i{font-style:normal;font-size:var(--fs-sub);color:var(--muted)}
.dk-grund{font-size:var(--fs-sub);line-height:1.55;color:var(--muted);padding-top:var(--sp-3);text-wrap:pretty}
.dk-trenn{height:1px;background:var(--line);margin:var(--sp-4) 0}
.dk-kz{display:flex;align-items:center;gap:var(--sp-4);padding-bottom:var(--sp-3)}
.dk-kz:last-child{padding-bottom:0}
.dk-kz .lab{flex:1;min-width:0;font-size:var(--fs-body);color:var(--muted)}
.dk-kz .wert{font-size:var(--fs-row);font-weight:700;color:var(--ink);text-align:right}
.dk-kz .wert.hl{color:var(--hl-text)}

/* Listensymbole tragen Vereinsgelb — sie sagen, um welche Sache es geht. */
.dk-row .dk-ic{border-color:var(--hl);color:var(--hl-text)}

/* Stand-Punkt im Kartenkopf (95b) */
.dk-ktx i .bt-punkt{width:9px;height:9px;border-radius:99px;flex-shrink:0}
/* Zeilen in der Karte sitzen auf der Kante des Karteninhalts — .mb-z bringt --edge
   selbst mit, in der Karte ist es schon gesetzt. */
.bt-body .mb-z{padding-left:0;padding-right:0;margin-left:0;margin-right:0;width:100%}
/* Die Trennlinie endet nicht vor dem Rand — sie trennt die ganze Zeile. */
.bt-body .mb-z .who{flex:1;min-width:0}
/* Nach der letzten Zeile eines Abschnitts keine Linie: sie wuerde ins Leere zeigen. */
.bt-body .mb-z:last-of-type,
.bt-body .mb-z:has(+ .bt-eb2),
.bt-body .mb-z:has(+ .mb-link),
.bt-body .mb-z:has(+ .dk-kachel){border-bottom:0}
.bt-body .mb-eb2{padding-left:0;padding-right:0}
/* Zerstörendes braucht Abstand, damit es kein Versehen wird. */
.bt-body .mb-link.rot{margin-top:var(--sp-6);padding-bottom:var(--sp-6)}

.dk-row:last-of-type,
.dk-row:has(+ .dk-eb),
.dk-row:has(+ .dk-weg),
.dk-row:has(+ .dk-vor){border-bottom:0}