/* =====================================================================
   Tomy-Kreativ 26 · tomy-ui/theme.css — gemeinsames Design-System
   1:1 übernommen aus Mein-Rezeptbuch-Page (Zwei-Schichten-Tokens:
   Palette je Theme + semantische Ableitung via color-mix), Glas-Cabochon-
   Buttons, Karten, Sheet, Toast, Video-Box, three.js-Hintergrund-Canvas.
   Gilt für ALLE Werkzeuge des Verbunds (Hub, Promptgenerator, Schaufenster,
   WorkFloh). Werkzeug-eigene Stile leben in der jeweiligen index.html.
   ===================================================================== */
/* ===================== Mein Rezeptbuch · Landing — Design System ===================== */
/* Farb-Basis = Palette der echten App (--sand/--parch/--br/--rust/--grn …).
   Die semantischen Variablen (--accent, --bg, --surface …) werden EINMAL aus der
   App-Palette abgeleitet; jedes Theme setzt nur die Palette-Zeile neu. */
:root{
  /* Palette – Standard „Landhaus" (identisch zur App) */
  --sand:#f9f4ec;--sand2:#ede5d8;--parch:#fdfaf5;--ink:#302010;
  --br:#7a5840;--br2:#9e7050;--br3:#c4a07a;--rust:#b85535;--rusts:#f5e4dc;
  --grn:#4e7040;--grns:#e6f0e0;--teal:#36706a;--teals:#e2f0ee;--gold:#a8841e;--golds:#faf4e0;
  /* Semantische Ableitung (gilt für ALLE Themes) */
  --accent:var(--br);--accent-d:var(--br2);--accent2:var(--rust);--accent3:var(--br3);
  --bg:var(--sand);--surface:var(--parch);--surface-2:var(--sand2);
  /* Gemessen 2026-08-03, in ALLEN ACHT Themes einzeln durchgerechnet:
   * bei den alten Werten (60 % / 40 %) blieb der Kontrast unter der Norm —
   * ink-2 lag bei 4,12–5,84 und ink-3 bei 2,37–3,21, verlangt sind 4,5:1.
   * Das war der Grund für die Barrierefreiheits-Punkte (Lighthouse nannte
   * .sub, .foot, .bigbrand, die Fußlinks, .vaultnote, #vaultState, die
   * BALD-Abzeichen und die Karten-Absätze).
   *
   * Nötig wären 63 % für beide. Beide auf 63 % zu setzen hätte aber die
   * Abstufung eingeebnet — ink-3 soll sichtbar leichter sein als ink-2.
   * Darum ink-2 mit Abstand darüber: die drei Stufen bleiben unterscheidbar
   * (voll ≈ 14 : 1, ink-2 ≈ 6,5 : 1, ink-3 ≈ 4,6 : 1) und alle drei sind
   * lesbar. Wer diese Werte senkt, holt den Mangel zurück. */
  --ink-2:color-mix(in srgb,var(--ink) 75%,var(--bg));
  --ink-3:color-mix(in srgb,var(--ink) 63%,var(--bg));
  --line:color-mix(in srgb,var(--ink) 13%,var(--surface));
  --accent-soft:color-mix(in srgb,var(--accent) 15%,var(--surface));
  --ok:var(--grn);--ok-soft:var(--grns);--warn:var(--gold);--danger:var(--rust);--danger-soft:var(--rusts);
  --glow:0 0 26px color-mix(in srgb,var(--accent) 42%,transparent),0 0 60px color-mix(in srgb,var(--accent) 20%,transparent);
  /* Iridescent-Verlauf für das Hologramm-Theme – rotiert via @property --rot (Vorlage: Mein-Mixarium .mx-btn-holo) */
  --grad-iridescent:conic-gradient(from var(--rot,0deg) at 50% 50%,#ffd6e0 0%,#ffefb5 16%,#d8ffec 32%,#cce8ff 48%,#e6d4ff 64%,#ffd6e0 80%,#ffefb5 100%);
  --radius:16px;--radius-s:10px;--fs:15px;
  --shadow:0 4px 20px rgba(40,30,16,.10);--shadow-lg:0 12px 40px rgba(40,30,16,.20);
}
@property --rot { syntax:'<angle>'; inherits:false; initial-value:0deg; }
/* ── Themen (nur die Palette-Zeile, alles andere leitet sich ab) ── */
[data-theme=spring]{--sand:#f4f9f0;--sand2:#d4e8c8;--parch:#f8fdf4;--ink:#162810;--br:#437230;--br2:#5e9448;--br3:#90bc70;--rust:#c05858;--rusts:#fae8e8;--grn:#347028;--grns:#d8f0d0;--teal:#287858;--teals:#d0eee0;--gold:#708020;--golds:#eaf2cc}
[data-theme=night]{--sand:#181410;--sand2:#2a2018;--parch:#201810;--ink:#ecdcc8;--br:#c8a480;--br2:#a88060;--br3:#b09060;--rust:#e07050;--rusts:#381808;--grn:#68a848;--grns:#182808;--teal:#50a89a;--teals:#0c2420;--gold:#d4a030;--golds:#281e04}
[data-theme=modern]{--sand:#f3f5fa;--sand2:#d8dfe8;--parch:#ffffff;--ink:#182038;--br:#284880;--br2:#3e70a8;--br3:#88aad0;--rust:#c83858;--rusts:#fce6ea;--grn:#228048;--grns:#d0f0e0;--teal:#187888;--teals:#c8e8ef;--gold:#b87020;--golds:#faf0d8}
[data-theme=colorful]{--sand:#fef9f0;--sand2:#fad8c0;--parch:#fffbf5;--ink:#280e04;--br:#dc5a18;--br2:#cc7c28;--br3:#e0a058;--rust:#c02858;--rusts:#fce8f0;--grn:#489018;--grns:#dcf4c8;--teal:#1888a0;--teals:#c8eff4;--gold:#dc9e08;--golds:#fef8c8}
[data-theme=neon]{--sand:#0d0d1a;--sand2:#1c1830;--parch:#12101e;--ink:#e6deff;--br:#9d5cff;--br2:#7a3dd8;--br3:#9a70e8;--rust:#ff3f9a;--rusts:#2a0918;--grn:#00d68f;--grns:#002616;--teal:#00c8f0;--teals:#001a24;--gold:#ffe033;--golds:#1a1602}
[data-theme=pastel]{--sand:#fff0f9;--sand2:#f0d0ea;--parch:#fff8fe;--ink:#2a1830;--br:#c050c8;--br2:#d878d4;--br3:#d4a8cc;--rust:#ff6090;--rusts:#ffe0eb;--grn:#4ec888;--grns:#d4f2e4;--teal:#38b8cc;--teals:#ccf0f6;--gold:#f5a020;--golds:#fff0d0}
[data-theme=holo]{--sand:#fbf9ff;--sand2:#efe6fb;--parch:#ffffff;--ink:#2c1e3e;--br:#a78bfa;--br2:#c4b0fe;--br3:#ddd0ff;--rust:#f472b6;--rusts:#fce0ee;--grn:#2bb8a3;--grns:#d0f7f0;--teal:#818cf8;--teals:#e6e9ff;--gold:#e0a500;--golds:#fff5d4}
/* ── Hologramm-Theme: echte, sich selbst drehende Iridescent-Effekte (auch ohne Maus) ── */
@keyframes holo-slide{to{background-position:200% 0}}
[data-theme=holo] .btn.pri{background:var(--grad-iridescent);color:#241631;text-shadow:0 1px 0 rgba(255,255,255,.55);animation:holo-rot 18s linear infinite;border:1px solid rgba(255,255,255,.5)}
[data-theme=holo] .btn.pri:hover{animation-duration:8s}
[data-theme=holo] .btn.pri:active{animation-duration:1.6s}
[data-theme=holo] .fab{background:var(--grad-iridescent);color:#241631;animation:holo-rot 22s linear infinite;box-shadow:0 8px 24px -4px rgba(167,139,250,.6)}
[data-theme=holo] .htag{background:var(--grad-iridescent);color:#241631;animation:holo-rot 16s linear infinite}
[data-theme=holo] .secttitle .bar{background:var(--grad-iridescent);animation:holo-rot 14s linear infinite}
[data-theme=holo] .navbtn.on{color:#a855f7}
/* KEIN position:relative-Override: .topbar ist sticky, .bottomnav fixed — beide sind
   gültige Anker für ::after. relative brach das fixed der WorkFloh-Navileiste
   (Klaus' Holo-Versatz-Befund 2026-07-04). */
[data-theme=holo] .topbar::after,[data-theme=holo] .bottomnav::after{content:"";position:absolute;left:0;right:0;height:3px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,#ffd6e0,#ffefb5,#d8ffec,#cce8ff,#e6d4ff,#ffd6e0);background-size:200% 100%;animation:holo-slide 6s linear infinite}
[data-theme=holo] .topbar::after{bottom:-1px}
[data-theme=holo] .bottomnav::after{top:-1px}
@media (prefers-reduced-motion:reduce){[data-theme=holo] .btn.pri,[data-theme=holo] .fab,[data-theme=holo] .htag,[data-theme=holo] .secttitle .bar,[data-theme=holo] .topbar::after,[data-theme=holo] .bottomnav::after{animation:none}}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:var(--fs);
  background:var(--bg);color:var(--ink);line-height:1.45;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));-webkit-text-size-adjust:100%}
h1,h2,h3,h4{margin:0}
input,select,textarea,button{font-family:inherit;font-size:1rem;color:inherit}
a{color:var(--accent)}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}

/* ---- Topbar ---- */
.topbar{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:max(10px,env(safe-area-inset-top)) 14px 10px;display:flex;align-items:center;gap:10px}
.brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1;cursor:pointer}
.brand .logo{height:44px;width:auto;flex:none;object-fit:contain;border-radius:10px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.brand .nm{display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1.06}
.brand .nm b{font-weight:900;font-size:1.16rem;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .nm b i{font-style:italic;color:var(--accent);font-weight:800}
.brand .nm small{font-weight:700;font-size:.64rem;letter-spacing:.5px;color:var(--ink-3);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-acts{display:flex;gap:8px}
.iconbtn{border:1px solid var(--line);background:var(--surface-2);color:var(--ink);width:42px;height:42px;border-radius:12px;
  font-size:19px;cursor:pointer;display:grid;place-items:center;transition:transform .12s,background .15s;text-decoration:none}
.iconbtn:hover{background:var(--accent-soft)}
.iconbtn:active{transform:scale(1.18)}

/* ---- Desktop top-nav ---- */
.topnav{display:none;gap:4px;flex:2;justify-content:center}
.topnav button{border:none;background:transparent;color:var(--ink-2);font-weight:800;font-size:.82rem;letter-spacing:.3px;
  text-transform:uppercase;padding:9px 12px;border-radius:10px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.topnav button:hover{color:var(--accent)}
.topnav button.on{background:var(--surface-2);color:var(--accent)}
@media(min-width:1040px){.topnav{display:flex}.bottomnav{display:none}.brand{flex:1}.tb-acts{flex:1;justify-content:flex-end}
  body{padding-bottom:20px}.fab{bottom:24px}}

/* ---- Search / filter ---- */
#searchArea{display:none}
#searchArea.on{display:block}
.searchwrap{padding:12px 14px 4px;max-width:1040px;margin:0 auto}
.searchbox{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:13px;padding:0 12px;box-shadow:var(--shadow)}
.searchbox input{border:none;background:transparent;outline:none;flex:1;padding:12px 2px;font-size:1rem}
.searchbox .si{font-size:18px;color:var(--ink-3)}
.filterbar{display:flex;gap:6px;align-items:center;overflow-x:auto;padding:8px 14px 4px;scrollbar-width:none;max-width:1040px;margin:0 auto}
.filterbar::-webkit-scrollbar{display:none}
.pill{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:999px;
  padding:5px 13px;font-size:.78rem;font-weight:700;line-height:1.35;cursor:pointer;transition:transform .12s,all .15s;white-space:nowrap}
.pill:active{transform:scale(1.08)}
.pill.on{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---- Screens ---- */
main{padding:8px 14px 28px;max-width:1040px;margin:0 auto}
.screen{display:none}.screen.on{display:block;animation:fade .28s}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.secttitle{display:flex;align-items:center;gap:11px;margin:26px 4px 12px}
.secttitle .bar{width:6px;align-self:stretch;min-height:26px;border-radius:3px;background:var(--accent)}
.secttitle h2{font-size:1.5rem;font-weight:900;letter-spacing:-.5px;color:var(--accent)}
.secttitle .sub{color:var(--ink-2);font-size:.86rem;font-weight:600;margin-top:2px}
.pagehead{font-size:1.9rem;font-weight:900;letter-spacing:-.8px;color:var(--accent);margin:14px 4px 6px;line-height:1.05}
.lead{color:var(--ink-2);font-size:1rem;line-height:1.6;margin:8px 4px 4px;max-width:780px}
.lead b{color:var(--ink)}

/* ---- Hero ---- */
.hero{position:relative;border-radius:22px;overflow:hidden;margin-top:8px;box-shadow:var(--shadow-lg);
  border:1px solid var(--line);min-height:340px;display:flex;align-items:flex-end}
.hero .hph{position:absolute;inset:0;background:linear-gradient(135deg,var(--br),var(--rust) 70%)}
.hero .hph img{width:100%;height:100%;object-fit:cover;display:block}
.hero .hscrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,12,4,.10) 0%,rgba(20,12,4,.44) 42%,rgba(20,12,4,.90) 100%)}
.hero .hcont{position:relative;padding:26px 22px 24px;color:#fff;z-index:2;max-width:700px}
.hero .htag{display:inline-block;background:var(--accent);color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.5px;
  text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:12px}
.hero h1{font-size:2.1rem;line-height:1.06;font-weight:900;letter-spacing:-1px;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero h1 i{font-style:italic;color:#ffe9c0}
.hero p{margin:12px 0 18px;font-size:1.04rem;line-height:1.5;color:#f4ece0;max-width:560px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero .hbtns{display:flex;gap:10px;flex-wrap:wrap}
@media(min-width:640px){.hero{min-height:440px}.hero h1{font-size:2.9rem}}

/* ---- Buttons: Glas-Cabochon ---- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;
  border-radius:14px;padding:13px 20px;font-size:1rem;cursor:pointer;border:1px solid transparent;overflow:hidden;
  text-decoration:none;line-height:1.2;color:#fff;
  transform:perspective(640px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;
  transition:transform .14s ease,box-shadow .2s ease;
  box-shadow:inset 0 2px 1px rgba(255,255,255,.5),inset 0 -5px 9px rgba(0,0,0,.42),
    inset 11px 0 17px rgba(255,255,255,.06),inset -11px 0 19px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.12),0 14px 30px rgba(0,0,0,.26),0 4px 8px rgba(0,0,0,.20)}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(108px 76px at var(--mx,50%) var(--my,24%),rgba(255,255,255,.7),transparent 56%),
    linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0) 46%),
    linear-gradient(115deg,transparent 26%,color-mix(in srgb,var(--accent3) 62%,transparent) 43%,color-mix(in srgb,var(--accent) 58%,transparent) 51%,color-mix(in srgb,var(--accent2) 62%,transparent) 60%,transparent 76%);
  background-size:auto,auto,240% 100%;background-position:0 0,0 0,var(--mx,50%) 0;
  mix-blend-mode:screen;opacity:.45;transition:opacity .22s}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 140% at var(--mx,50%) -10%,rgba(255,255,255,.5),transparent 40%);
  mix-blend-mode:screen;opacity:0;transition:opacity .22s}
.btn:hover::before,.btn:focus-visible::before{opacity:1}
.btn:hover::after,.btn:focus-visible::after{opacity:.85}
.btn:active{transform:perspective(640px) scale(.98)}
.btn.pri{background:linear-gradient(135deg,var(--accent),var(--accent2) 70%,color-mix(in srgb,var(--accent2) 55%,#3a0f04));color:#fff}
.btn.pri:hover{box-shadow:inset 0 2px 1px rgba(255,255,255,.7),inset 0 -5px 9px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.16),0 16px 32px rgba(0,0,0,.4),var(--glow)}
.btn.sec{background:linear-gradient(180deg,var(--surface),var(--surface-2));color:var(--ink);border:1px solid var(--line)}
.btn.sec.on{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:var(--accent)}
.btn.sec:hover{border-color:var(--accent);box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -4px 8px rgba(0,0,0,.14),0 12px 26px rgba(0,0,0,.16),var(--glow)}
.btn.light{background:linear-gradient(180deg,#ffffff,#f1ece2);color:#302010}
.btn.ghost{background:linear-gradient(180deg,rgba(140,120,90,.10),rgba(30,20,10,.10));border:1px solid var(--accent);color:var(--accent)}
.btn.ghost:hover{box-shadow:var(--glow)}
.btn.block{display:flex;width:100%}
.btn.lg{padding:15px 22px;font-size:1.05rem}
@media (prefers-reduced-motion:reduce){.btn{transform:none;transition:none}}

/* ---- Stats ---- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin:16px 0}
@media(min-width:560px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 14px;text-align:center;box-shadow:var(--shadow)}
.stat .n{font-size:1.7rem;font-weight:900;color:var(--accent);line-height:1}
.stat .l{font-size:.78rem;color:var(--ink-2);font-weight:700;margin-top:6px}

/* ---- Feature cards ---- */
.sgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.sgrid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.sgrid{grid-template-columns:repeat(3,1fr)}}
.scard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column;
  transition:transform .15s cubic-bezier(.34,1.4,.64,1),box-shadow .18s}
.scard:hover{box-shadow:var(--shadow-lg)}
.scard .ph{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);overflow:hidden;display:grid;place-items:center}
.scard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.scard .ph .phi{font-size:52px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));opacity:.95;z-index:1}
.scard .ph .phtag{position:absolute;left:10px;top:10px;z-index:3;background:rgba(20,12,4,.55);backdrop-filter:blur(3px);
  color:#fff;font-size:.66rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.scard .sb{padding:13px 14px 15px;flex:1;display:flex;flex-direction:column}
.scard .sb h3{font-size:1.08rem;font-weight:800;letter-spacing:-.2px}
.scard .sb p{color:var(--ink-2);font-size:.9rem;margin:6px 0 0;line-height:1.5;flex:1}
.scard .sb .more{margin-top:10px;color:var(--accent);font-weight:800;font-size:.85rem;display:inline-flex;align-items:center;gap:5px}

/* ---- Food-Gallery ---- */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:760px){.gal{grid-template-columns:repeat(3,1fr)}}
.galitem{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
  background:linear-gradient(135deg,var(--br),var(--rust));display:grid;place-items:center;cursor:pointer;transition:transform .15s}
.galitem:hover{box-shadow:var(--shadow-lg)}
.galitem img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.galitem .gi{font-size:38px;opacity:.85;z-index:1}
.galitem .cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:18px 11px 9px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(8,6,2,.85));font-size:.78rem;line-height:1.25}
.galitem .cap b{display:block;font-weight:800;font-size:.86rem}

/* ---- KI-Flow ---- */
.flow{display:grid;grid-template-columns:1fr;gap:12px;margin:14px 0}
@media(min-width:720px){.flow{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center}}
.flowstep{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 16px;text-align:center;box-shadow:var(--shadow)}
.flowstep .fico{font-size:34px}
/* h3, nicht h4: die Schritte stehen unter der h2 „So funktioniert's“, eine h4
   überspringt dort eine Ebene (Befund 2026-08-03, „heading-order“). h4 bleibt
   mit aufgeführt, damit eine ältere Kopie der Seite gleich aussieht. */
.flowstep h3,.flowstep h4{font-size:1rem;font-weight:800;margin:8px 0 4px}
.flowstep p{color:var(--ink-2);font-size:.86rem;line-height:1.5;margin:0}
.flowstep .fimg{border-radius:12px;overflow:hidden;margin:-4px 0 10px;border:1px solid var(--line)}
.flowstep .fimg img{width:100%;display:block;aspect-ratio:16/10;object-fit:cover}
.flowarr{text-align:center;color:var(--accent);font-size:26px;font-weight:900}
@media(max-width:719px){.flowarr{transform:rotate(90deg)}}

/* ---- Zwei-Spalten Info ---- */
.cgrid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:760px){.cgrid{grid-template-columns:1fr 1fr}}
.infobox{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow)}
.infobox.bad{border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}
.infobox.good{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.infobox h3{font-size:1.05rem;font-weight:800;display:flex;align-items:center;gap:8px;margin-bottom:8px}
.infobox p{color:var(--ink-2);line-height:1.6;font-size:.94rem;margin:0}

/* ---- Audience ---- */
.aud{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:680px){.aud{grid-template-columns:repeat(3,1fr)}}
.audcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 18px;text-align:center;box-shadow:var(--shadow)}
.audcard .aico{font-size:38px}
.audcard h3{font-size:1.06rem;font-weight:800;margin:8px 0 6px}
.audcard p{color:var(--ink-2);font-size:.9rem;line-height:1.55;margin:0}

/* ---- Section rows / lists ---- */
.sect{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow)}
.sect-h{padding:14px 16px 8px;font-weight:800;font-size:.78rem;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3)}
.srow{display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid var(--line);cursor:pointer;transition:background .15s;text-decoration:none;color:inherit}
.srow:first-of-type{border-top:none}
.srow:hover{background:var(--surface-2)}.srow.static{cursor:default}.srow.static:hover{background:none}
.srow .sico{font-size:22px;width:28px;text-align:center;flex:none}
.srow .sb{flex:1;min-width:0}.srow .sl{font-weight:700}.srow .ss{font-size:.85rem;color:var(--ink-2);margin-top:2px}
.srow .sarr{color:var(--ink-3)}

/* ---- Chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 4px}
.chip{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:.84rem;font-weight:600;color:var(--ink-2);box-shadow:var(--shadow)}
.chip b{color:var(--accent)}

/* ---- FAQ ---- */
.faq{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:11px;overflow:hidden;box-shadow:var(--shadow)}
.faq .q{padding:15px 16px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:12px;font-size:1rem}
.faq .q .chev{margin-inline-start:auto;color:var(--ink-3);transition:transform .2s;font-size:16px}
.faq.open .q .chev{transform:rotate(90deg);color:var(--accent)}
.faq .q .qi{color:var(--accent);font-weight:900}
.faq .a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--ink-2);line-height:1.6}
.faq .a .inner{padding:0 16px 15px;font-size:.93rem}
.faq.open .a{max-height:420px}

/* ---- Forms ---- */
.fld{margin-bottom:13px}
.flbl{font-size:.82rem;font-weight:700;color:var(--ink-2);margin-bottom:5px;display:block}
.inp,select.inp,textarea.inp{width:100%;border:1.5px solid var(--line);background:var(--surface-2);border-radius:11px;
  padding:11px 13px;outline:none;transition:border-color .15s,background .15s}
.inp:focus{border-color:var(--accent);background:var(--surface)}
textarea.inp{resize:vertical;min-height:90px}

/* ---- FAB ---- */
.fab{position:fixed;bottom:calc(82px + env(safe-area-inset-bottom));inset-inline-end:18px;z-index:25;
  height:56px;padding:0 20px;border-radius:18px;border:none;background:var(--accent);color:#fff;font-size:1rem;font-weight:800;
  box-shadow:0 8px 24px -4px var(--accent);cursor:pointer;display:flex;align-items:center;gap:8px;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1)}
