/* =====================================================================
   Handbuch zum neuen Wehrdienst — eigene Gestaltung.

   Bewusst als eigene Datei statt als Anbau an app.css: Der Rechner ist
   das Herz der Seite, das Handbuch ein Textangebot daneben. Wer später
   an einem der beiden schraubt, soll den anderen nicht anfassen müssen.
   Alle Farben und Schriften kommen aus den Token von app.css, damit
   Hell- und Dunkelmodus ohne Zusatzarbeit mitlaufen.

   app.css MUSS vor dieser Datei eingebunden werden.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Grundgerüst: Inhaltsspalte plus klebendes Inhaltsverzeichnis.
   Ab 1080px zweispaltig, darunter fällt das Verzeichnis in einen
   aufklappbaren Block über dem Text.
   --------------------------------------------------------------------- */

.hb { padding: clamp(2.5rem, 7vh, 4.5rem) 0 clamp(3rem, 9vh, 6rem); }

.hb__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 1080px) {
  .hb__layout { grid-template-columns: 232px minmax(0, 1fr); }
}

/* --- Inhaltsverzeichnis --- */
.hb__nav {
  align-self: start;
  font-size: 0.86rem;
}
@media (min-width: 1080px) {
  .hb__nav { position: sticky; top: var(--thema-frei); }
}
.hb__nav-titel {
  font-family: var(--f-mono);
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--tx-3); margin: 0 0 0.9rem;
}
.hb__nav ol { list-style: none; margin: 0; padding: 0; counter-reset: hbnav; }
.hb__nav li { counter-increment: hbnav; }
.hb__nav a {
  display: flex; gap: 0.65rem; align-items: baseline;
  padding: 0.42rem 0.6rem 0.42rem 0.5rem;
  color: var(--tx-2); text-decoration: none;
  border-left: 2px solid var(--line-soft);
  transition: color 0.2s var(--e-smooth), border-color 0.2s var(--e-smooth), background 0.2s var(--e-smooth);
}
.hb__nav a::before {
  content: counter(hbnav, decimal-leading-zero);
  font-family: var(--f-mono); font-size: 0.7rem;
  color: var(--tx-3); flex: 0 0 auto;
}
.hb__nav a:hover { color: var(--amber); border-left-color: var(--amber-dim); background: var(--hover); }
.hb__nav a.ist-hier { color: var(--tx); border-left-color: var(--amber); font-weight: 600; }
.hb__nav a.ist-hier::before { color: var(--amber); }

/* Auf schmalen Bildschirmen als Details-Block */
.hb__nav-mobil { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.hb__nav-mobil > summary {
  cursor: pointer; list-style: none; padding: 0.9rem 1.1rem;
  font-family: var(--f-display); font-weight: 600; letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 52px;
}
.hb__nav-mobil > summary::-webkit-details-marker { display: none; }
.hb__nav-mobil > summary::after {
  content: ''; width: 12px; height: 12px; flex: 0 0 auto;
  background:
    linear-gradient(var(--amber), var(--amber)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--amber), var(--amber)) center / 1.5px 100% no-repeat;
  transition: transform 0.28s var(--e-smooth);
}
.hb__nav-mobil[open] > summary::after { transform: rotate(135deg); }
.hb__nav-mobil .hb__nav { padding: 0 0.9rem 1rem; }
@media (min-width: 1080px) { .hb__nav-mobil { display: none; } }
@media (max-width: 1079px) { .hb__nav--seite { display: none; } }

/* ---------------------------------------------------------------------
   Textkörper
   --------------------------------------------------------------------- */

.hb__text { max-width: 72ch; min-width: 0; }
.hb__text > section { scroll-margin-top: calc(var(--thema-frei) + 1rem); }
.hb__text > section + section {
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: clamp(2.4rem, 6vh, 4rem);
  border-top: 1px solid var(--line-soft);
}

.hb__kapnr {
  display: block; font-family: var(--f-mono); font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 0.7rem;
}
.hb__text h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.3rem);
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--tx); margin: 0 0 1rem;
}
.hb__text h3 {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  color: var(--tx); margin: 2.2rem 0 0.7rem;
}
.hb__text h4 {
  font-family: var(--f-text); font-weight: 700; font-size: 1rem;
  color: var(--tx); margin: 1.5rem 0 0.4rem;
}
.hb__text p { color: var(--tx-2); margin: 0 0 1rem; }
.hb__text > section > p.hb__lead {
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.16rem);
  color: var(--tx-2); margin-bottom: 1.6rem;
}
.hb__text strong { color: var(--tx); font-weight: 700; }
.hb__text a { color: var(--amber); }

/* Grundgestalt für Listen OHNE eigene Klasse.
   Das :not([class]) ist der entscheidende Teil. Ohne es gilt hier
   `.hb__text ul > li::before` — ein Selektor aus einer Klasse und zwei
   Elementen. Der schlägt `.hb__schritte > li::before`, `.hb__strahl > li::before`
   und `.hb__haken > li::before`, die nur aus einer Klasse und einem Element
   bestehen. Die Folge war, dass jede dieser Komponenten still den runden
   Amber-Punkt der Grundgestalt bekam statt ihres eigenen Markers:
   die Ziffer im Nummernkreis stand in Amber auf Oliv (Kontrast 1,1:1 und
   damit praktisch unlesbar), der Text lief 2 px in den Kreis hinein, die
   Punkte des Zeitstrahls sprangen von der Linie in den Text, und aus den
   Kästchen der Hakenliste wurden Punkte.
   Die Grundgestalt gilt jetzt nur noch dort, wo keine Komponente zuständig
   ist — 15 schlichte Listen im Handbuch sehen unverändert aus. */
.hb__text ul:not([class]), .hb__text ol:not([class]) { margin: 0 0 1.2rem; padding: 0; list-style: none; }
.hb__text li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; color: var(--tx-2); }
.hb__text ul:not([class]) > li::before {
  content: ''; position: absolute; left: 0.28rem; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber-flaeche);
}
.hb__text ol:not([class]) { counter-reset: hbli; }
.hb__text ol:not([class]) > li { counter-increment: hbli; padding-left: 1.9rem; }
.hb__text ol:not([class]) > li::before {
  content: counter(hbli); position: absolute; left: 0; top: 0;
  font-family: var(--f-mono); font-weight: 700; font-size: 0.8rem;
  color: var(--amber);
}

/* --- Hinweiskästen --- */
.hb__box {
  border: 1px solid var(--line);
  border-left: 3px solid var(--amber-flaeche);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--feld);
  padding: clamp(1rem, 2.5vw, 1.35rem);
  margin: 1.6rem 0;
}
.hb__box > :first-child { margin-top: 0; }
.hb__box > :last-child { margin-bottom: 0; }
.hb__box h4 { color: var(--sage); margin-top: 0; }
.hb__box--warnung { background: var(--alert-tint); border-left-color: var(--alert); }
.hb__box--warnung h4 { color: var(--alert); }
.hb__box--gut { background: var(--sage-tint); border-left-color: var(--sage); }
.hb__box--rechner { background: var(--amber-tint); border-left-color: var(--amber-flaeche); }
.hb__box--rechner h4 { color: var(--amber); }

/* --- Kennzahlen nebeneinander --- */
.hb__zahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.8rem; margin: 1.6rem 0;
}
.hb__zahl {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); box-shadow: var(--schatten);
  padding: 1.1rem 1rem; text-align: center;
}
.hb__zahl b {
  display: block; font-family: var(--f-mono); font-weight: 700;
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  color: var(--sage); letter-spacing: -0.02em;
}
.hb__zahl span { display: block; margin-top: 0.35rem; font-size: 0.8rem; color: var(--tx-3); line-height: 1.35; }

/* --- Nummerierte Schritte --- */
.hb__schritte { list-style: none; margin: 1.4rem 0; padding: 0; counter-reset: hbs; }
.hb__schritte > li {
  counter-increment: hbs; position: relative;
  padding-left: 3rem; margin-bottom: 1.3rem;
}
.hb__schritte > li::before {
  content: counter(hbs); position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--sage); color: var(--panel);
  font-family: var(--f-mono); font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}
:root[data-theme="dark"] .hb__schritte > li::before { color: #14180F; }
.hb__schritte b {
  display: block; font-family: var(--f-display); font-weight: 600;
  font-size: 1.05rem; color: var(--tx); margin-bottom: 0.25rem;
}
.hb__schritte p { margin: 0; }

/* --- Zeitstrahl --- */
.hb__strahl { list-style: none; margin: 1.5rem 0; padding: 0 0 0 1.6rem; position: relative; }
.hb__strahl::before {
  content: ''; position: absolute; left: 4px; top: 0.5rem; bottom: 0.5rem;
  width: 2px; background: var(--line);
}
.hb__strahl > li { position: relative; padding: 0 0 0 0.4rem; margin-bottom: 1.4rem; }
.hb__strahl > li::before {
  content: ''; position: absolute; left: -1.6rem; top: 0.35rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--amber-flaeche);
  box-shadow: 0 0 0 3px var(--bg);
}
.hb__zeit {
  display: block; font-family: var(--f-mono); font-weight: 700;
  font-size: 0.72rem; letter-spacing: 0.06em; color: var(--amber);
  text-transform: uppercase;
}
.hb__strahl b {
  display: block; font-family: var(--f-display); font-weight: 600;
  font-size: 1.02rem; color: var(--tx); margin: 0.15rem 0 0.25rem;
}
.hb__strahl p { margin: 0; font-size: 0.92rem; }

/* --- Tabellen --- */
.hb__tab { overflow-x: auto; margin: 1.5rem 0; -webkit-overflow-scrolling: touch; }
.hb__tab table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 380px; }
.hb__tab th {
  text-align: left; font-family: var(--f-display); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sage); background: var(--sage-tint);
  padding: 0.6rem 0.8rem; border-bottom: 2px solid var(--sage);
  white-space: nowrap;
}
.hb__tab td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line-soft); color: var(--tx-2); vertical-align: top; }
.hb__tab tbody tr:nth-child(even) td { background: var(--feld); }
.hb__tab td strong { color: var(--tx); }
.hb__tab .num { font-family: var(--f-mono); text-align: right; white-space: nowrap; color: var(--tx); }

