/* Axiva Industrial, Website
   Gestaltung R11 Achse II, Stand 21. September 2026.
   Erzeugt aus base.css und der Routendefinition. Nicht von Hand
   aendern, sondern in ../Website Mockups/css/base.css und
   ../Website Mockups/_routen.py. */

@import url("schrift.css");


/* ==========================================================================
   Axiva Industrial, gemeinsame Grundlage aller Designrouten.

   Diese Datei traegt nur das Skelett: Raster, Klassenvokabular und die
   Voreinstellungen. Alles, was eine Route ausmacht, steht in css/rNN.css.
   Farbwerte und Kontrastregeln nach Brand Guideline v2.0 Abschnitt 5.5:
   Lime Green ist Akzent und nie Textfarbe auf hellem Grund, auf hellem Grund
   traegt Emerald Green das Gruen und Ocean Blue das Blau.
   ========================================================================== */

:root {
  --night:  #1b1d36;
  --lime:   #03ed6e;
  --emerald:#004d43;
  --ocean:  #2368c4;
  --sky:    #51b5e0;
  --lemon:  #a6ec8a;
  --sand:   #dbd4cd;
  --sand-l: #f4f2f0;
  --black:  #091709;
  --white:  #ffffff;

  --ground:   var(--white);
  --ink:      var(--night);
  --ink-soft: #4a4d66;
  --hair:     #dcdde4;
  --akzent:   var(--emerald);      /* Textakzent auf hellem Grund */
  --akzent-d: var(--lime);         /* Textakzent auf dunklem Grund */

  --ff-display: "Montserrat Alternates", "Segoe UI", system-ui, sans-serif;
  --ff-body:    "Montserrat Alternates", "Segoe UI", system-ui, sans-serif;
  --ff-figure:  var(--ff-display);

  --fs-display: 84px;
  --fs-h1: 62px;
  --fs-h2: 42px;
  --fs-h3: 26px;
  --fs-lead: 21px;
  --fs-body: 17px;
  --fs-sm: 14.5px;
  --fs-xs: 12.5px;

  --lh-display: 1.06;
  --lh-body: 1.62;
  --tr-display: -0.03em;
  --tr-eyebrow: 0.14em;
  --fw-display: 600;
  --fw-body: 400;
  --tt-display: none;
  --tt-eyebrow: uppercase;

  --measure: 1280px;
  --pad-x: 56px;
  --gutter: 32px;
  --sec-y: 116px;
  --radius: 2px;
  --hair-w: 1px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--ff-display);
                 font-weight: var(--fw-display); line-height: var(--lh-display);
                 letter-spacing: -0.018em; }
/* Lange deutsche Woerter wie Fuehrungsverantwortung sprengen sonst auf dem
   Telefon die Spalte. Die Klassen muessen mit, sie sitzen auch auf p. */
h1, h2, h3, h4, .display, .h1, .h2, .h3, .gross, .wortmarke {
  overflow-wrap: break-word; }
p { margin: 0; }

/* --------------------------------------------------------------- Raster */

.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 var(--pad-x); }
.wrap--wide { max-width: none; padding: 0 var(--pad-x); }
.sec { padding: var(--sec-y) 0; position: relative; }
.sec--tight { padding: calc(var(--sec-y) * 0.62) 0; }
.sec--flush { padding: 0; }

.grid { display: grid; gap: var(--gutter); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-6-6 { grid-template-columns: 1fr 1fr; }
.g-5-7 { grid-template-columns: 5fr 7fr; }
.g-7-5 { grid-template-columns: 7fr 5fr; }
.g-4-8 { grid-template-columns: 4fr 8fr; }
.palette { grid-template-columns: repeat(5, 1fr); }
.g-8-4 { grid-template-columns: 8fr 4fr; }

/* ------------------------------------------------------------- Flaechen */

.s-night  { background: var(--night);  color: var(--white); }
.s-black  { background: var(--black);  color: var(--white); }
.s-emerald{ background: var(--emerald);color: var(--white); }
.s-lime   { background: var(--lime);   color: var(--night); }
.s-sand   { background: var(--sand-l); }
.s-sand-2 { background: var(--sand); }
.s-white  { background: var(--white); }

/* Dunkle Flaechen kehren die Textfarben um. Der Marker .dark setzt das, wo
   die Flaeche nicht schon ueber .s-night, .s-black oder .s-emerald kommt.
   Hero und Footer tragen ihn nur dort, wo sie wirklich dunkel sind, sonst
   bekaeme eine helle Route Lime auf Weiss. */

/* ---------------------------------------------------------- Typografie */

.display { font-family: var(--ff-display); font-size: var(--fs-display);
           font-weight: var(--fw-display); line-height: var(--lh-display);
           letter-spacing: var(--tr-display); text-transform: var(--tt-display); }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; }
.lead { font-size: var(--fs-lead); line-height: 1.5; font-weight: 400; }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.muted { color: var(--ink-soft); }

.eyebrow { font-family: var(--ff-display); font-size: var(--fs-xs);
           letter-spacing: var(--tr-eyebrow); text-transform: var(--tt-eyebrow);
           font-weight: 600; color: var(--akzent); }
.corner { font-weight: 600; letter-spacing: 0.01em; }
.figur { font-family: var(--ff-figure); font-variant-numeric: tabular-nums; }

:is(.s-night, .s-black, .s-emerald, .dark) .muted { color: #a9adc4; }
/* Emerald Green ist dunkel, aber nicht so dunkel wie Nachtblau. Der leise Ton
   braucht dort mehr Helligkeit, sonst bleibt er unter 4,5:1. */
.s-emerald .muted { color: #cdd6d2; }
:is(.s-night, .s-black, .s-emerald, .dark) .eyebrow { color: var(--akzent-d); }
.s-lime .eyebrow { color: var(--night); }
.s-lime .muted { color: rgba(27,29,54,.72); }

.stack > * + * { margin-top: 20px; }
.stack-s > * + * { margin-top: 10px; }
.stack-l > * + * { margin-top: 36px; }
.center { text-align: center; }
.mw-64 { max-width: 64ch; } .mw-56 { max-width: 56ch; }
.mw-46 { max-width: 46ch; } .mw-38 { max-width: 38ch; }
.mw-28 { max-width: 28ch; } .mw-20 { max-width: 20ch; }

/* ------------------------------------------------------------- Buttons */

.btn { display: inline-flex; align-items: center; gap: 10px;
       font-family: var(--ff-display); font-size: var(--fs-sm); font-weight: 600;
       letter-spacing: 0.01em; padding: 15px 28px; border-radius: var(--radius);
       border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
       transition: background .18s ease, color .18s ease, border-color .18s ease; }
.btn--primary { background: var(--lime); color: var(--night); }
.btn--primary:hover { background: #00d461; }
.btn--ghost { background: transparent; color: var(--ink); border-color: currentColor; }
.btn--ghost:hover { background: var(--ink); color: var(--ground); }
.btn--dark { background: var(--night); color: var(--white); }
.btn--sm { padding: 11px 20px; font-size: var(--fs-xs); }
:is(.s-night, .s-black, .s-emerald, .dark) .btn--ghost {
  color: var(--white); border-color: rgba(255,255,255,.62); }
:is(.s-night, .s-black, .s-emerald, .dark) .btn--ghost:hover {
  background: var(--white); color: var(--night); border-color: var(--white); }
.s-lime .btn--ghost { color: var(--night); border-color: var(--night); }
.s-lime .btn--ghost:hover { background: var(--night); color: var(--lime); }

.link-more { font-weight: 600; color: var(--akzent);
             border-bottom: 1.5px solid var(--lime); padding-bottom: 2px; }
:is(.s-night, .s-black, .s-emerald, .dark) .link-more {
  color: var(--akzent-d); border-color: rgba(3,236,110,.5); }
.s-lime .link-more { color: var(--night); border-color: var(--night); }

/* -------------------------------------------------------------- Karten */

.card { padding: 34px; height: 100%; display: flex; flex-direction: column;
        background: var(--white); border: var(--hair-w) solid var(--hair); }
.card--flat { border: 0; padding: 0; background: transparent; }
.card > .tag, .card > .btn { align-self: flex-start; }
.card > p:has(> .link-more) { margin-top: auto !important; padding-top: 18px; }
.card > .rule { margin-top: auto !important; }
.card > .rule + p { min-height: calc(2em * var(--lh-body)); }
:is(.s-night, .s-black, .s-emerald, .dark) .card:not(.card--flat) {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
.s-sand .card:not(.card--flat) { border-color: #e2ded8; }
/* Die Unterzeile im Abschluss trug ihre Breite frueher im Markup. Sie steht
   jetzt hier, damit einzelne Routen sie ueberschreiben koennen. R11 macht
   das, weil dort die Figur im Bild frei bleiben muss. */
[data-abschnitt="cta"] .lead { max-width: 46ch; }

/* Beitragskarten stehen im gemeinsamen Zeilenraster ihrer Reihe. Die Titel
   sind verschieden lang, deutsche Komposita laenger als englische. Ohne das
   Raster stehen Marke, Titel und Anreisser der Nachbarkarten versetzt, in der
   Messung bis 23 Punkt. Unter 900 Punkt steht ohnehin eine Karte je Zeile,
   dort waere das Raster falsch. */
@media (min-width: 901px) {
  .reihe-post { row-gap: 0; }
  .reihe-post > .beitragskarte { display: grid; grid-template-rows: subgrid; }
  .reihe-post > .beitragskarte--3 { grid-row: span 3; }
  .reihe-post > .beitragskarte--4 { grid-row: span 4; }
}

.card__num { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em;
             color: var(--akzent); font-family: var(--ff-figure); }
:is(.s-night, .s-black, .s-emerald, .dark) .card__num { color: var(--akzent-d); }

/* Die Platzhalter haengen an der Zeilenhoehe der Route, sonst entsteht bei
   groesserem Durchschuss ein Versatz von einer halben Zeile. */
.hold-2 { min-height: calc(2em * var(--lh-body)); }
.hold-3 { min-height: calc(3em * var(--lh-body)); }
.hold-h2 { min-height: calc(2em * var(--lh-display)); }
/* Segmentkarten: die Anweisung haelt drei Zeilen frei. Zwei reichen im
   Englischen, die deutsche Fassung laeuft laenger, und die Reihen muessen
   in beiden Sprachen fluchten. */
.card--seg > .seg__lead { min-height: calc(3em * var(--lh-body)); }

.rule { height: var(--hair-w); background: var(--hair); border: 0; margin: 0; }
:is(.s-night, .s-black, .s-emerald, .dark) .rule { background: rgba(255,255,255,.2); }
.s-lime .rule { background: rgba(27,29,54,.28); }

.tag { display: inline-block; font-family: var(--ff-display); font-size: var(--fs-xs);
       font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
       padding: 5px 11px; border: 1px solid var(--hair); color: var(--ink-soft); }
:is(.s-night, .s-black, .s-emerald, .dark) .tag {
  border-color: rgba(255,255,255,.28); color: #b8bcd0; }
.tag--lime { background: var(--lime); border-color: var(--lime); color: var(--night); }

.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure { position: relative; }
.r-21-9 { aspect-ratio: 21/9; } .r-16-9 { aspect-ratio: 16/9; }
.r-3-2 { aspect-ratio: 3/2; } .r-4-3 { aspect-ratio: 4/3; }
.r-1-1 { aspect-ratio: 1/1; } .r-3-4 { aspect-ratio: 3/4; }
.r-4-5 { aspect-ratio: 4/5; }

/* Kennzeichnung von Bildern, die mit kuenstlicher Intelligenz erzeugt wurden.
   Art. 50 Abs. 4 der Verordnung (EU) 2024/1689 verlangt einen Hinweis, der
   ohne besondere technische Hilfsmittel erkennbar ist, spaetestens beim
   ersten Kontakt mit dem Bild. Deshalb steht er am Bild selbst und nicht nur
   im Bildnachweis des Impressums. Er sitzt in der unteren Ecke, wo bei allen
   betroffenen Motiven kein Text liegt. */
.ki-marke { position: absolute; right: 0; bottom: 0; z-index: 3;
  font-family: var(--ff-display); font-size: 11px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; line-height: 1;
  padding: 7px 10px; color: #fff; background: rgba(27,29,54,.74);
  pointer-events: none; }
/* Vollflaechige Motive tragen den Hinweis mit Abstand zur Kante, sonst klebt
   er im Anschnitt. */
.ki-marke--flaeche { right: 24px; bottom: 24px; }
@media (max-width: 640px) {
  .ki-marke { font-size: 10px; padding: 6px 8px; }
  .ki-marke--flaeche { right: 16px; bottom: 16px; }
  /* Im Hero laeuft auf schmalen Flaechen eine Linie des Liniensystems durch
     die untere Ecke (Pruefstand, 21. September 2026). Oben rechts ist frei. */
  .hero .ki-marke--flaeche { top: 16px; bottom: auto; }
}

/* --------------------------------------------------------- Liniensystem */

/* Das Liniensystem haengt an der Mitte, nicht an der linken Kante. Der
   Satzspiegel steht mittig; stand die Grafik auf einem festen Pixelwert, dann
   liefen beide auseinander, je breiter das Fenster wurde, und der Satz lief in
   die Grafik. Der Wert ist so gewaehlt, dass die Arme auch neben mittig gesetztem Satz
   frei stehen, gemessen ueber alle Seiten und Breiten von 1280 bis 2560. Routen, die einen eigenen
   Wert setzen, bleiben davon unberuehrt. */
.lines { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
         --lw: 1900px; --lx: calc(50% - 725px); --ly: -300px; --lo: .13; }
.lines img { position: absolute; width: var(--lw); left: var(--lx); top: var(--ly);
             opacity: var(--lo); max-width: none; }

/* -------------------------------------------------------------- Header */

.head { position: sticky; top: 0; z-index: 40; background: var(--ground);
        border-bottom: var(--hair-w) solid var(--hair); }
.head--dark { background: var(--night); border-bottom-color: rgba(255,255,255,.16);
              color: var(--white); }
.head__in { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); height: 82px; }
.head__logo { flex: 0 0 auto; }
.head__logo img { height: 44px; width: auto; max-width: none; }
.nav { display: flex; gap: clamp(16px, 2vw, 30px); font-size: var(--fs-sm);
       font-weight: 500; margin-left: auto; }
/* Die Menuepunkte duerfen nicht schrumpfen. Auf Deutsch sind sie laenger und
   wurden sonst am Zeilenende abgeschnitten. */
.nav a { padding: 6px 0; border-bottom: 2px solid transparent;
         white-space: nowrap; flex: 0 0 auto; }
.nav a:hover, .nav a.is-active { border-bottom-color: var(--lime); }
.head__side { display: flex; align-items: center; gap: 18px; }

.langtoggle { display: inline-flex; border: 1px solid var(--hair);
              border-radius: var(--radius); overflow: hidden; }
.head--dark .langtoggle { border-color: rgba(255,255,255,.3); }
.langtoggle button, .langtoggle a { font: inherit; font-family: var(--ff-display); font-size: var(--fs-xs);
                     font-weight: 600; letter-spacing: .06em; padding: 7px 12px;
                     background: transparent; border: 0; cursor: pointer; color: inherit; }
.langtoggle button[aria-pressed="true"], .langtoggle a[aria-pressed="true"] {
  background: var(--night); color: var(--white); }
.head--dark .langtoggle button[aria-pressed="true"],
.head--dark .langtoggle a[aria-pressed="true"] { background: var(--lime); color: var(--night); }

.burger { display: none; width: 40px; height: 34px; padding: 8px 6px; background: transparent;
          border: 0; cursor: pointer; flex-direction: column; justify-content: space-between; }
.burger span { display: block; height: 2px; background: currentColor; border-radius: 1px; }

/* --------------------------------------------------------------- Hero */

.hero { position: relative; overflow: hidden; background: var(--night); color: var(--white); }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.hero__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(27,29,54,.94) 0%, rgba(27,29,54,.78) 42%,
              rgba(27,29,54,.30) 78%, rgba(27,29,54,.18) 100%); }
.hero__in { position: relative; padding-top: 150px; padding-bottom: 168px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

.pagehead { position: relative; overflow: hidden; padding: 96px 0 84px; }

/* -------------------------------------------------------------- Footer */

.foot { background: var(--night); color: var(--white); padding: 84px 0 40px; }
.foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: var(--gutter); }
.foot h4 { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
           color: var(--akzent-d); font-weight: 600; }
.foot ul { list-style: none; margin: 14px 0 0; padding: 0; }
.foot li + li { margin-top: 9px; }
/* Lange Woerter wie Unternehmensseite machen die Spalte breiter als ihren
   Anteil und schieben den Fussbereich auf dem Telefon ueber den Rand. Die
   Spalte darf deshalb schmaler werden als das laengste Wort, der Text bricht
   dann innerhalb des Wortes um. Gemessen am 21. August: ohne diese Regel
   drei Punkt Ueberlauf auf den deutschen Seiten bei 390 Punkt. */
.foot__grid { min-width: 0; }
.foot__grid > * { min-width: 0; }
.foot li, .foot a, .foot p { overflow-wrap: anywhere; }
.foot a:hover { color: var(--lime); }
.foot__base { display: flex; justify-content: space-between; align-items: center; gap: 20px;
              margin-top: 56px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.2); }

/* --------------------------------------------------- Zwischengroessen */

@media (max-width: 1200px) {
  :root { --fs-display: 66px; --fs-h1: 50px; --fs-h2: 36px; --fs-h3: 23px;
          --fs-lead: 19px; --gutter: 26px; --pad-x: 40px; --sec-y: 92px; }
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .palette { grid-template-columns: repeat(3, 1fr); }
  .hero__in { padding-top: 118px; padding-bottom: 128px; }
}
@media (max-width: 900px) {
  h1, h2, h3, h4, .display, .h1, .h2, .h3, .gross, .wortmarke { hyphens: auto; }
  :root { --fs-display: 46px; --fs-h1: 36px; --fs-h2: 28px; --fs-h3: 20px;
          --fs-lead: 18px; --fs-body: 16px; --gutter: 22px; --pad-x: 28px; --sec-y: 64px; }
  .g-2, .g-3, .g-4, .g-5-7, .g-7-5, .g-6-6, .g-4-8, .g-8-4 { grid-template-columns: 1fr; }
  .palette { grid-template-columns: repeat(2, 1fr); }
  .nav, .head__cta { display: none; }
  .burger { display: flex; }
  .head__in { height: 66px; }
  .head__logo img { height: 38px; }
  .hero__in { padding-top: 76px; padding-bottom: 80px; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; justify-content: center; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .foot__base { flex-direction: column; align-items: flex-start; }
  .card { padding: 24px; }
  .lines { --lw: 1150px; --lx: -60px; --ly: -210px; }
}

/* -------------------------------------------------------------- Mobil */

.is-mobile { --fs-display: 40px; --fs-h1: 33px; --fs-h2: 26px; --fs-h3: 19px;
             --fs-lead: 17px; --fs-body: 15.5px; --fs-sm: 13.5px;
             --gutter: 20px; --pad-x: 22px; --sec-y: 56px; }
.is-mobile .g-2, .is-mobile .g-3, .is-mobile .g-4,
.is-mobile .g-5-7, .is-mobile .g-7-5, .is-mobile .g-6-6,
.is-mobile .g-4-8, .is-mobile .g-8-4 { grid-template-columns: 1fr; }
.is-mobile .head__in { height: 62px; gap: 12px; }
.is-mobile .head__logo img { height: 34px; }
.is-mobile .nav, .is-mobile .head__cta { display: none; }
.is-mobile .burger { display: flex; }
.is-mobile .hero__in { padding-top: 60px; padding-bottom: 56px; }
.is-mobile .hero__cta { flex-direction: column; align-items: stretch; }
.is-mobile .hero__cta .btn { width: 100%; justify-content: center; }
.is-mobile .foot__grid { grid-template-columns: 1fr 1fr; }
.is-mobile .foot__base { flex-direction: column; align-items: flex-start; }
.is-mobile .card { padding: 22px; }
.is-mobile .lines { --lw: 900px; --lx: -40px; --ly: -150px; --lo: .14; }

/* ------------------------------------------------------ Tabellen schmal */
/* Eine Messtabelle darf auf dem Telefon nicht seitlich herauslaufen. Sie
   bricht deshalb in Bloecke um, jede Zelle mit ihrer Spaltenbeschriftung. */
@media (max-width: 900px) {
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle thead { display: none; }
  .tabelle tr { padding: 18px 0; border-bottom: 1px solid var(--hair); }
  .tabelle td { padding: 0 0 6px !important; border: 0 !important; width: auto !important; }
  .tabelle td[data-l]::before { content: attr(data-l); display: block;
    font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
    font-weight: 600; color: var(--akzent); margin-bottom: 4px; }
}
.is-mobile .tabelle, .is-mobile .tabelle tbody, .is-mobile .tabelle tr,
.is-mobile .tabelle td { display: block; width: 100%; }
.is-mobile .tabelle thead { display: none; }
.is-mobile .tabelle tr { padding: 18px 0; border-bottom: 1px solid var(--hair); }
.is-mobile .tabelle td { padding: 0 0 6px !important; border: 0 !important; width: auto !important; }
.is-mobile .tabelle td[data-l]::before { content: attr(data-l); display: block;
  font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; color: var(--akzent); margin-bottom: 4px; }

/* Der Kontaktkopf traegt links den Satz und rechts die Buchungskarte. Dazwischen
   liegen 40 Punkt, ein geneigter Arm braucht ueber die Hoehe des Abschnitts
   rund 145. Es gibt dort also keine freie Flaeche fuer das Liniensystem.
   Bis zum 24. August lief es als blasse Struktur hinter beidem, gemessen mit
   ueber 1000 gekreuzten Bildpunkten im Hinweistext der Karte. Andreas hat
   diese Art der Kreuzung im Abschnitt "Four corners" zurueckgewiesen, deshalb
   faellt sie hier weg. Der Abschnitt behaelt Nachtblau und die Karte. */
.pagehead--kontakt .lines { display: none !important; }

/* Die Designsystemseite zeigt das Liniensystem selbst. Dass die Grafik dort
   hinter dem erklaerenden Satz liegt, ist der Gegenstand der Seite. */
.sec--liniendemo .lines { --struktur: 1; }

/* Auf schmalen Flaechen tritt das Liniensystem auch im Hero zurueck. Die
   Regel steht mit hoeherer Spezifitaet, damit sie eine Routenangabe schlaegt. */
@media (max-width: 900px) { .hero .lines, .buehne .kante { --lo: .16; opacity: .3; } }
.is-mobile .hero .lines { --lo: .16; }
.is-mobile .plakat__figur { height: 62%; opacity: .5; }

/* Auf Lime Green kehrt die Hauptschaltflaeche um: Night Blue traegt Lime.
   Eine Lime-Flaeche auf Lime-Grund waere unsichtbar, Guideline 5.5. */
.s-lime .btn--primary, .plakat .btn--primary { background: var(--night); color: var(--lime); }
.s-lime .btn--primary:hover, .plakat .btn--primary:hover { background: #000; }


/* --- Route R11 Achse II --- */

/* Das Liniensystem im Kopf haengt an der Mitte, nicht an der linken Kante.
   Der Satzspiegel steht mittig, die Grafik stand auf einem festen Pixelwert.
   Je breiter das Fenster, desto weiter wanderte der Satz nach rechts in die
   Grafik hinein: ab rund 1700 Punkt lief die Unterzeile hinein, ab 2200 auch
   der Claim. Der Wert -795px ist so gewaehlt, dass bei 1440 Punkt genau
   dieselbe Stelle herauskommt wie vorher mit -75px. */
.hero .lines { --lw: 1900px; --lx: calc(50% - 795px); --ly: -300px; --lo: .92; }
.pagehead .lines { --lw: 1500px; --lx: 341px; --ly: -431px; --lo: .34;
  -webkit-mask-image: linear-gradient(to right, transparent 0 64%, #000 78%);
  mask-image: linear-gradient(to right, transparent 0 64%, #000 78%); }
.pagehead.s-sand .lines { --lo: .1; }

/* Headshot: rundes Bild, darunter Name und Titel, beides mittig unter dem
   Kreis. Der Ausschnitt sitzt auf dem Gesicht, nicht auf der Bildmitte. */
.headshot { margin: 0; text-align: center; }
.headshot img { width: 100%; max-width: 340px; aspect-ratio: 1/1;
  border-radius: 50%; object-fit: cover; object-position: 38% 32%;
  margin: 0 auto; }
.headshot figcaption { margin-top: 24px; line-height: 1.5; }
.headshot__name { display: block; font-family: var(--ff-display);
  font-weight: 600; font-size: var(--fs-lead); letter-spacing: -0.01em; }
.headshot__titel { display: block; margin-top: 2px; font-size: var(--fs-sm);
  color: var(--ink-soft); }
:is(.s-night, .s-black, .s-emerald, .dark) .headshot__titel { color: #a9adc4; }

/* Die Bildmarke mit den vier Ecken. Die Beschriftungen sitzen an denselben
   Stellen wie in der Guideline und halten Abstand zu den Armen des X. */
/* Der Kasten hat die Proportion des Zeichens, damit die Beschriftungen in
   Prozent davon sitzen und nicht von der Spaltenbreite abhaengen. Sie ragen
   bewusst ueber den Kasten hinaus, wie in der Vorlage. */
.xmark { position: relative; width: 320px; max-width: 62%;
  aspect-ratio: 299/345; margin: 0 auto; }
.xmark__zeichen { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; }
.xmark__label { position: absolute; font-family: var(--ff-display);
  font-weight: 600; font-size: 19px; letter-spacing: 0.01em;
  color: #fff; white-space: nowrap; }
.xmark__label--oben   { left: 38%; top: 16%; }
.xmark__label--rechts { left: 86%; top: 49%; }
.xmark__label--unten  { left: 38%; top: 73%; }
.xmark__label--links  { right: 86%; top: 41%; }

/* Der Abschluss traegt das Buehnenbild. Beschnitten wird unten, damit der
   Kopf im Bild stehen bleibt. */
.buehne { position: relative; min-height: 620px; display: flex;
  align-items: flex-end; overflow: hidden; background: var(--night); color: #fff; }
.buehne img.bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 12%; opacity: .74; }
.buehne::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9,12,22,.95) 0%, rgba(9,12,22,.88) 30%,
              rgba(9,12,22,.58) 54%, rgba(9,12,22,.12) 80%, rgba(9,12,22,0) 100%); }
.buehne__in { position: relative; z-index: 2; width: 100%; padding-bottom: 72px; }
.buehne--kurz { min-height: 620px; }
.buehne--kopf { align-items: flex-start; }
.buehne--kopf .buehne__in { padding-top: 54px; padding-bottom: 54px; }
.buehne--kopf img.bg { object-position: 50% 8%; }

/* Der Satzblock bleibt in der linken Haelfte, damit die Figur im Bild frei
   steht. Ein zweiter Verlauf von links legt den Text auf eine dunkle
   Flaeche, ohne das Motiv rechts abzudunkeln. Die Zeile ist hier kleiner
   gesetzt als sonst, weil die Spalte schmaler ist. */
/* Der ganze Satzblock endet links der Figur, auch Schaltflaechen und
   Hinweis. Die Schaltflaechen brechen dafuer in zwei Reihen um. */
.buehne--kopf .buehne__in > * { max-width: min(56%, 470px); }
/* Die Zeile steht in zwei Saetzen untereinander und muss links der Figur
   enden. Die Figur beginnt bei rund 46 Prozent der Bildbreite, deshalb
   ist der Satzblock schmaler als der Rest und kleiner gesetzt. */
/* Satzblock und Unterzeile enden links der Figur. Die Figur steht bei rund
   43 Prozent der Bildbreite, der Satzspiegel ist mittig, daraus ergibt sich
   ueber alle Breiten dieselbe Grenze von rund 460 Punkt. */
.buehne--kopf .buehne__in .h1 { max-width: min(60%, 560px); }
.buehne--kopf .buehne__in .lead { max-width: min(50%, 420px); }

/* Die Groesse ist dieselbe wie bei jeder anderen Abschnittsueberschrift,
   var(--fs-h1). Der Satz bleibt trotzdem links der Figur, weil die Zeilen
   in _content.py festgelegt sind und der Block oben anfaengt, wo im Bild
   nur Kopf und Schulter stehen.
   Zwischen 1200 und rund 1400 Punkt Fensterbreite waechst der Satzspiegel
   schneller als der Abstand zur Figur. Dort wandert die Groesse mit, sonst
   stiesse die laengste Zeile an die Schulter. Ab 1400 Punkt steht sie auf
   den vollen var(--fs-h1). */
@media (min-width: 1201px) {
  .buehne--kopf .buehne__in .h1 { font-size: min(var(--fs-h1), 4.4vw); }
}
.buehne--kopf::after {
  background:
    linear-gradient(to right, rgba(9,12,22,.88) 0%, rgba(9,12,22,.76) 34%,
                rgba(9,12,22,.34) 54%, rgba(9,12,22,0) 70%),
    linear-gradient(to top, rgba(9,12,22,.92) 0%, rgba(9,12,22,.78) 30%,
                rgba(9,12,22,.48) 56%, rgba(9,12,22,.10) 82%,
                rgba(9,12,22,0) 100%);
}

/* Unter rund 1110 Punkt ist das Bild hoehenbegrenzt und wird seitlich
   beschnitten. Der Ausschnitt haelt sich dann an den linken Rand, damit die
   Figur so weit wie moeglich nach rechts rueckt, und der ganze Satzblock
   wird schmaler. Sonst laufen Unterzeile und Schaltflaechen in die Figur. */
@media (max-width: 1200px) and (min-width: 901px) {
  .buehne--kopf img.bg { object-position: 0% 8%; }
  .buehne--kopf .buehne__in > * { max-width: 46%; }
  .buehne--kopf .buehne__in .h1 { max-width: 440px; }
  .buehne--kopf .buehne__in .lead { max-width: 380px; }
}
/* ---- Four corners, one proof ----------------------------------------
   Das Liniensystem sitzt hinter dem Zweierraster und ist auf dessen Mitte
   gesetzt, damit jeder Block in einem Quadranten des X steht. Die Kreuzung
   der Grafik liegt bei 56,99 Prozent ihrer Breite und 52,99 Prozent ihrer
   Hoehe; das Bild ist 0,86289 mal so hoch wie breit, daraus die 45,72
   Prozent im zweiten Wert.
   Die Grafik ist so gross gesetzt, dass ihre vier Spitzen innerhalb des
   Rasters enden. Frueher lief sie ueber den ganzen Abschnitt und kreuzte
   dabei die Unterzeile der Ueberschrift und die Beschriftung der Bildmarke.
   Die Fugen sind weit, weil die Arme geneigt sind: der steile Arm wandert
   ueber die Rasterhoehe rund 105 Punkt zur Seite, der flache ueber die
   Rasterbreite rund 50 Punkt nach oben. Beides muss in die Fuge passen.
   Unterhalb von 1200 Punkt werden die Bloecke zu schmal und zu hoch, dort
   faellt die Grafik weg. */
.x-quadranten { position: relative; }
.x-quadranten .lines { display: none; }

@media (min-width: 1200px) {
  .x-quadranten .lines { display: block; overflow: visible;
    --lw: 600px; --lo: .2;
    --lx: calc(50% - 0.5699 * var(--lw));
    --ly: calc(50% - 0.45723 * var(--lw)); }
  /* Gleich hohe Reihen, sonst liegt die Fuge nicht auf der Mitte und die
     Kreuzung sitzt daneben. */
  .x-vier { grid-auto-rows: 1fr; column-gap: 170px; row-gap: 104px; }
  /* Die Bildmarke steht etwas hoeher als die Rastermitte. */
  .x-raster .xmark { margin-bottom: 96px; }
}

@media (max-width: 900px) {
  .xmark { width: 210px; max-width: 52%; }
  .xmark__label { font-size: 14px; }
  .headshot img { max-width: 240px; }
  /* Auf schmalen Flaechen gibt es keine freie rechte Haelfte mehr. Der Text
     nimmt die volle Breite, der Verlauf laeuft wieder nur von unten. */
  .buehne--kopf .buehne__in > * { max-width: none; }
  .buehne--kopf .buehne__in .h1,
  .buehne--kopf .buehne__in .lead { max-width: none; }
  .buehne--kopf .buehne__in .h1 { font-size: var(--fs-h1); }
  .buehne--kopf::after { background: linear-gradient(to top,
    rgba(9,12,22,.95) 0%, rgba(9,12,22,.88) 34%, rgba(9,12,22,.62) 60%,
    rgba(9,12,22,.20) 84%, rgba(9,12,22,0) 100%); }
}
.is-mobile .xmark { width: 150px; max-width: 46%; }
.is-mobile .xmark__label { font-size: 12px; }
.is-mobile .headshot img { max-width: 210px; }
.is-mobile .buehne--kopf .buehne__in > * { max-width: none; }
.is-mobile .buehne--kopf .buehne__in .h1,
.is-mobile .buehne--kopf .buehne__in .lead { max-width: none; }
.is-mobile .buehne--kopf .buehne__in .h1 { font-size: var(--fs-h1); }


/* ======================================================================
   Ergaenzungen fuer die gebaute Seite. Alles, was im Entwurf noch nicht
   noetig war: Sprungmarke, Menue auf schmalen Flaechen, Fokusanzeige,
   die Leiste der Staging-Fassung und die Marken fuer offene Punkte.
   ====================================================================== */

.sprung { position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--night); color: #fff; padding: 12px 20px; font-weight: 600; }
.sprung:focus { left: 8px; top: 8px; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--lime); outline-offset: 2px; }

/* Menue auf schmalen Flaechen: die Navigation klappt unter der Kopfzeile auf */
@media (max-width: 900px) {
  .head__in { position: relative; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; background: var(--ground);
    border-bottom: 1px solid var(--hair); padding: 8px 0 14px;
    box-shadow: 0 18px 40px rgba(27,29,54,.14); }
  .head--dark .nav { background: var(--night); }
  .nav.ist-offen { display: flex; }
  .nav a { padding: 13px 4px; border-bottom: 1px solid var(--hair); }
  .nav a:last-child { border-bottom: 0; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .burger span { transition: transform .2s ease, opacity .2s ease; }
}

/* -------------------------------------------------- Leiste der Staging-Fassung */
.stg { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: #1b1d36; color: #fff; border-top: 2px solid var(--lime);
  font-family: var(--ff-display); font-size: 12.5px; }
.stg__in { max-width: 1440px; margin: 0 auto; padding: 9px 20px; display: flex;
  gap: 16px; align-items: center; flex-wrap: wrap; }
.stg__marke { background: var(--lime); color: var(--night); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; }
.stg__text { color: #a9adc4; }
.stg__akt { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.stg button, .stg a.knopf { font: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border: 1px solid #44476a; background: transparent;
  color: #fff; cursor: pointer; text-decoration: none; }
.stg button[aria-pressed="true"] { background: var(--lime); color: var(--night);
  border-color: var(--lime); }
body.hat-stg { padding-bottom: 46px; }
body.stg-aus .stg { display: none; }
body.stg-aus { padding-bottom: 0; }

/* Marken fuer offene Punkte, nur sichtbar wenn eingeschaltet */
body.zeigt-offen [data-offen] { outline: 2px dashed #e0a800; outline-offset: 3px;
  position: relative; }
body.zeigt-offen [data-offen]::after { content: "offen " attr(data-offen);
  position: absolute; top: -10px; right: -6px; background: #e0a800;
  color: #241a00; font-family: var(--ff-display); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; padding: 2px 6px; z-index: 5; white-space: nowrap; }

/* Seite fuer die offenen Punkte */
.offenliste { width: 100%; border-collapse: collapse; margin-top: 32px; }
.offenliste th { text-align: left; font-size: var(--fs-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--akzent); padding: 0 16px 10px 0;
  border-bottom: 2px solid var(--ink); }
.offenliste td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--hair);
  vertical-align: top; }
.offenliste .nr { font-family: var(--ff-figure); font-weight: 700;
  color: var(--akzent); width: 46px; white-space: nowrap; }
@media (max-width: 900px) { .offenliste .nr { width: auto; } }
.offenliste .wer { white-space: nowrap; font-weight: 600; }
.offenliste code { font-family: ui-monospace, Consolas, monospace; font-size: 13px;
  overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .offenliste, .offenliste tbody, .offenliste tr, .offenliste td { display: block;
    width: 100%; }
  .offenliste thead { display: none; }
  .offenliste tr { padding: 18px 0; border-bottom: 1px solid var(--hair); }
  .offenliste td { padding: 0 0 6px !important; border: 0 !important; }
  .offenliste .nr::before { content: "Nummer "; font-weight: 400; color: var(--ink-soft); }
  .offenliste .wer::before { content: "Wer: "; font-weight: 400; color: var(--ink-soft); }
}


/* ======================================================================
   Bewegung beim Scrollen. Seit dem 21. September 2026, Vorbild war
   ecodynamics.io: Inhalte gleiten beim Einscrollen um 40 Pixel nach oben
   und blenden ein, in Rastern gestaffelt, Kurve ease-out-expo.
   Dazu hier: Einlauf des Hero-Textes, Parallaxe der grossen Bildflaechen
   und des Liniensystems, Zustand der Kopfzeile nach dem ersten Scrollweg.

   Grundsaetze:
   * Ohne JavaScript ist alles sichtbar. Versteckt wird nur, was site.js
     beim Laden unterhalb des sichtbaren Bereichs findet und mit .rv markiert.
     Was schon im Bild ist, bleibt stehen, es gibt kein Aufblitzen.
   * prefers-reduced-motion: reduce schaltet alles ab, auch den Einlauf.
   * Nur transform und opacity, damit nichts das Layout verschiebt.
   ====================================================================== */
:root { --ease-expo: cubic-bezier(.16, 1, .3, 1); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Einlauf des Hero-Textes, reines CSS, laeuft mit dem ersten Bild */
  @keyframes einlauf { from { opacity: 0; transform: translate3d(0, 36px, 0); }
                       to   { opacity: 1; transform: none; } }
  .hero__in > *, .pagehead .wrap > * {
    animation: einlauf 1.1s var(--ease-expo) both; }
  .hero__in > :nth-child(2), .pagehead .wrap > :nth-child(2) { animation-delay: .09s; }
  .hero__in > :nth-child(3), .pagehead .wrap > :nth-child(3) { animation-delay: .18s; }
  .hero__in > :nth-child(4), .pagehead .wrap > :nth-child(4) { animation-delay: .27s; }
  .hero__in > :nth-child(n+5), .pagehead .wrap > :nth-child(n+5) { animation-delay: .36s; }
  @keyframes bildeinlauf { from { opacity: 0; transform: scale(1.14); }
                           to   { opacity: .34; transform: scale(1.08); } }
  .hero__media img { animation: bildeinlauf 1.8s var(--ease-expo) both; }

  /* Einblenden beim Scrollen */
  .rv { opacity: 0; transform: translate3d(0, 40px, 0);
    transition: opacity .9s var(--ease-expo), transform 1.1s var(--ease-expo);
    transition-delay: var(--rv-verz, 0s); will-change: opacity, transform; }
  .rv.rv--da { opacity: 1; transform: none; }
  /* Bilder gleiten nicht, sie oeffnen sich aus einem leichten Zoom */
  .figure.rv, .headshot.rv { transform: scale(.96); }
  .figure.rv.rv--da, .headshot.rv.rv--da { transform: none; }

  /* Parallaxe. site.js setzt --px je Flaeche, hier nur die Umsetzung. */
  .hero__media img, .buehne img.bg { will-change: transform; }
  .js-px .hero__media img { transform: translate3d(0, var(--px, 0px), 0) scale(1.08); }
  .js-px .buehne img.bg { transform: translate3d(0, var(--px, 0px), 0) scale(1.1); }
  .js-px .lines { transform: translate3d(0, var(--px-l, 0px), 0); will-change: transform; }

  /* Kopfzeile nach den ersten 80 Pixeln: Schatten, Logo eine Spur kleiner.
     Die Hoehe bleibt, sonst springt der Inhalt unter der Leiste. */
  .head { transition: box-shadow .5s var(--ease-expo), background-color .4s ease; }
  .head__logo img { transition: transform .6s var(--ease-expo); transform-origin: 0 50%; }
  .head.head--gescrollt { box-shadow: 0 10px 34px rgba(27, 29, 54, .12); }
  .head.head--gescrollt .head__logo img { transform: scale(.88); }

  /* Schaltflaechen und Karten reagieren auf den Zeiger */
  .btn { transition: transform .35s var(--ease-expo), background-color .25s ease,
    color .25s ease, border-color .25s ease, box-shadow .35s var(--ease-expo); }
  .btn:hover { transform: translate3d(0, -2px, 0); }
  .card { transition: transform .5s var(--ease-expo), box-shadow .5s var(--ease-expo); }
  a.card:hover, .card:has(a:hover) { transform: translate3d(0, -4px, 0);
    box-shadow: 0 18px 40px rgba(27, 29, 54, .10); }
  .link-more { transition: letter-spacing .4s var(--ease-expo); }
}


/* ======================================================================
   Hinweis zur Reichweitenmessung (Einwilligung), seit 24. September 2026.
   Nicht modal, sperrt nichts. Beide Schaltflaechen sind gleich gestaltet:
   keine Wahl wird optisch bevorzugt.
   ====================================================================== */
.einw { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        background: var(--night); color: var(--white);
        box-shadow: 0 -8px 24px rgba(0,0,0,.18); }
.einw[hidden] { display: none; }
.einw__in { max-width: 1200px; margin: 0 auto; padding: 20px 24px;
            display: grid; grid-template-columns: 1fr auto; gap: 8px 32px;
            align-items: center; }
.einw__titel { grid-column: 1; margin: 0; font-family: var(--ff-display);
               font-weight: 600; font-size: var(--fs-sm); }
.einw__text { grid-column: 1; margin: 0; font-size: var(--fs-xs); line-height: 1.55;
              max-width: 78ch; }
.einw__text[hidden] { display: none; }
.einw__text a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.einw__wahl { grid-column: 2; grid-row: 1 / span 3; display: flex; gap: 12px; }
.einw__knopf { background: transparent; color: var(--white);
               border: 1.5px solid var(--white); cursor: pointer; }
.einw__knopf:hover { background: var(--white); color: var(--night); }
.einw__knopf[hidden] { display: none; }
.einw a:focus-visible, .einw__knopf:focus-visible, .foot__einw:focus-visible {
  outline: 2px solid var(--lime); outline-offset: 3px; }
@media (max-width: 760px) {
  .einw__in { grid-template-columns: 1fr; padding: 16px; }
  .einw__wahl { grid-column: 1; grid-row: auto; }
  .einw__knopf { flex: 1; justify-content: center; }
}
/* Im Staging steht die Leiste unten, der Hinweis sitzt darueber. */
.hat-stg .einw { bottom: 53px; }
.foot__einw { all: unset; cursor: pointer; font: inherit; color: inherit; }
.foot__einw[hidden] { display: none; }
.foot__einw:hover { text-decoration: underline; text-underline-offset: 3px; }