/* ---------------------------------------------------------------------------
   lunimalabs.com — Gestaltung

   UMGESTELLT AM 22.08.2026: von Nacht auf Tag.
   Vorgabe des Geschaeftsfuehrers, woertlich: „Helles, frisches, inspirierendes
   Design & Layout", „state of the Art", „Animationen werden erwartet ohne
   kindisch oder verspielt zu wirken, eher die Richtung von high tech".

   DAS VERHAELTNIS ZU ROOMAYA — es steuert jede Entscheidung hier drin:
   Lunima Labs ist die Werkstatt, Roomaya das Werkstueck. Das ist ein Gefaelle,
   kein Nebeneinander, und man soll es sehen. Die Werkstatt tritt LEISER auf
   als das Produkt: viel Weissraum, viel Text, kaum Bild.

   GLEICH bleibt, was dieselbe Hand verraet:
     - die Schrift. Outfit, dieselbe wie Roomayas Wortmarke. Selbst
       ausgeliefert, siehe @font-face weiter unten.
     - die Abstandsdisziplin und `text-wrap` (aus globals.css der Anwendung).
     - die Haltung zur Privatsphaere: nichts von einem fremden Server.
     - der Satzbau des Zeichens: zwei gleiche Formen, die zweite traegt den
       Akzent (siehe vorlage/zeichen/lunima-zeichen.svg).

   VERSCHIEDEN ist Farbe und Gegenstand:
     Roomayas Rot #99150e gehoert Roomaya. Hier steht ein kuehler Akzent.
     Ausgangspunkt war der exakte Spiegel des Rots: gleiche Saettigung,
     gleiche Helligkeit, nur der Farbton von 3 auf 200 Grad gedreht, also
     #156993. Am 23.08.2026 wurde er auf Wunsch des Geschaeftsfuehrers heller
     und freundlicher gestellt: #1f74ad, Farbton 204, Saettigung 70,
     Helligkeit 40. Die Obergrenze war nicht Geschmack, sondern Lesbarkeit —
     mehr Helligkeit haette den Kontrast unter 4,5:1 gedrueckt, und der Akzent
     traegt Text.
     Genauso das Papier: Roomayas #F2EEE8 ist ein warmes Gebrochen-Weiss,
     unseres ist dasselbe Gebrochen-Weiss, nur kalt.

   UNVERAENDERT GILT: kein @import, kein url() auf eine fremde Adresse, keine
   Schrift von Google. Die Datenschutzerklaerung sagt zu: „Ihr Browser baut
   beim Aufruf dieser Seite zu keinem anderen Anbieter eine Verbindung auf."
   Diese Datei ist die Stelle, an der man das zerstoeren wuerde.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   Schrift — Outfit, aus dem eigenen Ordner
   ===========================================================================
   Outfit ist die Schrift der Roomaya-Wortmarke (Logo/LIESMICH.md) und damit
   das staerkste Bindeglied zwischen den beiden Auftritten. Die beiden Dateien
   liegen in vorlage/schrift/ und stammen aus dem Bestand, den `next/font` fuer
   die Anwendung geholt hat — es ist also nachweislich dieselbe Fassung, die
   Roomaya zeichnet, nicht eine zufaellig gleichnamige.

   Es ist EINE variable Datei je Zeichensatz, Gewicht 100 bis 900. Ein zweiter
   Schnitt waere ein zweiter Download; die variable Fassung kostet einmal
   32 KB und kann alles.

   `font-display: swap`: Bis die Datei da ist, steht Arial. Damit dabei nichts
   springt, folgt darunter eine massgleiche Ersatzschrift — die Werte sind die
   von `next/font` errechneten. Ohne sie ruckt beim Nachladen die halbe Seite. */

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/schrift/outfit-latin.woff2") format("woff2");
  unicode-range: U+00-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
    U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/schrift/outfit-latin-ext.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304,
    U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Massgleicher Ersatz: Arial, auf Outfits Masse gezogen. Kein Download. */
@font-face {
  font-family: "Outfit Ersatz";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  ascent-override: 100.18%;
  descent-override: 26.05%;
  line-gap-override: 0%;
  size-adjust: 99.82%;
}

/* ===========================================================================
   Die Werte
   =========================================================================== */

:root {
  /* --- Grund. Gebrochen-Weiss wie bei Roomaya, nur kuehl statt warm. ------ */
  --papier:       #f4f6f9;
  --papier-tief:  #eceff5;   /* abgesetzte Baender */
  --flaeche:      #ffffff;   /* Karten, Eingabefelder */
  --linie:        #dde3ec;
  --linie-stark:  #c4cedd;
  --raster:       rgba(16, 23, 32, 0.055);  /* das Hairline-Raster im Auftakt */

  /* --- Schrift. Tinte wie bei Roomaya, nur kuehl statt warm. -------------- */
  --tinte:        #101720;
  --text-leise:   #47576b;   /* 6,8:1 auf Papier */
  --text-still:   #5e6e85;   /* 4,8:1 — die Untergrenze, tiefer nicht */

  /* --- Der Akzent. Einer, nicht drei. ------------------------------------
     --akzent      4,7:1 auf Papier und 5,1:1 auf Weiss. Beides ueber der
                   Grenze von 4,5:1, damit er als Schrift UND als Grund unter
                   weisser Schrift taugt. Wer ihn weiter aufhellt, verletzt
                   eine der beiden Grenzen. Nachrechnen, nicht schaetzen.
     --akzent-tief fuer gedrueckte Zustaende.
     --akzent-hell derselbe Farbton, nur hell. NIE als Schrift auf Papier
                   (2,4:1). Ausschliesslich Flaeche, Linie, Licht. */
  --akzent:       #1f74ad;
  --akzent-tief:  #155884;
  --akzent-hell:  #47a3e1;
  --akzent-hauch: rgba(31, 116, 173, 0.075);

  --breit:  1160px;
  --schmal: 720px;

  --r-klein: 10px;
  --r-gross: 16px;

  --kurve: cubic-bezier(0.22, 0.75, 0.3, 1);
  --takt:  0.22s var(--kurve);

  --schrift: "Outfit", "Outfit Ersatz", system-ui, -apple-system, "Segoe UI",
             Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift);
  /* 18,4 statt 17,6 px seit Aktion 91 (27.09.2026). Vorgabe aus der zweiten
     Runde der Entwürfe: „Die Schriftgröße ist zu klein.“ Gilt jetzt auch auf
     schmalen Schirmen; dort standen bis dahin 17 px. Ebenso gewachsen:
     Menü, Knöpfe, Marken, Vorspann, Grundsätze, die Zeilen der Zeichnung. */
  font-size: 18.4px;
  font-weight: 350;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;

  /* Kein einzelnes Wort in der letzten Zeile. Dieselbe Regel wie in der
     Anwendung (vip-room-app/app/globals.css) — sie ist dort aus einem echten,
     wiederholt beanstandeten Mangel entstanden und gilt hier genauso.
     Sie steht auf `body` und wird vererbt, damit keine Luecke bleibt.

     Sie reicht allein aber nicht: `pretty` ist eine Bitte an den Browser.
     Chromium und Safari halten sie, Firefox kennt nur `balance`. Deshalb
     bindet bauen.js zusaetzlich das letzte Wort mit einem geschuetzten
     Leerzeichen an das vorletzte — siehe letztesWortBinden(). Diese Regel
     hier bleibt trotzdem: Sie verteilt auch die Zeilen darueber besser.

     `overflow-wrap: break-word` ist das Sicherheitsnetz dazu. Ein gebundenes
     Wortpaar laesst sich nicht mehr trennen; waere es breiter als die
     Spalte, ragte es ohne diese Zeile seitlich heraus. So bricht es
     stattdessen um. */
  text-wrap: pretty;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--schrift);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--akzent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

strong { font-weight: 600; color: var(--tinte); }

::selection { background: var(--akzent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sprungmarke fuer Tastatur und Vorlesegeraete ---------------------------- */
.sprung {
  position: absolute; left: -9999px; top: 0;
  background: var(--akzent); color: #fff;
  padding: 12px 20px; border-radius: 0 0 var(--r-klein) 0;
  font-weight: 600; z-index: 200;
}
.sprung:focus { left: 0; }

/* ===========================================================================
   Raster
   =========================================================================== */

.bahn {
  width: 100%;
  max-width: var(--breit);
  margin: 0 auto;
  padding: 0 30px;
}
.bahn-schmal { max-width: var(--schmal); }
/* `.bahn-weit` (1300 px) ist am 23.09.2026 entfallen. Die Prozessstrecke
   begann darin 70 px weiter links als ihre Nachbarn; sie steht jetzt in der
   normalen Bahn wie alle anderen Bloecke. */

section { position: relative; }

.block { padding: 108px 0; }
/* Nur die Rechtsseiten benutzen das. Oben knapper als unten: Über dem Text
   steht bereits die Überschrift der Seite. */
.block-eng { padding: 56px 0 88px; }
.block-linie { border-top: 1px solid var(--linie); }

/* ===========================================================================
   Kopfzeile
   =========================================================================== */

.kopf {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244, 246, 249, 0.72);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--takt), background var(--takt);
}
.kopf.gescrollt {
  border-bottom-color: var(--linie);
  background: rgba(244, 246, 249, 0.93);
}
.kopf-innen {
  display: flex; align-items: center; gap: 28px;
  min-height: 74px;
}

/* AM 29.08.2026 UM DIE HAELFTE VERGROESSERT, auf Ansage des Nutzers: Die Marke
   soll so gross auftreten wie die von Roomaya. Dort misst das Schriftzeichen im
   Kopf 210 x 50 px (gemessen am 29.08.2026 auf der Startseite der Anwendung,
   Ansichtsbreite 1600). Hier waren es 141 x 32 px.

   Der Faktor 1,5 auf alle drei Masse -- Zeichen 27 -> 40, Schrift 19 -> 28,5,
   Luecke 11 -> 16 -- ergibt 210 x 48 px. Beide Marken stehen damit gleich gross
   nebeneinander, ohne dass an den Verhaeltnissen innerhalb der Marke gedreht
   wurde.

   NICHT MITGEWACHSEN ist die Marke im Fuss (.fuss .marke weiter unten): Sie
   setzt Schrift und Zeichen eigens und bleibt klein. Unten steht die Marke als
   Absender, oben als Absender UND Einstieg. */
