/* ============================================================================
   ITK LAYOUT-SYSTEM
   ----------------------------------------------------------------------------
   Struktur-Schicht der Website: Grids, Section-Rhythmus, Umbruchverhalten.

   QUELLE ist diese Datei unter brand/. Die Kopie unter site/css/ wird beim
   Import erzeugt und nie von Hand bearbeitet.

   ZUSTAENDIGKEIT — die Trennlinie zu base.css verlaeuft nach Verantwortung,
   nicht nach Regeltyp:
       layout-system.css  →  Struktur: Grid, Section-Rhythmus, Umbruch
       base.css           →  Design: Farben, Komponenten, Navigation, Footer
   Es gibt keine Ueberschneidung: base.css definiert keine der hier genannten
   Klassen (geprueft 2026-08-06).

   LADEREIHENFOLGE: immer NACH base.css.

   EINHEITEN: alle Groessen in rem, umgerechnet mit rem = px / 16. Die px-Werte
   in den Kommentaren sind die Vorgabe aus brand/typography.md. `html` traegt
   bewusst keine font-size, damit die Browser-Schriftgroesse des Nutzers
   durchschlaegt (siehe skills/web-layout.md §5). Ausnahme: Media-Query-
   Breakpoints bleiben in px — sie beschreiben Viewport-Groessen, keine Inhalte.

   KEIN !important. Kommt eine Regel hier nicht durch, liegt die Ursache in
   einer Definition im Seiten-<style>. Die gehoert entfernt, nicht ueberboten.

   Getestet am 2026-08-06/07 an karriere.html, produkte-leistungen.html und
   leistungen/tisax.html ueber 320 / 375 / 480 / 640 / 900 / 1200 px.
   Messwerte: scratchpad/responsive-test/ERGEBNIS.md
   ========================================================================== */


/* --- Stellschrauben ------------------------------------------------------ */

:root {
  /* Mindestbreite einer Spalte, bevor umbrochen wird. Untergrenze 15rem (240px)
     laut skills/web-layout.md §2 — darunter zerfaellt Fliesstext in
     Buchstabenkolonnen. In rem, damit die Spalten mitwachsen, wenn ein Nutzer
     seine Schriftgroesse hochstellt. */
  --itk-grid-min: 17.5rem;                        /* 280px */

  /* Abstand zwischen Grid-Zellen. Endpunkte im 4px-Raster. */
  --itk-grid-gap: clamp(1.25rem, 3vw, 1.875rem);  /* 20 – 30px */

  /* Vertikales Section-Padding. Endpunkte auf der 8px-Skala aus
     web-layout.md §6. Der fluide Verlauf dazwischen ist bewusst frei — ein
     Nutzer sieht bei seiner Viewport-Breite immer nur EINEN Zwischenwert,
     nie zwei krumme nebeneinander. */
  --itk-section-pad:    clamp(3rem, 8vw, 6rem);      /* 48 – 96px, Standard */
  --itk-section-pad-sm: clamp(2rem, 5.33vw, 4rem);   /* 32 – 64px, kompakt.
     5.33vw ist 2/3 von 8vw, damit die kompakte Variante dieselbe Kurve hat wie
     die Standardvariante und ihren Maximalwert bei derselben Breite erreicht. */
}


/* --- Das Grid-Muster ----------------------------------------------------- */
/*
   EIN Grid fuer alle "n gleiche Spalten"-Faelle. Deckt laut Auswertung vom
   2026-08-06 rund 90 % aller Grids der Site ab: 706 grid-template-columns-
   Deklarationen unter 101 Klassennamen, dahinter nur ~6 echte Muster.

   Warum auto-fit statt fester Spaltenzahl plus Media-Query:
   Das Grid bricht selbst um, sobald die Spalten unter --itk-grid-min fielen.
   Es braucht keine Breakpoints, funktioniert bei jeder Containerbreite und
   ueberlebt manuelle Anpassungen an einzelnen Seiten.

   Warum min(100%, ...) und nicht nur var(--itk-grid-min):
   Ohne min() erzwingt minmax() die Mindestbreite auch dann, wenn der Container
   schmaler ist — das Grid laeuft rechts aus dem Viewport. min(100%, X) laesst
   die Spalte in diesem Fall auf Containerbreite schrumpfen.

   Verwendung:
       <div class="itk-grid">…</div>
       <div class="itk-grid" style="--itk-grid-min: 15rem">…</div>
*/

