@import url("tokens.css");

/* ==========================================================================
   Zajadacz Designsystem, system.css
   Stand 08.09.2026, Korrekturrunde 1 nach dem Zweitblick (Opus, Forge).
   Eine Datei fuer alle Komponenten aus KOMPONENTEN.md.
   Regel: keine Farbe und keine Groesse ausserhalb von tokens.css erfinden.
   Wo hier eine nackte Zahl steht, ist sie ein Abstand ohne Figma-Vorlage und
   im BAU-PROTOKOLL.md begruendet.
   ========================================================================== */

/* --- 1. Schrift ---------------------------------------------------------- */

@font-face {
  font-family: "Mark Pro";
  src: url("fonts/Mark-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mark Pro";
  src: url("fonts/Mark-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mark Pro";
  src: url("fonts/Mark-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- 2. Reset ------------------------------------------------------------ */
/* Kein overflow-x: hidden auf body. Es hat zwei echte Ueberlaeufe verdeckt
   (Shop-Zeile bei 1024, Kamm-Strich unter 455). Beide sind jetzt behoben,
   und ein neuer Ueberlauf soll wieder sichtbar werden. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--zj-font);
  font-weight: var(--zj-weight-regular);
  font-size: var(--zj-body-size);
  line-height: var(--zj-body-line);
  letter-spacing: var(--zj-tracking);
  color: var(--zj-text);
  background: var(--zj-white);
  text-wrap: pretty;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; }
table { border-collapse: collapse; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* Fokus: auf Weiss navy (Kontrast 13,8 zu 1), auf dunkler Flaeche gelb.
   Gelb auf Weiss waere 1,5 zu 1 und damit unbrauchbar. */
:focus-visible { outline: 3px solid var(--zj-fokus-farbe, var(--zj-navy)); outline-offset: 2px; }

/* --- 2b. Dunkle Flaechen -------------------------------------------------- */
/* Eine Liste an einer Stelle. Wer eine neue dunkle Flaeche baut, traegt sie
   hier ein, dann stimmen Sekundaerknopf, Umriss-Knopf, Fokus und der gelbe
   Punkt automatisch. Bewusst NICHT in der Liste: .zj-hero--bento (weisser
   Grund, Figma zeigt den Punkt dort navy) und .zj-hero--foto (heller
   Platzhalter). */
.zj-sektion--navy, .zj-sektion--blau,
.zj-hero--bild-rechts, .zj-hero--band,
.zj-trust, .zj-ctaband, .zj-standort, .zj-fusszeile,
.zj-kasten--navy, .zj-karte--blau, .zj-kachel--shop, .zj-auf-dunkel {
  --zj-link-farbe: var(--zj-yellow);
  --zj-umriss-farbe: var(--zj-yellow);
  --zj-fokus-farbe: var(--zj-yellow);
  --zj-punkt-farbe: var(--zj-accent);
  /* 09.09.2026, Abschnitt 33: Hover. Der Text ist hier im Ruhezustand schon
     gelb, ein gelber Hover waere kein Wechsel. Auf dunkel geht der Text
     deshalb auf Weiss, der Marker bleibt gelb. */
  --zj-hover-text: var(--zj-white);
  --zj-hover-flieszlink: var(--zj-yellow);
}

/* --- 3. Ueberschriften und Text (Komponente 3 und 4) --------------------- */

.zj-h1, .zj-h2, .zj-h3 {
  font-weight: var(--zj-weight-bold);
  letter-spacing: var(--zj-tracking);
  text-wrap: balance;
  color: inherit;
}
.zj-h1 { font-size: var(--zj-h1-size); line-height: var(--zj-h1-line); max-width: var(--zj-hero-h1-w); }
.zj-h2 { font-size: var(--zj-h2-size); line-height: var(--zj-h2-line); max-width: var(--zj-h2-w); }
.zj-h3 { font-size: var(--zj-h3-size); line-height: var(--zj-h3-line); }

/* Der Punkt am Satzende ist gelb, aber nur auf dunklem Grund. Auf hellem
   Grund erbt er die Schriftfarbe, so wie beide Figma-Seiten es zeigen
   (gemessen: null gelbe Pixel in allen H2 auf Weiss). */
.zj-punkt { color: var(--zj-punkt-farbe, currentColor); }
/* Ein blaues Wort in der H1 (Startseite: "Elektrogrosshandel") */
.zj-blau { color: var(--zj-blue); font-style: normal; }
/* Eine gelbe Zeile in der H2 (LiKoTECH: "wirklich zahlen.") */
.zj-gelb { color: var(--zj-yellow); font-style: normal; }

/* Schraegstrich vor einer Ueberschrift oder einem Label. Inline-Block vor
   dem Text, nicht Flex-Kind, sonst reisst der Punkt am Satzende ab. */
/* An der Karte haengt der Strich seit 09.09. am Modifier der KARTE, nicht mehr
   an einer Zusatzklasse des Titels (Konsistenzpruefung Befund 3): dieselbe
   Klasse .zj-karte trug ihn mal ja, mal nein, und man sah es der Karte nicht
   an. Jetzt sagt .zj-karte--strich es an der Karte. Ohne den Modifier traegt
   eine Karte kein Markenzeichen, das ist die Voreinstellung. */
.zj-h1--slash, .zj-h2--slash, .zj-h3--slash, .zj-slash,
.zj-karte--strich .zj-karte__titel { display: block; max-width: none; }
.zj-h1--slash::before, .zj-h2--slash::before, .zj-h3--slash::before, .zj-slash::before,
.zj-karte--strich .zj-karte__titel::before {
  content: "";
  display: inline-block; vertical-align: baseline;
  width: var(--zj-card-slash-w);
  height: var(--zj-card-slash-h);
  margin-right: var(--zj-card-slash-gap);
  background: var(--zj-accent);
  clip-path: polygon(71.43% 0, 100% 0, 28.57% 100%, 0 100%);
}

/* max-width: Figma begrenzt jede Textspalte auf 875 px (H2 auf 894). In schmalen
   Containern (Karte 329, Person 255) greift die Grenze nicht, dort bleibt alles wie es war. */
.zj-lead  { font-size: var(--zj-body-size); line-height: var(--zj-body-line); font-weight: var(--zj-weight-medium); max-width: var(--zj-text-w); }
.zj-body  { font-size: var(--zj-body-size); line-height: var(--zj-body-line); max-width: var(--zj-text-w); }
.zj-body + .zj-body { margin-top: var(--zj-body-line); }
.zj-body strong, .zj-lead strong { font-weight: var(--zj-weight-bold); }
.zj-note  { display: none; }           /* Wireframe-Annotation, im Design aus */
.zj-note.is-sichtbar { display: block; font-size: var(--zj-small-size); opacity: .7; }
.zj-claim { font-size: var(--zj-h2-size); line-height: var(--zj-h2-line); font-weight: var(--zj-weight-bold); }
.zj-claim__wort { font-size: 1.8em; line-height: 1; color: var(--zj-yellow); }
.zj-manifest > p + p { margin-top: var(--zj-body-line); }
.zj-manifest--summe > p { font-weight: var(--zj-weight-bold); }

/* --- 4. Eyebrow (Komponente 2) ------------------------------------------ */

.zj-eyebrow {
  display: block;
  font-size: var(--zj-eyebrow-size);
  line-height: var(--zj-eyebrow-line);
  font-weight: var(--zj-weight-regular);
  color: var(--zj-blue);
}
.zj-eyebrow--hell   { color: var(--zj-blue); }
.zj-eyebrow--dunkel { color: var(--zj-accent); }
.zj-eyebrow--caps   { text-transform: uppercase; font-size: var(--zj-small-size);
                      letter-spacing: .08em; font-weight: var(--zj-weight-bold); }
.zj-eyebrow--kpz {
  display: inline-flex; align-items: center; gap: var(--zj-abstand-12);
  color: var(--zj-yellow);
  font-weight: var(--zj-weight-bold);
  font-size: var(--zj-eyebrow-kpz-size);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.zj-eyebrow--kpz .zj-icon { width: var(--zj-kpz-icon); height: var(--zj-kpz-icon); }

/* --- 5. Icons (Komponente 7) -------------------------------------------- */

.zj-sprite { display: none; }   /* das Symbol-Sprite selbst wird nie gezeigt */
.zj-icon { display: inline-block; fill: currentColor; color: inherit; flex: none; }
.zj-icon--pfeil { width: var(--zj-arrow-w); height: var(--zj-arrow-h); }
.zj-icon--schraegstrich { width: var(--zj-card-slash-w); height: var(--zj-card-slash-h); }
.zj-icon--haken { width: var(--zj-haken); height: var(--zj-haken); }
.zj-icon--chevron { width: 12px; height: 8px; }
.zj-icon--extern { width: 12px; height: 12px; }

/* --- 6. Buttons (Komponente 1) ------------------------------------------ */

.zj-button {
  display: inline-flex; align-items: center;
  font-size: var(--zj-small-size); line-height: var(--zj-small-line);
  font-weight: var(--zj-weight-bold);
  letter-spacing: var(--zj-tracking);
  text-decoration: none; cursor: pointer;
}
/* Externer Link. Das Zeichen kommt aus dem Attribut, damit im HTML nur
   data-extern steht und kein zusaetzliches Markup noetig ist. */
.zj-button[data-extern]::after,
a[data-extern]::after { content: "\2197"; margin-left: var(--zj-abstand-8); font-size: .9em; }

/* 6a. Primaer: gelber Koerper mit schraeger rechter Kante plus abgetrennter
   Strich. Geometrie 1:1 aus Figma Group 51 (192,5 x 43): Koerper oben 0..168,5,
   unten 0..148; Strich oben 180,5..192,5, unten 160..172. */
.zj-button--primaer {
  position: relative; isolation: isolate;
  height: var(--zj-btn-h);
  padding-left: var(--zj-btn-pad-x);
  padding-right: calc(var(--zj-btn-pad-x) + var(--zj-btn-slant));
  color: var(--zj-navy);
  margin-right: calc(var(--zj-btn-slash-gap) + var(--zj-btn-slash-w));
}
.zj-button--primaer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--zj-yellow);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--zj-btn-slant)) 100%, 0 100%);
}
.zj-button--primaer::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: -1;
  left: calc(100% - var(--zj-btn-slant) + var(--zj-btn-slash-w));
  width: calc(var(--zj-btn-slant) + var(--zj-btn-slash-w));
  background: var(--zj-yellow);
  clip-path: polygon(var(--zj-btn-slant) 0, 100% 0,
                     var(--zj-btn-slash-w) 100%, 0 100%);
}

