/* Stil der WBK-Ausfuellhilfe.
 *
 * ERZEUGT von scripts/wbk-ausfuellhilfe-bauen.mjs — nicht von Hand aendern.
 *
 * Eigene Datei neben style.css, weil das Druck-Stylesheet des Begleitschreibens
 * nur fuer diese Seitenfamilie gilt. Die Farb- und Abstandsmarken kommen aus
 * style.css; hier steht nichts, was dort schon steht.
 */

/* --- Tabellen: waagerecht scrollbar statt umgebrochen ------------------- */
/* Satzspiegel der Prosa. Ohne Mass lief sie bis 166 Zeichen je Zeile
   (nachgemessen 23.09.2026, 1280 px) — Optimum 45–75, WCAG 1.4.8 deckelt bei
   80. Tabellen, Kacheln und das Werkzeug behalten die volle Schale; begrenzt
   wird nur, was am Stueck gelesen wird. rem statt ch: ch ist die Breite
   der Ziffer „0" und damit rund 40 % zu grosszuegig. */
.support-page > .shell > p,
.support-page > .shell > .wbk-drei p,
.support-page > .shell > ul,
.support-page > .shell > ol { max-width: 34rem; }

.wbk-tabelle {
  margin: var(--sp-3) 0 var(--sp-5);
  overflow-x: auto;
  border: 1px solid var(--steel-line);
  border-radius: var(--radius-sm);
  background: rgba(19, 24, 18, 0.6);
}
.wbk-tabelle table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 640px; }
.wbk-tabelle th,
.wbk-tabelle td {
  padding: 12px var(--sp-2);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--steel-line-soft);
  color: var(--ink-soft);
}
.wbk-tabelle tbody tr:last-child th,
.wbk-tabelle tbody tr:last-child td { border-bottom: 0; }
.wbk-tabelle thead th {
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--brass);
  border-bottom-color: var(--steel-line);
  white-space: nowrap;
}
.wbk-tabelle tbody th { color: var(--ink); font-weight: 600; min-width: 11ch; }

/* Telefon: keine seitlich scrollende Tabelle (am 23.09.2026 lief die Spalte
   „Wofuer sie steht" aus dem Bild), sondern je Zeile eine Karte; die
   Spaltenueberschrift steht als Etikett ueber der Zelle (data-label). */
@media (max-width: 640px) {
  .wbk-tabelle { overflow-x: visible; border: 0; background: none; }
  .wbk-tabelle table { min-width: 0; }
  .wbk-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wbk-tabelle tr {
    display: block;
    border: 1px solid var(--steel-line);
    border-radius: var(--radius-sm);
    background: rgba(19, 24, 18, 0.6);
    margin: 0 0 var(--sp-2);
    padding: 4px var(--sp-2);
  }
  .wbk-tabelle th, .wbk-tabelle td { display: block; padding: 8px 0; border-bottom: 1px solid var(--steel-line-soft); }
  .wbk-tabelle tr > :last-child { border-bottom: 0; }
  .wbk-tabelle tbody th { min-width: 0; }
  .wbk-tabelle td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-display);
    font-stretch: 87.5%;
    font-size: 0.78rem;
    color: var(--brass);
    margin-bottom: 2px;
  }
}

/* Ein Abschnittskopf, der auf einen Absatz folgt, braucht Luft nach oben. */
.wbk-druckbrief .section-head:not(:first-child) { margin-top: var(--sp-6); }

/* --- Sichtbare Quellenangabe -------------------------------------------- */
.wbk-quelle {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--ink-mute);
  text-decoration: none;
  border-bottom: 1px dotted var(--steel-line);
  overflow-wrap: anywhere;
}
.wbk-quelle:hover { color: var(--brass); border-bottom-color: var(--brass-hair); }
.wbk-quelle span { opacity: 0.8; }
.wbk-klein { font-size: 0.8rem; color: var(--ink-mute); }
.wbk-leer { color: var(--ink-mute); font-style: italic; }

/* --- Die drei Fragen ----------------------------------------------------- */
.wbk-drei {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-5);
}
.wbk-drei > div {
  padding: var(--sp-3);
  border: 1px solid var(--steel-line);
  border-radius: var(--radius-sm);
  background: rgba(19, 24, 18, 0.6);
}
.wbk-drei p { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }
.wbk-drei__frage {
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 600;
  color: var(--brass) !important;
  margin-bottom: var(--sp-1) !important;
}

