/* Design „Decide AI" — seit 22.08.2026 das Hauptdesign von gortana.at.

   Diese Datei lädt NACH stil.css und bewegung.css und überschreibt gezielt.
   Sie war als passwortgeschützte Vergleichsvariante entstanden; Robert hat
   sie nach Prüfung als Live-Design gewählt. Die Grundlage (stil.css) bleibt
   unverändert, damit Rückweg und Diff lesbar bleiben.

   Übernommen von der Referenz (styles.refero.design, System "Decide AI"):
     - Ein einziger rationierter Akzent statt fünf Farbtönen
     - Große, eng laufende Grotesk (Inter Tight) für Schlagzeilen
     - Radien binär: 0 (scharf) oder 9999px (Pille)
     - Keine Schatten; Tiefe nur über Flächenkontrast
     - Ghost-Pillen statt gefüllter Knöpfe, Pfeil-Textlinks
     - Silver Haze / Frost statt warmem Papier; Nachtmodus #030303 + Mint

   Eigene Ergänzung: die Netzkugel im Kopfbereich (vorlagen/netzkugel.js).
*/

/* ======================================================================
   Schrift: Inter Tight, selbst gehostet (OFL), als Ersatz für das
   kommerzielle PP Neue Montreal der Referenz. Details in
   vorlagen/schrift/LIZENZ.txt.
   ====================================================================== */
