/* Die acht Abschnitte. */

/* 3.1 Hero — Dunkelblau, typografisch, kein Foto. */
.hero {
  background: var(--c-blue);
  color: var(--c-white);
  /* Unter 1024px steht die Löwin über der Überschrift und füllt den Raum
     unter dem Kopfbereich -- daher oben weniger Innenabstand als auf dem
     Desktop. */
  padding-block: calc(var(--s-10) + var(--s-5)) var(--s-9);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .hero { padding-block: calc(var(--s-11) + var(--s-7)) var(--s-10); }
}
/* Der Row-Gap muss die halbe Höhe der Bildmarke decken (Schutzraum, siehe
   .hero__mark unten): sie wächst mit 58vw bis zum Deckel bei 420px, also
   wächst der Gap hier mit 24vw bis zu demselben Deckel-Gedanken bei
   --s-11 -- das hält den Abstand über der halben Höhe auf jeder Breite bis
   1024px, ohne einen festen Pixelwert zu erzwingen, der nur bei einer
   Breite stimmt. */
.hero__inner {
  display: grid;
  /* Schutzraum: mindestens die halbe Höhe der Löwin (Höhe = 0,566 x
     Breite). Sie ist hier höchstens min(46%, 300px) breit -- 14vw liegt auf
     jeder Breite bis 1023px über dieser halben Höhe. */
  gap: clamp(var(--s-7), 14vw, var(--s-9));
}
/* Keine Breitenbegrenzung für den ganzen Textblock (bis 2026-10-07: 22ch,
   das sind bei Fließtextgröße nur rund 200px -- auf dem Telefon blieb rechts
   ein Drittel leer). Die Zeilenlänge regelt der Lead selbst (46ch), die
   Überschrift bricht über .zeile. */
.hero h1 { margin-bottom: var(--s-5); }
.hero .lead { max-width: 46ch; margin-bottom: var(--s-7); }
.hero .eyebrow { color: var(--c-lavender); }
.hero__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  max-width: none;
}
/* Etwas kompakter als der allgemeine .btn (Fix-Runde, Befund 1): nur im
   Hero, wo beide Buttons nebeneinander in der (durch den Hero-Tausch
   schmaleren) Textspalte stehen müssen. Andere Buttons auf der Seite
   bleiben von dieser Verschlankung unberührt. */
.hero .btn { padding: var(--s-4) var(--s-5); }

/* Die Löwin läuft nach rechts. Der freie Raum vor ihr ist Teil des Bildes:
   sie steht links im Feld, vorne wird sie nie angeschnitten und behält in
   Laufrichtung freie Fläche vor der Nase — kein festes Maß dafür. */
/* Telefon und Tablet (seit 2026-10-07): die Löwin steht über der
   Überschrift statt verloren unter den Buttons -- sie führt in den Text,
   wie auf dem Desktop, wo sie links neben ihm steht und auf ihn schaut. */
.hero__mark {
  color: var(--c-white);
  width: min(46%, 300px);
  justify-self: start;
  order: -1;
}

@media (min-width: 1024px) {
  .hero__inner {
    /* Leicht ungleiche Spalten (1fr/1.25fr) statt exakt hälftig: die
       Textspalte bekommt etwas mehr Raum, damit die beiden Buttons in
       .hero__actions nebeneinander passen (Fix-Runde, Befund 1 -- bei
       exakt 1fr/1fr und dem vorherigen großzügigeren Gap stapelten sie
       sich zwischen 1024 und 2560px). Reihenfolge der Spalten-Definition
       folgt der Rasterreihenfolge (erste Spur = erste Spalte), nicht der
       visuellen "order" -- die Löwin (order:1) landet per "order" in der
       ersten Spalte, der Text (order:2) in der zweiten; die zweite Spur
       trägt deshalb den größeren Anteil. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    /* Nicht mehr zentriert: die Löwin richtet sich stattdessen an der
       Überschrift aus (siehe .hero__mark margin-top unten, Fix-Runde,
       Befund 2) statt an der ganzen (viel höheren) Textspalte inklusive
       Lead und Buttons -- das vermied vorher eine große leere Fläche
       oben links. */
    align-items: start;
    /* Kleinerer Gap als in der vorherigen Fassung: Der Schutzraum kommt
       jetzt überwiegend aus dem eigenständig (nicht mehr 100% der Spalte)
       bemessenen .hero__mark unten -- ihre Restspalte links vom Gap trägt
       bereits einen Teil der Schutzfläche bei. Der Gap allein bleibt aber
       weiterhin über der Untergrenze, siehe Bericht (Fix-Runde). */
    gap: clamp(var(--s-6), 5vw, var(--s-9));
  }
  /* Visuelle Reihenfolge getauscht: die Löwin steht links, der Text rechts,
     sodass sie auf den Text schaut (Auftraggeber-Wunsch). Die "order"-
     Eigenschaft ändert nur die Platzierung im Raster, nicht die
     Dokumentreihenfolge im Markup -- der Text bleibt dort vor der Löwin,
     die Überschrift bleibt für Vorlesewerkzeuge und Suchmaschinen das
     erste Element. */
  .hero__text { order: 2; }
  /* Nicht mehr "100% der Spalte, gedeckelt bei 460px": eine von der
     Spaltenbreite unabhängige, moderater wachsende Größe -- das lässt in
     ihrer eigenen Spalte rechts von ihr immer etwas Restfläche übrig
     (zusätzlich zum expliziten Gap), was den Schutzraum trägt, ohne dass
     die Spaltenbreite selbst (und damit der Platz für die Buttons in der
     Textspalte) dafür herhalten müsste. margin-top richtet sie vertikal an
     der Überschrift aus, nicht an der ganzen Textspalte (Fix-Runde, Befund
     2): der Wert nähert sich der halben Höhe von Eyebrow + einem Teil der
     Headline an und wächst mit der Breite mit (die Headline selbst ist
     fluid), beurteilt und angepasst per Screenshot. */
  .hero__mark {
    width: clamp(240px, 28vw, 420px);
    order: 1;
    margin-top: clamp(1.5rem, 6vw, 3.5rem);
  }
}

/* Jede Zeile der Headline ist ein eigenes Element (ersetzt das frühere
   <br>), damit hero-animation.js sie einzeln, zeitlich versetzt einblenden
   kann. Als Block bleibt der Zeilenumbruch derselbe wie vorher. */
.hero h1 .zeile { display: block; }

/* Bewegung (Stufe 2 / Hero-Eröffnung).
   Der Ausgangszustand ohne Skript ist der vollständig sichtbare Hero -- kein
   opacity:0 im Markup oder ungated in dieser Datei. Alles hier greift nur,
   wenn hero-animation.js läuft UND prefers-reduced-motion nicht "reduce"
   ist: erst dann setzt das Skript die Klasse .js-bewegt, unter der diese
   Regeln liegen. Bleibt das Skript aus (kein JavaScript, ein Fehler) oder
   ist Bewegung reduziert, wird .js-bewegt nie gesetzt, und der Hero zeigt
   sofort seinen fertigen Zustand -- das ist keine Notabschaltung, sondern
   eine gleichwertige Variante (siehe base.css, Abschnitt 9 der Spec).

   Die Löwin bewegt sich nicht: sie steht vom ersten Bild an in ihrer
   Ruheposition (seit 2026-09-25, vorher lief sie von links ein).

   Der Ausgangszustand (Text unsichtbar) steht hier absichtlich
   OHNE transition: .js-bewegt setzt ihn, bevor irgendeine transition
   deklariert ist, damit er sofort erscheint -- kein sichtbares Ausblenden
   des Textes. Erst .uebergaenge-aktiv (vom
   Skript nach einem erzwungenen Reflow gesetzt) schaltet die transition
   frei; erst danach löst .text-sichtbar eine tatsächlich
   animierte Änderung aus. Nur das Erscheinen ist Bewegung, das Verschwinden
   nicht (siehe hero-animation.js). */
.hero.js-bewegt .reveal {
  opacity: 0;
  transform: translateY(14px);
}

.hero.js-bewegt.uebergaenge-aktiv .reveal {
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.hero.js-bewegt.text-sichtbar .reveal {
  opacity: 1;
  transform: translateY(0);
}

/* 3.2 Ausgangslage — Creme. Text und Bild mit Schrägschnitt; der frühere
   Zahlenblock ist entfernt (Platzhalterzahlen ohne Beleg, Spec 3.2). */
/* overflow-x: clip ist ein Sicherheitsnetz fuer die Einlaufbewegung (siehe
   unten, ausgangslage-animation.js): das randlose Bild startet ein Stueck
   rechts ausserhalb des Viewports und darf dabei keinen horizontalen
   Scrollbereich erzeugen. "clip" statt "hidden": beschneidet nur
   horizontal, erzeugt keinen eigenen Scrollcontainer und laesst die
   Senkrechte unberuehrt. Nur solange die Bewegung vorbereitet ist oder
   laeuft, nicht dauerhaft: kein-ueberstand nimmt alles unterhalb eines
   beschneidenden Vorfahren von der Pruefung aus -- ein dauerhaftes clip
   wuerde den ganzen Abschnitt still aus dieser Pruefung entfernen. Ohne
   JavaScript, bei reduzierter Bewegung und nach dem Einlauf gilt es daher
   nicht. */
.ausgangslage { background: var(--c-cream); }
.ausgangslage.js-einlauf:not([data-ausgangslage-animiert="fertig"]) { overflow-x: clip; }
.ausgangslage h2 { margin-bottom: var(--s-5); }

/* Textspalte und Porträt, getrennt durch den Schrägschnitt (4.2). Das Bild
   bricht bewusst aus der Inhaltsspalte aus und läuft bis an den
   Browserrand -- volle Blutung nach rechts, ausdrückliche Vorgabe des
   Auftraggebers ("Das Bild soll ganz rechts am Browserrand ansetzen"),
   nach Vorbild von Seite 10 des Manuals, wo die Fläche bis an den
   Papierrand reicht, gleich in welchem Format. Deshalb steckt es nicht in
   .wrap: .ausgangslage__row selbst läuft über die volle Sektionsbreite,
   nur der Text sitzt in einem eigenen, verschachtelten .wrap (damit seine
   linke Kante mit den übrigen Sektionen fluchtet). .ausgangslage__row
   trägt "position: relative", das Bild verankert sich daran mit
   "right: 0" -- das trifft exakt die Browserkante (`clientWidth`), weil
   weder .sec noch .ausgangslage__row selbst horizontales Padding tragen.
   Ab 900px nebeneinander -- darunter wäre ein Nebeneinander gequetscht
   (siehe Begründung bei .schraegschnitt), deshalb gestapelt: Text zuerst,
   Bild darunter, ebenfalls randlos über die volle Breite. */
.ausgangslage__row { position: relative; }
.ausgangslage__text { max-width: 46ch; }

@media (min-width: 900px) {
  .ausgangslage__row {
    /* Fix-Runde 2: Breite und Höhe sind jetzt unabhängig voneinander
       bemessen (zwei eigene Custom Properties statt eines festen
       Seitenverhältnisses), weil beide Vorgaben gleichzeitig gelten und
       sich sonst widersprechen -- "wächst mit dem Viewport bis an dessen
       rechten Rand" (Breite) und "bleibt an der Höhe des Textblocks"
       (Höhe). --bild-hoehe bleibt bei der in der vorherigen Fix-Runde
       gefundenen Spanne (325-400px), die sich der Texthöhe (rund
       280-313px je nach Breite, siehe Bericht) mit spürbarer Zugabe
       annähert -- das war die richtige Antwort auf den Leerraum und
       ändert sich hier nicht. --bild-breite wächst dagegen deutlich mit
       der Viewportbreite (36vw), gedeckelt bei 860px, damit die Textspalte
       auch auf sehr breiten Monitoren nicht erdrückt wird -- bei 1440px
       ergibt das rund 518px (gegenüber 420px in der ursprünglichen und
       320px in der vorigen Fix-Runde), bei 2560px 860px (gedeckelt). 36vw
       statt 40vw, weil 40vw bei genau 900px (dem knappsten Fall: die
       Textspalte ist dort bereits voll ausgereizt, siehe --bild-hoehe)
       das Bild um gut 1px in die Textspalte hätte ragen lassen -- 36vw
       lässt an dieser Stelle rund 35px Luft (siehe Bericht). */
    /* Seit 2026-09-24 läuft das Bild über die volle Sektionshöhe und
       stößt oben an den Hero, unten an die Angebote: der frühere
       Innenabstand der Sektion (--section-y oben und unten) ist in die
       Bildhöhe gewandert, die Gesamthöhe bleibt dieselbe. Der Text steht
       senkrecht mittig daneben. Die Höhe bleibt explizit, sonst ließe sich
       der Schnittwinkel nicht aus ihr berechnen. */
    --bild-hoehe: calc(clamp(325px, 27.5vw, 400px) + 2 * var(--section-y));
    --bild-breite: clamp(300px, 36vw, 860px);
    min-height: var(--bild-hoehe);
    display: flex;
    align-items: center;
  }
  .ausgangslage__row > .wrap { width: 100%; }
  .ausgangslage { padding-block: 0; }
}
@media (max-width: 899.98px) {
  /* Gestapelt: das Bild steht unter dem Text und stößt unten an die
     Angebote. */
  .ausgangslage { padding-bottom: 0; }
}

/* Der Schrägschnitt (4.2) -- die einzige Diagonale der Seite, ausschließlich
   an diesem Bauteil, geprüft durch "keine-diagonalen" in tests/acceptance.js.

   Seit Fix-Runde 2 haben Breite und Höhe kein festes Seitenverhältnis mehr
   (siehe .ausgangslage__row) -- --cut-x wird deshalb nicht mehr aus einem
   angenommenen konstanten Verhältnis (vormals 1,25) hergeleitet, sondern
   aus dem TATSÄCHLICHEN Verhältnis der beiden Custom Properties:
   tan(Winkel) × (Höhe ÷ Breite) × 100%. Damit bleibt der Schnitt bei jeder
   Kombination aus Breite und Höhe exakt 16,2° zur Vertikalen -- die
   Prüfung berechnet den Winkel ohnehin aus den tatsächlich gerenderten
   Pixelmaßen, nicht aus einer angenommenen Boxform. Fallback-Werte im
   var() sind nur für den Fall, dass die Eigenschaften (unterhalb von
   900px) nicht gesetzt sind -- dort ist clip-path ohnehin "none" (siehe
   unten), der Fallback wird also nie sichtbar wirksam.

   Die Schnittfläche liegt vollständig innerhalb der eigenen Box: oben ist
   das Bild um --cut-x von links eingerückt (dort bleibt Creme sichtbar),
   unten reicht es bis zum eigenen linken Rand -- das verjüngt die
   Textfläche nach unten (die Farbfläche im Manual verhält sich ebenso,
   das Bild hier spiegelbildlich, siehe Spec 4.2). Rechts gibt es keine
   Schräge -- dort ist der Bildschirmrand. */
.schraegschnitt {
  --cut-x: calc(tan(var(--cut-angle)) * (var(--bild-hoehe, 400px) / var(--bild-breite, 320px)) * 100%);
  aspect-ratio: 4 / 5;
  clip-path: polygon(var(--cut-x) 0%, 100% 0%, 100% 100%, 0% 100%);
}
.schraegschnitt img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Seit Breite und Höhe unabhängig voneinander wachsen (Fix-Runde 2),
     wird die Box auf breiten Monitoren deutlich flacher als das 4:5-Foto
     (bei 2560px etwa 2,15:1) -- mit der Standardmitte (50% 50%) schneidet
     "cover" dort das Gesicht ab und zeigt vor allem den Kittel. Der
     Fokuspunkt liegt deshalb höher, nahe dem Gesicht im Originalfoto. */
  object-position: 50% 22%;
}

@media (min-width: 900px) {
  .schraegschnitt {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--bild-breite);
    /* Explizite Höhe statt "aspect-ratio" wirken zu lassen: beide Maße
       sind jetzt unabhängig bemessen (siehe .ausgangslage__row), das
       feste Seitenverhältnis von der Basisregel oben wird dadurch bei
       900px+ gegenstandslos (beide Dimensionen sind explizit gesetzt). */
    height: var(--bild-hoehe);
  }
}

/* Unterhalb von 900px kein Nebeneinander mehr möglich, ohne beide Spalten
   zu quetschen -- deshalb gestapelt (siehe .ausgangslage__row). Der Schnitt
   trennt dort aber nichts mehr, er stünde als reines Eckendekor ohne
   Gegenüber: das Bild steht unter dem Text, nicht daneben, und die
   Diagonale hätte keine zweite Fläche mehr, die sie von etwas abgrenzt.
   Sie entfällt deshalb bewusst (statt an eine Bildkante zu wandern) --
   das Bild bleibt ein sauberes Rechteck, randlos über die volle Breite
   (unverändert "aspect-ratio: 4/5" von oben, da hier keine eigene Höhe
   gesetzt wird), mit Abstand zum Text darüber. */
@media (max-width: 899.98px) {
  .schraegschnitt { clip-path: none; margin-top: var(--s-7); }
}

/* Bewegung: beim Eintritt in den sichtbaren Bereich gleitet der Text von
   links, das Bild zugleich von rechts herein (Spec Abschnitt 9 / Stufe 2).

   Wie beim Hero und bei den Etappen: ohne Skript, bei einem Fehler darin
   oder bei reduzierter Bewegung existiert .js-einlauf nie, Text und Bild
   stehen sofort da -- kein opacity:0 ungated in dieser Datei. Das Skript
   setzt .js-einlauf erst, kurz bevor der Abschnitt ins Bild kommt, nicht
   beim Laden. Der Ausgangszustand trägt keine transition; erst
   .uebergaenge-aktiv schaltet sie frei, .eingelaufen löst die Bewegung aus.
   Nur translate und opacity -- der Schrägschnitt (clip-path) wandert mit
   dem Bild unverändert mit, sein Winkel bleibt derselbe. */
.ausgangslage.js-einlauf .ausgangslage__text {
  opacity: 0;
  transform: translateX(-48px);
}
.ausgangslage.js-einlauf .ausgangslage__bild {
  opacity: 0;
  transform: translateX(64px);
}
.ausgangslage.js-einlauf.uebergaenge-aktiv .ausgangslage__text,
.ausgangslage.js-einlauf.uebergaenge-aktiv .ausgangslage__bild {
  transition: opacity 650ms ease, transform 650ms cubic-bezier(.22, 1, .36, 1);
}
.ausgangslage.js-einlauf.eingelaufen .ausgangslage__text,
.ausgangslage.js-einlauf.eingelaufen .ausgangslage__bild {
  opacity: 1;
  transform: translateX(0);
}

/* 3.4 Angebote — Eisblau mit einer weißen Fläche (components.css). Eisblau hatte vorher "Der
   Ansatz"; der Abschnitt ist geparkt (bausteine/ansatz/), Angebote übernimmt
   seine Farbe. So wechseln Creme (Ausgangslage) und Eisblau weiter ab. */
.angebote { background: var(--c-ice); }
/* Breite in rem statt ch: ch misst am Fliesstext, die H2 ist rund dreimal so
   gross -- 40ch liessen die Ueberschrift fuenfzeilig umbrechen. */
.angebote__kopf { max-width: 48rem; margin-bottom: var(--s-8); }


/* 3.5 Die kfd Münster -- seit 2026-10-07 wieder auf der Seite, aber
   zurückgenommen: Creme statt Violett, kleinere Überschrift, kleines Bild (14rem),
   weniger Luft. Ein Hinweis auf die Trägerschaft, kein eigener Tonwechsel. */
.frauen {
  background: var(--c-cream);
  color: var(--c-blue);
  padding-block: clamp(3.5rem, 6vw, 6rem);
}
.frauen h2 { font-size: var(--t-h3); margin-bottom: var(--s-4); }

.frauen__inner {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
/* Das Bild bleibt klein -- ein Beleg, kein Blickfang. */
.frauen__bild { max-width: 14rem; }
@media (min-width: 768px) {
  .frauen__inner { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--s-7); }
}

/* 3.7 Kontakt — Salbei (Versuch seit 2026-10-07, vorher Dunkelblau), Text auf
   dem Grün in Schwarz; die weißen Kontaktkarten behalten Dunkelblau. Ohne die große, links angeschnittene Löwin. */
.kontakt {
  background: var(--c-sage);
  color: var(--c-black);
}
.kontakt .eyebrow { color: var(--c-black); }
.kontakt h2 { margin-bottom: var(--s-5); }
.kontakt .lead { margin-bottom: var(--s-7); }
.kontakt__aktion { max-width: none; }
/* Koralle auf Salbei funktioniert nicht -- im Kontakt steht der Button in
   Violett mit weißer Schrift (5,0:1). Der Hover bleibt die Leiste unten. */
.kontakt .btn--primary { background: var(--c-violet); color: var(--c-white); }

.kontakt__personen {
  display: grid;
  gap: var(--s-4);
}
.kontakt__adresse { font-size: var(--t-small); margin-top: var(--s-2); }

.kontakt__inner {
  display: grid;
  gap: var(--s-8);
  align-items: start;
}
@media (min-width: 900px) {
  .kontakt__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

/* Rechtstexte — schlicht, gleiche Typografie, kein Schrägschnitt. */
.rechtstext {
  background: var(--c-cream);
  padding-block: calc(var(--s-11) + var(--s-5)) var(--s-9);
}
.rechtstext h1 { margin-bottom: var(--s-7); }
/* Nur die Groesse wird reduziert. Familie, Gewicht und Laufweite bleiben
   aus base.css, also Bricolage ExtraBold - so gilt die Manual-Regel auch
   in den Rechtstexten. */
.rechtstext h2 {
  font-size: var(--t-h3);
  margin-top: var(--s-7);
  margin-bottom: var(--s-3);
}
.rechtstext p + p { margin-top: var(--s-4); }
.rechtstext a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }

/* Der Kopfbereich der Rechtsseiten steht auf hellem Grund. */
.site-header--rechts { position: static; color: var(--c-blue); padding-block: var(--s-6); }

/* 404-Seite -- gleiche Typografie wie die Rechtstexte, ein Weg zurück. */
.fehler__aktion { margin-top: var(--s-6); max-width: none; }
.rechtstext .btn--ghost:hover { background: var(--c-blue); color: var(--c-white); border-color: var(--c-blue); }