/* 6b. Sekundaer: Textlink mit Pfeil. Farbe kommt aus der Flaeche. */
.zj-button--sekundaer { gap: var(--zj-abstand-16); color: var(--zj-link-farbe, var(--zj-navy)); }
.zj-button--sekundaer .zj-icon--pfeil { transition: transform .15s ease; }
.zj-button--sekundaer:hover .zj-icon--pfeil { transform: translateX(4px); }
.zj-button--sekundaer.zj-button--gross { font-size: var(--zj-body-size); }
/* Der Sammel-Link traegt im Textmaster einen Pfeil als Schriftzeichen. Er
   bleibt Zeichen, damit der Text-Freeze haelt; das Pfeil-Icon entfaellt dort. */
.zj-button--pfeilzeichen { gap: 0; }

/* 6c. Umriss */
.zj-button--umriss {
  justify-content: center;
  min-width: var(--zj-btn-umriss-w); height: var(--zj-btn-umriss-h);
  border: var(--zj-btn-outline) solid var(--zj-umriss-farbe, var(--zj-navy));
  color: var(--zj-umriss-farbe, var(--zj-navy));
  background: transparent;
}

/* Buttonzeile */
.zj-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zj-abstand-20) var(--zj-abstand-32); }

/* --- 7. Listen (Komponente 5) ------------------------------------------- */

.zj-liste { display: grid; gap: var(--zj-abstand-12); }
.zj-liste--haken > li { display: grid; grid-template-columns: 27px 1fr; align-items: start;
                        font-weight: var(--zj-weight-medium); }
.zj-liste--haken > li > .zj-icon { margin-top: .35em; color: var(--zj-link-farbe, var(--zj-navy)); }
.zj-liste--punkt > li { position: relative; padding-left: var(--zj-liste-einzug); }
.zj-liste--punkt > li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}
.zj-liste--auftakt > li > strong { font-weight: var(--zj-weight-bold); }
.zj-liste--linie { gap: var(--zj-abstand-20); }
.zj-liste--linie > li { border-left: 3px solid var(--zj-yellow); padding-left: var(--zj-abstand-16); }
.zj-liste--linie .zj-liste__titel { display: block; font-weight: var(--zj-weight-bold); }
.zj-liste--icon > li { display: flex; align-items: center; gap: var(--zj-abstand-16); }
.zj-liste__chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--zj-bedien-h); height: var(--zj-bedien-h); flex: none;
  border: 1px dashed var(--zj-linie); border-radius: var(--zj-card-radius);
  font-size: var(--zj-small-size);
}

/* --- 8. Pills (Komponente 6) -------------------------------------------- */

.zj-pills { display: flex; flex-wrap: wrap; gap: var(--zj-abstand-12); align-items: center; }
.zj-pills--filter { gap: var(--zj-abstand-12) var(--zj-abstand-16); }
.zj-pills--filter .zj-pills__label {
  font-size: var(--zj-small-size); font-weight: var(--zj-weight-bold);
  text-transform: uppercase; letter-spacing: .08em; margin-right: var(--zj-abstand-8);
}
.zj-pill {
  display: inline-flex; align-items: center; gap: var(--zj-abstand-8);
  padding: var(--zj-abstand-8) var(--zj-abstand-16); border-radius: 999px;
  font-size: var(--zj-small-size); line-height: 1.2;
  font-weight: var(--zj-weight-medium);
  background: var(--zj-grey); color: var(--zj-navy);
  border: 1px solid transparent; text-decoration: none;
}
.zj-pill--erfolg  { background: var(--zj-blue); color: var(--zj-white); }
.zj-pill--warnung { background: var(--zj-yellow); color: var(--zj-navy);
                    font-weight: var(--zj-weight-bold); text-transform: uppercase; }
.zj-pill.is-aktiv { background: var(--zj-navy); color: var(--zj-white); }
.zj-pill.is-versteckt { display: none; }

/* --- 9. Seite und Inhalt (Komponente 8) --------------------------------- */

.zj-seite { display: flow-root; }
.zj-inhalt { width: 100%; padding-inline: var(--zj-rand); }
/* Schmale Textspalte: 894 px Inhalt, unabhaengig vom Seitenrand. */
.zj-inhalt--schmal { max-width: calc(var(--zj-schmal-w) + 2 * var(--zj-rand));
                     margin-inline: auto; }

/* --- 10. Sektion (Komponente 9) ----------------------------------------- */

.zj-sektion { padding-block: var(--zj-section-pad-top) var(--zj-section-pad-bottom); }
.zj-sektion--weiss { background: var(--zj-white); color: var(--zj-text); }
.zj-sektion--grau  { background: var(--zj-grey);  color: var(--zj-text); }
.zj-sektion--gelb  { background: var(--zj-yellow);color: var(--zj-navy); }
.zj-sektion--navy  { background: var(--zj-navy);  color: var(--zj-text-invert); }
.zj-sektion--blau  { background: var(--zj-blue);  color: var(--zj-text-invert); }
.zj-sektion--navy .zj-eyebrow, .zj-sektion--blau .zj-eyebrow { color: var(--zj-yellow); }
.zj-sektion--eng { padding-block: var(--zj-abstand-48); }

.zj-sektion__kopf > .zj-eyebrow + .zj-h2 { margin-top: var(--zj-eyebrow-to-h2); }
.zj-sektion__kopf > .zj-h2 + .zj-lead,
.zj-sektion__kopf > .zj-h2 + .zj-body { margin-top: var(--zj-h2-to-lead); }
.zj-sektion__kopf--zentriert { text-align: center; }
.zj-sektion__kopf--zentriert .zj-h1,
.zj-sektion__kopf--zentriert .zj-h2,
.zj-sektion__kopf--zentriert .zj-lead,
.zj-sektion__kopf--zentriert .zj-body { margin-inline: auto; }
.zj-sektion__kopf + * { margin-top: var(--zj-lead-to-grid); }
.zj-sektion__fuss { margin-top: var(--zj-abstand-40); }

/* --- 11. Raster (Komponente 10) ----------------------------------------- */

.zj-raster { display: grid; gap: var(--zj-gap); }
.zj-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Dreispalter: bei 1268 Inhalt und 20 Abstand sind das die 409 aus --zj-col-3 */
.zj-raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zj-raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Bento: Reihe 1 zwei Karten, Reihe 2 drei Karten */
.zj-raster--bento-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.zj-raster--bento-5 > :nth-child(-n+2) { grid-column: span 3; }
.zj-raster--bento-5 > :nth-child(n+3)  { grid-column: span 2; }
/* Bild und Text nebeneinander, Bild links (Standard) */
.zj-raster--bild-text { grid-template-columns: 2fr 3fr; align-items: center; }
.zj-raster--bild-text.zj-raster--bild-rechts > :first-child { order: 2; }
/* Detail: Hauptspalte plus klebende Seitenspalte */
.zj-raster--detail { grid-template-columns: 2fr 1fr; align-items: start; gap: var(--zj-abstand-40); }
.zj-raster--detail > aside { position: sticky; top: calc(var(--zj-header-h) + var(--zj-abstand-20)); }
/* Startseiten-Zweispalter aus dem Kanon */
.zj-raster--374-873 { grid-template-columns: 374fr 873fr; }
.zj-raster--749-499 { grid-template-columns: 749fr 499fr; }

/* --- 12. Bildplatzhalter ------------------------------------------------ */

.zj-bild {
  display: flex; align-items: center; justify-content: center;
  padding: var(--zj-abstand-16); text-align: center;
  background: var(--zj-platzhalter);
  color: var(--zj-navy);
  font-size: var(--zj-small-size); line-height: 1.35;
  border-radius: var(--zj-card-radius);
  min-height: var(--zj-karte-bild-h);
}
.zj-bild--4-3  { aspect-ratio: 4 / 3; }
.zj-bild--16-9 { aspect-ratio: 16 / 9; }
.zj-bild--1-1  { aspect-ratio: 1 / 1; }
.zj-bild--voll { height: 100%; border-radius: 0; min-height: 260px; }
/* Bild ueber die volle Inhaltsbreite, Text darueber. Figma stellt die Halle so. */
.zj-bild--breit { height: var(--zj-bild-breit-h); min-height: var(--zj-bild-breit-h); }
.zj-bild--band { min-height: 260px; border-radius: 0; }
.zj-bild--weiss { background: var(--zj-white); }
.zj-bild__text { max-width: 46ch; }

/* --- 13. Kopfzeile (Komponente 11) -------------------------------------- */

.zj-kopfzeile {
  position: relative; z-index: 40;
  background: var(--zj-white); color: var(--zj-navy);
}
.zj-kopfzeile__leiste {
  display: flex; align-items: center; gap: var(--zj-abstand-24);
  height: var(--zj-header-h);
}
.zj-kopfzeile__logo { flex: none; }
.zj-kopfzeile__logo img { width: var(--zj-logo-w); height: var(--zj-logo-h); }
.zj-kopfzeile__nav { display: flex; align-items: center; gap: var(--zj-abstand-8); margin-left: auto; }
.zj-kopfzeile__link {
  display: inline-flex; align-items: center; gap: var(--zj-abstand-8);
  height: var(--zj-nav-active-h); padding-inline: var(--zj-abstand-24);
  font-size: var(--zj-nav-size); line-height: var(--zj-nav-line);
  font-weight: var(--zj-weight-bold); text-decoration: none;
  border-radius: 4px; white-space: nowrap;
}
.zj-kopfzeile__link.is-aktiv {
  min-width: var(--zj-nav-active-w); justify-content: center;
  background: var(--zj-navy); color: var(--zj-white);
}
.zj-kopfzeile__cta { flex: none; margin-left: var(--zj-abstand-24); }
.zj-kopfzeile__burger { display: none; margin-left: auto; padding: var(--zj-abstand-12); cursor: pointer; }
.zj-kopfzeile__burger span {
  display: block; width: 24px; height: 2px; background: var(--zj-navy);
}
.zj-kopfzeile__burger span + span { margin-top: var(--zj-abstand-4); }