.marke {
  display: inline-flex; align-items: center; gap: 16px;
  color: var(--tinte);
  font-size: 28.5px; font-weight: 500; letter-spacing: -0.02em;
  white-space: nowrap;
}
.marke:hover { text-decoration: none; }
/* DAS ZEICHEN SITZT HOEHER ALS DIE MITTE DER ZEILE.

   `align-items: center` zentriert auf den Zeilenkasten, und der reicht unter
   die Grundlinie, weil er Platz fuer Unterlaengen vorhaelt. „Lunima Labs" hat
   keine einzige Unterlaenge. Am 24.08.2026 nachgemessen (Kopfzeile, Outfit
   500, 19 px, Zeichen 27 px): Die sichtbare Tinte stand 5,1 px ueber den
   Versalien, aber 7,0 px unter der Grundlinie — das Zeichen hing durch.

   -0,16 em hebt es um rund 3 px an; danach sind es 8,2 px oben und 4,0 px
   unten. Der rechnerische Ausgleich laege bei -0,05 em, gewaehlt wurde am
   24.08.2026 ausdruecklich die naechsthoehere Stufe („etwas mehr Hoehe").
   Die sechs geprueften Stufen stehen in vorlage/zeichen/hoehe.html.

   IN EM, NICHT IN PIXELN: Die Fusszeile setzt dieselbe Wortmarke in 17 px
   mit einem 24-px-Zeichen. Eine Pixelangabe wuerde dort anders wirken.

   `translate` ist hier frei — die Hover-Bewegung unten fasst die PFADE an,
   nicht das SVG. */
/* Die Hoehenkorrektur steht in em und WAECHST DESHALB MIT. Das ist kein
   Zufall, sondern der Grund, warum sie am 24.08.2026 in em geschrieben
   wurde: Sie ist ein Verhaeltnis zur Schrift, kein fester Abstand. */
.marke svg { width: 40px; height: 40px; flex: none; translate: 0 -0.16em; }
.marke b { font-weight: 500; color: inherit; }

/* Beim Ueberfahren OEFFNET SICH DIE LUECKE: Jeder der vier Winkel weicht um
   2,4 px nach aussen (bis 29.08.2026 waren es 1,6 px -- mit dem Zeichen um
   die Haelfte gewachsen, sonst waere die Geste relativ kleiner geworden), jeder in seine eigene Richtung. Die Symmetrie bleibt
   dabei erhalten, und genau darum geht es — das Zeichen soll atmen, nicht
   wackeln.

   Die Reihenfolge der Pfade in lunima-zeichen.svg ist dafuer massgeblich:
   1 links, 2 oben, 3 rechts, 4 unten. Wer sie im SVG umstellt, muss diese
   vier Zeilen mit umstellen. Vorher stand hier eine einzelne Verschiebung
   nach rechts; die passte zu den zwei Winkeln des alten Zeichens und haette
   bei vier Elementen die Symmetrie zerrissen. */
.marke svg path { transition: translate var(--takt); }
.marke:hover svg path:nth-child(1) { translate: -2.4px 0; }
.marke:hover svg path:nth-child(2) { translate: 0 -2.4px; }
.marke:hover svg path:nth-child(3) { translate: 2.4px 0; }
.marke:hover svg path:nth-child(4) { translate: 0 2.4px; }

.navi { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.navi a {
  position: relative;
  color: var(--text-leise); font-size: 16.5px; font-weight: 400;
  padding: 9px 14px; border-radius: var(--r-klein);
  transition: color var(--takt), background var(--takt);
}
.navi a:hover { color: var(--tinte); background: var(--akzent-hauch); text-decoration: none; }
.navi a[aria-current="page"] { color: var(--tinte); font-weight: 500; }
.navi a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--akzent);
}

.sprachen {
  display: flex; align-items: center; gap: 2px;
  margin-left: 14px; padding-left: 16px;
  border-left: 1px solid var(--linie);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 500;
}
.sprachen a { padding: 6px 8px; color: var(--text-still); }
.sprachen a[aria-current="true"] { color: var(--akzent); }

.menue-knopf { display: none; }

/* ===========================================================================
   Auftakt — Raster, Licht, grosse Schrift
   ===========================================================================
   Der Hintergrund ist ein feines Raster wie auf Millimeterpapier, das nach
   unten ausblendet. Das ist die technische Zeichnung, nicht die Dekoration:
   Es sagt „hier wird konstruiert" und bleibt dabei so leise, dass die Schrift
   davor nicht kaempfen muss.

   Darueber wandert ein Lichtstreifen. Denselben Griff benutzt die Anwendung
   beim Warten auf einen Entwurf (globals.css) — es ist ein Hausmittel, kein
   neuer Einfall. 26 Sekunden fuer einen Durchgang: es faellt auf, wenn man
   hinsieht, und stoert nicht, wenn man liest. */

.auftakt { padding: 128px 0 104px; position: relative; z-index: 1; overflow: hidden; }

.himmel {
  position: absolute; inset: 0;
  pointer-events: none; z-index: -1; overflow: hidden;
}

.himmel::before {
  content: ""; position: absolute; inset: -2px;
  background-image:
    linear-gradient(to right,  var(--raster) 1px, transparent 1px),
    linear-gradient(to bottom, var(--raster) 1px, transparent 1px);
  background-size: 72px 72px;
  /* Das Raster darf nirgends an einer harten Kante enden. */
  -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, #000 12%, transparent 74%);
          mask-image: radial-gradient(130% 100% at 50% 0%, #000 12%, transparent 74%);
}

.himmel::after {
  content: ""; position: absolute;
  top: -50%; left: -35%; width: 34%; height: 200%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(71, 163, 225, 0.16) 45%,
    rgba(71, 163, 225, 0.16) 55%,
    transparent
  );
  filter: blur(34px);
  animation: streifen 26s linear infinite;
}
@keyframes streifen {
  from { transform: translateX(0)     rotate(9deg); }
  to   { transform: translateX(430%)  rotate(9deg); }
}

/* Die Zeile ueber der Ueberschrift. Der Punkt davor pulst langsam — ein
   Betriebszeiger, wie ihn ein Geraet hat, kein Blinken. */
.kicker {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 13.5px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500;
  color: var(--text-still); margin-bottom: 26px;
}
.kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--akzent);
  box-shadow: 0 0 0 0 rgba(21, 105, 147, 0.45);
  animation: puls 3.4s ease-out infinite;
}
@keyframes puls {
  0%        { box-shadow: 0 0 0 0    rgba(21, 105, 147, 0.40); }
  55%, 100% { box-shadow: 0 0 0 12px rgba(21, 105, 147, 0);    }
}

.auftakt h1 {
  font-size: clamp(3rem, 8.6vw, 6.2rem);
  font-weight: 200;
  letter-spacing: -0.05em;
  margin-bottom: 28px;
}

/* „Next?" traegt den Akzent — dieselbe Rolle wie der zweite Ring bei Roomaya.
   Es rueckt beim Aufbau einmal nach vorn und steht dann. Eine Bewegung, die
   etwas behauptet, und danach Ruhe.

   KEIN Winkel-Zeichen zwischen den beiden Woertern: am 22.08.2026 gebaut und
   angesehen, es las sich wie ein Trennstrich in einem Pfad („What's › Next?")
   und drueckte sich an den Apostroph. Der Winkel steht im Zeichen darueber,
   und einmal genuegt. */
.auftakt h1 .frage {
  color: var(--akzent);
  display: inline-block;
  white-space: nowrap;
  animation: vorruecken 1.05s var(--kurve) 0.2s both;
}
@keyframes vorruecken {
  from { opacity: 0; translate: -0.22em 0; }
  to   { opacity: 1; translate: 0 0; }
}

.auftakt .fuehrung {
  font-size: clamp(1.1rem, 2vw, 1.38rem);
  font-weight: 350;
  color: var(--text-leise);
  max-width: 32em;
  line-height: 1.6;
  margin-bottom: 38px;
}

/* ===========================================================================
   Schaltflaechen
   =========================================================================== */

.knoepfe { display: flex; flex-wrap: wrap; gap: 13px; }

.knopf {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 24px; border-radius: 100px;
  font-family: var(--schrift);
  font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
  border: 1px solid var(--linie-stark);
  color: var(--tinte); background: var(--flaeche);
  cursor: pointer;
  transition: border-color var(--takt), background var(--takt),
              color var(--takt), transform var(--takt), box-shadow var(--takt);
}
.knopf:hover {
  text-decoration: none;
  border-color: var(--akzent);
  color: var(--akzent);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -10px rgba(16, 23, 32, 0.35);
}
.knopf-voll {
  background: var(--akzent); border-color: var(--akzent); color: #fff;
  box-shadow: 0 8px 20px -12px rgba(21, 105, 147, 0.9);
}
.knopf-voll:hover {
  background: var(--akzent-tief); border-color: var(--akzent-tief); color: #fff;
  box-shadow: 0 12px 26px -12px rgba(21, 105, 147, 0.85);
}
.knopf .pfeil { transition: transform var(--takt); }
.knopf:hover .pfeil { transform: translateX(4px); }

/* ===========================================================================
   Abschnittskoepfe
   =========================================================================== */

.marke-klein {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 13.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--akzent); margin-bottom: 18px; font-weight: 600;
}
/* Der Strich zeichnet sich beim Erscheinen selbst — die einzige Bewegung, die
   ein Abschnittskopf bekommt. */
.marke-klein::before {
  content: ""; width: 30px; height: 2px; flex: none; border-radius: 2px;
  background: var(--akzent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.7s var(--kurve) 0.1s;
}
.zeigt-sich.da .marke-klein::before { transform: scaleX(1); }

.block h2 {
  font-size: clamp(1.85rem, 3.8vw, 2.85rem);
  margin-bottom: 20px;
}
.block .vorspann {
  font-size: 1.24rem; font-weight: 350;
  color: var(--text-leise); max-width: 42em;
}

/* ===========================================================================
   Satz-Reihe (die Grundsaetze)
   =========================================================================== */

.saetze { margin-top: 54px; border-top: 1px solid var(--linie); }
.satz {
  display: grid; gap: 8px 44px; padding: 32px 0;
  border-bottom: 1px solid var(--linie);
  grid-template-columns: minmax(230px, 1fr) 2fr;
  align-items: start;
  transition: background var(--takt);
}
.satz:hover { background: rgba(255, 255, 255, 0.6); }
.satz h3 {
  font-size: 1.42rem; font-weight: 400; color: var(--tinte);
  letter-spacing: -0.025em;
}
.satz p { color: var(--text-leise); font-size: 18px; }

/* ===========================================================================
   Kontakt
   =========================================================================== */

.kontakt-raster {
  display: grid; gap: 52px; margin-top: 46px;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  align-items: start;
}
.anschrift { font-style: normal; color: var(--text-leise); line-height: 1.9; }
.anschrift .name { color: var(--tinte); font-weight: 500; }

.feld { margin-bottom: 18px; }
.feld label {
  display: block; font-size: 14px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--text-leise); margin-bottom: 7px;
}
.feld .pflicht { color: var(--akzent); }
.feld input, .feld textarea {
  width: 100%; padding: 13px 15px;
  background: var(--flaeche); color: var(--tinte);
  border: 1px solid var(--linie-stark); border-radius: var(--r-klein);
  font: inherit; font-size: 16px;
  transition: border-color var(--takt), box-shadow var(--takt);
}
.feld input:focus, .feld textarea:focus {
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-hauch);
  outline: none;
}
.feld textarea { min-height: 168px; resize: vertical; }

