/* ==========================================================================
   Entwurf 1 - Minimal. Typografie und Weissraum statt Kacheln.
   Keine Karten, keine Schatten, keine Symbole. Nur Haarlinien und Abstand.
   Layout unabhaengig vom Brandkit. Schrift, Farbe und Radius kommen
   aus kits.css und palettes.css und sind ueber das Menue wechselbar.
   ========================================================================== */
:root {
  --maxw: 980px;
  --takt: clamp(5.5rem, 12vw, 10rem);
  --linie: 1px solid var(--border);
}

.js-reveal [data-reveal] { opacity: 0; }
.js-reveal [data-reveal].ist-sichtbar { opacity: 1; transition: opacity .7s ease; }

/* --- Kopf, so leise wie moeglich ----------------------------------------- */
.kopf { padding-block: 1.5rem; }
.kopf__reihe { display: flex; align-items: baseline; gap: 2.5rem; }
.hauptnav { margin-inline-start: auto; }
.hauptnav ul { display: flex; gap: 2rem; }
.hauptnav a {
  text-decoration: none; font-size: .9375rem; color: var(--text-muted);
  white-space: nowrap; padding-bottom: .2rem; border-bottom: 1px solid transparent;
}
.hauptnav a:hover { color: var(--text); border-bottom-color: var(--text); }
@media (max-width: 800px) { .hauptnav ul { gap: 1.2rem; } }
@media (max-width: 620px) { .hauptnav { display: none; } }

/* --- Verweis als Textlink mit Unterstrich, kein Knopf --------------------- */
.verweis {
  display: inline-block; text-decoration: none; font-size: 1.0625rem; font-weight: 550;
  color: var(--text); padding-bottom: .3rem;
  border-bottom: 2px solid var(--accent);
  transition: color .18s ease, border-color .18s ease;
}
.verweis:hover { color: var(--accent-text); }
.verweis--leise { border-bottom-color: var(--border); color: var(--text-muted); font-weight: 400; }
.verweis--leise:hover { color: var(--text); border-bottom-color: var(--text); }
.verweise { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; }

/* --- Kopfbereich: nur Satz und Luft --------------------------------------- */
.auftakt { padding-block: clamp(4rem, 10vw, 8rem) clamp(3rem, 7vw, 5.5rem); }
.auftakt h1 {
  font-size: clamp(1.95rem, 4vw, 3.1rem); font-weight: var(--display-weight);
  line-height: 1.2; max-width: 25ch; margin-bottom: 2rem;
  text-transform: var(--display-transform);
}
.auftakt p {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--text-muted);
  max-width: 50ch; margin-bottom: 2.75rem;
}
.zeile { border-top: var(--linie); }

/* --- Ein einziges Bild, ruhig ------------------------------------------- */
.bildzeile img {
  width: 100%; height: clamp(260px, 42vw, 520px); object-fit: cover; display: block;
  border-radius: var(--r);
}

/* --- Abschnitt: Titel links, Inhalt rechts -------------------------------- */
.abschnitt { padding-block: var(--takt); border-top: var(--linie); }
.abschnitt:first-of-type { border-top: 0; }
.abschnitt__raster { display: grid; grid-template-columns: 13rem 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.abschnitt__titel {
  font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted); padding-top: .45rem;
}
.abschnitt h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: var(--display-weight);
  line-height: 1.25; max-width: 26ch; margin-bottom: 1.25rem;
  text-transform: var(--display-transform);
}
.abschnitt__flies { font-size: 1.0625rem; color: var(--text-muted); max-width: 58ch; }
.abschnitt__flies + .abschnitt__flies { margin-top: 1rem; }
@media (max-width: 820px) { .abschnitt__raster { grid-template-columns: 1fr; gap: 1.5rem; } }

/* --- Kursliste: nur Zeilen, keine Karten ---------------------------------- */
.liste { border-top: var(--linie); }
.eintrag {
  display: grid; grid-template-columns: 1fr 9rem 6rem; gap: 1.5rem;
  align-items: baseline; padding: 1.5rem 0; border-bottom: var(--linie);
  text-decoration: none; color: inherit;
  transition: padding-inline-start .2s cubic-bezier(.16,1,.3,1);
}
.eintrag:hover { padding-inline-start: .75rem; }
.eintrag:hover .eintrag__titel { color: var(--accent-text); }
.eintrag__titel { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 550; line-height: 1.3; letter-spacing: -0.015em; }
.eintrag__feld { display: block; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .4rem; }
.eintrag__mass { font-family: var(--font-mono); font-size: .875rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.eintrag__form { font-size: .875rem; color: var(--text-muted); text-align: right; }
@media (max-width: 720px) {
  .eintrag { grid-template-columns: 1fr; gap: .5rem; }
  .eintrag__form { text-align: left; }
}

/* --- Zahlen als Fliesstext, nicht als Kacheln ----------------------------- */
.kennzahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.kennzahl b {
  display: block; font-family: var(--font-mono); font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 400; letter-spacing: -0.04em; line-height: 1; margin-bottom: .6rem;
  font-variant-numeric: tabular-nums;
}
.kennzahl span { font-size: .9375rem; color: var(--text-muted); }
@media (max-width: 720px) { .kennzahlen { grid-template-columns: 1fr; gap: 1.75rem; } }

/* --- Schrittfolge als nummerierte Zeilen ---------------------------------- */
.schrittfolge { counter-reset: sf; }
.schrittfolge li {
  counter-increment: sf; display: grid; grid-template-columns: 2.5rem 1fr;
  gap: 1.25rem; padding: 1.25rem 0; border-bottom: var(--linie);
}
.schrittfolge li:first-child { border-top: var(--linie); }
.schrittfolge li::before {
  content: counter(sf, decimal-leading-zero);
  font-family: var(--font-mono); font-size: .8125rem; color: var(--accent-text); padding-top: .25rem;
}
.schrittfolge b { display: block; font-weight: 600; margin-bottom: .3rem; }
.schrittfolge span { font-size: .9375rem; color: var(--text-muted); }

/* --- Randnotiz ------------------------------------------------------------ */
.randnotiz {
  margin-top: 2rem; padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--accent);
  font-size: .9375rem; color: var(--text-muted); max-width: 62ch;
}

/* --- Abschluss ------------------------------------------------------------ */
.abschluss { padding-block: var(--takt); border-top: var(--linie); }
.abschluss h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: var(--display-weight); max-width: 20ch; margin-bottom: 1.25rem; line-height: 1.2; text-transform: var(--display-transform); }
.abschluss p { color: var(--text-muted); max-width: 52ch; margin-bottom: 2.25rem; font-size: 1.0625rem; }

/* --- Fuss ----------------------------------------------------------------- */
.fuss { border-top: var(--linie); padding-block: 3rem 2.5rem; font-size: .9375rem; }
.fuss__raster { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
.fuss h3 { font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 1rem; font-weight: 400; }
.fuss li { margin-bottom: .5rem; }
.fuss a { text-decoration: none; color: var(--text-muted); }
.fuss a:hover { color: var(--text); }
.fuss__zertifikat { font-size: .8125rem; color: var(--text-muted); line-height: 1.65; max-width: 44ch; margin-top: 1rem; }
.fuss__unten { margin-top: 3rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: .8125rem; color: var(--text-muted); }
@media (max-width: 720px) { .fuss__raster { grid-template-columns: 1fr; } }