@font-face {
  font-family: "Inter Tight";
  src: url("/schrift/inter-tight-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/schrift/inter-tight-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/schrift/inter-tight-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/schrift/inter-tight-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Schlagzeilenschrift: Inter Tight, Gewicht 500, eng laufend. */
:root {
  --kopf-schrift: "Inter Tight", var(--sans);
  --kopf-gewicht: 500;
  --kopf-versatz: -.032em;
}

/* ======================================================================
   Ein Akzent statt fünf. Alle Nebenfarben der Live-Seite lösen sich in
   die Handlungsfarbe auf - das IST die Decide-AI-Disziplin, nicht nur ihre
   Optik. Weil fast jede Regel im Blatt über diese Token läuft, genügt der
   Tausch an einer Stelle.
   ====================================================================== */
/* Silver Haze und Frost statt der warmen Papierfarbe. Beide Namen stammen
   aus der Referenz und bekommen hier echte Rollen: Frost trägt die Karten,
   Silver Haze die Haarlinien und das abgesetzte Band, die Fläche liegt als
   knapp getönter Frost dazwischen. Reines Weiß auf Weiß gäbe sonst keine
   Staffelung. Text ist Deep Obsidian. */
:root {
  --papier:      #F5F6F8;   /* Frost, eine Spur getönt: die Bühne */
  --papier-tief: #E5E7EB;   /* Silver Haze: abgesetztes Band     */
  --karte:       #FFFFFF;   /* Frost: Karten                     */
  --linie:       #E5E7EB;   /* Silver Haze: Haarlinien           */
  --tinte:       #030303;   /* Deep Obsidian                     */
  --text:        #030303;
  --gedaempft:   #5F6570;

  --handlung: #2A4F42;
  --akzent:   var(--handlung);
  --rost:     var(--handlung);
  --kupfer:   var(--handlung);
  --orange:   var(--handlung);
  --salbei:   color-mix(in srgb, var(--handlung) 22%, var(--papier));
  --nacht:    color-mix(in srgb, var(--handlung) 70%, #0B0F14);
  --primaer:  var(--handlung);

  --rund: 0px;   /* binär: 0 oder Pille (unten explizit) */
}

/* Nachtmodus: werkgetreue Fassung der Referenz. #030303, Mint, weiß
   geflippte Karten. Folgt demselben Dreiteiler wie stil.css selbst
   (prefers-color-scheme, :not([data-theme=light]), [data-theme=dark]),
   damit der bestehende Schalter unverändert funktioniert. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #030303; --papier-tief: #0A0A0A; --karte: #FFFFFF;
    --tinte: #FFFFFF; --text: #FFFFFF; --gedaempft: #9A9A9A;
    --linie: #262626; --nacht: #141414;
    --handlung: #73FFB9; --akzent: #73FFB9; --rost: #73FFB9;
    --kupfer: #73FFB9; --orange: #73FFB9;
    --salbei: color-mix(in srgb, #73FFB9 18%, #030303);
    --primaer: #73FFB9;
    --band-grund: #030303; --kontakt-grund: #0A0A0A; --knopf-schrift: #FFFFFF;
  }
}
:root[data-theme="dark"] {
  --papier: #030303; --papier-tief: #0A0A0A; --karte: #FFFFFF;
  --tinte: #FFFFFF; --text: #FFFFFF; --gedaempft: #9A9A9A;
  --linie: #262626; --nacht: #141414;
  --handlung: #73FFB9; --akzent: #73FFB9; --rost: #73FFB9;
  --kupfer: #73FFB9; --orange: #73FFB9;
  --salbei: color-mix(in srgb, #73FFB9 18%, #030303);
  --primaer: #73FFB9;
  --band-grund: #030303; --kontakt-grund: #0A0A0A; --knopf-schrift: #FFFFFF;
}

/* ======================================================================
   Typografie. Groß, eng laufend, editorial. Nur Eigenschaften angefasst,
   die Größe/Schnitt/Laufweite betreffen - die ch-basierte Zeilenbreite aus
   stil.css bleibt in Kraft, der Umbruch ändert sich also nicht.
   ====================================================================== */
/* Gemessen: In der 604px breiten Bühnenspalte ist "Ich verbinde
   Technologie," bei 48px 544px breit, bei 56px bereits 635px und bricht
   dann auf vier Zeilen um. Vier Zeilen schoben die Signatur unter die
   Bildschirmkante. 3rem (48px) ist damit der größte Grad, der zweizeilig
   bleibt - deshalb die Obergrenze dort und nicht höher. */
.schlagzeile {
  font-family: var(--kopf-schrift); font-weight: var(--kopf-gewicht);
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.04; letter-spacing: var(--kopf-versatz);
  color: var(--text);
  max-width: none;
}
h1:not(.schlagzeile) {
  font-family: var(--kopf-schrift); font-weight: var(--kopf-gewicht);
  font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1; letter-spacing: var(--kopf-versatz);
}
.abschnitt-titel, .band-titel, .kontakt-titel {
  font-family: var(--kopf-schrift); font-weight: var(--kopf-gewicht);
  font-size: clamp(2.2rem, 5.4vw, 4rem); line-height: 1.02; letter-spacing: var(--kopf-versatz);
}
/* Nur der Titel auf hellem Grund bekommt die Textfarbe. Band und
   Kontaktblock stehen auf dunklem Grund und behalten ihr Weiß - ein
   pauschales `color: var(--text)` machte sie unlesbar. */
.abschnitt-titel { color: var(--text); }
.band-titel, .kontakt-titel { color: #fff; }
.zitat {
  font-family: var(--kopf-schrift); font-weight: var(--kopf-gewicht);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -.015em;
}
.zwischentitel {
  font-family: var(--kopf-schrift); font-weight: var(--kopf-gewicht);
  letter-spacing: var(--kopf-versatz);
}
h2:not(.abschnitt-titel):not(.band-titel):not(.kontakt-titel) {
  font-family: var(--kopf-schrift); font-weight: var(--kopf-gewicht);
  letter-spacing: -.015em;
}

/* Kicker/Label bleiben Mono - das entspricht bereits Decide AIs
   "Roboto Mono für Navigation, Zähler, Tags" fast unverändert. Nur die
   Laufweite geht eine Spur weiter, damit der Kontrast zur riesigen
   Schlagzeile stärker trägt. */
.kicker { letter-spacing: .22em; }

/* ======================================================================
   Radien: binär. Karten scharf, Interaktionsflächen als Pille.
   ====================================================================== */
.station-aktuell, .bildansicht, .portraet-gross, .portraet-gross img,
.bildansicht img {
  border-radius: 0;
}
.knopf, .textknopf, .schalter, .schliessen, .portraet-knopf, .portraet {
  border-radius: 9999px;
}
.marke-zeichen svg, .marke-punkt { /* Wortmarke unverändert lassen */ }

/* Keine Schatten - Tiefe kommt nur aus Flächenkontrast. */
.portraet-knopf, .bildansicht img, .schalter, .bildansicht {
  box-shadow: none !important;
}

/* ======================================================================
   Knöpfe: Ghost-Pille statt Füllung, mit Pfeil. Die Referenz verbietet
   ausdrücklich gefüllte, farbige Aktionsknöpfe - der Akzent bleibt damit
   Signal statt Fläche.
   ====================================================================== */
.knopf {
  background: transparent !important; color: var(--text) !important;
  border: 1px solid var(--linie);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.knopf:hover {
  filter: none; border-color: var(--handlung); color: var(--handlung) !important;
  transform: translateY(-1px);
}
.knopf::after { color: var(--handlung); }

.textknopf {
  border-bottom: 0; padding-bottom: 0;
}
.textknopf::after { content: " →"; color: var(--handlung); }

/* ======================================================================
   Schrittbalken statt reiner Klammerziffern. Ergänzt die bestehenden
   [01]/[02]/[03]-Kennungen um das senkrechte Balkenmotiv der Referenz,
   ohne den bereits vorhandenen Inhalt zu entfernen.
   ====================================================================== */
.prinzipien li {
  border-inline-start: 3px solid color-mix(in srgb, var(--handlung) 55%, transparent);
  padding-inline-start: 1.2rem;
}

/* ======================================================================
   Übergangsband: Laufschrift statt Farbstreifen. Ersetzt die vier
   Farbflächen der Fußleiste durch das umlaufende Textband der Referenz.
   Bei reduzierter Bewegung steht der Text still.
   ====================================================================== */
.farbleiste { height: auto; overflow: hidden; background: var(--tinte); }
.farbleiste span { display: none; }
.farbleiste::before {
  content: "TECHNOLOGIE · MARKETING · GESCHÄFT · TECHNOLOGIE · MARKETING · "
           "GESCHÄFT · TECHNOLOGIE · MARKETING · GESCHÄFT · ";
  display: inline-block; white-space: nowrap;
  font-family: var(--kopf-schrift); font-weight: var(--kopf-gewicht);
  font-size: clamp(1.6rem, 5vw, 3.2rem); letter-spacing: -.01em;
  color: var(--papier); padding: .5rem 0;
}
@media (prefers-reduced-motion: no-preference) {
  .farbleiste::before { animation: decide-lauf 26s linear infinite; }
  @keyframes decide-lauf { to { transform: translateX(-50%); } }
}

/* ======================================================================
   Kleinere Aufräumarbeiten.
   ====================================================================== */
/* Das Punktraster im dunklen Band nutzte Kupfer/Rost fest verdrahtet;
   über den Token-Tausch oben folgt es bereits dem einen Akzent. */

@media (max-width: 46rem) {
  .farbleiste::before { font-size: clamp(1.2rem, 6vw, 2rem); }
}

/* ======================================================================
   Akzent auf dunklen Flächen.

   Der eine Akzent der Hellfassung ist Eukalyptus - auf Papier richtig, auf
   dem dunklen Band aber mit 1,95:1 unlesbar und auf dem Kontaktband, das
   selbst Eukalyptus ist, mit 1,0:1 unsichtbar. Die Live-Seite löste das mit
   Orange; hier übernimmt Mint, weil es ohnehin der Akzent der Nachtfassung
   ist. Damit hat die Variante weiterhin genau einen Akzent je Grund, nicht
   zwei nebeneinander.

   Gemessen: Mint auf #14181D = 14,2:1, auf Eukalyptus = 7,3:1.
   ====================================================================== */
.band, .kontakt-block {
  --akzent:   #73FFB9;
  --handlung: #73FFB9;
  --rost:     #73FFB9;
  --kupfer:   #73FFB9;
  --orange:   #73FFB9;
}
.band .ziffer, .band .kicker .strich, .band .strich::after { color: #73FFB9; }
.band .strich, .band .strich::after { background: #73FFB9; }
.prinzipien li {
  border-inline-start-color: color-mix(in srgb, #73FFB9 55%, transparent);
}
.kontakt-wege a:hover { border-color: #73FFB9; }

/* ======================================================================
   Kopfbereich mit Netzkugel (Roberts Auftrag vom 22.08.2026: technologie-
   getrieben auf den ersten Blick).

   Links der Text, rechts die Kugel. Das gerasterte Autoklav-Foto ist aus dem
   Kopf heraus; Quelle und Generator (scripts/halbton.py) bleiben erhalten.
   ====================================================================== */
.buehne-decide {
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-bottom: clamp(1.25rem, 3vw, 2.5rem);
}
.buehne-decide-raster {
  max-width: var(--breit); margin-inline: auto;
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 56.0625rem) {
  .buehne-decide-raster {
    grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .95fr);
  }
}

/* Text: bewusst lesbare Zeilenbreite, kein 19ch-Deckel aus stil.css mehr.
   Die Schlagzeile bekommt den Grad, den die Spalte zweizeilig bis
   dreizeilig trägt - gemessen mit der echten Inter Tight, nicht mit der
   Ersatzschrift. */
.buehne-decide .schlagzeile {
  max-width: none;
  font-size: clamp(2.1rem, 4.3vw, 4.1rem);
  line-height: 1.02;
  margin: 0 0 1.25rem;
}
.buehne-decide .lede { max-width: 32rem; margin: 0 0 1.5rem; }
.buehne-decide .handlungen { margin: 0 0 1.5rem; }
.buehne-decide .signatur { margin: 0; }
.buehne-decide .kicker { margin-bottom: 1.1rem; }

/* Kugel: quadratisch, füllt die rechte Spalte. Auf dem Handy zuerst und
   kompakt, damit die Technik vor dem Text ins Auge fällt, der Text aber
   noch im ersten Bildschirm steht. */
.buehne-decide-netz { display: grid; gap: .9rem; justify-items: center; }
.netzkugel {
  position: relative; inline-size: 100%;
  max-inline-size: 34rem; aspect-ratio: 1;
  color: var(--netz-linie);
  --netz-punkt:  #030303;
  --netz-linie:  #030303;
  --netz-akzent: #2A4F42;
  --netz-ring:   #2A4F42;
  --netz-dunkel: 0;
}
.netzkugel canvas { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }
.netz-ersatz { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: .35; }
.netzkugel[data-aktiv] .netz-ersatz { display: none; }

.netz-legende {
  margin: 0; font-family: var(--mono); font-size: .6875rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gedaempft);
  display: flex; align-items: center; gap: .6rem;
}

@media (max-width: 56rem) {
  /* Am Handy zuerst, aber klein: Gemessen kostete eine 242px-Kugel die
     Knöpfe (811px bei 740px Fensterhöhe). Bei 150px stehen Kugel, Titel,
     Text, Knöpfe und Signatur gemeinsam im ersten Bildschirm. Die Legende
     entfällt hier - sie wiederholt nur die Schlagzeile. */
  .buehne-decide-raster { gap: 1rem; }
  .buehne-decide-netz { order: -1; gap: 0; }
  /* Robert wollte sie am Handy deutlich größer. Gemessen: Bei 58vw bleiben
     die Knöpfe auf allen Geräten ab 360px im ersten Bildschirm; die Signatur
     rutscht auf den kürzesten knapp darunter, das ist vertretbar. */
  .netzkugel { max-inline-size: min(58vw, 14rem); margin-block-end: .4rem; }
  .netz-legende { display: none; }
  .buehne-decide .kicker { margin-bottom: .8rem; }
  .buehne-decide .schlagzeile { font-size: clamp(1.7rem, 7vw, 2.3rem); margin-bottom: 1rem; }
  .buehne-decide .lede { font-size: .9688rem; margin-bottom: 1.1rem; }
  .buehne-decide .handlungen { margin-bottom: 1.1rem; }
}

/* Nachtfassung: weiße Punkte, Mint-Knoten - werkgetreu. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .netzkugel {
    --netz-punkt: #FFFFFF; --netz-linie: #FFFFFF;
    --netz-akzent: #73FFB9; --netz-ring: #73FFB9; --netz-dunkel: 1;
  }
}
:root[data-theme="dark"] .netzkugel {
  --netz-punkt: #FFFFFF; --netz-linie: #FFFFFF;
  --netz-akzent: #73FFB9; --netz-ring: #73FFB9; --netz-dunkel: 1;
}


/* ======================================================================
   Erzwungenes Hell = System-Hell.

   stil.css setzt für `[data-theme="light"]` am Dateiende die alte
   Papierpalette - mit höherer Spezifität als mein `:root`-Block. Die
   Sonne im Schalter lieferte dadurch Beige statt Frost, während die
   Systemeinstellung richtig war (Robert, 22.08.2026). Hier dieselben
   Werte noch einmal auf derselben Spezifität, und zwar nach stil.css.
   ====================================================================== */
:root[data-theme="light"] {
  --papier: #F5F6F8; --papier-tief: #E5E7EB; --karte: #FFFFFF;
  --linie: #E5E7EB; --tinte: #030303; --text: #030303; --gedaempft: #5F6570;
  --handlung: #2A4F42; --akzent: var(--handlung); --rost: var(--handlung);
  --kupfer: var(--handlung); --orange: var(--handlung);
  --salbei: color-mix(in srgb, var(--handlung) 22%, var(--papier));
  --nacht: color-mix(in srgb, var(--handlung) 70%, #0B0F14);
  --primaer: var(--handlung);
  --band-grund: #14181D; --kontakt-grund: var(--handlung); --knopf-schrift: #fff;
}

/* ======================================================================
   Weiße Karten im Nachtmodus brauchen dunkle Schrift.

   Der Kontrastflip (weiße Karte auf #030303) ist Kern des Systems; aber
   innerhalb der Karte galten weiter die Nacht-Token, also weiße Schrift
   auf Weiß - sichtbar bei Palido im Werdegang. Innerhalb der Karte gelten
   deshalb die Hell-Token: Tinte, gedämpftes Grau, Eukalyptus als Akzent
   (Mint auf Weiß hätte 1,6:1 und wäre unlesbar).
   ====================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .station-aktuell,
  :root:not([data-theme="light"]) .portraet-gross,
  :root:not([data-theme="light"]) .bildansicht {
    --text: #030303; --tinte: #030303; --gedaempft: #5F6570; --linie: #E5E7EB;
    --handlung: #2A4F42; --akzent: #2A4F42; --rost: #2A4F42; --orange: #2A4F42;
    --kupfer: #2A4F42; --papier: #FFFFFF; --grund: #FFFFFF;
    color: var(--text);
  }
}
:root[data-theme="dark"] .station-aktuell,
:root[data-theme="dark"] .portraet-gross,
:root[data-theme="dark"] .bildansicht {
  --text: #030303; --tinte: #030303; --gedaempft: #5F6570; --linie: #E5E7EB;
  --handlung: #2A4F42; --akzent: #2A4F42; --rost: #2A4F42; --orange: #2A4F42;
  --kupfer: #2A4F42; --papier: #FFFFFF; --grund: #FFFFFF;
  color: var(--text);
}


/* ======================================================================
   Bild in einer Station des Werdegangs (FACC: das gerasterte Autoklav-Foto).
   Schmal wie der Text, scharfe Ecken, Unterschrift in Mono wie die Kicker.
   ====================================================================== */
.stationsbild { margin: 1.75rem 0 0; max-width: 38rem; }
.stationsbild img { display: block; inline-size: 100%; block-size: auto; border-radius: 0; }
.stationsbild figcaption {
  margin-top: .6rem; font-family: var(--mono); font-size: .6875rem;
  letter-spacing: .06em; color: var(--gedaempft);
}

/* Bilder, die nur in einer Stimmung gezeigt werden (Autoklav bei FACC).
   Derselbe Dreiteiler wie bei allen Farb-Token, damit der Schalter greift.
   Alle Regeln mit `.stationsbild` davor: Die Grundregel `.stationsbild img
   { display: block }` ist sonst spezifischer als `.nur-dunkel` und gewann im
   System-Hell-Zustand - beide Bilder standen untereinander (22.08.2026). */
.stationsbild .nur-dunkel { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stationsbild .nur-hell { display: none; }
  :root:not([data-theme="light"]) .stationsbild .nur-dunkel { display: block; }
}
:root[data-theme="dark"] .stationsbild .nur-hell { display: none; }
:root[data-theme="dark"] .stationsbild .nur-dunkel { display: block; }
:root[data-theme="light"] .stationsbild .nur-hell { display: block; }
:root[data-theme="light"] .stationsbild .nur-dunkel { display: none; }