/* ============================================================================
   THEMA „AURA" — die helle Console-Sprache für ganze Seiten
   Angelegt 19.08.2026 (Jamie: „das Design der Console finde ich auch für die ganze
   Webseite schöner als dieses extrem dunkle").

   Bewusst als eigenes Thema und nicht als Einmal-Umbau der Chatbot-Seite: es haengt
   dieselben Variablen um, auf denen warnat-pages.css aufbaut. Eine weitere Seite
   umzustellen ist damit zwei Zeilen — Datei einbinden, class="aura" an den body —
   und keine Neugestaltung.

   Anders als projekt-buehne.css faerbt das hier die GANZE Seite, also auch Kopfzeile
   und Fusszeile. Ausgenommen bleiben die nachgezeichneten Oberflaechen (Chat-Fenster,
   Konsole, Handy): das sind dunkle Geraete und damit Bildsprache, kein Untergrund.
   ============================================================================ */

body.aura{
  --accent:#3B82F6; --accent-2:#8B5CF6; --accent-ink:#FFFFFF;
  --text-invert:#0F172A; --text-invert-soft:#5A6478;
  --text:#0F172A; --text-soft:#5A6478;
  --line:rgba(148,163,184,.32);
  --paper:#E7ECF6; --paper-2:#FFFFFF; --paper-line:rgba(148,163,184,.28);
  --ink:#EEF2F9; --ink-2:#FFFFFF; --ink-3:#FFFFFF;
  color:#0F172A;
  background:#EEF2F9;
}

/* --- Die Aura ----------------------------------------------------------------
   Nachgebaut nach der KI-Console (console/src/index.css). Entscheidend ist NICHT
   die Farbe, sondern der Aufbau: eine EIGENE Ebene, die 30 % ueber den Bildschirm
   hinausragt, damit die Mittelpunkte der Farbwolken ausserhalb liegen und innen nur
   ihr kraeftiger Teil sichtbar wird. Als background am body (erster Versuch,
   19.08.2026) sah man praktisch nichts — Jamie: „Man sieht die Null."
   Die Deckkraft liegt bewusst bei 0,6 bis 0,8: auf Weiss verschluckt der Grund
   schwaechere Werte vollstaendig. Inhalte sitzen darueber auf Glas und bleiben lesbar.
   ----------------------------------------------------------------------------- */
