/* Golden Field Netzwerk: Petrol-Grün aus dem Logo, Gold wie der Pinselring, Natur-Grün (Salbei, Limette) aus der Vorlage „Goldenfield Zwönitz“.
   Schrift Poppins wie in der Vorlage. Große Knöpfe, sauber ab 360 px Breite. */
@font-face{font-family:"Lora";src:url(fonts/lora-500.woff) format("woff");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url(fonts/lora-500i.woff) format("woff");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/poppins-300.woff) format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/poppins-400.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/poppins-500.woff) format("woff");font-weight:500 600;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/poppins-700.woff) format("woff");font-weight:700 800;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plexmono-500.woff) format("woff");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/plexmono-600.woff) format("woff");font-weight:600;font-display:swap}
:root{
  --bg:#2d464a; --bg-deep:#223739; --surface:#263d40; --surface-2:#34514f; --line:#47625f; --fg:#f6f1e4; --muted:#b9c8bf;
  --accent:#dcab4f; --accent-hi:#f3d48a; --accent-2:#b8822c; --accent-ink:#1f2a22; --glow:rgba(220,171,79,.2);
  --sage:#5a6f53; --lime:#a9b105; --lime-soft:#c7e084; --forest:#1a3417;
  --ok:#b9cd4a; --warn:#e8bb5c; --danger:#ef8a74; --bad:#ef8a74;
  --display:"Poppins",system-ui,sans-serif; --body:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gold:linear-gradient(115deg,#a8741f 0%,#e9c46f 30%,#fbe7a8 48%,#d6a240 66%,#9c6a1c 100%);
  --r:18px; --tabh:68px; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font:16px/1.55 var(--body);-webkit-text-size-adjust:100%;min-height:100vh;
  background:radial-gradient(900px 420px at 50% -160px,rgba(220,171,79,.13),transparent 70%),linear-gradient(180deg,var(--bg),var(--bg-deep) 120%) fixed}
body.mopen,body.touring{overflow:hidden}
h1,h2,h3,h4{margin:0;line-height:1.15;text-wrap:balance}
h1{font:700 clamp(26px,6.5vw,36px)/1.15 var(--display);letter-spacing:-.01em}
h2{font:700 clamp(21px,5vw,26px)/1.2 var(--display);letter-spacing:-.005em}
h3{font-size:18px;font-weight:700}
h4{font-size:13px;font-weight:600;color:var(--lime-soft);display:flex;align-items:center;gap:6px;margin:6px 0 2px;text-transform:uppercase;letter-spacing:.08em}
p{margin:0}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}
[hidden]{display:none!important}
.i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i.rot{transform:rotate(90deg)}
.muted{color:var(--muted)} .small{font-size:14px} .big{font-size:19px} .center{text-align:center;justify-content:center} .end{justify-content:flex-end}
.label{font:600 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.breakall{word-break:break-all} .grow{flex:1;min-width:0} .full{width:100%}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .gap8{gap:8px} .gap4{gap:4px} .between{justify-content:space-between}
.col{display:flex;flex-direction:column} .stack{display:flex;flex-direction:column;gap:14px}
.boot{min-height:60vh;display:grid;place-items:center;color:var(--muted);font:500 14px var(--mono);letter-spacing:.08em;text-align:center;padding:20px}

/* Knöpfe */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface-2);color:var(--fg);font-weight:600;cursor:pointer;text-decoration:none;text-align:center;line-height:1.2}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--gold);border-color:#c9963d;color:var(--accent-ink);box-shadow:0 6px 18px -8px rgba(220,171,79,.6)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
.btn.small{min-height:40px;padding:6px 12px;font-size:14px;border-radius:11px}
.btn.big{min-height:56px;font-size:18px}
.btn[disabled]{opacity:.5;cursor:wait}
.iconbtn{position:relative;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;border:1px solid transparent;background:transparent;color:var(--fg);cursor:pointer}
.iconbtn:hover{border-color:var(--line);background:var(--surface)}
.iconbtn.sm{width:34px;height:34px;border-radius:10px} .iconbtn.sm .i{width:18px;height:18px}
.linkbtn{background:none;border:0;padding:8px 0;color:var(--accent);cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-weight:600}
.linkbtn.inl{padding:0;display:inline;text-align:left}
.backbtn{margin-bottom:-6px}
.badge{position:absolute;top:2px;right:2px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--danger);color:#fff;font:700 12px/20px var(--body);text-align:center}
.tile .badge,.navlink .badge,.mrow .badge{position:static;margin-left:auto}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:600;white-space:nowrap;background:transparent;color:var(--fg);cursor:default}
button.chip{cursor:pointer;min-height:38px;padding:6px 14px;font-size:14px}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chip.soft{border-style:dashed}
.chip.ok{color:var(--lime-soft);border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
.chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent)}
.chip.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 50%,transparent)}
.chip.acc{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;margin:0 -16px;padding-inline:16px}
.chips.scroll::-webkit-scrollbar{display:none}

/* Felder */
.field{display:flex;flex-direction:column;gap:6px;font-size:15px}
.field>span{font-weight:600}
.field input,.field select,.field textarea,.inp{width:100%;min-height:50px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font-size:16px}
textarea.inp,.field textarea{min-height:auto;resize:vertical}
.inp.auto{width:auto} .inp.small{min-height:40px;padding:8px 10px;font-size:14px}
.field input:focus,.field select:focus,.field textarea:focus,.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
input[type=color].inp{padding:4px;height:50px}
.cb{display:flex;gap:12px;align-items:flex-start;font-size:15px;cursor:pointer;line-height:1.4}
.cb input{width:24px;height:24px;flex:none;margin:0;accent-color:var(--accent)}
.cbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px 14px;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.cbgrid legend,.days legend{font-weight:600;padding:0 4px}
.cbgrid .cb{font-size:14px} .cbgrid .cb input{width:20px;height:20px}
.days{display:flex;gap:6px;flex-wrap:wrap;border:0;padding:0;margin:0}
.days legend{margin-bottom:6px}
.days label{position:relative}
.days input{position:absolute;opacity:0;inset:0}
.days span{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);font-weight:700;cursor:pointer}
.days input:checked+span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.days input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.seg{display:flex;padding:4px;border-radius:14px;background:var(--bg);border:1px solid var(--line);gap:4px}
.seg>button,.seg>label{flex:1;position:relative}
.seg>button,.seg>label>span{display:grid;place-items:center;min-height:44px;border-radius:10px;border:0;background:transparent;font-weight:600;cursor:pointer;padding:6px}
.seg>button[aria-selected=true],.seg input:checked+span{background:var(--accent);color:var(--accent-ink)}
.seg input{position:absolute;opacity:0;inset:0;margin:0}
.search{display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);min-height:52px}
.search input{flex:1;border:0;background:transparent;min-height:50px;font-size:16px;outline:none;min-width:0}
.search .i{color:var(--muted)}
.note{font-size:14px;color:var(--muted);border-left:3px solid var(--warn);padding:2px 0 2px 10px}
.err{color:var(--danger);font-size:14px;min-height:1px}
.err:empty{display:none}

/* Karten */
.card{background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 80%,var(--bg)));border:1px solid var(--line);border-radius:var(--r);padding:18px;color:var(--fg)}
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.cards2{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.tilecard,.todo{display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;width:100%;min-height:76px}
.tilecard>div,.todo>div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.tilecard:hover,.todo:hover{border-color:var(--accent)}
.tilecard>.i:first-child,.todo>.i:first-child{width:28px;height:28px;color:var(--accent)}
.tilecard>.i:last-child,.todo>.i:last-child{color:var(--muted)}
.todo.hot{border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.note-card{display:flex;gap:14px;align-items:flex-start;border-color:color-mix(in srgb,var(--warn) 50%,var(--line))}
.note-card>.i{color:var(--warn);width:28px;height:28px}
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 12px;color:var(--muted);text-align:center}
.empty .i{width:36px;height:36px;opacity:.6}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.shead>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.tile{display:flex;align-items:center;gap:14px;min-height:72px;padding:14px 16px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);text-align:left;cursor:pointer;color:var(--fg)}
.tile>span{display:flex;flex-direction:column;flex:1;min-width:0}
.tile>.i{color:var(--accent);width:26px;height:26px}
.tile:hover{border-color:var(--accent)}
.dot{display:inline-block;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--c) 40%,#fff),var(--c) 55%,color-mix(in srgb,var(--c) 70%,#000));flex:none;vertical-align:middle;box-shadow:0 0 0 2px rgba(255,255,255,.06)}
.dot.big{width:46px;height:46px}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.plist li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.plist li:last-child{border-bottom:0}
.plist li>span{display:flex;flex-direction:column;flex:1;min-width:0}
.plist li>.i{color:var(--muted)}
.bar{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--gold);border-radius:5px;transition:width .4s ease}

/* Kopfzeile und untere Leiste (Mitglieder) */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(8px + env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.brand{display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;color:var(--accent-hi);font:600 16px/1.1 var(--display);letter-spacing:.01em;min-width:0;padding:0;text-align:left}
.brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbtns{display:flex;gap:2px;flex:none}
.mview{max-width:760px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-right)) calc(var(--tabh) + 28px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:16px}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:25;display:grid;grid-template-columns:repeat(5,1fr);background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:var(--tabh);background:none;border:0;color:var(--muted);font-size:12.5px;font-weight:600;cursor:pointer;padding:6px 2px}
.tab .i{width:25px;height:25px}
.tab[aria-current=page]{color:var(--accent)}
.tab[aria-current=page]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
.tab .badge{top:6px;right:calc(50% - 22px)}
.pvbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--gold);color:var(--accent-ink);font-size:14px}
.pvbar span{flex:1;min-width:0}
.pvbar .btn{min-height:34px;background:var(--accent-ink);color:var(--accent);border:0}
.pvbar+.top{top:50px}

