/* ==========================================================================
   OKULUS · Gestaltungsschicht, dunkle Fassung
   Stand 21.08.2026 · Francis

   Dritte Fassung. Bauweise nach der Referenz, die Janic am 21.08.2026 gegeben
   hat: TITAN gym website von LUCHIK DSGN auf Behance. Übernommen ist die
   BAUWEISE, nicht die Seite.

   Was übernommen ist:
     · Bento-Raster: alles ist eine gerundete Kachel, Kacheln in Kacheln
     · dunkler Grund, hellere Kachel, Akzentkachel in Grün
     · Pillen als kleine Labels
     · runde Pfeilknöpfe
     · grosse Zahlenkacheln mit dunkler Schrift auf Grün

   Was NICHT übernommen ist:
     · ihr Grün #C3FF00. Hier gilt OKULUS-Kiwi #14F080
     · Inhalte, Bilder, Texte, Marke

   SEIT DEM 25.08.2026 STEHT HIER DAS FINALE BRANDING, nicht mehr die Annaeherung
   an eine Referenz. Grundlage ist cicd/final/03_Styleguide/Okulus_Styleguide.pdf.
   Er kennt genau drei Farben und zwei Schriften, und daran haelt sich diese Datei.

   Modex Sans Bold ist laut Styleguide ausschliesslich die Logoschrift. Sie kommt
   darum als Schrift nicht vor: das Logo ist ein Vektor und traegt sie in sich.
   Fuer Titel und Text gilt Lexend, hier als Lexend Deca aus der Lieferung.

   Die Schrift liegt bei uns und wird nicht von Google geladen. Eine Seite mit
   Datenschutzerklaerung soll ihre Besucher nicht bei einem Dritten anmelden.

   stil.css bleibt unangetastet. Diese Datei liegt darüber.
   ========================================================================== */

/* Eine Datei fuer alle Gewichte von 100 bis 900, 69 kB. Das ist weniger als vier
   einzelne Schnitte und macht jedes Gewicht dazwischen verfuegbar. */
@font-face {
  font-family: "Lexend Deca";
  src: url("schriften/LexendDeca-variabel.woff2") format("woff2-variations"),
       url("schriften/LexendDeca-variabel.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Die drei Farben des Styleguides, im Wortlaut: Kiwi, White, Black. */
  --gruen:   #14F080;   /* Kiwi, RGB 20/240/128 */
  --weiss:   #ffffff;
  --grund:   #000000;   /* Black. Vorher #0A0E0D, das war die Annaeherung */

  /* Abstufungen fuer Kacheln und Kanten. Der Styleguide kennt sie nicht, eine
     dunkle Seite braucht sie trotzdem. Sie sind neutral gehalten: die alten Toene
     hatten einen Gruenstich, der neben dem gesaettigten Kiwi schmutzig wirkt. */
  --kachel:  #0E0E0E;
  --kachel2: #171717;
  --kante:   #2A2A2A;   /* NICHT --rand nennen: das ist in stil.css der Seitenrand */

  --ton-text:        var(--weiss);
  --ton-gedaempft:   #9A9A9A;
  --ton-linie:       var(--kante);
  --ton-linie-stark: var(--kante);
  --ton-flaeche:     var(--kachel2);
  --ton-grund:       var(--grund);
  --ton-akzent:      var(--gruen);

  --schrift: "Lexend Deca", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --gr-h1:      clamp(38px, 5.6vw, 72px);
  --gr-kern:    clamp(26px, 3.4vw, 42px);
  --gr-h2:      clamp(25px, 2.7vw, 36px);
  --gr-h3:      18px;
  --gr-lead-gr: clamp(18px, 1.5vw, 22px);
  --gr-lead:    17px;
  --gr-text:    16px;
  --gr-zahl:    clamp(52px, 6.4vw, 84px);

  --rund:       16px;
  --rund-gross: 26px;
  --rinne:      14px;
  --breite:     1280px;
  --kopf-h:     82px;   /* Höhe des klebenden Kopfes, siehe Hero */
  /* Die Abschnittsnavigation steht im Kopf und zählt darum zu seiner Höhe:
     Polster der Zeile 2×7, Polster der Pille 2×7, ihr Rand 2×1, dazu die Zeile
     selbst mit 1.6 × 13px. */
  --unter-h:    calc(1.6 * var(--gr-mini) + 30px);
  /* Die Höhe, um die ein Hero nach oben gezogen wird. Sie muss der wirklichen
     Kopfhöhe der Seite entsprechen, sonst bleibt über dem Bild eine Kante. */
  --kopf-voll:  var(--kopf-h);
  /* Der Abstand des Herotexts von der Fensteroberkante. Er rechnet die
     Abschnittsnavigation IMMER mit, auch auf Seiten, die keine haben. Ansage
     Janic 03.09.2026: «die Texte sind nicht auf gleicher Höhe, du musst die
     Unterseitenreihe mit einberechnen, wenn du absolute Abstände von oben
     machst.» Vorher hing der Abstand an --kopf-voll und war darum auf jeder
     Seite ohne Zeile um deren Höhe kleiner. */
  --hero-oben:  calc(var(--kopf-h) + var(--unter-h) + clamp(40px, 10vh, 130px));
  /* Die Höhe eines Vollbild-Heros. Sie rechnet den Zug nach oben wieder drauf,
     damit das Bild GARANTIERT bis zur Fensterunterkante läuft.
     Befund Janic 04.09.2026: «am unteren Rand habe ich eine feine weisse Linie».
     --kopf-h sagt 82px, der Kopf misst 81. Der Hero wurde also um ein Pixel
     weiter hochgezogen, als der Kopf hoch ist, und endete ein Pixel vor dem
     Fensterrand. Dahinter liegt auf der Philosophieseite ein WEISSER Abschnitt,
     darum war der Spalt nicht dunkel, sondern hell.
     Der Zuschlag heilt jede solche Abweichung, statt die Konstante zu treffen:
     eine Kopfhöhe von Hand nachzupflegen, geht beim nächsten Umbau wieder
     auseinander. Der Hero ragt dafür um die Kopfhöhe unter das Fenster. */
  --hero-hoehe: calc(100svh + var(--kopf-voll));
}

/* Wo der Kopf die Abschnittsnavigation mitträgt, ist er höher. Ohne diesen
   Zuschlag bleibt über dem Bild eine schwarze Kante. Ansage Janic 27.08.2026.
   Es hing vorher an den Heroklassen und musste bei jeder neuen nachgezogen
   werden. Jetzt hängt es an der Zeile selbst: sie ist der Grund.
   Es steht auf :root und nicht auf body, damit auch html den Wert kennt: das
   scroll-padding darunter braucht ihn, und html erbt nicht von body. */
:root:has(.unterzeile) { --kopf-voll: calc(var(--kopf-h) + var(--unter-h)); }

/* Der klebende Kopf deckt die obersten Pixel des Fensters ab. Wer etwas ins
   Bild holt, muss ihn abziehen, sonst landet das Ziel dahinter.
   Befund Janic 09.09.2026: «die Maske springt bei jedem Klick und man muss
   dann wieder hochscrollen.» Im Fragebogen holte der Motor den neuen Schritt
   mit scrollIntoView herein, die Frage stand danach 91 Pixel hinter dem Kopf.
   Gemessen auf dem Potenzial-Check bei 1440 Pixeln.
   Es steht als scroll-padding und nicht als Rechnung im Skript: die Regel
   gilt damit für JEDES Ins-Bild-Holen, also auch für «Zum Inhalt springen»
   und jeden Sprungpunkt, den eine Seite später bekommt.
   Der Wert hängt an --kopf-voll und stimmt darum auf Seiten mit und ohne
   Abschnittsnavigation. Darum steht der Zuschlag oben auf :root und nicht auf
   body: scroll-padding gehört dem scrollenden Element, und das ist html. */
html { scroll-padding-top: calc(var(--kopf-voll, 82px) + var(--a2, 16px)); }

/* --- Grundlage ------------------------------------------------------------
   Die Regel für die Breite, damit sie nicht wieder verlorengeht (21.08.2026):
   TEXT wird von der Lesbarkeit begrenzt, nicht vom Raster. 55 bis 70 Zeichen
   pro Zeile, deshalb stehen Lauftexte in sieben oder acht Spalten und daneben
   bleiben Spalten leer. Das ist Absicht.
   KACHELN, TABELLEN UND LISTEN werden dagegen von der Bahn begrenzt und laufen
   bis an ihren Rand. Sie tragen kurze Zeilen und leere Spalten daneben wirken
   dort wie ein Fehler.
   ------------------------------------------------------------------------- */
body { background: var(--grund); color: var(--weiss); letter-spacing: -0.008em; }
h1, h2, h3, .kern { letter-spacing: -0.03em; }
h1 { max-width: 15ch; line-height: 1.02; font-weight: 700; }
h2 { max-width: 27ch; line-height: 1.12; font-weight: 700; }
.kern { max-width: 18ch; font-weight: 700; line-height: 1.1; }
.lead { max-width: 72ch; }   /* 22.08.2026: so füllt der Lauftext die acht Spalten aus, 72 Zeichen sind noch gut lesbar */
p { max-width: 66ch; }
.gedaempft { color: var(--ton-gedaempft); }
cite { color: var(--ton-gedaempft); }

/* Auf dunklem Grund darf das Grün Schrift sein: 13 zu 1 */
.mark { text-decoration: none; background: none; color: var(--gruen); }

/* --- Die Kachel ist die Grundform ---------------------------------------- */
.kachel, .zahl, .posten, .vorzuege li, .grundsaetze li, .menschen li, .fragen details {
  background: var(--kachel);
  border: 1px solid var(--kante);
  border-radius: var(--rund-gross);
}

/* Hält ein Wort mit Bindestrich zusammen. Ohne das bricht eine Schlagzeile
   genau am Bindestrich um, und «Know-» steht allein am Zeilenende. */
.zusammen { white-space: nowrap; }

/* --- Pillen: kleine Labels ----------------------------------------------- */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--kachel2); border: 1px solid var(--kante);
  border-radius: 999px; padding: 9px 17px 9px 13px;
  font-size: 13px; letter-spacing: .07em; font-weight: 600;
  color: var(--weiss); margin: 0 0 var(--a3);
}
.kicker::before {
  content: ""; flex: 0 0 auto; width: 17px; height: 16px;
  background: url("../../../cicd/marke/final/okulus-kopf-weiss.svg") center / contain no-repeat;
}

/* --- Kopf ----------------------------------------------------------------- */
.kopf { background: var(--grund); border-bottom: 1px solid var(--kante); }
.kopf .innen { min-height: 80px; }
.marke { display: inline-flex; align-items: center; }
/* Auf dunklem Grund die weisse Wortmarke. Regel des Designsystems. */
.marke img { height: 25px; width: auto; display: block; content: url("../../../cicd/marke/final/okulus-logo-weiss.svg"); }

.haupt { font-size: 15px; font-weight: 500; }
.haupt a { border-bottom: none; padding: 8px 13px; border-radius: 999px; }
.haupt a:hover { background: var(--kachel); }
.haupt a[aria-current="page"] { background: var(--kachel2); }
.haupt a[aria-current="true"] { border-bottom: none; background: rgba(255,255,255,.06); }
/* Keine Leiste, sondern Knöpfe. Ansage Janic 23.08.2026. Deshalb fällt auch die
   Trennlinie weg: eine Linie über der ganzen Breite macht daraus wieder ein Band. */
.unterzeile { border-top: none; }
/* Die Pillen haben eigene Polster. Ohne Ausgleich im Polster der Bahn beginnt die
   Zeile nicht dort, wo die Wortmarke beginnt. Nicht über margin: das würde das
   margin-inline:auto der Bahn aushebeln und die ganze Zeile nach links reissen. */