body.aura::before{
  content:'';position:fixed;inset:-30%;z-index:0;pointer-events:none;
  background:
    radial-gradient(44% 36% at 12% 2%,rgba(59,130,246,.72),transparent 62%),
    radial-gradient(42% 34% at 90% 8%,rgba(139,92,246,.66),transparent 62%),
    radial-gradient(50% 42% at 74% 98%,rgba(34,211,238,.66),transparent 64%),
    radial-gradient(44% 38% at 20% 94%,rgba(37,99,235,.62),transparent 64%),
    radial-gradient(54% 46% at 50% 50%,rgba(99,102,241,.46),transparent 72%);
  animation:aura-drift 22s ease-in-out infinite alternate, aura-farbe 30s linear infinite;
  will-change:transform,filter;
}
/* Zweite, gegenlaeufige Wolke — sie gibt der Flaeche Tiefe, statt sie flach zu tuenchen. */
body.aura::after{
  content:'';position:fixed;inset:-30%;z-index:0;pointer-events:none;
  background:
    radial-gradient(36% 32% at 82% 60%,rgba(217,70,239,.42),transparent 72%),
    radial-gradient(32% 28% at 8% 46%,rgba(56,189,248,.44),transparent 72%);
  animation:aura-drift2 30s ease-in-out infinite alternate, aura-farbe 30s linear infinite reverse;
  will-change:transform,filter;
}
@keyframes aura-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(2.5%,-2%,0) scale(1.06)}}
@keyframes aura-drift2{from{transform:translate3d(0,0,0) scale(1.04)}to{transform:translate3d(-3%,2.5%,0) scale(1)}}
@keyframes aura-farbe{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
/* Wer Bewegung abbestellt hat, bekommt dieselbe Flaeche ohne Wandern. */
@media(prefers-reduced-motion:reduce){
  body.aura::before,body.aura::after{animation:none}
}
/* Inhalte muessen ueber der Aura liegen. warnat-pages.css setzt das fuer header/section/
   footer schon; die Seiten ohne diese Datei brauchen es trotzdem.
   ACHTUNG: Hier stand `> *:not(#warnat-field)`. Eine ID im :not() zaehlt voll zur
   Spezifitaet — die Regel schlug damit `.nav{position:sticky}` und setzte die Kopfzeile
   auf `relative`. Ergebnis: Sie scrollte auf JEDER Seite weg (gefunden 20.08.2026 an
   einem Ankersprung, bei dem die Leiste verschwand). Darum jetzt ohne :not, und das
   Kleben wird danach ausdruecklich wiederhergestellt. */
body.aura > *{position:relative;z-index:1}
body.aura > #warnat-field{position:fixed;z-index:0}
body.aura > header.nav,
body.aura header.nav{position:sticky;top:0;z-index:50}

/* Sprungziele duerfen nicht unter der klebenden Kopfzeile landen (69 px hoch).
   ACHTUNG: Abschnitte bringen ihre Luft schon selbst mit — `section{padding:96px 0}`.
   Mit zusaetzlichen 92 px Sprungabstand landete die Ueberschrift 119 px unter der
   Kopfzeile: die "riesige Luecke", die Jamie am 20.08. am Sprung auf #leistungen sah.
   Darum bekommen Abschnitte keinen eigenen Abstand mehr — ihr Innenabstand traegt ihn.
   Artikel und Div-Ziele haben dieses Polster nicht und behalten die 92 px. */
:where(body.aura) section[id]{scroll-margin-top:0}
:where(body.aura) article[id],
:where(body.aura) div[id]{scroll-margin-top:92px}

/* Das gezeichnete Feld ist fuer dunklen Grund gebaut (dunkle Verlaeufe, helle Linien).
   Auf hellem Grund wird daraus ein grauer Schleier — die Aura-Verlaeufe oben ersetzen es. */
body.aura #warnat-field{display:none}
body.aura canvas.wf-hell{display:none}

/* --- Kopfzeile: Glas statt schwarzem Balken --- */
body.aura .nav{background:rgba(255,255,255,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.9);box-shadow:0 1px 24px rgba(15,23,42,.06)}
body.aura .nav-links{color:#5A6478}
body.aura .nav-links a:hover{color:#0F172A}
body.aura .brand .mark{background:linear-gradient(135deg,#3B82F6,#8B5CF6);color:#fff}
/* NUR das Unter-Label, nicht jede Span in der Marke. Die alte Fassung `.brand span`
   traf auch das Signet-Zeichen und den Namens-Wrapper — auf Seiten, die dort Spans
   schachteln (Startseite, 404), stand der Markenname grau. Zweimal einzeln geheilt,
   bevor es hier ankam. */
body.aura .brand b + span{color:#7C8598}
body.aura .nav-cta{background:linear-gradient(135deg,#3B82F6,#7C5CF6);color:#fff;
  box-shadow:0 6px 18px rgba(59,130,246,.32)}

/* --- Flaechen: Liquid Glass --- */
body.aura .karte{background:rgba(255,255,255,.68);border-color:rgba(255,255,255,.85);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 10px 30px rgba(15,23,42,.07),inset 0 1px 0 rgba(255,255,255,.9)}
body.aura .karte:hover{border-color:rgba(139,92,246,.5)}
body.aura .chip{background:rgba(255,255,255,.55);border-color:rgba(148,163,184,.35);color:#5A6478}
body.aura .chip.an{border-color:rgba(59,130,246,.45);color:#2563EB;background:rgba(59,130,246,.07)}

/* --- Schrift und Akzente --- */
body.aura .grad{background:linear-gradient(90deg,#3B82F6,#8B5CF6 55%,#22D3EE);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.aura .eyebrow{color:#3B82F6}
body.aura .hinweis{color:#7C8598}

/* --- Knoepfe --- */
body.aura .btn-primary{background:linear-gradient(135deg,#3B82F6,#7C5CF6);color:#fff;
  box-shadow:0 8px 22px rgba(59,130,246,.30)}
body.aura .btn-primary:hover{background:linear-gradient(135deg,#5B9BFF,#8B6CFF)}
body.aura .btn-ghost{color:#0F172A;border-color:rgba(148,163,184,.45);background:rgba(255,255,255,.55)}
body.aura .btn-ghost:hover{border-color:#8B5CF6;color:#7C3AED}

/* --- Haken --- */
body.aura .haken li::before{background-color:rgba(139,92,246,.12);border-color:rgba(139,92,246,.45);
  --accent:#8B5CF6}

/* --- Sektionswechsel: kein Farbsprung, eine zweite Glasebene --- */
body.aura .hell{background:rgba(255,255,255,.42);color:#0F172A;
  border-top:1px solid rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.75)}
body.aura .hell .karte{background:rgba(255,255,255,.8)}

/* --- Fusszeile --- */
body.aura footer{border-top:1px solid rgba(148,163,184,.3);color:#5A6478;
  background:rgba(255,255,255,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
body.aura footer a:hover{color:#0F172A}

/* --- Zurueck-Zeile und Rahmen-Streifen (falls die Seite ihn hat) --- */
body.aura .zurueck{color:#5A6478}
body.aura .zurueck:hover{color:#0F172A}
body.aura .rahmen-leiste{background:rgba(255,255,255,.55);border-bottom-color:rgba(148,163,184,.3)}
body.aura .rahmen-marke{color:#8894A8}

/* --- Nachgezeichnete Oberflaechen bleiben dunkle Geraete --------------------
   Ohne diese Zeile erben Chat-Fenster, Konsole und Handy die helle Textfarbe und
   stehen hell auf dunkel. Gleiche Fehlerklasse wie der verschwundene Ghost-Knopf
   (26.07.) und die unlesbare Stempel-Uhr (19.08.). */
body.aura .fenster,
body.aura .konsole,
body.aura .shot,
body.aura .phone{color:#E8ECF4;border-color:rgba(15,23,42,.18)}
body.aura .fenster .f-kopf,
body.aura .konsole .k-leiste,
body.aura .konsole .k-nav,
body.aura .fenster .f-fuss,
body.aura .shot .bar{border-color:rgba(255,255,255,.08)}


/* ---------------------------------------------------------------------------
   Nachtraege aus dem Umbau der ganzen Webseite (19.08.2026)
   --------------------------------------------------------------------------- */

/* Auf der zweiten Glasebene verschwindet der weisse Kartenrand — die Karte haengt dann
   nur noch am Schatten und wirkt randlos. Musste in chatbot.html und projekte.html
   einzeln geheilt werden, bevor es hier stand. */
body.aura .hell .karte{border-color:rgba(148,163,184,.28)}

/* Die vom dunklen Entwurf kommenden Seiten benutzen `.light` fuer den hellen Abschnitt,
   nicht `.hell`. Ohne Gegenstueck bleibt dort der weisse Fleck aus der alten Welt stehen.
   `!important`, weil die Altregel es traegt — sonst greift das hier nicht. */
body.aura .light{background:linear-gradient(180deg,rgba(255,255,255,.52),rgba(255,255,255,.34))!important;
  color:#0F172A!important;
  border-top:1px solid rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.75)}
body.aura .light .karte{border-color:rgba(148,163,184,.28)}