/* --- Wegweiser ----------------------------------------------------------- */
.wbk-wegweiser { margin-bottom: var(--sp-5); }
.wbk-frage {
  border: 1px solid var(--steel-line);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2);
  background: rgba(19, 24, 18, 0.6);
}
.wbk-frage > summary {
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 600;
  color: var(--ink);
}
.wbk-antworten { list-style: none; margin: 0; padding: 0 var(--sp-3) var(--sp-3); }
.wbk-antworten li { padding: 10px 0; border-top: 1px solid var(--steel-line-soft); }
.wbk-antworten a { color: var(--brass-bright); text-decoration: none; font-weight: 600; }
.wbk-antworten a:hover { text-decoration: underline; }
.wbk-antworten span { display: block; color: var(--ink-mute); font-size: 0.85rem; margin-top: 3px; }

/* --- Checkliste ---------------------------------------------------------- */
.wbk-liste { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.wbk-punkt {
  padding: var(--sp-3);
  border: 1px solid var(--steel-line);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-2);
  background: rgba(19, 24, 18, 0.6);
}
.wbk-punkt label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.wbk-punkt input[type="checkbox"] { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brass); flex: none; }
.wbk-punkt__name { font-family: var(--font-display); font-stretch: 87.5%; font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.wbk-punkt p { margin: 8px 0 0; font-size: 0.92rem; color: var(--ink-soft); }
.wbk-punkt__beleg { color: var(--ink-mute) !important; font-size: 0.82rem !important; }
.wbk-punkt__achtung {
  border-left: 2px solid var(--brass-hair);
  padding-left: 12px;
  color: var(--ink-soft) !important;
}
.wbk-punkt__quelle { margin-top: 8px !important; }

.wbk-spanne {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 600;
  margin-right: 6px;
  vertical-align: 1px;
}
.wbk-spanne--alle { background: rgba(201, 169, 89, 0.22); color: var(--brass-pale); }
.wbk-spanne--meiste { background: rgba(201, 169, 89, 0.12); color: var(--brass); }
.wbk-spanne--vereinzelt { background: rgba(141, 145, 132, 0.16); color: var(--ink-mute); }

/* --- Felder -------------------------------------------------------------- */
/* Die Karten spannen ueber die volle Schale, ihr TEXT nicht: innen lief er bis
   145 Zeichen je Zeile (nachgemessen 23.09.2026). Karte breit, Satzspiegel
   eng — das ist der Unterschied zwischen Behaelter und Lesetext. */
.wbk-felder { max-width: none; }
.wbk-feld > p,
.wbk-feld > ul,
.wbk-feld > ol { max-width: 34rem; }
.wbk-feld {
  border: 1px solid var(--steel-line);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-1);
  background: rgba(19, 24, 18, 0.6);
}
.wbk-feld > summary {
  padding: 14px var(--sp-3);
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--sp-2);
  align-items: baseline;
  justify-content: space-between;
}
.wbk-feld__name { font-family: var(--font-display); font-stretch: 87.5%; font-weight: 600; color: var(--ink); }
.wbk-feld__zahl { font-size: 0.78rem; color: var(--brass); white-space: nowrap; }
.wbk-feld > p,
.wbk-feld > ul { margin: 0 var(--sp-3) 12px; color: var(--ink-soft); font-size: 0.92rem; }
.wbk-feld__wortlaut { color: var(--ink-mute) !important; font-size: 0.86rem !important; }
.wbk-feld__wortlaut em { font-style: normal; opacity: 0.75; }
.wbk-feld__fehler { color: var(--brass) !important; font-size: 0.86rem !important; margin-bottom: 4px !important; }

/* --- Besonderheiten ------------------------------------------------------ */
.wbk-besonderheiten { padding-left: 0; list-style: none; }
.wbk-besonderheiten li {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--steel-line-soft);
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.wbk-besonderheiten li:last-child { border-bottom: 0; }

