@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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}
/* n0ai Editor – Stil "Lumen" wie uix (ui10): Tiefschwarz, Bernsteinlicht, DM Mono, Cormorant-Kursiv */
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url(fonts/cormorant-300i.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dmmono-400.woff2) format("woff2")}
@font-face{font-family:"DM Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dmmono-500.woff2) format("woff2")}
@font-face{font-family:"Syne";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/syne.woff2) format("woff2")}

:root{
  --mono:"DM Mono",ui-monospace,Consolas,monospace;--serif:"Cormorant Garamond",Georgia,serif;--display:"Syne",var(--mono);
  /* dunkel (Standard) */
  --hg:#060608;--fl:rgba(8,8,11,.82);--fest:#12121a;--rand:rgba(255,255,255,.08);--text:#d4cfc8;--warm:#f0e8d8;--leise:#8e8993;
  --akzent:#f5c97a;--akzentTxt:#060608;--akzentHell:rgba(245,201,122,.13);--fill:rgba(255,255,255,.05);
  --schatten:0 18px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);--schein:0 0 24px rgba(245,201,122,.35);
}
:root[data-theme="light"]{
  --hg:#f4efe6;--fl:rgba(247,243,236,.88);--fest:#fffdf9;--rand:rgba(40,30,20,.1);--text:#2a2520;--warm:#1d1914;--leise:#6e655b;
  --akzent:#b5832f;--akzentTxt:#fffdf9;--akzentHell:rgba(181,131,47,.14);--fill:rgba(40,30,20,.05);
  --schatten:0 18px 50px rgba(60,40,10,.14),0 0 0 1px rgba(40,30,20,.08);--schein:0 0 18px rgba(181,131,47,.25);
}
@media (prefers-color-scheme:light){:root:not([data-theme]){
  --hg:#f4efe6;--fl:rgba(247,243,236,.88);--fest:#fffdf9;--rand:rgba(40,30,20,.1);--text:#2a2520;--warm:#1d1914;--leise:#6e655b;
  --akzent:#b5832f;--akzentTxt:#fffdf9;--akzentHell:rgba(181,131,47,.14);--fill:rgba(40,30,20,.05);
  --schatten:0 18px 50px rgba(60,40,10,.14),0 0 0 1px rgba(40,30,20,.08);--schein:0 0 18px rgba(181,131,47,.25)}}

*{box-sizing:border-box}
body{margin:0;height:100vh;background:var(--hg);color:var(--text);font:12.5px var(--mono);letter-spacing:.02em;overflow:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(60% 50% at 50% 0%,var(--akzentHell),transparent 70%)}
button{font:inherit;color:inherit}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.schwebend{position:fixed;z-index:5;background:var(--fl);border-radius:14px;box-shadow:var(--schatten);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ikon{position:relative;width:36px;height:36px;border:0;background:none;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text)}
.ikon:hover{background:var(--fill);color:var(--warm)}
.ikon.aktiv{background:var(--akzent);color:var(--akzentTxt);box-shadow:var(--schein)}
.ikon i{position:absolute;right:3px;bottom:1px;font-size:8px;font-style:normal;opacity:.55}
.trenner{width:1px;height:26px;background:var(--rand);margin:0 6px}

/* oben: Marke + Ardi-Knöpfe */
.oben{top:10px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;padding:6px 6px 6px 14px}
.marke{font:500 13px var(--mono);color:var(--warm);margin-right:6px;white-space:nowrap}
.marke em{font:italic 300 17px var(--serif);color:var(--akzent)}
.haupt{border:0;background:var(--akzent);color:var(--akzentTxt);border-radius:9px;padding:9px 14px;font-weight:500;cursor:pointer;white-space:nowrap;box-shadow:var(--schein)}
.haupt.zweit{background:none;color:var(--akzent);box-shadow:inset 0 0 0 1px var(--akzent)}
.haupt:disabled{opacity:.35;cursor:default;box-shadow:none}