.fab:active{transform:scale(1.1)}
.fab .fi{font-size:20px}

/* ---- Bottom nav ---- */
.bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:30;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);display:flex;padding:6px 4px calc(6px + env(safe-area-inset-bottom));gap:1px}
.navbtn{flex:1;border:none;background:transparent;padding:7px 1px;border-radius:12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-3);font-size:.6rem;font-weight:700;
  transition:transform .12s,color .15s}
.navbtn .ni{font-size:20px;transition:transform .15s}
.navbtn:active{transform:scale(1.12)}
.navbtn.on{color:var(--accent)}.navbtn.on .ni{transform:translateY(-1px) scale(1.08)}

/* ---- Sheet / Modal ---- */
.sh-bg{position:fixed;inset:0;z-index:60;background:rgba(20,14,6,.55);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet{background:var(--surface);width:100%;max-width:680px;max-height:94vh;border-radius:24px 24px 0 0;
  display:flex;flex-direction:column;animation:slideup .3s cubic-bezier(.16,1,.3,1)}
@media(min-width:700px){.sh-bg{align-items:center}.sheet{border-radius:24px;max-height:90vh}}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}
.sh-handle{width:40px;height:4px;background:var(--line);border-radius:99px;margin:9px auto 2px}
.sh-hdr{display:flex;align-items:center;padding:6px 18px 12px;border-bottom:1px solid var(--line)}
.sh-title{font-weight:900;font-size:1.16rem;flex:1}
.sh-x{border:none;background:var(--surface-2);width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:16px;color:var(--ink-2);transition:transform .12s}
.sh-x:active{transform:scale(1.2)}
.sh-body{overflow-y:auto;padding:16px 18px;flex:1}
.sh-foot{display:flex;gap:10px;padding:12px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.sh-foot .btn{flex:1}
.sh-hero{margin:-16px -18px 14px;position:relative;background:linear-gradient(135deg,var(--accent),var(--accent2));overflow:hidden;display:grid;place-items:center}
.sh-hero img{width:100%;display:block}
.sh-hero.ph16{aspect-ratio:16/9}
.sh-hero.ph16 img{position:absolute;inset:0;height:100%;object-fit:cover;z-index:2}
.sh-hero .phi{font-size:62px;opacity:.92;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4))}
.sh-body h4{font-size:.9rem;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-3);margin:16px 0 7px}
.sh-body p{color:var(--ink-2);line-height:1.6;margin:0 0 10px}
.sh-body p b{color:var(--ink)}
.taglist{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0}
.taglist span{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:5px 11px;font-size:.82rem;font-weight:700}

