/* Die acht Abschnitte. */

/* 3.1 Hero — Dunkelblau, typografisch, kein Foto. */
.hero {
  background: var(--c-blue);
  color: var(--c-white);
  padding-block: calc(var(--s-11) + var(--s-7)) var(--s-10);
  overflow: hidden;
}
/* 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;
  gap: min(24vw, var(--s-11));
}
.hero__text { max-width: 22ch; }
.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. */
.hero__mark {
  color: var(--c-white);
  width: min(58%, 420px);
  justify-self: start;
}

@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 { max-width: none; 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).

   Der Ausgangszustand (Löwin versetzt, Text unsichtbar) steht hier absichtlich
   OHNE transition: .js-bewegt setzt ihn, bevor irgendeine transition
   deklariert ist, damit er sofort erscheint -- kein sichtbares Wegspringen
   der Löwin und kein Ausblenden des Textes. Erst .uebergaenge-aktiv (vom
   Skript nach einem erzwungenen Reflow gesetzt) schaltet die transition
   frei; erst danach lösen .loewin-an bzw. .text-sichtbar eine tatsächlich
   animierte Änderung aus. Nur das Erscheinen ist Bewegung, das Verschwinden
   nicht (siehe hero-animation.js).

   --loewin-start setzt hero-animation.js aus der tatsächlich gemessenen
   Position und Breite der Löwin (getBoundingClientRect), bevor es die
   Klasse setzt -- so steht sie zu Beginn immer vollständig außerhalb des
   Viewports, gleich bei welcher Breite. Der Fallback -200% greift nur,
   falls das Skript aus irgendeinem Grund die Property nicht gesetzt haben
   sollte, und ist bewusst großzügig statt exakt. */
.hero.js-bewegt .hero__mark {
  transform: translateX(var(--loewin-start, -200%));
}
.hero.js-bewegt .reveal {
  opacity: 0;
  transform: translateY(14px);
}

/* Sie ruht jetzt links (Hero-Tausch: Löwin links, Text rechts) und legt
   dadurch nur noch einen Bruchteil der Strecke von vorher zurück (rund
   600px statt 1700px bei 1440px Breite) -- die Dauer ist proportional
   gekürzt (1400ms statt 2600ms), sonst wirkt die kürzere Strecke zäh.
   Die Kurve bleibt dieselbe: sie läuft lange weich aus statt abrupt zu
   stoppen ("easeOutQuint"-artig: schnell los, dann über einen langen
   Schweif sanft in die Ruheposition einlaufend). */
.hero.js-bewegt.uebergaenge-aktiv .hero__mark {
  transition: transform 1400ms cubic-bezier(.22, 1, .36, 1);
}
.hero.js-bewegt.uebergaenge-aktiv .reveal {
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.hero.js-bewegt.loewin-an .hero__mark {
  transform: translateX(0);
}
.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 weißen Karten. 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); }

.karten {
  display: grid;
  gap: var(--s-6);
}
/* Die drei Angebote als breite Balken untereinander, ueber die volle
   Inhaltsbreite -- bei jeder Viewportbreite einspaltig. */

/* 3.5 Für die Frauen — der Tonwechsel. Violett bricht die blau-creme-Logik. */
.frauen {
  background: var(--c-violet);
  color: var(--c-white);
}
/* Lavendel auf Violett ergaebe nur 2,0:1 und ist bei 13px zu schwach.
   Die Eyebrow steht deshalb in Weiss (4,9:1). */
.frauen .eyebrow { color: var(--c-white); }
.frauen h2 { margin-bottom: var(--s-5); }
.frauen .lead { margin-bottom: var(--s-4); }
.frauen__link { margin-top: var(--s-6); max-width: none; }

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

/* 3.7 Kontakt — Dunkelblau, der Weg führt aus der Seite heraus.

   Die Löwin läuft nach rechts, hinten ist also links (4.4). Sie steht hier
   groß und wird links angeschnitten, aus der Seite heraus laufend -- vorne
   (rechts, in Laufrichtung), oben und unten bleibt sie vollständig. Der
   Anschnitt selbst entsteht am body (overflow-x: clip, siehe base.css):
   .kontakt beginnt bei x = 0 wie jede Sektion, .kontakt__mark reicht mit
   einem negativen "left" davor -- was den Viewport links verlässt, wird
   dort beschnitten, nicht durch ein eigenes clip-path oder overflow an der
   Sektion. .kontakt trägt trotzdem overflow: hidden als zweite, redundante
   Sicherung (schadet nicht, solange die Marke oben/rechts/unten innerhalb
   der eigenen Box bleibt).

   Schutzraum (4.4): mindestens die halbe Höhe der Bildmarke rundum, frei
   von jedem Element -- auch vom Footer, der als nächstes Geschwister direkt
   unten anschließt, und vom Inhalt darüber. Beide Abstände sind deshalb
   nicht dem Zufall überlassen, sondern gegen den ungünstigsten Fall (die
   Marke bei ihrer größten gerenderten Breite, 360px ab 1440px Viewport,
   Höhe daraus ~203,8px, halbe Höhe ~101,9px) bemessen: 8,75rem (140px)
   Abstand von der Markenunterkante zur Sektionsunterkante (und damit zum
   Footer, der unmittelbar anschließt) bleibt darüber; ein entsprechend
   großzügiger Bodensatz an padding-bottom sichert denselben Abstand nach
   oben zum Inhalt, unabhängig davon, wie hoch der Inhalt bei schmalen
   Breiten wird (padding-bottom zählt immer erst NACH dem Fluss-Inhalt, die
   Marke bleibt an der Sektionsunterkante verankert -- der Abstand ändert
   sich mit der Inhaltshöhe also nicht). Gemessene Abstände siehe Bericht. */
.kontakt {
  background: var(--c-blue);
  color: var(--c-white);
  position: relative;
  overflow: hidden;
  padding-bottom: 31rem;
}
.kontakt .eyebrow { color: var(--c-dove); }
.kontakt h2 { margin-bottom: var(--s-5); }
.kontakt .lead { margin-bottom: var(--s-7); }
.kontakt__aktion { max-width: none; }

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

/* Ton-in-Ton ist laut Manual nur auf hellerem Grund zulässig; auf
   Dunkelblau bleibt die Marke deshalb Weiß und wird ausschließlich über
   die Deckkraft zurückgenommen -- kein abgedunkeltes Blau, das wäre eine
   zehnte Farbe. */
.kontakt__mark {
  position: absolute;
  left: calc(-1 * var(--s-7));
  bottom: 8.75rem;
  width: clamp(160px, 25vw, 360px);
  color: var(--c-white);
  opacity: 0.16;
  z-index: 0;
  pointer-events: none;
}

/* 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); }

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