/* Gerüst der Leistungsseiten: nur, was bau/seite.css nicht hat. bau/seite.css wird davor geladen und nie geändert.
   Alle Werte sind aus bau/seite.css übernommen, die Zeile steht jeweils dahinter (Stand 21.10.2026). */

/* Maße der Startseite als Namen für die Unterseiten. In bau/seite.css stehen sie als feste Werte, nicht als Variablen (geprüft am 21.10.2026). */
:root {
  --u-h2-gross: clamp(48px, 8.4vw, 150px);     /* seite.css Z. 439 und 440 (Leistungen, Ablauf) */
  --u-h2-mittel: clamp(44px, 7.2vw, 128px);    /* seite.css Z. 251 (Markt) */
  --u-h2-klein: clamp(40px, 4.8vw, 84px);      /* seite.css Z. 223 (Belege) */
  --u-h3: clamp(28px, 3vw, 48px);              /* seite.css Z. 167 (Karte) */
  --u-satz: clamp(20px, 1.9vw, 30px);          /* seite.css Z. 179 (Satz unter der Ablauf-Überschrift) */
  --u-abstand-oben: clamp(100px, 12vw, 200px); /* seite.css Z. 250 (Markt, oben) */
  --u-abstand-unten: clamp(100px, 12vw, 180px);/* seite.css Z. 250 (Markt, unten) */
  --u-text-leise: #3b4843;                     /* seite.css Z. 146, 168, 254 */
  --u-radius-buehne: 28px;                     /* seite.css Z. 123, 268 */
  --u-radius-karte: 18px;                      /* seite.css Z. 158, 231 */
}

/* Ladeanimation auf Unterseiten aus: Markup bleibt (seite.js braucht es), sichtbar ist es nie */
html.unterseite .vorlader { display: none; }

/* Kopf der Unterseite: .kopf-inhalt ist ohne .k1 ausgeblendet (seite.css Z. 87 und 88, geprüft am 21.10.2026) */
.u-kopf { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: clamp(48px, 8vh, 96px); }
.u-kennung { font-size: 13px; font-weight: 500; letter-spacing: .01em; color: rgba(246,248,245,.66); margin-bottom: 22px; } /* wie .kennung, Z. 114 */
.u-kennung .nr { color: var(--akzent-hell); margin-right: 4px; }                                                             /* Z. 115 */
.u-titel { font-size: var(--u-h2-klein); font-weight: 600; letter-spacing: -.045em; line-height: .98; max-width: 1100px; }    /* wie .belege-links h2, Z. 223 */
.u-titel em { font-style: italic; font-weight: 300; letter-spacing: -.02em; }                                               /* Z. 437 */
.u-unter { margin-top: 22px; max-width: 560px; font-size: clamp(16px, 1.25vw, 19px); opacity: .86; }                        /* wie .k1-satz p, Z. 97 */

/* Heller Abschnitt auf der Bühne: Grund wie .ueber und .markt (Z. 124), Ränder wie Z. 250 (geprüft am 21.10.2026) */
.u-abschnitt { background: var(--schnee); padding: var(--u-abstand-oben) var(--rand) var(--u-abstand-unten); }
.u-gross { font-size: var(--u-h2-gross); font-weight: 600; letter-spacing: -.05em; line-height: .9; margin-bottom: clamp(40px, 5vw, 72px); } /* Z. 151 */
.u-text { font-size: var(--u-satz); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; max-width: 760px; color: var(--graphit); margin-bottom: 40px; } /* wie .ablauf-satz, Z. 179 */

@media (max-width: 767px) {
  .u-kopf { padding-bottom: 40px; }
}