/* ---- Theme option list ---- */
.themeopt{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1.5px solid var(--line);border-radius:14px;margin-bottom:10px;cursor:pointer;transition:border-color .15s,transform .1s;background:var(--surface-2)}
.themeopt:active{transform:scale(1.02)}
.themeopt.on{border-color:var(--accent)}
.themeopt .sw{width:52px;height:32px;border-radius:9px;flex:none;border:1px solid rgba(0,0,0,.15);display:flex;overflow:hidden}
.themeopt .sw i{flex:1}
.themeopt .tl{flex:1}.themeopt .tl b{display:block;font-weight:800}.themeopt .tl small{color:var(--ink-2)}
.themeopt .ck{color:var(--accent);font-weight:900;opacity:0}
.themeopt.on .ck{opacity:1}
/* Theme grid (Themen-Screen) */
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:560px){.tgrid{grid-template-columns:repeat(4,1fr)}}
.ttile{border:1.5px solid var(--line);border-radius:14px;padding:10px;cursor:pointer;background:var(--surface);text-align:center;transition:border-color .15s,transform .1s;box-shadow:var(--shadow)}
.ttile:active{transform:scale(1.03)}
.ttile.on{border-color:var(--accent)}
.ttile .sw{height:34px;border-radius:8px;overflow:hidden;display:flex;border:1px solid rgba(0,0,0,.12)}
.ttile .sw i{flex:1}
.ttile b{display:block;font-size:.84rem;font-weight:800;margin-top:7px}
.langgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:560px){.langgrid{grid-template-columns:repeat(4,1fr)}}
.langbtn{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center;font-weight:700;box-shadow:var(--shadow)}
.langbtn .fl{font-size:24px;display:block;margin-bottom:4px}