/* Honigtopf: fuer Menschen unsichtbar, fuer Formularroboter verlockend.
   Kein Cookie, kein Drittanbieter, kein Captcha — siehe LIESMICH.md. */
.honigtopf {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.hinweis-klein { font-size: 14.8px; color: var(--text-still); margin-top: 16px; }

.meldung {
  padding: 18px 22px; border-radius: var(--r-klein);
  border: 1px solid var(--linie-stark); background: var(--flaeche);
  margin-bottom: 28px;
}
.meldung-gut { border-color: var(--akzent); background: var(--akzent-hauch); }
/* Fehlerrot ist NICHT das Markenrot: #99150e gehoert Roomaya, und eine
   Fehlermeldung ist kein Markenauftritt. */
.meldung-schlecht { border-color: #c0563f; background: rgba(192, 86, 63, 0.07); }
.meldung h1 { font-size: 1.6rem; font-weight: 500; margin-bottom: 12px; }
.meldung p  { margin: 0; }
/* Auf schmalen Handys weniger Innenabstand (28.09.2026): Bei 320 px blieben
   dem Text nur 219 px, und die Adresse contact1188@lunimalabs.com brach
   mitten im Wort. GRENZE.meldung in bauen.js rechnet mit 219 px und bleibt
   damit auf der sicheren Seite. */
@media (max-width: 400px) {
  .meldung { padding: 16px 14px; }
}

/* ===========================================================================
   Rechtstexte
   =========================================================================== */

/* Auf den Rechtsseiten steht über dem Text nur eine Überschrift, kein
   Vorspann und kein Knopf. Mit dem vollen Auftakt-Abstand klaffte darunter
   ein Feld Nichts (am 22.08.2026 im Prüfbild gemessen: rund 250 Pixel).
   `:has()` trifft genau diesen Fall; Browser ohne `:has()` bekommen den
   alten, größeren Abstand — das ist unschön, aber nicht kaputt. */
.auftakt:has(.h1-mittel):not(:has(.fuehrung)) { padding-bottom: 40px; }
.auftakt:has(.h1-mittel):not(:has(.fuehrung)) h1 { margin-bottom: 0; }

.recht { max-width: var(--schmal); }
.recht h2 {
  font-size: 1.45rem; font-weight: 500; margin: 50px 0 15px;
  padding-top: 26px; border-top: 1px solid var(--linie);
}
.recht h2:first-of-type { margin-top: 0; }
.recht h3 { font-size: 1.1rem; font-weight: 600; margin: 28px 0 11px; }
.recht p, .recht li { color: var(--text-leise); font-size: 16.6px; }
.recht ul { padding-left: 22px; }
.recht li { margin-bottom: 9px; }
.recht hr { border: 0; border-top: 1px solid var(--linie); margin: 40px 0; }
.recht em { color: var(--text-still); }
.recht address { font-style: normal; }

.recht-tabelle { width: 100%; overflow-x: auto; margin: 22px 0; }
.recht table { width: 100%; border-collapse: collapse; font-size: 15.6px; }
.recht th, .recht td {
  text-align: left; padding: 12px 14px;
  border-bottom: 1px solid var(--linie); vertical-align: top;
}
.recht th { color: var(--tinte); font-weight: 600; white-space: nowrap; }
.recht td { color: var(--text-leise); }

/* Offene Stellen. Sie sollen weh tun, solange sie da sind. */
.platzhalter {
  background: rgba(214, 138, 40, 0.18);
  border-bottom: 1px dashed #b9762a;
  color: #8a530f; padding: 0 3px; border-radius: 3px;
}

.fahne {
  padding: 16px 20px; margin-bottom: 32px;
  border: 1px solid var(--linie); border-left: 3px solid var(--akzent);
  border-radius: 0 var(--r-klein) var(--r-klein) 0;
  background: var(--flaeche); color: var(--text-leise); font-size: 15.8px;
}
.fahne strong { color: var(--tinte); }

/* ===========================================================================
   Fusszeile
   =========================================================================== */

.fuss {
  border-top: 1px solid var(--linie);
  background: var(--papier-tief);
  padding: 56px 0 38px;
  font-size: 15px;
}
.fuss-innen { display: grid; gap: 36px; grid-template-columns: minmax(0,2fr) minmax(0,3fr); }
/* Die Luecke wird hier mitgesetzt, damit der Fuss vom Wachstum oben
   unberuehrt bleibt (29.08.2026). */
.fuss .marke { font-size: 17px; margin-bottom: 14px; gap: 11px; }
.fuss .marke svg { width: 24px; height: 24px; }
.fuss p { color: var(--text-still); font-size: 15.2px; max-width: 30em; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: flex-start; }
.fuss-links a { color: var(--text-leise); }
.fuss-schluss {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linie);
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  color: var(--text-still); font-size: 14px;
}

/* ===========================================================================
   Kleine Helfer
   ===========================================================================
   Sie ersetzen style="…"-Angaben im Markup. Das ist kein Schoenheitsgrund:
   Ohne Inline-Stile kommt die Sicherheitsregel in der .htaccess ohne
   'unsafe-inline' aus, und der Browser blockt dann tatsaechlich alles Fremde. */

.h1-mittel  { font-size: clamp(2.5rem, 6.2vw, 4.2rem); }
/* Die Zeile darüber wirkt nicht: `.auftakt h1` ist spezifischer und setzt
   clamp(3rem, 8.6vw, 6.2rem). Gemessen am 28.09.2026: Bei 3rem (48 px) fasste
   die Zeile bei 320 px nur 11 Zeichen, und „Datenschutzerklärung“ brach bis
   468 px Fensterbreite mitten im Wort. Diese Regel senkt nur die Untergrenze.
   Ab 558 px ist 8,6vw ohnehin größer als 3rem, dort bleibt alles wie bisher. */
.auftakt .h1-mittel { font-size: clamp(1.3rem, 8.6vw, 6.2rem); }
.h1-weiche  { font-size: clamp(2.4rem, 6.6vw, 4.2rem); }
.satzblock  { max-width: var(--schmal); }
/* Mit Elementname davor, sonst gewinnt die Regel ".block h2" darueber. */
h2.h-klein  { font-size: 1.35rem; font-weight: 500; margin-bottom: 0; }
.abstand-gross { margin-top: 42px; }
.anschrift-block { margin-top: 16px; }
.leise-klein { color: var(--text-leise); font-size: 16.4px; margin-top: 14px; }
.trenner    { color: var(--linie-stark); }
.weiche-flaeche { min-height: 100vh; display: flex; align-items: center; }
.weiche-kopf { margin-bottom: 34px; }

/* ===========================================================================
   Einblenden beim Scrollen
   ===========================================================================
   Bewegt wird `translate`, NICHT `transform`. Grund: Kacheln haben beim
   Ueberfahren ein `transform: translateY(-3px)`. Stuende die Einblendung auch
   auf `transform`, wuerde die eine Angabe die andere loeschen und das Anheben
   waere weg. Die beiden Eigenschaften rechnen sich zusammen. */

.zeigt-sich > * {
  opacity: 0; translate: 0 18px;
  transition: opacity 0.65s ease, translate 0.65s var(--kurve);
}
.zeigt-sich.da > * { opacity: 1; translate: 0 0; }
.zeigt-sich.da > *:nth-child(2) { transition-delay: 0.07s; }
.zeigt-sich.da > *:nth-child(3) { transition-delay: 0.14s; }
.zeigt-sich.da > *:nth-child(4) { transition-delay: 0.21s; }

/* Die Grundsaetze kommen einzeln nach, nicht als Block. Die Regeln fuer
   Karten und Prozess-Stationen sind mit Aktion 91 (27.09.2026) entfallen,
   ebenso diese Bausteine. */
.zeigt-sich .satz {
  opacity: 0; translate: 0 20px;
  transition: opacity 0.6s ease, translate 0.6s var(--kurve),
              border-color var(--takt), transform var(--takt),
              box-shadow var(--takt), background var(--takt);
}
.zeigt-sich.da .satz { opacity: 1; translate: 0 0; }

.zeigt-sich.da .satz:nth-child(2) { transition-delay: 0.09s; }
.zeigt-sich.da .satz:nth-child(3) { transition-delay: 0.18s; }
.zeigt-sich.da .satz:nth-child(4) { transition-delay: 0.27s; }
.zeigt-sich.da .satz:nth-child(5) { transition-delay: 0.36s; }
.zeigt-sich.da .satz:nth-child(6) { transition-delay: 0.45s; }

/* Ohne JavaScript blendet nichts ein — dann muss alles von vornherein
   sichtbar sein. Sonst bliebe die Seite leer, und das waere kein Effekt,
   sondern ein Ausfall. (Ein <style> im <noscript> ginge auch, wuerde aber an
   der Sicherheitsregel ohne 'unsafe-inline' scheitern.) */
@media (scripting: none) {
  .zeigt-sich > *, .zeigt-sich .satz {
    opacity: 1; translate: 0 0;
  }
  .marke-klein::before, .schritt::before { transform: scaleX(1); }

  /* Ohne Skript bleibt der Kasten der Zeichnung leer — sie wird ja von
     prozess.js gebaut. Dann faellt er weg, und die fuenf Zeilen darunter
     tragen den Abschnitt allein. Sie stehen dann alle gleich vorn. */
  .ent-buehne { display: none; }
  .ent-zug { opacity: 1; }
  .ent-zug::before { transform: scaleX(1); }
}

/* ===========================================================================
   Schmale Bildschirme
   =========================================================================== */

@media (max-width: 860px) {
  .kontakt-raster, .fuss-innen { grid-template-columns: 1fr; }
  .satz { grid-template-columns: 1fr; gap: 8px; padding: 26px 0; }
  .block { padding: 78px 0; }
  .auftakt { padding: 88px 0 74px; }
}

/* DAS MENÜ KLAPPT SEIT AKTION 91 (27.09.2026) SCHON UNTER 900 px ZUSAMMEN,
   vorher unter 700 px. Mit vier Einträgen statt drei braucht die Kopfzeile
   auf Deutsch 865 px (gemessen: Marke 210, Abstand 28, Menü 567, Rand 60).
   Bei 768 px brach „Was wir tun“ um, und die Seite lief 14 px über. */
@media (max-width: 700px) {
  .bahn { padding: 0 20px; }
}

@media (max-width: 900px) {
  .menue-knopf {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto;
    width: 42px; height: 42px; padding: 0;
    background: var(--flaeche); border: 1px solid var(--linie-stark);
    border-radius: var(--r-klein); color: var(--tinte); cursor: pointer;
  }
  .navi {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 10px 30px 20px;
    background: rgba(244, 246, 249, 0.98);
    border-bottom: 1px solid var(--linie);
    backdrop-filter: blur(14px);
  }
  .navi.offen { display: flex; }
  .navi a { padding: 13px 4px; }
  .navi a[aria-current="page"]::after { left: 4px; right: auto; width: 22px; }
  .sprachen {
    margin: 10px 0 0; padding: 14px 0 0;
    border-left: 0; border-top: 1px solid var(--linie);
  }
}
/* Das Menü beginnt dort, wo die Bahn beginnt: Unter 700 px ist ihr Rand
   20 px statt 30 px. Diese Regel muss nach dem Block darüber stehen. */
@media (max-width: 700px) {
  .navi { padding-left: 20px; padding-right: 20px; }
}

/* ===========================================================================
   DIE ZEICHNUNG — die Prozess-Animation auf der Startseite
   ===========================================================================

   Hier steht nur der Kasten. Die Zeichnung selbst wird von vorlage/prozess.js
   gerechnet und als SVG hineingesetzt; dort stehen auch der Fahrplan und die
   Farben. Diese Datei bestimmt, wie der Kasten im Seitenraster sitzt und wie
   die fuenf Zeilen darunter aussehen.

   SIE HAT AM 26.08.2026 DAS FACH-WERK-HAUS ABGELOEST. Der Einwand dazu,
   woertlich: „So was zeichnen Kinder in der Grundschule." Das alte Haus war
   reines CSS mit dreizehn Balken auf einer 24-Sekunden-Uhr; wer es
   nachlesen will, findet es im Git-Verlauf bis einschliesslich Commit
   „Uebergabe: Wiedereinstiegspunkt nach dem clear".

   WARUM ES HIER DUNKEL WIRD, obwohl der ganze Auftritt hell ist: Eine
   technische Zeichnung entsteht auf dem Leuchttisch. Der Kasten ist die
   einzige dunkle Flaeche im Auftritt und wirkt dadurch wie ein Fenster in
   die Werkstatt. Der Grund #1d2d3d liegt in derselben kuehlen Familie wie
   unser Akzent, nur tief.

   DIE HOEHE STEHT VOR DEM ZEICHNEN FEST. `aspect-ratio` haelt den Platz
   frei, bevor das Skript das SVG einsetzt. Ohne das springt die halbe
   Startseite, sobald prozess.js laeuft.

   DIE FUENF ZEILEN LAUFEN NACH DER UHR DES SKRIPTS, nicht nach einer
   eigenen. Sie bekommen von dort `.laeuft` (die gerade laufende Phase) und
   `.getan` (alles bis dahin). Eine zweite Uhr in CSS waere die alte Falle
   vom Bauwerk: Zwei Uhren, die verschieden starten, laufen auseinander. */

/* SEIT AKTION 91 (27.09.2026) WIEDER AUF VOLLER BAHNBREITE. Die Entwürfe der
   zweiten Runde verlangten groessere Schrift auch in der Zeichnung; dazu
   gehoert die volle Breite. Die Begruendung der 88 Prozent bleibt als
   Geschichte stehen:

   SIE STAND AUF 88 PROZENT DER BAHNBREITE, nicht auf voller Breite.

   Beanstandet am 26.08.2026, woertlich: „das Animationsfenster muss kleiner,
   da die Besucher auch die Texte unten mitlesen moechten, und dafuer ist es
   zu hoch, um auf einmal erfasst zu werden." Nach der ersten Verkleinerung
   noch einmal: „Die Ani muss auch in der Hoehe schrumpfen."

   Verkleinert wird ueber die BREITE, und die Hoehe kommt mit: Das
   Seitenverhaeltnis 16:9 gehoert zur Zeichnung, und wer nur die Hoehe
   nimmt, muesste sie beschneiden. Zuerst faellt der Rahmen weg, dann die
   Fusszeile.

   Der Weg in Zahlen, gemessen im 1280 px breiten Fenster:

     1205 x 678   der Entwurf, volle Breite der breiten Bahn
     1100 x 619   normale Bahn statt breiter (siehe bauen.js)
      968 x 545   davon 88 Prozent

   Das sind 80 Prozent der Ausgangsbreite und 80 Prozent der Ausgangshoehe;
   der Abschnitt ist um 133 px kuerzer geworden. */
.ent-buehne {
  position: relative;
  margin: 44px auto 40px;
  max-width: 100%;
  aspect-ratio: 1920 / 1080;
  border: 1px solid var(--linie);
  border-radius: var(--r-gross);
  background: #1d2d3d;
  overflow: hidden;
}
/* Die kleinen Beschriftungen im Bild groesser (Aktion 91, aus der zweiten
   Runde der Entwuerfe, geprueft auf deren pruefbild.html). CSS schlaegt das
   Attribut font-size im SVG; prozess.js bleibt unveraendert. */
.ent-buehne text[font-size="24"], .ent-buehne text[font-size="25"] { font-size: 30px; }
.ent-buehne text[font-size="28"], .ent-buehne text[font-size="30"] { font-size: 34px; }

/* Die Zeichnung erbt die Schrift der Seite. Das Uebergabepaket setzt Barlow
   und Barlow Condensed; beide muessten von Google geholt oder als zwei
   weitere Dateien mitgeliefert werden, und der Auftritt traegt genau eine
   Schrift. Outfit steht in Versalien mit weiter Laufweite genauso technisch.
   Die Schriftgroessen im Bild sind daraufhin nachgemessen worden. */
.ent {
  display: block;
  width: 100%;
  height: 100%;
  font-family: var(--schrift);
  font-weight: 400;
}

/* --- Die fuenf Zeilen unter dem Bild ------------------------------------
   Sie sind mehr als eine Bildunterschrift: Ohne JavaScript entfaellt der
   Kasten, und die fuenf Phasen stehen weiter da. Und weil die Zeichnung
   `aria-hidden` traegt, sind sie zugleich ihr Text. */

.ent-zuege {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
  margin: 0 0 34px;
  padding: 0;
}
.ent-zug {
  position: relative;
  padding-top: 16px;
  border-top: 2px solid var(--linie);
  opacity: 0.42;
  transition: opacity 0.5s var(--kurve);
}
.ent-zug::before {
  content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px;
  background: var(--akzent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.6s var(--kurve);
}
.ent-zug.getan::before { transform: scaleX(1); }
.ent-zug.laeuft { opacity: 1; }

.ent-nr {
  display: block;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.18em;
  color: var(--akzent);
  margin-bottom: 7px;
}
.ent-zug h3 {
  font-size: 1.16rem; font-weight: 500; letter-spacing: -0.01em;
  margin-bottom: 5px;
}
.ent-zug p {
  font-size: 16.4px; line-height: 1.55; color: var(--text-still);
}

/* Auf schmalen Bildschirmen stehen fuenf Spalten nicht mehr. Zwei Stufen,
   damit die Zeile nie unter rund 150 px faellt — darunter laesst sich kein
   Text mehr setzen, das war die Lehre vom Prozessband am 24.08.2026. */
@media (max-width: 1000px) {
  .ent-zuege { grid-template-columns: repeat(3, 1fr); gap: 22px 24px; }
}
@media (max-width: 620px) {
  .ent-zuege { grid-template-columns: 1fr; gap: 18px; }

  .ent-buehne { margin: 32px 0 30px; }
}

/* ===========================================================================
   Wer keine Bewegung moechte, bekommt keine.
   =========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .zeigt-sich > *, .zeigt-sich .satz {
    opacity: 1; translate: 0 0;
  }
  .marke-klein::before, .schritt::before { transform: scaleX(1); }
  .himmel::after { display: none; }

  /* Die Zeichnung steht still. prozess.js zeichnet dann EIN Bild, bei
     T = 34 s: Phase 05, fertig aufgebaut. So bleibt der Abschnitt ein Bild
     und kein leeres Feld. Die fuenf Zeilen stehen dabei alle gleich vorn —
     ohne Lauf gibt es keine laufende Phase. */
  .ent-zug { opacity: 1; }
  .ent-zug::before { transform: scaleX(1); }
}

/* ===========================================================================
   Druck
   =========================================================================== */

@media print {
  .kopf, .himmel, .fuss-links, .menue-knopf { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .recht p, .recht li, .recht td { color: #000; }
  a { color: #000; text-decoration: underline; }
  .zeigt-sich > *, .zeigt-sich .satz {
    opacity: 1; translate: 0 0;
  }
  .block, .block-eng { padding: 18pt 0; }
}

/* ===========================================================================
   DER AUFTRITT SEIT AKTION 91 (27.09.2026): Entwurf C3
   ===========================================================================
   Übernommen aus vorlage/alternativen/alternativen.css, nur was C3 braucht.
   Die Reihenfolge ist die des Entwurfs; sie steht bewusst am Ende dieser
   Datei, weil die Entwürfe alternativen.css NACH stil.css geladen haben und
   einige Regeln hier ältere darüber schlagen. Wer sie nach oben zieht,
   ändert das Aussehen. Entfallen sind die Entwurfsmarke, die Schritte (A),
   das Labor (B), das Fenster (C1) und die Werkstatt-Fassung (C2).

   Die Klasse `labor-block` trägt die dunkle Sektion des Ideen-Boards. Der
   Name stammt aus dem Labor (B), dessen dunkle Fläche C3 übernommen hat.

   Eine Farbe ist neu: das Rot der Kapazitätsampel. Es ist ein Signal, kein
   Schmuck. Es ist bewusst NICHT das Rot von roomaya (#99150e). */

:root {
  --signal-rot:   #d64532;
  --signal-gelb:  #e0a13a;
  --signal-gruen: #3aa46b;
}

/* Aus dem früheren Abschnitt „Schritte“ (Seite roomaya, entfallen). Der
   Entwurf trug diese Regeln auf „2 Die Felder ausfüllen“ mit: den Abstand
   oben und die Linie, die sich beim Erscheinen zeichnet. */
.schritt { position: relative; padding-top: 24px; }
.schritt::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--linie-stark);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 0.65s var(--kurve);
}
.zeigt-sich.da .schritt::before { transform: scaleX(1); }
.zeigt-sich.da .schritt:nth-child(2)::before { transition-delay: 0.12s; }
.zeigt-sich.da .schritt:nth-child(3)::before { transition-delay: 0.24s; }
.zeigt-sich.da .schritt:nth-child(4)::before { transition-delay: 0.36s; }
.schritt p { color: var(--text-leise); font-size: 16.4px; }

#idee, #tun, #werk { scroll-margin-top: 84px; }

/* --- Wegweiser: wer roomaya sucht, soll dort ankommen. -------------------- */
/* Er steht dort, wo in der ersten Runde die beiden Knöpfe standen. */
.wegweiser {
  display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 72px; padding: 13px 22px;   /* hält etwa die Stelle, an der er unter den Knöpfen stand */
  border: 1px solid var(--linie); border-radius: 100px;
  background: rgba(255, 255, 255, 0.78);
  font-size: 16.5px; color: var(--text-leise);
}
.wegweiser a { color: var(--akzent); text-decoration: none; font-weight: 500; }
.wegweiser a:hover { text-decoration: underline; }
@media (max-width: 720px) { .wegweiser { border-radius: var(--r-gross); } }

/* --- Laufband ------------------------------------------------------------- */
.laufband {
  overflow: hidden; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  background: var(--flaeche); padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.laufband-innen { display: flex; width: max-content; animation: laufen 48s linear infinite; }
.laufband span {
  font-size: 1.4rem; font-weight: 300; letter-spacing: -0.01em; color: var(--tinte);
  white-space: nowrap; padding-right: 28px;
}
.laufband span i { font-style: normal; color: var(--akzent); padding-left: 28px; font-size: 0.75em; }
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .laufband-innen { animation: none; } }

/* --- Werkbahnen: vier Felder, eine Übergabe ------------------------------- */
.werkbahnen {
  display: grid; grid-template-columns: 230px 1fr; margin-top: 48px;
  border: 1px solid var(--linie); border-radius: var(--r-gross);
  background: var(--flaeche); overflow: hidden;
}
.werkbahnen ol { list-style: none; margin: 0; padding: 0; border-right: 1px solid var(--linie); }
.werkbahnen li {
  height: 78px; display: flex; flex-direction: column; justify-content: center;
  padding: 0 22px; border-bottom: 1px solid var(--linie);
}
.werkbahnen li:last-child { border-bottom: 0; }
.werkbahnen li b { font-weight: 500; font-size: 18px; color: var(--tinte); line-height: 1.3; }
/* 27.09.2026: „Die kleine Schrift etwas größer“, vorher 14.5px. */
.werkbahnen li small { font-size: 16px; color: var(--text-still); }
.werkbahnen canvas { display: block; width: 100%; height: 312px; }
.werkbahnen-legende { margin-top: 14px; font-size: 16px; color: var(--text-still); }
/* Schmal: die Namen stehen im Bild über ihrer Bahn (werkbahnen.js). Zwei
   Spalten brachen „Webanwendungen“ mitten im Wort, den Mangel aus Aktion 26. */
@media (max-width: 720px) {
  .werkbahnen { grid-template-columns: 1fr; }
  .werkbahnen ol { display: none; }
  .werkbahnen canvas { height: 340px; }
}

/* --- Das erste und das nächste Werk --------------------------------------- */
.werke { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; margin-top: 48px; }
.werk {
  border: 1px solid var(--linie); border-radius: var(--r-gross);
  background: var(--flaeche); padding: 30px 30px 32px;
}
.werk .zeichen-feld {
  background: #f2eee8; border-radius: var(--r-klein); padding: 26px;
  display: flex; justify-content: center; margin-bottom: 22px;
}
.werk .zeichen-feld img { width: 190px; height: auto; }
.werk h3 { font-size: 1.4rem; font-weight: 400; margin-bottom: 8px; }
.werk p { color: var(--text-leise); font-size: 17.6px; }
.werk .rolle {
  font-size: 13.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--akzent); font-weight: 600; margin-bottom: 12px;
}
.werk-offen {
  border-style: dashed; border-color: var(--linie-stark); background: transparent;
  display: flex; flex-direction: column; justify-content: center;
}
.werk-offen .platz {
  height: 96px; border-radius: var(--r-klein); margin-bottom: 22px;
  background-image: linear-gradient(var(--raster) 1px, transparent 1px),
                    linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 16px 16px; border: 1px solid var(--linie);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-still); font-size: 28px; font-weight: 200;
}
.werk a { color: var(--akzent); text-decoration: none; font-weight: 500; }
@media (max-width: 860px) { .werke { grid-template-columns: 1fr; } }