/* Megamenue. Bezug ist die KOPFZEILE, nicht der Menuepunkt: nur so laeuft die
   Klappe vollbreit und die Karten bekommen ihre 409 px. */
.zj-kopfzeile__punkt { display: contents; }
.zj-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--zj-white); color: var(--zj-navy);
  border-top: 1px solid var(--zj-linie);
  box-shadow: 0 18px 40px rgba(20, 40, 100, .12);
  padding-block: var(--zj-abstand-40);
  max-height: var(--zj-mega-max-h); overflow: auto;
}
.zj-mega[hidden] { display: none; }
/* Ohne JavaScript oeffnet die Klappe per Hover und per Tastatur-Fokus.
   Das Skript verbessert nur (Klick, Escape, Klick nach aussen). */
.zj-kopfzeile__punkt:hover > .zj-mega[hidden],
.zj-kopfzeile__punkt:focus-within > .zj-mega[hidden] { display: block; }
.zj-mega__raster { display: grid; gap: var(--zj-gap); margin-top: var(--zj-abstand-24); }
.zj-mega__raster--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zj-mega__raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zj-mega__fuss { margin-top: var(--zj-abstand-32); display: flex; flex-wrap: wrap; align-items: center; gap: var(--zj-abstand-12) var(--zj-abstand-24); }
.zj-kopfzeile__trigger .zj-icon--chevron { transition: transform .15s ease; }
.zj-kopfzeile__trigger[aria-expanded="true"] .zj-icon--chevron { transform: rotate(180deg); }

/* Flache Kopfzeile (Karriere) */
.zj-kopfzeile--flach .zj-kopfzeile__link { padding-inline: var(--zj-abstand-16); font-size: var(--zj-small-size); }
.zj-kopfzeile__marke {
  font-size: var(--zj-small-size); font-weight: var(--zj-weight-bold);
  text-transform: uppercase; letter-spacing: .08em; color: var(--zj-blue);
  margin-left: var(--zj-abstand-12);
}

/* --- 14. Hero (Komponente 12) ------------------------------------------- */

.zj-hero { position: relative; }
.zj-hero__text { display: grid; align-content: center; gap: 0; }
.zj-hero__text > .zj-eyebrow + .zj-h1 { margin-top: var(--zj-abstand-32); }
.zj-hero__text > .zj-h1 + * { margin-top: var(--zj-abstand-40); }
.zj-hero__text > * + .zj-buttons { margin-top: var(--zj-abstand-48); }

/* 14a. Bild rechts, navy, 800 hoch. Bild 748 breit ab x 979 bei 1728. */
.zj-hero--bild-rechts {
  background: var(--zj-navy); color: var(--zj-text-invert);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--zj-hero-img-w));
  min-height: var(--zj-hero-h);
  /* Query-Container, damit die Textspalte den Rand aus der SEITENbreite
     rechnen kann und nicht aus ihrer eigenen. Ohne das fiel der Rand auf den
     Mindestwert zurueck und der Hero-Text stand bei x 24 statt 230 (Simeon
     09.09.2026: "der Hero header geht ueber die ganze Breite"). */
  container-type: inline-size;
}
.zj-hero--bild-rechts .zj-hero__text {
  padding: var(--zj-abstand-80) var(--zj-gap) var(--zj-abstand-80) var(--zj-rand-cq);
}
.zj-hero--bild-rechts .zj-hero__bild { min-height: 100%; }
.zj-hero--bild-rechts .zj-bild { height: 100%; border-radius: 0; }

/* 14b. Bento, Startseite: Text links, Kachelfeld rechts, beide 624 breit */
.zj-hero--bento .zj-hero__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--zj-gap); padding-block: var(--zj-abstand-40) 0;
}
.zj-hero__kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--zj-gap); }
.zj-hero__spalte { display: grid; gap: var(--zj-gap); align-content: start; }
.zj-hero__spalte--versatz { padding-top: var(--zj-abstand-40); }
.zj-hero__kachel { position: relative; overflow: hidden; }
.zj-hero__kachel .zj-bild { border-radius: 0; min-height: 210px; height: 100%; }
.zj-hero__kachel-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  min-height: var(--zj-bento-label-h);
  display: flex; align-items: center; padding-inline: var(--zj-abstand-12);
  background: var(--zj-navy); color: var(--zj-white);
  font-size: var(--zj-body-size); font-weight: var(--zj-weight-bold);
}
.zj-kachel--shop {
  background: var(--zj-blue); color: var(--zj-text-invert);
  padding: var(--zj-abstand-24); display: grid; align-content: center; gap: var(--zj-abstand-12); min-height: 250px;
}
/* clamp statt fester 54 px: zwischen 900 und 1200 lief die Zeile sonst
   ueber die Kachel und ueber den Seitenrand hinaus. */
.zj-kachel__zeile {
  font-size: clamp(26px, 3.2vw, var(--zj-h1-size));
  line-height: 1.05; font-weight: var(--zj-weight-bold);
  overflow-wrap: anywhere;
}

/* 14c. Textband, 14d. Fotobox, 14e. Bildband */
.zj-hero--band { background: var(--zj-navy); color: var(--zj-text-invert); padding-block: var(--zj-abstand-96); }
.zj-hero--foto { position: relative; }
.zj-hero--foto .zj-hero__box {
  min-height: 420px; display: grid; align-content: center; justify-items: center;
  gap: var(--zj-abstand-24); text-align: center; padding: var(--zj-abstand-48) var(--zj-abstand-24);
  background: var(--zj-platzhalter); color: var(--zj-navy);
}
.zj-hero__scroll {
  font-size: var(--zj-small-size); text-transform: uppercase; letter-spacing: .12em;
  font-weight: var(--zj-weight-bold);
}
.zj-hero--bildband .zj-hero__text { padding-block: var(--zj-abstand-48) 0; }

/* --- 15. Karte (Komponente 13) ------------------------------------------ */
/* Abstand kommt ausschliesslich ueber Margin, nicht zusaetzlich ueber Gap.
   Vorher addierten sich 14 px Gap und 25 px Margin zu 39 px zwischen zwei
   Absaetzen, waehrend dieselben zwei Absaetze in einer Textsektion 25 px
   auseinander standen. */
.zj-karte {
  display: flex; flex-direction: column;
  background: var(--zj-grey); color: var(--zj-navy);
  border-radius: var(--zj-card-radius);
  overflow: hidden;
  text-decoration: none;
}
.zj-karte__inhalt {
  padding: var(--zj-card-pad-top) var(--zj-card-pad) var(--zj-card-pad);
  display: flex; flex-direction: column; flex: 1;
}
.zj-karte__inhalt > * + * { margin-top: var(--zj-abstand-16); }
.zj-karte__bild { border-radius: 0; min-height: var(--zj-karte-bild-h); }
.zj-karte--gelb  { background: var(--zj-yellow); }
.zj-karte--weiss { background: var(--zj-white); }
.zj-karte--blau  { background: var(--zj-blue); color: var(--zj-text-invert); }
.zj-karte--blau .zj-eyebrow { color: var(--zj-yellow); }
.zj-karte__eyebrow + .zj-karte__titel { margin-top: var(--zj-abstand-24); }
.zj-karte__nummer {
  font-size: var(--zj-h3-size); line-height: 1; font-weight: var(--zj-weight-bold);
  color: var(--zj-blue);
}
.zj-karte__chip {
  width: var(--zj-bedien-h); height: var(--zj-bedien-h); display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--zj-card-radius); background: var(--zj-white);
  font-size: var(--zj-small-size); font-weight: var(--zj-weight-bold);
}
.zj-karte__kennzahl { font-size: var(--zj-small-size); opacity: .8; }
.zj-karte .zj-buttons, .zj-karte .zj-button--sekundaer { margin-top: auto; padding-top: var(--zj-abstand-16); }

/* --- 13a. Zitat (Komponente 13a) ---------------------------------------- */
/* Zwei Formen: als Karte (Branchen-Trust) und als Randlinie im BildText. */
.zj-zitat {
  background: var(--zj-grey); color: var(--zj-navy);
  border-radius: var(--zj-card-radius);
  padding: var(--zj-card-pad-top) var(--zj-card-pad) var(--zj-card-pad);
}
.zj-zitat__text { font-style: italic; }
.zj-zitat__quelle { margin-top: var(--zj-abstand-16); }
.zj-zitat--linie { background: none; border-radius: 0; padding: 0 0 0 var(--zj-abstand-16);
                   border-left: 3px solid var(--zj-yellow); }
.zj-trust .zj-zitat { background: var(--zj-white); }

/* --- 13b. Kachel (Komponente 13b) --------------------------------------- */
/* Foto mit Label und Button darauf. Verlauf unter dem Text, damit der Titel
   auch auf einem hellen Foto lesbar bleibt. */
.zj-kachel {
  position: relative; min-height: 220px; overflow: hidden;
  border-radius: var(--zj-card-radius); display: flex;
}
.zj-kachel .zj-bild { position: absolute; inset: 0; height: 100%; border-radius: inherit; }
.zj-kachel__inhalt {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: var(--zj-abstand-16); padding: var(--zj-card-pad);
  background: linear-gradient(transparent, rgba(20, 40, 100, .75));
}
.zj-kachel__titel { color: var(--zj-white); }

/* --- 13c. Cluster (Komponente 13c) -------------------------------------- */
.zj-cluster { background: var(--zj-grey); color: var(--zj-navy);
              border-radius: var(--zj-card-radius);
              padding: var(--zj-card-pad-top) var(--zj-card-pad) var(--zj-card-pad); }