/* ---- toast ---- */
#toasts{position:fixed;bottom:calc(92px + env(safe-area-inset-bottom));left:0;right:0;z-index:90;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:var(--ink);color:var(--bg);padding:11px 18px;border-radius:12px;font-weight:600;font-size:.9rem;
  box-shadow:var(--shadow-lg);animation:tin .3s;max-width:90%}
@keyframes tin{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}

/* ---- install bar ---- */
#installBar{display:none;align-items:center;gap:10px;background:var(--accent);color:#fff;padding:10px 14px}
#installBar.on{display:flex}
#installBar img{height:28px;width:auto;background:#fff;border-radius:6px;padding:2px;flex:none}
#installBar .ibtxt{flex:1;min-width:0;line-height:1.25;font-size:.9rem;font-weight:600}
#installBar .ibtn{flex:none;background:#fff;color:var(--accent);border:none;border-radius:9px;padding:8px 15px;font-weight:800;font-size:.86rem;cursor:pointer}
#installBar .ibtn:active{transform:scale(1.06)}
#installBar .ibx{flex:none;background:transparent;border:none;color:#fff;font-size:18px;cursor:pointer;opacity:.85;padding:4px}

/* ---- footer ---- */
.foot{margin:30px 4px 8px;color:var(--ink-3);font-size:.82rem;text-align:center;line-height:1.9}
.foot a{color:var(--ink-2);text-decoration:none;margin:0 6px;cursor:pointer}
.foot a:hover{color:var(--accent)}
.foot .bigbrand{font-weight:900;color:var(--ink-2);font-size:1rem;margin-bottom:4px}
.foot .bigbrand i{color:var(--accent);font-style:italic}