.unterzeile .unter { gap: var(--a1); padding-left: calc(var(--rand) - 12px); }
.unter a {
  border-bottom: none; padding: 7px 15px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  color: var(--ton-gedaempft); background: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.unter a:hover { background: var(--kachel); border-color: var(--kante); color: var(--weiss); }
.unter a[aria-current="page"] { background: var(--weiss); border-color: var(--weiss); color: var(--grund); }

/* --- Knöpfe --------------------------------------------------------------- */
.knopf {
  background: var(--gruen); color: var(--grund);
  border: 1px solid var(--gruen); border-radius: 999px;
  padding: 13px 24px; font-weight: 600; font-size: 16px;
  transition: background .15s, color .15s;
}
.knopf:hover { background: var(--weiss); border-color: var(--weiss); color: var(--grund); }
.knopf.klein { padding: 9px 17px; font-size: 14px; }
.menue-knopf {
  color: var(--weiss); border: 1px solid var(--kante); background: var(--kachel);
  border-radius: 999px; padding: 9px 17px; font-weight: 600;
}

/* --- Abschnitte: dichter, weil die Kacheln schon trennen ------------------ */
.teil { margin-top: clamp(56px, 6.5vw, 96px); }
.teil.erster { margin-top: clamp(36px, 4.5vw, 64px); }
.teil.weit { margin-top: clamp(64px, 8vw, 120px); }

/* --- Hero: zwei Zahlenkacheln, die erste in Grün --------------------------
   Die Kacheln laufen über je sechs Spalten und damit bis an den Rand der Bahn.
   In der ungestalteten Grundlage standen sie auf vier Spalten mit vier leeren
   daneben, das liess rechts 445 px ungenutzt (Janic, 21.08.2026).
   ------------------------------------------------------------------------- */
.zahl { padding: var(--a3) var(--a3) var(--a4); margin-top: var(--a5); align-self: stretch;
        display: flex; flex-direction: column; }
.zahl .wert { font-weight: 700; letter-spacing: -0.045em; }
.zahl .wert small { font-size: .4em; }
.zahl p { font-size: 15px; max-width: 44ch; }
.zahl cite { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-top: auto; padding-top: var(--a2); }
.zahl { background: var(--gruen); border-color: var(--gruen); color: var(--grund); }
.zahl cite { color: rgba(10,14,13,.62); }
.zahl ~ .zahl { background: var(--kachel); border-color: var(--kante); color: var(--weiss); }
.zahl ~ .zahl cite { color: var(--ton-gedaempft); }

/* Kein Designelement mehr im ersten Abschnitt: seit dem Vollbild-Hero vom
   21.08.2026 macht das Bild diese Arbeit, und das Element kollidierte mit den
   Zahlenkacheln. Es steht weiter im Schluss. */

/* --- Grundsätze: fünf Kacheln statt einer Liste --------------------------- */
.grundsaetze { display: grid; gap: var(--rinne); }
.grundsaetze li {
  display: flex; align-items: center; gap: var(--a2);
  padding: var(--a3);
  border-top: 1px solid var(--kante) !important;
  border-bottom: 1px solid var(--kante) !important;
  font-size: 17px; font-weight: 500; letter-spacing: -0.015em;
  transition: background .15s, color .15s, border-color .15s;
}
.grundsaetze li:hover { background: var(--gruen); border-color: var(--gruen) !important; color: var(--grund); }
.zeichen {
  flex: 0 0 auto; width: 26px; height: 26px;
  background: none;
  color: inherit;
}
.zeichen svg { display: block; }

/* --- Angebot: drei Kacheln, die erste in Grün ----------------------------- */
.angebot { border-top: none; margin-top: var(--a5); display: grid; gap: var(--rinne); }
.posten { display: block; padding: var(--a4); }
/* Der Name der Rolle steht gross und ohne Unterstrich. Unterstriche gehören
   nicht zum Auftritt, Ansage Janic 23.08.2026. */
.posten h3 { font-size: 27px; margin-bottom: var(--a2); font-weight: 700; letter-spacing: -.01em; }
.posten h3 a { text-decoration: none; color: inherit; }
.posten h3 a:hover { color: var(--gruen); }
.posten .preis { display: none; }
/* Kein Hervorheben der ersten Karte mehr: auf der Startseite sind seit dem
   22.08.2026 alle Karten schwarz, und auf der Angebotsseite hat die Regel
   die erste von vier Bereichskarten grün gefärbt, ohne Grund. */
.wege { flex-direction: row; flex-wrap: wrap; gap: var(--a1) var(--a3); font-size: 15px; font-weight: 500; }
/* Ein Verweis ist ein Knopf, nie ein unterstrichenes Wort. Hier in Grün, weil
   er in einer schwarzen Karte steht und der einzige Weg hinaus ist. */
.wege a {
  display: inline-block; text-decoration: none; border-bottom: none;
  background: var(--gruen); color: var(--grund);
  border: 1px solid var(--gruen); border-radius: 999px;
  padding: 9px 18px; font-weight: 600; font-size: 15px;
  transition: background .15s, color .15s, border-color .15s;
}
.wege a:hover { background: var(--weiss); border-color: var(--weiss); color: var(--grund); }
@media (min-width: 820px) { .angebot { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } }

/* --- Tool gegen Agent: zwei getrennte Spalten ----------------------------
   Ansage Janic 22.08.2026: die Spaltentitel waren mit 11 px nicht lesbar, und
   die zwei Seiten sollen als getrennte Kacheln stehen statt als eine Zeile.
   Umgesetzt mit border-spacing: jede Zelle wird eine eigene Kachel. Der
   Aussenabstand, den border-spacing zusätzlich erzeugt, wird mit einem
   negativen Rand ausgeglichen, damit die Tabelle an der Bahn bündig bleibt.
   ------------------------------------------------------------------------- */
.eckdaten {
  border-collapse: separate;
  border-spacing: var(--rinne) 12px;
  width: calc(100% + 2 * var(--rinne));
  margin-inline: calc(-1 * var(--rinne));
}
/* NUR die Kopfzeile wird zur gruenen Pille. Es gibt Tabellen mit Zeilenkoepfen
   (th in jeder Zeile), dort wuerde daraus sonst pro Zeile eine gruene Pille.
   Am 23.08.2026 auf der Angebotsseite genau so passiert. */
.eckdaten thead th {
  background: var(--gruen); color: var(--grund);
  font-size: 15px; letter-spacing: .04em; text-transform: uppercase; font-weight: 700;
  border: none; border-radius: 999px;
  padding: 13px 24px;
  width: 50%;
  text-align: left;
  vertical-align: middle;
}
/* Zeilenkoepfe sind Beschriftungen und sehen aus wie die linke Spalte */
.eckdaten tbody th {
  background: var(--kachel); border: 1px solid var(--kante);
  border-radius: var(--rund);
  padding: clamp(18px, 1.8vw, 26px);
  font-size: 16px; font-weight: 500; line-height: 1.45;
  letter-spacing: 0; text-transform: none;
  color: var(--ton-gedaempft);
  text-align: left; vertical-align: top; width: 42%;
}
.feld-panel .eckdaten tbody th { background: var(--grund); }
.feld-hell .eckdaten tbody th { background: #f6f6f6; border-color: rgba(0,0,0,.12); color: #5c5c5c; }
.feld-gruen .eckdaten tbody th { background: rgba(255,255,255,.35); border-color: rgba(0,0,0,.22); color: rgba(10,14,13,.62); }
.eckdaten td {
  background: var(--kachel);
  border: 1px solid var(--kante);
  border-radius: var(--rund);
  padding: clamp(20px, 2vw, 28px);
  font-size: 16px; line-height: 1.45;
  vertical-align: top;
}
.eckdaten td:first-child { color: var(--ton-gedaempft); }
.eckdaten td:last-child { font-weight: 500; }

/* Auf Grün und auf Weiss dreht die Tabelle mit */
.feld-gruen .eckdaten th, .feld-hell .eckdaten th { background: var(--grund); color: var(--weiss); }
.feld-gruen .eckdaten td { background: rgba(255,255,255,.35); border-color: rgba(0,0,0,.22); }
.feld-gruen .eckdaten td:first-child { color: rgba(10,14,13,.62); }
.feld-hell .eckdaten td { background: #f6f6f6; border-color: rgba(0,0,0,.12); }
.feld-hell .eckdaten td:first-child { color: #5c5c5c; }

/* --- Fragen: jede Frage eine Kachel -------------------------------------- */
.fragen { border-top: none; display: grid; gap: var(--rinne); }
.fragen details { border-bottom: 1px solid var(--kante); padding: 0 var(--a3); }
.fragen summary { font-size: 17px; font-weight: 600; padding-block: var(--a3); }
.fragen summary::after { color: var(--gruen); font-size: 26px; font-weight: 400; line-height: 1; }
.fragen details p { font-size: 15px; max-width: 62ch; color: var(--ton-gedaempft); }

/* --- Darum mit uns: vier Kacheln, eine grün ------------------------------- */
.vorzuege { gap: var(--rinne); }
.vorzuege li { border-top: 1px solid var(--kante) !important; padding: var(--a4); }
/* Alle vier Kacheln gleich, Ansage Janic 22.08.2026. Vorher war die zweite
   grün, das hat eine Aussage hervorgehoben, die keine Hervorhebung braucht. */
.vorzuege h3 { font-size: 19px; margin-bottom: var(--a2); font-weight: 700; }
.vorzuege p { font-size: 15px; }

/* --- Menschen: Bildkacheln ----------------------------------------------- */
.flaeche { border-radius: var(--rund-gross); background: var(--kachel2); }
.menschen li { padding: var(--a2); }
.menschen .flaeche {
  background-color: var(--kachel2);
  background-image: url("../../../cicd/marke/final/okulus-kopf-weiss.svg");
  background-repeat: no-repeat; background-position: center; background-size: 28%;
  border-radius: var(--rund);
  opacity: .45;
}
.menschen .name { font-size: 16px; font-weight: 700; padding-inline: 4px; }
.menschen .rolle { font-weight: 500; padding-inline: 4px; color: var(--gruen); }
.menschen .zusatz { padding-inline: 4px; }

/* --- Schluss: eine grosse grüne Kachel ----------------------------------- */
section[aria-labelledby="t-schluss"] {
  background-color: var(--gruen); color: var(--grund);
  border-radius: var(--rund-gross);
  padding: clamp(40px, 5vw, 72px) 0;
  max-width: var(--breite);
  margin-inline: auto;
  /* Aufrecht, Ansage Janic 22.08.2026: das Signet steht, es liegt nicht.
     Deshalb das ganze Icon und nicht der Kopf allein. Hochformat
     74 zu 125, die Höhe gibt hier das Mass. */
  background-image: url("../../../cicd/marke/final/okulus-icon-schwarz.svg");
  background-repeat: no-repeat;
  /* Weiter nach links, Ansage Janic 23.08.2026: die Figur endet jetzt dort,
     wo der Text endet, also am rechten Rand der Bahn statt am Fensterrand. */
  background-position: right max(24px, calc((100vw - var(--breite)) / 2 + var(--rand))) center;
  background-size: auto clamp(150px, 19vw, 260px);
}
@media (max-width: 1400px) {
  section[aria-labelledby="t-schluss"] { margin-inline: var(--rand); }
}
@media (max-width: 1080px) {
  section[aria-labelledby="t-schluss"] { background-image: none; }
}
#t-schluss.lead.gross {
  font-size: var(--gr-kern); font-weight: 700; line-height: 1.1;
  letter-spacing: -0.03em; max-width: 20ch; margin-bottom: var(--a4);
}
section[aria-labelledby="t-schluss"] .knopf { background: var(--grund); color: var(--gruen); border-color: var(--grund); }
section[aria-labelledby="t-schluss"] .knopf:hover { background: var(--weiss); border-color: var(--weiss); color: var(--grund); }
section[aria-labelledby="t-schluss"] .daneben { display: block; margin: var(--a2) 0 0; color: rgba(10,14,13,.66); }

/* --- Fuss ----------------------------------------------------------------- */
.fuss {
  background: var(--kachel); border: 1px solid var(--kante); border-radius: var(--rund-gross);
  margin-top: clamp(56px, 6.5vw, 96px); padding: var(--a6) var(--a4);
}
.fuss .stolz { font-weight: 700; margin-bottom: var(--a2); }
/* Die Wortbildmarke aus dem Styleguide, statt der frueheren Textzeile.
   Etwas kleiner seit dem 03.09.2026, Ansage Janic. Vorher 165px. */
.fuss .powered { display: block; width: 132px; height: auto; }
.fuss nav a { text-decoration: none; color: var(--ton-gedaempft); }
.fuss nav a:hover { color: var(--gruen); }

/* --- Telefon -------------------------------------------------------------- */
@media (max-width: 860px) {
  .zahl, .posten, .vorzuege li { padding: var(--a3); }
  .grundsaetze li { font-size: 16px; }
}

/* ==========================================================================
   Hero, Vollbild · 21.08.2026
   Auftrag Janic: ein Vollbild-Hero, nur mit der Schlagzeile. Der Lauftext und
   die zwei Prozentkacheln erscheinen erst beim Scrollen.
   Das Bild: die drei Roboter langweilen sich in einem dunklen Raum mit Tiefe.
   ========================================================================== */

.hero {
  min-height: var(--hero-hoehe);
  display: grid;
  align-content: start;
  /* Der klebende Kopf steht im Fluss und ist 82 px hoch. Ohne diesen Zug nach
     oben beginnt der Hero darunter und ragt unten aus dem Fenster. So läuft
     das Bild randlos, und der Kopf liegt durchsichtig darüber. */
  margin: calc(-1 * var(--kopf-voll)) 0 0;
  position: relative;
  isolation: isolate;
  overflow: clip;
}

/* Das Bild liegt auf einer eigenen Ebene, damit es sich beim Scrollen bewegen
   kann, ohne die Schlagzeile mitzunehmen. Es ist absichtlich höher als der
   Hero, sonst würde beim Verschieben oben oder unten eine Kante sichtbar. */
.hero::before {
  content: "";
  position: absolute;
  inset: -9% 0 -9%;
  z-index: -1;
  /* 2880 px breit, 201 kB. Die kleine Fassung kommt unten per Medienabfrage.
     Das 4K-Original liegt als okulus-hero-master.jpg daneben. */
  background-image:
    linear-gradient(to bottom, rgba(10,14,13,.86) 0%, rgba(10,14,13,.35) 42%, rgba(10,14,13,0) 62%, rgba(10,14,13,.9) 100%),
    url("../../../cicd/final/hero/okulus-hero.jpg");
  background-size: cover, cover;
  background-position: center top, center 62%;
  background-repeat: no-repeat, no-repeat;
  will-change: transform;
}

/* --- Bewegung beim Scrollen ----------------------------------------------
   Die Szene wandert langsamer als die Seite und kommt dabei leicht näher.
   Dadurch bewegen sich die drei Roboter gegen den Text und der Raum bekommt
   Tiefe. Reine CSS-Bewegung am Scrollfortschritt, kein JavaScript.
   Wer Bewegung reduziert haben will, sieht ein stehendes Bild.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero::before {
      animation: hero-fahrt linear both;
      animation-timeline: view();
      animation-range: entry 100% exit 100%;
    }
    @keyframes hero-fahrt {
      from { transform: translateY(0) scale(1); }
      to   { transform: translateY(-7%) scale(1.09); }
    }
    /* Die Schlagzeile zieht etwas schneller weg, das trennt die Ebenen.
       Der Bereich fängt beim Hinausgehen an und nicht schon beim Hereinkommen.
       Vorher stand hier `entry 100% exit 100%`: ein Hero am Seitenanfang ist
       beim Laden schon vollständig herein, die Bewegung war darum bei Scrollstand
       null bereits angefangen. Und zwar je Seite unterschiedlich weit, weil sie
       von der Höhe des Heros abhängt. Genau das hat die Titel um 5 bis 25 Pixel
       gegeneinander verschoben. Befund Janic 03.09.2026. */
    .hero-innen {
      animation: hero-titel linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes hero-titel {
      from { transform: translateY(0); opacity: 1; }
      to   { transform: translateY(-46px); opacity: .55; }
    }
    /* Die Notiz bleibt am längsten stehen und geht zuletzt */
    .notiz {
      animation: notiz-weg linear both;
      animation-timeline: view();
      animation-range: exit 20% exit 100%;
    }
    @keyframes notiz-weg {
      from { transform: rotate(-2deg) translateY(0); opacity: .92; }
      to   { transform: rotate(-2deg) translateY(-18px); opacity: 0; }
    }
  }
}

/* Die Bahn im Hero muss die ganze Breite nehmen. Ohne `width: 100%` schrumpft
   sie auf die Lesebreite der Schlagzeile, und ihr eigenes `margin-inline: auto`
   zentriert sie dann: die Zeile hängt in der Mitte statt in der Flucht der
   Wortmarke. Diese Korrektur stand dreimal einzeln bei Angebot, Rollenseiten
   und Seitenhero, und die Startseite ging leer aus. Ansage Janic 03.09.2026:
   linksbündig und auf gleicher Höhe wie überall. Jetzt steht sie hier, einmal. */
.hero-innen {
  width: 100%; max-width: var(--breite); margin-inline: auto;
  padding-top: var(--hero-oben);
  padding-bottom: clamp(40px, 8vh, 110px);
}

/* Eine Höhe für alle Header, Ansage Janic 03.09.2026, Vorlage ist der Titel der
   Workshopseite. Vorher stand hier clamp(40px, 7.4vw, 104px), die Rollenseiten
   trugen 168px und Angebot, Workshops, Philosophie und Team 62px. Die Grösse
   steht ab jetzt nur an dieser einen Stelle, damit sie nicht wieder ausläuft. */
.hero h1 {
  font-size: clamp(38px, 4.4vw, 62px);
  line-height: .98;
  letter-spacing: -0.04em;
  font-weight: 700;
  max-width: 17ch;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0,0,0,.55);
}
.hero .mark { color: var(--gruen); background: none; }

/* Der Kopf liegt durchsichtig über dem Bild und bekommt seinen Grund, sobald
   ein wenig gescrollt ist. Direkt am Scrollstand festgemacht, damit die
   Schlagzeile nie über den Navigationspunkten liegt. Ohne JavaScript und ohne
   Scrollanimation bleibt er wie immer, also mit Grund. */
.js:has(.hero) .kopf { background: transparent; border-bottom-color: transparent; transition: background-color .2s, border-color .2s; }
.js.kopf-fest .kopf, .js.sofort .kopf, .js:not(:has(.hero)) .kopf { background: var(--grund); border-bottom-color: var(--kante); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .js:has(.hero) .kopf {
      animation: kopf-fest linear both;
      animation-timeline: scroll();
      animation-range: 30px 110px;
      transition: none;
    }
    @keyframes kopf-fest {
      from { background-color: transparent; border-bottom-color: transparent; }
      to   { background-color: var(--grund); border-bottom-color: var(--kante); }
    }
  }
}