/* --- Werkzeug ------------------------------------------------------------ */
.wbk-werkzeug { margin-bottom: var(--sp-4); }
.wbk-werkzeug__schutz,
.wbk-werkzeug__drucken {
  max-width: 34rem;
  font-size: 0.85rem;
  color: var(--ink-mute);
  border-left: 2px solid var(--brass-hair);
  padding-left: 12px;
  margin: 0 0 var(--sp-3);
}
.wbk-werkzeug__drucken { margin: var(--sp-2) 0 0; }
.wbk-gruppe {
  border: 1px solid var(--steel-line);
  border-radius: var(--radius-sm);
  background: rgba(19, 24, 18, 0.6);
  padding: var(--sp-3);
  margin: 0 0 var(--sp-2);
}
.wbk-gruppe legend {
  font-family: var(--font-display);
  font-stretch: 87.5%;
  font-weight: 600;
  color: var(--brass);
  padding: 0 8px;
}
.wbk-gruppe__hinweis { color: var(--ink-mute); font-size: 0.85rem; margin: 0 0 var(--sp-2); }
.wbk-gruppe__felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--sp-2);
}
.wbk-eingabe label {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.wbk-eingabe input,
.wbk-eingabe textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid var(--steel-line);
  border-radius: var(--radius-xs);
  background: var(--steel-800);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}
.wbk-eingabe input:focus,
.wbk-eingabe textarea:focus { outline: 2px solid var(--brass-hair); outline-offset: 1px; }
.wbk-eingabe__hinweis { font-size: 0.78rem; color: var(--ink-mute); margin: 5px 0 0; }
.wbk-eingabe__mehr { color: var(--brass); }
.wbk-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.wbk-knoepfe button { border: 0; cursor: pointer; font: inherit; }

/* --- Begleitschreiben ---------------------------------------------------- */
.wbk-brief {
  border: 1px solid var(--steel-line);
  border-radius: var(--radius-sm);
  background: rgba(19, 24, 18, 0.6);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.65;
}
.wbk-brief p { margin: 0 0 var(--sp-2); }
.wbk-brief__absender,
.wbk-brief__datum { color: var(--ink-mute); }
.wbk-brief__datum { text-align: right; }
.wbk-brief__betreff { color: var(--ink); }
.wbk-brief__unterlagen { margin: 0 0 var(--sp-2) var(--sp-3); }
.wbk-brief__unterschrift { min-height: 48px; }

/* --- Druck: nur das Begleitschreiben -------------------------------------
 *
 * ALLES hier haengt an der Klasse .wbk-druckbrief, und zwar mit Absicht: Sie
 * steht nur auf den Antragsart-Seiten, also genau dort, wo es ein
 * Begleitschreiben zu drucken gibt. Ohne diese Bindung haette ein Cmd+P auf
 * dem Hub oder einer Landesseite ein fast leeres Blatt ergeben — die Regeln
 * blenden ja Ueberschriften, Tabellen und Fliesstext aus. Eine Seite, die
 * beim Drucken verschwindet, ist ein Fehler, auch wenn niemand ihn meldet.
 */
@media print {
  .wbk-druckbrief { background: #fff; color: #000; }
  .wbk-druckbrief .topbar, .wbk-druckbrief .footer, .wbk-druckbrief .totop,
  .wbk-druckbrief .skip-link, .wbk-druckbrief .backlink,
  .wbk-druckbrief .section-head, .wbk-druckbrief .legal-body,
  .wbk-druckbrief .wbk-tabelle, .wbk-druckbrief .wbk-liste,
  .wbk-druckbrief .wbk-drei, .wbk-druckbrief .wbk-wegweiser,
  .wbk-druckbrief .wbk-werkzeug, .wbk-druckbrief .faq,
  .wbk-druckbrief .grid, .wbk-druckbrief .wbk-felder { display: none !important; }
  .wbk-druckbrief .wbk-brief {
    display: block !important;
    border: 0;
    background: #fff;
    color: #000;
    padding: 0;
    margin: 0;
    font-size: 11pt;
    line-height: 1.5;
    max-width: none;
  }
  .wbk-druckbrief .wbk-brief__absender,
  .wbk-druckbrief .wbk-brief__datum,
  .wbk-druckbrief .wbk-brief__betreff { color: #000; }
  .wbk-druckbrief .wbk-quelle { display: none; }
  @page { margin: 25mm 20mm; }
}