/* ---- Tooltip ---- */
.wf-tip{position:fixed;z-index:9999;max-width:240px;background:#1c1510;color:#fff;font-size:.82rem;line-height:1.35;
  padding:8px 11px;border-radius:9px;box-shadow:0 8px 22px rgba(0,0,0,.45);border:1px solid var(--accent);
  pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.wf-tip.on{opacity:1;transform:translateY(0)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---- Demo-Video-Raum ---- */
.videobox{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);
  aspect-ratio:16/9;cursor:pointer;background:linear-gradient(135deg,var(--br),var(--rust));margin:6px 0;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d}
.videobox .vposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.videobox::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(20,12,4,.15),rgba(20,12,4,.7))}
.videobox .vplay{position:absolute;inset:0;z-index:3;display:grid;place-items:center}
.videobox .vplay span{width:74px;height:74px;border-radius:50%;background:color-mix(in srgb,var(--accent) 88%,#000);color:#fff;
  display:grid;place-items:center;font-size:28px;padding-left:5px;box-shadow:0 10px 30px rgba(0,0,0,.5),var(--glow);transition:transform .15s}
.videobox:hover .vplay span{transform:scale(1.12)}
.videobox .vlabel{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px 18px 14px;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(8,6,2,.72))}
.videobox .vlabel b{display:block;font-weight:800;font-size:1.05rem}
.videobox .vlabel small{color:#f0e6d8}
.videobox video{position:relative;z-index:5;width:100%;height:100%;display:block;object-fit:cover;background:#000}

/* ===== three.js Hintergrund ===== */
#bg{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.5}
/* Seite hat den Hintergrund auf schmalen Bildschirmen abbestellt (siehe
   tomy-ui/mycel-bg.js): dann ist der Pause-Knopf sinnlos. Er wird schon beim
   Auslesen der Seite ausgeblendet, NICHT nachträglich per JS entfernt — sonst
   rückt die Knopfleiste nach und die Seite springt (gemessen: CLS 0,001).
   Die 700 px müssen zur Grenze in mycel-bg.js passen. */
@media (max-width:700px){ #bg[data-kein-handy-hintergrund] ~ .topbar #bgBtn{display:none} }
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 82% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%),
             radial-gradient(55% 45% at 4% 100%,color-mix(in srgb,var(--accent2) 10%,transparent),transparent 60%)}
[data-theme=night] #bg,[data-theme=neon] #bg{opacity:.8}
@keyframes holo-rot{to{--rot:360deg}}

/* ===== Glaskugel-Glanz auf Karten & Bildern ===== */
.scard,.galitem,.hero,.sh-hero,.stat{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d}
.scard .ph::after,.galitem::after,.hero .hph::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
  background:radial-gradient(220px 150px at var(--mx,50%) var(--my,15%),rgba(255,255,255,.38),transparent 60%),
            linear-gradient(180deg,rgba(255,255,255,.12),transparent 38%);
  mix-blend-mode:screen;opacity:0;transition:opacity .28s}