/* unten: Pinsel-Leiste */
.leiste{bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:4px;align-items:center;padding:6px 8px}
.regler{display:flex;flex-direction:column;gap:1px;padding:0 6px;color:var(--leise);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.regler b{font-weight:400}
.regler input{width:96px;accent-color:var(--akzent);margin:2px 0 0}
.regler output{font-size:11px;color:var(--warm);text-transform:none;letter-spacing:0}
.farben{display:flex;gap:5px;padding:0 4px}
.farbe{width:24px;height:24px;border-radius:6px;border:1px solid var(--rand);cursor:pointer}
.farbe[data-f=schwarz]{background:#000}.farbe[data-f=weiss]{background:#fff}
.farbe.an{outline:2px solid var(--akzent);outline-offset:2px}

.tipp{position:fixed;top:50%;left:0;right:0;text-align:center;margin:0;pointer-events:none;font:italic 300 26px var(--serif);color:var(--leise)}

/* Menü */
.menue{position:fixed;top:56px;left:10px;width:290px;background:var(--fest);border-radius:14px;box-shadow:var(--schatten);padding:8px;z-index:6}
.menue[hidden]{display:none}
.eintrag{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:9px;border-radius:8px;cursor:pointer;text-align:left;color:var(--text)}
.eintrag:hover{background:var(--akzentHell);color:var(--warm)}
.eintrag kbd{margin-left:auto;font:11px var(--mono);color:var(--leise)}
.menue hr{border:0;border-top:1px solid var(--rand);margin:6px 0}
.zeile{display:flex;align-items:center;justify-content:space-between;padding:9px}
.umschalter{display:flex;background:var(--fill);border-radius:8px;padding:2px}
.umschalter button{border:0;background:none;border-radius:6px;width:30px;height:26px;cursor:pointer}
.umschalter button.an{background:var(--akzent);color:var(--akzentTxt)}

/* Ebenen */
.ebenen{top:56px;right:10px;width:268px;padding:14px}
.ebenen[hidden]{display:none}
.ebenen h2{margin:0 0 10px;font:italic 300 20px var(--serif);color:var(--warm)}
.ebene{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;padding:8px;border:1px solid var(--rand);border-radius:10px;margin-bottom:6px;cursor:pointer}
.ebene[hidden]{display:none}
.ebene.gewaehlt{border-color:var(--akzent);background:var(--akzentHell)}
.ebene .name{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kette{font-size:10px;opacity:.5}
.vorschau{border-radius:4px;background:repeating-conic-gradient(#444 0 25%,#666 0 50%) 0 0/8px 8px}
.vorschau.aktiv{outline:2px solid var(--akzent);outline-offset:1px}
.auge{width:24px;height:24px;border:0;cursor:pointer;background:none}
.auge::before{content:"👁"}
.auge.aus{opacity:.25}
#maskenTeil{display:flex;flex-direction:column;gap:8px;padding:8px 0 4px}
#maskenTeil[hidden]{display:none}
.deck{width:100%;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--leise);display:flex;gap:8px;align-items:center}
.deck input{flex:1;accent-color:var(--akzent)}
.maskenknoepfe{display:flex;gap:4px;flex-wrap:wrap}
.maskenknoepfe button,.notloesung,.warten button{border:1px solid var(--rand);background:var(--fill);border-radius:7px;padding:5px 8px;font-size:11px;cursor:pointer;color:var(--text)}
.maskenknoepfe button:hover,.notloesung:hover{border-color:var(--akzent)}
.maskenknoepfe button.an{background:var(--akzent);color:var(--akzentTxt)}
.notloesung{display:block;text-align:center;margin-top:6px}
.leer{color:var(--leise);font-size:11px;margin:0}

/* Zoom + Rückgängig unten links */
.unten{bottom:12px;left:10px;display:flex;align-items:center;padding:3px}
.unten2{bottom:12px;left:150px;display:flex;padding:3px}
.zoomwert{border:0;background:none;width:56px;cursor:pointer;color:var(--warm)}

.warten{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9;display:flex;align-items:center;justify-content:center}
.warten[hidden]{display:none}
.warten>div{background:var(--fest);border-radius:14px;padding:22px 26px;max-width:340px;text-align:center;box-shadow:var(--schatten)}

#pinselkreis{position:fixed;z-index:4;pointer-events:none;border-radius:50%;border:1px solid rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(0,0,0,.7);transform:translate(-50%,-50%)}
#pinselkreis::after{content:"";position:absolute;inset:var(--innen,0);border-radius:50%;border:1px dashed rgba(255,255,255,.55)}
#pinselkreis[hidden]{display:none}

#buehne{position:absolute;inset:0;overflow:hidden}
#buehne.ziehen{outline:2px dashed var(--akzent);outline-offset:-14px}
#welt{position:absolute;left:0;top:0;transform-origin:0 0}
canvas#leinwand{display:block;box-shadow:0 24px 70px rgba(0,0,0,.7);background:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%) 0 0/16px 16px;touch-action:none}
canvas#leinwand[hidden]{display:none}

@media (max-width:900px){
  .marke{display:none}
  .leiste{bottom:60px;flex-wrap:wrap;justify-content:center;width:calc(100% - 20px)}
  .regler input{width:70px}
  .ebenen{width:220px}
}

/* rechte Spalte: Ebenen + Info untereinander */
.rechts{position:fixed;z-index:5;top:56px;right:10px;width:268px;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 140px);overflow:auto}
.rechts[hidden]{display:none}
.tafel{position:static;width:auto;background:var(--fl);border-radius:14px;box-shadow:var(--schatten);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.info ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--leise)}
.info kbd{font:10.5px var(--mono);color:var(--warm);background:var(--fill);border:1px solid var(--rand);border-radius:5px;padding:1px 5px}
@media (max-width:900px){.rechts{width:220px}}
.haken{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 14px;font-size:11px;color:var(--leise);cursor:pointer}
.haken input{accent-color:var(--akzent);width:15px;height:15px}

/* Menü- und Ebenen-Knopf: getrennt in den oberen Ecken, größer (Tablet) */
#menueKnopf,#ebenenKnopf{position:fixed;top:10px;width:46px;height:46px;border-radius:12px}
#menueKnopf{left:10px}#ebenenKnopf{right:10px}
#menueKnopf svg,#ebenenKnopf svg{width:22px;height:22px}
.menue{top:66px}.rechts{top:66px}
#buehne{touch-action:none}
/* Pinselgröße am Kreis (auch am Tablet sichtbar) */
#pinselkreis::before{content:attr(data-px);position:absolute;left:50%;bottom:100%;transform:translate(-50%,-6px);font:11px var(--mono);color:#fff;background:rgba(0,0,0,.65);padding:2px 6px;border-radius:5px;white-space:nowrap}

.einst{display:flex;align-items:center;gap:4px}   /* PC: Regler nebeneinander in der Leiste */
/* ---------- Handy (bis 700 px) ---------- */
.nurHandy{display:none}
@media (max-width:700px){
  .nurHandy{display:inline-flex}
  .eintrag.nurHandy{display:flex}
  .oben{top:calc(10px + env(safe-area-inset-top));padding:4px}
  .oben .marke,.oben #ardi,.oben #vollbild{display:none}
  #menueKnopf,#ebenenKnopf{top:calc(10px + env(safe-area-inset-top))}
  .menue{left:10px;right:10px;width:auto}
  .leiste{left:10px;right:auto;transform:none;width:auto;bottom:calc(10px + env(safe-area-inset-bottom));flex-wrap:nowrap;padding:4px}
  .leiste{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--fest)}   /* sonst hängt das Blatt an der Leiste statt am Bildschirm */
  .leiste .ikon{width:44px;height:44px}
  .leiste .ikon i{display:none}
  .einst{display:none}
  .nurPC{display:none}
  .leiste.offen .einst{display:flex;flex-direction:column;gap:14px;position:fixed;left:10px;right:10px;bottom:calc(70px + env(safe-area-inset-bottom));background:var(--fest);border-radius:14px;box-shadow:var(--schatten);padding:14px 16px}
  .leiste.offen #einstKnopf{background:var(--akzentHell);color:var(--akzent)}
  .einst .trenner{display:none}
  .einst .regler input{width:100%}
  .unten2{left:auto;right:10px;bottom:calc(10px + env(safe-area-inset-bottom))}
  .unten2 .ikon{width:44px;height:44px}
  .unten{top:calc(66px + env(safe-area-inset-top));bottom:auto;left:10px;padding:0}
  .unten #zoomMinus,.unten #zoomPlus{display:none}
  .zoomwert{width:auto;padding:4px 10px;font-size:11px}
  .rechts{top:auto;left:0;right:0;bottom:0;width:auto;max-height:65vh;z-index:7;background:var(--fest);border-radius:16px 16px 0 0;box-shadow:var(--schatten);padding:8px 10px calc(10px + env(safe-area-inset-bottom));gap:8px}
  .rechts .tafel{box-shadow:none;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .tipp{font-size:20px;padding:0 24px}
  .warten>div{margin:0 16px}
}

/* Symbole (Lucide) klarer: etwas größer, feinere Linie; Augen + Kette als SVG (22.10.2026) */
.ikon svg{width:20px;height:20px;stroke-width:1.75}
#menueKnopf svg,#ebenenKnopf svg{width:22px;height:22px}
.haupt{display:inline-flex;align-items:center;gap:8px}
.haupt svg{width:16px;height:16px;stroke-width:2}
.haupt.erledigt{background:none;color:var(--akzent);box-shadow:inset 0 0 0 1px var(--rand);opacity:.8}
.haupt.erledigt svg{display:none}
.haupt.erledigt::before{content:"✓"}
.auge{display:inline-flex;align-items:center;justify-content:center;color:var(--text);border-radius:6px}
.auge::before{content:none}
.auge svg{width:17px;height:17px}
.auge:hover{background:var(--fill)}
.auge.aus{opacity:.3}
.kette{display:inline-flex;opacity:.45}
.kette svg{width:12px;height:12px}
.zoomwert{font-variant-numeric:tabular-nums}

/* ---------- Bewegung & Klapp-Info (22.10.2026) ---------- */
:root{--flHandy:rgba(8,8,11,.42);--weich:cubic-bezier(.2,.8,.2,1)}
:root[data-theme="light"]{--flHandy:rgba(247,243,236,.55)}
@media (prefers-color-scheme:light){:root:not([data-theme]){--flHandy:rgba(247,243,236,.55)}}
@keyframes einblenden{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes reinGleiten{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes hochkommen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes blende{from{opacity:0}to{opacity:1}}
canvas#leinwand.rein{animation:einblenden .55s var(--weich)}
.ebene.rein{animation:reinGleiten .45s var(--weich)}
.warten:not([hidden]){animation:blende .25s ease}
.warten:not([hidden])>div{animation:hochkommen .35s var(--weich)}
.tipp{animation:blende .8s ease}

/* Ebenen-Spalte und Menü gleiten statt springen */
.rechts{transition:opacity .28s ease,transform .35s var(--weich),visibility 0s}
.rechts[hidden]{display:flex;opacity:0;transform:translateX(28px);visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .25s ease,visibility 0s .25s}
.menue{transform-origin:top left;transition:opacity .2s ease,transform .25s var(--weich),visibility 0s}
.menue[hidden]{display:block;opacity:0;transform:scale(.96) translateY(-6px);visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .2s ease,visibility 0s .2s}

/* Info ausklappbar: Überschrift ist der Knopf */
.klapp{display:flex;align-items:center;justify-content:space-between;width:100%;border:0;background:none;padding:0;cursor:pointer;font:inherit;color:inherit}
.klapp svg{width:16px;height:16px;stroke-width:2;opacity:.6;transition:transform .3s var(--weich)}
.klapp:hover svg{opacity:1}
.info.zu .klapp svg{transform:rotate(-90deg)}
.klappInhalt{display:grid;grid-template-rows:1fr;transition:grid-template-rows .35s var(--weich),opacity .25s ease}
.klappInhalt>ul{overflow:hidden;min-height:0}
.info.zu .klappInhalt{grid-template-rows:0fr;opacity:0}
.info.zu h2{margin-bottom:0}

/* Tablet/Handy: Leisten durchsichtiger, damit unten kein schwarzer Balken entsteht */
@media (pointer:coarse){
  .schwebend{background:var(--flHandy)}
}
@media (max-width:700px){
  .schwebend,#menueKnopf,#ebenenKnopf{background:var(--flHandy)}
  .leiste{background:none}
  .leiste::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--flHandy);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:-1}   /* Blur am Pseudo-Element, sonst hängt das Einstellungsblatt an der Leiste */
  .leiste.offen .einst{animation:hochkommen .3s var(--weich)}
  .rechts[hidden]{transform:translateY(48px)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Ebenen/Info: Schatten nicht mehr abgeschnitten (keine Ecken mehr), weicher Übergang beim Klappen */
.rechts{top:58px;right:-4px;padding:8px 14px 30px;gap:12px;max-height:calc(100vh - 110px);scrollbar-width:none}
.rechts::-webkit-scrollbar{display:none}
.info h2{transition:margin .35s var(--weich)}
.info{transition:padding .35s var(--weich)}
.info.zu{padding-top:12px;padding-bottom:12px}

/* Untere Leisten am PC halb durchsichtig, beim Drüberfahren voll sichtbar */
@media (hover:hover){
  .leiste,.unten,.unten2{opacity:.5;transition:opacity .3s ease}
  .leiste:hover,.leiste:focus-within,.unten:hover,.unten2:hover{opacity:1}
}
@media (max-width:700px){.rechts{top:auto;left:0;right:0;max-height:65vh;padding:8px 10px calc(10px + env(safe-area-inset-bottom))}}

/* Ebenen/Info: Spalte schneidet nichts mehr ab (das graue Rechteck war der abgeschnittene Schatten) */
.rechts{overflow:visible;max-height:none;padding:0;right:10px;top:66px}
.tafel{box-shadow:0 6px 22px rgba(0,0,0,.28),0 0 0 1px var(--rand)}
:root[data-theme="light"] .tafel{box-shadow:0 6px 20px rgba(60,40,10,.10),0 0 0 1px var(--rand)}
@media (prefers-color-scheme:light){:root:not([data-theme]) .tafel{box-shadow:0 6px 20px rgba(60,40,10,.10),0 0 0 1px var(--rand)}}
@media (max-height:720px) and (min-width:701px){.rechts{max-height:calc(100vh - 80px);overflow-y:auto;padding:0 4px 4px}.tafel{box-shadow:0 0 0 1px var(--rand)}}
@media (max-width:700px){.rechts{top:auto;left:0;right:0;max-height:65vh;overflow-y:auto;padding:8px 10px calc(10px + env(safe-area-inset-bottom))}.rechts .tafel{box-shadow:none}}

/* =====================================================================
   Stile: Lumen (Standard, oben), Klar (wie uix ui7, Apple-Stil), Aurora (wie uix ui8, Nordlicht)
   Jeder Stil setzt nur die Farb-/Schrift-Variablen + wenige eigene Regeln. (22.10.2026)
   ===================================================================== */
.stile button{width:auto;padding:0 10px;font-size:11.5px}
.stilzeile{border-top:1px solid var(--rand);margin-top:4px;padding-top:12px}

/* ---------- Klar: hell zuerst, Systemschrift, Apple-Blau ---------- */
:root[data-stil="klar"]{
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,sans-serif;
  --mono:var(--sans);--serif:var(--sans);--display:var(--sans);
  --hg:#f5f5f7;--fl:rgba(255,255,255,.82);--fest:#fff;--rand:rgba(0,0,0,.08);--text:#1d1d1f;--warm:#1d1d1f;--leise:#6e6e73;
  --akzent:#0071e3;--akzentTxt:#fff;--akzentHell:rgba(0,113,227,.1);--fill:rgba(0,0,0,.045);
  --schatten:0 8px 30px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.08);--schein:none;--flHandy:rgba(255,255,255,.6)}
:root[data-stil="klar"][data-theme="dark"]{
  --hg:#000;--fl:rgba(30,30,32,.8);--fest:#1c1c1e;--rand:rgba(255,255,255,.1);--text:#f5f5f7;--warm:#f5f5f7;--leise:#a1a1a6;
  --akzent:#2997ff;--akzentHell:rgba(41,151,255,.16);--fill:rgba(255,255,255,.07);
  --schatten:0 8px 30px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.1);--flHandy:rgba(30,30,32,.55)}
@media (prefers-color-scheme:dark){:root[data-stil="klar"]:not([data-theme]){
  --hg:#000;--fl:rgba(30,30,32,.8);--fest:#1c1c1e;--rand:rgba(255,255,255,.1);--text:#f5f5f7;--warm:#f5f5f7;--leise:#a1a1a6;
  --akzent:#2997ff;--akzentHell:rgba(41,151,255,.16);--fill:rgba(255,255,255,.07);
  --schatten:0 8px 30px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.1);--flHandy:rgba(30,30,32,.55)}}
[data-stil="klar"] body{letter-spacing:-.01em;font-size:13px;-webkit-font-smoothing:antialiased}
[data-stil="klar"] body::before{display:none}
[data-stil="klar"] .schwebend,[data-stil="klar"] .tafel,[data-stil="klar"] .menue{border-radius:12px;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
[data-stil="klar"] .ikon,[data-stil="klar"] .haupt{border-radius:8px}
[data-stil="klar"] .ikon.aktiv{background:var(--akzent);color:#fff;box-shadow:none}
[data-stil="klar"] .haupt{font-weight:600}
[data-stil="klar"] .regler{text-transform:none;letter-spacing:0;font-size:11px}
[data-stil="klar"] .regler output{font-weight:600;font-variant-numeric:tabular-nums}
[data-stil="klar"] .marke{font-weight:700;letter-spacing:-.02em}
[data-stil="klar"] .marke em{font:500 15px var(--sans);color:var(--leise)}
[data-stil="klar"] .ebenen h2{font:700 15px var(--sans);letter-spacing:-.01em}
[data-stil="klar"] .tipp{font:500 20px var(--sans);letter-spacing:-.02em}
[data-stil="klar"] .deck{text-transform:none;letter-spacing:0;font-size:11.5px}
[data-stil="klar"] .info kbd{font:600 10.5px var(--sans)}
[data-stil="klar"] canvas#leinwand{box-shadow:0 20px 60px rgba(0,0,0,.18)}

/* ---------- Aurora: dunkel zuerst, Nordlicht, Glasinseln, Verlaufs-Akzent ---------- */
:root[data-stil="aurora"]{
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,sans-serif;
  --mono:var(--sans);--serif:var(--sans);--display:var(--sans);
  --akzent:#4f8cff;--akzent2:#a66bff;--verlauf:linear-gradient(120deg,var(--akzent),var(--akzent2));
  --hg:#060609;--fl:rgba(18,18,26,.58);--fest:rgba(20,20,28,.94);--rand:rgba(255,255,255,.09);--text:#f3f4f8;--warm:#fff;--leise:#a3a6b3;
  --akzentTxt:#fff;--akzentHell:rgba(79,140,255,.16);--fill:rgba(255,255,255,.06);
  --schatten:0 20px 60px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.07);
  --schein:0 6px 24px -6px rgba(110,110,255,.6);--flHandy:rgba(18,18,26,.45);--nord:.55}
:root[data-stil="aurora"][data-theme="light"]{
  --akzent:#2f6bff;--akzent2:#8b4dff;
  --hg:#eceef4;--fl:rgba(255,255,255,.66);--fest:rgba(255,255,255,.95);--rand:rgba(20,24,40,.08);--text:#111218;--warm:#111218;--leise:#555a66;
  --akzentHell:rgba(47,107,255,.12);--fill:rgba(20,24,40,.05);
  --schatten:0 10px 40px -12px rgba(30,40,80,.18),inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(20,24,40,.06);
  --schein:0 6px 20px -6px rgba(60,80,255,.45);--flHandy:rgba(255,255,255,.55);--nord:.45}
@media (prefers-color-scheme:light){:root[data-stil="aurora"]:not([data-theme]){
  --akzent:#2f6bff;--akzent2:#8b4dff;
  --hg:#eceef4;--fl:rgba(255,255,255,.66);--fest:rgba(255,255,255,.95);--rand:rgba(20,24,40,.08);--text:#111218;--warm:#111218;--leise:#555a66;
  --akzentHell:rgba(47,107,255,.12);--fill:rgba(20,24,40,.05);
  --schatten:0 10px 40px -12px rgba(30,40,80,.18),inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(20,24,40,.06);
  --schein:0 6px 20px -6px rgba(60,80,255,.45);--flHandy:rgba(255,255,255,.55);--nord:.45}}
[data-stil="aurora"] body{letter-spacing:-.008em;font-size:13px;-webkit-font-smoothing:antialiased}
/* Nordlicht: zwei langsam wandernde Farbwolken hinter allem */
[data-stil="aurora"] body::before,[data-stil="aurora"] body::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(90px);opacity:var(--nord);inset:auto}
[data-stil="aurora"] body::before{width:62vmax;height:62vmax;left:-18vmax;top:-26vmax;background:radial-gradient(closest-side,var(--akzent),transparent);animation:nord1 26s ease-in-out infinite alternate}
[data-stil="aurora"] body::after{width:58vmax;height:58vmax;right:-20vmax;bottom:-28vmax;background:radial-gradient(closest-side,var(--akzent2),transparent);animation:nord2 32s ease-in-out infinite alternate}
@keyframes nord1{to{transform:translate(14vmax,10vmax) scale(1.15)}}
@keyframes nord2{to{transform:translate(-12vmax,-8vmax) scale(1.1)}}
[data-stil="aurora"] .schwebend,[data-stil="aurora"] .tafel,[data-stil="aurora"] .menue{border-radius:20px;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%)}
[data-stil="aurora"] .ikon{border-radius:12px}
[data-stil="aurora"] .ikon.aktiv,[data-stil="aurora"] .haupt:not(.erledigt),[data-stil="aurora"] .umschalter button.an{background:var(--verlauf);color:#fff;box-shadow:var(--schein)}
[data-stil="aurora"] .haupt{border-radius:12px;font-weight:600}
[data-stil="aurora"] .ebene.gewaehlt{border-color:transparent;background:var(--akzentHell);box-shadow:inset 0 0 0 1px var(--akzent)}
[data-stil="aurora"] .regler{text-transform:none;letter-spacing:0;font-size:11px}
[data-stil="aurora"] .regler output{font-weight:600;font-variant-numeric:tabular-nums}
[data-stil="aurora"] .marke{font-weight:700;letter-spacing:-.02em}
[data-stil="aurora"] .marke em{font:600 15px var(--sans);background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-stil="aurora"] .ebenen h2{font:700 15px var(--sans);letter-spacing:-.01em}
[data-stil="aurora"] .tipp{font:600 22px var(--sans);letter-spacing:-.02em;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-stil="aurora"] .deck{text-transform:none;letter-spacing:0;font-size:11.5px}
[data-stil="aurora"] .info kbd{font:600 10.5px var(--sans)}
[data-stil="aurora"] canvas#leinwand{box-shadow:0 30px 90px -10px rgba(0,0,0,.85)}
[data-stil="aurora"] .leiste::before{border-radius:inherit}
/* Handy: Glas-Effekt der Stile nicht an der Leiste selbst (sonst hängt das Einstellungsblatt an der Leiste statt am Bildschirm) */
@media (max-width:700px){[data-stil] .leiste{backdrop-filter:none;-webkit-backdrop-filter:none}}