/* Start: roter Faden, Gruß, Scoreboard */
.faden{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:linear-gradient(180deg,#2a4446,var(--surface));display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 40px -20px rgba(227,181,90,.35)}
.fhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.fcount{font-size:22px;font-weight:600;color:var(--accent)}
.fgroup{display:flex;flex-direction:column;gap:8px}
.fitem{display:flex;align-items:flex-start;gap:14px;width:100%;min-height:64px;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--bg-deep);text-align:left;cursor:pointer;color:var(--fg)}
.fitem .box{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;border:2px solid var(--accent);color:transparent;transition:background .15s}
.fitem .box .i{width:24px;height:24px;stroke-width:3}
.fitem[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 9%,var(--bg))}
.fitem[aria-pressed=true] .box{background:var(--accent);color:var(--accent-ink)}
.fitem[aria-pressed=true] .ftext b{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--fg) 40%,transparent)}
.ftext{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0;font-size:17px}
.ftext .muted{font-size:14.5px}
.fnote{font-size:14.5px}
.fitem.bestellen{cursor:default;border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.fic{display:grid;place-items:center;width:38px;height:38px;color:var(--warn)}
.ttools{display:flex;gap:8px;flex-wrap:wrap}
.ttool{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:8px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--fg);font:600 15px/1.2 var(--body);cursor:pointer}
.ttool .tsub{color:var(--accent)}
.greet{display:flex;flex-direction:column;gap:6px;padding:4px 2px}
.serie{display:flex;align-items:center;gap:6px;color:var(--accent);font-size:17px}
.serie .i{width:24px;height:24px}
.score{display:flex;flex-direction:column;gap:10px}
.srow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lvl{display:flex;gap:12px;align-items:center}
.lvl>.i{width:42px;height:42px;padding:8px;border-radius:12px;background:var(--glow);color:var(--accent)}
.lvl b{display:block;font:700 20px var(--display)}
.pts{font-size:30px;font-weight:600;text-align:right;line-height:1}
.pts small{display:block;font:500 12px var(--body);color:var(--muted)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cmp>div{display:flex;flex-direction:column;padding:10px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.cmp .num{font-size:22px;font-weight:600}
.cmp small{color:var(--muted);font-size:13px}
.hinweis{text-align:center;padding:4px 10px}

/* Öle */
.oilgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
.oilcard{display:flex;align-items:center;gap:12px;min-height:68px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);text-align:left;cursor:pointer;color:var(--fg)}
.oilcard>span{display:flex;flex-direction:column;min-width:0}
.oilcard:hover{border-color:var(--accent)}
.otext{font-size:17px}
.drow{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-top:1px solid var(--line)}

/* Netzwerk */
.codecard{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.bigcode{font-size:clamp(24px,8vw,34px);font-weight:600;color:var(--accent-hi);letter-spacing:.06em;word-break:break-all;text-align:center}
.qr{background:#fff;padding:10px;border-radius:14px;line-height:0}
.qr svg{width:min(200px,56vw);height:auto;display:block}
.qr:empty{display:none}
.stats2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.stats2>div{display:flex;flex-direction:column}
.num.big{font-size:32px;font-weight:600;color:var(--accent-hi);line-height:1.1}
.regeln ul{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--muted)}

/* Fragen und Nachrichten */
.qcard{display:flex;flex-direction:column;gap:8px}
.qcard.new{border-color:var(--accent)}
.qhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.qtext{font-size:17px}
.answer{border-left:3px solid var(--accent);padding:6px 0 6px 12px;display:flex;flex-direction:column;gap:4px}
.faq{padding:0}
.faq summary{padding:16px 18px;font-weight:700;cursor:pointer;list-style:none;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent);font-size:22px;line-height:1}
.faq[open] summary::after{content:"–"}
.faq>p,.faq>button{margin:0 18px 16px}
.thread{display:flex;flex-direction:column;gap:10px}
.bub{max-width:86%;padding:10px 14px;border-radius:16px 16px 16px 4px;background:var(--surface-2);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;align-self:flex-start}
.bub.mine{align-self:flex-end;border-radius:16px 16px 4px 16px;background:color-mix(in srgb,var(--accent) 18%,var(--surface));border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.bub.draft{border-style:dashed;opacity:.85}
.sendbar{position:sticky;bottom:calc(var(--tabh) + 10px + env(safe-area-inset-bottom));display:flex;gap:8px;align-items:flex-end;padding:8px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.sendbar textarea{flex:1;border:0;background:transparent;resize:none;min-height:48px;font-size:16px;outline:none;padding:6px}
.sendbar .btn{min-width:52px;padding:10px}
.sview .sendbar{position:static}
.remcard{display:flex;gap:12px;align-items:flex-start}
.remcard .grow{display:flex;flex-direction:column;gap:2px}
.remcard.off{opacity:.55}
.nlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto}
.nlist button{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);cursor:pointer;color:var(--fg)}
.nlist button>span{display:flex;flex-direction:column}
.nlist button.unread{border-color:var(--accent)}
.nlist button.unread .i{color:var(--accent)}

/* Fenster */
#modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center}
.mback{position:absolute;inset:0;background:rgba(5,5,3,.7);backdrop-filter:blur(2px)}
.mcard{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:22px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;box-shadow:0 -10px 40px rgba(0,0,0,.4);animation:up .22s ease-out}
.mcard.wide{width:min(760px,100%)}
@media (min-width:700px){#modal{align-items:center}.mcard{border-radius:22px;max-height:88vh}}
@keyframes up{from{transform:translateY(30px);opacity:.4}to{transform:none;opacity:1}}
.mhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mhead h3{display:flex;align-items:center;gap:10px;font-size:20px}
.mtext{font-size:17px}
.mbtns{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}
.mbtns.wrap .btn{flex:1 1 200px}
.legal{white-space:normal;font-size:15px;max-height:65vh;overflow:auto}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabh) + 18px + env(safe-area-inset-bottom));z-index:150;background:var(--gold);color:var(--accent-ink);font-weight:700;padding:12px 18px;border-radius:14px;max-width:calc(100% - 32px);box-shadow:0 10px 30px rgba(0,0,0,.4);text-align:center}
.net{position:fixed;left:50%;transform:translateX(-50%);top:calc(10px + env(safe-area-inset-top));z-index:160;background:var(--danger);color:#fff;padding:8px 14px;border-radius:999px;font-size:14px;max-width:calc(100vw - 32px);text-align:center}

/* Anmeldeseite */
.landing{max-width:480px;margin:0 auto;padding:calc(36px + env(safe-area-inset-top)) 16px 40px;display:flex;flex-direction:column;gap:22px}
.lhero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.lhero h1{background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo{border-radius:50%}
.lvl b{color:var(--accent-hi)!important}
.lcard{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px}
.refbox{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--glow);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.refbox>div{display:flex;flex-direction:column}
.refbox .i{color:var(--accent);width:28px;height:28px}
.lfoot{text-align:center;color:var(--muted);font-size:14px;display:flex;flex-direction:column;gap:12px;align-items:center}
.ttools.center{justify-content:center}
.logo{flex:none}

/* Master und Team: Seitenleiste am Rechner */
.sshell{display:flex;min-height:100vh}
.side{position:sticky;top:0;height:100vh;width:250px;flex:none;display:flex;flex-direction:column;gap:12px;padding:18px 12px;border-right:1px solid var(--line);background:var(--bg-deep);overflow:auto}
.sbrand{display:flex;gap:10px;align-items:center;padding:0 6px 10px}
.sbrand b{display:block;font:600 15px/1.15 var(--display);color:var(--accent-hi)}
.snav{display:flex;flex-direction:column;gap:2px;flex:1}
.navlink{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 12px;border-radius:12px;border:0;background:none;color:var(--fg);cursor:pointer;text-align:left;font-weight:600}
.navlink:hover{background:var(--surface-2)}
.navlink[aria-current=page]{background:var(--gold);color:var(--accent-ink)}
.sfoot{display:flex;flex-direction:column;gap:2px;padding:10px 6px 0;border-top:1px solid var(--line)}
.smain{flex:1;min-width:0;display:flex;flex-direction:column}
.stop{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 20px;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.snavm{display:none}
.sview{padding:20px;max-width:1100px;width:100%;display:flex;flex-direction:column;gap:16px}
@media (max-width:900px){.side{display:none}.snavm{display:block;min-height:46px;border-radius:12px;border:1px solid var(--line);background:var(--surface);padding:0 12px;font-weight:600;max-width:60vw}.stop{padding:8px 12px}.sview{padding:14px}}
.frow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.frow .grow{display:flex;flex-direction:column}
.mlist{display:flex;flex-direction:column;gap:6px}
.mrow{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--fg);text-align:left;cursor:pointer;flex-wrap:wrap}
.mrow .grow{display:flex;flex-direction:column}
.mrow:hover{border-color:var(--accent)}
.ahead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.agrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.agrid .wide{grid-column:1/-1}
.spark{display:flex;align-items:flex-end;gap:4px;height:60px}
.spark i{flex:1;background:linear-gradient(180deg,var(--lime-soft),var(--lime));border-radius:3px 3px 0 0;min-height:3px}
.tree,.tree ul{list-style:none;margin:0;padding-left:22px}
.tree{padding-left:0}
.tree li{position:relative}
.tree ul{border-left:1px dashed var(--line);margin-left:16px}
.tnode{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0}
.tsp{display:inline-block;width:34px}
.ktable{display:flex;flex-direction:column;gap:4px}
.krow{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.krow .grow{display:flex;flex-direction:column}
.krow.off{opacity:.5}
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr))}
.kpi{display:flex;flex-direction:column;gap:4px}
.bars{display:flex;align-items:flex-end;gap:10px;height:170px;margin-top:10px}
.bars>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
.bars i{width:100%;max-width:60px;background:linear-gradient(180deg,var(--lime-soft),var(--lime));border-radius:6px 6px 0 0;min-height:3px}
.toplist{margin:8px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.grid2{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
.phone{width:390px;max-width:100%;height:min(780px,72vh);margin:0 auto;border:10px solid #000;border-radius:36px;overflow:hidden;background:#000;box-shadow:0 0 0 2px var(--line)}
.phone iframe{width:100%;height:100%;border:0;display:block}
.sq form{gap:10px}

/* Rundgang */
#tour{position:fixed;inset:0;z-index:200}
#tour .tshade{position:fixed;inset:0;background:rgba(5,5,3,.72)}
#tour .tspot{position:fixed;border-radius:16px;box-shadow:0 0 0 200vmax rgba(5,5,3,.72);outline:3px solid var(--accent);pointer-events:none;transition:all .25s ease}
#tour .tcard{position:fixed;left:50%;transform:translateX(-50%);width:min(460px,calc(100vw - 20px));max-height:calc(100vh - 24px);overflow:auto;background:var(--surface);border:1px solid var(--accent);border-radius:22px;padding:18px 20px 12px;display:flex;flex-direction:column;gap:8px;font-size:19px;line-height:1.5;box-shadow:0 22px 60px rgba(0,0,0,.5)}
#tour .tcard h2{font-size:24px}
#tour .tprog{display:flex;gap:5px}
#tour .tprog i{height:6px;flex:1;border-radius:3px;background:var(--line)}
#tour .tprog i.on{background:var(--accent)}
#tour .tbtns{display:flex;gap:10px;margin-top:6px}
#tour .tbtns .btn{flex:1;min-height:56px;font-size:18px}
#tour .tskip{background:none;border:0;color:var(--muted);text-decoration:underline;padding:10px;cursor:pointer;font-size:16px}
.tbig{font-size:19px;line-height:1.55}
.tbanner{align-items:center;text-align:center}
.tbic{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--accent-ink)}
.tbic .i{width:32px;height:32px}

/* Textmodus */
.txbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabh) + 12px + env(safe-area-inset-bottom));z-index:250;display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:min(760px,calc(100vw - 16px));padding:10px 12px;border-radius:14px;background:#18292b;border:1px solid var(--accent);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.txbar button,.txpop button{font:600 13px/1 var(--body);padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:var(--surface-2);color:var(--fg);cursor:pointer}
.txbar button.on{border-color:var(--accent);color:var(--accent)}
.txbar button.go,.txpop button.go{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.txdot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--glow)}
body.txmode{padding-bottom:110px}
body.txmode:not(.txnav) [data-tk]:hover{outline:1.5px dashed var(--accent);outline-offset:2px;cursor:text}
.txpop{position:absolute;z-index:260;width:320px;max-width:calc(100vw - 16px);background:#18292b;border:1.5px solid var(--accent);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:8px;box-shadow:0 12px 34px rgba(0,0,0,.5)}
.txpop textarea{width:100%;border:0;border-radius:8px;padding:8px;background:#fffdf5;color:#1d1b12;font-size:16px;resize:vertical}

/* Schriftgröße pro Gerät */
html.vorschau .pvbar{display:none}
html.vorschau .pvbar+.top{top:0}
@media (max-width:400px){.brand{font-size:14px}.mview{gap:14px}.card{padding:15px}.tab{font-size:11.5px}.btn{padding:10px 14px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.plist li>span.chip{flex:none}

.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Produktbilder */
.oimg{width:40px;height:40px;border-radius:12px;object-fit:cover;flex:none;background:#fff}
.oimg.big{width:64px;height:64px;border-radius:16px}
.obig{width:100%;max-height:300px;object-fit:contain;border-radius:16px;background:#fff}
.borow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px;border:1px solid var(--line);border-radius:12px}
.bprev{width:56px;height:56px;object-fit:cover;border-radius:10px;background:var(--surface-2)}
.borow select{max-width:220px}
/* Mastermind */
.mmcard>.i:first-child{color:var(--accent-hi)}
.mmcard.teaser{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:linear-gradient(120deg,rgba(220,171,79,.14),transparent 60%),var(--surface)}
.mmhero{min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.mmhero h2{background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:32px}
.vorteil{display:flex;gap:14px;align-items:flex-start}
.vorteil>.i{width:30px;height:30px;color:var(--accent-hi)}
.wcard{display:flex;gap:12px;align-items:center;text-align:left;cursor:pointer;width:100%}
.wcard .grow{display:flex;flex-direction:column;gap:4px}
.wcard:hover{border-color:var(--accent)}
.wol{display:flex;flex-wrap:wrap;gap:6px 12px}
.wo{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.wo .dot,.wo .oimg{width:22px;height:22px;border-radius:7px}
.wo .dot{border-radius:50%}
.warnrow p{color:var(--warn)}
.mmbox .label{display:flex;align-items:center;gap:6px;color:var(--accent-hi)}
.mmbox .label .i{width:16px;height:16px}
.ebenen{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));margin-top:8px}
.ebenen>div{display:flex;flex-direction:column;padding:10px 12px;border-radius:12px;background:var(--bg-deep);border:1px solid var(--line)}
.ebenen small{color:var(--muted);font-size:13px}
.orow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px}
@media (max-width:520px){.orow{grid-template-columns:1fr}}
.cbgrid.one{grid-template-columns:1fr}
.seg>button[aria-selected=true]{cursor:default}
.plist li>span.dot{flex:none}

/* Bild hineinziehen */
.bildfeld{display:flex;align-items:center;gap:14px;padding:12px;border:2px dashed var(--line);border-radius:16px;cursor:pointer;background:var(--bg-deep);transition:border-color .15s,background .15s}
.bildfeld img{width:110px;height:110px;object-fit:contain;border-radius:12px;background:#fff;flex:none}
.bildfeld .bfleer{display:grid;place-items:center;width:110px;height:110px;border-radius:12px;background:var(--surface-2);color:var(--muted);flex:none}
.bildfeld .bfleer .i{width:34px;height:34px}
.bftext{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.dropping{border-color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 14%,var(--bg-deep))!important;box-shadow:0 0 0 4px var(--glow)}
.krow[data-drop]{border-style:dashed}
@media (max-width:520px){.bildfeld img,.bildfeld .bfleer{width:80px;height:80px}}
/* Gemeinschaft */
.clamp2,.clamp3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.clamp2{-webkit-line-clamp:2}.clamp3{-webkit-line-clamp:3}
.infocard>.i:first-child{color:var(--lime-soft)}
.infocard.aktion{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));background:linear-gradient(120deg,rgba(220,171,79,.16),transparent 65%),var(--surface)}
.infocard.aktion>.i:first-child{color:var(--accent-hi)}
.post{display:flex;flex-direction:column;gap:8px;cursor:pointer}
.post:hover{border-color:var(--accent)}
.post.aktion{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.pbild{width:100%;max-height:220px;object-fit:cover;border-radius:12px}
.wsdetail h2{margin-top:4px}
.excard{display:flex;gap:14px;align-items:flex-start;text-align:left;cursor:pointer;width:100%}
.excard .grow{display:flex;flex-direction:column;gap:4px}
.excard:hover{border-color:var(--accent)}
.exav{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--accent-ink);font-weight:700;font-size:20px;flex:none}
.wol .chip{font-size:12px;padding:2px 9px}
.seg>label>span{text-align:center}

/* ================= Edel und exklusiv (0.5.0) =================
   Nur das Logo als Bild. Tiefes Petrol, Gold als feine Linie und Akzent, Creme statt Weiß,
   Überschriften in Lora (Serif), Text in Poppins Light, viel Ruhe und Luft. */
:root{
  --bg:#1f3536; --bg-deep:#152728; --surface:rgba(16,32,33,.55); --surface-2:rgba(255,255,255,.04); --line:rgba(220,182,110,.16); --line-strong:rgba(220,182,110,.38);
  --fg:#f3ecdc; --muted:#a9b8b0; --accent:#d8b06a; --accent-hi:#f0d79c; --accent-2:#a97a32; --accent-ink:#1d1a10;
  --ok:#bfc99a; --lime-soft:#d9c98f; --warn:#e5c07a;
  --display:"Lora",Georgia,serif; --body:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gold:linear-gradient(135deg,#8f6424 0%,#d8b06a 28%,#f6e2ab 50%,#c99a4c 72%,#8a5e20 100%);
  --r:20px;
}
body{font-weight:300;letter-spacing:.005em;
  background:radial-gradient(1100px 600px at 50% -240px,rgba(216,176,106,.16),transparent 70%),radial-gradient(900px 700px at 110% 110%,rgba(0,0,0,.35),transparent 60%),linear-gradient(180deg,#22393a,#142425) fixed}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#app{position:relative;z-index:1}
b,strong{font-weight:500}
h1,h2{font-family:var(--display);font-weight:500;letter-spacing:0}
h1{font-size:clamp(28px,7vw,40px);line-height:1.15}
h2{font-size:clamp(23px,5.4vw,29px)}
h3{font-family:var(--display);font-weight:500;font-size:20px}
h1 em,h2 em{font-style:italic;color:var(--accent-hi)}
.label{font:500 10.5px/1.3 var(--body);letter-spacing:.24em;color:var(--accent);opacity:.9}
h4{font:500 11px/1.3 var(--body);letter-spacing:.2em;color:var(--accent)}
.muted{color:var(--muted)}
.card,.tile,.oilcard,.mrow,.krow,.fitem,.search,.lcard,.sendbar,.cmp>div,.ebenen>div,.nlist button{background:var(--surface);border:1px solid var(--line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card{box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 20px 40px -28px rgba(0,0,0,.6)}
.tile:hover,.oilcard:hover,.mrow:hover,.tilecard:hover,.wcard:hover,.excard:hover,.post:hover{border-color:var(--line-strong)}
.tilecard>.i:first-child,.todo>.i:first-child,.tile>.i{color:var(--accent);stroke-width:1.4}
.i{stroke-width:1.5}
.btn{border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--accent-hi);font-weight:500;letter-spacing:.02em}
.btn:hover{border-color:var(--accent);background:rgba(216,176,106,.06)}
.btn.primary{background:var(--gold);color:var(--accent-ink);border:0;font-weight:500;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 24px -12px rgba(216,176,106,.7)}
.btn.danger{color:var(--danger);border-color:rgba(239,138,116,.4)}
.chip{border-color:var(--line-strong);font-weight:400;letter-spacing:.02em}
.chip.on{background:var(--gold);border:0;color:var(--accent-ink);font-weight:500}
.chip.ok{color:var(--ok);border-color:rgba(191,201,154,.4)}
.field>span{font-weight:400;color:var(--muted);font-size:14px;letter-spacing:.02em}
.field input,.field select,.field textarea,.inp{background:rgba(0,0,0,.18);border:1px solid var(--line);border-radius:14px}
.seg{background:rgba(0,0,0,.2);border:1px solid var(--line);border-radius:999px}
.seg>button,.seg>label>span{border-radius:999px;font-weight:400}
.seg>button[aria-selected=true],.seg input:checked+span{background:var(--gold);color:var(--accent-ink);font-weight:500}
.bar{height:3px;background:rgba(255,255,255,.07)}
.bar>i{background:var(--gold)}
.top{background:rgba(21,39,40,.72);border-bottom:1px solid var(--line)}
.brand{font:500 17px/1.1 var(--display);color:var(--accent-hi);letter-spacing:.01em}
.tabs{background:rgba(16,30,31,.86);border-top:1px solid var(--line)}
.tab{font-weight:400;letter-spacing:.04em}
.tab[aria-current=page]{color:var(--accent-hi)}
.tab[aria-current=page]::before{height:2px;background:var(--gold);left:34%;right:34%}
.badge{background:#c0663f;font-weight:500}
/* Anmeldeseite */
.landing{padding-top:calc(48px + env(safe-area-inset-top));gap:26px}
.lhero{position:relative;gap:14px}
.lhero .glow{position:absolute;top:-30px;left:50%;width:min(420px,100vw);aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(circle,rgba(216,176,106,.22),transparent 62%);pointer-events:none}
.lhero .biglogo{position:relative;width:min(230px,62vw);height:auto;aspect-ratio:1;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(216,176,106,.18)}
.orn{display:flex;align-items:center;gap:12px;color:var(--accent)}
.orn i{display:block;width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
.orn i:last-child{transform:scaleX(-1)}
.orn b{display:block;width:6px;height:6px;transform:rotate(45deg);background:var(--accent)}
.claim{font:italic 500 19px/1.4 var(--display);color:var(--fg);opacity:.9;max-width:320px}
.lcard{border-radius:26px;padding:22px}
.refbox{background:rgba(216,176,106,.08);border:1px solid var(--line-strong)}
/* Start */
.greet.edel{padding:6px 2px 2px;gap:8px}
.greet.edel h1{font-size:clamp(30px,8vw,42px)}
.faden{background:var(--surface);border-color:var(--line-strong)}
.fitem{border-radius:16px;background:rgba(0,0,0,.16)}
.fitem .box{border:1.5px solid var(--accent);border-radius:50%}
.fitem[aria-pressed=true]{background:rgba(216,176,106,.07)}
.fitem[aria-pressed=true] .box{background:var(--gold)}
.fcount{font-family:var(--display);font-weight:500;color:var(--accent-hi)}
.lvl>.i{background:rgba(216,176,106,.1);color:var(--accent-hi);border-radius:50%}
.lvl b{font-family:var(--display);font-weight:500;font-size:22px}
.pts{font-family:var(--display);font-weight:500}
.mmcard.teaser,.infocard.aktion{background:linear-gradient(135deg,rgba(216,176,106,.12),transparent 55%),var(--surface);border-color:var(--line-strong)}
.mmhero{background:linear-gradient(135deg,rgba(216,176,106,.14),transparent 60%),var(--surface);border-color:var(--line-strong)}
.mmhero h2{font-size:34px}
.exav{background:transparent;border:1px solid var(--line-strong);color:var(--accent-hi);font:500 20px var(--display)}
.bigcode{font-family:var(--display);letter-spacing:.08em}
.num.big{font-family:var(--display);font-weight:500}
.qr{border-radius:18px;box-shadow:0 0 0 1px var(--line-strong)}
/* Master am Rechner */
.side{background:rgba(14,26,27,.85);border-right:1px solid var(--line)}
.sbrand b{font:500 16px/1.15 var(--display)}
.navlink{font-weight:400;border-radius:999px}
.navlink[aria-current=page]{background:var(--gold);color:var(--accent-ink);font-weight:500}
.stop{background:rgba(21,39,40,.72);border-bottom:1px solid var(--line)}
.mcard{background:linear-gradient(180deg,#1d3334,#162a2b);border:1px solid var(--line-strong);border-radius:26px 26px 0 0}
@media (min-width:700px){.mcard{border-radius:26px}}
.toast{background:var(--gold);border-radius:999px;font-weight:500}
/* Nachbestellen fällig (0.6.0) */
.card.bestellen{display:flex;gap:14px;align-items:flex-start;border-color:var(--line-strong);background:linear-gradient(135deg,rgba(216,176,106,.1),transparent 60%),var(--surface)}
.card.bestellen .grow{display:flex;flex-direction:column;gap:4px}
.card.bestellen .row{margin-top:6px}

/* Willkommens-Slide beim ersten Login und Begrüßung mit Logo (0.6.0) */
#willkommen{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:24px 18px calc(24px + env(safe-area-inset-bottom));overflow:auto;
  background:radial-gradient(900px 600px at 50% 0%,rgba(216,176,106,.2),transparent 65%),linear-gradient(180deg,#22393a,#122122);opacity:0;transition:opacity .35s ease}
#willkommen.an{opacity:1}
.wk{position:relative;max-width:440px;width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;transform:translateY(14px);transition:transform .5s ease}
#willkommen.an .wk{transform:none}
.wk .glow{position:absolute;top:-40px;left:50%;width:min(440px,115vw);aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(circle,rgba(216,176,106,.24),transparent 62%);pointer-events:none}
.wklogo{position:relative;width:min(210px,58vw);height:auto;aspect-ratio:1;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),0 0 0 1px rgba(216,176,106,.2)}
.wk h1{font-size:clamp(30px,8.5vw,40px)}
.wksub{max-width:340px}
.wkbtns{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px;margin-top:10px}
.greet.edel{flex-direction:row;align-items:center;gap:14px}
.greet.edel>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.glogo{width:52px;height:52px;flex:none;box-shadow:0 0 0 1px var(--line-strong),0 10px 24px -12px rgba(0,0,0,.6)}
@media (max-width:380px){.glogo{width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){#willkommen,.wk{transition:none}}

/* Konto: Anfangsbuchstaben-Bild, Konto-Fenster, Profilkarte (0.6.1) */
.avatar{display:inline-grid;place-items:center;width:40px;height:40px;margin-left:4px;border-radius:50%;border:1px solid var(--line-strong);background:radial-gradient(circle at 30% 25%,rgba(240,215,156,.22),rgba(216,176,106,.06));color:var(--accent-hi);font:500 15px/1 var(--display);letter-spacing:.04em;cursor:pointer;flex:none}
.avatar:hover{border-color:var(--accent)}
.avatar.big{width:58px;height:58px;font-size:22px;margin:0;cursor:default}
.kontokarte{display:flex;align-items:center;gap:14px;text-align:left;width:100%;color:var(--fg)}
button.kontokarte{cursor:pointer}
.kontokarte .kk{display:flex;flex-direction:column;gap:3px;min-width:0}
.kontokarte .kk b{font:500 19px/1.2 var(--display)}
.kontokarte .kk .muted{overflow:hidden;text-overflow:ellipsis}
.kontokarte>.i:last-child{color:var(--muted)}
@media (max-width:380px){.topbtns .iconbtn{width:40px}.avatar{width:36px;height:36px}}
@media (max-width:600px){.stop [data-act=txstart],.stop [data-act=handy]{display:none}.snavm{max-width:48vw;min-width:0}.stop{gap:4px}.stop .topbtns{gap:0}}

/* 0.7.0: Über Golden Field, Bereiche, Startpfad, Termine, Experten mit Foto, Produktkarten */
.exav.foto{object-fit:cover;padding:0;border:1px solid var(--line-strong);background:var(--surface-2)}
.exav.gross{width:96px;height:96px;font-size:34px}
.exkopf{display:flex;gap:16px;align-items:center;margin-bottom:6px}
.exkopf>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.exkopf .mhead{margin:0}
.excard .label{font-size:9.5px}
.kontaktbox .stack0{display:flex;flex-direction:column;gap:6px}
.kontaktbox a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;word-break:break-word}
.kontaktbox .i{width:18px;height:18px;color:var(--accent)}
.warntext{color:var(--warn);display:inline-flex;align-items:center;gap:4px}
.warntext .i{width:14px;height:14px}
.note.warn{border-left-color:var(--warn);color:var(--fg);display:flex;gap:8px;align-items:flex-start}
.note.ok{border-left-color:var(--ok);color:var(--fg)}
.berchips .chip{font-family:var(--display);font-size:15px}
.bermotto{font:italic 400 16px/1.4 var(--display);color:var(--accent-hi);margin:-4px 0 2px}
/* Über Golden Field */
.ueberkarte{display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;width:100%;color:inherit;
  background:linear-gradient(135deg,rgba(216,176,106,.14),transparent 60%),var(--surface);border-color:var(--line-strong)}
.ueberkarte .ulogo{width:46px;height:46px;border-radius:50%;flex:none;box-shadow:0 0 0 1px var(--line-strong)}
.ueberkarte>div{flex:1;display:flex;flex-direction:column;gap:3px}
.ueberkarte b{font:500 17px/1.3 var(--display)}
.ueber{display:flex;flex-direction:column;gap:22px;overflow-x:clip}
.uhero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:10px 4px 4px}
.uhero .glow{position:absolute;top:-40px;left:50%;width:min(420px,110vw);aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(circle,rgba(216,176,106,.22),transparent 62%);pointer-events:none}
.uhero .logo{position:relative;width:min(150px,40vw);height:auto;aspect-ratio:1;border-radius:50%;box-shadow:0 24px 50px -20px rgba(0,0,0,.6),0 0 0 1px rgba(216,176,106,.2)}
.uhero h1{font-size:clamp(26px,7vw,36px)}
.uhero .claim{max-width:380px;font-size:17px}
.ukern{font:italic 500 15px/1.3 var(--display);color:var(--accent-hi);letter-spacing:.02em}
.uvision{margin:0;padding:24px 22px;display:flex;flex-direction:column;gap:10px;border-color:var(--line-strong);
  background:linear-gradient(160deg,rgba(216,176,106,.12),transparent 55%),var(--surface)}
.uvision blockquote{margin:0;font:italic 500 clamp(20px,5vw,24px)/1.45 var(--display);color:var(--fg)}
.umission{display:grid;gap:12px}
@media (min-width:640px){.umission{grid-template-columns:repeat(3,1fr)}}
.umission .card{position:relative;padding:18px;display:flex;flex-direction:column;gap:8px}
.unum{font:500 30px/1 var(--display);background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.ufisch{padding:22px;display:flex;flex-direction:column;gap:14px}
.ufhead{display:flex;align-items:center;gap:14px}
.fisch{width:62px;height:40px;flex:none;fill:#e9c46f;filter:drop-shadow(0 6px 14px rgba(216,176,106,.35))}
.fisch circle{fill:#1f2a22}
.ufliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ufliste li{display:flex;flex-direction:column;gap:2px;padding-left:16px;border-left:2px solid var(--accent)}
.ufliste b{font:500 17px/1.3 var(--display);color:var(--accent-hi)}
.ukopf{font:italic 500 17px/1.4 var(--display);text-align:center;color:var(--fg);padding-top:4px}
.ubereiche{display:grid;gap:12px}
@media (min-width:640px){.ubereiche{grid-template-columns:repeat(3,1fr)}}
.ber{display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer;color:inherit;padding:18px;border-left:3px solid var(--accent)}
.ber p{font:italic 400 15px/1.4 var(--display);color:var(--muted)}
.ber .small{display:inline-flex;align-items:center;gap:4px;color:var(--accent-hi)}
.ber .i{width:16px;height:16px}
.ber-bewegung{border-left-color:#c7e084} .ber-persoenlichkeit{border-left-color:#e9c46f} .ber-nervensystem{border-left-color:#9fc6c0}
.chip.ber-bewegung.on{background:#c7e084} .chip.ber-nervensystem.on{background:#9fc6c0}
/* Startpfad */
.fitem.pfad .box .num{font-size:13px;color:var(--accent-hi)}
.fitem.pfad .ftext{display:flex;flex-direction:column;gap:2px}
/* Termine */
.ttag{display:flex;flex-direction:column;align-items:center;justify-content:center;width:54px;height:58px;flex:none;border-radius:14px;
  background:linear-gradient(160deg,rgba(216,176,106,.2),rgba(216,176,106,.04));border:1px solid var(--line-strong);line-height:1}
.ttag b{font:500 24px/1 var(--display);color:var(--accent-hi)}
.ttag span{font:500 10px/1.4 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.post.termin .trow{display:flex;gap:14px;align-items:center}
.post.termin .trow>.grow{display:flex;flex-direction:column;gap:4px}
.post.termin h3{font-size:18px}
.tflyer{width:64px;height:84px;object-fit:cover;border-radius:10px;flex:none;box-shadow:0 0 0 1px var(--line)}
.terminkarte{align-items:center}
.terminkarte .ttag{width:48px;height:52px}
.frow .ttag{width:46px;height:50px}
.frow .ttag b{font-size:20px}
form .nurtermin{display:none}
form:has(input[name=art][value=termin]:checked) .nurtermin{display:flex}
form:has(input[name=art][value=termin]:checked) .nichttermin{display:none}
/* Produktkarten */
.karteklein{display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:10px;border-radius:16px;cursor:pointer;color:inherit;
  background:linear-gradient(135deg,rgba(216,176,106,.1),transparent 60%),var(--surface);border:1px solid var(--line-strong)}
.karteklein img{width:62px;height:86px;object-fit:cover;object-position:top;border-radius:10px;flex:none}
.karteklein>span{display:flex;flex-direction:column;gap:3px}
.karteklein b{font:500 17px var(--display);color:var(--accent-hi)}
.kartegross{width:100%;height:auto;border-radius:16px;display:block;box-shadow:0 0 0 1px var(--line)}
.kartengrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.kartezelle{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px;cursor:pointer;color:inherit}
.kartezelle img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top;border-radius:9px}
.kartezelle b{font-size:14px;font-weight:500}

/* 1.0: Gruppen und Push */
.gav{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;flex:none;object-fit:cover;background:linear-gradient(150deg,rgba(216,176,106,.3),rgba(216,176,106,.06));border:1px solid var(--line-strong);font:500 21px var(--display);color:var(--accent-hi)}
.gav.gross{width:64px;height:64px;border-radius:18px;font-size:28px}
.gav.ber-bewegung{border-color:#c7e084} .gav.ber-nervensystem{border-color:#9fc6c0}
.gcard{display:flex;gap:14px;align-items:center;text-align:left;cursor:pointer;width:100%;color:inherit}
.gcard .grow{display:flex;flex-direction:column;gap:3px}
.gcard b{font:500 18px/1.25 var(--display)}
.okt{color:var(--ok);display:inline-flex;gap:4px;align-items:center}.okt .i{width:14px;height:14px}
.ghead{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.ghead .grow{display:flex;flex-direction:column;gap:6px;min-width:180px}
.gregeln summary{cursor:pointer;color:var(--accent);font-size:14px}
.gneu textarea{resize:vertical;min-height:64px}
.filebtn{cursor:pointer}
.gfeed{gap:12px}
.gpost.card{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.gpost.st-versteckt{opacity:.55}
.gpost.st-gemeldet{border-color:var(--warn)}
.gmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gname{font-weight:500;color:var(--accent-hi)}
.mmstern .i{width:15px;height:15px;color:var(--accent)}
.gtext{white-space:normal;word-break:break-word;line-height:1.55}
.gbild{width:100%;max-height:420px;object-fit:cover;border-radius:12px}
.gakt{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gakt .linkbtn{display:inline-flex;align-items:center;gap:5px;font-size:14px;color:var(--muted);background:none;border:0;padding:4px 0;cursor:pointer}
.gakt .linkbtn .i{width:18px;height:18px}
.gakt .linkbtn.an{color:#ef8a74}.gakt .linkbtn.an .i{fill:#ef8a74;stroke:#ef8a74}
.gantworten{display:flex;flex-direction:column;gap:10px;border-left:2px solid var(--line-strong);padding-left:12px;margin-top:2px}
.gpost.antwort{display:flex;flex-direction:column;gap:4px}
.gantwf{align-items:flex-end}
.gantwf textarea{min-height:42px}
.pushkarte .row>.i{color:var(--accent);margin-top:2px}
.pushkarte .row>div{display:flex;flex-direction:column;gap:3px}
.pushangebot>div{display:flex;flex-direction:column;gap:6px}
.pushangebot .row{margin-top:4px}
.dateiinp{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.field .dateibtn{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;cursor:pointer;margin-top:2px}
.field .dateibtn .i{width:16px;height:16px}
.dateiname{display:block;margin-top:4px;word-break:break-all}
fieldset.field{border:0;padding:0;margin:0;min-width:0}
fieldset.field>span{display:block;margin-bottom:6px}
fieldset.field .row{gap:8px 18px}
.mcard .obig.oelbild{background:transparent;width:min(100%,300px);height:auto;aspect-ratio:1;object-fit:cover;margin:0 auto;display:block;max-height:none}
.oilcard .oimg{width:48px;height:48px;background:transparent}

/* 1.1: Kunden und Berater */
.mmnav{margin:-2px 0 4px}
.mmnav .chip{font-size:14px}
.left{text-align:left} .self-end{align-self:end;padding-bottom:10px}
.schrankleiste{padding:12px 14px}
.schrankkarte{display:flex;flex-direction:column;gap:10px;padding:14px}
.schrankkarte .linkbtn.grow{display:flex;flex-direction:column;gap:2px;background:none;border:0;color:inherit;cursor:pointer;padding:0}
.schrankkarte textarea{min-height:52px}
.lrphero{display:flex;flex-direction:column;gap:4px;align-items:flex-start;background:linear-gradient(135deg,rgba(216,176,106,.14),transparent 60%),var(--surface);border-color:var(--line-strong)}
.lrpzahl{font:500 34px/1.1 var(--display);color:var(--accent-hi)}
.anmbox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line-strong);border-radius:14px;margin:6px 0;background:rgba(216,176,106,.06)}
.anmbox>.small{display:inline-flex;gap:6px;align-items:center;flex:1}
.anmbox .i{width:16px;height:16px}
.anmbox.an{border-color:var(--ok)}
.anmliste{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.rzkarte{display:flex;gap:14px;align-items:center;text-align:left;cursor:pointer;width:100%;color:inherit}
.rzkarte .grow{display:flex;flex-direction:column;gap:3px}
.rzkarte b{font:500 18px/1.25 var(--display)}
.rzoele{display:flex;flex:none}
.rzoele>*{margin-left:-10px;box-shadow:0 0 0 2px var(--bg)} .rzoele>*:first-child{margin-left:0}
.herzan .i{color:#ef8a74;fill:#ef8a74}
.zutaten{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.zutaten li{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:8px 10px;border:1px solid var(--line);border-radius:12px}
.zutaten .linkbtn{display:flex;gap:10px;align-items:center;background:none;border:0;color:inherit;cursor:pointer;text-align:left;padding:0}
.zutaten .linkbtn>span{display:flex;flex-direction:column}
.tropfen{font:500 16px var(--display);color:var(--accent-hi);white-space:nowrap}
.zrow .tropfenin{width:80px;flex:none}
.bgkarte{display:flex;gap:12px;align-items:center;text-align:left;cursor:pointer;width:100%;color:inherit}
.bgkarte .grow{display:flex;flex-direction:column;gap:3px}
.bgkarte .i{width:15px;height:15px;vertical-align:-2px}
.bgkarte.hot{border-color:var(--warn)}
.bgschritt{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.bgschritt.done .grow{opacity:.5;text-decoration:line-through}
.bgschritt.hot .grow{color:var(--warn)}
.fbox{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--accent);background:transparent;display:grid;place-items:center;cursor:pointer;flex:none;color:var(--accent-ink)}
.fbox[aria-pressed=true]{background:var(--gold)}
.fbox .i{width:16px;height:16px}
.tlkarte b{font:500 18px var(--display)}
.tltext{padding:12px 14px;border-radius:14px;background:rgba(0,0,0,.18);border:1px solid var(--line);line-height:1.55;word-break:break-word}
.tlbild{width:100%;max-height:360px;object-fit:cover;border-radius:12px}
.lekbox{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--accent);display:grid;place-items:center;flex:none;font:500 14px var(--display);color:var(--accent-hi)}
.lekkarte.fertig .lekbox{background:var(--gold);color:var(--accent-ink);border:0}
.lekkarte.fertig .lekbox .i{width:18px;height:18px}
.lektion h2{font-size:clamp(24px,6vw,30px)}
.lektext{line-height:1.65}
.tmkpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.tmkpis .kpi{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface);cursor:pointer;color:inherit}
.tmkpis .kpi b{font:500 24px var(--display);color:var(--accent-hi)}
.tmkpis .kpi span{font-size:12px;color:var(--muted);line-height:1.25}
.tmkpis .kpi.on{border-color:var(--accent);background:rgba(216,176,106,.1)}
.ebene{font:500 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);flex:none;width:58px}
.tmliste .krow{flex-wrap:wrap}
.schrankkarte .linkbtn.grow{align-items:flex-start;text-align:left}

/* 1.2: Die Goldene Stunde und der Kompass */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wissenstars{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:560px){.wissenstars{grid-template-columns:1fr 1fr}}
.ritualkarte{align-items:center;background:radial-gradient(240px 120px at 0% 50%,rgba(233,196,111,.18),transparent 70%),var(--surface);border-color:var(--line-strong)}
.ritualkarte.live{border-color:var(--accent);box-shadow:0 0 0 1px rgba(233,196,111,.35),0 18px 40px -20px rgba(233,196,111,.5)}
.rpuls{width:40px;height:40px;border-radius:50%;flex:none;background:radial-gradient(circle,#fbe7a8 0%,#e9c46f 45%,rgba(214,162,64,.15) 72%,transparent 74%);animation:rpuls 4s ease-in-out infinite}
.rpuls.ruhig{animation-duration:7s}
@keyframes rpuls{0%,100%{transform:scale(.72);opacity:.75}50%{transform:scale(1);opacity:1}}
.kompasskarte .i:first-child{color:var(--accent)}
.rihero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:18px 6px 10px;overflow-x:clip}
.rihero h1{font-size:clamp(28px,7.5vw,40px)}
.rihero .claim{font-size:16px;max-width:380px}
.rkreis{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#fff3cc 0%,#e9c46f 38%,rgba(214,162,64,.25) 66%,transparent 70%);box-shadow:0 0 80px rgba(233,196,111,.35);animation:rpuls 9s ease-in-out infinite}
.rkreis.atmet{animation-duration:6s}
.ricd{font-size:16px;color:var(--muted)} .ricd b{font:500 22px var(--display);color:var(--accent-hi)}
.rilive{font-size:15px;color:var(--muted)} .rilive b{font:500 28px var(--display);color:var(--accent-hi);margin-right:4px}
.rzname{font:500 19px var(--display)}
.wolke{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;align-items:baseline;padding:8px 0}
.wolke span{font:italic 500 calc(15px * var(--s)) var(--display);color:var(--accent-hi);line-height:1.2}
#atem{position:fixed;inset:0;z-index:240;display:flex;flex-direction:column;padding:calc(14px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  background:radial-gradient(700px 700px at 50% 45%,rgba(233,196,111,.16),transparent 65%),linear-gradient(180deg,#1b3031,#0e1b1c);opacity:0;transition:opacity .4s ease;color:var(--fg)}
#atem.an{opacity:1}
.atemkopf{display:flex;align-items:center;gap:10px}
.atemkopf .label{flex:1}
.atemkopf #atemlive{color:var(--accent-hi)}
.atemmitte{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;text-align:center}
.atemkreis{position:relative;width:min(46vw,220px);aspect-ratio:1;border-radius:50%;transform:scale(1);transition-property:transform;transition-timing-function:ease-in-out;
  background:radial-gradient(circle,#fff6d8 0%,#f0cf7e 34%,#d6a240 58%,rgba(156,106,28,.25) 70%,transparent 72%);box-shadow:0 0 120px rgba(233,196,111,.45)}
.atemkreis .glow{position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,rgba(233,196,111,.22),transparent 65%)}
.atemkreis.klein{width:110px;animation:rpuls 7s ease-in-out infinite}
.atemtext{font:500 clamp(28px,8vw,40px) var(--display);color:var(--accent-hi);margin-top:30px}
.atemzahl{font-size:20px;color:var(--muted);min-height:26px}
.atemfuss{text-align:center;color:var(--muted)}
.atemwort{width:100%;max-width:340px}
/* Kompass */
.kphero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 4px}
.kphero h1{font-size:clamp(26px,7vw,36px)}
.kphero .claim{font-size:16px;max-width:400px}
.kpnadel{width:64px;height:64px;fill:none;stroke:var(--accent);stroke-width:1.5}
.kpnadel path{fill:var(--gold);fill:#e9c46f;stroke:none;transform-origin:32px 32px;animation:kpdreh 6s ease-in-out infinite}
.kpnadel circle:last-child{fill:#1f2a22;stroke:none}
@keyframes kpdreh{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(18deg)}}
.kpchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.kpchips .chip{font-size:15px;padding:10px 14px}
.kpweg{margin-top:6px}
.kpber{display:flex;flex-direction:column;gap:4px;border-left:3px solid var(--accent)}
.kpber b{font:500 22px var(--display)}
.kpber p{font:italic 400 15px var(--display);color:var(--muted)}
.kpsek{gap:10px}

/* =====================================================================
   Design „Lichtfeld“ (1.3) – goldenes Feld zur goldenen Stunde.
   Nur aktiv mit html[data-design=lichtfeld]; „Klassisch“ bleibt unberührt.
   ===================================================================== */
html[data-design=lichtfeld]{
  --bg:#0f1d1e; --bg-deep:#0a1516; --surface:rgba(23,42,42,.72); --surface-2:rgba(255,248,230,.05);
  --line:rgba(247,223,165,.12); --line-strong:rgba(247,223,165,.28);
  --fg:#f3eee3; --muted:#a9b8ad; --accent:#e9b85c; --accent-hi:#f7dfa5; --accent-ink:#1c1608; --sage:#a9bfa3;
  --serif:ui-serif,"New York","Lora",Georgia,serif; --display:var(--serif);
  --r:22px; --tabh:64px; --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.32,.5,1);
}
html[data-design=lichtfeld] body{background:radial-gradient(1200px 700px at 50% -200px,rgba(233,184,92,.10),transparent 70%),linear-gradient(180deg,#0f1d1e,#0a1516) fixed}
html[data-design=lichtfeld] body::after{opacity:.035}
/* Schrift: große, ruhige Serifen für Überschriften, Labels in Kursiv statt Großbuchstaben */
html[data-design=lichtfeld] h1,html[data-design=lichtfeld] h2,html[data-design=lichtfeld] h3{font-family:var(--serif);font-weight:500;letter-spacing:-.015em}
html[data-design=lichtfeld] h1{font-size:clamp(34px,9vw,52px);line-height:1.02}
html[data-design=lichtfeld] h2{font-size:clamp(28px,7.4vw,38px);line-height:1.06}
html[data-design=lichtfeld] h3{font-size:21px}
html[data-design=lichtfeld] h1 em,html[data-design=lichtfeld] h2 em{font-style:normal;color:inherit}
html[data-design=lichtfeld] .label{font:italic 400 14px/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--accent-hi);opacity:1}
html[data-design=lichtfeld] .shead{margin-top:6px}
html[data-design=lichtfeld] .shead>div>p.muted{font-size:15.5px;max-width:58ch}
/* Flächen: zwei Ebenen statt überall gleicher Karten */
html[data-design=lichtfeld] .card,html[data-design=lichtfeld] .tile,html[data-design=lichtfeld] .oilcard,html[data-design=lichtfeld] .krow,html[data-design=lichtfeld] .mrow{background:var(--surface);border:1px solid var(--line);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(255,250,235,.05) inset}
html[data-design=lichtfeld] .card{border-radius:24px;padding:20px}
html[data-design=lichtfeld] .tile{border-radius:20px}
html[data-design=lichtfeld] .tilecard b,html[data-design=lichtfeld] .tile b{font:500 18px/1.25 var(--serif)}
html[data-design=lichtfeld] :is(.card,.tile,.oilcard,.chip,.btn,.krow,.mrow,.schnell button):active{transform:scale(.975);transition:transform .12s var(--ease)}
html[data-design=lichtfeld] .btn{border-radius:999px;min-height:50px;font-weight:500}
html[data-design=lichtfeld] .btn.primary{background:linear-gradient(180deg,#f7dfa5,#e9b85c 55%,#d39a3c);color:var(--accent-ink);border:0;box-shadow:0 10px 30px -12px rgba(233,184,92,.75),0 1px 0 rgba(255,255,255,.5) inset}
html[data-design=lichtfeld] .chip.on{background:var(--accent-hi);color:var(--accent-ink)}
html[data-design=lichtfeld] .inp,html[data-design=lichtfeld] .field input,html[data-design=lichtfeld] .field select,html[data-design=lichtfeld] .field textarea{border-radius:16px;background:rgba(5,12,12,.35)}
html[data-design=lichtfeld] .search{border-radius:999px}
/* Kopfzeile: auf der Startseite durchsichtig über dem Feld, beim Scrollen Glas */
html[data-design=lichtfeld] .top{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .3s,border-color .3s;view-transition-name:gftop}
html[data-design=lichtfeld].gescrollt .top,html[data-design=lichtfeld] body:not(:has(.feldhero)) .top{background:rgba(12,24,25,.66);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:var(--line)}
html[data-design=lichtfeld] .brand span{font:500 18px var(--serif)}
@media (max-width:520px){html[data-design=lichtfeld] .brand span{display:none}}
/* Untere Leiste: schwebende Glas-Pille, aktiver Reiter als Goldtropfen */
html[data-design=lichtfeld] .tabs{left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));padding:6px;border-radius:30px;border:1px solid var(--line-strong);background:rgba(12,25,26,.9);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);box-shadow:0 18px 50px -18px rgba(0,0,0,.8);view-transition-name:gfnav;max-width:520px;margin:0 auto}
html[data-design=lichtfeld] .tab{min-height:54px;border-radius:24px;font-size:11.5px;font-weight:500;gap:2px;letter-spacing:0;color:var(--muted);transition:color .25s}
html[data-design=lichtfeld] .tab::before{display:none}
html[data-design=lichtfeld] .tab[aria-current=page]{color:var(--accent-ink)}
html[data-design=lichtfeld] .tabpill{position:absolute;inset:0;z-index:-1;border-radius:24px;background:linear-gradient(180deg,#f7dfa5,#e9b85c);box-shadow:0 8px 24px -10px rgba(233,184,92,.9);view-transition-name:gfpill}
html[data-design=lichtfeld] .tab .i{position:relative}
html[data-design=lichtfeld] .tab .badge{top:4px;right:calc(50% - 22px)}
html[data-design=lichtfeld] .mview{padding-bottom:calc(var(--tabh) + 48px + env(safe-area-inset-bottom));gap:18px}
/* Das goldene Feld */
.feldhero,.landfeldwrap{position:relative;overflow:hidden;isolation:isolate}
html[data-design=lichtfeld] body{overflow-x:clip}
html[data-design=lichtfeld] body:has(.feldhero) .top{position:fixed;left:0;right:0}
.feldhero{margin:-16px calc(50% - 50vw) 0;min-height:min(60vh,540px);display:flex;align-items:flex-end;padding:calc(90px + env(safe-area-inset-top)) max(22px,calc(50vw - 360px)) 64px;border-radius:0 0 36px 36px}
.feldhero canvas.feld,.landfeldwrap canvas.feld{position:absolute;left:0;right:0;bottom:0;width:100%;height:62%;z-index:-1}
.feldhero.morgen,.landfeldwrap.morgen{background:linear-gradient(180deg,#24384a 0%,#7d6a78 42%,#e3a982 78%,#f2c98a 100%)}
.feldhero.tag,.landfeldwrap.tag{background:linear-gradient(180deg,#1f3a40 0%,#4f7f7a 45%,#c9c08f 82%,#f3d79b 100%)}
.feldhero.abend,.landfeldwrap.abend{background:linear-gradient(180deg,#141f2d 0%,#4a3446 40%,#b26a48 76%,#efa954 100%)}
.feldhero.nacht,.landfeldwrap.nacht{background:radial-gradient(1.5px 1.5px at 20% 18%,#fff8,transparent),radial-gradient(1px 1px at 62% 12%,#fff7,transparent),radial-gradient(1.5px 1.5px at 80% 28%,#fff6,transparent),radial-gradient(1px 1px at 38% 32%,#fff5,transparent),linear-gradient(180deg,#070f13 0%,#0e1f24 55%,#17302f 100%)}
.sonne{position:absolute;z-index:-2;left:58%;top:30%;width:min(70vw,420px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,240,200,.95) 0 9%,rgba(255,214,140,.45) 18%,rgba(255,190,110,.12) 42%,transparent 66%)}
.abend .sonne,.morgen .sonne{top:58%}
.nacht .sonne{top:22%;left:74%;width:min(36vw,190px);background:radial-gradient(circle,rgba(240,240,225,.9) 0 16%,rgba(220,230,220,.18) 30%,transparent 62%)}
.feldhero::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;z-index:-1;background:linear-gradient(180deg,transparent,rgba(10,21,22,.55) 70%,rgba(10,21,22,.85));pointer-events:none}
.fhtext{position:relative}
.fhdatum{font:italic 400 16px var(--serif);color:#fff3d6;opacity:.9;margin-bottom:6px}
.feldhero h1{font-size:clamp(46px,13vw,76px);line-height:.98;color:#fffaf0;text-shadow:0 2px 30px rgba(0,0,0,.35);letter-spacing:-.025em}
html[data-design=lichtfeld] .view-start{padding-top:16px}
/* Slides: wischbare Karten für heute */
.slides{display:flex;flex-direction:column;gap:12px;margin:-58px calc(50% - 50vw) 0;position:relative;z-index:2}
.sltrack{--rand:max(22px,calc(50vw - 360px));display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--rand);padding:0 0 6px var(--rand);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sltrack::after{content:"";flex:0 0 calc(var(--rand) - 12px)}
.sltrack::-webkit-scrollbar{display:none}
.slide{flex:0 0 min(84%,420px);scroll-snap-align:start;display:flex}
.slide:only-child{flex-basis:min(calc(100% - var(--rand)),720px)}
.slide>.card{flex:1;min-height:168px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;border-radius:28px;padding:22px;background:linear-gradient(160deg,rgba(40,62,58,.92),rgba(18,34,34,.94));border-color:var(--line-strong);box-shadow:0 24px 50px -26px rgba(0,0,0,.9)}
.slide>.card>.i:first-child{width:34px;height:34px;color:var(--accent-hi);stroke-width:1.3}
.slide>.card>.i:last-child{display:none}
.slide>.card b{font:500 23px/1.15 var(--serif)}
.slide>.card>div{display:flex;flex-direction:column;gap:6px}
.slide .ttag{width:56px;height:62px}
.slide .bestellen{flex-direction:column}
.slide .rpuls{width:54px;height:54px}
.sldots{display:flex;gap:6px;justify-content:center}
.sldots i{width:6px;height:6px;border-radius:3px;background:rgba(247,223,165,.3);transition:width .3s var(--ease),background .3s}
.sldots i.an{width:22px;background:var(--accent-hi)}
/* Schnellzugriff */
.schnell{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.schnell button{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;color:var(--fg);font-size:13px;cursor:pointer;padding:4px 0}
.schnell button span{display:grid;place-items:center;width:62px;height:62px;border-radius:22px;background:var(--surface);border:1px solid var(--line-strong);backdrop-filter:blur(12px)}
.schnell .i{width:26px;height:26px;color:var(--accent-hi);stroke-width:1.4}
/* Öle als Kacheln mit großen Bildern */
html[data-design=lichtfeld] .oilgrid{grid-template-columns:repeat(auto-fill,minmax(min(150px,46%),1fr));gap:12px}
html[data-design=lichtfeld] .oilcard{flex-direction:column;align-items:center;text-align:center;padding:16px 10px 14px;border-radius:24px;gap:10px;min-height:0}
html[data-design=lichtfeld] .oilcard>span{display:flex;flex-direction:column;gap:2px}
html[data-design=lichtfeld] .oilcard b{font:500 17px/1.2 var(--serif)}
html[data-design=lichtfeld] .oilcard .oimg{width:86px;height:86px;border-radius:26px;box-shadow:0 14px 30px -14px rgba(0,0,0,.8)}
html[data-design=lichtfeld] .oilcard .dot{width:58px;height:58px}
/* Bottom-Sheets mit Federung, nach unten ziehen zum Schließen */
html[data-design=lichtfeld] .mback{background:rgba(4,10,10,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadein .25s ease both}
html[data-design=lichtfeld] .mcard{border-radius:32px 32px 0 0;background:linear-gradient(180deg,rgba(30,52,51,.97),rgba(15,29,30,.98));border:1px solid var(--line-strong);padding-top:30px;animation:sheetrein .48s var(--spring) both;transition:transform .3s var(--ease)}
html[data-design=lichtfeld] .mcard::before{content:"";position:absolute;top:10px;left:50%;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:rgba(247,223,165,.35)}
html[data-design=lichtfeld] .mcard.zu{animation:sheetraus .22s ease-in both}
html[data-design=lichtfeld] .mback.zu{animation:fadeout .22s ease-in both}
@media (min-width:700px){html[data-design=lichtfeld] #modal{align-items:center}html[data-design=lichtfeld] .mcard{border-radius:30px;animation:sheetmitte .35s var(--spring) both}html[data-design=lichtfeld] .mcard::before{display:none}}
@keyframes sheetrein{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetraus{to{transform:translateY(100%)}}
@keyframes sheetmitte{from{transform:translateY(24px) scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes fadein{from{opacity:0}} @keyframes fadeout{to{opacity:0}}
/* Seitenübergänge */
::view-transition-old(root),::view-transition-new(root){animation-duration:.38s;animation-timing-function:var(--ease,ease)}
html[data-richtung=vor]::view-transition-old(root){animation-name:vt-raus-l}
html[data-richtung=vor]::view-transition-new(root){animation-name:vt-rein-r}
html[data-richtung=zurueck]::view-transition-old(root){animation-name:vt-raus-r}
html[data-richtung=zurueck]::view-transition-new(root){animation-name:vt-rein-l}
::view-transition-group(gfpill){animation-duration:.42s;animation-timing-function:cubic-bezier(.34,1.3,.5,1)}
@keyframes vt-rein-r{from{transform:translateX(22%);opacity:0}}
@keyframes vt-raus-l{to{transform:translateX(-10%);opacity:0}}
@keyframes vt-rein-l{from{transform:translateX(-22%);opacity:0}}
@keyframes vt-raus-r{to{transform:translateX(10%);opacity:0}}
/* Öl-Bild fliegt ins Sheet, das Sheet gleitet hoch */
html[data-design=lichtfeld] .mcard.vt{animation:none}
::view-transition-group(gfoel){z-index:10;animation-duration:.5s;animation-timing-function:cubic-bezier(.3,1.15,.4,1)}
::view-transition-old(gfoel),::view-transition-new(gfoel){animation-duration:.5s;height:100%;object-fit:cover}
::view-transition-new(gfsheet){animation:sheetrein .5s cubic-bezier(.34,1.2,.5,1) both}
@media (min-width:700px){::view-transition-new(gfsheet){animation:sheetmitte .4s cubic-bezier(.34,1.3,.5,1) both}}
/* Beim Scrollen geht die Sonne im Feld unter */
@supports (animation-timeline: scroll()){
  html[data-design=lichtfeld] .feldhero .sonne{animation:sonnesinkt linear both;animation-timeline:scroll(root);animation-range:0 420px}
  html[data-design=lichtfeld] .feldhero h1,html[data-design=lichtfeld] .fhdatum{animation:heroweg linear both;animation-timeline:scroll(root);animation-range:40px 380px}
}
@keyframes sonnesinkt{to{transform:translate(-50%,20%);opacity:.35}}
@keyframes heroweg{to{transform:translateY(-40px);opacity:0}}
/* Die eine orchestrierte Bewegung: der erste Start */
html[data-design=lichtfeld] .feldhero .fhtext{animation:aufgehen 1.1s .25s var(--ease) both}
html[data-design=lichtfeld] .slides{animation:aufgehen .9s .55s var(--ease) both}
@keyframes aufgehen{from{opacity:0;transform:translateY(22px)}}
/* Anmeldung über dem Feld */
.landbg{position:fixed;inset:auto 0 0 0;height:46vh;z-index:0;border-radius:0}
.landbg canvas.feld{height:100%}
.landbg .sonne{top:30%}
.landbg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0f1d1e 0%,transparent 45%)}
html[data-design=lichtfeld] .landing{position:relative;z-index:1}
html[data-design=lichtfeld] .lcard{background:rgba(15,29,30,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:30px}
/* Willkommen in drei Slides */
#willkommen.lichtfeld{padding:0;display:block;place-items:normal;background:#0f1d1e}
.wks{position:relative;width:100%;height:100%;display:flex;flex-direction:column}
.wkfeld{position:absolute;inset:0;z-index:0}
.wkfeld canvas.feld{height:48%}
.wkfeld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,21,22,.35),rgba(10,21,22,.1) 40%,rgba(10,21,22,.75))}
.wktrack{position:relative;z-index:1;flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.wktrack::-webkit-scrollbar{display:none}
.wkseite{flex:0 0 100%;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:calc(40px + env(safe-area-inset-top)) 28px 30px;color:#fffaf0}
.wkseite h1{font-size:clamp(38px,10vw,58px);line-height:1;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.wkseite p{font-size:18px;line-height:1.55;max-width:34ch;color:#f6eedd}
.wkseite .wklogo{width:96px;height:96px;margin-bottom:6px}
.wkfuss{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 28px calc(26px + env(safe-area-inset-bottom))}
.wkfuss .btn{width:100%;max-width:360px}
/* Darstellung wählen */
.designwahlen{display:grid;gap:10px}
.designwahl{display:grid;grid-template-columns:76px 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;text-align:left;padding:10px 14px 10px 10px;border-radius:18px;border:1px solid var(--line);background:transparent;color:inherit;cursor:pointer;font:inherit}
.designwahl b{align-self:end}
.designwahl .small{align-self:start}
.designwahl[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;background:rgba(233,184,92,.06)}
.dwbild{grid-row:1/3;display:block;width:76px;height:56px;border-radius:12px;position:relative;overflow:hidden;background:linear-gradient(180deg,#141f2d,#4a3446 50%,#efa954)}
.dw-lichtfeld .dwbild::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;background:repeating-linear-gradient(100deg,transparent 0 3px,rgba(247,206,120,.75) 3px 4px);-webkit-mask:linear-gradient(transparent,#000);mask:linear-gradient(transparent,#000)}
.dw-klassisch .dwbild{background:linear-gradient(180deg,#2d464a,#223739)}
.dwbild i{position:absolute;left:8px;height:6px;border-radius:3px;background:rgba(255,255,255,.3)}
.dwbild i:nth-child(1){top:10px;width:55%} .dwbild i:nth-child(2){top:22px;width:35%;background:rgba(247,223,165,.6)} .dwbild i:nth-child(3){display:none}
.dw-lichtfeld .dwbild i{display:none}
@media (prefers-reduced-motion:reduce){
  html[data-design=lichtfeld] *,html[data-design=lichtfeld] *::before,html[data-design=lichtfeld] *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* =====================================================================
   1.4 – aus der Nutzerstudie: Videothek, Routine, Idee für jetzt, Vorsicht,
   Etikett, Erfahrungen, ehrlicher Kompass, Darstellung (hell, Schrift, ruhig)
   ===================================================================== */
.anzeigezeile{display:flex;flex-direction:column;gap:6px}
.field-l{font-size:14px;color:var(--muted)}
.schriftseg .s1{font-size:14px}.schriftseg .s2{font-size:18px}.schriftseg .s3{font-size:23px}
/* Videothek */
.vgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr))}
.vkarte{display:flex;flex-direction:column;gap:10px;text-align:left;background:none;border:0;padding:0;color:var(--fg);cursor:pointer;min-width:0}
.vbild{position:relative;display:block;aspect-ratio:16/9;width:100%;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,var(--surface-2),var(--surface));border:1px solid var(--line)}
.vbild img{width:100%;height:100%;object-fit:cover;display:block}
.vleer{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent);opacity:.5}.vleer .i{width:40px;height:40px}
.vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(10,20,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff}
.vplay .i{width:30px;height:30px;stroke-width:1.4}
.vdauer{position:absolute;right:8px;bottom:8px;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-variant-numeric:tabular-nums}
.vgesehen{position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}.vgesehen .i{width:16px;height:16px;stroke-width:2.4}
.vtext{display:flex;flex-direction:column;gap:3px;min-width:0}
.vtext b{font-size:16px;line-height:1.3}
.vkarte.klein{flex-direction:row;align-items:center;gap:12px}
.vkarte.klein .vbild{width:120px;flex:none;border-radius:12px}
.vkarte.klein .vplay{width:34px;height:34px}.vkarte.klein .vplay .i{width:20px;height:20px}
.vrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.vrow .vkarte{flex:1;min-width:220px}
.vplayer{width:100%;max-height:62vh;border-radius:16px;background:#000;display:block}
.vextern img{width:100%;border-radius:12px}
.lernpfad .lpzahl{font-family:var(--display);font-size:22px;color:var(--muted)}.lernpfad .lpzahl b{color:var(--accent-hi);font-size:30px}
.lpliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.lpliste button{display:flex;align-items:center;gap:12px;width:100%;padding:8px 4px;color:var(--fg);text-decoration:none}
.lpnr{width:28px;height:28px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);font-size:13px;font-variant-numeric:tabular-nums}
.lpliste .fertig .lpnr{background:var(--accent);color:var(--accent-ink);border-color:transparent}.lpliste .fertig .lpnr .i{width:15px;height:15px;stroke-width:2.4}
.lpliste .jetzt .lpnr{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.lpliste .jetzt .grow{font-weight:500}
.oelvideos .vkarte{padding:4px 0}
/* Routine */
.routineab{gap:10px}
.rtkarte{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 14px;padding:14px 16px 8px}
.rtkarte>.row{grid-column:1/-1;justify-content:flex-end;margin-top:-4px}
.rtkarte.off{opacity:.55}
.rtzeit{font-family:var(--display);font-size:26px;font-variant-numeric:tabular-nums;color:var(--accent-hi);min-width:70px}
.rtkarte .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.rtkarte .linkbtn{padding:0;font:inherit;color:inherit;text-align:left}
.tagwahl{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.tagwahl legend{font-size:14px;color:var(--muted);margin-bottom:6px;padding:0}
.tagwahl label{position:relative}
.tagwahl input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tagwahl span{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:999px;border:1px solid var(--line-strong);font-size:14px}
.tagwahl input:checked+span{background:var(--gold);color:var(--accent-ink);border-color:transparent;font-weight:500}
.tagwahl input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.leerkarte{border-style:dashed}
.ideeknopf{width:100%}
.idee h3{margin:0}
/* Vorsicht, Mein Haushalt, Etikett */
.vorsicht{display:flex;flex-wrap:wrap;align-items:center;gap:6px;color:var(--warn)}.vorsicht .i{width:18px;height:18px}
.fuerdich{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--warn) 9%,transparent);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent)}
.fuerdich p{margin:0}.fuerdich .i{width:15px;height:15px;vertical-align:-2px}
.hhlink{display:inline-flex;align-items:center;gap:6px;text-align:left}
.oilcard{position:relative}
.ovor{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)}.ovor .i{width:14px;height:14px}
.etikett{padding:12px 14px;border-radius:14px;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--accent) 6%,transparent);display:flex;flex-direction:column;gap:6px}
.etikett p{margin:0;white-space:normal}
/* Erfahrungen */
.erfab{gap:10px}
.erf{margin:0;padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.erf p{margin:0 0 6px;font-style:italic}
.erf cite{font-style:normal;font-size:13px;color:var(--muted)}
.erf.entwurf{border-style:dashed;opacity:.85}
/* Ehrlicher Kompass, Wer sieht was */
.kpehrlich{border-color:var(--line-strong);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%),var(--surface)}
.kpehrlich p{margin:0}
.werSieht .wsrow{display:flex;flex-direction:column;gap:2px}.werSieht .wsrow p{margin:0}

/* Schriftgröße: Inhalte wachsen, Leisten bleiben */
html[data-schrift="2"]{--zf:1.14} html[data-schrift="3"]{--zf:1.3}
html[data-schrift="2"] .mview>:not(.feldhero):not(.slides),html[data-schrift="3"] .mview>:not(.feldhero):not(.slides),
html[data-schrift="2"] .slide>.card,html[data-schrift="3"] .slide>.card,
html[data-schrift="2"] #modal .mcard>*,html[data-schrift="3"] #modal .mcard>*,
html[data-schrift="2"] .sview,html[data-schrift="3"] .sview,
html[data-schrift="2"] .landing,html[data-schrift="3"] .landing,
html[data-schrift="2"] .fhtext,html[data-schrift="3"] .fhtext{zoom:var(--zf)}
html[data-schrift="3"] .tab span{font-size:13px}
html[data-schrift="2"] .mview>.chips.scroll,html[data-schrift="3"] .mview>.chips.scroll{margin-inline:calc(-16px / var(--zf));padding-inline:calc(16px / var(--zf))}
/* Ruhige Darstellung (in der App gewählt) */
html[data-ruhig=an] *,html[data-ruhig=an] *::before,html[data-ruhig=an] *::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}

/* ---------- Hell (für beide Designs) ---------- */
html[data-hell=hell]{
  --bg:#f3f5f0; --bg-deep:#e7ebe3; --surface:#ffffff; --surface-2:#f1f3ee; --line:#d6ddd3; --line-strong:#c8b48a; --fg:#1d2b26; --muted:#56645c;
  --accent:#8a5f12; --accent-hi:#6e4a0c; --accent-2:#a97a32; --accent-ink:#1d1a10; --glow:rgba(138,95,18,.12);
  --ok:#4f6b1f; --warn:#9a5b0a; --danger:#b23a22; --bad:#b23a22; --lime-soft:#6f7d2b; --sage:#6f8467;
  color-scheme:light;
}
html[data-hell=hell] body{background:radial-gradient(1000px 520px at 50% -220px,rgba(216,176,106,.18),transparent 70%),linear-gradient(180deg,#f6f7f2,#eef1ea) fixed;color:var(--fg)}
html[data-hell=hell] body::after{opacity:.018}
html[data-hell=hell] .top,html[data-hell=hell] .stop{background:rgba(250,251,247,.9);border-bottom-color:var(--line)}
html[data-hell=hell] .tabs{background:rgba(255,255,255,.95);border-top-color:var(--line)}
html[data-hell=hell] .side{background:#fbfcf9;border-right-color:var(--line)}
html[data-hell=hell] .mcard{background:#fff;border-color:var(--line)}
html[data-hell=hell] .mback{background:rgba(25,35,30,.42)}
html[data-hell=hell] .card{box-shadow:0 1px 2px rgba(20,40,30,.05),0 14px 30px -24px rgba(20,40,30,.35)}
html[data-hell=hell] .field input,html[data-hell=hell] .field select,html[data-hell=hell] .field textarea,html[data-hell=hell] .inp{background:#fff;border-color:#c9d1c6;color:var(--fg)}
html[data-hell=hell] .seg{background:#eef1ea}
html[data-hell=hell] .fitem{background:#f3f5f0}
html[data-hell=hell] .bar{background:#e3e8df}
html[data-hell=hell] .btn{color:var(--accent-hi)}
html[data-hell=hell] .btn.danger{color:var(--danger)}
html[data-hell=hell] .brand{color:var(--accent-hi)}
html[data-hell=hell] .refbox{background:rgba(138,95,18,.06)}
html[data-hell=hell] .lhero .biglogo{box-shadow:0 24px 50px -24px rgba(20,40,30,.45),0 0 0 1px rgba(138,95,18,.18)}
html[data-hell=hell] .vplay{background:rgba(20,30,25,.55)}
/* Lichtfeld in hell: der Himmel bleibt, die Flächen werden hell */
html[data-hell=hell][data-design=lichtfeld]{
  --surface:rgba(255,255,255,.9); --surface-2:#f1f3ee; --line:rgba(30,60,50,.13); --line-strong:rgba(138,95,18,.32);
  --fg:#1d2b26; --muted:#56645c; --accent:#8a5f12; --accent-hi:#6e4a0c; --accent-ink:#1c1608;
}
html[data-hell=hell][data-design=lichtfeld] body{background:radial-gradient(1100px 600px at 50% -200px,rgba(233,184,92,.16),transparent 70%),linear-gradient(180deg,#f6f7f2,#eceee6) fixed}
html[data-hell=hell][data-design=lichtfeld] .label{color:var(--accent)}
html[data-hell=hell][data-design=lichtfeld] .top{background:transparent;border-bottom-color:transparent}
html[data-hell=hell][data-design=lichtfeld] .chip.on{background:linear-gradient(180deg,#f7dfa5,#e9b85c);color:var(--accent-ink)}
html[data-hell=hell][data-design=lichtfeld].gescrollt .top,html[data-hell=hell][data-design=lichtfeld] body:not(:has(.feldhero)) .top{background:rgba(250,251,247,.86);border-bottom-color:var(--line)}
html[data-hell=hell][data-design=lichtfeld] body:has(.feldhero) .top .iconbtn,html[data-hell=hell][data-design=lichtfeld] body:has(.feldhero) .top .avatar{color:#fff}
html[data-hell=hell][data-design=lichtfeld].gescrollt .top .iconbtn,html[data-hell=hell][data-design=lichtfeld].gescrollt .top .avatar{color:var(--fg)}
html[data-hell=hell][data-design=lichtfeld] .tabs{background:rgba(255,255,255,.94);border-color:rgba(30,60,50,.14);box-shadow:0 18px 44px -20px rgba(20,40,30,.45)}
html[data-hell=hell][data-design=lichtfeld] .tab{color:var(--muted)}
html[data-hell=hell][data-design=lichtfeld] .tab[aria-current=page]{color:var(--accent-ink)}
html[data-hell=hell][data-design=lichtfeld] .slide>.card{background:#fff;border-color:rgba(30,60,50,.12);box-shadow:0 20px 44px -26px rgba(20,40,30,.5)}
html[data-hell=hell][data-design=lichtfeld] .slide>.card>.i:first-child{color:var(--accent)}
html[data-hell=hell][data-design=lichtfeld] .mcard{background:#fff;border-color:rgba(30,60,50,.12)}
html[data-hell=hell][data-design=lichtfeld] .mcard::before{background:rgba(30,60,50,.2)}
html[data-hell=hell][data-design=lichtfeld] .mback{background:rgba(25,35,30,.4)}
html[data-hell=hell][data-design=lichtfeld] .schnell span{background:#fff;border-color:rgba(30,60,50,.14)}
html[data-hell=hell][data-design=lichtfeld] .schnell .i{color:var(--accent)}
html[data-hell=hell][data-design=lichtfeld] .lcard{background:rgba(255,255,255,.92)}
html[data-hell=hell][data-design=lichtfeld] .inp,html[data-hell=hell][data-design=lichtfeld] .field input,html[data-hell=hell][data-design=lichtfeld] .field select,html[data-hell=hell][data-design=lichtfeld] .field textarea{background:#fff}
html[data-hell=hell][data-design=lichtfeld] .card,html[data-hell=hell][data-design=lichtfeld] .tile,html[data-hell=hell][data-design=lichtfeld] .oilcard,html[data-hell=hell][data-design=lichtfeld] .krow,html[data-hell=hell][data-design=lichtfeld] .mrow{box-shadow:0 1px 2px rgba(20,40,30,.04),0 14px 30px -24px rgba(20,40,30,.35)}
html[data-hell=hell][data-design=lichtfeld] .landbg::before{background:linear-gradient(180deg,#f3f5f0 0%,transparent 45%)}
html[data-hell=hell] #willkommen.lichtfeld{background:#0f1d1e}

.fuerdich .warnb{color:var(--warn);font-weight:500}
#modal .mbtns.oelakt{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#modal .mbtns.oelakt>.btn{min-width:0;padding-inline:10px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#modal .mbtns.oelakt>.btn.primary,#modal .mbtns.oelakt>a.btn,#modal .mbtns.oelakt>[data-act=schrank]{grid-column:1/-1;font-size:15px}

/* ---------- Version 1.5: Einrichtung, Aa-Knopf, Ansprechperson, Apotheke, Umfrage, Nachgespräch, Lücken ---------- */
.aabtn span{font:600 17px/1 var(--display);letter-spacing:.01em}
.einr h2{margin:0}
.einrschrift{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.einrwahl{display:grid;gap:4px;place-items:center;padding:14px 6px;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;min-height:96px}
.einrwahl[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.einrwahl .aa{font-weight:600;line-height:1}
.einrwahl.s1 .aa{font-size:20px}.einrwahl.s2 .aa{font-size:27px}.einrwahl.s3 .aa{font-size:34px}
.cb.big{font-size:17px;padding:6px 0}.cb.big input{width:24px;height:24px}
.ansprech .avatar{width:48px;height:48px;font-size:17px;margin:0}
.ansprech .grow{display:grid;gap:2px}
.privatcb{padding:10px 0 4px;border-top:1px solid var(--line)}
.privatcb>span{display:grid;gap:2px}
.werliest{display:flex;gap:6px;align-items:center}
.werliest .i{width:16px;height:16px;flex:none}
.rtwahl .oelwahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 12px;margin-bottom:8px}
.rtoele{margin:2px 0}
.rtoele .chip{font-size:12px;padding:2px 8px;min-height:0}
.npswahl{display:grid;grid-template-columns:repeat(11,1fr);gap:4px}
.npswahl label{position:relative}
.npswahl input{position:absolute;opacity:0;inset:0;margin:0}
.npswahl span{display:grid;place-items:center;min-height:42px;border-radius:10px;border:1px solid var(--line);font-weight:600;cursor:pointer}
.npswahl input:checked+span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.npswahl input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:420px){.npswahl{grid-template-columns:repeat(6,1fr)}}
.umfragekarte .row{margin-top:8px}
.nachg .row .inp{min-width:0}
.apo h3{margin:0}
.nurdruck{display:none}
.lktab{width:100%;border-collapse:collapse;font-size:14px}
.lktab th{text-align:left;font-weight:500;color:var(--muted);font-size:13px;padding:6px 8px;border-bottom:1px solid var(--line)}
.lktab td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.tabwrap{overflow-x:auto}
.fbkarte p{margin:0}
@media print{
  .top,.tabs,.backbtn,.noprint,.shead,#toast,#net,.hinweis{display:none!important}
  body{background:#fff!important;color:#000!important}
  .nurdruck{display:block}
  .apoliste .card{border:1px solid #999!important;background:#fff!important;box-shadow:none!important;break-inside:avoid;color:#000}
  .apoliste .muted,.apoliste .label{color:#333!important}
  .mview{zoom:1!important;padding:0!important}
}
.lktab td:nth-child(n+2),.lktab th:nth-child(n+2){text-align:center}
.lktab .linkbtn{padding:0;text-align:left}
/* 1.5 nach dem Klick-Test: Wörter statt nur Symbole, größere Leiste bei großer Schrift */
.aabtn{width:auto;min-width:44px;padding:0 8px;gap:4px;display:inline-flex;align-items:center}
.aabtn .aalabel{font-size:12px;font-weight:600;color:var(--muted)}
@media (max-width:360px){.aabtn .aalabel{display:none}}
.rtpausebtn{white-space:nowrap}
.schrankprivat .privatcb{margin:0}
.kpfragekarte{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
html[data-schrift="2"] .tab{font-size:14px} html[data-schrift="3"] .tab{font-size:15.5px}
html[data-schrift="2"] .tab .i{width:27px;height:27px} html[data-schrift="3"] .tab .i{width:29px;height:29px}
html[data-schrift="2"]{--tabh:72px} html[data-schrift="3"]{--tabh:78px}
html[data-schrift="3"] .tab span{font-size:15.5px}
/* Speichern und Absenden bleiben im Fenster immer sichtbar (Klick-Test: Knöpfe erst nach Scrollen) */
#modal .mcard form>.mbtns:last-child{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));z-index:2;margin:4px -18px calc(-18px - env(safe-area-inset-bottom));padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
html[data-hell=hell] #modal .mcard form>.mbtns:last-child{background:rgba(255,255,255,.96)}

/* ---------- Veranstaltungskalender (1.7) ---------- */
.kmonat{display:flex;flex-direction:column;gap:12px}
.kmkopf{display:flex;align-items:center;justify-content:space-between;gap:8px}
.kmkopf h3{margin:0;font:500 22px/1.2 var(--display);text-transform:capitalize}
.kmkopf .btn{min-width:48px;padding:8px}
.kmkopf .btn[disabled]{opacity:.35;cursor:default}
.kgitter{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.kwt{text-align:center;font-size:12px;color:var(--muted);padding-bottom:2px}
.ktag{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:46px;border-radius:12px;border:1px solid transparent;background:none;color:var(--fg);font:inherit;padding:2px}
.ktag b{font-weight:500;font-size:15px;line-height:1}
.ktag.leer{visibility:hidden}
.ktag.vorbei{color:color-mix(in srgb,var(--muted) 60%,transparent)}
.ktag.heute{border-color:var(--line)}
.ktag.heute b{color:var(--accent-hi)}
.ktag.hat{cursor:pointer;background:var(--surface-2)}
.ktag.hat b{font-weight:700}
.ktag.hat:hover{border-color:var(--accent)}
.ktag.sel{background:var(--accent);border-color:var(--accent)}
.ktag.sel b{color:var(--accent-ink)}
.kpunkte{display:flex;gap:3px;height:6px}
.kp{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.kp.workshop{background:var(--ok)}
.kp.ritual{background:var(--fg);box-shadow:0 0 0 1.5px var(--accent) inset}
.ktag.sel .kp{background:var(--accent-ink)}
.klegende{display:flex;gap:14px;flex-wrap:wrap;margin:0}
.klegende span{display:inline-flex;align-items:center;gap:6px}
.kmonatkopf{margin:10px 0 0;font:500 18px/1.3 var(--display);text-transform:capitalize;color:var(--muted)}
.kzeile{display:flex;flex-direction:column;gap:12px;padding:14px}
.kzinhalt{display:flex;align-items:center;gap:14px;background:none;border:0;padding:0;color:var(--fg);font:inherit;text-align:left;cursor:pointer;width:100%}
.kzinhalt .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.kart{display:inline-flex;align-items:center;gap:6px;color:var(--accent)}
.kart .i{width:16px;height:16px}
.kzeile.workshop .kart{color:var(--ok)}
.kalplus{align-self:flex-start}
.kabo .trow{display:flex;gap:14px;align-items:flex-start}
.kabo .trow>.i{width:28px;height:28px;color:var(--accent);flex:none}
.kabo h3{margin:0 0 4px}
html[data-schrift="3"] .ktag{min-height:54px}
html[data-schrift="3"] .ktag b{font-size:18px}
@media (min-width:640px){.kzeile{flex-direction:row;align-items:center}.kalplus{align-self:center;flex:none}}

/* ---------- Rechtliches (1.7.1) ---------- */
.checkliste{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.kartecheck{border-top:1px solid var(--line);padding-top:12px}
.lfoot .unabh{flex-basis:100%;margin:6px 0 0;text-align:center}
.bestellhinweis{margin:0}
.lfootlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;align-items:center}
.lfoot .unabh{max-width:34ch}

/* ---------- Texte (1.7.2) ---------- */
.txzeile{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.txzeile.geaendert{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.txzeile textarea{width:100%;resize:vertical;font:inherit}
.breakall{word-break:break-all}
@media (max-width:640px){
  .txpop{left:8px!important;right:8px;width:auto!important;position:fixed!important;top:auto!important;bottom:calc(84px + env(safe-area-inset-bottom))}
  .txbar{flex-wrap:wrap;gap:6px}
  .txbar button{flex:1 1 auto}
}
/* Sammel-Freigabe (1.7.2) */
.sammel{padding:10px 12px;border:1px dashed var(--line);border-radius:14px;align-items:center}
.sammel .fselnum{width:76px;min-height:40px;padding:6px 10px}
.fsel{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer;flex:none}
.fsel input{width:22px;height:22px;accent-color:var(--accent)}
article.stack>.fsel{align-self:flex-start;margin:-6px 0 -6px -6px}
.kartewrap{position:relative}
.kartewrap .fsel{position:absolute;top:4px;left:4px;z-index:2;background:rgba(0,0,0,.45);border-radius:10px}
.wichtig.offen{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}

/* ---------- App-Designer (1.7.2) ---------- */
.gleiste{display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:sticky;top:8px;z-index:20}
.gpresets{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.gpreset{display:flex;flex-direction:column;gap:6px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--fg);cursor:pointer}
.gpreset.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--glow)}
.gpbild{display:flex;width:100%;height:46px;border-radius:10px;overflow:hidden;background:var(--pb)}
.gpbild i{flex:1}.gpbild i:nth-child(2){background:var(--ps)}.gpbild i:nth-child(3){background:var(--pa)}
.gfarben{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.gfarbe{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.gfarbe input[type=color]{width:44px;height:44px;border:0;border-radius:10px;padding:0;background:none;cursor:pointer;flex:none}
.gfarbe>span{display:flex;flex-direction:column;flex:1;min-width:0}
.gbild{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--line)}
.gbild:first-of-type{border-top:0}
.gbildvor{width:64px;height:64px;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.gbildvor img{width:100%;height:100%;object-fit:cover}
.gbild .grow{display:flex;flex-direction:column;gap:4px}
.ganim{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-top:1px solid var(--line)}
.ganimwahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.ganimopt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--fg);cursor:pointer;text-align:center}
.ganimopt.on{border-color:var(--accent);color:var(--accent-hi)}
.gdemo{width:34px;height:34px;border-radius:10px;background:var(--gold);display:block}
input[type=range]{width:100%;accent-color:var(--accent)}
/* Animations-Bibliothek */
@keyframes g-schimmer{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 14px var(--accent))}}
@keyframes g-puls{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes g-atmen{0%,100%{transform:scale(.96);opacity:.85}50%{transform:scale(1.04);opacity:1}}
@keyframes g-schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes g-drehen{to{transform:rotate(360deg)}}
@keyframes g-einblenden{from{opacity:0}}
@keyframes g-aufsteigen{from{opacity:0;transform:translateY(18px)}}
@keyframes g-zoom{from{opacity:0;transform:scale(.94)}}
@keyframes g-gleiten{from{opacity:0;transform:translateX(-18px)}}
@keyframes g-kippen{from{opacity:0;transform:perspective(600px) rotateX(-14deg);transform-origin:top}}
@keyframes g-wippen{0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg)}60%{transform:rotate(3deg)}}
@keyframes g-wackeln{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}
@keyframes g-huepfen{0%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
@keyframes g-glanz{from{background-position:-150% 0}to{background-position:250% 0}}
@media (prefers-reduced-motion:no-preference){
  html:not([data-ruhig=an])[data-an-logo=schimmer] img.logo{animation:g-schimmer 4s ease-in-out infinite}
  html:not([data-ruhig=an])[data-an-logo=puls] img.logo{animation:g-puls 2.6s ease-in-out infinite}
  html:not([data-ruhig=an])[data-an-logo=atmen] img.logo{animation:g-atmen 6s ease-in-out infinite}
  html:not([data-ruhig=an])[data-an-logo=schweben] img.logo{animation:g-schweben 4s ease-in-out infinite}
  html:not([data-ruhig=an])[data-an-logo=drehen] img.logo{animation:g-drehen 40s linear infinite}
  html:not([data-ruhig=an])[data-an-karten=einblenden] .seitein .card{animation:g-einblenden .45s ease both}
  html:not([data-ruhig=an])[data-an-karten=aufsteigen] .seitein .card{animation:g-aufsteigen .5s cubic-bezier(.2,.8,.2,1) both}
  html:not([data-ruhig=an])[data-an-karten=zoom] .seitein .card{animation:g-zoom .45s cubic-bezier(.2,.8,.2,1) both}
  html:not([data-ruhig=an])[data-an-karten=gleiten] .seitein .card{animation:g-gleiten .45s cubic-bezier(.2,.8,.2,1) both}
  html:not([data-ruhig=an])[data-an-karten=kippen] .seitein .card{animation:g-kippen .5s cubic-bezier(.2,.8,.2,1) both}
  html:not([data-ruhig=an]) .seitein .card:nth-child(2){animation-delay:.05s}
  html:not([data-ruhig=an]) .seitein .card:nth-child(3){animation-delay:.1s}
  html:not([data-ruhig=an]) .seitein .card:nth-child(n+4){animation-delay:.15s}
  html:not([data-ruhig=an])[data-an-seiten=blenden] .seitein{animation:g-einblenden .35s ease}
  html:not([data-ruhig=an])[data-an-seiten=gleiten] .seitein{animation:g-gleiten .35s ease}
  html:not([data-ruhig=an])[data-an-seiten=zoom] .seitein{animation:g-zoom .35s ease}
  html:not([data-ruhig=an])[data-an-seiten=aufsteigen] .seitein{animation:g-aufsteigen .35s ease}
  html:not([data-ruhig=an])[data-an-knoepfe=glanz] .btn.primary{background-image:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%),var(--gold);background-size:200% 100%,100% 100%;background-repeat:no-repeat}
  html:not([data-ruhig=an])[data-an-knoepfe=glanz] .btn.primary:hover{animation:g-glanz 1s ease}
  html:not([data-ruhig=an])[data-an-knoepfe=druecken] .btn:active{transform:scale(.95)}
  html:not([data-ruhig=an])[data-an-knoepfe=wippen] .btn:hover{animation:g-wippen .5s ease}
  html:not([data-ruhig=an])[data-an-knoepfe=leuchten] .btn:hover{box-shadow:0 0 0 3px var(--glow),0 0 18px var(--glow)}
  html:not([data-ruhig=an])[data-an-hinweise=puls] .badge{animation:g-puls 1.8s ease-in-out infinite}
  html:not([data-ruhig=an])[data-an-hinweise=wackeln] .iconbtn:has(.badge) .i{animation:g-wackeln 1.2s ease 2}
  html:not([data-ruhig=an])[data-an-hinweise=huepfen] .badge{animation:g-huepfen 1.2s ease-in-out infinite}
  /* Vorschau im Designer */
  .ganimopt:hover .gd-logo-schimmer,.ganimopt.on .gd-logo-schimmer{animation:g-schimmer 2s infinite}
  .ganimopt:hover .gd-logo-puls,.ganimopt.on .gd-logo-puls,.ganimopt:hover .gd-hinweise-puls,.ganimopt.on .gd-hinweise-puls{animation:g-puls 1.4s infinite}
  .ganimopt:hover .gd-logo-atmen,.ganimopt.on .gd-logo-atmen{animation:g-atmen 3s infinite}
  .ganimopt:hover .gd-logo-schweben,.ganimopt.on .gd-logo-schweben{animation:g-schweben 2s infinite}
  .ganimopt:hover .gd-logo-drehen,.ganimopt.on .gd-logo-drehen{animation:g-drehen 4s linear infinite}
  .ganimopt:hover [class*=gd-karten-einblenden],.ganimopt:hover [class*=gd-seiten-blenden]{animation:g-einblenden .8s infinite alternate}
  .ganimopt:hover [class*=gd-karten-aufsteigen],.ganimopt:hover [class*=gd-seiten-aufsteigen]{animation:g-aufsteigen .8s infinite alternate}
  .ganimopt:hover [class*=gd-karten-zoom],.ganimopt:hover [class*=gd-seiten-zoom]{animation:g-zoom .8s infinite alternate}
  .ganimopt:hover [class*=gd-karten-gleiten],.ganimopt:hover [class*=gd-seiten-gleiten]{animation:g-gleiten .8s infinite alternate}
  .ganimopt:hover .gd-karten-kippen{animation:g-kippen .8s infinite alternate}
  .ganimopt:hover .gd-knoepfe-glanz{background-image:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%),var(--gold);background-size:200% 100%,100% 100%;animation:g-glanz 1s infinite}
  .ganimopt:hover .gd-knoepfe-druecken{transform:scale(.85)}
  .ganimopt:hover .gd-knoepfe-wippen{animation:g-wippen .6s infinite}
  .ganimopt:hover .gd-knoepfe-leuchten{box-shadow:0 0 0 3px var(--glow),0 0 18px var(--accent)}
  .ganimopt:hover .gd-hinweise-wackeln{animation:g-wackeln 1s infinite}
  .ganimopt:hover .gd-hinweise-huepfen{animation:g-huepfen 1s infinite}
}
[class*=gd-][class$=-keine]{opacity:.35}
html[data-feld=aus] canvas.feld{display:none}
/* Teilnahmebestätigung drucken */
.zertifikat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:24px;border:2px solid var(--accent);border-radius:var(--r)}
.vtliste{margin:8px 0;padding-left:18px}
@media print{
  body.druckzert>*:not(#modal){display:none!important}
  body.druckzert #modal .mback,body.druckzert #modal .mbtns,body.druckzert #modal .mhead button{display:none!important}
  body.druckzert #modal .mcard{position:static!important;box-shadow:none!important;border:0!important;background:#fff!important;color:#111!important;max-width:none!important;transform:none!important;animation:none!important}
  body.druckzert .zertifikat{border-color:#b8822c;color:#111}
  body.druckzert .zertifikat .muted{color:#555}
}
.rgfrage{align-items:center;text-align:center;padding:8px 4px}.rgfrage h2{margin:4px 0}

/* ---------- Hintergrund-Szenen (1.7.3) ---------- */
html[data-szene=goldfisch] .feldhero canvas.feld,html[data-szene=goldfisch] .landfeldwrap canvas.feld,
html[data-szene=sterne] canvas.feld,html[data-szene=aurora] canvas.feld,html[data-szene=blaetter] canvas.feld,html[data-szene=regen] canvas.feld,
html[data-szene=duft] canvas.feld,html[data-szene=bokeh] canvas.feld,html[data-szene=strahlen] canvas.feld,html[data-szene=gluehwuermchen] canvas.feld{height:100%}
html[data-szene=goldfisch] .feldhero,html[data-szene=goldfisch] .landfeldwrap,.gszene .gszvor[data-szene-vor=goldfisch]{background:linear-gradient(180deg,#0c2224 0%,#163a3b 38%,#20524f 60%,#0d2a2b 100%)}
html[data-szene=sterne] .feldhero,html[data-szene=sterne] .landfeldwrap,html[data-szene=aurora] .feldhero,html[data-szene=aurora] .landfeldwrap,.gszene .gszvor[data-szene-vor=sterne],.gszene .gszvor[data-szene-vor=aurora]{background:linear-gradient(180deg,#060d16 0%,#0e1d2a 55%,#16302f 100%)}
html[data-szene=wellen] .feldhero,html[data-szene=wellen] .landfeldwrap,html[data-szene=regen] .feldhero,html[data-szene=regen] .landfeldwrap,.gszene .gszvor[data-szene-vor=wellen],.gszene .gszvor[data-szene-vor=regen]{background:linear-gradient(180deg,#1b3440 0%,#3f6b72 55%,#9fb7a8 100%)}
html[data-szene=gluehwuermchen] .feldhero,html[data-szene=gluehwuermchen] .landfeldwrap,html[data-szene=duft] .feldhero,html[data-szene=duft] .landfeldwrap,.gszene .gszvor[data-szene-vor=gluehwuermchen],.gszene .gszvor[data-szene-vor=duft]{background:linear-gradient(180deg,#0b1a1b 0%,#16302c 70%,#1f3d33 100%)}
html[data-szene=goldfisch] .sonne,html[data-szene=sterne] .sonne,html[data-szene=aurora] .sonne,html[data-szene=gluehwuermchen] .sonne,html[data-szene=duft] .sonne,html[data-szene=regen] .sonne,html[data-szene=keine] .sonne{display:none}
html[data-szene=keine] canvas.feld{display:none}
.gszenen{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.gszene{display:flex;flex-direction:column;gap:4px;padding:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--fg);cursor:pointer;text-align:left}
.gszene.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--glow)}
.gszvor{position:relative;display:block;height:96px;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#1f3a40 0%,#4f7f7a 45%,#c9c08f 82%,#f3d79b 100%)}
.gszvor.abend{background:linear-gradient(180deg,#141f2d 0%,#4a3446 40%,#b26a48 76%,#efa954 100%)}
.gszvor.nacht{background:linear-gradient(180deg,#0b1820 0%,#16302c 100%)}
.gszcv{position:absolute;inset:0;width:100%;height:100%}
/* 1.7.4 Einladungen */
.einlnetz{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.einlliste{margin-top:12px}
.einlkarte{display:flex;flex-direction:column;gap:8px}
.einlkarte .einlcode{font-size:1.25rem;letter-spacing:.06em}
.einlkarte.vorbei{opacity:.72}
.einlkarte .row.wrap{flex-wrap:wrap}
.einlseg{margin-top:16px;overflow-x:auto;scrollbar-width:none}
.seg.einlseg>button{display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;padding-inline:10px}
.einlseg .einln{font-size:.8em;opacity:.75;margin-left:2px}
/* 1.7.6 Online-Status (nur Master) */
.onl{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--muted)}
.onl i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--muted) 55%,transparent);flex:none}
.onl.an{color:var(--fg);font-weight:600}
.onl.an i{background:#3fbf6b;box-shadow:0 0 0 3px color-mix(in srgb,#3fbf6b 25%,transparent)}
@media (prefers-reduced-motion:no-preference){.onl.an i{animation:onlpuls 2s ease-in-out infinite}}
@keyframes onlpuls{50%{box-shadow:0 0 0 6px color-mix(in srgb,#3fbf6b 0%,transparent)}}
/* 1.8.0 Workshops der Berater und Berater-Abo */
.kurskarte{display:flex;align-items:center;gap:12px;text-align:left;width:100%}
.kurskarte .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.kurspreis{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
.abokacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.abokachel{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;cursor:pointer}
.abokachel b{font-size:1.4rem}
.abokachel.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.abokachel[disabled]{opacity:.45;cursor:not-allowed}

/* 1.9 Beraterbereich */
.mmnav2{display:flex;flex-direction:column;gap:8px;margin:-2px 0 6px}
.mmgroups{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:6px}
.mmgroup{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 6px;border-radius:14px;border:1px solid var(--line);background:transparent;color:var(--fg);font:600 13px/1.2 var(--body);cursor:pointer}
.mmgroup svg{width:20px;height:20px}
.mmgroup.on{background:color-mix(in srgb,var(--accent) 16%,var(--surface));border-color:var(--accent);color:var(--accent-hi)}
.mmpunkt{position:absolute;top:6px;right:10px;width:9px;height:9px;border-radius:50%;background:var(--danger)}
.mmsub .chip{font-size:14px}
.zgruppe{display:flex;flex-direction:column;gap:10px}
.zgruppe h3{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--accent-hi)}
.zgruppe h3 svg{width:18px;height:18px}
.zraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.zkachel{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:14px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 80%,var(--bg)));color:var(--fg);cursor:pointer;min-height:104px}
.zkachel:hover{border-color:var(--accent)}
.zkachel svg{width:22px;height:22px;color:var(--accent)}
.zkachel .badge{position:absolute;top:10px;right:10px}
.zhinweis{display:flex;gap:14px;align-items:flex-start;border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.zhinweis>svg{width:26px;height:26px;flex:none;color:var(--accent)}
.zstatus{display:flex;flex-direction:column;gap:10px}
.zheute{width:100%;text-align:left;cursor:pointer}