.scard:hover .ph::after,.galitem:hover::after,.hero:hover .hph::after{opacity:1}
.scard .ph,.galitem,.hero,.sh-hero{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 2px 1px rgba(255,255,255,.16)}

/* ===== Drag&Drop-Bild-Slots ===== */
.dropzone{position:relative}
.dropzone.dragover{outline:3px dashed var(--accent);outline-offset:-5px}
.dropzone.dragover::before{content:"⬇ Bild hier ablegen";position:absolute;inset:0;z-index:9;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 40%,transparent);color:#fff;font-weight:900;font-size:.95rem;backdrop-filter:blur(2px);border-radius:inherit}
.slot-edit{position:absolute;top:8px;right:8px;z-index:8;width:32px;height:32px;border-radius:9px;border:1px solid rgba(255,255,255,.5);
  background:rgba(20,14,6,.55);backdrop-filter:blur(4px);color:#fff;font-size:15px;cursor:pointer;display:grid;place-items:center;
  opacity:0;transition:opacity .2s,transform .12s}
.dropzone:hover .slot-edit{opacity:.9}
.slot-edit:hover{opacity:1;background:var(--accent)}
.slot-edit:active{transform:scale(1.15)}

@media(min-width:1040px){body .bottomnav{display:none}body{padding-bottom:24px}.fab{bottom:24px}}