/* ============================================================================
   PROJEKT-BÜHNE — 20 % Warnat (der Rahmen), 80 % Projekt (die Bühne)
   Freigabe Jamie 19.08.2026 („80 % Brand-Assets des Projekts, 20 % von mir").

   Der Trick dieser Datei: sie faerbt nicht jedes Element einzeln um, sondern haengt
   INNERHALB der Buehne die Farb-Variablen um, auf denen warnat-pages.css ohnehin
   schon aufbaut. Damit folgen Karten, Chips, Haken, Zahlen und Linien automatisch
   der Marke — und ein neuer Baustein kippt nicht wieder heraus.

   Der Rahmen (Kopfzeile, Zurueck-Leiste, Fusszeile, Schriftgroessen-Raster,
   Abschluss-Knopf) steht AUSSERHALB von .buehne und bleibt auf jeder Projektseite
   pixelgleich. Die Grenze dazwischen ist die Markenkante: eine 3-px-Linie, keine
   Zone — oberhalb Warnat, unterhalb das Projekt.
   ============================================================================ */

/* --- Rahmen: Zurueck-Leiste ------------------------------------------------ */
.rahmen-leiste{border-bottom:1px solid var(--line);background:rgba(11,13,18,.55)}
.rahmen-leiste .wrap{display:flex;align-items:center;gap:16px;min-height:42px}
.rahmen-leiste .zurueck{margin-bottom:0}
.rahmen-marke{margin-left:auto;font-family:'Space Grotesk','Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#5f6b82;white-space:nowrap}
@media(max-width:680px){ .rahmen-marke{display:none} }

/* --- Die Uebergabe --------------------------------------------------------- */
.marken-kante{height:3px;background:var(--kante,linear-gradient(90deg,#5B8CFF,#8E7BFF))}

/* --- Die Buehne ------------------------------------------------------------ */
/* Deckt das Warnat-Feld ab: sonst scheinen dessen dunkle Verlaeufe durch eine
   helle Projektflaeche durch. */
.buehne{position:relative;z-index:1}
.buehne section:last-of-type{padding-bottom:96px}

/* Die nachgezeichneten Oberflaechen (Handy, Browser-Fenster, Chat) sind DUNKLE
   Geraete — sie gehoeren zur Bildsprache und kippen NICHT mit der Buehne. Ohne diese
   Zeile erben sie auf hellen Buehnen die dunkle Textfarbe und stehen dunkel auf
   dunkel: die Stempel-Uhr und die Bot-Blase waren unlesbar (19.08.2026). Gleiche
   Fehlerklasse wie der verschwundene Ghost-Knopf am 26.07.
   .zahl b bleibt ausgenommen — Kennzahlen stehen auf der Buehne, nicht im Geraet. */
.buehne .phone,
.buehne .shot{color:#E8ECF4}

/* Der Abschluss-Knopf holt zurueck in den Rahmen — er bleibt IMMER Warnat-Blau,
   egal welche Marke die Buehne traegt. */
.buehne .weiter .btn-primary{background:#5B8CFF;color:#0B0D12;border-color:transparent}
.buehne .weiter .btn-primary:hover{background:#73a0ff}


/* ===========================================================================
   CLOCKI — helle, sachliche Flaeche. Bei Clocki traegt die FLAECHE die Marke,
   nicht die Schrift: das Raster bleibt das von Warnat, nur Grund und Blau kippen.
   =========================================================================== */
body.b-clocki{--kante:linear-gradient(90deg,#2563EB,#4F46E5)}
body.b-clocki .buehne{
  --accent:#2563EB; --accent-2:#4F46E5; --accent-ink:#FFFFFF;
  --text-invert:#0B0D12; --text-invert-soft:#55607A;
  --text:#0B0D12; --text-soft:#55607A;
  --line:#E2E8F3; --paper:#F3F6FC; --paper-2:#FFFFFF; --paper-line:#E2E8F3;
  background:#FFFFFF; color:#0B0D12;
}
body.b-clocki .buehne .karte{background:#FFFFFF;border-color:#E2E8F3;box-shadow:0 1px 2px rgba(15,23,42,.04)}
body.b-clocki .buehne .karte:hover{border-color:rgba(37,99,235,.45)}
body.b-clocki .buehne .recht div,
body.b-clocki .buehne .gegen > div,
body.b-clocki .buehne .tok{background:#FFFFFF;border-color:#E2E8F3}
body.b-clocki .buehne .recht b,
body.b-clocki .buehne .tok b{color:#0B0D12}
body.b-clocki .buehne .schritt .nr{border-color:rgba(37,99,235,.35);color:#2563EB;background:rgba(37,99,235,.08)}
body.b-clocki .buehne .chip.an{border-color:rgba(37,99,235,.45);color:#1D4ED8;background:rgba(37,99,235,.06)}
body.b-clocki .buehne .btn-ghost{color:#0B0D12;border-color:#D8E0EE}
body.b-clocki .buehne .btn-ghost:hover{border-color:#2563EB;color:#1D4ED8}
body.b-clocki .buehne .hinweis{color:#8A94A8}
/* Sektionswechsel: statt hell-auf-dunkel jetzt weiss gegen kuehles Papier. */
body.b-clocki .buehne .hell{background:#F3F6FC;color:#0B0D12}
body.b-clocki .buehne .hell .karte{background:#FFFFFF}


/* ===========================================================================
   LEVEL 7 — Schwarz als Buehne, Teal als Signal, fette Versalien.
   Palette wie auf der Seite selbst dokumentiert: Charcoal #1C1C1C, Teal #04FFF7,
   Creme #F0E6D0. Hier wechselt auch die SCHRIFT, nicht nur die Flaeche.
   =========================================================================== */
body.b-level7{--kante:linear-gradient(90deg,#04FFF7 0%,#04FFF7 72%,#F0E6D0 100%)}
body.b-level7 .buehne{
  --accent:#04FFF7; --accent-2:#F0E6D0; --accent-ink:#0A0A0A;
  --text-invert:#F5F1E6; --text-invert-soft:#9C9C96;
  --text:#F5F1E6; --text-soft:#9C9C96;
  --line:#262626; --paper:#141414; --paper-2:#1C1C1C; --paper-line:#2E2E2E;
  background:radial-gradient(80% 60% at 15% 0%,rgba(4,255,247,.07),transparent 60%),#0A0A0A;
  color:#F5F1E6;
}
body.b-level7 .buehne h1,
body.b-level7 .buehne h2{font-family:'Montserrat','Space Grotesk',sans-serif;font-weight:800;
  text-transform:uppercase;letter-spacing:-.005em}
body.b-level7 .buehne h3{font-family:'Montserrat','Space Grotesk',sans-serif;font-weight:700}
body.b-level7 .buehne .eyebrow{font-family:'Montserrat',sans-serif;font-weight:700;color:#04FFF7}
/* Der Verlauf lief ins Abgedunkelte — Level 7 fuehrt IMMER das grelle Neon
   (Jamie 20.08.: "ueberall auf der webseite"). */
body.b-level7 .buehne .grad{background:linear-gradient(90deg,#5CFFFB,#04FFF7);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.b-level7 .buehne .karte,
body.b-level7 .buehne .recht div,
body.b-level7 .buehne .gegen > div,
body.b-level7 .buehne .tok{background:#141414;border-color:#262626}
body.b-level7 .buehne .karte:hover{border-color:rgba(4,255,247,.45)}
body.b-level7 .buehne .zahl b{color:#04FFF7;font-family:'Montserrat','Space Grotesk',sans-serif;
  font-weight:800;text-transform:uppercase;font-size:22px;letter-spacing:.01em}
body.b-level7 .buehne .chip.an{border-color:rgba(4,255,247,.5);color:#04FFF7;background:rgba(4,255,247,.07)}
body.b-level7 .buehne .schritt .nr{border-color:rgba(4,255,247,.45);color:#04FFF7;background:rgba(4,255,247,.1)}
body.b-level7 .buehne .btn-ghost{color:#F5F1E6;border-color:#2E2E2E}
body.b-level7 .buehne .btn-ghost:hover{border-color:#04FFF7;color:#04FFF7}
/* „Hell" bleibt bei Level 7 dunkel — Schwarz IST die Buehne. Der Wechsel passiert
   ueber die Flaechentiefe, nicht ueber hell/dunkel. Ohne diese Regeln stuende
   dunkler Text auf dunklem Grund (Fehlerklasse vom 26.07.). */
body.b-level7 .buehne .hell{background:#141414;color:#F5F1E6}
body.b-level7 .buehne .hell h2,
body.b-level7 .buehne .hell h3{color:#F5F1E6}
body.b-level7 .buehne .hell p,
body.b-level7 .buehne .hell .lead,
body.b-level7 .buehne .hell .haken li,
body.b-level7 .buehne .hell .zahl span{color:#9C9C96}
body.b-level7 .buehne .hell .karte,
body.b-level7 .buehne .hell .tok{background:#1C1C1C;border-color:#2E2E2E}
body.b-level7 .buehne .hell .tok b{color:#F5F1E6}
body.b-level7 .buehne .hell .tok span{color:#9C9C96}
body.b-level7 .buehne .hell .chip{border-color:#2E2E2E;color:#9C9C96}
body.b-level7 .buehne .hell .zahl b{color:#F0E6D0}
body.b-level7 .buehne .hell .btn-ghost{color:#F5F1E6;border-color:#2E2E2E}
body.b-level7 .buehne .hell canvas.wf-hell{display:none}


/* ===========================================================================
   WARNAT BOOKING — die Blaupause (angelegt fuer projekt-warnat-booking.html).
   Das Produkt hat mit Absicht keine eigene Gaeste-Marke: jede Kundenflaeche
   traegt die Farben des Hauses, das sie einsetzt (buchungssystem/web fuehrt die
   Marken-Tokens des Venues; admin/ und pos/ laufen im Warnat-Aura). Eine Buehne
   „in seiner Marke" gaebe es also nur gelogen — die Buehne zeigt stattdessen den
   ZUSTAND: technisches Blau auf Millimeterraster, wie ein Bauplan. Die Kante ist
   deshalb GESTRICHELT: dieselbe Grammatik wie bei den anderen Projekten, nur als
   „im Bau". Cyan (#38BDF8) statt Warnat-Blau, damit die Buehne neben Clocki
   (Blau→Indigo) und KI (Blau→Violett→Cyan) als eigene Welt lesbar bleibt.
   =========================================================================== */
body.b-booking{--kante:repeating-linear-gradient(90deg,#38BDF8 0 14px,rgba(56,189,248,.12) 14px 24px)}
body.b-booking .buehne{
  --accent:#38BDF8; --accent-2:#7DD3FC; --accent-ink:#06263F;
  --text-invert:#E9F0FB; --text-invert-soft:#93A5C4;
  --text:#E9F0FB; --text-soft:#93A5C4;
  --line:#1E3358; --paper:#0E1D3A; --paper-2:#13264B; --paper-line:#24395F;
  color:#E9F0FB;
  background:
    radial-gradient(70% 50% at 12% 0%,rgba(56,189,248,.10),transparent 60%),
    repeating-linear-gradient(0deg,rgba(125,211,252,.05) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(125,211,252,.05) 0 1px,transparent 1px 26px),
    #0A1730;
}
body.b-booking .buehne .grad{background:linear-gradient(90deg,#7DD3FC,#38BDF8);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* Aura faerbt Vorzeilen Warnat-Blau (`body.aura .eyebrow`) — auf der Blaupause
   gehoert die Vorzeile der Buehne. Gleiche Falle wie beim Level-7-Ausschnitt. */
body.b-booking .buehne .eyebrow{color:#7DD3FC}
body.b-booking .buehne .karte,
body.b-booking .buehne .gegen > div,
body.b-booking .buehne .recht div,
body.b-booking .buehne .tok{background:#0E1D3A;border-color:#24395F}
body.b-booking .buehne .karte:hover{border-color:rgba(56,189,248,.45)}
body.b-booking .buehne .zahl b{color:#7DD3FC}
/* Aura macht neutrale Chips milchig-hell — auf dunkler Buehne wieder zurueckholen
   (dieselbe Korrektur, die Level 7 brauchte). */
body.b-booking .buehne .chip{background:transparent;border-color:#24395F;color:#93A5C4}
body.b-booking .buehne .chip.an{border-color:rgba(56,189,248,.5);color:#7DD3FC;background:rgba(56,189,248,.08)}
body.b-booking .buehne .schritt .nr{border-color:rgba(56,189,248,.45);color:#7DD3FC;background:rgba(56,189,248,.1)}
body.b-booking .buehne .btn-ghost{color:#E9F0FB;border-color:#2A4066;background:transparent}
body.b-booking .buehne .btn-ghost:hover{border-color:#38BDF8;color:#7DD3FC}
body.b-booking .buehne .hinweis{color:#6F82A4}
body.b-booking .buehne .haken li::before{--accent:#38BDF8;
  background-color:rgba(56,189,248,.12);border-color:rgba(56,189,248,.45)}
/* „Hell" bleibt auf der Blaupause eine tiefere Flaeche, kein Farbsprung —
   dasselbe Muster wie bei Level 7, sonst stuende dunkler Text auf dunklem Grund. */
body.b-booking .buehne .hell{background:#0E1D3A;color:#E9F0FB}
body.b-booking .buehne .hell h2,
body.b-booking .buehne .hell h3{color:#E9F0FB}
body.b-booking .buehne .hell p,
body.b-booking .buehne .hell .lead,
body.b-booking .buehne .hell .haken li,
body.b-booking .buehne .hell .zahl span{color:#93A5C4}
body.b-booking .buehne .hell .karte,
body.b-booking .buehne .hell .tok{background:#13264B;border-color:#24395F}
body.b-booking .buehne .hell .chip{border-color:#24395F;color:#93A5C4}
body.b-booking .buehne .hell .btn-ghost{color:#E9F0FB;border-color:#2A4066}
body.b-booking .buehne .hell canvas.wf-hell{display:none}


/* ===========================================================================
   WARNAT KI — die Sprache der Console: heller Aura-Grund, Glasflaechen,
   Verlauf Blau → Violett → Cyan. (Jamie: „in die Richtung des Designs in der
   Console gehen".)
   =========================================================================== */
body.b-ki{--kante:linear-gradient(90deg,#3B82F6,#8B5CF6 55%,#22D3EE)}
body.b-ki .buehne{
  --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,.34); --paper:#E7ECF6; --paper-2:#FFFFFF; --paper-line:rgba(148,163,184,.3);
  color:#0F172A;
  background:
    radial-gradient(58% 46% at 10% 0%,rgba(59,130,246,.22),transparent 62%),
    radial-gradient(52% 42% at 90% 10%,rgba(139,92,246,.20),transparent 64%),
    radial-gradient(50% 38% at 62% 96%,rgba(34,211,238,.18),transparent 62%),
    #EEF2F9;
}
/* Liquid Glass: durchscheinende Flaeche, heller Rand oben, weicher Schatten. */
body.b-ki .buehne .karte,
body.b-ki .buehne .gegen > div,
body.b-ki .buehne .recht div,
body.b-ki .buehne .tok{
  background:rgba(255,255,255,.66);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.b-ki .buehne .karte:hover{border-color:rgba(139,92,246,.5)}
body.b-ki .buehne .schritt .nr{border-color:rgba(139,92,246,.35);color:#7C3AED;background:rgba(139,92,246,.1)}
body.b-ki .buehne .chip.an{border-color:rgba(59,130,246,.45);color:#2563EB;background:rgba(59,130,246,.07)}
body.b-ki .buehne .chip{background:rgba(255,255,255,.55)}
body.b-ki .buehne .btn-ghost{color:#0F172A;border-color:rgba(148,163,184,.45);background:rgba(255,255,255,.5)}
body.b-ki .buehne .btn-ghost:hover{border-color:#8B5CF6;color:#7C3AED}
body.b-ki .buehne .grad{background:linear-gradient(90deg,#3B82F6,#8B5CF6 55%,#22D3EE);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.b-ki .buehne .hinweis{color:#7C8598}
/* Der Sektionswechsel ist hier kein Farbsprung, sondern eine zweite Glasebene. */
body.b-ki .buehne .hell{background:rgba(255,255,255,.42);color:#0F172A;
  border-top:1px solid rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.7)}
body.b-ki .buehne .hell .karte{background:rgba(255,255,255,.78)}


/* ---------------------------------------------------------------------------
   Haken-Aufzaehlung: die Striche im Kreis laufen schon ueber var(--accent) mit,
   Fuellung und Rand waren aber fest auf Warnat-Blau verdrahtet — die Kreise
   blieben auf jeder Buehne blau. Hier nachgezogen.
   --------------------------------------------------------------------------- */
body.b-clocki .buehne .haken li::before{background-color:rgba(37,99,235,.12);border-color:rgba(37,99,235,.45)}
body.b-level7 .buehne .haken li::before{background-color:rgba(4,255,247,.12);border-color:rgba(4,255,247,.45)}
body.b-ki     .buehne .haken li::before{background-color:rgba(139,92,246,.12);border-color:rgba(139,92,246,.45)}
body.b-ki     .buehne .haken li::before{--accent:#8B5CF6}


/* ===========================================================================
   UEBERSICHT (projekte.html) — der Rahmen bleibt, die Marke klopft nur an.
   Die Uebersicht ist KEINE Buehne: sie gehoert dem Rahmen und bleibt dunkel im
   Warnat-Look. Trotzdem soll man beim Scrollen merken, dass gleich drei
   verschiedene Welten kommen. Jeder Block bekommt darum genau so viel Marke,
   wie ein Vorgeschmack braucht: dieselbe Kante, mit der auf der Detailseite die
   Buehne beginnt — hier nach rechts auslaufend, weil sie hier nichts uebergibt,
   sondern nur ankuendigt — und die Stellen, die ohnehin Akzentfarbe tragen.

   Warum hier und nicht im <style> von projekte.html: so stehen die drei
   Paletten an EINER Stelle. Aendert sich ein Blau, aendert es sich auf
   Uebersicht und Buehne gleichzeitig.

   --akzent-hell ist keine Geschmacksfrage, sondern Pflicht: auf der Buehne
   traegt die Leitfarbe FLAECHEN, hier traegt sie SCHRIFT auf dunklem Grund —
   und #2563EB auf #0B0D12 ist unlesbar. Deshalb die aufgehellte Zwillingsfarbe.

   Alles haengt an .marke, nicht an .projekt: .projekt ist auf den Detailseiten
   als reines Zwei-Spalten-Raster wiederverwendet, und dort ist --kante gesetzt.
   Ohne diese Trennung zoege sich mitten durch jede Buehne eine fremde Linie.
   =========================================================================== */
.projekt.marke{position:relative;
  background:radial-gradient(58% 120% at 0% 0%,var(--schimmer),transparent 68%)}
/* Die Glut unter der Kante ist keine Spielerei, sondern ein Ausgleich: Clockis
   Leitfarbe ist die dunkelste der drei und verschwand als 3-px-Linie auf dem
   dunklen Grund beinahe. Die drei Kanten sind darum so eingestellt, dass sie
   beim Scrollen gleich stark rufen — nicht so, dass sie gleich hell sind. */
.projekt.marke::before{content:'';position:absolute;top:-1px;left:0;right:0;height:3px;
  background:var(--kante);box-shadow:0 0 14px var(--kante-glut)}
.projekt.marke .chip.an{border-color:var(--akzent-rand);color:var(--akzent-hell)}
.projekt.marke .btn-ghost{border-color:var(--akzent-rand)}
.projekt.marke .btn-ghost:hover{border-color:var(--akzent-hell);color:var(--akzent-hell)}

.projekt.m-clocki{
  /* Startet auf der aufgehellten Zwillingsfarbe und faellt erst dann in die
     Leitfarbe: rein aus #2563EB gebaut war die Linie auf dem dunklen Feld kaum
     zu sehen — sie soll die naechste Welt ankuendigen, nicht sich verstecken. */
  --kante:linear-gradient(90deg,#8FB2FF,#2563EB 26%,#4F46E5 62%,rgba(79,70,229,0) 96%);
  --kante-glut:rgba(37,99,235,.60); --schimmer:rgba(37,99,235,.11);
  --akzent-hell:#8FB2FF; --akzent-rand:rgba(79,70,229,.42)}

.projekt.m-ki{
  --kante:linear-gradient(90deg,#3B82F6,#8B5CF6 38%,#22D3EE 64%,rgba(34,211,238,0) 94%);
  --kante-glut:rgba(139,92,246,.34); --schimmer:rgba(139,92,246,.11);
  --akzent-hell:#BFA9FF; --akzent-rand:rgba(139,92,246,.45)}

/* Level 7 ohne Verlauf ins Violette: Teal und Creme, sonst nichts. */
.projekt.m-level7{
  --kante:linear-gradient(90deg,#04FFF7,#04FFF7 30%,#F0E6D0 58%,rgba(240,230,208,0) 92%);
  --kante-glut:rgba(4,255,247,.22); --schimmer:rgba(4,255,247,.07);
  --akzent-hell:#5FF8F2; --akzent-rand:rgba(4,255,247,.38)}

/* Warnat Booking: die Kante ist gestrichelt — das Projekt ist im Bau, und die
   Uebersicht soll das schon an der Linie erzaehlen, bevor jemand liest. */
.projekt.m-booking{
  --kante:repeating-linear-gradient(90deg,#38BDF8 0 12px,rgba(56,189,248,0) 12px 22px);
  --kante-glut:rgba(56,189,248,.35); --schimmer:rgba(56,189,248,.10);
  --akzent-hell:#7DD3FC; --akzent-rand:rgba(56,189,248,.42)}


/* ===========================================================================
   AURA — was sich aendert, wenn der RAHMEN hell ist (body.aura)
   Angelegt 19.08.2026 (Jamie: „ich will dieses dunkle ueberall raus haben …
   lieber hell und dafuer so aura wie in der Console").

   Alles hier haengt an body.aura und ist damit fuer Seiten ohne das Thema
   wirkungslos. Die Regeln, die eine Buehne betreffen, sind zusaetzlich auf ihre
   Marke geschrieben: die Uebersicht und die beiden Fallstudien Clocki und KI
   sollten nichts mitentscheiden, was auf der Level-7-Buehne passiert.

   Der Kern des Problems: die Uebersichts-Palette weiter oben ist fuer DUNKLEN
   Grund gebaut. --akzent-hell ist die aufgehellte Zwillingsfarbe, weil #2563EB
   auf #0B0D12 unlesbar war. Auf hellem Grund kippt genau das ins Gegenteil:
   #8FB2FF auf #EEF2F9 ist ein Hauch, kein Akzent. Also wird die Zwillingsfarbe
   hier zurueckgedreht auf die TIEFE Leitfarbe — dieselbe Ueberlegung, nur
   andersherum.
   =========================================================================== */

/* --- Uebersicht: die drei Paletten auf hellem Grund ------------------------ */
body.aura .projekt.m-clocki{
  /* Ohne den aufgehellten Anlauf: der war nur noetig, damit die Linie auf dem
     dunklen Feld ueberhaupt ankam. Auf Weiss traegt die Leitfarbe selbst. */
  --kante:linear-gradient(90deg,#2563EB,#4F46E5 46%,rgba(79,70,229,0) 94%);
  --kante-glut:rgba(37,99,235,.30); --schimmer:rgba(37,99,235,.10);
  --akzent-hell:#1D4ED8; --akzent-rand:rgba(37,99,235,.45); --akzent-fuell:rgba(37,99,235,.07)}

body.aura .projekt.m-ki{
  --kante:linear-gradient(90deg,#3B82F6,#8B5CF6 38%,#22D3EE 64%,rgba(34,211,238,0) 94%);
  --kante-glut:rgba(139,92,246,.26); --schimmer:rgba(139,92,246,.10);
  --akzent-hell:#7C3AED; --akzent-rand:rgba(139,92,246,.5); --akzent-fuell:rgba(139,92,246,.07)}

/* Level 7 verliert auf hellem Grund beide Signalfarben: Teal #04FFF7 und Creme
   #F0E6D0 sind BEIDE heller als das Papier. Die Marke bleibt Teal, nur eine
   Stufe tiefer angesetzt — Creme faellt hier weg, sie hat auf Weiss keine
   Aussage. Auf der Detailseite selbst bleibt alles wie es ist: dort ist
   Schwarz die Buehne. */
body.aura .projekt.m-level7{
  --kante:linear-gradient(90deg,#0B7F7A,#06BDB7 44%,rgba(4,255,247,0) 92%);
  --kante-glut:rgba(6,189,183,.26); --schimmer:rgba(6,189,183,.09);
  --akzent-hell:#0B7F7A; --akzent-rand:rgba(11,127,122,.45); --akzent-fuell:rgba(6,189,183,.08)}

/* Booking auf hellem Grund: die Striche bleiben, nur eine Stufe tiefer —
   #38BDF8 traegt auf #EEF2F9 keine Linie, #0284C7 schon. */
body.aura .projekt.m-booking{
  --kante:repeating-linear-gradient(90deg,#0284C7 0 12px,rgba(2,132,199,0) 12px 22px);
  --kante-glut:rgba(14,165,233,.26); --schimmer:rgba(14,165,233,.09);
  --akzent-hell:#0369A1; --akzent-rand:rgba(2,132,199,.45); --akzent-fuell:rgba(14,165,233,.08)}

/* Die Fuellung der aktiven Chips kam bisher aus dem Thema und war fuer alle drei
   Bloecke dasselbe Blau — neben Teal und Violett fiel das auf. */
body.aura .projekt.marke .chip.an{background:var(--akzent-fuell)}

/* --- Rahmen: der Abschluss-Knopf auf den Projektseiten ---------------------
   Er holt zurueck in den Rahmen und traegt deshalb IMMER Warnat — nur ist
   Warnat im hellen Thema nicht mehr das flache Blau mit dunkler Schrift,
   sondern der Verlauf mit weisser. Sonst steht ein Knopf aus der alten Welt
   unter einer Seite aus der neuen. */
body.aura.b-clocki .buehne .weiter .btn-primary,
body.aura.b-ki     .buehne .weiter .btn-primary{background:linear-gradient(135deg,#3B82F6,#7C5CF6);
  color:#fff;box-shadow:0 8px 22px rgba(59,130,246,.30)}
body.aura.b-clocki .buehne .weiter .btn-primary:hover,
body.aura.b-ki     .buehne .weiter .btn-primary:hover{background:linear-gradient(135deg,#5B9BFF,#8B6CFF)}

/* --- Was das Thema der Buehne wegnimmt, wenn beide Ebenen zusammenkommen ----
   warnat-aura.css setzt fuer .grad und die Haken-Kreise FESTE Aura-Farben —
   sinnvoll, solange die ganze Seite Warnat ist. Innerhalb einer Buehne ist es
   falsch: die Clocki-Ueberschrift trug damit Blau-Violett-Cyan, also die Farben
   von Warnat KI, und die Haken-Haekchen blieben violett auf blauem Kreis.

   Warum je Marke angeschrieben und nicht einmal ueber `body.aura .buehne`:
   eine allgemeine Regel haette am Ende der Datei auch die Marken ueberstimmt,
   die ihren Verlauf weiter oben ausdruecklich selbst setzen. Der Preis ist eine
   Zeile pro Marke, der Gewinn ist, dass keine Buehne von hier aus umgefaerbt
   wird, die es nicht braucht. */
body.aura.b-clocki .buehne .grad{background:linear-gradient(90deg,#2563EB,#4F46E5);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.aura.b-clocki .buehne .haken li::before{--accent:#2563EB}