.itk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--itk-grid-min)), 1fr));
  gap: var(--itk-grid-gap);
}

/* Grid-Kinder duerfen unter ihre intrinsische Mindestbreite schrumpfen. Ohne
   das sprengt eine lange Ueberschrift den Track breiter als den Viewport. */
.itk-grid > * { min-width: 0; }


/* --- Section-Rhythmus ---------------------------------------------------- */
/*
   Erhebung vom 2026-08-07 ueber drei Referenzseiten: Die vertikalen
   Section-Paddings clustern um zwei Werte — 96px (8 Vorkommen) und 64px (3).
   Dazu Ad-hoc-Varianten 84/88/92px, die web-layout.md §6 gar nicht kennt.

   Die Section behaelt ihre eigene Klasse fuer Hintergrund und Farbe — nur das
   Padding kommt von hier:

       <section class="itk-section wege-section">
       <div class="itk-section--sm social-block">

   ELEMENTAGNOSTISCH anwenden: Nicht jede Sektion ist ein <section>. Auf den
   Referenzseiten waren zwei davon <div> (.lp-cta, .tsx-cross).

   Warum padding-block und nicht padding: Die horizontale Achse gehoert dem
   Container (.wrap), nicht der Section. Wer beides auf einer Ebene setzt,
   bekommt doppeltes Padding — genau das erzeugt MFN-Notbremse Regel 3 in
   base.css derzeit und kostet bei 900px 72px Inhaltsbreite, fast eine ganze
   Grid-Spalte.
*/

.itk-section     { padding-block: var(--itk-section-pad); }
.itk-section--sm { padding-block: var(--itk-section-pad-sm); }


/* --- Zwei Spalten mit fester Aufteilung ---------------------------------- */
/*
   Fuer Sektionen mit genau zwei Spalten, die bewusst unterschiedlich breit sind
   (typisch: Text neben Bild, Erklaerung neben Faktenliste).

   Drei Varianten, abgestimmt mit Gianna am 2026-08-07. Vorher gab es dafuer
   ZEHN verschiedene Aufteilungen zwischen 42:57 und 62:38, verteilt auf
   26 Sektionen — teils mit unterschiedlichen Werten fuer dieselbe Sektionsart.

       <div class="itk-duo">…</div>                     50 : 50
       <div class="itk-duo itk-duo--wide-left">…</div>   60 : 40
       <div class="itk-duo itk-duo--wide-right">…</div>  40 : 60

   Warum keine freie Stellschraube: Genau die hat den Wildwuchs erzeugt. Drei
   benannte Varianten sind auswaehlbar, ein Zahlenwert laedt zum Nachjustieren ein.

   Umbruch bei 900px per Media-Query — auto-fit kann ungleiche Spalten nicht
   abbilden (siehe .itk-split).
*/

.itk-duo {
  display: grid;
  grid-template-columns: var(--itk-duo-split, 1fr 1fr);
  gap: var(--itk-grid-gap);
  align-items: start;
}
.itk-duo > * { min-width: 0; }

.itk-duo--wide-left  { --itk-duo-split: 3fr 2fr; }   /* 60 : 40 */
.itk-duo--wide-right { --itk-duo-split: 2fr 3fr; }   /* 40 : 60 */

@media (max-width: 900px) {
  .itk-duo { grid-template-columns: 1fr; }
}