.zj-cluster > * + * { margin-top: var(--zj-abstand-16); }
.zj-cluster__marken { font-size: var(--zj-small-size); }
.zj-cluster__range { font-style: italic; font-size: var(--zj-small-size); }

/* --- 13d. Megakarte (Komponente 13d) ------------------------------------ */
.zj-megakarte { display: block; text-decoration: none; padding: var(--zj-abstand-12) 0; }
.zj-megakarte__titel { display: block; }
.zj-megakarte__lead { display: block; margin-top: var(--zj-abstand-4); }
.zj-megakarte.is-aktuell .zj-megakarte__titel,
.zj-megakarte.is-aktiv .zj-megakarte__titel { color: var(--zj-blue); }

/* --- 16. Trust (Komponente 14) ------------------------------------------ */

.zj-trust { background: var(--zj-navy); color: var(--zj-text-invert); }
.zj-trust__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zj-gap); }
.zj-trust__raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zj-trust__raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zj-trust .zj-karte { background: var(--zj-white); min-height: var(--zj-trust-karte-h); }

/* --- 17. LogoStrip (Komponente 15) -------------------------------------- */

.zj-logostrip { background: var(--zj-grey); min-height: var(--zj-logo-strip-h);
                display: flex; align-items: center; padding-block: var(--zj-abstand-24); }
.zj-logostrip__band { display: flex; align-items: center; gap: var(--zj-abstand-64); flex-wrap: wrap;
                      justify-content: center; width: 100%; }
.zj-logostrip__item { display: grid; justify-items: center; gap: var(--zj-abstand-8); }
.zj-logostrip__item img { height: 26px; width: auto; }
.zj-logostrip__caption { font-size: var(--zj-logo-caption-size); line-height: 1.2; }
.zj-logostrip__platz {
  width: var(--zj-logostrip-platz-w); height: 26px; display: flex; align-items: center; justify-content: center;
  background: var(--zj-platzhalter); color: var(--zj-navy);
  font-size: 11px; font-weight: var(--zj-weight-bold); letter-spacing: .04em;
}
.zj-logostrip--namen .zj-logostrip__band { gap: var(--zj-abstand-12) var(--zj-abstand-20); font-weight: var(--zj-weight-medium); }
.zj-logostrip--namen .zj-logostrip__trenner { opacity: .5; }
.zj-logostrip--kennzahlen .zj-logostrip__band {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; gap: var(--zj-gap);
}
.zj-logostrip__zahl { display: block; font-size: var(--zj-h2-size); line-height: 1.1;
                      font-weight: var(--zj-weight-bold); }
.zj-logostrip__label { font-size: var(--zj-small-size); }

/* --- 18. Personen (Komponente 16) --------------------------------------- */

.zj-personen__gruppe + .zj-personen__gruppe { margin-top: var(--zj-personen-gruppe); }
.zj-personen__label {
  font-size: var(--zj-h3-size); line-height: var(--zj-h3-line);
  font-weight: var(--zj-weight-bold); text-transform: uppercase;
  margin-bottom: var(--zj-abstand-24);
}
.zj-personen__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zj-gap); }
.zj-person {
  display: grid; grid-template-columns: var(--zj-person-photo-w) 1fr;
  min-height: var(--zj-person-h);
  background: var(--zj-grey); color: var(--zj-navy);
  border-radius: var(--zj-card-radius); overflow: hidden;
}
.zj-person__foto { background: var(--zj-platzhalter); display: flex; align-items: center;
                   justify-content: center; font-size: 12px; text-align: center; }
.zj-person__meta { padding: var(--zj-person-pad-top) var(--zj-person-gap); }
.zj-person__name { display: block; font-weight: var(--zj-weight-bold); }
.zj-person__fn { display: block; }
.zj-person--leitung { max-width: 634px; }
.zj-person--watch { border: 2px dashed var(--zj-linie); background: transparent; }
.zj-person--watch .zj-person__foto { background: repeating-linear-gradient(
    45deg, var(--zj-linie-invers) 0 6px, transparent 6px 12px); }
.zj-personen__kontakt { margin-top: var(--zj-abstand-48); }

/* --- 19. Querverweis (Komponente 17) ------------------------------------ */

.zj-querverweis__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zj-gap); }
.zj-querverweis .zj-karte__bild { min-height: var(--zj-cross-bild-h); }
.zj-querverweis__z { color: var(--zj-yellow); }

/* --- 20. CTA-Band (Komponente 18) --------------------------------------- */
/* Kein Eyebrow (Simeon 08.09.). Der H2 sitzt an der Stelle, an der in Figma
   die Eyebrow-Zeile stand, also 78 px unter der Bandkante. */
.zj-ctaband {
  background: var(--zj-blue); color: var(--zj-text-invert);
  min-height: var(--zj-cta-band-h);
  display: grid; align-content: center;
  padding-block: var(--zj-section-pad-top) var(--zj-section-pad-bottom);
}
.zj-ctaband .zj-h2 + .zj-body { margin-top: var(--zj-h2-to-lead); }
.zj-ctaband .zj-buttons { margin-top: var(--zj-abstand-48); }
.zj-ctaband--kurz { min-height: 0; padding-block: var(--zj-abstand-64); }

/* --- 21. BildText (Komponente 19) --------------------------------------- */

.zj-bildtext__raster { display: grid; grid-template-columns: 2fr 3fr; gap: var(--zj-abstand-64); align-items: center; }
.zj-bildtext--bild-rechts .zj-bildtext__bild { order: 2; }
.zj-bildtext__text > * + * { margin-top: var(--zj-abstand-24); }
.zj-bildtext__qr { display: grid; gap: var(--zj-abstand-8); justify-items: start; }
.zj-bildtext__qr .zj-bild { width: var(--zj-qr-w); min-height: var(--zj-qr-w); }
.zj-badges { display: flex; gap: var(--zj-gap); flex-wrap: wrap; }
.zj-badges .zj-bild { width: 190px; min-height: 90px; }

/* --- 22. Tabelle (Komponente 20) ---------------------------------------- */

.zj-tabelle { width: 100%; background: var(--zj-white); color: var(--zj-navy);
              border: 1px solid var(--zj-linie); border-radius: var(--zj-card-radius);
              overflow: hidden; font-size: var(--zj-body-size); }
.zj-tabelle th, .zj-tabelle td { padding: var(--zj-abstand-12) var(--zj-abstand-16); height: var(--zj-bedien-h); text-align: left;
                                 border-bottom: 1px solid var(--zj-linie); }
.zj-tabelle thead th { background: var(--zj-grey); font-weight: var(--zj-weight-bold); }
.zj-tabelle tbody tr:last-child td { border-bottom: 0; }
.zj-tabelle__zahl { text-align: right; }
.zj-tabelle__rolle { overflow-x: auto; }
.zj-tabelle--tco { max-width: var(--zj-schmal-w); }
/* Stellentabelle: vier Spalten, verlinkte Zeilen */
.zj-tabelle--stellen td a { font-weight: var(--zj-weight-bold); text-decoration: underline;
                            text-underline-offset: 3px; }
.zj-tabelle--stellen tbody tr:hover { background: var(--zj-grey); }

/* --- 23. Kasten (Komponente 21) ----------------------------------------- */

.zj-kasten { background: var(--zj-grey); color: var(--zj-navy);
             border-radius: var(--zj-card-radius); padding: var(--zj-abstand-40); }
.zj-kasten > * + * { margin-top: var(--zj-abstand-20); }
.zj-kasten--hellblau { background: var(--zj-hellblau); }
.zj-kasten--gelb { background: var(--zj-yellow); }
.zj-kasten--navy { background: var(--zj-navy); color: var(--zj-text-invert); }
.zj-kasten--navy .zj-eyebrow { color: var(--zj-yellow); }
.zj-kasten--kante { border-left: 8px solid var(--zj-yellow); }

/* --- 24. Standort (Komponente 22) --------------------------------------- */

.zj-standort { background: var(--zj-blue); color: var(--zj-text-invert); min-height: 754px;
               display: grid; align-content: center;
               padding-block: var(--zj-section-pad-top) var(--zj-section-pad-bottom); }
/* Die Karte ist 773 px breit, kein Verhaeltnis. Die Textspalte nimmt den Rest. */
/* Die Karte bleibt im Raster (Simeon 09.09.: „Standort muss ins Raster passen"). Figma
   laesst sie 149 px ueber die Inhaltsbreite ragen; wir nehmen die Rasterdisziplin.
   Die Textspalte haelt die Mindestbreite der Knopfzeile, die Karte nimmt den Rest. */
.zj-standort__raster { display: grid;
  grid-template-columns: minmax(var(--zj-standort-text-min), 1fr) minmax(0, var(--zj-karte-nord-w));
                       gap: var(--zj-abstand-40); align-items: center; }
.zj-standort__text { text-align: center; display: grid; gap: var(--zj-abstand-24); justify-items: center; }
.zj-standort__text .zj-h2 { max-width: 16ch; }
.zj-standort .zj-buttons { justify-content: center; }
.zj-standort__karte { min-height: 480px; }
.zj-standort__detail { margin-top: 0; }

/* --- 25. Kontakt (Komponente 23) ---------------------------------------- */

.zj-kontakt__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zj-gap);
                      align-items: start; }
.zj-kontakt__spalte > * + * { margin-top: var(--zj-abstand-12); }
.zj-kontakt .zj-buttons { margin-top: var(--zj-abstand-40); }

/* --- 26. Kamm (Komponente 24) ------------------------------------------- */
/* Die Zaehne sind Streifen eines wiederholenden Verlaufs: ein Streifen in
   einem 58 px hohen Kasten IST das Parallelogramm. Die Quermasse rechnet CSS
   selbst aus den Kanon-Tokens (cos), damit kein zweiter Zahlensatz entsteht.
   Neigung aus --zj-kamm-angle (26 Grad, oben links, am Render gemessen). */