/* ---------- Kopf im Breitformat (Runde 3) ----------
   herkunft: Elias im Chat am 22.10.2026: „was ich auf keiner subpage möchte ist ein gleich großer hero wie auf der startseite
   dieser müsste eher richtung cinemascope 2.35:1 gehen“. Seitenbreite : Kopfhöhe = 2,35 : 1 am Desktop, mit Mindesthöhe.
   Der stehende Kopf (.kopf, seite.css Z. 80) bleibt bildschirmhoch, weil der Schluss ein Fenster auf ihn öffnet; flach werden nur
   der Platzhalter, über den die Bühne fährt (.kopf-platz, Z. 122), und der Inhaltsbereich. Das Spektrum zeigt so seinen oberen Teil mit dem Bogen.
   Passt der Inhalt bei einer Breite nicht in die Höhe, erhöht kopf-breit.js den Wert --u-kopf-h genau so weit, wie nötig.
   Mindesthöhe, Abstände und Schriftgröße sind Gestaltungswerte, an Bildschirmfotos abgestimmt (ki-check/bau/pruefung/r3). */
:root {
  --u-kopf-h: max(calc(100vw / 2.35), 500px);
  --u-kopf-unten: clamp(36px, 4vw, 64px);
  --u-kopf-titel: var(--u-h2-klein);   /* im flachen Kopf auf allen fünf Seiten dieselbe Größe wie .belege-links h2 (seite.css Z. 223) */
}
html.unterseite .kopf-platz { height: var(--u-kopf-h); }
html.unterseite .kopf-inhalt.u-kopf { bottom: auto; height: var(--u-kopf-h); padding-bottom: var(--u-kopf-unten); }
html.unterseite .kopf-inhalt.u-kopf .u-titel { font-size: var(--u-kopf-titel); }
@media (max-width: 767px) {
  /* Handy: höher als 2,35 : 1, aber nicht bildschirmfüllend; die Bühne ragt unten sichtbar herein */
  :root { --u-kopf-h: 66svh; --u-kopf-unten: 30px; --u-kopf-titel: clamp(32px, 9vw, 40px); }
}

/* ---------- Flacherer Kopf (Runde 3, Nachtrag 22.10.2026) ----------
   herkunft: Elias im Chat am 22.10.2026: „die heros in den unterseiten sind immer noch zu lang … dieser teil sollte überall um ein drittel kürzer sein“.
   Zwei Drittel von Breite / 2,35 sind Breite / 3,5; zusätzlich höchstens 60 % der Fensterhöhe. Die Mindesthöhe ist nur der Boden für die Rechnung;
   passt der Inhalt nicht, erhöht kopf-breit.js den Wert so weit wie nötig. Damit das selten nötig ist, stehen Pfad, Kennung, Titel, Unterzeile, Knopf
   und die Liste rechts im Kopf enger; die Titelgröße ist leicht kleiner als .belege-links h2 (seite.css Z. 223). Alles Gestaltungswerte,
   an Bildschirmfotos abgestimmt (_geruest/pruefung/r3). Gilt nur im Kopf; die Werte der Seiten-CSS bleiben unverändert. */