/* --- Formular-Raster ------------------------------------------------------ */
/*
   Zwei Felder nebeneinander, ein Feld ueber die volle Breite. Steckte bis zum
   2026-08-10 im <style>-Block von kontakt.html und newsletter.html und war damit
   der einzige dokumentierte Verstoss gegen die Regel "kein grid-template-columns
   in einer Seite". Eine Ausnahme in einer Fussnote haelt nicht — sie wird zum
   Praezedenzfall, sobald die Regel ein CI-Gate wird. Deshalb hier.

   Warum NICHT .itk-grid: .form-full braucht `grid-column: 1 / -1`, und das
   verhaelt sich mit `auto-fit` nicht verlaesslich — bei kollabierten Tracks ist
   nicht garantiert, worauf sich Linie -1 bezieht. Ein Formular hat ausserdem
   genau zwei Zustaende (zweispaltig, einspaltig) und keine variable Spaltenzahl.

   Breakpoint 640px statt der 900px der uebrigen Muster: Ein Eingabefeld bleibt
   auch schmal bedienbar, eine Textkarte nicht. 640 liegt auf der Breakpoint-Skala
   (480 / 640 / 900 / 1200, Mindestbreite 320 — siehe skills/web-layout.md §2).

   KORRIGIERT 2026-08-10. Beim Verschieben aus den Seiten-<style>-Bloecken kam
   zunaechst deren Wert 560px mit. Der lag neben der Skala und war ausserdem
   wirkungslos: MFN-Notbremse Regel 4 in base.css (@media max-width: 640px)
   zwingt jede Klasse mit "-grid" im Namen per !important auf eine Spalte, und
   .form-grid steht nicht in ihrer Ausnahmeliste. Gemessen an kontakt.html und
   newsletter.html ueber 520/560/580/600/640/700/900px: der tatsaechliche
   Umbruch lag zwischen 640 und 700, nie bei 560.

   Warum die Query trotzdem hier steht, obwohl die Notbremse dasselbe tut: Die
   Notbremse ist Uebergangsware und soll fallen. Danach waere .form-grid ohne
   eigene Regel bei jeder Breite zweispaltig.

   Verwendung:
       <div class="form-grid">
         <div class="form-row">…</div>
         <div class="form-row form-full">…</div>
       </div>
*/

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;                                    /* 16px */
}
.form-grid > * { min-width: 0; }

.form-full { grid-column: 1 / -1; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}


/* --- Sonderfall: asymmetrische Grids ------------------------------------- */
/*
   PASST NICHT INS MUSTER, und das ist kein Versaeumnis.

   "1fr auto 1fr" sind zwei gleichwertige Karten mit einem schmalen Trenner in
   der Mitte. auto-fit kann das nicht abbilden — es verteilt gleich breite
   Spalten und kennt keine Sonderrolle fuer ein mittleres Element.

   Hier bleibt die Media-Query der richtige Weg. skills/web-layout.md §2
   beschreibt deshalb beide Wege: auto-fit als Standard, Media-Query fuer
   asymmetrische Layouts. Breakpoint an der Skala (900 statt der frueheren 760).
*/

.itk-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
}
.itk-split > * { min-width: 0; }

@media (max-width: 900px) {
  .itk-split { grid-template-columns: 1fr; }
}


/* ============================================================================
   UEBERGANG — gehoert NICHT in die Claude-Design-Sections-Library
   ----------------------------------------------------------------------------
   Die folgenden Namen existieren nur, damit bestehende Seiten unveraendert
   weiterlaufen und im HTML nichts angefasst werden muss. Zielbild ist EINE
   Klasse (.itk-grid mit --itk-grid-min am Element) — siehe
   briefings/plan-post-launch.md 4.0 Schritt 2 und 4.1.

   Wer neue Seiten baut, verwendet .itk-grid und setzt --itk-grid-min. Werden
   diese Aliasse in die Bibliothek uebernommen, wird der Uebergang dauerhaft
   und aus 101 Klassennamen werden 120.

   Die Werte treffen die bisherigen Breakpoints — ohne sie zu brauchen.
   ========================================================================== */

.benefits-grid,
.wege-grid,
.social-grid,
.stimmen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--itk-grid-min)), 1fr));
  gap: var(--itk-grid-gap);
}
.benefits-grid > *,
.wege-grid > *,
.social-grid > *,
.stimmen-grid > * { min-width: 0; }

.benefits-grid { --itk-grid-min: 16rem; }     /* 256px — vorher repeat(3,1fr), Breaks 920/560.
     ENG KALIBRIERT: Nur 254–259px reproduzieren den abgenommenen Zustand
     (2 Spalten bei 640, 2 bei 900, 3 bei 1200). Darunter werden es bei 1200px
     vier Spalten, darueber bei 640px nur noch eine. 256px = glatte 16rem.
     Ursache der Enge ist das doppelte Container-Padding aus MFN-Regel 3. */
.wege-grid     { --itk-grid-min: 15rem; }     /* 240px — vorher repeat(4,1fr), Breaks 980/540 */
.social-grid   { --itk-grid-min: 20rem; }     /* 320px — vorher 1fr 1fr, Break 720 */
.stimmen-grid  { --itk-grid-min: 21.25rem; }  /* 340px — vorher 1fr 1fr, Break 860 */

/* .choice-grid ist der Alias auf .itk-split */
.choice-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
}
.choice-grid > * { min-width: 0; }

@media (max-width: 900px) {
  .choice-grid { grid-template-columns: 1fr; }
}