/* --- Kapazitätsampel ------------------------------------------------------
   Zweite Runde: „Kann die Warntafel netter gestaltet sein?“ Statt eines
   roten Randes eine kleine Ampel: drei Lichter in einem dunklen Gehäuse, das
   eine leuchtet. Man versteht sie ohne Text, und sie wirkt nicht wie eine
   Fehlermeldung. */
.kapazitaet {
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
  padding: 14px 26px 14px 14px; margin: 30px 0 34px; max-width: 840px;
  border: 1px solid var(--linie); border-radius: 100px;
  background: linear-gradient(90deg, rgba(214, 69, 50, 0.08), rgba(255, 255, 255, 0.92) 42%);
}
.kapazitaet[hidden] { display: none; }
.ampel {
  display: inline-flex; gap: 7px; padding: 9px 11px; flex: none;
  background: #1a2330; border-radius: 100px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 14px -8px rgba(16, 23, 32, 0.6);
}
.ampel i { width: 15px; height: 15px; border-radius: 50%; background: #3a4452; }
.kapazitaet[data-stand="rot"] .ampel i:nth-child(1) { background: var(--signal-rot); box-shadow: 0 0 12px 2px rgba(214, 69, 50, 0.7); }
.kapazitaet[data-stand="gelb"] .ampel i:nth-child(2) { background: var(--signal-gelb); box-shadow: 0 0 12px 2px rgba(224, 161, 58, 0.7); }
.kapazitaet[data-stand="gruen"] .ampel i:nth-child(3) { background: var(--signal-gruen); box-shadow: 0 0 12px 2px rgba(58, 164, 107, 0.7); }
.kapazitaet .text { flex: 1 1 320px; line-height: 1.5; }
.kapazitaet strong { display: block; font-weight: 500; color: var(--tinte); font-size: 17.5px; }
.kapazitaet .satz-k { color: var(--text-leise); font-size: 16.5px; }
@media (max-width: 720px) { .kapazitaet { border-radius: var(--r-gross); } }

/* ===========================================================================
   Die Felder des Idee-Dialogs. Gemeinsam für alle drei Entwürfe.
   =========================================================================== */
.ifeld { margin-bottom: 22px; }
.ifeld > label, .ifeld > .ifeld-name {
  display: block; font-size: 16.5px; font-weight: 500; color: var(--tinte); margin-bottom: 9px;
}
.ifeld .pflicht { color: var(--akzent); }
.ifeld .optional { color: var(--text-still); font-weight: 400; }
.ifeld input[type="text"], .ifeld input[type="email"], .ifeld textarea {
  width: 100%; padding: 14px 16px;
  background: var(--flaeche); color: var(--tinte);
  border: 1px solid var(--linie-stark); border-radius: var(--r-klein);
  font: inherit; font-size: 17.5px;
  transition: border-color var(--takt), box-shadow var(--takt);
}
.ifeld input:focus, .ifeld textarea:focus {
  border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hauch); outline: none;
}
.ifeld textarea { min-height: 130px; resize: vertical; }
.ifeld textarea.gross { min-height: 210px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  font: inherit; font-size: 17px; cursor: pointer;
  padding: 10px 17px; border-radius: 100px;
  border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--tinte);
  transition: border-color var(--takt), background var(--takt), color var(--takt);
}
.chip:hover { border-color: var(--akzent); }
.chip[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.liste-eingabe { display: flex; gap: 8px; }
.liste-eingabe input { flex: 1; }
.liste-punkte { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.liste-punkte span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 14px; border-radius: 100px; background: var(--akzent-hauch); font-size: 16px;
}
.liste-punkte button, .pdf-datei button {
  border: 0; background: transparent; cursor: pointer; font-size: 18px; line-height: 1;
  color: inherit; opacity: 0.7; padding: 2px 6px;
}
.pdf-wahl {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border: 1px dashed var(--linie-stark); border-radius: var(--r-klein);
  background: var(--flaeche); font-size: 16px; color: var(--text-leise);
}
.pdf-wahl input[type="file"] { font: inherit; font-size: 16px; max-width: 100%; }
.pdf-datei { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--tinte); }
.pdf-fehler { color: var(--signal-rot); font-size: 15.5px; margin-top: 8px; }
.pdf-fehler:empty { display: none; }
.zustimmung { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; color: var(--text-leise); }
.zustimmung input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--akzent); }
.bedingungen { margin-top: 14px; font-size: 16px; color: var(--text-leise); }
.bedingungen summary { cursor: pointer; color: var(--akzent); }
.bedingungen ol { padding-left: 22px; margin: 10px 0 0; }
.bedingungen li { margin-bottom: 6px; }
.entwurf-hinweis {
  margin: 14px 0 0; padding: 12px 16px; border-radius: var(--r-klein);
  background: #fff7e6; border: 1px solid #f0d9a8; color: #6b4a10; font-size: 15.5px;
}
.idee-fehler { color: var(--signal-rot); font-size: 16px; min-height: 1.4em; margin: 6px 0 0; }
.knopf-leise { border-color: transparent; background: transparent; color: var(--text-leise); }
.knopf[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Das Briefing, wo immer es steht */
.briefing {
  border: 1px solid var(--linie); border-radius: var(--r-gross);
  background: var(--papier-tief); padding: 26px 28px;
}
.briefing-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 13.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--akzent);
  margin-bottom: 14px; }