.zj-kamm {
  position: relative; z-index: 1;
  height: var(--zj-kamm-h);
  background:
    repeating-linear-gradient(calc(90deg - var(--zj-kamm-angle)),
      var(--zj-navy) 0 calc(var(--zj-kamm-tooth-w) * cos(var(--zj-kamm-angle))),
      var(--zj-blue) calc(var(--zj-kamm-tooth-w) * cos(var(--zj-kamm-angle)))
                    calc(var(--zj-kamm-pitch) * cos(var(--zj-kamm-angle))));
}
.zj-kamm::after {
  content: "";
  position: absolute; top: 0;
  /* min() haelt den Strich auch unter 455 px Breite im Bild. */
  left: min(var(--zj-kamm-strich-x),
            100% - var(--zj-kamm-slash-w) - var(--zj-kamm-strich-dx) - var(--zj-rand-min));
  width: calc(var(--zj-kamm-slash-w) + var(--zj-kamm-strich-dx));
  height: var(--zj-kamm-slash-h);
  background: var(--zj-yellow);
  clip-path: polygon(var(--zj-kamm-strich-dx) 0, 100% 0,
                     var(--zj-kamm-slash-w) 100%, 0 100%);
}
/* Der Strich steht in einer Luecke: Figma laesst dort zwei Zahnplaetze frei.
   Das blaue Feld radiert den Kamm aus, der gelbe Strich liegt darueber. */
.zj-kamm::before {
  content: "";
  position: absolute; top: 0; height: 100%;
  width: var(--zj-kamm-luecke);
  background: var(--zj-blue);
  left: min(calc(var(--zj-kamm-strich-x) + var(--zj-kamm-luecke-dx)),
            100% - var(--zj-kamm-luecke) - var(--zj-rand-min));
}
.zj-kamm[data-schraegstrich="aus"]::before { content: none; }
.zj-kamm[data-schraegstrich="aus"]::after { content: none; }

/* --- 27. Fusszeile (Komponente 25) -------------------------------------- */

.zj-fusszeile { background: var(--zj-navy); color: var(--zj-text-invert);
                min-height: var(--zj-footer-h);
                padding-block: var(--zj-abstand-96) var(--zj-abstand-48); }
.zj-fusszeile__raster { display: grid; grid-template-columns: 497px 1fr; gap: var(--zj-abstand-64) var(--zj-gap); }
.zj-fusszeile__logo img { width: var(--zj-fuss-logo-w); height: var(--zj-fuss-logo-h); }
.zj-fusszeile__marke > * + * { margin-top: var(--zj-abstand-40); }
.zj-fusszeile__block > * + * { margin-top: var(--zj-abstand-20); }
.zj-fusszeile__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zj-abstand-40) var(--zj-gap); }
.zj-fusszeile__nav h3 { font-size: var(--zj-small-size); text-transform: uppercase;
                        letter-spacing: .08em; margin-bottom: var(--zj-abstand-12); }
.zj-fusszeile__nav li + li { margin-top: var(--zj-abstand-8); }
.zj-fusszeile__nav a, .zj-fusszeile__rechts a { text-decoration: underline; text-underline-offset: 3px; }
.zj-fusszeile__unten { margin-top: var(--zj-abstand-64); padding-top: var(--zj-abstand-24);
                       border-top: 1px solid var(--zj-linie-invers);
                       display: flex; flex-wrap: wrap; gap: var(--zj-abstand-12) var(--zj-abstand-24); justify-content: space-between;
                       font-size: var(--zj-small-size); }
.zj-fusszeile__rechts { display: flex; flex-wrap: wrap; gap: var(--zj-abstand-12) var(--zj-abstand-24); }

/* --- 28. Stellendetail (Komponente 26) ---------------------------------- */

.zj-stellendetail__anzeige > * + * { margin-top: var(--zj-abstand-24); }
.zj-stellendetail__karte { background: var(--zj-grey); border-radius: var(--zj-card-radius);
                           padding: var(--zj-abstand-32); display: grid; gap: var(--zj-abstand-20); }

/* --- 29. Musterseite ----------------------------------------------------- */


/* --- 30. Responsiv ------------------------------------------------------- */
/* Alle Umbruchpunkte sind Educated Guess, Begruendung je Punkt im BAU-PROTOKOLL. */

@media (max-width: 1400px) {
  /* Unter 1400 ist die feste Bildspalte von 748 px zu breit: die Textspalte
     wuerde auf unter 300 px schrumpfen. Ab hier teilen sich beide die Flaeche. */
  .zj-hero--bild-rechts { grid-template-columns: minmax(0, 1fr) minmax(0, 45%); }
}

@media (max-width: 1200px) {
  .zj-hero--bild-rechts { min-height: 640px; }
  .zj-bildtext__raster { gap: var(--zj-abstand-32); }
  .zj-fusszeile__raster { grid-template-columns: 1fr; }
  /* Standort: unter 1200 passt die 773er Karte nicht mehr neben den Text. */
  .zj-standort { min-height: 0; }
  .zj-standort__raster { grid-template-columns: 1fr; }
  /* Die flache Karriere-Kopfzeile traegt fuenf Links plus Marke. Ab hier
     darf die Leiste umbrechen, statt aus dem Fenster zu laufen. */
  .zj-kopfzeile__leiste { flex-wrap: wrap; height: auto; min-height: var(--zj-header-h);
                          padding-block: var(--zj-abstand-8); gap: var(--zj-abstand-8) var(--zj-abstand-16); }
  .zj-kopfzeile__nav { gap: var(--zj-abstand-4); }
  .zj-kopfzeile__link { padding-inline: var(--zj-abstand-12); }
  .zj-kopfzeile__cta { margin-left: var(--zj-abstand-12); }
}

@media (max-width: 900px) {
  :root { --zj-h1-size: 40px; --zj-h1-line: 46px; --zj-h2-size: 32px; --zj-h2-line: 40px; }
  .zj-kopfzeile__nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: var(--zj-abstand-4);
    background: var(--zj-white); padding: var(--zj-abstand-16) var(--zj-rand) var(--zj-abstand-24);
    box-shadow: 0 18px 40px rgba(20, 40, 100, .12);
  }
  .zj-kopfzeile.is-offen .zj-kopfzeile__nav { display: flex; }
  .zj-kopfzeile__burger { display: block; }
  .zj-kopfzeile__cta { display: none; }
  .zj-kopfzeile.is-offen .zj-kopfzeile__cta { display: block; margin: var(--zj-abstand-16) 0 0; }
  .zj-mega { position: static; box-shadow: none; padding-block: var(--zj-abstand-16); max-height: none; }
  .zj-mega__raster--3, .zj-mega__raster--2 { grid-template-columns: 1fr; }

  .zj-raster--3, .zj-raster--4,
  .zj-trust__raster, .zj-trust__raster--2, .zj-trust__raster--4,
  .zj-personen__raster, .zj-querverweis__raster, .zj-kontakt__raster,
  .zj-fusszeile__nav, .zj-logostrip--kennzahlen .zj-logostrip__band { grid-template-columns: 1fr; }
  .zj-raster--bento-5 { grid-template-columns: 1fr; }
  .zj-raster--bento-5 > * { grid-column: auto; }

  .zj-hero--bild-rechts { grid-template-columns: 1fr; min-height: 0; }
  .zj-hero--bild-rechts .zj-hero__text { padding: var(--zj-abstand-48) var(--zj-rand-cq); }
  .zj-hero--bild-rechts .zj-hero__bild { order: 2; }
  .zj-hero--bild-rechts .zj-bild { min-height: 320px; }
  .zj-hero--bento .zj-hero__grid { grid-template-columns: 1fr; }
  .zj-hero__spalte--versatz { padding-top: 0; }

  .zj-raster--detail { grid-template-columns: 1fr; }
  .zj-raster--detail > aside { position: static; }
  .zj-ctaband { min-height: 0; }
}

@media (max-width: 700px) {
  .zj-raster--2, .zj-raster--374-873, .zj-raster--749-499,
  .zj-bildtext__raster, .zj-raster--bild-text,
  .zj-hero__kacheln { grid-template-columns: 1fr; }
  .zj-bildtext--bild-rechts .zj-bildtext__bild,
  .zj-raster--bild-text.zj-raster--bild-rechts > :first-child { order: 0; }
  .zj-sektion { padding-block: var(--zj-sektion-pad); }
  .zj-karte__inhalt, .zj-zitat, .zj-cluster, .zj-kachel__inhalt { padding: var(--zj-abstand-24); }
  .zj-kasten { padding: var(--zj-abstand-24); }
  .zj-person { grid-template-columns: 90px 1fr; }
  /* Auf schmalen Breiten stehen Knoepfe untereinander. Nebeneinander laufen
     sie sonst aus der Spalte, weil der Primaerknopf seinen Schraegstrich
     als Aussenabstand mittraegt. */
  .zj-buttons { flex-direction: column; align-items: flex-start; }
  .zj-standort .zj-buttons { align-items: center; }
  .zj-button { max-width: 100%; }
}