/* --- Auftritt beim Scrollen ---------------------------------------------- */
.js [data-auftritt] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
}
.js [data-auftritt].da { opacity: 1; transform: none; }
.js [data-auftritt]:nth-of-type(2) { transition-delay: .08s; }
.js [data-auftritt]:nth-of-type(3) { transition-delay: .16s; }
/* Ohne JavaScript, ohne Beobachter oder bei reduzierter Bewegung: alles da */
.js.sofort [data-auftritt] { opacity: 1; transform: none; transition: none; }

/* Nach dem Vollbild-Hero braucht der erste Abschnitt Luft, aber keinen
   doppelten Abstand, das Bild endet schon dunkel. */
.hero + .teil.erster { margin-top: clamp(56px, 9vh, 120px); }

@media (max-width: 860px) {
  /* Hier stand `min-height: 92svh`. Auf dem Telefon endete der Hero damit rund
     68 px vor der Fensterunterkante, und darunter begann der nächste Abschnitt.
     Weg, Ansage Janic 04.09.2026: «ich hätte alle headerbilder immer
     bildschirmfüllend». Ohne die Zeile gilt --hero-hoehe wie am Rechner. */
  .hero::before {
    background-position: center top, 62% 62%;
    /* kleinere Datei fürs Telefon, 1600 px und 83 kB */
    background-image:
      linear-gradient(to bottom, rgba(10,14,13,.86) 0%, rgba(10,14,13,.35) 42%, rgba(10,14,13,0) 62%, rgba(10,14,13,.9) 100%),
      url("../../../cicd/final/hero/okulus-hero-1600.jpg");
  }
  .hero h1 { font-size: clamp(34px, 8.4vw, 48px); }
}

/* --- Handschriftliche Notiz im Hero -------------------------------------
   Auftrag Janic 21.08.2026. Sie steht als Text auf der Seite und nicht im
   Bild: so ist sie lesbar, vorlesbar und änderbar, und sie skaliert mit.
   Die Schrift ist eine Systemhandschrift. Justine setzt später die echte.
   ------------------------------------------------------------------------- */