.briefing-kopf small { letter-spacing: 0.04em; text-transform: none; color: var(--text-still); font-weight: 500; font-size: 14.5px; }
.briefing dl { margin: 0; }
.briefing dt { font-size: 14.5px; color: var(--text-still); margin-top: 14px; }
.briefing dd { margin: 2px 0 0; font-size: 17px; color: var(--tinte); white-space: pre-line; overflow-wrap: anywhere; }
.briefing .leer { color: var(--text-still); font-size: 17px; }
.briefing dd.neu { animation: aufleuchten 1.4s var(--kurve); }
@keyframes aufleuchten { from { background: rgba(71, 163, 225, 0.22); } to { background: transparent; } }

/* ===========================================================================
   Die dunkle Sektion des Ideen-Boards (aus dem Labor, B)
   =========================================================================== */
.labor-block { background: #0c131c; color: #dce6f2; padding: 104px 0; position: relative; overflow: hidden; }
.labor-block::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(120, 170, 220, 0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(120, 170, 220, 0.06) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
}
.labor-block .bahn { position: relative; }
.labor-block .marke-klein { color: #7cc4f5; }
.labor-block .marke-klein::before { background: #7cc4f5; }
.labor-block h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.3rem); margin-bottom: 18px; }
.labor-block .vorspann { color: #a9b8c9; }
.labor-block .kapazitaet { background: linear-gradient(90deg, rgba(214, 69, 50, 0.18), rgba(255, 255, 255, 0.04) 50%); border-color: rgba(255, 255, 255, 0.12); }
.labor-block .kapazitaet strong { color: #fff; }
.labor-block .kapazitaet .satz-k { color: #a9b8c9; }

/* Die Grobzeichnung zeichnet sich ein (idee-zeichnung.js). */
.bp-neu { animation: bpEin 0.9s var(--kurve) both; }
.bp-neu .bp-strich { stroke-dasharray: 700; stroke-dashoffset: 700; animation: bpZiehen 1.2s var(--kurve) forwards; }
@keyframes bpEin { from { opacity: 0; } to { opacity: 1; } }
@keyframes bpZiehen { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .bp-neu, .bp-neu .bp-strich { animation: none; stroke-dashoffset: 0; } }

/* ===========================================================================
   C · Das Ideen-Board
   Nicht der Reihe nach, sondern alles auf einmal: neun Felder, die sich in
   beliebiger Folge füllen. Ein gefülltes Feld wird dunkel. Oben wächst die
   Idee vom Funken bis zum Briefing.
   =========================================================================== */
.reife { margin: 6px 0 22px; padding: 26px 30px; border-radius: var(--r-gross);
  background: var(--flaeche); border: 1px solid var(--linie); box-shadow: 0 24px 50px -44px rgba(16, 23, 32, 0.5); }
.reife-titel { font-size: clamp(1.45rem, 2.8vw, 2rem); font-weight: 300; line-height: 1.3; margin-bottom: 18px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reife-titel.leer { color: var(--text-still); }
.reife-bahn { position: relative; height: 10px; border-radius: 10px; background: var(--linie); overflow: hidden; }
.reife-bahn b { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 10px;
  background: linear-gradient(90deg, #e8a33c, #47a3e1 55%, #1f74ad); transition: width 0.8s var(--kurve); }
.reife-stufen { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 12px; font-size: 15.5px; color: var(--text-still); }
.reife-stufen span { display: flex; align-items: center; gap: 8px; }
.reife-stufen span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--linie-stark); flex: none; }
.reife-stufen span.da { color: var(--tinte); font-weight: 500; }
.reife-stufen span.da::before { background: #1f74ad; box-shadow: 0 0 0 4px rgba(31, 116, 173, 0.15); }
.reife-stufen span:first-child.da::before { background: #e8a33c; box-shadow: 0 0 0 4px rgba(232, 163, 60, 0.2); }

.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .board { grid-template-columns: 1fr; } }
.kachel {
  position: relative; text-align: left; font: inherit; cursor: pointer;
  height: 240px; padding: 22px 22px 20px; border-radius: var(--r-gross);
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte);
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform var(--takt), box-shadow var(--takt), background 0.5s var(--kurve), color 0.5s var(--kurve);
}
.kachel:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(16, 23, 32, 0.45); }
.kachel:focus-visible { outline: 3px solid var(--akzent-hell); outline-offset: 3px; }
.kachel .k-nr { font-size: 2.6rem; font-weight: 200; line-height: 1; color: var(--akzent); letter-spacing: -0.04em; }
.kachel .k-titel { font-size: 1.3rem; font-weight: 500; margin: 12px 0 6px; letter-spacing: -0.015em; }
.kachel .k-inhalt { font-size: 16.4px; color: var(--text-leise); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; position: relative; z-index: 1; }
.kachel .k-stand { position: absolute; top: 20px; right: 20px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px; border: 1px solid var(--linie-stark); color: var(--text-still); }
.kachel .k-stand.pflicht { border-color: var(--akzent); color: var(--akzent); }
.kachel.halb { background: linear-gradient(160deg, #ffffff 55%, rgba(71, 163, 225, 0.14)); }
.kachel.voll { background: #121c28; color: #fff; border-color: #121c28; }
.kachel.voll .k-nr { color: #7cc4f5; }
.kachel.voll .k-inhalt { color: #c4d1de; }
.kachel.voll .k-stand { border-color: #3aa46b; color: #8fe0b3; }
.kachel.voll::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(71, 163, 225, 0.35), transparent 70%); }
.kachel.frisch { animation: kippen 0.7s var(--kurve); }
@keyframes kippen { 0% { transform: rotateY(0); } 50% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
@media (prefers-reduced-motion: reduce) { .kachel.frisch { animation: none; } }

.board-leiste { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 22px; padding: 20px 24px; border-radius: var(--r-gross); background: var(--flaeche); border: 1px solid var(--linie); }
.board-leiste p { margin: 0; color: var(--text-leise); font-size: 16.5px; flex: 1 1 320px; }

/* ===========================================================================
   DRITTE RUNDE (26.09.2026)
   =========================================================================== */

/* Die Ampel läuft über die ganze Breite, bündig mit dem, was darunter steht.
   Vorher endete sie mitten über dem Brett („die Länge nicht“). */
.kapazitaet { max-width: none; }

/* Ein Hilfesatz unter einer Beschriftung */
.ifeld-hilfe { font-size: 15.5px; color: var(--text-leise); margin: -4px 0 10px; line-height: 1.5; }

/* Der Hinweis „Entwurf“ bleibt auf dunklem Grund lesbar. Vorher erbte er
   die helle Schrift des Labors und war kaum zu sehen. */
.dunkel .entwurf-hinweis { color: #6b4a10; }

/* --- Die Arbeitsfläche ---------------------------------------------------- */
.arbeit .d-inhalt { flex: 1; overflow-y: auto; min-height: 0; }
.arbeit .d-fuss { position: static; }

.board-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: stretch; }
@media (max-width: 1020px) { .board-raster { grid-template-columns: 1fr; } }
.board-links, .board-rechts { min-height: 0; }
.arbeit {
  display: flex; flex-direction: column; height: 780px;
  border: 1px solid var(--linie); border-radius: 22px; background: var(--flaeche); overflow: hidden;
  box-shadow: 0 24px 50px -40px rgba(16, 23, 32, 0.4);
}
.arbeit .d-kopf { display: flex; justify-content: space-between; align-items: center; padding: 20px 26px; border-bottom: 1px solid var(--linie); }
.arbeit .d-kopf h3 { font-size: 1.55rem; font-weight: 300; }
.arbeit .d-kopf .k-nr { color: var(--akzent); font-weight: 200; margin-right: 12px; }
.arbeit .d-inhalt { padding: 22px 26px 8px; }
.arbeit .d-hinweis { color: var(--text-leise); font-size: 17.5px; margin-bottom: 20px; }
.arbeit .d-fuss { display: flex; justify-content: space-between; gap: 10px; padding: 16px 26px 22px; border-top: 1px solid var(--linie); }

/* Kompakte Kacheln (C2, C3): drei mal drei neben der Arbeitsfläche */
.board.kompakt { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; height: 780px; grid-auto-rows: 1fr; }
@media (max-width: 1020px) { .board.kompakt { height: auto; grid-auto-rows: 200px; } }
.board.kompakt .kachel { height: auto; padding: 16px 16px 14px; }
.board.kompakt .k-nr { font-size: 2rem; }
.board.kompakt .k-titel { font-size: 1.08rem; margin: 10px 0 4px; line-height: 1.25; }
.board.kompakt .k-inhalt { font-size: 14.5px; -webkit-line-clamp: 3; }
.board.kompakt .k-stand { position: static; align-self: flex-start; order: 5; margin-top: auto; font-size: 11.5px; padding: 3px 9px; }
.kachel.gewaehlt { outline: 3px solid var(--akzent-hell); outline-offset: 2px; }

/* --- C2 in der Fach-Werkstatt: dunkel, wie das Labor -------------------- */
.dunkel .reife { background: rgba(16, 26, 38, 0.9); border-color: rgba(124, 196, 245, 0.2); box-shadow: none; }
.dunkel .reife-titel { color: #fff; }
.dunkel .reife-titel.leer { color: #8ea3b8; }
.dunkel .reife-bahn { background: rgba(124, 196, 245, 0.16); }
.dunkel .reife-stufen { color: #8ea3b8; }
.dunkel .reife-stufen span.da { color: #fff; }
.dunkel .kachel { background: rgba(16, 26, 38, 0.9); border-color: rgba(124, 196, 245, 0.22); color: #dce6f2; }
.dunkel .kachel .k-nr { color: #7cc4f5; }
.dunkel .kachel .k-inhalt { color: #a9b8c9; }
.dunkel .kachel .k-stand { border-color: rgba(124, 196, 245, 0.35); color: #8ea3b8; }
.dunkel .kachel .k-stand.pflicht { border-color: #7cc4f5; color: #7cc4f5; }
.dunkel .kachel.halb { background: linear-gradient(160deg, rgba(16, 26, 38, 0.95) 50%, rgba(31, 116, 173, 0.35)); }
.dunkel .kachel.voll { background: #1f74ad; border-color: #47a3e1; color: #fff; }
.dunkel .kachel.voll .k-nr { color: #fff; }
.dunkel .kachel.voll .k-inhalt { color: #e3effa; }
.dunkel .kachel.voll .k-stand { border-color: #bfe3ff; color: #fff; }
.dunkel .kachel.voll::after { background: radial-gradient(circle, rgba(255, 255, 255, 0.22), transparent 70%); }
.dunkel .arbeit { background: rgba(16, 26, 38, 0.95); border-color: rgba(124, 196, 245, 0.22); color: #dce6f2; box-shadow: none; }
.dunkel .arbeit .d-kopf, .dunkel .arbeit .d-fuss { border-color: rgba(124, 196, 245, 0.18); }
.dunkel .arbeit .d-kopf h3 { color: #fff; }
.dunkel .arbeit .d-kopf .k-nr { color: #7cc4f5; }
.dunkel .arbeit .d-hinweis, .dunkel .ifeld-hilfe { color: #a9b8c9; }
.dunkel .ifeld > label, .dunkel .ifeld > .ifeld-name { color: #fff; }
.dunkel .ifeld input[type="text"], .dunkel .ifeld input[type="email"], .dunkel .ifeld textarea { background: #0c131c; color: #fff; border-color: rgba(124, 196, 245, 0.3); }
.dunkel .chip { background: transparent; color: #dce6f2; border-color: rgba(124, 196, 245, 0.35); }
.dunkel .chip[aria-pressed="true"] { background: #1f74ad; border-color: #47a3e1; color: #fff; }
.dunkel .pdf-wahl { background: transparent; border-color: rgba(124, 196, 245, 0.35); color: #a9b8c9; }
.dunkel .pdf-datei { color: #fff; }
.dunkel .liste-punkte span { background: rgba(71, 163, 225, 0.18); color: #fff; }
.dunkel .zustimmung { color: #c4d1de; }
.dunkel .bedingungen { color: #a9b8c9; }
.dunkel .bedingungen summary { color: #7cc4f5; }
.dunkel .knopf-leise { color: #a9b8c9; }
.dunkel .board-leiste { background: rgba(16, 26, 38, 0.9); border-color: rgba(124, 196, 245, 0.22); }
.dunkel .board-leiste p { color: #c4d1de; }
.dunkel .board-rechts { border: 1px solid rgba(124, 196, 245, 0.2); border-radius: 22px; background: rgba(16, 26, 38, 0.9); padding: 14px; height: 780px; overflow: auto; }
.dunkel .board-rechts svg { width: 100%; height: auto; display: block; }
.dunkel .board-rechts svg text { font-family: var(--schrift); }
.dunkel .reiter { display: flex; gap: 4px; padding-bottom: 8px; }
.dunkel .reiter .knopf-leise { padding: 8px 14px; }
.dunkel .reiter .knopf-leise[aria-pressed="true"] { color: #fff; background: rgba(124, 196, 245, 0.12); }
.dunkel .board-rechts .briefing { background: transparent; border-color: rgba(124, 196, 245, 0.2); }
.dunkel .board-rechts .briefing dt, .dunkel .board-rechts .briefing .leer, .dunkel .board-rechts .briefing-kopf small { color: #8ea3b8; }
.dunkel .board-rechts .briefing dd { color: #fff; }
.dunkel .board-rechts .briefing-kopf { color: #7cc4f5; }
@media (max-width: 1020px) { .dunkel .board-rechts { height: auto; } }
.labor-block h2 { margin-bottom: 20px; }

/* ===========================================================================
   VIERTE RUNDE (26.09.2026)
   =========================================================================== */

/* Hilfesatz so groß wie der Hinweis darüber. Vorher schrumpfte die Schrift
   im zweiten Absatz („Textgröße schrumpft“). */
.ifeld > label, .ifeld > .ifeld-name { font-size: 17px; }
.ifeld-hilfe { font-size: 17px; line-height: 1.55; margin: -2px 0 12px; }
.ifeld-tipp, .ifeld-zaehler { font-size: 14.5px; color: var(--text-still); margin: 6px 0 0; }
.ifeld-zaehler { color: var(--signal-rot); }
.dunkel .ifeld-tipp { color: #8ea3b8; }
.d-meldung { margin: 0; padding: 0 26px; }
.d-meldung:empty { display: none; }

/* Kacheltexte trennen mit Bindestrich statt mitten im Wort zu brechen
   („händis / ch“). Die Seite ist lang="de", der Browser trennt deutsch. */
.kachel .k-inhalt, .kachel .k-titel { overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }

/* --- Ampel und Weiche in einer Zeile ------------------------------------
   „Ampel wieder einkürzen und dort abfragen“: links die Ampel, rechts die
   Frage nach der Auftragsart. */
.weiche-zeile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: stretch; margin: 30px 0 18px; }
@media (max-width: 1020px) { .weiche-zeile { grid-template-columns: 1fr; } }
.weiche-zeile .kapazitaet { margin: 0; border-radius: 22px; align-items: center; }
.weiche { border: 1px solid var(--linie); border-radius: 22px; background: var(--flaeche); padding: 16px 18px; }
.weiche-frage { font-size: 13.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--akzent); margin: 0 0 10px 4px; }
.weiche-knoepfe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 620px) { .weiche-knoepfe { grid-template-columns: 1fr; } }
.weiche-knopf {
  font: inherit; text-align: left; cursor: pointer; padding: 12px 14px; border-radius: 14px;
  border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--tinte);
  display: flex; flex-direction: column; gap: 3px; transition: border-color var(--takt), background var(--takt);
}
.weiche-knopf b { font-weight: 500; font-size: 17px; }
.weiche-knopf small { font-size: 14px; color: var(--text-leise); line-height: 1.35; }
.weiche-knopf:hover { border-color: var(--akzent); }
.weiche-knopf[aria-checked="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.weiche-knopf[aria-checked="true"] small { color: #dbeaf6; }

.weiche-info { margin: 0 0 22px; }
.weiche-text { color: var(--text-leise); font-size: 17px; margin: 10px 4px 0; }
table.vergleich { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px;
  border: 1px solid var(--linie); border-radius: 18px; overflow: hidden; background: var(--flaeche); }
table.vergleich th, table.vergleich td { padding: 9px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--linie); line-height: 1.4; }
table.vergleich tr:first-child th { border-top: 0; font-size: 13.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-still); }
table.vergleich th { font-weight: 500; color: var(--tinte); width: 22%; }
table.vergleich td { color: var(--text-still); width: 39%; }
table.vergleich .an { color: var(--tinte); background: var(--akzent-hauch); }
table.vergleich tr:first-child th.an { color: var(--akzent); }

.dunkel .weiche { background: rgba(16, 26, 38, 0.9); border-color: rgba(124, 196, 245, 0.22); }
.dunkel .weiche-frage { color: #7cc4f5; }
.dunkel .weiche-knopf { background: transparent; border-color: rgba(124, 196, 245, 0.3); color: #fff; }
.dunkel .weiche-knopf small { color: #a9b8c9; }
.dunkel .weiche-knopf[aria-checked="true"] { background: #1f74ad; border-color: #47a3e1; }
.dunkel .weiche-text { color: #a9b8c9; }
.dunkel table.vergleich { background: rgba(16, 26, 38, 0.9); border-color: rgba(124, 196, 245, 0.22); }
.dunkel table.vergleich th, .dunkel table.vergleich td { border-color: rgba(124, 196, 245, 0.14); }
.dunkel table.vergleich th { color: #fff; }
.dunkel table.vergleich td { color: #8ea3b8; }
.dunkel table.vergleich .an { color: #fff; background: rgba(31, 116, 173, 0.28); }
.dunkel table.vergleich tr:first-child th { color: #8ea3b8; }
.dunkel table.vergleich tr:first-child th.an { color: #7cc4f5; }

/* Der Dank nach dem Absenden, dort wo geschrieben wurde */
.dank { padding: 34px 30px; }
.dank h3 { font-size: 1.8rem; font-weight: 300; margin-bottom: 12px; }
.dank p { color: var(--text-leise); font-size: 17.5px; margin-bottom: 8px; }
.dank .kennung { font-weight: 500; color: var(--tinte); }
.dunkel .dank h3, .dunkel .dank .kennung { color: #fff; }
.dunkel .dank p { color: #c4d1de; }

/* --- C3 auf dunklem Grund, mit den Kacheln von C3 -----------------------
   „Können wir die dunkle Färbung, insbesondere den Hintergrund wie bei C2,
   mal bekommen?“ Hintergrund, Reifegrad, Weiche und Leiste wie C2; die
   Kacheln behalten ihre Farben (hell, angefangen, dunkel mit grünem
   „Fertig“), die dunklen bekommen einen hellen Rand gegen den dunklen
   Grund. Die Arbeitsfläche bleibt hell. */
.dunkel .board-c3 .kachel { background: var(--flaeche); color: var(--tinte); border-color: var(--flaeche); }
.dunkel .board-c3 .kachel .k-nr { color: var(--akzent); }
.dunkel .board-c3 .kachel .k-inhalt { color: var(--text-leise); }
.dunkel .board-c3 .kachel .k-stand { border-color: var(--linie-stark); color: var(--text-still); }
.dunkel .board-c3 .kachel .k-stand.pflicht { border-color: var(--akzent); color: var(--akzent); }
.dunkel .board-c3 .kachel.halb { background: linear-gradient(160deg, #ffffff 55%, rgba(71, 163, 225, 0.2)); }
.dunkel .board-c3 .kachel.voll { background: #121c28; color: #fff; border-color: rgba(124, 196, 245, 0.45); }
.dunkel .board-c3 .kachel.voll .k-nr { color: #7cc4f5; }
.dunkel .board-c3 .kachel.voll .k-inhalt { color: #c4d1de; }
.dunkel .board-c3 .kachel.voll .k-stand { border-color: #3aa46b; color: #8fe0b3; }
.dunkel .board-c3 .kachel.voll::after { background: radial-gradient(circle, rgba(71, 163, 225, 0.35), transparent 70%); }
.dunkel .board-c3 .arbeit { background: var(--flaeche); color: var(--tinte); border-color: var(--flaeche); }
.dunkel .board-c3 .arbeit .d-kopf, .dunkel .board-c3 .arbeit .d-fuss { border-color: var(--linie); }
.dunkel .board-c3 .arbeit .d-kopf h3 { color: var(--tinte); }
.dunkel .board-c3 .arbeit .d-kopf .k-nr { color: var(--akzent); }
.dunkel .board-c3 .arbeit .d-hinweis, .dunkel .board-c3 .ifeld-hilfe { color: var(--text-leise); }
.dunkel .board-c3 .ifeld > label, .dunkel .board-c3 .ifeld > .ifeld-name { color: var(--tinte); }
.dunkel .board-c3 .ifeld input[type="text"], .dunkel .board-c3 .ifeld input[type="email"], .dunkel .board-c3 .ifeld textarea { background: var(--flaeche); color: var(--tinte); border-color: var(--linie-stark); }
.dunkel .board-c3 .chip { background: var(--flaeche); color: var(--tinte); border-color: var(--linie-stark); }
.dunkel .board-c3 .chip[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.dunkel .board-c3 .pdf-wahl { background: var(--flaeche); border-color: var(--linie-stark); color: var(--text-leise); }
.dunkel .board-c3 .pdf-datei { color: var(--tinte); }
.dunkel .board-c3 .liste-punkte span { background: var(--akzent-hauch); color: var(--tinte); }
.dunkel .board-c3 .zustimmung { color: var(--text-leise); }
.dunkel .board-c3 .bedingungen { color: var(--text-leise); }
.dunkel .board-c3 .bedingungen summary { color: var(--akzent); }
.dunkel .board-c3 .knopf-leise { color: var(--text-leise); }
.dunkel .board-c3 .ifeld-tipp { color: var(--text-still); }
.dunkel .board-c3 .dank h3, .dunkel .board-c3 .dank .kennung { color: var(--tinte); }
.dunkel .board-c3 .dank p { color: var(--text-leise); }
.dunkel .board-c3 .kachel.gewaehlt { outline-color: #7cc4f5; }
.werkbahnen canvas { height: 390px; }
@media (max-width: 720px) { .werkbahnen canvas { height: 420px; } }
.board.kompakt .k-inhalt { display: block; white-space: normal; }
.board.kompakt .k-zeile { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weiche-zeile .kapazitaet { flex-wrap: nowrap; }
.dunkel .board-c3 .board-rechts { border: 0; padding: 0; background: none; height: auto; overflow: visible; }
/* Der Verlauf endete durchscheinend und wurde auf dunklem Grund schwarz;
   das „Pflicht“ darauf war kaum zu lesen. Jetzt deckend. */
.dunkel .board-c3 .kachel.halb { background: linear-gradient(160deg, #ffffff 50%, #d6e9f7); }

/* ===========================================================================
   FÜNFTE RUNDE (27.09.2026)
   =========================================================================== */

/* „Schriftqualität schlecht“ in der Vergleichstabelle: halbfette helle
   Schrift auf dunklem Grund franst aus. Jetzt normale Stärke, etwas
   größer, und ein Hauch weniger Weiß. */
table.vergleich th, table.vergleich td { font-size: 16px; }
table.vergleich th { font-weight: 400; }
.dunkel table.vergleich th { color: #e6eef6; }
.dunkel table.vergleich td.an { color: #f2f7fb; }

.weiche-frage { margin-bottom: 2px; }
.weiche-unter { font-size: 15.5px; color: var(--text-leise); margin: 0 0 12px 4px; }
.dunkel .weiche-unter { color: #a9b8c9; }

/* Gesperrtes Brett, bis ein Bereich gewählt ist */
.board.gesperrt .kachel { opacity: 0.45; cursor: not-allowed; }
.board.gesperrt .kachel:hover { transform: none; box-shadow: none; }
.sperre { padding: 40px 30px; }
.sperre-titel { font-size: 1.5rem; font-weight: 300; margin-bottom: 10px; color: var(--tinte); }
.sperre p { color: var(--text-leise); font-size: 17.5px; }
.zustimmung a { color: var(--akzent); }

/* ===========================================================================
   SECHSTE RUNDE (27.09.2026)
   =========================================================================== */

/* „Bitte umbauen, damit es intuitiv wird.“ Drei nummerierte Schritte in
   Lesefolge: 1 die Weiche, jetzt links vor der Ampel, 2 der Satz zum Brett
   direkt darüber, 3 die Leiste mit dem Absenden. Vorher links: 5fr Ampel,
   rechts: 7fr Weiche. */
.weiche-zeile { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.schritt-nr {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%; margin-right: 10px;
  border: 1.5px solid currentColor; font-size: 13.5px; font-weight: 600; letter-spacing: 0;
}
.weiche-frage { display: flex; align-items: center; }
.schritt { display: flex; gap: 0; align-items: flex-start; margin: 8px 4px 18px; transition: opacity var(--takt); }
.schritt .schritt-nr { color: var(--akzent); margin-top: 1px; }
.schritt p { margin: 0; font-size: 17px; color: var(--text-leise); line-height: 1.55; }
.schritt b { font-size: 13.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--akzent); }
.schritt.wartet { opacity: 0.45; }
.dunkel .schritt .schritt-nr, .dunkel .schritt b { color: #7cc4f5; }
.dunkel .schritt p { color: #a9b8c9; }
.board-leiste > .schritt-nr { color: var(--akzent); margin-right: -6px; }
.dunkel .board-leiste > .schritt-nr { color: #7cc4f5; }

/* Pausestufe (27.09.2026): Der Download zeigt die Grobzeichnung auf ihrem
   dunklen Grund. Welcher Text gilt, entscheidet seit Aktion 91 bauen.js
   (Schalter PAUSE); die Seite trägt nur noch die geltende Fassung. */
.mitnahme-bild { background: #0c131c; border-radius: 14px; padding: 6px; margin: 16px 0 18px; }
.mitnahme-bild svg { display: block; width: 100%; height: auto; }
.mitnahme-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.mitnahme-hinweis { font-size: 15.5px; }
.mitnahme-bild svg text { font-family: var(--schrift); }
/* Reiter Zeichnung / Briefing als Text im Download (sechste Runde). In C3
   liegt das Feld hell auf dunklem Grund; der gedrückte Reiter braucht dort
   dunkle Schrift, sonst verschwindet er (.dunkel .reiter setzt Weiß). */
.mitnahme .reiter { display: flex; gap: 4px; margin: 14px 0 0; }
/* „Stärker farblich herausheben“: als Schalter mit Rand, der gewählte in
   der Akzentfarbe. */
.mitnahme .reiter .knopf-leise, .dunkel .board-c3 .mitnahme .reiter .knopf-leise { padding: 8px 16px; border: 1px solid var(--linie-stark); color: var(--tinte); }
.mitnahme .reiter .knopf-leise[aria-pressed="true"], .dunkel .board-c3 .mitnahme .reiter .knopf-leise[aria-pressed="true"] { color: #fff; background: var(--akzent); border-color: var(--akzent); }
.mitnahme-text { max-height: 460px; overflow: auto; margin: 16px 0 18px; padding: 14px 18px; border: 1px solid var(--linie); border-radius: 14px; }
/* Der Download passte mit den Reitern nicht mehr in die feste Höhe (780px)
   der Arbeitsfläche; Reiter und Hinweis wurden abgeschnitten. Das Feld
   wächst jetzt mit, wenn der Download darin steht; sonst scrollt er. */
.arbeit:has(> .mitnahme) { height: auto; min-height: 780px; }
.arbeit > .mitnahme { overflow-y: auto; }
/* Die Werte in der Textansicht waren unsichtbar: .dunkel .board-rechts
   .briefing dd setzt Weiß, und in C3 liegt die Textansicht auf hellem
   Grund (Anhang des Geschäftsführers, 27.09.2026). */
.dunkel .board-c3 .mitnahme-text dd { color: var(--tinte); }
.dunkel .board-c3 .mitnahme-text dt, .dunkel .board-c3 .mitnahme-text .briefing-kopf small { color: var(--text-leise); }
.dunkel .board-c3 .mitnahme-text .briefing-kopf { color: var(--akzent); }

/* SCHMALE SCHIRME (Aktion 91, 27.09.2026). Gefunden bei der Übernahme mit
   einer Prüfung auf seitlichen Überlauf; der Entwurf hatte alle drei Mängel.
   1. Die Regel der sechsten Runde (.weiche-zeile 7fr 5fr, oben) stand nach
      der Regel für schmale Schirme und hob sie auf. Bei 375 px ragten
      Weiche und Ampel 127 px über den Rand.
   2. Die kompakten Kacheln standen auch auf dem Telefon zu dritt, je rund
      100 px breit; „Wettbewerber“ und „Fragestellung“ liefen hinaus.
   3. Die Vergleichstabelle brauchte mit „Datenschutzhinweis“ und
      „Veröffentlichung“ mindestens 432 px. Auf dem Telefon steht die
      Zeilenüberschrift jetzt über ihren beiden Werten.
   4. „Vorheriges Feld“ und „Zum Herunterladen“ standen nebeneinander,
      451 px breit, und zogen die Arbeitsfläche mit. Sie brechen jetzt um. */
@media (max-width: 1020px) {
  .weiche-zeile { grid-template-columns: 1fr; }
  .board-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .board.kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  table.vergleich, table.vergleich tbody { display: block; }
  table.vergleich tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  table.vergleich th, table.vergleich td { width: auto; padding: 8px 12px; }
  table.vergleich tr > th:first-child { grid-column: 1 / -1; padding-bottom: 0; }
  table.vergleich tr:first-child > th:first-child { display: none; }
  table.vergleich tr > th:first-child + td, table.vergleich tr > th:first-child + td + td { border-top: 0; }
  .arbeit .d-fuss { flex-wrap: wrap; }
}

/* DIE KLEINSTEN TELEFONE, 320 px (Aktion 91, 27.09.2026). Gemessen mit
   derselben Prüfung auf Überlauf: Die Karte von roomaya (Zeichen 190 px plus
   Innenabstände) war 304 px breit bei 280 px Platz, die Ampel stand mit
   ihrem gebundenen Datum 321 px breit, die vier Reifestufen brauchten
   264 px, und „Fragestellung“ passte nicht in eine halbe Kachel. */
@media (max-width: 400px) {
  .werk { padding: 24px 20px 26px; }
  .werk .zeichen-feld { padding: 18px; }
  .weiche-zeile .kapazitaet { flex-wrap: wrap; }
  .reife-stufen { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6px; }
  .board.kompakt .k-titel { font-size: 0.95rem; }
  /* „Zeichnung herunterladen“ ist gebunden, 235 px breit; mit 30 px
     Innenabstand je Seite blieben 218 px. */
  .dank { padding: 26px 18px; }
}