@media (max-width: 480px) {
  :root { --zj-h1-size: 32px; --zj-h1-line: 38px; --zj-h2-size: 26px; --zj-h2-line: 32px;
          --zj-h3-size: 20px; --zj-h3-line: 26px; }
  .zj-button--umriss { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- 27. Echte Bilder aus Figma (09.09.2026) ----------------------------
   Text-Freeze: das Briefing bleibt als Text im DOM (.zj-vh), damit der
   Extraktor es weiter liest; sichtbar liegt das Foto darueber. Deshalb
   NICHT display:none und nicht hidden. */

.zj-vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Eine Flaeche, die ein echtes Foto traegt. Masse und Radius kommen
   weiter von .zj-bild / .zj-karte__bild / .zj-person__foto. */
.zj-hat-foto { position: relative; overflow: hidden; padding: 0; }
.zj-hat-foto > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: inherit;
}

/* --- 31. Startseite: Bento-Hero, Logo-Band, Branchen-Raster --------------
   Gebaut 09.09.2026 aus dem Figma-Frame 472:444. Bewusst EIN Block am
   Dateiende statt verteilt in den Abschnitten: an derselben Datei arbeitete
   zeitgleich ein zweiter Bauer, und ein zusammenhaengender Block laesst sich
   ohne Konflikt einfuegen. Weil der Block hinter Abschnitt 30 steht, traegt
   er seine eigenen Umbruchpunkte am Ende (31e).
   -------------------------------------------------------------------------- */

/* 31a. Bento-Hero. Abschnitt 14b hatte den Versatz als 40 px Innenabstand
   und die Kacheln ohne feste Hoehe. Gemessen sind es 153 px NEGATIVER
   Aussenabstand der linken Spalte und Kacheln von 302 x 322; die rechte
   Spalte laeuft unten aus dem Hero heraus und wird beschnitten. */
.zj-hero--bento { overflow: hidden; }
.zj-hero--bento .zj-hero__grid {
  /* feste Hoehe, nicht min-height: die rechte Kachelspalte ist 934 hoch und
     wird in Figma vom Logo-Band beschnitten. Mit min-height waere der Hero
     52 px zu hoch. */
  height: var(--zj-hero-bento-h);
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, calc(2 * var(--zj-bento-spalte) + var(--zj-gap)));
  align-items: center;
  padding-block: 0;
}
.zj-hero--bento .zj-hero__kacheln { align-self: start; }
.zj-hero--bento .zj-hero__spalte--hoch { margin-top: calc(-1 * var(--zj-bento-versatz)); }
.zj-hero--bento .zj-hero__kachel { height: var(--zj-bento-tile-h); }
.zj-hero--bento .zj-hero__kachel .zj-bild { height: 100%; min-height: 0; }
.zj-hero--bento .zj-kachel--shop { height: var(--zj-bento-shop-h); min-height: 0; }

/* 31b. Logo-Band (Komponente: zj-logoband). Grau 151 hoch, echte
   Herstellerlogos in einer 26 px hohen Box unten buendig, darunter eine
   optionale Unterzeile 14. Figma zeigt vier Logos in zwei Durchlaeufen;
   die Komponente traegt beliebig viele. Die Bildmasse stehen als
   width/height am <img>, nicht im CSS: jedes Logo hat in Figma seine eigene
   optische Hoehe (Siemens 21, Liebherr 23, Schneider 24, ABB 26) und wuerde
   von einer gemeinsamen CSS-Hoehe verzerrt oder falsch skaliert. */
.zj-logoband {
  background: var(--zj-grey); color: var(--zj-navy);
  min-height: var(--zj-logoband-h);
  display: flex; align-items: center;
  overflow: hidden;
}
.zj-logoband__band {
  display: flex; align-items: flex-start; justify-content: center;
  flex-wrap: wrap; gap: var(--zj-abstand-20) var(--zj-logoband-gap);
  width: 100%;
}
.zj-logoband__item { display: block; }
.zj-logoband__logo { height: var(--zj-logoband-logo-h); display: flex; align-items: flex-end; }
.zj-logoband__logo img { display: block; max-width: 100%; height: auto; }
.zj-logoband__caption {
  display: block; margin-top: var(--zj-abstand-8);
  font-size: var(--zj-logo-caption-size); line-height: 1.2;
}
/* Umlaufendes Band: zwei identische Gruppen, die zweite ist die Kopie.
   Bei prefers-reduced-motion steht es still (globale Regel in Abschnitt 30). */
.zj-logoband--laufend .zj-logoband__band {
  flex-wrap: nowrap; justify-content: flex-start; width: max-content;
  animation: zj-logoband-lauf var(--zj-logoband-lauf) linear infinite;
}
.zj-logoband--laufend .zj-logoband__gruppe {
  display: flex; align-items: flex-start; gap: var(--zj-logoband-gap);
  padding-right: var(--zj-logoband-gap);
}
@keyframes zj-logoband-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 31c. Branchen-Raster. Drei Reihen mit ungleichen Spalten; die fr-Werte
   sind die Figma-Breiten, damit das Verhaeltnis bei jeder Fensterbreite
   stimmt und bei 1728 genau 374/873, 749/499 und 374/355/499 herauskommt. */
.zj-branchen { display: grid; gap: var(--zj-gap); }
.zj-branchen__reihe { display: grid; gap: var(--zj-gap); }
.zj-branchen__reihe--374-873     { grid-template-columns: 374fr 873fr; }
.zj-branchen__reihe--749-499     { grid-template-columns: 749fr 499fr; }
.zj-branchen__reihe--374-355-499 { grid-template-columns: 374fr 355fr 499fr; }
.zj-branchen .zj-karte, .zj-branchen > * > .zj-bild { min-height: var(--zj-branchen-karte-h); }

/* Karte mit Bild an der Seite: das Bild laeuft bis an drei Kartenkanten.
   In Figma sind es freigestellte Motive auf der Kartenflaeche; als
   Platzhalter steht hier die graue Flaeche in derselben Breite. */
.zj-karte--bild-seite { flex-direction: row; }
.zj-karte--bild-seite > .zj-karte__seitenbild {
  flex: 0 0 var(--zj-branchen-bild-w); align-self: stretch;
  border-radius: 0; min-height: 0;
}
.zj-karte--bild-seite > .zj-karte__inhalt { min-width: 0; justify-content: center; }
.zj-karte--bild-seite.zj-karte--bild-rechts { flex-direction: row-reverse; }

/* Karte, die alles in einer Farbe setzt. Der Kanon macht Links und Eyebrow
   auf dunklem Grund gelb; die blaue Fragen-Karte der Startseite ist in
   Figma durchgehend weiss, Haken und Pfeil eingeschlossen. */
.zj-karte--einfarbig { --zj-link-farbe: currentColor; --zj-punkt-farbe: currentColor; }
.zj-karte--einfarbig .zj-eyebrow { color: currentColor; }

/* Karte, die nur ein Bild traegt (Tablet-Kachel, LKW-Kachel). */
.zj-karte--nurbild { padding: 0; }
.zj-karte--nurbild > .zj-bild { flex: 1; border-radius: 0; min-height: 0; }

/* 31d. Aufklapp-Pfeil unter einer Karte (dritte Projektkarte in Figma). */
.zj-karte__mehr {
  margin-top: auto; padding-top: var(--zj-abstand-20);
  display: flex; justify-content: center;
  color: var(--zj-navy);
}
.zj-karte__mehr .zj-icon { width: 18px; height: 12px; }

/* 31e. Umbruchpunkte fuer die Startseiten-Bausteine. Stehen hier, weil
   dieser Block hinter Abschnitt 30 liegt und sonst dessen Regeln schluege. */
@media (max-width: 1200px) {
  /* Zwei feste 302er Spalten plus Text passen ab hier nicht mehr nebeneinander. */
  .zj-hero--bento .zj-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 50%); height: auto; min-height: var(--zj-hero-bento-h); }
  .zj-hero--bento .zj-hero__kachel { height: auto; min-height: 240px; }
  .zj-hero--bento .zj-hero__spalte--hoch { margin-top: 0; }
  .zj-branchen .zj-karte, .zj-branchen > * > .zj-bild { min-height: 300px; }
}

@media (max-width: 900px) {
  .zj-hero--bento { overflow: visible; }
  .zj-hero--bento .zj-hero__grid { grid-template-columns: 1fr; min-height: 0; padding-block: var(--zj-abstand-48); }
  .zj-hero--bento .zj-kachel--shop { height: auto; min-height: 240px; }
  .zj-branchen__reihe--374-873,
  .zj-branchen__reihe--749-499,
  .zj-branchen__reihe--374-355-499 { grid-template-columns: 1fr; }
  .zj-branchen .zj-karte, .zj-branchen > * > .zj-bild { min-height: 0; }
  .zj-karte--bild-seite, .zj-karte--bild-seite.zj-karte--bild-rechts { flex-direction: column; }
  .zj-karte--bild-seite > .zj-karte__seitenbild { flex: 0 0 auto; min-height: 200px; }
  .zj-karte--nurbild > .zj-bild { min-height: 220px; }
  .zj-logoband__band { justify-content: flex-start; }
}

/* 31f. Shop-Kachel: "Shop" ist in Figma gelb UND der Link, der Pfeil steht
   in derselben Zeile dahinter (60 x 35, Kanon). */
.zj-kachel__link {
  color: var(--zj-yellow); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--zj-abstand-16);
}
.zj-kachel__link .zj-icon--pfeil { width: 60px; height: 35px; }

/* 31g. Standort auf der Startseite. Figma laesst die Karte nach rechts ueber
   die Inhaltsbreite hinauslaufen: rechte Kante bei x 1641 statt 1498. Erst
   dadurch wird die Textspalte 605 statt 455 breit und die beiden Knoepfe
   stehen nebeneinander. Der Ueberhang endet, sobald der Seitenrand ihn nicht
   mehr hergibt: unter 1560 px Fensterbreite ist der Rand kleiner als 145 und
   der Ueberhang wuerde die Seite waagerecht ueberlaufen lassen. Als Media Query
   statt als min()-Rechnung, weil --zj-rand mit 100 Prozent des ELTERNelements
   rechnet und in der Kartenspalte deshalb den falschen Wert ergibt. */
@media (min-width: 1560px) {
  /* Nicht als negativer Aussenabstand: .zj-inhalt hat width:100%, dort wirkt er
     nicht, und als Ueberbreite erzeugt er waagerechten Ueberlauf. Stattdessen
     faellt der rechte Seitenrand um 145 kleiner aus. */
}

/* --- 32. Startseiten-Bilder aus Figma (09.09.2026) -----------------------
   Der Regelfall laeuft ueber .zj-hat-foto (Abschnitt 27): Foto formatfuellend,
   beschnitten. Drei Motive der Startseite sind aber FREIGESTELLT (Ortsschild,
   Industrieroboter, Lkw) und die Deutschlandkarte ist eine Zeichnung: sie
   liegen frei auf der Kartenflaeche und duerfen nicht beschnitten werden.
   Deshalb hier contain statt cover und kein Platzhaltergrau dahinter. */
.zj-hat-foto--frei { background: transparent; }

/* Freisteller duerfen aus der Karte herausragen (Figma: Roboter oben, Schild
   unten). Dafuer muss die Karte ihren Beschnitt aufgeben; sie behaelt ihn
   ueberall sonst, deshalb haengt die Regel am Bild, nicht an der Karte.
   Der Stapel ist wichtig: die herausragende Kachel liegt UEBER der Nachbarin. */
.zj-karte:has(.zj-hat-foto--ragt) { overflow: visible; position: relative; z-index: 1; }
.zj-hat-foto--ragt { overflow: visible; }
.zj-hat-foto--ragt img {
  max-width: none;
  object-fit: contain;
  /* Zoom und Versatz stehen je Motiv weiter unten. object-fit alleine reicht
     nicht: es passt das Bild IN den Kasten, Figma laesst es darueber hinaus. */
  transform: translate(var(--zj-frei-dx, 0), var(--zj-frei-dy, 0))
             rotate(var(--zj-frei-rot, 0deg))
             scale(var(--zj-frei-zoom, 1));
  transform-origin: center;
}

/* Die drei Motive einzeln, weil sie in Figma verschieden weit herausragen.
   Zoomfaktoren aus dem Groessenvergleich Figma gegen Render [PX:2026-09-09 23:00];
   Richtung und Versatz sind Educated Guess, Vivi korrigiert.
   Ortsschild: Figma dreht GEGEN den Uhrzeigersinn, gemessen -14 Grad an der
   Oberkante des schwarzen Rahmens (Simeon 22:55: "genau andersrum"). */
.zj-hat-foto--kommunen  { --zj-frei-rot: -11deg; --zj-frei-zoom: 1.02; --zj-frei-dx: -1%; --zj-frei-dy: 8%; }
.zj-hat-foto--handel    { --zj-frei-zoom: 1.85; --zj-frei-dx: -8%; --zj-frei-dy: 4%; }
.zj-hat-foto--industrie { --zj-frei-zoom: 1.55; --zj-frei-dy: -9%; }
.zj-hat-foto--frei > img { object-fit: contain; }
/* In einer Karte haelt der Freisteller Abstand zu den Kanten, wie in Figma.
   Als inset, nicht als padding: das Bild ist absolut gesetzt (Abschnitt 27). */
.zj-karte .zj-hat-foto--frei > img { inset: var(--zj-abstand-16); }

/* --- 33. Interaktion: Hover, Fokus, Megamenue (09.09.2026) ---------------

   Bis hierher hatte das System drei :hover-Regeln. Dieser Abschnitt gibt
   jedem bedienbaren Element einen sichtbaren Zustand. Vier Regeln liegen
   darunter:

   1. DIE RUHELAGE BEWEGT SICH NICHT. Kein Hover aendert ein Mass im
      Ruhezustand. Jeder Marker liegt in einem absolut gesetzten
      Pseudo-Element oder als Rahmen, der im Ruhezustand schon da und nur
      durchsichtig ist. Der Pixel-Diff der drei Seiten ohne Zeiger ist 0.
   2. ZWEI ZEICHEN, NIE NUR EINS. Der Text wechselt die Farbe (immer
      kontraststark), dazu kommt ein gelber Marker. Wer den gelben Balken
      auf Grau schlecht sieht, sieht den Farbwechsel. Der Zustand haengt nie
      allein am Gelb.
   3. EINE SCHRAEGE. Das System kennt genau eine Neigung (26 Grad, Backslash).
      Wo ein Marker gross genug ist, dass man sie sieht, traegt er sie:
      der Balken unter einem Navigationslink und an der Kartenunterkante
      haben schraege Enden. Wo sie unsichtbar waere, wird sie weggelassen
      statt vorgetaeuscht.
   4. RUHIG, NICHT VERSPIELT. 160 ms, keine Federung, keine Skalierung einer
      ganzen Flaeche, kein generischer Schlagschatten. Der einzige groessere
      Weg ist der abgetrennte Schraegstrich des Primaerknopfs, der seine
      Luecke schliesst: die Form der Marke wird selbst zur Geste.

   Was hier NICHT steht: eine Abhaengigkeit von system.js. Alle Zustaende
   sind CSS. Das Skript verbessert nur (Klick, Escape, Klick nach aussen).

   :focus-visible ist ueberall an :hover gekoppelt. Der Fokusrahmen aus
   Abschnitt 2 bleibt zusaetzlich stehen; der Marker macht die Tastaturspur
   nur eindeutiger. Reine :focus-Zustaende sind bewusst NICHT gekoppelt,
   sonst blitzt der Marker bei jedem Mausklick auf.
   ------------------------------------------------------------------------ */

/* 33a. Kopfzeile: Links und Menue-Ausloeser --------------------------------
   Der Balken sitzt in einem Pseudo-Element und waechst von links.
   Sein seitlicher Einzug folgt dem Innenabstand des Links; --zj-nav-pad
   traegt den Wert, damit die flache Kopfzeile (Karriere, 14 statt 24)
   nicht danebenliegt. Bestandswerte bleiben unangetastet. */
.zj-kopfzeile__link { --zj-nav-pad: var(--zj-abstand-24); position: relative;
                      transition: color var(--zj-hover-zeit) var(--zj-hover-kurve); }
.zj-kopfzeile--flach .zj-kopfzeile__link { --zj-nav-pad: var(--zj-abstand-16); }
.zj-kopfzeile__link::after {
  content: ""; position: absolute; pointer-events: none;
  left: var(--zj-nav-pad); right: var(--zj-nav-pad);
  bottom: var(--zj-abstand-8);
  height: var(--zj-hover-linie-h);
  background: var(--zj-hover-marke);
  clip-path: polygon(var(--zj-hover-linie-dx) 0, 100% 0,
                     calc(100% - var(--zj-hover-linie-dx)) 100%, 0 100%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--zj-hover-zeit) var(--zj-hover-kurve);
}
.zj-kopfzeile__link:is(:hover, :focus-visible) { color: var(--zj-hover-text); }
.zj-kopfzeile__link:is(:hover, :focus-visible)::after { transform: scaleX(1); }
/* Der aktive Punkt sitzt auf einer Navy-Pille: dort waere Blau unlesbar,
   der Text bleibt weiss und der gelbe Balken traegt den Zustand allein.
   Das ist die eine bewusste Ausnahme von Regel 2, weil die Pille selbst
   schon sagt, wo man steht. */
.zj-kopfzeile__link.is-aktiv:is(:hover, :focus-visible) { color: var(--zj-white); }

/* Chevron: nickt beim Ueberfahren 2 px nach unten. Im geoeffneten Zustand
   nicht, dort haelt die 180-Grad-Drehung aus Abschnitt 13 den Platz. */
.zj-kopfzeile__trigger:hover .zj-icon--chevron { transform: translateY(var(--zj-hover-weg-klein)); }
.zj-kopfzeile__trigger[aria-expanded="true"]:hover .zj-icon--chevron { transform: rotate(180deg); }

/* Burger und Logos. Das Logo ist ein Bild, es hat keine Textfarbe;
   der ehrliche Zustand ist eine leichte Abschwaechung. */
.zj-kopfzeile__burger span { transition: background-color var(--zj-hover-zeit) var(--zj-hover-kurve); }
.zj-kopfzeile__burger:is(:hover, :focus-visible) span { background: var(--zj-hover-text); }
.zj-kopfzeile__logo, .zj-fusszeile__logo { transition: opacity var(--zj-hover-zeit) var(--zj-hover-kurve); }
.zj-kopfzeile__logo:is(:hover, :focus-visible),
.zj-fusszeile__logo:is(:hover, :focus-visible) { opacity: .72; }

/* 33b. Megamenue: oeffnen und schliessen mit Weg ---------------------------
   Die Klappe wechselt zwischen display:none und display:block. Damit das
   nicht springt, laeuft der Wechsel ueber transition-behavior: allow-discrete
   plus @starting-style. Das deckt BEIDE Wege ab, ohne dass einer vom anderen
   weiss: den Zeiger (:hover / :focus-within, reines CSS) und die Tastatur und
   den Klick (system.js schaltet nur das hidden-Attribut).
   Ohne Skript bleibt alles wie bisher bedienbar. */
.zj-mega {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--zj-mega-zeit) var(--zj-hover-kurve),
              transform var(--zj-mega-zeit) var(--zj-hover-kurve),
              display var(--zj-mega-zeit) allow-discrete;
}
/* Geschlossen: unsichtbar und 6 px hoeher. display:none aus Abschnitt 13
   bleibt, wird durch allow-discrete aber erst am Ende des Weges wirksam. */
.zj-mega[hidden] { opacity: 0; transform: translateY(calc(-1 * var(--zj-mega-weg))); }
/* Geoeffnet ohne Skript: die Regel aus Abschnitt 13 setzt nur display,
   hier kommen die zwei sichtbaren Eigenschaften dazu. */
.zj-kopfzeile__punkt:hover > .zj-mega[hidden],
.zj-kopfzeile__punkt:focus-within > .zj-mega[hidden] { opacity: 1; transform: translateY(0); }
/* Der Startwert des Weges. Die drei Selektoren stehen hier EINZELN und der
   Block steht HINTER den Regeln oben, beides mit Absicht: der Startwert wird
   auf den Zielwert gestapelt und verliert bei geringerer Spezifitaet oder
   frueherer Position. Mit nur ".zj-mega" schlug die Hover-Regel (0,4,0) den
   Startwert (0,1,0) - das Menue sprang beim Oeffnen per Zeiger auf, waehrend
   der Skriptweg sauber lief. Am laufenden Bild pro Frame gemessen. */
@starting-style {
  .zj-mega,
  .zj-kopfzeile__punkt:hover > .zj-mega[hidden],
  .zj-kopfzeile__punkt:focus-within > .zj-mega[hidden] {
    opacity: 0; transform: translateY(calc(-1 * var(--zj-mega-weg)));
  }
}

/* 33c. Knoepfe ------------------------------------------------------------- */

/* Primaer: der abgetrennte Schraegstrich rueckt an den Koerper heran und das
   Gelb wird eine Spur tiefer. Die Geste ist die Form der Marke selbst.
   Er rueckt nur die HALBE Luecke (6 von 12 px): bei der vollen Luecke stossen
   Strich und Koerper zusammen, die Silhouette wird ein langes Parallelogramm
   und der abgetrennte Strich - das Zeichen der Marke - ist weg. Am Bild
   geprueft, deshalb halbiert. */
.zj-button--primaer::before,
.zj-button--primaer::after {
  transition: background-color var(--zj-hover-zeit) var(--zj-hover-kurve),
              transform var(--zj-hover-zeit) var(--zj-hover-kurve);
}
.zj-button--primaer:is(:hover, :focus-visible)::before,
.zj-button--primaer:is(:hover, :focus-visible)::after { background: var(--zj-yellow-tief); }
.zj-button--primaer:is(:hover, :focus-visible)::after {
  transform: translateX(calc(-1 * var(--zj-btn-slash-gap) / 2));
}

/* Sekundaer: Pfeil laeuft (Bestand seit 08.09.), Farbe wechselt dazu. */
.zj-button--sekundaer { transition: color var(--zj-hover-zeit) var(--zj-hover-kurve); }
.zj-button--sekundaer:is(:hover, :focus-visible) { color: var(--zj-hover-text); }
.zj-button--sekundaer:is(:hover, :focus-visible) .zj-icon--pfeil {
  transform: translateX(var(--zj-hover-weg));
}

/* Umriss: der Rahmen ist im Ruhezustand schon da, er wird nur gefuellt.
   Der Text nimmt die Farbe der Flaeche an, auf der der Knopf steht. */
.zj-button--umriss {
  transition: background-color var(--zj-hover-zeit) var(--zj-hover-kurve),
              color var(--zj-hover-zeit) var(--zj-hover-kurve);
}
.zj-button--umriss:is(:hover, :focus-visible) {
  background: var(--zj-umriss-farbe, var(--zj-navy));
  color: var(--zj-umriss-text, var(--zj-white));
}
/* Auf Blau und Navy ist der Umriss gelb, gefuellt traegt er deshalb Navy. */
.zj-sektion--navy, .zj-sektion--blau, .zj-hero--bild-rechts, .zj-hero--band,
.zj-trust, .zj-ctaband, .zj-standort, .zj-fusszeile,
.zj-kasten--navy, .zj-karte--blau, .zj-kachel--shop, .zj-auf-dunkel { --zj-umriss-text: var(--zj-navy); }

/* 33d. Verlinkte Karten und Megakarten -------------------------------------
   Balken an der Unterkante, waechst von links, mit schraegen Enden.
   Die Karte hat overflow:hidden und einen Radius, der Balken folgt der
   Rundung von selbst. Nichts an der Karte bewegt sich. */
a.zj-karte, .zj-megakarte { position: relative; }
a.zj-karte::after, .zj-megakarte::after {
  content: ""; position: absolute; pointer-events: none; z-index: 2;
  left: 0; right: 0; bottom: 0;
  height: var(--zj-hover-kante-h);
  background: var(--zj-hover-marke);
  clip-path: polygon(var(--zj-hover-kante-dx) 0, 100% 0,
                     calc(100% - var(--zj-hover-kante-dx)) 100%, 0 100%);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--zj-hover-zeit) var(--zj-hover-kurve);
}
a.zj-karte:is(:hover, :focus-visible)::after,
.zj-megakarte:is(:hover, :focus-visible)::after { transform: scaleX(1); }
a.zj-karte :is(.zj-karte__titel, .zj-h3),
.zj-megakarte__titel { transition: color var(--zj-hover-zeit) var(--zj-hover-kurve); }
a.zj-karte:is(:hover, :focus-visible) :is(.zj-karte__titel, .zj-h3),
.zj-megakarte:is(:hover, :focus-visible) .zj-megakarte__titel { color: var(--zj-hover-text); }
/* Der Pfeil in einer verlinkten Karte laeuft mit, auch wenn der Zeiger
   irgendwo auf der Karte steht und nicht auf dem Link. */
a.zj-karte:is(:hover, :focus-visible) .zj-icon--pfeil { transform: translateX(var(--zj-hover-weg)); }
/* Auf gelbem Grund ist ein gelber Marker unsichtbar: dort Navy. */
.zj-karte--gelb, .zj-kasten--gelb { --zj-hover-marke: var(--zj-navy); }

/* 33e. Kachel mit Foto (Shop-Kachel und Bento) ----------------------------- */
.zj-kachel__link { transition: color var(--zj-hover-zeit) var(--zj-hover-kurve); }
.zj-kachel__link .zj-icon--pfeil { transition: transform var(--zj-hover-zeit) var(--zj-hover-kurve); }
/* Zwei Ausloeser: die ganze Kachel (das Foto ist die Flaeche, die man
   anfaehrt) UND der Link selbst. Ohne den zweiten bleibt der Link ohne
   Zustand, wenn der Zeiger genau auf ihm steht und nicht auf der Kachel -
   im Zensus aufgefallen. */
.zj-kachel:is(:hover, :focus-within) .zj-kachel__link,
.zj-kachel__link:is(:hover, :focus-visible) { color: var(--zj-hover-text); }
.zj-kachel:is(:hover, :focus-within) .zj-kachel__link .zj-icon--pfeil,
.zj-kachel__link:is(:hover, :focus-visible) .zj-icon--pfeil {
  transform: translateX(var(--zj-hover-weg));
}

/* 33f. Pillen, Listen-Chips, Aufklapp-Pfeil --------------------------------
   Die Pille traegt im Ruhezustand schon einen 1 px Rahmen in transparent
   (Abschnitt 8), er wird nur eingefaerbt. Kein Sprung. */
a.zj-pill, button.zj-pill {
  transition: border-color var(--zj-hover-zeit) var(--zj-hover-kurve),
              color var(--zj-hover-zeit) var(--zj-hover-kurve);
}
a.zj-pill:is(:hover, :focus-visible),
button.zj-pill:is(:hover, :focus-visible) { border-color: currentColor; color: var(--zj-hover-text); }
a.zj-pill.is-aktiv:is(:hover, :focus-visible),
button.zj-pill.is-aktiv:is(:hover, :focus-visible) { color: var(--zj-white); border-color: var(--zj-yellow); }

.zj-karte__mehr .zj-icon { transition: transform var(--zj-hover-zeit) var(--zj-hover-kurve); }
:is(a, button).zj-karte__mehr:is(:hover, :focus-visible) .zj-icon,
a.zj-karte:is(:hover, :focus-visible) .zj-karte__mehr .zj-icon {
  transform: translateY(var(--zj-hover-weg-klein));
}

/* 33g. Fusszeile, Tabellenzeilen, Textlinks ohne Klasse --------------------
   Reihenfolge mit Absicht: die Untergrenze fuer klassenlose Links steht
   ZUERST, alles Benannte danach. Beide haben dieselbe Spezifitaet (0,2,1),
   ein Gleichstand wird nach Position entschieden. Stand die Untergrenze
   hinten, gewann sie gegen die Fusszeile - und dort ist ihre Hover-Farbe
   Weiss auf weissem Text, also gar kein Zustand. Im Zensus aufgefallen:
   18 Fusszeilenlinks ohne sichtbare Aenderung. */
a:not([class]) { transition: color var(--zj-hover-zeit) var(--zj-hover-kurve); }
a:not([class]):is(:hover, :focus-visible) { color: var(--zj-hover-flieszlink); }

.zj-fusszeile a { transition: color var(--zj-hover-zeit) var(--zj-hover-kurve); }
.zj-fusszeile a:is(:hover, :focus-visible) { color: var(--zj-hover-flieszlink); }
.zj-tabelle--stellen tbody tr { transition: background-color var(--zj-hover-zeit) var(--zj-hover-kurve); }
.zj-tabelle--stellen td a { transition: color var(--zj-hover-zeit) var(--zj-hover-kurve); }
.zj-tabelle--stellen tbody tr:hover td a { color: var(--zj-hover-text); }

/* 33h. Funktionszeile der Personenkarte ------------------------------------
   Kein Hover, sondern Simeons Vorgabe vom 09.09.: 2 px kleiner als der
   Fliesstext, Zeilenhoehe mitgezogen (25 x 16/18 = 22). Die Karte behaelt
   ihre Hoehe: 20 Polster + 25 Name + 22 Funktion = 67, die Mindesthoehe
   ist 120. */
.zj-person__fn { font-size: var(--zj-person-fn-size); line-height: var(--zj-person-fn-line); }

/* 33i. Wenig Bewegung ------------------------------------------------------
   Abschnitt 30 schaltet transition und animation global ab. Das reicht NICHT:
   ein Hover, der ein Element um 4 px verschiebt, verschiebt es dann eben
   sofort statt weich. Die Vorgabe lautet, Farbwechsel duerfen bleiben, Wege
   nicht. Deshalb hier jeder Weg noch einmal ausdruecklich auf null.
   Die Marker bleiben: ein Balken, der ohne Dauer erscheint, ist ein
   Farbwechsel, kein Weg. */
@media (prefers-reduced-motion: reduce) {
  .zj-button--sekundaer:is(:hover, :focus-visible) .zj-icon--pfeil,
  a.zj-karte:is(:hover, :focus-visible) .zj-icon--pfeil,
  .zj-kachel:is(:hover, :focus-within) .zj-kachel__link .zj-icon--pfeil,
  .zj-kopfzeile__trigger:hover .zj-icon--chevron,
  .zj-button--primaer:is(:hover, :focus-visible)::after,
  :is(a, button).zj-karte__mehr:is(:hover, :focus-visible) .zj-icon,
  a.zj-karte:is(:hover, :focus-visible) .zj-karte__mehr .zj-icon { transform: none; }
  /* Der Chevron behaelt seine Drehung, sie ist ein Zustand, kein Weg. */
  .zj-kopfzeile__trigger[aria-expanded="true"]:hover .zj-icon--chevron { transform: rotate(180deg); }
  /* Die Klappe erscheint ohne Weg. */
  .zj-mega, .zj-mega[hidden],
  .zj-kopfzeile__punkt:hover > .zj-mega[hidden],
  .zj-kopfzeile__punkt:focus-within > .zj-mega[hidden] { transform: none; }
}