.notiz {
  position: absolute;
  margin: 0;
  color: var(--gruen);
  /* Lage von Janic am 21.08.2026 markiert: unten rechts auf dem Boden, der
     Pfeil zeigt nach links zurück auf die Gruppe. */
  left: 66%;
  top: 80.5%;
  width: 27%;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 14px);
  transform: rotate(-2deg);
  pointer-events: none;
}
.notiz p {
  margin: 0;
  max-width: none;
  font-family: "Bradley Hand", "Segoe Script", "Ink Free", "Marker Felt", "Chalkboard SE", cursive;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.35;
  font-weight: 400;
  opacity: .92;
  letter-spacing: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.notiz-pfeil {
  flex: 0 0 auto;
  width: clamp(52px, 5.8vw, 88px);
  height: auto;
}

/* Der Hero braucht dafür einen Bezugsrahmen */
.hero { position: relative; }

@media (max-width: 1080px) {
  /* Der Ausschnitt zeigt hier vor allem den stehenden Roboter, die Notiz
     wandert unter ihn und der Pfeil zeigt nach rechts hinauf. */
  .notiz { left: 6%; top: 74%; width: 84%; align-items: flex-start; }
  .notiz-pfeil { order: 2; transform: scaleX(-1); }
  .notiz p { order: 1; }
}
@media (max-width: 560px) {
  .notiz { top: 72%; }
  .notiz p { font-size: 14px; }
}

/* ==========================================================================
   Abschnitte sichtbar machen · 22.08.2026
   Befund Janic: «man sieht die verschiedenen Abschnitte nicht wirklich.»
   Gemessen stimmte das: alle acht Abschnitte hatten denselben Grund und
   exakt denselben Abstand von 94 px, und fast alles war eine Kachel. Beim
   Umbau auf das Bento-Raster sind die Farbfelder verlorengegangen, die die
   helle Fassung hatte. Drei Mittel, in dieser Reihenfolge wirksam:
     1. Felder: nicht jeder Abschnitt steht auf demselben Grund
     2. Abschnittsköpfe: Haarlinie über die volle Breite. Nummern waren
        auch drin, hat Janic am 22.08.2026 wieder streichen lassen
     3. Abstände: gross vor einem neuen Kapitel, klein innerhalb
   ========================================================================== */

/* --- 1. Felder ------------------------------------------------------------ */
.feld-panel, .feld-hell {
  padding-block: clamp(56px, 7vw, 104px);
  margin-top: clamp(64px, 8vw, 120px);
}
.feld-panel { background: var(--kachel); }
.feld-hell  { background: var(--weiss); color: var(--grund); }

/* Auf Weiss dreht alles: Kacheln werden hell, Linien dunkel, das Auge schwarz */
.feld-hell .kicker { color: var(--grund); background: #f0f0f0; border-color: #d8d8d8; }
.feld-hell .kicker::before { background-image: url("../../../cicd/marke/final/okulus-kopf-schwarz.svg"); }
.feld-hell .grundsaetze li {
  background: transparent;
  border-color: rgba(0,0,0,.16) !important;
}
.feld-hell .grundsaetze li:hover { background: var(--gruen); border-color: var(--gruen) !important; }
.feld-hell .gedaempft { color: #5c5c5c; }
.feld-hell .knopf { background: var(--grund); color: var(--weiss); border-color: var(--grund); }
.feld-hell .knopf:hover { background: var(--gruen); color: var(--grund); border-color: var(--gruen); }

/* --- 2. Abschnittskopf: Linie über die volle Breite plus Nummer ----------- */
/* Die Linie sitzt am Abschnitt selbst und nicht in der Bahn. In der Bahn
   wurde sie zur Rasterzelle und hat den Inhalt um eine Spalte verschoben.
   Geprüft und behoben am 22.08.2026. */
/* :not(.hero) ist zwingend. Ohne den Ausschluss ersetzt diese Regel die
   Bildebene des Heros durch die Haarlinie, weil der Hero ebenfalls ein
   section[aria-labelledby] ist. Am 22.08.2026 genau so passiert. */
main > section[aria-labelledby]:not(.hero) { position: relative; }
main > section[aria-labelledby]:not(.hero)::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: currentColor;
  opacity: .14;
}
/* Kein Strich am ersten Abschnitt unter dem Hero und am grünen Schluss.
   Die Ausnahme muss so spezifisch sein wie die Regel darüber, sonst gewinnt
   die Regel. Genau das war der Fall: auf jeder Seite ohne Hero stand eine
   zweite Linie über dem Titel, weil `.teil.erster::before` (0,2,1) gegen
   `main > section[aria-labelledby]:not(.hero)::before` (0,2,3) verliert.
   Befund Janic 02.09.2026, Workshops, KI-Zmorge und Referate. */
main > section.teil.erster::before,
main > section.teil[aria-labelledby="t-schluss"]::before { content: none; }

/* --- 3. Abstände: gross vor einem Kapitel, klein innerhalb ---------------- */
.teil.kapitel { margin-top: clamp(84px, 10vw, 150px); }

/* --- Grünes Feld mit schwarzer Schrift · 22.08.2026 -----------------------
   Auftrag Janic. Es steht auf dem Angebot, dem kommerziellen Herz der Seite,
   und weit genug vom grünen Schluss entfernt. Auf Grün gilt die Regel des
   Designsystems: die Schrift ist schwarz, 14 zu 1.
   ------------------------------------------------------------------------- */
.feld-gruen {
  background: var(--gruen);
  color: var(--grund);
  padding-block: clamp(72px, 9vw, 140px);
  margin-top: clamp(64px, 8vw, 120px);
}
.feld-gruen .kicker {
  color: var(--grund);
  background: rgba(0,0,0,.07);
  border-color: rgba(0,0,0,.22);
}
.feld-gruen .kicker::before { background-image: url("../../../cicd/marke/final/okulus-kopf-schwarz.svg"); }
.feld-gruen a { color: var(--grund); }

/* Auf Grün sind ALLE Kacheln schwarz mit weisser Schrift, Ansage Janic
   22.08.2026. Vorher war nur die erste schwarz und die anderen zwei standen
   als Umriss auf Grün. */
.feld-gruen .posten {
  background: var(--grund);
  border-color: var(--grund);
  color: var(--weiss);
}
.feld-gruen .posten:hover { background: #0d3d24; border-color: #0d3d24; }
.feld-gruen .posten a { color: var(--weiss); }

/* Die Verweise in den Kacheln sind kleine Knöpfe, in der Form von
   «Gespräch vereinbaren». Sie sind aber als Umriss gesetzt und nicht gefüllt:
   gefüllt ist die eine Hauptaufforderung, alles andere ist zweite Reihe. */
.feld-gruen .wege { gap: 10px; margin-top: var(--a3); }
.feld-gruen .wege a {
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.42);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  /* Schwarze Schrift, Ansage Janic 28.08.2026. Diese Knöpfe stehen in den
     schwarzen Kacheln und sind dort mit Kiwi gefüllt, nicht als Umriss. Auf
     Kiwi steht die Schrift schwarz, wie die Marke. */
  color: var(--grund);
  transition: background .15s, color .15s, border-color .15s;
}
/* Weil der Grundzustand schon Kiwi ist, muss die Schwebe woanders hin, sonst
   passiert beim Zeigen nichts Sichtbares. */
.feld-gruen .wege a:hover {
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--grund);
}
.feld-gruen .knopf {
  background: var(--grund); color: var(--weiss); border-color: var(--grund);
}
.feld-gruen .knopf:hover { background: var(--weiss); color: var(--grund); border-color: var(--weiss); }

/* --- Mehr Luft zwischen Text und Abschnittsrand · 22.08.2026 --------------
   Ansage Janic. Zwei Stellen: die Felder bekommen oben und unten mehr,
   und die Bahn bekommt seitlich mehr, sobald Platz da ist.
   ------------------------------------------------------------------------- */
.feld-panel, .feld-hell {
  padding-block: clamp(72px, 9vw, 140px);
}
@media (min-width: 1000px) { :root { --rand: 56px; } }
@media (min-width: 1400px) { :root { --rand: 72px; } }

/* Auch in den Kacheln selbst etwas mehr Rand */
.posten, .vorzuege li { padding: clamp(26px, 2.6vw, 40px); }
.zahl { padding: clamp(24px, 2.4vw, 36px) clamp(24px, 2.4vw, 36px) clamp(28px, 3vw, 44px); }
.fragen details { padding-inline: clamp(20px, 2vw, 30px); }

/* ==========================================================================
   Abschnitte stossen direkt aneinander · 22.08.2026
   Ansage Janic: zwischen dem weissen und dem grünen Abschnitt lag ein
   schwarzer Streifen. Ursache: die Abschnitte waren mit Aussenabstand
   getrennt, dort schien der Seitengrund durch. Jetzt trägt jeder Abschnitt
   seinen Raum als INNENabstand, und es gibt keine Aussenabstände mehr.
   Damit gehen die Felder ohne Fuge ineinander über.
   ========================================================================== */

main > section.teil {
  margin-top: 0;
  padding-block: clamp(72px, 9vw, 140px);
  background-color: var(--grund);
}
main > section.teil.feld-panel { background-color: var(--kachel); }
main > section.teil.feld-hell  { background-color: var(--weiss); }
main > section.teil.feld-gruen { background-color: var(--gruen); }

/* Der erste Abschnitt unter dem Hero: oben etwas weniger, das Bild endet
   schon dunkel und braucht keinen doppelten Auftakt. */
main > section.teil.erster { padding-top: clamp(48px, 6vw, 96px); }

/* Der Schluss läuft jetzt ebenfalls über die volle Breite, sonst bliebe dort
   als einziger Abschnitt eine Fuge. */
section[aria-labelledby="t-schluss"] {
  max-width: none;
  margin-inline: 0;
  border-radius: 0;
  padding-block: clamp(72px, 9vw, 140px);
  background-position: right max(24px, calc((100vw - var(--breite)) / 2 + var(--rand))) center;
}
@media (max-width: 1400px) {
  section[aria-labelledby="t-schluss"] { margin-inline: 0; }
}

/* Die Haarlinie braucht es nur, wo zwei Abschnitte denselben Grund haben.
   Zwischen zwei Farben trennt die Farbe, dort wäre die Linie ein Fremdkörper. */
main > section.teil.feld-panel::before,
main > section.teil.feld-hell::before,
main > section.teil.feld-gruen::before { content: none; }

/* Der Fuss schliesst ohne Fuge an */
.fuss { margin-top: 0; }

/* --- Byline unter der Schlagzeile · 22.08.2026 ---------------------------
   Ansage Janic. Deutlich kleiner als die Schlagzeile, damit die Hierarchie
   stimmt, aber gross genug, um im Vollbild gelesen zu werden.
   ------------------------------------------------------------------------- */
.hero-byline {
  margin: clamp(14px, 1.6vh, 26px) 0 0;
  max-width: 34ch;
  font-size: clamp(17px, 1.7vw, 26px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: rgba(255,255,255,.82);
  text-shadow: 0 2px 26px rgba(0,0,0,.5);
}

/* Die letzten Fugen: sie lagen an Regeln mit höherer Spezifität und an
   stil.css, deshalb hier ausdrücklich. */
.hero + .teil.erster { margin-top: 0; }
main > section.teil.kapitel { margin-top: 0; }
main > .teil:last-child { margin-bottom: 0; }

/* Der Schluss ist ein Farbfeld wie die anderen und braucht dieselbe
   Spezifität, sonst überschreibt ihn die Grundregel für alle Abschnitte.
   Am 22.08.2026 genau so passiert: der Schluss wurde dunkel. */
main > section.teil[aria-labelledby="t-schluss"] {
  background-color: var(--gruen);
  color: var(--grund);
}
main > section.teil[aria-labelledby="t-schluss"]::before { content: none; }

/* Die Zeile über der Hauptaufforderung · 22.08.2026, Ansage Janic.
   Sie stellt die Frage, auf die der Knopf die Antwort ist. */
.anlauf {
  margin: var(--a5) 0 var(--a2);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
  max-width: 30ch;
}

/* Knopf zweiter Ordnung: Umriss statt Füllung · 22.08.2026
   Gefüllt ist die eine Hauptaufforderung je Abschnitt, alles Weiterführende
   trägt den Umriss. Beim Überfahren wird er grün mit dunkler Schrift. */
.knopf.umriss {
  background: transparent;
  color: var(--weiss);
  border-color: rgba(255,255,255,.42);
}
.knopf.umriss:hover {
  background: var(--gruen);
  border-color: var(--gruen);
  color: var(--grund);
}
.feld-hell .knopf.umriss { color: var(--grund); border-color: rgba(0,0,0,.32); }
.feld-hell .knopf.umriss:hover { color: var(--grund); }

/* --- Fuss, drei Spalten · 23.08.2026 -------------------------------------
   Ansage Janic: links die Herkunftszeile mit dem liegenden Roboter darunter,
   in der Mitte die Adresse, rechts nur noch AGB, Impressum, Datenschutz.
   Alle anderen Verweise sind aus dem Fuss weg, die Navigation im Kopf
   erreicht sie ohnehin.
   ------------------------------------------------------------------------- */
.fuss .raster { row-gap: var(--a5); }
.fuss-figur {
  display: block;
  /* Etwas kleiner seit dem 03.09.2026, Ansage Janic. Vorher 190px. */
  width: min(100%, 152px);
  height: auto;
  margin-top: var(--a3);
}
.fuss-adresse p { font-size: 15px; line-height: 1.6; margin-bottom: var(--a2); max-width: none; }
.fuss-adresse a { color: var(--ton-gedaempft); text-decoration: none; }
.fuss-adresse a:hover { color: var(--gruen); }
.fuss nav { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* Das Verzeichnis der Branchenseiten, Ansage Janic 28.08.2026. Es klappt auf,
   weil noch mehr Seiten dazukommen und eine offene Liste den Fuss auffrisst.
   Zugeklappt ist es eine Zeile, aufgeklappt eine gewöhnliche Fussnavigation. */
.fuss-verzeichnis { margin-top: var(--a3); font-size: var(--gr-klein); }
.fuss-verzeichnis summary {
  cursor: pointer; list-style: none;
  color: var(--ton-gedaempft);
  display: inline-flex; align-items: center; gap: 7px;
}
.fuss-verzeichnis summary::-webkit-details-marker { display: none; }
/* Das Dreieck zeichnen wir selbst, damit es die Farbe des Textes trägt und
   sich beim Aufklappen dreht. */
.fuss-verzeichnis summary::before {
  content: ""; flex: 0 0 auto;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.fuss-verzeichnis[open] summary::before { transform: rotate(45deg); }
.fuss-verzeichnis summary:hover { color: var(--gruen); }
.fuss-verzeichnis nav { margin-top: 8px; padding-left: 13px; }

/* Rasterstarts, die stil.css nicht hat. Gebraucht, um die Fussspalten nach
   rechts zu schieben (Janic, 23.08.2026). */
.b8{grid-column-start:8}.b9{grid-column-start:9}.b10{grid-column-start:10}.b11{grid-column-start:11}

/* ==========================================================================
   Angebotsseite · 23.08.2026
   Vier Bausteine, die nur dort vorkommen und in der Grundlage neutral sind:
   die Preiskacheln, ihre Kopfzeile, der Preis und die numerierte Abfolge.
   ========================================================================== */

/* Das Fach über der Beschreibung einer Rolle. Der Name steht als Titel, das
   Fach klein darunter: gefragt wird «wer ist das» und erst dann «was macht sie». */
/* Vier Rollen in vier Spalten wurden zu schmal, die Sätze brachen nach drei
   Wörtern um. Zwei Spalten, nur in diesem Abschnitt: auf der Startseite
   stehen drei Posten, dort trägt das gemeinsame auto-fit weiter. */
@media (min-width: 820px) {
  section[aria-labelledby="t-agenten"] .angebot { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.posten .fach {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--gruen); margin: 0 0 var(--a2);
}

/* --- Die vier Einstiege als Zeilen ---------------------------------------
   Ansage Janic 23.08.2026: Zeilen statt Spalten. Drei nebeneinander ging noch,
   vier wurden zu schmal, und die Lage links vom Angebot rechts liest sich wie
   eine Liste, in der man sich selbst sucht. Genau das soll sie sein.
   ------------------------------------------------------------------------- */
.stufen { list-style: none; margin: var(--a5) 0 0; padding: 0; }
.stufe {
  display: grid; gap: var(--rinne);
  padding-block: clamp(30px, 3.4vw, 46px);
  border-top: 1px solid rgba(0,0,0,.14);
}
.stufe:last-child { border-bottom: 1px solid rgba(0,0,0,.14); }
@media (min-width: 820px) {
  .stufe { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
/* Zwei Spalten auf dem Desktop, Ansage Janic 28.08.2026: die vier Einstiege
   stehen als Zweierblock statt als vier Zeilen untereinander.
   Innerhalb einer Stufe fällt die Zweiteilung Lage links, Inhalt rechts dann
   weg. Auf halber Bahnbreite wären beide Spalten zu schmal, also steht die
   Lage über dem Inhalt. Die Unterkante der letzten Stufe fällt ebenfalls weg:
   in einem Raster mit zwei Spalten säumt sie nur eine der beiden. */
@media (min-width: 1000px) {
  .stufen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 4vw, 64px);
  }
  /* align-content: start ist zwingend. Die zwei Stufen einer Reihe werden auf
     gleiche Höhe gezogen, und ohne diesen Zug nach oben verteilt sich der freie
     Platz der kürzeren Stufe auf ihre zwei Zeilen. Dann steht ihr Text tiefer
     als der des Nachbarn, obwohl die Knöpfe auf gleicher Linie sitzen. */
  .stufe { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .stufe:last-child { border-bottom: none; }
  .stufe-inhalt > * { max-width: none; }
  /* Zwei Zeilen Titel sind reserviert, auch wenn der Titel nur eine braucht.
     Sonst rutscht der Knopf beim kürzeren Nachbarn hoch, und in einer Reihe
     steht nichts auf gleicher Linie. */
  .stufe-lage h3 { min-height: 2.3em; }
}
/* Der Knopf steht unter dem Titel in der linken Spalte und ist eine Spur
   kleiner als sonst: er wiederholt sich vier Mal und soll nicht rufen. */
.stufe-lage { display: flex; flex-direction: column; align-items: flex-start; }
.stufe-lage .knopf { padding: 11px 20px; font-size: 15px; }
.stufe-lage p { margin-top: var(--a3); }
.stufe-lage h3 {
  font-size: clamp(20px, 2vw, 26px); line-height: 1.15;
  margin: 0; font-weight: 700; max-width: 20ch;
}
.stufe-inhalt > * { max-width: 60ch; }
.stufe-inhalt > p:first-child { margin-top: 0; }
.stufe-inhalt h4 {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  margin: var(--a3) 0 var(--a2); font-weight: 700;
}
.stufe-inhalt ul { margin: 0; padding-left: 1.1em; font-size: 15px; }
.stufe-inhalt ul li + li { margin-top: 6px; }
.stufe-inhalt .klein { margin-top: var(--a3); }

/* --- Die drei Einstiege als Kacheln -------------------------------------- */
.kacheln { border-top: none; display: grid; gap: var(--rinne); align-items: stretch; }
@media (min-width: 900px) { .kacheln { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.kachel {
  display: flex; flex-direction: column;
  padding: clamp(26px, 2.6vw, 40px);
  border: 1px solid var(--kante);
  border-radius: var(--rund-gross);
}
/* Die Knöpfe stehen auf einer Linie, auch wenn die Kacheln unterschiedlich viel
   Text tragen. Sonst liest sich die kürzeste Kachel wie die unfertige. */
.kachel > p:last-child { margin-top: auto; padding-top: var(--a3); }
.kachel .oben {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--a2); margin-bottom: var(--a3);
}
.kachel h2 { font-size: 21px; line-height: 1.2; margin: 0; max-width: 18ch; font-weight: 700; }
/* Der Preis ist ein Knopf und keine Zeile, Ansage Janic 29.08.2026. Kiwi mit
   schwarzer Schrift, wie die Marke auf Kiwi steht. Er sitzt in einer Zeile mit
   dem Titel, darum steht die Kopfzeile auf center statt auf baseline: eine
   Pille hat keine Schriftlinie, an der sich etwas ausrichten liesse. */
.kachel .preis {
  display: inline-block;
  background: var(--gruen); color: var(--grund);
  border-radius: 999px; padding: 6px 14px;
  white-space: nowrap; font-size: 13px; font-weight: 700;
  letter-spacing: .02em; margin: 0;
}
.kachel h3 {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  margin: var(--a4) 0 var(--a2); font-weight: 700;
}
.kachel p { font-size: 15px; }
.kachel ul { margin: 0; padding-left: 1.1em; font-size: 15px; }
.kachel ul li { margin-bottom: 6px; }
.kachel .knopf { margin-top: var(--a2); }

/* Auf dem weissen Feld drehen sie mit */
.feld-hell .kachel { background: #f6f6f6; border-color: rgba(0,0,0,.12); }

/* --- Die numerierte Abfolge ---------------------------------------------- */
.teile { display: grid; gap: var(--rinne); margin-top: var(--a5); }
.teile li {
  background: var(--kachel); border: 1px solid var(--kante);
  border-radius: var(--rund); padding: var(--a3) var(--a4);
  grid-template-columns: auto 1fr; column-gap: var(--a3); align-items: baseline;
}
.teile li > *:last-child:empty { display: none; }
.teile .zahlwort {
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--gruen); font-variant-numeric: tabular-nums;
}
.teile h3 { font-size: 18px; margin-bottom: 6px; font-weight: 700; }
.teile p { font-size: 15px; color: var(--ton-gedaempft); }
.feld-panel .teile li { background: var(--grund); }
.feld-hell .teile li { background: #f6f6f6; border-color: rgba(0,0,0,.12); }
.feld-hell .teile .zahlwort { color: var(--grund); }
.feld-hell .teile p { color: #5c5c5c; }


/* ==========================================================================
   DER HERO DER ANGEBOTSSEITE
   Dasselbe Bild-Universum wie die Startseite, dasselbe volle Fenster, nur ein
   anderes Motiv: der schwarze Roboter am Pult. Er sitzt rechts, die Schlagzeile
   steht links.
   ========================================================================== */
/* Volles Fenster wie auf der Startseite, Ansage Janic 23.08.2026. */
.hero.hero-angebot { min-height: var(--hero-hoehe); }
.hero.hero-angebot::before {
  background-image:
    linear-gradient(90deg, rgba(10,14,13,.97) 0%, rgba(10,14,13,.93) 34%, rgba(10,14,13,.55) 52%, rgba(10,14,13,0) 68%),
    linear-gradient(180deg, rgba(10,14,13,.72) 0%, rgba(10,14,13,0) 34%, rgba(10,14,13,.55) 100%),
    url("../../../cicd/final/hero/okulus-hero-pult.jpg");
  background-position: center right;
}
/* Kein Zoomfahren: der Roboter sitzt rechts nah am Rand, jede Bewegung schiebt
   ihn aus dem Bild. Auf der Startseite steht die Gruppe in der Mitte. */
.hero.hero-angebot::before { animation: none; }
/* Die Schlagzeile muss vor dem Roboter enden. Er sitzt bei rund 68 Prozent der
   Bildbreite, elf Zeichen halten die Zeile links davon. */
.hero.hero-angebot h1 { max-width: 11ch; }
.hero.hero-angebot .lead { max-width: 38ch; }
@media (max-width: 820px) {
  .hero.hero-angebot::before {
    background-image:
      linear-gradient(180deg, rgba(10,14,13,.88) 0%, rgba(10,14,13,.60) 46%, rgba(10,14,13,.90) 100%),
      url("../../../cicd/final/hero/okulus-hero-pult-1600.jpg");
    /* Auf dem schmalen Fenster schneidet der Deckungsausschnitt seitlich stark
       weg. Bei «center» steht nur die Pultkante im Bild, der Roboter sitzt bei
       rund drei Vierteln der Bildbreite. */
    background-position: 76% center;
  }
}


/* ==========================================================================
   VERWEISE
   Ansage Janic 23.08.2026: «links nie als unterstriche, immer als buttons.
   unterstrichen gehört nicht zum ci.» Der Unterstrich fällt deshalb überall
   weg, und ein Verweis, der für sich steht, wird zum Knopf.
   ========================================================================== */
a, a:hover { text-decoration: none; }

/* Ein Verweis am Ende eines kleinen Hinweises steht auf einer eigenen Zeile
   und bekommt den zurückhaltenden Umriss, nicht das Grün: er ist ein Nachsatz
   und soll nicht lauter sein als der Knopf davor. */
.hinweis-weg {
  display: inline-block; margin-top: var(--a2);
  border: 1px solid rgba(255,255,255,.30); border-radius: 999px;
  padding: 7px 15px; font-size: 14px; font-weight: 500; color: var(--weiss);
  transition: background .15s, border-color .15s;
}
.hinweis-weg:hover { background: var(--kachel); border-color: var(--kante); }

/* ==========================================================================
   DER DURCHFLUSS · Anatomie des Agenten
   Ansage Janic 23.08.2026: die sechs Bestandteile grafisch als Durchfluss.
   Von der Quelle bis zur Schnittstelle, und am Ende zurück ins Gedächtnis.

   Die Pfeile sitzen in der Lücke des Rasters und nicht in den Kacheln. Deshalb
   muss je Umbruchstufe der letzte Pfeil einer Zeile weg, sonst zeigt er ins
   Leere. Das ist der Preis dafür, dass der Durchfluss umbrechen darf statt zu
   scrollen, und er ist es wert: sechs Glieder passen auf kein Telefon.
   ========================================================================== */
.fluss {
  list-style: none; margin: var(--a5) 0 0; padding: 0;
  display: grid; gap: 46px 30px;
}
@media (min-width: 1160px) { .fluss { grid-template-columns: repeat(6, minmax(0,1fr)); } }
@media (min-width: 700px) and (max-width: 1159px) { .fluss { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.glied {
  position: relative;
  background: var(--kachel2);
  border: 1px solid var(--kante);
  border-radius: var(--rund);
  padding: 18px 16px 20px;
}
.glied-nr {
  display: block; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; color: var(--gruen); margin-bottom: 8px;
}
.glied h3 {
  font-size: 17px; line-height: 1.15; margin: 0 0 8px;
  font-weight: 700; hyphens: auto;
}
.glied p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ton-gedaempft); }

/* Der Pfeil: zwei Kanten eines Quadrats, um 45 Grad gedreht. */
.glied::after {
  content: ""; position: absolute;
  width: 10px; height: 10px;
  border-top: 2px solid var(--gruen);
  border-right: 2px solid var(--gruen);
  opacity: .75;
}
/* Waagrecht, in der Lücke rechts */
@media (min-width: 700px) {
  .glied::after { right: -21px; top: 50%; transform: translateY(-50%) rotate(45deg); }
}
@media (min-width: 1160px) { .glied:nth-child(6)::after { content: none; } }
@media (min-width: 700px) and (max-width: 1159px) { .glied:nth-child(3n)::after { content: none; } }
/* Senkrecht, in der Lücke darunter */
@media (max-width: 699px) {
  .glied::after { bottom: -28px; left: 50%; transform: translateX(-50%) rotate(135deg); }
  .glied:last-child::after { content: none; }
}

/* Die Rückschlaufe schliesst den Durchfluss. Sie steht abgesetzt und trägt
   einen Pfeil, der nach links zeigt: zurück an den Anfang. */
.schlaufe {
  position: relative;
  margin-top: var(--a5);
  padding: 20px 24px 20px 58px;
  border: 1px dashed var(--kante);
  border-radius: var(--rund);
  font-size: 15px;
  /* Ganze Breite, Ansage Janic 23.08.2026: der Weg zurück gehört unter den
     ganzen Durchfluss und nicht unter die ersten vier Glieder. Dafür muss die
     Lesebreite von 68ch fallen, sonst endet der Kasten nach zwei Dritteln.
     Ansage Janic 27.08.2026: er reicht bis unter das sechste Glied. */
  max-width: none;
}
.schlaufe-pfeil {
  position: absolute; left: 24px; top: 24px;
  width: 12px; height: 12px;
  border-bottom: 2px solid var(--gruen);
  border-left: 2px solid var(--gruen);
  transform: rotate(45deg);
  opacity: .85;
}

/* ==========================================================================
   DIE ROLLENSEITEN · Olga, Francis, Doris, Amara
   Struktur von Janic gesetzt am 23.08.2026: Name als Hero, dann der Mehrwert
   gegenüber Software als Prozess, dann die Kompetenz, dann Schnittstellen und
   Lieferobjekt, dann der Charakter. Vorher waren es sechs Abschnitte mit
   Schmerz, Vorher-Nachher, Einwänden und Eignungsfragen. Zu kompliziert.
   ========================================================================== */
/* Bildschirmfüllend, Ansage Janic 02.09.2026: «dort gefällt mir einfach der
   Header nicht, dort sollte der Abschnitt bildschirmfüllend sein, das bitte
   ändern auf allen Unterseiten von Agenten». Vorher min(70svh, 700px). */
.hero.hero-rolle { min-height: var(--hero-hoehe); }
.hero.hero-rolle::before {
  background-image:
    radial-gradient(120% 90% at 18% 30%, rgba(111,236,139,.10) 0%, rgba(10,14,13,0) 58%),
    linear-gradient(180deg, var(--kachel) 0%, var(--grund) 100%);
  animation: none;
}
/* Der Name stand als Plakat auf 168px. Ansage Janic 03.09.2026: alle Header
   tragen dieselbe Titelhöhe. Die Grösse kommt darum aus `.hero h1`. */
.hero.hero-rolle h1 { margin: 0; }
.rolle-satz {
  font-size: clamp(20px, 2.2vw, 30px); font-weight: 600;
  color: var(--gruen); margin: var(--a2) 0 0;
}
.hero.hero-rolle .lead { max-width: 52ch; margin-top: var(--a3); }

/* --- Der Prozessvergleich ------------------------------------------------
   Zwei Spalten nebeneinander, damit man die Zeilen gegeneinander lesen kann.
   Unter 820 Pixeln untereinander, dann liest man sie nacheinander. */
/* Der gemeinsame Anfang steht über beiden Spalten, Ansage Janic 28.08.2026.
   Das Kundengespräch passiert auf beiden Wegen. In einer der zwei Spalten
   stünde es wie ein Vorteil da, den es nicht gibt. Gestrichelt, weil es kein
   Angebot ist, sondern die Ausgangslage. */
.gemeinsam {
  margin-top: var(--a5);
  padding: clamp(18px, 1.8vw, 26px) clamp(24px, 2.4vw, 34px);
  border: 1px dashed rgba(0,0,0,.26);
  border-radius: var(--rund-gross);
}
.gemeinsam p { margin: 0; max-width: none; font-size: 16px; }
.gemeinsam .zeit { display: inline-block; margin-right: 10px; }
.gemeinsam + .gegen { margin-top: var(--rinne); }

/* Die Aufforderung im Plakat der Rollenseite und noch einmal unter dem
   Vergleich. Ansage Janic 28.08.2026: die Seite muss verkaufen, und dafür
   darf die Handlung nicht erst nach vier Abschnitten kommen. */
.rolle-tat { margin: var(--a4) 0 0; }
.tat-zeile { margin: var(--a4) 0 0; }

.gegen { display: grid; gap: var(--rinne); margin-top: var(--a5); }
@media (min-width: 820px) { .gegen { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.gegen-spalte {
  border: 1px solid rgba(0,0,0,.16);
  border-radius: var(--rund-gross);
  padding: clamp(24px, 2.4vw, 34px);
}
.gegen-spalte h3 { margin: 0 0 var(--a3); font-size: 19px; font-weight: 700; }
.gegen-spalte ol { margin: 0; padding: 0; list-style: none; counter-reset: schritt; }
/* Flex und nicht inline-block: sonst rutscht die zweite Zeile unter die Zeit
   statt unter den Text, und die Spalte franst links aus. */
.gegen-spalte li {
  display: flex; gap: 12px;
  padding: 12px 0; font-size: 15px; line-height: 1.45;
  border-top: 1px solid rgba(0,0,0,.10);
}
.gegen-spalte li:first-child { border-top: none; }
.zeit {
  flex: 0 0 54px;
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px;
  letter-spacing: .04em; opacity: .55;
}
.summe { margin: var(--a3) 0 0; font-size: 17px; }
/* Die zweite Spalte ist die Antwort. Sie steht dunkel auf dem hellen Feld,
   damit man ohne Lesen sieht, welche der beiden gemeint ist. */
.gegen-hell { background: var(--grund); border-color: var(--grund); color: var(--weiss); }
.gegen-hell li { border-top-color: rgba(255,255,255,.12); }
.gegen-hell .zeit { color: var(--gruen); opacity: 1; }

/* Der Merksatz steht auf EINER Zeile, Ansage Janic 23.08.2026. Deshalb keine
   Zeichenbegrenzung, und die Schriftgrösse hängt an der Fensterbreite statt an
   einem festen Wert: so bricht er erst, wenn die Bahn wirklich zu schmal ist. */
/* Ohne Linie, Ansage Janic 23.08.2026. Der Abstand trennt genug. */
.merksatz {
  margin-top: var(--a6, var(--a5)); padding-top: 0;
  font-size: clamp(18px, 2.05vw, 27px); font-weight: 700;
  line-height: 1.25; max-width: none;
}

/* --- Kompetenz und Lieferobjekt ------------------------------------------ */
.kann { list-style: none; margin: var(--a2) 0 0; padding: 0; }
/* Feste Zeilenhöhe: zwei Textzeilen pro Punkt, Ansage Janic 23.08.2026. Damit
   stehen die beiden Listen nebeneinander auf demselben Raster, auch wenn der
   eine Punkt eine Zeile braucht und der andere zwei. min-height und nicht
   height: auf dem Telefon dürfen es drei werden. */
.kann li {
  position: relative;
  min-height: calc(2 * 1.45em + 20px);
  padding: 10px 0 10px 30px; font-size: 15px; line-height: 1.45;
  border-top: 1px solid var(--kante);
}
.kann li:first-child { border-top: none; }
/* Ein Haken, kein Winkel: dafür muss das Rechteck höher als breit sein.
   Gleich hoch wie breit ergibt einen Pfeil nach unten. */
.kann li::before {
  content: ""; position: absolute; left: 4px; top: 15px;
  width: 6px; height: 11px;
  border-bottom: 2px solid var(--gruen); border-right: 2px solid var(--gruen);
  transform: rotate(42deg);
}
.feld-hell .kann li { border-top-color: rgba(0,0,0,.12); }

.liefer {
  border: 1px solid var(--kante); border-radius: var(--rund-gross);
  background: var(--kachel); padding: clamp(22px, 2.2vw, 30px);
  margin-top: var(--a2);
}
.liefer-satz { margin: 0; font-size: 18px; font-weight: 700; }
.liefer .kann li { border-top-color: var(--kante); }
.liefer .klein { margin-top: var(--a3); }

/* --- Charakter ------------------------------------------------------------ */
.charakter { list-style: none; margin: var(--a5) 0 0; padding: 0; display: grid; gap: var(--rinne); }
@media (min-width: 900px) { .charakter { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.charakter li {
  background: var(--kachel2); border: 1px solid var(--kante);
  border-radius: var(--rund); padding: 20px 22px;
  font-size: 15px; line-height: 1.5;
}
.charakter strong { display: block; margin-bottom: 6px; font-size: 16px; }

/* Auf dem grünen Feld ist die Schrift dunkel. Das gilt auch für alles Leise:
   ein gedämpftes Weiss auf Grün ist nicht zurückhaltend, es ist unlesbar. */
.feld-gruen .gedaempft,
.feld-gruen .daneben { color: rgba(10,14,13,.70); }
.feld-gruen .hinweis-weg { border-color: rgba(10,14,13,.38); color: var(--grund); }
.feld-gruen .hinweis-weg:hover { background: var(--grund); border-color: var(--grund); color: var(--gruen); }

/* Die Gegenliste: dieselbe Form wie «Was sie kann», aber mit einem Schlösschen
   statt dem Haken. Ansage Janic 23.08.2026, ausdrücklich keine Kreuze: ein
   Kreuz sagt «Fehler», ein Schloss sagt «bewusst zu». Das ist der Unterschied
   zwischen einer Schwäche und einer Grenze.
   Gezeichnet aus zwei Kästchen: ::before ist der Korpus, ::after der Bügel. */
.kann.nicht li { padding-left: 32px; }
.kann.nicht li::before {
  content: ""; left: 4px; top: 20px;
  width: 12px; height: 9px;
  border: none; border-radius: 2px;
  background: var(--ton-gedaempft);
  transform: none;
}
.kann.nicht li::after {
  content: ""; position: absolute; left: 7px; top: 13px;
  width: 6px; height: 7px;
  border: 1.5px solid var(--ton-gedaempft);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
}

/* ==========================================================================
   FORMULARE UND FRAGEBOGEN
   Sie kamen aus der Grundlage ungestaltet durch, weil die Startseite keines
   hat. Sechs Seiten haben eines: Kontakt, Potenzial-Check, Workshops und die
   drei Anmeldungen.

   ACHTUNG, ein Fehler, der hier drin steckte: in dieser Schicht stand eine
   Regel `.feld { margin-top: clamp(56px, 6.5vw, 96px) }`. Gemeint waren die
   Farbfelder, die aber `.feld-panel`, `.feld-hell` und `.feld-gruen` heissen.
   Getroffen hat sie den Formularblock `.feld` aus der Grundlage, und damit
   stand zwischen zwei Eingabefeldern ein Abstand von bis zu 96 Pixeln.
   MERKSATZ: einen Klassennamen niemals als Kurzform einer Familie verwenden,
   die es schon gibt. Dasselbe war am 22.08. mit `--rand` passiert.
   ========================================================================== */
.feld label, .gruppe > .titel { color: var(--ton-gedaempft); font-weight: 500; }
.feld input, .feld select, .feld textarea {
  background: var(--kachel); color: var(--weiss);
  border: 1px solid var(--kante); border-radius: 10px;
  padding: 11px 13px;
}
.feld input::placeholder, .feld textarea::placeholder { color: rgba(255,255,255,.34); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible {
  outline: 2px solid var(--gruen); outline-offset: 1px; border-color: var(--gruen);
}

.wahl, .chip {
  border: 1px solid var(--kante); border-radius: 999px;
  background: var(--kachel); transition: background .15s, border-color .15s;
}
.wahl { border-radius: var(--rund); }
.wahl:hover, .chip:hover { border-color: rgba(255,255,255,.34); background: var(--kachel2); }
.wahl:has(input:checked), .chip:has(input:checked) {
  border-color: var(--gruen); background: rgba(111,236,139,.10);
}
.wahl input, .chip input { accent-color: var(--gruen); }

.balken { background: var(--kante); }
.balken i { background: var(--gruen); }
.zurueck { color: var(--ton-gedaempft); }
.zurueck:hover { color: var(--weiss); }

/* Ein Knopf, der ein button ist, sah anders aus als einer, der ein a ist:
   `button.knopf` in der Grundlage ist spezifischer als `.knopf` hier. */
button.knopf, .tat button {
  background: var(--gruen); color: var(--grund);
  border: 1px solid var(--gruen); border-radius: 999px;
  padding: 13px 24px; font-weight: 600; font-size: 16px;
}
button.knopf:hover:enabled, .tat button:hover:enabled {
  background: var(--weiss); border-color: var(--weiss); color: var(--grund);
}
.tat button:disabled {
  background: var(--kachel); border-color: var(--kante); color: var(--ton-gedaempft);
}

/* --- Auf dem weissen Feld dreht alles ------------------------------------ */
.feld-hell .feld label, .feld-hell .gruppe > .titel { color: #5c5c5c; }
.feld-hell .feld input, .feld-hell .feld select, .feld-hell .feld textarea {
  background: #f6f6f6; color: var(--grund); border-color: rgba(0,0,0,.16);
}
.feld-hell .feld input::placeholder, .feld-hell .feld textarea::placeholder { color: rgba(10,14,13,.38); }
.feld-hell .wahl, .feld-hell .chip { background: #f6f6f6; border-color: rgba(0,0,0,.14); }
.feld-hell .wahl:hover, .feld-hell .chip:hover { background: #efefef; border-color: rgba(0,0,0,.3); }
.feld-hell .wahl:has(input:checked), .feld-hell .chip:has(input:checked) {
  border-color: var(--grund); background: var(--gruen);
}
.feld-hell .balken { background: rgba(0,0,0,.14); }
.feld-hell .balken i { background: var(--grund); }
.feld-hell .fortschritt, .feld-hell .hinweis, .feld-hell .pflicht,
.feld-hell .schritt .zusatz { color: #5c5c5c; }
.feld-hell button.knopf, .feld-hell .tat button {
  background: var(--grund); color: var(--weiss); border-color: var(--grund);
}
.feld-hell button.knopf:hover:enabled, .feld-hell .tat button:hover:enabled {
  background: var(--gruen); color: var(--grund); border-color: var(--gruen);
}
.feld-hell .tat button:disabled {
  background: #efefef; border-color: rgba(0,0,0,.14); color: #8a8a8a;
}
.feld-hell .zurueck { color: #5c5c5c; }
.feld-hell .zurueck:hover { color: var(--grund); }

/* ==========================================================================
   FAQ UND FORMULAR AUF DEM GRÜNEN FELD
   Sechs Seiten schliessen mit Grün und haben dort einen Fragenblock oder ein
   Formular. Beide waren für dunklen Grund gebaut: dunkle Kachel auf Grün, und
   der Fragetext war praktisch unlesbar. Statt diese Abschnitte auf die Platte
   zu setzen bekommen die zwei Bausteine eine grüne Fassung, sonst hätte die
   Seite kein Ende mehr, das sich vom Rest abhebt.
   ========================================================================== */
.feld-gruen .fragen details {
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(10,14,13,.16);
  border-radius: var(--rund);
}
.feld-gruen .fragen summary { color: var(--grund); }
.feld-gruen .fragen summary::after { color: var(--grund); }
.feld-gruen .fragen details p { color: rgba(10,14,13,.74); }
.feld-gruen .fragen details[open] { background: rgba(255,255,255,.62); }

.feld-gruen .feld label, .feld-gruen .gruppe > .titel,
.feld-gruen .hinweis, .feld-gruen .pflicht, .feld-gruen .fortschritt,
.feld-gruen .schritt .zusatz { color: rgba(10,14,13,.68); }
.feld-gruen .feld input, .feld-gruen .feld select, .feld-gruen .feld textarea {
  background: rgba(255,255,255,.62); color: var(--grund);
  border-color: rgba(10,14,13,.22);
}
.feld-gruen .feld input::placeholder,
.feld-gruen .feld textarea::placeholder { color: rgba(10,14,13,.42); }
.feld-gruen .feld input:focus-visible, .feld-gruen .feld select:focus-visible,
.feld-gruen .feld textarea:focus-visible {
  outline-color: var(--grund); border-color: var(--grund);
}
.feld-gruen .wahl, .feld-gruen .chip {
  background: rgba(255,255,255,.52); border-color: rgba(10,14,13,.18);
}
.feld-gruen .wahl:hover, .feld-gruen .chip:hover { background: rgba(255,255,255,.72); }
.feld-gruen .wahl:has(input:checked), .feld-gruen .chip:has(input:checked) {
  background: var(--weiss); border-color: var(--grund);
}
.feld-gruen .wahl input, .feld-gruen .chip input { accent-color: var(--grund); }
.feld-gruen .balken { background: rgba(10,14,13,.18); }
.feld-gruen .balken i { background: var(--grund); }
.feld-gruen button.knopf, .feld-gruen .tat button {
  background: var(--grund); color: var(--gruen); border-color: var(--grund);
}
.feld-gruen button.knopf:hover:enabled, .feld-gruen .tat button:hover:enabled {
  background: var(--weiss); border-color: var(--weiss); color: var(--grund);
}
.feld-gruen .tat button:disabled {
  background: rgba(255,255,255,.42); border-color: rgba(10,14,13,.18); color: rgba(10,14,13,.45);
}
.feld-gruen .zurueck { color: rgba(10,14,13,.68); }
.feld-gruen .zurueck:hover { color: var(--grund); }

/* --- Die Sujets der Anlässe ----------------------------------------------
   Drei Bilder, eines je Format, im Hochformat 4:5. Sie stehen in der Spalte,
   die neben dem Text bisher leer war. Ansage Janic 29.08.2026.
   Sie tragen das Fruitjuicer-CI, nicht das von Okulus: darum bekommen sie
   einen eigenen Rahmen und keinen Rand, der sie in die Seite einbindet.
   ------------------------------------------------------------------------- */
.sujet img {
  width: 100%; height: auto;
  border-radius: var(--rund-gross);
  display: block;
}
@media (max-width: 819px) {
  /* Auf dem Telefon steht das Sujet über dem Text und nicht darunter, sonst
     kommt es nach der Anmeldung und niemand sieht es. */
  .sujet { order: -1; margin-bottom: var(--a4); }
}

/* Ein Anlass, eine Zeile. Links die Kachel mit den Angaben, rechts das Sujet.
   Ansage Janic 29.08.2026. Referate, Live-Demos und das Gespräch haben kein
   Sujet, sie stehen darunter weiter als Kacheln.
   Die Bildspalte ist schmaler als die Kachel, weil das Sujet im Hochformat
   4:5 steht: bei gleicher Breite wäre die Zeile doppelt so hoch wie ihr Text. */
.formate { display: grid; gap: var(--rinne); margin-top: var(--a5); }
.format-zeile { display: grid; gap: var(--rinne); }
@media (min-width: 820px) {
  /* Ansage Janic 02.09.2026: die Sujets waren zu schmal. Von 3 auf 4 von zwölf,
     das macht das Bild rund ein Drittel breiter. Die Zeile wird dadurch höher,
     das ist der Preis und war die Ansage. */
  .format-zeile { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: stretch; }
}
.format-bild {
  display: block; border-bottom: none;
  border-radius: var(--rund-gross); overflow: clip;
}
/* Das Bild füllt die Höhe der Zeile und wird dabei beschnitten. Beschnitten
   wird von der Mitte aus, damit die Zeile oben und der Name unten stehen
   bleiben, solange es der Platz zulässt. */
.format-bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.format-bild:hover img { transform: scale(1.03); }
@media (max-width: 819px) {
  .format-bild img { height: auto; }
}

/* Die Impressionen vom Zmorge. Echte Fotos statt der grauen Platzhalter,
   übernommen von ki.fruitjuicer.ch. Sie sind quadratisch, die Reihe war auf
   3:2 eingestellt: darum hier das Verhältnis setzen und beschneiden lassen. */
.bildreihe img {
  width: 100%; aspect-ratio: 1 / 1; height: auto;
  object-fit: cover; display: block;
  border-radius: var(--rund);
}

/* --- Die Seitenübersicht -------------------------------------------------
   Fünf Gruppen in zwei Spalten. Je Eintrag der Titel als Verweis und darunter
   eine Zeile, was dort steht: eine reine Linkliste sagt nichts, wenn man den
   Seitennamen nicht schon kennt.
   ------------------------------------------------------------------------- */
.karte-raster { row-gap: var(--a6); }
.karte-raster h2 { font-size: 21px; margin: 0 0 var(--a3); }
.karte-liste { list-style: none; margin: 0; padding: 0; }
.karte-liste li { padding-block: 10px; border-top: 1px solid var(--kante); }
.karte-liste li:first-child { border-top: none; }
.karte-liste a { border-bottom: none; font-weight: 600; }
.karte-liste a:hover { color: var(--gruen); }
.karte-was { display: block; font-size: 14px; color: var(--ton-gedaempft); margin-top: 2px; }
/* Die Überschrift des Rasters trägt nur die Vorlesehilfe, sichtbar wäre sie
   eine Dopplung zum Titel darüber. */
.nurlesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Wunsch und Angst je Achse, aus der Anthropic-Studie. Die Marke davor steht
   klein und in Versalien, damit die zwei Zeilen ohne Doppelpunkt auskommen. */
.wunsch { font-size: 15px; margin-top: var(--a2); }
.wunsch span {
  display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 3px; color: var(--gruen);
}
.wunsch.angst span { color: var(--ton-gedaempft); }
.feld-hell .wunsch span { color: var(--grund); }
.feld-hell .wunsch.angst span { color: #7a7a7a; }

/* Vier Spannungsfelder als Kacheln, Ansage Janic 29.08.2026. Ohne Rahmen lief
   der Text der vier zu einem Block zusammen und die Paare waren nicht mehr zu
   trennen. Zwei nebeneinander: bei vieren in einer Reihe bricht die Zeile
   «Befürchtet» nach drei Wörtern um. */
@media (min-width: 820px) {
  .spannungen { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.spannungen .wunsch:first-of-type { margin-top: var(--a3); }
/* Der Kacheltitel ist sonst eine Marke in Versalien. Hier wäre er die dritte
   Versalienzeile in derselben Kachel, neben ERHOFFT und BEFÜRCHTET. Also eine
   richtige Überschrift daraus machen. */
.spannungen .kachel h3 {
  font-size: 19px; letter-spacing: -0.01em; text-transform: none;
  margin: 0; font-weight: 700;
}

/* --- Beschriftung und Wert, kompakt --------------------------------------
   Ansage Janic 31.08.2026: Programm und Eckdaten ohne Kacheln. Betroffen sind
   alle Tabellen, die links eine Beschriftung und rechts einen Wert tragen.
   Sie heissen jetzt `eckdaten liste`. Die Vergleichstabellen mit der grünen
   Kopfzeile behalten ihre Kacheln: dort tragen die zwei Spalten eine
   Gegenüberstellung und müssen als zwei Blöcke lesbar bleiben.
   Zwingend ist border-collapse. Mit border-spacing klaffte zwischen der linken
   und der rechten Zelle eine Lücke, und die Trennlinie einer Zeile wäre in der
   Mitte unterbrochen.
   ------------------------------------------------------------------------- */
.eckdaten.liste {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin-inline: 0;
}
.eckdaten.liste tbody th,
.eckdaten.liste td {
  background: none;
  border: none;
  border-top: 1px solid var(--kante);
  border-radius: 0;
  padding: 11px 0;
  font-size: 16px; line-height: 1.45;
  vertical-align: top;
}
.eckdaten.liste tbody tr:first-child th,
.eckdaten.liste tbody tr:first-child td { border-top: none; padding-top: 0; }
.eckdaten.liste tbody th {
  width: 34%;
  padding-right: var(--a3);
  color: var(--ton-gedaempft);
  font-weight: 500;
}
.eckdaten.liste td { font-weight: 500; }
.feld-hell .eckdaten.liste tbody th,
.feld-hell .eckdaten.liste td { border-top-color: rgba(0,0,0,.14); }
.feld-hell .eckdaten.liste tbody th { color: #5c5c5c; background: none; }
.feld-gruen .eckdaten.liste tbody th,
.feld-gruen .eckdaten.liste td { border-top-color: rgba(0,0,0,.20); }
.feld-gruen .eckdaten.liste tbody th { color: rgba(10,14,13,.62); background: none; }
.feld-panel .eckdaten.liste tbody th { background: none; }
@media (max-width: 700px) {
  /* Auf dem Telefon untereinander, sonst bleibt für den Wert nichts übrig. */
  .eckdaten.liste tbody th, .eckdaten.liste td { display: block; width: auto; padding-right: 0; }
  .eckdaten.liste td { border-top: none; padding-top: 0; padding-bottom: 14px; }
}

/* Zwei Punkte je Formatkachel, Ansage Janic 31.08.2026: für wen und was man
   bekommt. Die Kachel wirkte neben dem Sujet sonst leer. Marke klein und in
   Versalien, wie bei den Spannungsfeldern, damit die Seite eine Sprache hat. */
/* Der Zug auf .kachel muss mit: `.kachel ul` in der Grundlage ist spezifischer
   als `.kachel-punkte` und setzt sonst Einzug und Abstand zurück. */
.kachel .kachel-punkte { list-style: none; margin: var(--a3) 0 0; padding: 0; }
.kachel-punkte li { font-size: 15px; }
.kachel-punkte li + li { margin-top: var(--a2); }
.kachel-punkte span {
  display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 3px; color: var(--gruen);
}

/* --- Rückmeldung der Formulare -------------------------------------------
   Sie erscheint im Formular selbst, nicht als Fenster: wer gerade getippt
   hat, schaut dorthin und nicht in die Bildschirmmitte.
   ------------------------------------------------------------------------- */
.meldung {
  margin-top: var(--a3);
  padding: 13px 18px;
  border-radius: var(--rund);
  font-size: 15px; font-weight: 500;
  max-width: none;
}
.meldung.gut      { background: var(--gruen); color: var(--grund); }
.meldung.schlecht { background: var(--kachel2); color: var(--weiss); border: 1px solid var(--kante); }
.feld-hell .meldung.schlecht { background: #f2f2f2; color: var(--grund); border-color: rgba(0,0,0,.16); }
.feld-gruen .meldung.gut { background: var(--grund); color: var(--weiss); }
.feld-gruen .meldung.schlecht { background: rgba(255,255,255,.5); color: var(--grund); border-color: rgba(0,0,0,.2); }

/* Die drei Längen von KI und Pizza als drei Kacheln in einer Zeile.
   Ansage Janic 01.09.2026. Vorher war es eine Tabelle mit drei Spalten und
   grüner Kopfzeile: neun Kästchen für neun Angaben, und die Form stand als
   gedämpfter Zellwert da, obwohl sie die Überschrift ist. */
.laengen { display: grid; gap: var(--rinne); margin-top: var(--a4); }
@media (min-width: 760px) { .laengen { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.laengen .kachel h3 {
  font-size: 21px; letter-spacing: -0.01em; text-transform: none;
  margin: 0; font-weight: 700;
}
/* Die Grundlage schiebt den letzten Absatz einer Kachel an den Boden. Hier
   gehört er unter den Titel, sonst klafft ein Loch. */
.laengen .kachel > p:last-child { margin-top: var(--a2); padding-top: 0; }

/* «Was wir zeigen» auf der Live-Demo-Seite: vier Rollen als Kacheln statt als
   Liste neben einem leeren Platzhalter. Ansage Janic 01.09.2026. Der Rollenname
   ist die Überschrift und nicht ein gedämpfter Zellwert, das Fach steht als
   Pille daneben. */
.zeigen { margin-top: var(--a4); }
.zeigen .kachel h3 {
  font-size: 21px; letter-spacing: -0.01em; text-transform: none;
  margin: 0; font-weight: 700;
}
.zeigen .kachel > p:last-child { margin-top: var(--a2); padding-top: 0; }

/* Text über die ganze Breite der Kacheln darüber. Die Lesebreite von 68ch für
   Absätze muss dafür fallen, sonst endet der Text nach zwei Dritteln, während
   die Kacheln darüber bis an den Rand laufen. Ansage Janic 01.09.2026. */
.breit-text p { max-width: none; }

/* ==========================================================================
   DER DURCHGANG VOM 02.09.2026 · Janics Tonspur zur ganzen Webseite
   Drei Regeln, die er dabei gesetzt hat und die ab hier überall gelten:
   1. Grau und Schwarz stehen nie nacheinander.
   2. Wo der Besucher etwas eingibt, ist der Abschnitt weiss.
   3. Der letzte Aufforderungsabschnitt ist grün.
   ========================================================================== */

/* --- Der Durchfluss auf grünem Grund -------------------------------------
   «Anatomie eines Agenten» steht jetzt auf Grün. Die Kacheln bleiben grau,
   Ansage Janic: «die Kacheln können wir so lassen, die sind gut in grau auf
   grünem Hintergrund, dann müssen wir die Pfeile dazwischen ändern». Auf Grün
   erbt der Abschnitt schwarze Schrift. In den grauen Kacheln wäre das
   unlesbar, darum bekommen sie ihre weisse Schrift zurück.
   ------------------------------------------------------------------------- */
.feld-gruen .glied { color: var(--weiss); }
.feld-gruen .glied p { color: var(--ton-gedaempft); }
/* Der Pfeil stand in Kiwi und wäre auf Kiwi unsichtbar. Auf Grün ist Schwarz
   die Farbe der Marke. */
.feld-gruen .glied::after {
  border-top-color: var(--grund);
  border-right-color: var(--grund);
  opacity: .55;
}
/* Die Rückschlaufe: gestrichelte Kante und Pfeil ebenfalls in Schwarz. */
.feld-gruen .schlaufe { border-color: rgba(0,0,0,.30); }
.feld-gruen .schlaufe-pfeil {
  border-bottom-color: var(--grund);
  border-left-color: var(--grund);
  opacity: .7;
}

/* --- Das Signet in jedem grünen Schlussfeld ------------------------------
   Ansage Janic 02.09.2026: «bei Gespräch vereinbaren fehlt noch das Logo, das
   Logo wie bei der Startseite, das aufrecht stehende Männchen». Es hing bisher
   am Namen des Abschnitts, `aria-labelledby="t-schluss"`. Seiten, deren
   Schlussabschnitt anders heisst, gingen leer aus. Jetzt hängt es an einer
   Klasse, und die sagt, was der Abschnitt ist: der Schluss.
   ------------------------------------------------------------------------- */
main > section.teil.feld-gruen.schluss {
  background-image: url("../../../cicd/marke/final/okulus-icon-schwarz.svg");
  background-repeat: no-repeat;
  background-position: right max(24px, calc((100vw - var(--breite)) / 2 + var(--rand))) center;
  background-size: auto clamp(150px, 19vw, 260px);
}
@media (max-width: 1080px) {
  main > section.teil.feld-gruen.schluss { background-image: none; }
}
/* Der Zusatz neben dem Knopf stand in gedämpftem Grau, auf Grün liest sich das
   nicht. Auf dem alten Schlussfeld war das schon geregelt, hier fehlte es. */
.feld-gruen .daneben { display: block; margin: var(--a2) 0 0; color: rgba(10,14,13,.66); }

/* --- Der zweite Knopf im Kopf · Potenzial-Check ---------------------------
   Ansage Janic 02.09.2026: «in der Navigation haben wir einen Kontakt-Button,
   dort bitte einen zweiten Button in weiss mit dem Potenzial-Check, wo man
   direkt gerade den Potenzial-Check ausfüllen. Der ist noch ein bisschen
   untervertreten.» Weiss, damit Kiwi die eine Hauptaufforderung bleibt.
   ------------------------------------------------------------------------- */
.knopf.weiss {
  background: var(--weiss); color: var(--grund); border-color: var(--weiss);
}
.knopf.weiss:hover {
  background: transparent; color: var(--weiss); border-color: var(--weiss);
}
/* Zwei Knöpfe brauchen Platz. Mit dem zweiten bricht die Hauptnavigation
   zwischen 900 und 1150 Pixeln um, «Team» rutschte auf eine zweite Zeile.
   Darum kommt das Menü dort schon zum Zug, statt der Knopf zu verschwinden:
   die Zeile weicht, die Knöpfe bleiben. Die Grundlage schaltet das Menü erst
   unter 900, hier ist nur die Navigation vorgezogen und sonst nichts. */
@media (min-width: 901px) and (max-width: 1149px) {
  .kopf .innen { position: relative; }
  .menue-knopf { display: inline-block; }
  .haupt {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    margin: 0; padding: var(--a2) var(--rand) var(--a3);
    background: var(--grund);
    border-bottom: 1px solid var(--kante);
  }
  .haupt.offen { display: flex; }
  .haupt a { border-radius: 999px; }
}
/* Unter 900 ist auch für den weissen Knopf kein Platz mehr. Dann steht der
   Potenzial-Check im Menü, sonst wäre er im Kopf gar nicht mehr zu finden. */
@media (max-width: 900px) {
  .kopf .rechts .knopf.weiss { display: none; }
}
.haupt .nur-menue { display: none; }
@media (max-width: 900px) {
  .haupt .nur-menue { display: block; }
}

/* --- Anlassarten auf der Referatsseite -----------------------------------
   Ansage Janic 02.09.2026: nicht als Aufzählung, sondern «als Inspiration für
   den Besucher». Also die Form einer Pille, aber ohne Klick: es sind keine
   Verweise, es ist die Antwort auf «passt das bei uns».
   ------------------------------------------------------------------------- */
.anlaesse {
  list-style: none; margin: var(--a3) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.anlaesse li {
  border: 1px solid var(--kante);
  background: var(--kachel2);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--weiss);
}
/* Eine Stufe kleiner, für die Referatsseite: dort stehen die Pillen in der
   schmaleren Spalte neben dem Sujet. Ansage Janic 08.09.2026: «musst du halt die
   buttons kleiner machen, damit sie neben das bild passen». */
.anlaesse.eng { gap: 8px; }
.anlaesse.eng li { padding: 7px 15px; font-size: 14px; }

.feld-hell .anlaesse li {
  border-color: rgba(0,0,0,.14); background: #f6f6f6; color: var(--grund);
}
.feld-gruen .anlaesse li {
  border-color: rgba(0,0,0,.22); background: rgba(255,255,255,.35); color: var(--grund);
}

/* --- Zwei grüne Abschnitte hintereinander --------------------------------
   Seit dem 02.09.2026 stehen Angaben auf Grün, und auf mehreren Seiten folgen
   zwei solche Abschnitte aufeinander: Eckdaten und Programm, Eckdaten und
   «was wir zeigen». Mit dem vollen Polster an beiden Kanten klafft dazwischen
   ein Loch in derselben Farbe. Sie sollen als ein grünes Feld mit zwei
   Blöcken lesen, darum fällt das obere Polster des zweiten weg.
   ------------------------------------------------------------------------- */
main > section.teil.feld-gruen + section.teil.feld-gruen {
  padding-top: 0;
  margin-top: 0;
}
main > section.teil.feld-gruen + section.teil.feld-gruen > .bahn {
  padding-top: clamp(36px, 4vw, 64px);
  border-top: 1px solid rgba(0,0,0,.16);
}

/* --- Auf Weiss dreht auch die Kachel -------------------------------------
   Der Kommentar oben im Weiss-Block sagt «Kacheln werden hell, Linien dunkel».
   Gedreht war aber nur die Grundsatz-Kachel. Solange kein Abschnitt mit
   Kacheln auf Weiss stand, fiel das nicht auf. Seit dem 02.09.2026 steht
   «Die Menschen» auf Weiss, Ansage Janic, und dort war es sofort sichtbar:
   dunkle Kacheln mit schwarzer Schrift auf weissem Grund.
   ------------------------------------------------------------------------- */
.feld-hell .kachel,
.feld-hell .zahl,
.feld-hell .posten,
.feld-hell .vorzuege li,
.feld-hell .menschen li,
.feld-hell .charakter li,
.feld-hell .glied,
.feld-hell .fragen details {
  background: #f6f6f6;
  border-color: rgba(0,0,0,.12);
  color: var(--grund);
}
.feld-hell .fragen details { border-color: rgba(0,0,0,.12); }
.feld-hell .fragen details p,
.feld-hell .glied p,
.feld-hell .menschen .zusatz { color: #5c5c5c; }
/* Die Platzhalterfläche für ein Bild: hell, mit dem schwarzen Auge darin. */
.feld-hell .flaeche { background: #ececec; }
.feld-hell .menschen .flaeche {
  background-color: #ececec;
  background-image: url("../../../cicd/marke/final/okulus-kopf-schwarz.svg");
  /* Dunkel auf hell trägt weiter als dunkel auf dunkel. Auf Schwarz stehen .45,
     hier wäre das ein Plakat statt ein Platzhalter. */
  opacity: .22;
}
/* Kiwi als Textfarbe geht auf Weiss nicht, das ist rund 1.5 zu 1. Die Rolle
   steht darum schwarz, und wo sie ein Verweis ist, unterstrichen. */
.feld-hell .menschen .rolle { color: var(--grund); }
.feld-hell .menschen .rolle a { color: var(--grund); }
.feld-hell .glied-nr { color: var(--grund); opacity: .55; }

/* --- Dunkle Kacheln auf grünem Grund -------------------------------------
   Dieselbe Falle wie beim Durchfluss: der grüne Abschnitt setzt schwarze
   Schrift, und die Kachel bringt ihren dunklen Grund mit. Schwarz auf
   Dunkelgrau ist nicht leise, es ist weg. Trifft «Drei Längen» auf KI & Pizza
   und «Was wir zeigen» auf der Live-Demo-Seite, beide seit dem 02.09.2026 grün.
   ------------------------------------------------------------------------- */
.feld-gruen .kachel { color: var(--weiss); }
.feld-gruen .kachel h2,
.feld-gruen .kachel h3,
.feld-gruen .kachel strong { color: var(--weiss); }
.feld-gruen .kachel p { color: var(--ton-gedaempft); }
.feld-gruen .kachel a { color: var(--weiss); }

/* --- Kein schwarzer Streifen über einem farbigen ersten Abschnitt --------
   `main > section.teil { margin-top: 0 }` ist (0,1,2), `.teil.erster` und
   `.teil.weit` sind (0,2,0) und gewinnen mit ihrem Abstand. Bei einem
   schwarzen Abschnitt sieht man das nicht, der Abstand hat dieselbe Farbe wie
   der Grund. Bei einem farbigen klafft dort ein schwarzer Streifen. Gesehen am
   02.09.2026 über dem weissen Potenzial-Check.
   ------------------------------------------------------------------------- */
main > section.teil.erster.feld-hell,
main > section.teil.erster.feld-panel,
main > section.teil.erster.feld-gruen,
main > section.teil.weit.feld-hell,
main > section.teil.weit.feld-panel,
main > section.teil.weit.feld-gruen { margin-top: 0; }

/* ==========================================================================
   DER SEITENHERO · Workshops, Philosophie, Team
   Ansage Janic 03.09.2026: der Header soll dem der Angebotsseite entsprechen.
   Also volles Fenster, dieselbe Schriftgrösse und ein Hero-Bild dahinter.

   Workshops, Philosophie und Team haben ihr eigenes Bild, generiert und nicht
   fotografiert. Der Tausch ist je Seite eine Zeile: `--hero-bild`, weiter unten.
   ========================================================================== */
.hero.hero-seite { min-height: var(--hero-hoehe); }
.hero.hero-seite::before {
  background-image:
    linear-gradient(90deg, rgba(10,14,13,.97) 0%, rgba(10,14,13,.93) 34%, rgba(10,14,13,.55) 52%, rgba(10,14,13,0) 68%),
    linear-gradient(180deg, rgba(10,14,13,.72) 0%, rgba(10,14,13,0) 34%, rgba(10,14,13,.55) 100%),
    var(--hero-bild);
  background-position: center right;
  /* Kein Zoomfahren, wie auf dem Angebot: die Figur sitzt rechts nah am Rand,
     jede Bewegung schiebt sie aus dem Bild. */
  animation: none;
}
/* Dieselbe Schriftgrösse wie auf dem Angebot. Die Zeile darf hier breiter
   laufen: die Titel sind länger, und solange kein Bild da ist, weiss niemand,
   wo die Figur steht. Sobald die Bilder liegen, je Seite nachziehen. */
.hero.hero-seite h1 { max-width: 18ch; }
.hero.hero-seite .hero-byline { max-width: 36ch; }

/* Je Seite das eigene Motiv, gross und fuer das Telefon */
body:has(.hero-workshops) {
  --hero-bild:       url("../../../cicd/final/hero/okulus-hero-workshops.jpg");
  --hero-bild-klein: url("../../../cicd/final/hero/okulus-hero-workshops-1600.jpg");
}
body:has(.hero-philosophie) {
  --hero-bild:       url("../../../cicd/final/hero/okulus-hero-philosophie.jpg");
  --hero-bild-klein: url("../../../cicd/final/hero/okulus-hero-philosophie-1600.jpg");
}
body:has(.hero-team) {
  --hero-bild:       url("../../../cicd/final/hero/okulus-hero-team.jpg");
  --hero-bild-klein: url("../../../cicd/final/hero/okulus-hero-team-1600.jpg");
}

@media (max-width: 820px) {
  .hero.hero-seite::before {
    background-image:
      linear-gradient(180deg, rgba(10,14,13,.88) 0%, rgba(10,14,13,.60) 46%, rgba(10,14,13,.90) 100%),
      var(--hero-bild-klein, var(--hero-bild));
    background-position: 76% center;
  }
  .hero.hero-seite h1 { max-width: none; }
}

/* Die Teamseite setzt ihre Umbrüche selbst, drei Zeilen von Janic. Die
   Lesebreite von 18 Zeichen würde die dritte noch einmal brechen. */
.hero.hero-team h1 { max-width: none; }

/* --- Die Portraits der Menschen ------------------------------------------
   Übergangsfotos, von Janic am 03.09.2026 in `cicd/team/` abgelegt. Die neuen
   sind noch nicht fertig, der Tausch geht über dieselben Dateinamen.
   Eigene Klasse und nicht `.flaeche portrait`: die Platzhalterfläche trägt
   `opacity: .45` und das Auge als Hintergrundbild. Ein Foto darin wäre halb
   durchsichtig. Die Platzhalter bleiben, wo es noch kein Foto gibt, also bei
   den sieben KI-Mitarbeitenden.
   ------------------------------------------------------------------------- */
.menschen .portraitbild {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--rund);
}

/* --- Das Organigramm auf der Teamseite ------------------------------------
   Ansage Janic 03.09.2026: klein, kleinteilig, einzelne Menschen und Agenten,
   die zusammenarbeiten, und nicht personalisiert. Es steht im weissen
   Abschnitt, darum ist Schwarz die Linien- und Schriftfarbe. Die zwei Sorten
   sind an der Form zu erkennen und nicht an einem Namen: der Mensch ist ein
   Kreis mit Umriss, der Agent trägt das Okulus-Zeichen in Kiwi.
   ------------------------------------------------------------------------- */
.organigramm { margin: 0; max-width: 420px; }
.organigramm svg { display: block; width: 100%; height: auto; overflow: visible; }
.organigramm text { font-family: inherit; }

/* Die Wege liegen unter den Figuren und dürfen leise sein. */
.og-band { fill: none; stroke: var(--grund); stroke-width: 1.1; opacity: .28; }

/* Ansage Janic 03.09.2026: die Menschen ausgefüllt in Schwarz, die Agenten in
   Kiwi. Die zwei Sorten unterscheiden sich damit an Form und Farbe. */
.og-mensch { fill: var(--grund); stroke: none; }
.og-agent  { fill: var(--gruen); }

.og-weg { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; fill: #5c5c5c; }
.og-pfeil  { fill: none; stroke: var(--grund); stroke-width: 1.4; }
.og-spitze { fill: none; stroke: var(--grund); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }