/* =================================================================
   UXOVIA · HERO
   Zweispaltig: links die Aussage, rechts der anonyme Schnellcheck.
   Der Wasser-Hintergrund bleibt und laeuft hinter beiden Spalten durch.
   ================================================================= */

#ux-hero-content {
  position: relative; z-index: 3;
  display: grid;
  /* Links etwas mehr Platz: dort steht die Ueberschrift, die den Satz in
     wenigen Zeilen halten soll. Rechts genuegt die Breite der Karte. */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  width: 100%; max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ─────────────────── Linke Spalte ─────────────────── */
.hero-text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); min-width: 0; }
.hero-text > * { margin: 0; }
/* Rechts sitzt der Schnellcheck auf einer dichten Karte, links stand der Text
   bis zum 21.08.2026 ungedaempft auf dem Wasser — und zwar genau dort, wo es
   seine hellsten Stellen hat. Der Lesegrund gibt der Spalte denselben ruhigen
   Untergrund, ohne dafuer eine zweite Flaeche zu behaupten: er laeuft nach
   aussen auf null aus und ist als Kante nirgends zu sehen.
   Der Kasten greift bewusst ueber die Spalte hinaus, sonst endete die Daempfung
   an der Schriftkante statt im Wasser. Nach links laeuft er bis hinter den
   Bildschirmrand: endete er am Satzspiegel, stuende dort eine senkrechte Kante
   im Wasser, gemessen ein Sprung von Helligkeit 17 auf 9 ueber vier Pixel.
   Der Hero schneidet den Ueberstand per overflow ab. */
.hero-text::before {
  content: "";
  position: absolute;
  inset: calc(var(--s-6) * -1) calc(var(--s-7) * -1) calc(var(--s-6) * -1) -100vw;
  z-index: -1;
  pointer-events: none;
  background: var(--gradient-lesegrund);
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: var(--w-medium);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
  min-width: 0;
}
/* Der Akzent sitzt auf dem letzten Teil der Aussage: „sinnvoll ist" ist die
   Pointe des Satzes, nicht das Thema davor. */
.hero-h1 em {
  font-style: normal;
  /* Derselbe Verlauf wie bei den Sektionsueberschriften (--gradient-text):
     aus dem Weiss des uebrigen Satzes heraus nach Violett. Der fruehere
     Verlauf startete in Cyan und setzte damit einen zweiten Farbton, der
     sonst nirgends in der Typografie vorkommt. */
  background: var(--gradient-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-h1 em { color: var(--kobalt-hero); -webkit-text-fill-color: currentColor; background: none; }
}

/* Weiss wie die Ueberschrift und eine Stufe kleiner: der Satz gehoert zur
   Ueberschrift, er erklaert sie. Als grauer Fliesstext las er sich wie ein
   Nachsatz. Bewusst KEIN h2: er benennt keinen Abschnitt, der darunter
   folgte — die Gliederung der Seite bekaeme einen Titel ohne Inhalt. */
.hero-sub {
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text);
  /* Kuerzere Zeilen: der Absatz teilt sich die Hoehe mit dem Kurzcheck
     rechts daneben, und kurze Zeilen lesen sich ohnehin leichter. */
  max-width: 29rem;
  text-wrap: pretty;
}

/* ── Die vier Felder ── */
/* Eingerahmt statt nur mit linkem Strich: der Block ist die Antwort auf die
   Ueberschrift und traegt vier Begriffe plus einen Satz. Als offene Spalte vor
   dem bewegten Wassergrund zerfiel er in vier lose Zeilen. Die Flaeche haelt
   ihn zusammen und hebt den Text vom Grund ab. */
.hero-felder {
  display: flex; flex-direction: column; gap: 0.7rem;
  /* width: 100% gegen das Schrumpfen auf den Inhalt: die Spalte richtet ihre
     Kinder linksbuendig aus, ohne die Angabe endete der Rahmen mitten unter
     dem Satz darueber. */
  width: 100%; max-width: 29rem; min-width: 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.hero-felder-label {
  font-family: var(--font-mono); font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--text);
}
/* Die vier Begriffe stehen als Chips, nicht als Textzeile mit Trennpunkten.
   Als Zeile brachen sie 3+1 um und „Organisation" stand allein unten; ausserdem
   sahen vier gleich gesetzte Begriffe wie Fliesstext aus, obwohl sie der Grund
   sind, warum der Besucher weiterliest. Aufgebaut auf .tag/.tag-sm/.tag-brand
   aus components.css, damit hier kein zweites Chip-Bauteil entsteht.
   Bewusst OHNE :hover: die Chips sind Text, nichts ist klickbar. */
/* Zwei feste Spalten statt Umbruch nach Platz. Frei umbrechend ergeben die
   vier Chips in der 29rem breiten Spalte immer 3+1, und „Organisation" steht
   allein unten — dieselbe Waise, die schon die fruehere Textzeile hatte.
   Die Chips fuellen ihre Zelle nicht, sie stehen linksbuendig darin. */
.hero-felder-liste {
  display: grid; grid-template-columns: auto auto;
  justify-content: start; justify-items: start; gap: 0.5rem 1.6rem;
}
@media (max-width: 400px) {
  .hero-felder-liste { grid-template-columns: auto; }
}
/* Ohne Chip-Huelle, seit der Block selbst eingerahmt ist: acht kleine Rahmen
   in einem grossen ergaben zwei Ebenen, wo eine reicht. Was die Chips geloest
   haben, loest jetzt die Flaeche — die vier Begriffe stehen als Gruppe und
   nicht als Fliesstext. Das feste Zweierraster bleibt, siehe oben. */
.hero-felder-liste span {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--t-small); line-height: 1.4;
  color: var(--text);
  white-space: nowrap;
}
/* Der Punkt ersetzt den frueheren Trennpunkt: er sitzt im Chip statt zwischen
   den Begriffen und kann deshalb nie als erstes Zeichen einer neuen Zeile
   stehen. */
.hero-felder-liste span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-text); flex: none;
}
.hero-felder-satz { font-size: var(--t-body); line-height: var(--lh-body); color: var(--text); }

/* Verweist auf die Karte daneben und gehoert deshalb naeher an sie als an die
   vier Felder darueber. Bis zum 21.08.2026 stand hier ein ganzer Satz in
   Fliesstextgroesse: „Drei davon beantworten Sie in 60 Sekunden." Er las sich
   wie eine weitere Aussage, obwohl er ein Wegweiser ist. Jetzt in derselben
   Optik wie .hero-felder-label darueber, nur in Grau statt in Markenfarbe —
   zwei blaue Eyebrows untereinander waeren zwei Anfaenge statt einem Weg.
   Die Farbe steckt stattdessen im Pfeil, der den Blick weiterzieht. */
.hero-bruecke {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: var(--t-small);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  line-height: var(--lh-tight); color: var(--text);
}
.hero-bruecke-pfeil {
  width: 17px; height: 17px; flex: none;
  color: var(--brand-text);
}
/* Bei 14px und 0,18em Laufweite braucht die Zeile 287px. Unter 380px bleiben
   nach dem Seitenrand nur rund 280px: sie braeche dann um und der Pfeil
   stuende neben einem zweizeiligen Text. Groessere Schrift traegt ohnehin
   weniger Laufweite. */
@media (max-width: 380px) {
  .hero-bruecke { letter-spacing: 0.1em; gap: 0.5rem; }
}
/* Einspaltig steht die Karte nicht mehr rechts, sondern darunter (order: 1
   weiter unten). Ein Pfeil nach rechts zeigte dort auf den Seitenrand. */
@media (max-width: 900px) {
  .hero-bruecke-pfeil { transform: rotate(90deg); }
}

/* ─────────────────── Rechte Spalte ───────────────────
   Der Schnellcheck, auf einen Farbschein gesetzt. Bis zum 13.08.2026 stand
   hier eine Ansicht des Angebots-Backoffices; sie ragte ueber den Satzspiegel
   hinaus und wurde vom Sektionsrand angeschnitten. Die Karte bleibt im
   Satzspiegel: an ihrem Rand stehen Knoepfe, ein angeschnittener Knopf waere
   ein Fehler und kein Bildausschnitt.
   Bis zum 21.08.2026 lag unter dem Schein zusaetzlich ein Linienraster
   (.hero-gitter). Entfernt, siehe Kommentar an der Stelle in index.html. */
.hero-buehne { position: relative; min-width: 0; }

/* Farbschein hinter dem Interface, in den Markenfarben statt in Neon. */
.hero-schein {
  position: absolute; inset: 4% -4% 8%; z-index: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(0, 85, 254, 0.32), rgba(124, 92, 191, 0.22) 55%, rgba(0, 200, 238, 0.26));
  filter: blur(58px);
  opacity: 0.7;
}

/* ─────────────────── Die Karte des Kurzchecks ───────────────────
   Nach Michaels Fassung (ideen/michaels tool/Hero Selbstcheck daniel.dc.html):
   drei Zustaende in einer Karte, Start und Ergebnis mittig, die Frage
   linksbuendig. Farben und Abstaende kommen hier aus den Tokens, in der
   Vorlage stehen sie als feste Werte im Markup.

   Die Mindesthoehe haelt die Karte ruhig. Ohne sie schrumpft und waechst der
   halbe Hero bei jeder Antwort, weil die Ansichten unterschiedlich lang
   sind. */
.hero-check {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  min-height: 27rem;
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  border-radius: var(--r-xl);
  border: 1px solid var(--border-strong);
  background: rgba(10, 12, 18, 0.82);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 50px 110px -50px rgba(0, 85, 254, 0.75),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Der neue Inhalt kommt von unten herein, in der Richtung, in die man geht. */
.hc-wechsel {
  display: flex; flex-direction: column; flex: 1; min-width: 0;
  transition: opacity var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.hero-check.ist-wechsel .hc-wechsel { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) {
  .hc-wechsel { transition: none; }
}

.hc-schritt { display: flex; flex-direction: column; gap: var(--s-3); flex: 1; min-width: 0; }
/* Muss sein: das display:flex daneben wuerde hidden sonst aushebeln. */
.hc-schritt[hidden] { display: none; }
/* Start und Ergebnis stehen mittig und ruhen in der Karte, die Frage nicht:
   sie ist eine Aufgabe, und Aufgaben liest man von links. */
.hc-mitte { justify-content: center; align-items: center; text-align: center; }

/* Die Anrede steht ueber allen drei Fragen und faellt im Ergebnis weg. Der
   Abstand nach unten trennt sie von der laufenden Frage, ohne einen Strich. */
.hc-anrede { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--s-5); }
.hc-anrede[hidden] { display: none; }
.hc-untertitel {
  margin: 0; font-size: var(--t-body); line-height: var(--lh-body);
  color: var(--text-2); text-wrap: pretty;
}

.hc-titel {
  margin: 0;
  font-size: var(--t-h3); font-weight: var(--w-medium);
  line-height: 1.18; letter-spacing: -0.025em;
  color: var(--text); text-wrap: balance;
}
.hc-text {
  margin: 0; max-width: 24em;
  font-size: var(--t-body); line-height: var(--lh-body);
  color: var(--text-2); text-wrap: pretty;
}
.hc-fuss { margin: 0; font-size: var(--t-small); color: var(--text-3); }
/* Die Zusage zu den Antworten steht am Fuss der Karte, nicht an den Knoepfen:
   sie gilt fuer den ganzen Check, nicht fuer die letzte Antwort. */
[data-hc-fuss] { margin-top: auto; padding-top: var(--s-4); }
[data-hc-fuss][hidden] { display: none; }

/* ── Fragekarte ── */
.hc-kopf { display: flex; align-items: center; gap: 14px; }
.hc-zaehler {
  font-family: var(--font-mono); font-size: var(--t-eyebrow);
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase;
  color: var(--text-3); flex-shrink: 0;
}
/* Die Linie ueber der Frage: drei Abschnitte, blau bis dahin, wo man steht.
   Erledigte bleiben blau, nur blasser — sonst saehe man nur die Position und
   nicht, wie viel schon liegt. Sie zeigt an, sie bedient nicht: die Nummer
   daneben sagt dasselbe in Worten, deshalb ist die Linie vor Screenreadern
   verborgen. */
.hc-navi { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.hc-navi i {
  display: block; flex: 1; min-width: 0;
  height: 3px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.18);
  transition: background var(--dur) var(--ease-out);
}
.hc-navi i[data-stand="laufend"]  { background: var(--brand); }
.hc-navi i[data-stand="erledigt"] { background: rgba(0, 85, 254, 0.45); }

/* Der Hinweis unter der Frage nimmt ihr die Schaerfe: er sagt, worauf es bei
   der Antwort ankommt, und wovor niemand Sorge haben muss. */
.hc-hinweis {
  margin: 0;
  font-size: var(--t-small); line-height: 1.55;
  color: var(--text-legible); text-wrap: pretty;
}

/* Die Antworten folgen auf Frage und Hinweis, wie in der Vorlage. */
.hc-antworten { display: grid; gap: var(--s-2); }
.hc-antwort {
  width: 100%; padding: 14px 16px;
  text-align: start; font: inherit; font-size: var(--t-body); line-height: 1.45;
  color: var(--text-2); cursor: pointer;
  border-radius: var(--r-md); border: 1px solid var(--border-strong);
  background: transparent;
  transition: border-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
/* Der kleine Versatz nach rechts liest sich als „hier geht es weiter". */
.hc-antwort:hover { border-color: var(--brand); color: var(--text); transform: translateX(3px); }
.hc-antwort:focus-visible { border-color: var(--brand); color: var(--text); }
.hc-antwort:active { transform: translateX(3px) scale(0.995); }
@media (prefers-reduced-motion: reduce) {
  .hc-antwort:hover, .hc-antwort:active { transform: none; }
}

/* Die Frage steht groesser als der Fliesstext: sie ist das, worauf geantwortet
   wird. */
.hc-frage {
  margin: 0;
  font-size: var(--t-body-lg); font-weight: var(--w-medium);
  line-height: 1.35; letter-spacing: -0.02em;
  color: var(--text); text-wrap: pretty;
}

/* Knopf, Aufwandszeile und Rechtshinweis im Ergebnis stehen als ein Block
   zusammen, mit weniger Luft zwischen den beiden Zeilen als zum Knopf. */
.hc-aktion { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.hc-aktion .termin-hinweis { margin-top: calc(var(--s-3) * -0.55); text-align: center; }

/* Im Ergebnis steht der Knopf mittig unter seinem Text; die Fragekarte hat
   keinen. */
.hc-mitte .btn { align-self: center; }

/* ─────────────────── Schmale Fenster ─────────────────── */
@media (max-width: 900px) {
  #ux-hero-content { grid-template-columns: 1fr; gap: var(--s-7); }
  /* Text zuerst: die Aussage traegt, der Check folgt ihr. */
  .hero-buehne { order: 1; }
  .hero-text { order: 0; }
}
/* Der Hero steht im Bestand auf min-height:100vh mit vertikaler Zentrierung.
   Sobald der Inhalt hoeher wird als das Fenster — auf dem Telefon regelmaessig
   — schneidet die Zentrierung oben ab, und die Wortmarke verschwindet hinter
   der Kopfleiste. Auf schmalen Fenstern beginnt der Hero deshalb oben und
   waechst nach unten. Das !important richtet sich gegen den Inline-Style im
   Bestand, nicht gegen eine andere Regel. */
@media (max-width: 900px) {
  #hero {
    align-items: flex-start !important;
    min-height: auto !important;
    padding-block: 7.5rem 3.5rem !important;
  }
}

@media (max-width: 620px) {
  /* Auf dem Telefon traegt die Karte ihre Hoehe selbst: eine feste
     Mindesthoehe liesse unter kurzen Fragen einen leeren Block stehen, der
     dort ueber ein Drittel des Bildschirms einnimmt. */
  .hero-check { min-height: 0; }
}
@media (max-width: 560px) {
  /* „Frage 1 von 3 · Prozessreife" und die Linie nebeneinander lassen der
     Linie hier zu wenig Platz, sie schrumpfte auf wenige Pixel. Untereinander
     behalten beide ihre Aufgabe. */
  .hc-kopf { flex-direction: column; align-items: stretch; gap: 10px; }
  .hc-zaehler { order: -1; }
}

/* ─────────────────── Sternenfeld ueber die ganze Seite ───────────────────
   Fest im Bild statt ueber die Dokumenthoehe gespannt: ein Canvas ueber rund
   12.000 px mal Pixelverhaeltnis laege ueber der Kantengrenze, die Browser
   fuer Canvas zulassen. Der leichte Versatz beim Scrollen (im Skript) laesst
   es trotzdem wie ein durchgehendes Feld wirken. */
#ux-stars-layer {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  /* Oben dichter, nach unten auslaufend — sonst liegt ueber dem Fussbereich
     genauso viel Sternenstaub wie ueber dem Kopfbereich. */
  /* #000 = volle Deckkraft der Maske, keine Farbe. Kein Token einsetzen. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.35) 88%, rgba(0,0,0,0.2) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,0.35) 88%, rgba(0,0,0,0.2) 100%);
}

/* ─────────────────── Hero ohne Wasser ───────────────────
   Am Telefon und bei prefers-reduced-motion laedt die Startseite three.js
   gar nicht erst: 670 KB und eine Renderschleife, die den Hauptthread
   belegt, solange der Hero im Bild ist. Da er die volle Fensterhoehe
   einnimmt, ist das die ganze Zeit. Gemessen am 21.08.2026: Lighthouse
   Mobil 64 Punkte mit, 91 ohne.

   Was der Shader dort beitrug, war ein blaeulicher Schein am unteren Rand
   des Hero. Den setzt diese Regel als Verlauf, ohne ein Byte nachzuladen.
   Die Klasse setzt das Ladeskript in index.html, bevor irgendetwas rendert. */
/* Die drei Ebenen des Hero. Ihre Masse standen bis zum 21.08.2026 als
   style-Attribut im HTML — dort gewinnen sie gegen jede Klasse, weshalb die
   Regel unten den Canvas nicht ausblenden konnte. */
#ux-stars { width: 100%; height: 100%; display: block; }
#ux-water-wrap { position: absolute; inset: 0; z-index: 1; }
#ux-water { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.ohne-wasser #ux-water { display: none; }
.ohne-wasser #ux-water-wrap {
  background:
    radial-gradient(ellipse 150% 62% at 50% 104%, rgba(0, 85, 254, 0.20) 0%, rgba(0, 85, 254, 0.06) 42%, transparent 68%),
    radial-gradient(ellipse 80% 34% at 50% 96%, rgba(0, 200, 238, 0.10) 0%, transparent 60%);
}