/* Einheitliche Kopfzeile und Icon-Grundregeln.
 *
 * Alle Icons sind Strichzeichnungen in currentColor — sie nehmen die Farbe
 * ihrer Umgebung an und bringen keine eigene mit. Damit bleibt die Palette
 * geschlossen: Tafelgrün, Papier, Amber, Rot. Sonst nichts.
 */

/* Nichts im Kopf darf die Seite seitlich scrollen lassen. `clip` schneidet
   nur den Überstand ab, ohne wie `hidden` einen Scrollbereich zu erzeugen. */
.seitenkopf, .dokkopf { overflow-x:clip; }

.ico { display:block; flex:none; }
.ico-inline { display:inline-block; vertical-align:-3px; }

/* ---------- Wortmarke ---------- */
.wortmarke { display:flex; align-items:center; gap:10px; text-decoration:none;
  flex:none; }
.wortmarke svg { border-radius:11px; display:block; }
.wortmarke-text { font-family:"Segoe Script","Segoe Print","Bradley Hand",cursive;
  font-size:21px; font-weight:700; color:var(--green-dark); letter-spacing:.01em; }
.wortmarke:hover .wortmarke-text { color:var(--green); }
.wortmarke:focus-visible { outline:2px solid var(--amber); outline-offset:3px;
  border-radius:12px; }

/* ---------- Heller Seitenkopf ---------- */
.seitenkopf { border-bottom:1px solid var(--line); background:var(--card);
  margin-bottom:22px; }
.sk-innen { max-width:1080px; margin:0 auto; padding:13px 16px;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.sk-mitte { flex:1; min-width:170px; }
.sk-zurueck { display:inline-flex; align-items:center; gap:5px; font-size:12px;
  color:var(--muted); text-decoration:none; margin-bottom:2px; }
.sk-zurueck:hover { color:var(--green); }
.sk-titel { font-size:19px; font-weight:700; margin:0; color:var(--green-dark);
  line-height:1.25; }
.sk-unter { font-size:12.5px; color:var(--muted); margin:2px 0 0; }

.sk-werkzeuge { display:flex; align-items:center; gap:6px; flex:none; }
.sk-knopf { display:inline-flex; align-items:center; gap:7px; padding:8px 12px;
  border:1px solid var(--line); border-radius:9px; background:transparent;
  color:var(--muted); text-decoration:none; font-size:13px; font-weight:600; }
.sk-knopf:hover { border-color:var(--green); color:var(--green);
  background:#f4f9f6; }
.sk-knopf:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }
.sk-kuerzel { width:36px; height:36px; border-radius:50%; flex:none;
  background:var(--green); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:13px; font-weight:700; letter-spacing:.02em; }

@media (max-width:720px) {
  .sk-knopf span { display:none; }
  .sk-knopf { padding:9px; }
}

/* Auf schmalen Schirmen ein Raster statt Flex: Marke und Werkzeuge oben,
   der Titel in einer eigenen Zeile darunter. Flex mit Umbruch und
   `margin-left:auto` verschob die Marke unberechenbar an den rechten Rand. */
@media (max-width:560px) {
  .sk-innen {
    display:grid; gap:9px 12px; align-items:center;
    /* `auto` ergab hier 0px: Das Titelfeld überspannt beide Spalten und trägt
       deshalb nichts zur Breitenberechnung bei. `max-content` misst am Logo. */
    grid-template-columns:max-content 1fr;
  }
  .wortmarke-text { display:none; }
  .wortmarke { grid-column:1; grid-row:1; justify-self:start; }
  .sk-werkzeuge { grid-column:2; grid-row:1; justify-self:end; }
  .sk-mitte { grid-column:1 / -1; grid-row:2; min-width:0; }
  .sk-titel { font-size:17px; }
}

/* ---------- Dunkler Dokumentkopf ---------- */
.dokkopf { background:linear-gradient(180deg,#2f6b52,#1f4636); color:var(--chalk);
  border-bottom:4px solid var(--amber); margin:0 0 28px; padding:16px 0 26px; }
.dk-innen { max-width:1080px; margin:0 auto; padding:0 16px; }
.dk-leiste { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:18px; }
.dk-leiste .wortmarke-text { color:var(--chalk); }
.dk-leiste .wortmarke:hover .wortmarke-text { color:var(--amber); }
.dk-leiste .wortmarke svg rect { fill:rgba(244,239,230,.14); }
.dk-leiste .wortmarke svg text { fill:var(--chalk); }
.dk-zurueck { display:inline-flex; align-items:center; gap:5px; font-size:12.5px;
  color:rgba(244,239,230,.8); text-decoration:none; padding:5px 10px;
  border:1px solid rgba(244,239,230,.26); border-radius:8px; }
.dk-zurueck:hover { color:var(--chalk); border-color:rgba(244,239,230,.55); }
.dk-eyebrow { font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); font-weight:800; flex:1; min-width:110px; }
.dk-werkzeuge { display:flex; gap:6px; }
.dk-knopf { display:inline-flex; padding:8px; border-radius:8px;
  border:1px solid rgba(244,239,230,.26); color:rgba(244,239,230,.85); }
.dk-knopf:hover { background:rgba(244,239,230,.14); color:var(--chalk); }
.dk-knopf:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }

.dk-titel { font-family:Georgia,"Iowan Old Style",serif; font-weight:400;
  font-size:clamp(25px,4.4vw,38px); margin:0 0 9px; line-height:1.14;
  text-wrap:balance; }
.dk-unter { font-size:15px; opacity:.87; margin:0; max-width:64ch; }

@media print {
  .seitenkopf { border-bottom:2pt solid #000; background:#fff; }
  .sk-werkzeuge, .dk-werkzeuge, .sk-zurueck, .dk-zurueck { display:none; }
  .dokkopf { background:#fff; color:#000; border-bottom:2pt solid #000; }
  .dk-titel, .dk-unter, .dk-eyebrow { color:#000; }
  .dk-leiste .wortmarke svg rect { fill:#1f4636; }
}

/* Werkzeugleiste im Dokumentkopf */
.dk-werkzeugleiste { display:flex; gap:9px; flex-wrap:wrap; margin-top:18px; }
.dk-werkzeugleiste .btn {
  background:rgba(244,239,230,.14); color:var(--chalk);
  border:1px solid rgba(244,239,230,.3); box-shadow:none;
  display:inline-flex; align-items:center; gap:7px;
}
.dk-werkzeugleiste .btn:hover { background:rgba(244,239,230,.26); }
.dok-zahlen { display:grid; gap:1px; margin-top:20px;
  background:rgba(244,239,230,.16); border:1px solid rgba(244,239,230,.16);
  border-radius:10px; overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); }
.dok-zahl { background:#1f4636; padding:12px 14px; }
.dok-zahl b { font-family:Georgia,serif; font-size:24px; line-height:1; display:block;
  font-variant-numeric:tabular-nums; font-weight:400; }
.dok-zahl span { font-size:10.5px; opacity:.74; display:block; margin-top:4px; }
/* Rückmeldung nach einer Aktion im Dokumentkopf — nie im Ausdruck. */
.dk-meldung { margin:14px 0 0; padding:9px 13px; border-radius:8px;
  background:rgba(244,239,230,.16); border:1px solid rgba(244,239,230,.28);
  font-size:14px; max-width:64ch; }
@media print { .dk-werkzeugleiste, .dk-meldung, .nodruck { display:none !important; }
  .dok-zahlen { background:none; border-color:#999; }
  .dok-zahl { background:#fff; color:#000; } }