:root {
  --u-kopf-h: clamp(380px, calc(100vw / 3.5), 60vh);
  --u-kopf-unten: clamp(26px, 2.4vw, 48px);
  --u-kopf-titel: clamp(38px, 4.4vw, 78px);
}
html.unterseite .u-kopf .u-pfad { margin-bottom: 8px; }
html.unterseite .u-kopf .u-kennung { margin-bottom: 12px; }
html.unterseite .u-kopf .u-titel + .u-unter { margin-top: 14px; max-width: 680px; }
html.unterseite .u-kopf .ma-unter + .ma-beschr { margin-top: 8px; }
html.unterseite .u-kopf .ki-kopf-aufruf,
html.unterseite .u-kopf .ma-kopf-cta,
html.unterseite .u-kopf .u-handlung,
html.unterseite .u-kopf .uw-aufruf { margin-top: 20px; }
html.unterseite .u-kopf .ki-kopf-fuer { margin-bottom: 12px; }
html.unterseite .u-kopf .ki-kopf-systeme li,
html.unterseite .u-kopf .u-kopf-strecke li { padding: 8px 0 9px; }
@media (max-width: 767px) {
  /* Handy: ein Drittel unter den bisherigen 66svh; kopf-breit.js erhöht, wenn der Inhalt mehr braucht */
  :root { --u-kopf-h: 44svh; --u-kopf-unten: 22px; --u-kopf-titel: clamp(30px, 8.4vw, 38px); }
  html.unterseite .u-kopf .u-kennung { margin-bottom: 10px; }
  html.unterseite .u-kopf .u-titel + .u-unter { margin-top: 12px; }
  html.unterseite .u-kopf .ki-kopf-aufruf,
  html.unterseite .u-kopf .ma-kopf-cta,
  html.unterseite .u-kopf .u-handlung,
  html.unterseite .u-kopf .uw-aufruf { margin-top: 16px; }
}
@media (min-width: 768px) {
  html.unterseite .u-kopf .u-titel + .u-unter { max-width: 820px; }
  html.unterseite .u-kopf .knopf-gross { font-size: 17px; padding: 14px 26px; }   /* im Kopf etwas kleiner als .knopf-gross (seite.css Z. 60: 18px, 17px 29px) */
}
/* Website-Seite: die Projektliste rechts (.u-kopf-strecke, ab 1100 px sichtbar) lag im flacheren Kopf neben dem Titel; der linke Teil hält Abstand wie auf ki-check (seite-ki-check.css Z. 46) */
@media (min-width: 1100px) {
  html.unterseite .u-kopf:has(> .u-kopf-strecke) > :not(.u-kopf-strecke) { max-width: calc(100% - clamp(260px, 23vw, 350px) - 60px); }
}
@media (max-width: 767px) {
  /* Handy: Unterzeile und Knopf im Kopf etwas kleiner, damit der Kopf auch hier flacher wird (Text bleibt vollständig) */
  html.unterseite .u-kopf .u-pfad { margin-bottom: 6px; }
  html.unterseite .u-kopf .u-titel + .u-unter { font-size: 15.5px; line-height: 1.42; }
  html.unterseite .u-kopf .knopf-gross { font-size: 16px; padding: 13px 22px; }
}

/* ---------- Brotkrume und Kennung als eine Zeile (Runde 4, 22.10.2026) ----------
   herkunft: Elias will die Köpfe ein Drittel kürzer; Vorschlag des Kritikers, „Startseite › [0n] Name“ statt zwei Zeilen mit demselben Namen.
   bau_geruest.py legt beide beim Bau zusammen und nimmt die Kennung heraus. Einheitlich auf allen fünf Seiten: „Startseite“ blass als Link,
   aktuelle Seite hell, Nummer in Messing wie .kennung .nr (seite.css Z. 119). Schriftmaß wie .kennung (13 px, 500). Der Abstand zum Titel
   übernimmt den der früheren Kennung. Gilt nur im Kopf; höhere Spezifität als die Regeln für .u-pfad in den Seiten-CSS. */
html.unterseite .u-kopf .u-pfad { display: block; width: fit-content; max-width: 100%; font-size: 13px; font-weight: 500; letter-spacing: .01em; line-height: 1.5; color: rgba(246,248,245,.6); margin-bottom: 12px; }
html.unterseite .u-kopf .u-pfad ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
html.unterseite .u-kopf .u-pfad li { margin: 0; }
html.unterseite .u-kopf .u-pfad li + li::before { content: "›"; margin-right: 8px; color: rgba(246,248,245,.45); }
html.unterseite .u-kopf .u-pfad a { color: rgba(246,248,245,.6); text-decoration: none; }
html.unterseite .u-kopf .u-pfad a:hover { color: var(--schnee); text-decoration: underline; text-underline-offset: 3px; }
html.unterseite .u-kopf .u-pfad [aria-current] { color: rgba(246,248,245,.92); }
html.unterseite .u-kopf .u-pfad .nr { color: var(--akzent-hell); margin-right: 4px; }
@media (max-width: 767px) {
  html.unterseite .u-kopf .u-pfad { margin-bottom: 10px; }
}