/* ==========================================================================
   Cruvela – Handbuch
   Nur die Bausteine, die es auf der Webseite noch nicht gibt. Farben, Maße und
   Schriften kommen aus stil.css und damit aus dem Gestaltungssystem der App
   (Cruvela/Gestaltung/GESTALTUNG.md). Hier wird keine Farbe erfunden.

   Nichts wird von außen geladen: keine Schriftart, kein fremdes Skript, kein
   Zähler. Das eigene suche.js liegt daneben und ruft nichts nach draußen.
   Ohne Skript bleibt jede Seite vollständig lesbar; nur die Suche fällt weg.
   ========================================================================== */

/* --- Zwei Spalten: Verzeichnis und Text --------------------------------- */

.hb-huelle {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: var(--riesig);
  width: min(100% - 2.5rem, 74rem);
  margin-inline: auto;
  padding-block: var(--sehrgross) var(--riesig);
  align-items: start;
}

@media (max-width: 62rem) {
  .hb-huelle { grid-template-columns: minmax(0, 1fr); }
  .hb-leiste { position: static; max-height: none; }
}

.hb-leiste {
  position: sticky;
  top: 4.5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  font-size: 0.9375rem;
  padding-right: var(--klein);
}

.hb-leiste h2 {
  font-size: 1rem;
  font-family: var(--sans);
  letter-spacing: 0;
  margin-bottom: var(--mittel);
}

.hb-leiste ol { list-style: none; margin: 0; padding: 0; }
.hb-leiste li { margin-bottom: var(--winzig); }

.hb-leiste a {
  display: block;
  padding: var(--winzig) var(--klein);
  border-radius: var(--radius-klein);
  text-decoration: none;
  color: var(--schrift-gedaempft);
}
.hb-leiste a:hover { background: var(--flaeche-gehoben); color: var(--schrift); }

.hb-leiste a[aria-current="page"] {
  background: var(--flaeche-gehoben);
  color: var(--schrift);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--akzent);
}

.hb-nummer {
  display: inline-block;
  min-width: 1.6em;
  color: var(--akzent);
  font-variant-numeric: tabular-nums;
}

/* --- Der Text ----------------------------------------------------------- */

.hb-text { max-width: 44rem; }
.hb-text h2 { margin-top: var(--riesig); scroll-margin-top: 5rem; }
.hb-text h3 { margin-top: var(--sehrgross); scroll-margin-top: 5rem; }
.hb-text h2:first-child { margin-top: 0; }

.hb-kopf { margin-bottom: var(--sehrgross); }
.hb-kopf h1 { margin-bottom: var(--klein); }
.hb-kurz { font-size: 1.15rem; color: var(--schrift-gedaempft); }

.hb-angaben {
  display: flex;
  flex-wrap: wrap;
  gap: var(--klein) var(--gross);
  margin-top: var(--gross);
  padding-top: var(--gross);
  border-top: 1px solid var(--trennlinie);
  font-size: 0.9375rem;
  color: var(--schrift-gedaempft);
}
.hb-angaben b { color: var(--schrift); font-weight: 600; }

/* --- Die sechs Bausteine ------------------------------------------------ */

.hb-block {
  margin: var(--sehrgross) 0;
  padding: var(--gross) var(--gross) var(--gross) var(--sehrgross);
  border-radius: var(--radius);
  border: 1px solid var(--trennlinie);
  border-left: 4px solid var(--rand);
  background: var(--flaeche-gehoben);
  box-shadow: var(--plastik-1);
}

.hb-block > :last-child { margin-bottom: 0; }

.hb-block-titel {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--klein);
}

/* Die Farbe trägt die Bedeutung nicht allein – jeder Block hat auch ein Wort.
   Das ist die Regel für Graustufendruck und für Farbenblindheit zugleich. */
.hb-schritt   { border-left-color: var(--tiefsee); }
.hb-merke     { border-left-color: var(--hinweis); }
.hb-achtung   { border-left-color: var(--warnung); }
.hb-pro       { border-left-color: var(--messing); }
.hb-ohnenetz  { border-left-color: var(--erfolg); }
.hb-beispiel  { border-left-color: var(--rand); }

.hb-schritt  .hb-block-titel { color: var(--tiefsee); }
.hb-merke    .hb-block-titel { color: var(--hinweis); }
.hb-achtung  .hb-block-titel { color: var(--warnung); }
.hb-pro      .hb-block-titel { color: var(--messing); }
.hb-ohnenetz .hb-block-titel { color: var(--erfolg); }
.hb-beispiel .hb-block-titel { color: var(--schrift-gedaempft); }

/* Je Kapitel neu – siehe die ausführliche Begründung in druck.css. */
.hb-text { counter-reset: hb-schritt; }
/* **Und je Abschnitt neu.** „Schritt 1, Schritt 2" gehört zu einem Weg, und ein Weg
   steht unter einer Überschrift. Kapitelweise durchgezählt begänne 6.7 mit „Schritt 3",
   und der Leser suchte die ersten zwei. */
h2 { counter-reset: hb-schritt; }
.hb-schritt { counter-increment: hb-schritt; }
.hb-schritt .hb-block-titel::before {
  content: "Schritt " counter(hb-schritt) " · ";
}

/* --- Bilder ------------------------------------------------------------- */

.hb-bild {
  margin: var(--sehrgross) 0;
  max-width: 22rem;
}

/* **Ein Querformat sprengt die 22 rem.** Die Streckenlegende ist 1170 x 154 Pixel;
   auf Spaltenbreite gebracht wäre sie 46 Pixel hoch, und zwei Markierungen von je
   28 Pixeln deckten sie fast zu. Der Generator erkennt solche Bilder am
   Seitenverhältnis und lässt sie die ganze Textspalte nehmen. */
.hb-bild.hb-quer { max-width: 100%; }

.hb-bildflaeche {
  position: relative;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--trennlinie);
  box-shadow: var(--plastik-1);
  line-height: 0;
}

/* Ohne `overflow: hidden` – siehe druck.css: eine Markierung am Rand wurde sonst
   halb abgeschnitten. Die Rundung sitzt am Bild. */
.hb-bildflaeche img {
  width: 100%;
  display: block;
  border-radius: calc(var(--radius) - 1px);
}

/* Die Markierungen liegen über dem Bild, nicht darin. Eine verschobene
   Markierung braucht deshalb keinen neuen Abzug – nur eine geänderte Zahl
   im Text. */
.hb-marke {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--warnung);
  color: #FFFCF6;
  border: 2px solid #FFFCF6;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.6rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 4px rgba(var(--dunst), .45);
}

.hb-bild figcaption {
  margin-top: var(--klein);
  font-size: 0.9375rem;
  color: var(--schrift-gedaempft);
  line-height: 1.5;
}

/* --- Tabellen ----------------------------------------------------------- */

.hb-text table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sehrgross) 0;
  font-size: 0.9375rem;
}
.hb-text th, .hb-text td {
  text-align: left;
  vertical-align: top;
  padding: var(--klein) var(--mittel);
  border-bottom: 1px solid var(--trennlinie);
}
.hb-text th { font-weight: 600; border-bottom-width: 2px; }
.hb-text tbody tr:last-child td { border-bottom: none; }

.hb-tabellenrahmen { overflow-x: auto; }

/* --- Fußzeile der Seite ------------------------------------------------- */

.hb-weiter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gross);
  justify-content: space-between;
  margin-top: var(--riesig);
  padding-top: var(--gross);
  border-top: 1px solid var(--trennlinie);
}

.hb-nachoben {
  display: inline-block;
  margin-top: var(--gross);
  font-size: 0.9375rem;
  color: var(--schrift-gedaempft);
}

/* --- Suche -------------------------------------------------------------- */

.hb-suche { margin-bottom: var(--gross); }

.hb-suche input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--klein) var(--mittel);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: var(--flaeche-gehoben);
  color: var(--schrift);
  font: inherit;
  font-size: 0.9375rem;
}

/* Ohne Skript hat die Suche nichts zu tun – dann steht sie auch nicht da. */
.hb-suche[hidden] { display: none; }

.hb-treffer { list-style: none; margin: var(--mittel) 0 0; padding: 0; }
.hb-treffer li { margin-bottom: var(--klein); }
.hb-treffer a { display: block; text-decoration: none; }
.hb-treffer b { display: block; color: var(--schrift); }
.hb-treffer span { color: var(--schrift-gedaempft); font-size: 0.875rem; }
.hb-leer { color: var(--schrift-gedaempft); font-size: 0.9375rem; }

/* --- Die Startseite des Handbuchs --------------------------------------- */

.hb-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gross);
  margin: var(--sehrgross) 0;
  padding: var(--gross) var(--sehrgross);
  border-radius: var(--radius);
  background: var(--fuellung-primaer);
  color: var(--schrift-auf-fuellung);
  box-shadow: var(--plastik-2);
}
.hb-download a { color: var(--schrift-auf-fuellung); font-weight: 600; }
.hb-download .klein { color: color-mix(in srgb, currentColor 78%, transparent); }

.hb-kapitelliste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mittel); }

@media (min-width: 48rem) {
  .hb-kapitelliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hb-kapitelliste a {
  display: block;
  padding: var(--gross);
  border-radius: var(--radius);
  border: 1px solid var(--trennlinie);
  background: var(--flaeche-gehoben);
  text-decoration: none;
  box-shadow: var(--plastik-1);
  height: 100%;
  box-sizing: border-box;
}
.hb-kapitelliste a:hover { border-color: var(--rand); }
.hb-kapitelliste b { display: block; margin-bottom: var(--winzig); }
.hb-kapitelliste span { color: var(--schrift-gedaempft); font-size: 0.9375rem; }