/* --- Abhakliste --- */
.hb__haken {
  list-style: none; margin: 1rem 0 1.4rem; padding: 0;
  columns: 2; column-gap: 1.8rem;
}
@media (max-width: 560px) { .hb__haken { columns: 1; } }
.hb__haken > li {
  break-inside: avoid; position: relative;
  padding-left: 1.7rem; margin-bottom: 0.45rem;
  font-size: 0.92rem; color: var(--tx-2);
}
.hb__haken > li::before {
  content: ''; position: absolute; left: 0; top: 0.28em;
  width: 14px; height: 14px; border-radius: 3px;
  border: 1.5px solid var(--sage); background: var(--feld);
}

/* ---------------------------------------------------------------------
   Anmeldeblock für das PDF
   --------------------------------------------------------------------- */

.hb__optin {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: var(--schatten-hoch);
  padding: clamp(1.3rem, 3.5vw, 2.2rem);
  margin: clamp(1.8rem, 4vh, 2.8rem) 0;
}
/* Der amberne Strich vor h2 aus app.css ist der Marker für Sektionen der
   Seite. Im Anmeldekasten steht die Überschrift in einer Karte — dort
   liest sich der Strich wie ein versehentlicher Gedankenstrich. */
.hb__optin h2::before, .hb__optin h3::before { content: none; }
.hb__optin h2, .hb__optin h3 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.7rem);
  line-height: 1.15; color: var(--tx); margin: 0 0 0.6rem;
}
.hb__optin p { color: var(--tx-2); margin: 0 0 1rem; max-width: 60ch; }
.hb__optin-form { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-start; }
.hb__optin-form input[type="email"] {
  flex: 1 1 240px; min-width: 0; min-height: 48px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line); border-radius: var(--r-s);
  background: var(--feld); color: var(--tx);
  font-family: var(--f-text); font-size: 1rem;
}
.hb__optin-form input[type="email"]:focus-visible {
  outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow);
}
.hb__optin-form button {
  flex: 0 0 auto; min-height: 48px; padding: 0.6rem 1.5rem;
  border: 1px solid var(--amber); border-radius: var(--r-s);
  background: var(--amber-flaeche); color: var(--amber-kontrast);
  font-family: var(--f-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.82rem;
  cursor: pointer;
  transition: filter 0.2s var(--e-smooth);
}
.hb__optin-form button:hover { filter: brightness(1.07); }
.hb__optin-form button[disabled] { opacity: 0.6; cursor: progress; }
.hb__optin-zustimmung {
  margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--tx-3); line-height: 1.5; max-width: 62ch;
}
.hb__optin-zustimmung a { color: var(--amber); }
/* Honigtopf: für Menschen unsichtbar, für einfache Bots ein Pflichtfeld */
.hb__falle {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.hb__meldung {
  margin: 1rem 0 0; padding: 0.8rem 1rem;
  border-radius: var(--r-s); font-size: 0.92rem;
  border: 1px solid var(--line); background: var(--feld); color: var(--tx-2);
}
.hb__meldung--gut { background: var(--signal-tint); border-color: var(--signal); color: var(--tx); }
.hb__meldung--schlecht { background: var(--alert-tint); border-color: var(--alert); color: var(--tx); }
.hb__meldung[hidden] { display: none; }

/* Vorschaustreifen: zeigt, dass es das Ding wirklich als PDF gibt */
.hb__vorschau {
  display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 1.2rem;
}
.hb__cover {
  flex: 0 0 auto; width: 104px; aspect-ratio: 210 / 297;
  border-radius: 4px; overflow: hidden;
  background: linear-gradient(150deg, #34490F 0%, #47601F 100%);
  box-shadow: var(--schatten-hoch);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0.55rem; color: #E9A22E;
  font-family: var(--f-display); font-weight: 700; font-size: 0.62rem;
  line-height: 1.15; letter-spacing: -0.01em;
}
.hb__cover span { color: #D9E7C4; font-weight: 500; font-size: 0.5rem; display: block; margin-top: 0.25rem; }
.hb__vorschau-text { flex: 1 1 200px; min-width: 0; }
.hb__vorschau-text ul { list-style: none; margin: 0; padding: 0; }
.hb__vorschau-text li {
  position: relative; padding-left: 1.4rem; margin-bottom: 0.35rem;
  font-size: 0.9rem; color: var(--tx-2);
}
.hb__vorschau-text li::before {
  content: ''; position: absolute; left: 0; top: 0.42em;
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--amber-flaeche);
}

@media print {
  .kopf, .hb__nav, .hb__nav-mobil, .hb__optin, .footer, .anzeige, .thema, .consent { display: none !important; }
  .hb__text { max-width: none; }
}