/* ===== base/tokens.css ===== */
/* Basis · Farben, Schriften, Themes (Hell, Dunkel, Kontrast, dunkle Bühne). Quelle: Prototyp 2 */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{
  color-scheme:dark;
  --bg:#05070B;--bg-2:#0A0E15;--glass:rgba(255,255,255,.035);--glass-2:rgba(255,255,255,.065);--solid:#0C1119;
  --line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.15);
  --ink:#F2F5F9;--ink-2:#B2BCCA;--muted:#7E8998;
  --accent:#5CB8FF;--accent-2:#45E3CF;--accent-ink:#03101B;--glow:92,184,255;--glow-2:69,227,207;
  --ok:#4ADE9A;--warn:#FBBF5A;--danger:#FF7A6B;--shine:#FFFFFF;
  /* Logo im Dunkelmodus: Originalton, nur heller (CONCEPT §10) */
  --logo-b:#2F82B4;--logo-g:#8E97A4;
  --grid-line:rgba(255,255,255,.045);--backdrop:rgba(2,4,8,.72);--shadow:0 30px 80px -30px rgba(0,0,0,.8);
  --dim:rgba(242,245,249,.17);--light:#EAF6FF;--light-rgb:200,232,255;
  --foot:#0E131C;--foot-edge:rgba(255,255,255,.12);
  --bar:color-mix(in srgb,var(--bg-2) 62%,transparent);--bar-s:color-mix(in srgb,var(--bg-2) 86%,transparent);
  --f:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,sans-serif;
  --fd:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,sans-serif;
  --fm:ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);--ease-io:cubic-bezier(.65,0,.35,1);
  --r:22px;--gut:clamp(16px,3.5vw,40px);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#EEF2F7;--bg-2:#E3E9F1;--glass:rgba(255,255,255,.8);--glass-2:rgba(255,255,255,.96);--solid:#FFFFFF;
  --line:rgba(10,18,30,.08);--line-2:rgba(10,18,30,.17);--ink:#0A0F18;--ink-2:#3B4859;--muted:#5C697B;
  --accent:#1767D8;--accent-2:#0B8F83;--accent-ink:#FFFFFF;--glow:23,103,216;--glow-2:11,143,131;
  --ok:#15803D;--warn:#A15C00;--danger:#C0291B;--shine:#1767D8;
  --logo-b:#1A5A7E;--logo-g:#5A6270;
  --grid-line:rgba(23,103,216,.055);--backdrop:rgba(10,18,30,.4);--shadow:0 30px 70px -30px rgba(10,18,30,.35);
  --dim:rgba(10,15,24,.13);--light:#1767D8;--light-rgb:23,103,216;
  --foot:#DCE3EC;--foot-edge:rgba(255,255,255,.9);
  --bar:color-mix(in srgb,#FFFFFF 72%,transparent);--bar-s:color-mix(in srgb,#FFFFFF 90%,transparent);
}
/* Kontrast erhöhen */
:root.hc{--ink-2:#D9DFE8;--muted:#AEB8C6;--line:rgba(255,255,255,.17);--line-2:rgba(255,255,255,.3);--glass:rgba(255,255,255,.07);--glass-2:rgba(255,255,255,.12);--dim:rgba(242,245,249,.3)}
:root.hc[data-theme="light"]{--ink-2:#1E2836;--muted:#364353;--line:rgba(10,18,30,.2);--line-2:rgba(10,18,30,.36);--glass:rgba(255,255,255,.94);--dim:rgba(10,15,24,.26)}
/* Dunkle Bühne in beiden Themes (Lichtszene, mitdenkendes Header-Glas) */
.tone-dark{
  color-scheme:dark;
  --ink:#F2F5F9;--ink-2:#B9C3D0;--muted:#8A95A4;--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.18);
  --glass:rgba(255,255,255,.05);--glass-2:rgba(255,255,255,.09);--solid:#0C1119;--bg-2:#0A0E15;
  --accent:#5CB8FF;--accent-2:#45E3CF;--accent-ink:#03101B;--glow:92,184,255;--glow-2:69,227,207;
  --logo-b:#2F82B4;--logo-g:#8E97A4;--light:#EAF6FF;--light-rgb:200,232,255;--shine:#FFFFFF;
  --bar:rgba(16,22,33,.62);--bar-s:rgba(16,22,33,.82);
}

/* ===== base/base.css ===== */
/* Basis · Grundgerüst, Knöpfe, Schalter, gemeinsame Bausteine, Dialoge */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;font-size:16px;overflow-x:clip;scroll-padding-top:96px}
html.big{font-size:18px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip;transition:background-color .5s}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
.logo{display:block;height:32px;width:auto;aspect-ratio:1314/384}
.skip{position:fixed;left:16px;top:-80px;z-index:200;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:.9375rem;white-space:nowrap;text-decoration:none;color:var(--ink);transition:background .2s,border-color .2s,transform .25s var(--ease),box-shadow .25s}
.btn .icon{width:18px;height:18px}
.btn-glow{background:linear-gradient(100deg,var(--accent),var(--accent-2));color:var(--accent-ink);box-shadow:0 10px 30px -10px rgba(var(--glow),.9)}
.btn-glow:hover{transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(var(--glow),1)}
.btn-glow .icon{transition:transform .2s}
.btn-glow:hover .icon{transform:translateX(3px)}
.btn-ghost{background:var(--glass);border-color:var(--line-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.btn-ghost:hover{background:var(--glass-2)}
.btn-sm{height:38px;padding:0 16px;font-size:.875rem}
.linkbtn{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:8px 2px;color:var(--accent);font:500 .9375rem/1.2 var(--f);text-decoration:none}
.linkbtn .icon{width:16px;height:16px;transition:transform .2s}
.linkbtn:hover .icon{transform:translateX(3px)}


/* Schalter (Erscheinungsbild, Formulare) */
.track{position:relative;width:42px;height:24px;border-radius:999px;background:var(--line-2);transition:background .2s;flex:none}
.thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.sw input:checked + .track,.switch input:checked + .track{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.sw input:checked + .track .thumb,.switch input:checked + .track .thumb{transform:translateX(18px)}
.sw input:focus-visible + .track,.switch input:focus-visible + .track{outline:2px solid var(--accent);outline-offset:2px}

/* Gemeinsame Bausteine: Wort-Spans, Lichtbögen, Abschnittsüberschrift, Symbol-Kachel */
.w{display:inline-block;will-change:filter,opacity}
.arcs{position:absolute;left:0;right:0;bottom:0;height:clamp(150px,24vh,250px);pointer-events:none}
.arcs svg{position:absolute;left:50%;bottom:0;width:max(1600px,120vw);height:100%;transform:translateX(-50%)}
.arc{fill:none;stroke-linecap:round}
.arcs .blur{filter:blur(7px)}
.sec-h{margin:0;font:650 clamp(2rem,4.4vw,3.75rem)/1.05 var(--fd);letter-spacing:-.04em;text-wrap:balance}
.sec-h .soft{color:var(--muted)}
.glyph{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;flex:none;color:var(--accent);background:radial-gradient(circle at 30% 20%,rgba(var(--glow),.24),rgba(var(--glow),.05) 72%);box-shadow:0 0 0 1px rgba(var(--glow),.24) inset,0 12px 26px -16px rgba(var(--glow),.9)}
.glyph .icon{width:26px;height:26px;stroke-width:1.5}
.glyph.tk{color:var(--accent-2);background:radial-gradient(circle at 30% 20%,rgba(var(--glow-2),.24),rgba(var(--glow-2),.05) 72%);box-shadow:0 0 0 1px rgba(var(--glow-2),.26) inset}

/* ---------- Dialoge ---------- */
dialog{width:min(580px,calc(100% - 32px));max-height:min(88dvh,860px);padding:0;border:1px solid var(--line-2);border-radius:26px;background:var(--solid);color:var(--ink);box-shadow:0 40px 120px -30px rgba(0,0,0,.7);overflow:hidden}
:root[data-theme="light"] dialog{box-shadow:0 40px 100px -30px rgba(10,30,60,.35)}
dialog[open]{display:flex;flex-direction:column;animation:pop .32s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}}
dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.d-close{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:color-mix(in srgb,var(--solid) 60%,transparent);color:var(--ink-2);flex:none}
.d-close:hover{color:var(--ink);background:var(--glass-2)}
.d-eyebrow{font:700 .875rem/1 var(--f);color:var(--accent)}
.d-body{padding:22px 24px 24px;overflow:auto;display:flex;flex-direction:column;gap:26px}
.d-foot{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--solid) 92%,transparent)}
.d-foot .left{margin-right:auto}
.x-hero{position:relative;flex:none;padding:28px 28px 22px;border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate;transition:padding .35s var(--ease)}
.x-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px 220px at 12% -10%,rgba(var(--glow),.26),transparent 70%),radial-gradient(420px 240px at 105% 0%,rgba(var(--glow-2),.16),transparent 70%)}
.x-hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
.x-hero h2{margin:10px 0 0;font:650 clamp(1.5rem,3.4vw,1.875rem)/1.15 var(--fd);letter-spacing:-.03em;text-wrap:balance;max-width:20ch;transition:font-size .35s var(--ease)}
.x-sub{margin:8px 0 0;font-size:1rem;line-height:1.5;color:var(--ink-2);max-width:46ch;max-height:90px;overflow:hidden;transition:max-height .35s var(--ease),margin .35s,opacity .25s}
.x-close{position:absolute;top:18px;right:18px}
.x-orb{position:relative;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;margin-bottom:18px;color:var(--accent);
  background:radial-gradient(circle at 30% 20%,rgba(var(--glow),.32),rgba(var(--glow),.06) 70%);box-shadow:0 0 0 1px rgba(var(--glow),.3) inset,0 16px 40px -14px rgba(var(--glow),.8);transition:height .35s var(--ease),margin .35s,opacity .25s}
.x-orb .icon{width:28px;height:28px;stroke-width:1.5}
.x-orb .ring{position:absolute;inset:-5px;border-radius:24px;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0 220deg,rgba(var(--glow),.95) 290deg,transparent 350deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 3.2s linear infinite}
.compact .x-hero{padding-top:16px;padding-bottom:14px}
.compact .x-orb{height:0;margin:0;opacity:0}
.compact .x-sub{max-height:0;margin:0;opacity:0}
.compact .x-hero h2{font-size:1.25rem;margin-top:6px;max-width:none}
.compact .x-close{top:12px}

@media (max-width:640px){
  .x-hero{padding:24px 20px 20px}
  .d-body{padding:20px}
  .d-foot{padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));flex-wrap:nowrap}
  .d-foot .hide-sm{display:none}
  dialog{width:100%;max-width:none;max-height:92dvh;margin:auto 0 0;border-radius:26px 26px 0 0;border-bottom:0}
}
@media (max-width:1023px){
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:1rem!important}
}

/* ===== header/header.css ===== */
/* ---------- Header ---------- */
.topbar{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:60;padding-inline:clamp(12px,3vw,24px);pointer-events:none}
.bar{pointer-events:auto;position:relative;max-width:1240px;margin:0 auto;display:flex;flex-direction:column;border-radius:31px;border:1px solid var(--line);
  background:var(--bar);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);color:var(--ink);
  transition:background .45s,box-shadow .35s,border-color .35s,color .45s}
.scrolled .bar{background:var(--bar-s);box-shadow:var(--shadow);border-color:var(--line-2)}
.hdr-row{position:relative;z-index:1;height:62px;display:flex;align-items:center;gap:6px;padding:0 8px 0 20px}
.brand{display:flex;text-decoration:none;align-items:center;height:44px;margin-right:auto;border-radius:12px}
.brand .logo{height:32px}
/* Easter Eggs am Logo: Lichtschimmer, „10 | 10“, TENTEN-Zeit (DECISIONS 2026-10-09) */
.brand{position:relative}
.brand::after{content:"";position:absolute;inset:-6px -10px;border-radius:14px;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 30%,rgba(var(--light-rgb),.55) 48%,rgba(var(--glow-2),.35) 54%,transparent 70%) no-repeat;background-size:250% 100%;background-position:120% 0;mix-blend-mode:screen}
.brand.hdr-shine::after{animation:hdr-shine 1.4s cubic-bezier(.4,.1,.3,1) both}
@keyframes hdr-shine{0%{opacity:0;background-position:120% 0}15%,80%{opacity:1}100%{opacity:0;background-position:-30% 0}}
.hdr-1010-t{position:absolute;left:0;top:50%;transform:translateY(-50%);font:650 1.5rem/1 var(--fd);letter-spacing:.06em;color:var(--logo-b);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .3s}
.brand.hdr-1010 .logo{opacity:0;transition:opacity .3s}
.brand.hdr-1010 .hdr-1010-t{opacity:1}
.brand .logo{transition:opacity .3s,filter .6s}
.brand.hdr-tenten .logo{animation:hdr-tenten 3s ease-in-out infinite}
@keyframes hdr-tenten{0%,100%{filter:drop-shadow(0 0 0 rgba(var(--glow),0))}50%{filter:drop-shadow(0 0 10px rgba(var(--glow),.8))}}
/* Suche: feste Antworten */
.hdr-ck-egg{display:flex;align-items:center;justify-content:center;gap:14px;padding:22px 18px;font:500 1rem/1.4 var(--f);color:var(--ink);text-align:center}
.hdr-cup{flex:none;width:44px;height:44px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hdr-cup .st{stroke:var(--muted);animation:hdr-steam 2.4s ease-in-out infinite}
@keyframes hdr-steam{0%,100%{opacity:.2;transform:translateY(2px)}50%{opacity:1;transform:translateY(-2px)}}
.hdr-brand-x{display:flex;align-items:center;gap:12px;margin-left:12px;font-size:.875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap}
.hdr-brand-x::before{content:'';width:1px;height:22px;background:var(--line-2)}
.intro-on .brand{opacity:0;pointer-events:none}
/* Logo-Flug über dem Header; beim Andocken wackelt die Beschriftung gestaffelt (DECISIONS 2026-10-01) */
.fly-logo{position:fixed;left:0;top:0;z-index:66;display:none;pointer-events:none;transform-origin:0 0;will-change:transform}
.fly-logo svg{display:block;width:100%;height:auto}
.hdr-sweep{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.hdr-sweep::before{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;opacity:0;transform:translateX(-110%);background:linear-gradient(100deg,transparent,rgba(var(--glow),.18) 40%,rgba(var(--light-rgb),.35) 50%,rgba(var(--glow-2),.16) 60%,transparent)}
.hdr-sweep.go::before{animation:sweep 1.1s cubic-bezier(.4,.1,.3,1) both}
@keyframes sweep{0%{opacity:0;transform:translateX(-110%)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(330%)}}
.ripple .nav .hdr-nv,.ripple .hdr-acts > *{animation:rip 1.05s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes rip{0%{transform:none}14%{transform:translateX(6px) skewX(-5deg);filter:blur(.5px)}32%{transform:translateX(-3.5px) skewX(3deg);filter:blur(.2px)}50%{transform:translateX(2px) skewX(-1.5deg);filter:none}68%{transform:translateX(-1px)}84%{transform:translateX(.5px)}100%{transform:none}}
.nav,.hdr-acts{position:relative;z-index:1;display:flex;align-items:center;gap:2px}
.hdr-acts{margin-left:8px}
.hdr-nv{position:relative;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 15px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font:500 .9375rem/1 var(--f);text-decoration:none;white-space:nowrap;transition:color .25s}
.hdr-nv:hover,.hdr-nv[aria-expanded="true"],.hdr-nv[aria-current="page"]{color:var(--ink)}
.hdr-nv .icon{width:19px;height:19px}
.hdr-nv.home{padding:0 13px}
.hdr-ib{width:44px;height:42px;display:grid;place-items:center;border:0;border-radius:999px;background:transparent;color:var(--ink-2);transition:color .25s}
.hdr-ib:hover,.hdr-ib[aria-expanded="true"]{color:var(--ink)}
.hdr-dot{position:absolute;right:3px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;pointer-events:none}
.hdr-dot.hdr-news{background:var(--accent-2);box-shadow:0 0 10px rgba(var(--glow-2),.9)}
.hdr-nv.hdr-has-dot{padding-right:25px}
.hdr-nv.hdr-has-dot .hdr-dot{right:11px}
.hdr-hov{position:absolute;left:0;top:10px;height:42px;width:0;border-radius:999px;background:var(--glass-2);box-shadow:0 0 0 1px var(--line-2) inset;opacity:0;pointer-events:none;z-index:0;
  transition:transform .42s var(--ease-io),width .42s var(--ease-io),opacity .25s}
.hdr-hov.hdr-no-anim{transition:opacity .25s}
:root[data-theme="light"] .bar:not(.tone-dark) .hdr-hov{background:rgba(255,255,255,.9);box-shadow:0 0 0 1px var(--line-2) inset,0 4px 14px -6px rgba(10,30,60,.25)}
.lang span{font-weight:600;font-size:.875rem;letter-spacing:.02em}
.lang{padding:0 13px}

/* Dynamic Island: die Header-Pille dehnt sich aus */
.hdr-isl{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-io)}
.hdr-isl-in{min-height:0;overflow:hidden}
.bar.hdr-isl-on .hdr-isl{grid-template-rows:1fr}
.hdr-isl-c{display:flex;align-items:center;justify-content:center;gap:14px;max-width:640px;margin:0 auto;padding:4px 20px 16px;opacity:0;transform:translateY(-6px) scale(.98);filter:blur(4px);transition:opacity .3s,transform .45s var(--ease),filter .35s}
.hdr-isl-c.anch{position:relative;width:fit-content;max-width:min(520px,100% - 24px)}
.hdr-isl-c.anch .hdr-isl-t{text-align:center}
.bar.hdr-isl-on .hdr-isl-c{opacity:1;transform:none;filter:none;transition-delay:.12s}
.hdr-isl-ic{position:relative;width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:radial-gradient(circle at 30% 25%,rgba(var(--glow),.3),rgba(var(--glow),.06) 70%);box-shadow:0 0 0 1px rgba(var(--glow),.3) inset,0 8px 24px -10px rgba(var(--glow),.9)}
.hdr-isl-ic .icon{width:19px;height:19px}
.hdr-isl-ic.ok{color:var(--ok);background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--ok) 30%,transparent),transparent 75%);box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 35%,transparent) inset}
.hdr-isl-ic.off{color:var(--warn);background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--warn) 28%,transparent),transparent 75%);box-shadow:0 0 0 1px color-mix(in srgb,var(--warn) 35%,transparent) inset}
.hdr-isl-t{min-width:0;flex:1}
.hdr-isl-t strong{display:block;font:600 .9375rem/1.3 var(--f);letter-spacing:-.01em}
.hdr-isl-t span{display:block;font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.hdr-isl-a{flex:none}

/* Statuspunkt der Erreichbarkeit mit Infobox (Farben und Texte wie /kontakt) */
.hdr-st{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%;background:var(--muted);vertical-align:1px}
.hdr-isl-t strong .hdr-st{display:inline-block;margin-right:9px;font-size:0;line-height:0;cursor:help;outline-offset:3px}
.hdr-st[data-s="open"]{background:#22C55E;--st:#22C55E}
.hdr-st[data-s="closing"]{background:#F97316;--st:#F97316}
.hdr-st[data-s="opening"]{background:#FACC15}
.hdr-st[data-s="closed"]{background:#EF4444}
.hdr-st[data-s="dayoff"]{background:var(--accent)}
.hdr-isl-t .hdr-st[data-s="opening"]{box-shadow:0 0 10px rgba(250,204,21,.8)}
.hdr-isl-t .hdr-st[data-s="closed"]{box-shadow:0 0 10px rgba(239,68,68,.75)}
.hdr-isl-t .hdr-st[data-s="dayoff"]{box-shadow:0 0 10px rgba(var(--glow),.8)}
.hdr-isl-t .hdr-st[data-s="open"],.hdr-isl-t .hdr-st[data-s="closing"]{animation:hdr-breathe 2.8s ease-in-out infinite}
@keyframes hdr-breathe{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st) 60%,transparent)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--st) 0%,transparent),0 0 12px var(--st)}}
.hdr-tip{position:fixed;z-index:80;width:min(320px,calc(100vw - 24px));padding:14px 16px 12px;border-radius:18px;border:1px solid var(--line-2);background:var(--solid);color:var(--ink);
  box-shadow:var(--shadow);font:400 .875rem/1.45 var(--f);text-align:left;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s var(--ease)}
.hdr-tip.on{opacity:1;transform:none}
.hdr-tip p{margin:0}
.hdr-tip-h,.hdr-tip-l{color:var(--muted)}
.hdr-tip-cur{display:flex;align-items:center;gap:10px;margin:4px 0 12px!important;font:650 1.125rem/1.2 var(--fd);letter-spacing:-.01em}
.hdr-tip-cur .hdr-st{width:12px;height:12px}
.hdr-tip-l{padding-top:10px;border-top:1px solid var(--line)}
.hdr-tip ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.hdr-tip li{display:flex;align-items:baseline;gap:10px;color:var(--ink-2)}
.hdr-tip li .hdr-st{transform:translateY(-1px)}
.hdr-tip li b{color:var(--ink);font-weight:600}

/* Menüs unter der Pille */
.hdr-menu{pointer-events:auto;position:absolute;top:calc(100% + 10px);left:50%;z-index:2;max-width:calc(100vw - 24px);padding:14px;border-radius:26px;border:1px solid var(--line-2);
  background:color-mix(in srgb,var(--solid) 95%,transparent);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);box-shadow:var(--shadow),0 0 0 1px rgba(var(--glow),.06);
  opacity:0;visibility:hidden;transform:translate(var(--mx,-50%),-8px) scale(.98);transform-origin:top center;transition:opacity .25s,transform .38s var(--ease),visibility 0s .38s}
.hdr-menu.open{opacity:1;visibility:visible;transform:translate(var(--mx,-50%),0) scale(1);transition:opacity .25s,transform .38s var(--ease),visibility 0s}
:root[data-theme="light"] .hdr-menu{background:color-mix(in srgb,#FFFFFF 96%,transparent);box-shadow:0 30px 80px -30px rgba(10,30,60,.38)}
/* Menüs in der Pille: die Pille dehnt sich aus wie bei der Island */
/* Ausgedehnte Pille (Docks, Island): dichteres Glas, damit Inhalt dahinter nicht durchscheint */
.bar.hdr-mx-on,.bar.hdr-isl-on{background:color-mix(in srgb,var(--solid) 94%,transparent);box-shadow:var(--shadow);border-color:var(--line-2)}
/* über dunklen Abschnitten (tone-dark) bleibt auch die ausgedehnte Pille dunkel – sonst helle Schrift auf weißer Fläche */
:root[data-theme="light"] .bar:not(.tone-dark).hdr-mx-on,:root[data-theme="light"] .bar:not(.tone-dark).hdr-isl-on{background:rgba(255,255,255,.95)}
.hdr-bx{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-io)}
.bar.hdr-mx-on .hdr-bx{grid-template-rows:1fr}
.hdr-bx-in{min-height:0;overflow:hidden}
.hdr-bx .hdr-menu{position:relative;top:auto;left:auto;display:none;width:max-content;max-width:calc(100% - 24px);margin:0 auto;padding:2px 16px 18px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  opacity:0;visibility:visible;transform:translateY(-6px) scale(.98);filter:blur(4px);transition:opacity .3s,transform .45s var(--ease),filter .35s}
.hdr-bx .hdr-menu.shown{display:block}
.hdr-bx .hdr-menu.open{opacity:1;transform:none;filter:none;transition-delay:.12s}
:root[data-theme="light"] .hdr-bx .hdr-menu{background:none;box-shadow:none}
/* Menüs als Raster: Einträge links (Lösungen und Support zwei Spalten, darunter ein Balken), rechts Vorschau ohne Rahmen */
.hdr-bx .hdr-dock{padding:4px 16px 18px}
.hdr-g{display:grid;grid-template-columns:auto minmax(300px,560px);gap:28px;align-items:stretch}
.hdr-g-l{display:flex;flex-direction:column;gap:8px}
.hdr-g-ic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:var(--accent);
  background:radial-gradient(circle at 30% 20%,rgba(var(--glow),.22),rgba(var(--glow),.05) 72%);box-shadow:0 0 0 1px rgba(var(--glow),.22) inset;transition:transform .35s var(--ease),box-shadow .35s}
.hdr-g-ic .icon{width:22px;height:22px;stroke-width:1.5}
.hdr-g-all,.hdr-g-w{position:relative;display:flex;align-items:center;gap:14px;border-radius:18px;border:1px solid transparent;text-decoration:none;color:var(--ink);transition:background .25s,border-color .25s,box-shadow .25s}
.hdr-g-all{padding:8px 18px 8px 8px;border-color:var(--line);background:linear-gradient(100deg,rgba(var(--glow),.10),rgba(var(--glow-2),.05) 70%,transparent)}
.hdr-g-al{font:600 .9375rem/1.2 var(--f)}
.hdr-g-go{width:18px;height:18px;margin-left:auto;color:var(--accent);transition:transform .3s var(--ease)}
.hdr-g-all:hover .hdr-g-go,.hdr-g-all:focus-visible .hdr-g-go{transform:translateX(4px)}
.hdr-g-list{display:grid;grid-template-columns:repeat(2,262px);gap:4px}
.hdr-dock[data-cols="1"] .hdr-g-list{grid-template-columns:262px}
/* Menü mit Ankerspalte (Support): schmälere Vorschau, damit die Spalte unter der Kategorie stehen kann */
.hdr-dock[data-anchor] .hdr-g{grid-template-columns:auto minmax(300px,360px)}
.hdr-g-ic{position:relative}
.hdr-g-ic .hdr-dot{right:-2px;top:-2px;margin:0}
.hdr-g-w{padding:8px}
.hdr-g-all:hover,.hdr-g-all:focus-visible,.hdr-g-w.on,.hdr-g-w:focus-visible{background:var(--glass-2);border-color:rgba(var(--glow),.38);box-shadow:0 0 0 1px rgba(var(--glow),.10) inset,0 12px 30px -20px rgba(var(--glow),.9);outline:0}
.hdr-g-w.on .hdr-g-ic,.hdr-g-w:focus-visible .hdr-g-ic,.hdr-g-all:hover .hdr-g-ic{transform:scale(1.06);box-shadow:0 0 0 1px rgba(var(--glow),.5) inset,0 10px 24px -10px rgba(var(--glow),.85)}
.hdr-g-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.hdr-g-t b{font:600 .9375rem/1.25 var(--f)}
.hdr-g-t small{font-size:.875rem;line-height:1.3;color:var(--muted)}
.hdr-g-w.tk .hdr-g-ic{color:var(--accent-2);background:radial-gradient(circle at 30% 20%,rgba(var(--glow-2),.22),rgba(var(--glow-2),.05) 72%);box-shadow:0 0 0 1px rgba(var(--glow-2),.25) inset}
.hdr-g-w.tk.on{border-color:rgba(var(--glow-2),.4)}
.hdr-g-p{position:relative;display:grid;padding:8px 8px 8px 4px}
/* dezente Trennlinie mit Lichtpunkt (wie die Leiste der Welten-Bühne) */
.hdr-g-rail{position:absolute;left:-14px;top:4px;bottom:4px;width:1px;background:linear-gradient(transparent,var(--line-2) 18%,var(--line-2) 82%,transparent)}
.hdr-g-rail i{position:absolute;left:0;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff 0 25%,var(--light) 50%,rgba(var(--light-rgb),0) 75%);box-shadow:0 0 12px 3px rgba(var(--light-rgb),.45),0 0 30px 8px rgba(var(--glow),.22);
  transition:top .45s var(--ease-io),opacity .3s}
:root[data-theme="light"] .hdr-g-rail i{background:radial-gradient(circle,#fff 0 22%,var(--accent) 48%,rgba(var(--glow),0) 75%)}
.hdr-g-rail.on i{opacity:1}
.hdr-pv{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;gap:16px;opacity:0;visibility:hidden;transform:translateY(8px);filter:blur(6px);
  transition:opacity .35s var(--ease),transform .5s var(--ease),filter .35s,visibility 0s .5s}
.hdr-pv.on{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity .4s var(--ease) .05s,transform .55s var(--ease) .05s,filter .4s .05s,visibility 0s}
.hdr-pv-m{position:relative;width:76px;height:76px}
.hdr-pv-m::before{content:"";position:absolute;inset:-45%;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--glow),.26),rgba(var(--glow-2),.07) 60%,transparent);filter:blur(6px)}
.hdr-pv.tk .hdr-pv-m::before{background:radial-gradient(closest-side,rgba(var(--glow-2),.28),rgba(var(--glow),.07) 60%,transparent)}
.hdr-pv-m svg{position:relative;width:100%;height:100%;overflow:visible}
.hdr-pv .m-ring{fill:none;stroke:url(#ring-g);stroke-width:.16;opacity:.9}
.hdr-pv .m-ic{fill:none;stroke:var(--light);stroke-width:.42;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 1.2px rgba(var(--light-rgb),.9)) drop-shadow(0 0 4px rgba(var(--glow),.8))}
:root[data-theme="light"] .hdr-pv .m-ic{stroke:var(--accent);filter:drop-shadow(0 0 2.5px rgba(var(--glow),.45))}
.hdr-pv-n{font:650 2rem/1 var(--fd);letter-spacing:-.045em;color:var(--ink)}
.hdr-pv-n span{display:block;font-weight:500;color:var(--ink-2)}
.hdr-pv-n b{font-weight:650}
.hdr-pv p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
/* Sprache / Erscheinungsbild */
.hdr-drop{width:300px;padding:10px;left:auto;right:0;--mx:0}
.hdr-drop-t{padding:6px 10px 10px;font:600 .875rem/1 var(--f);color:var(--muted)}
.hdr-opt{width:100%;display:flex;align-items:center;gap:12px;min-height:46px;padding:0 12px;border:0;border-radius:14px;background:transparent;color:var(--ink);font:500 .9375rem/1.2 var(--f);text-align:left;transition:background .2s}
.hdr-opt:hover{background:var(--glass-2)}
.hdr-opt .icon{width:18px;height:18px;color:var(--ink-2)}
.hdr-opt .hdr-ck{margin-left:auto;color:var(--accent);opacity:0}
.hdr-opt[aria-checked="true"] .hdr-ck{opacity:1}
.hdr-opt[aria-checked="true"] > .icon:first-child{color:var(--accent)}
.hdr-opt small{display:block;font-size:.875rem;color:var(--muted);font-weight:400;margin-top:2px}
.hdr-seg3{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:4px;border-radius:18px;background:var(--glass);border:1px solid var(--line)}
.hdr-seg3 button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px 9px;border:0;border-radius:14px;background:transparent;color:var(--ink-2);font:500 .875rem/1 var(--f);transition:color .2s}
.hdr-seg3 button .icon{width:19px;height:19px}
.hdr-seg3 button[aria-checked="true"]{color:var(--ink)}
.hdr-seg3 button[aria-checked="true"] .icon{color:var(--accent)}
.hdr-seg3 .hdr-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 12px)/3);border-radius:14px;background:var(--glass-2);box-shadow:0 0 0 1px var(--line-2) inset;transition:transform .45s var(--ease-io)}
:root[data-theme="light"] .hdr-seg3 .hdr-ind{background:#fff;box-shadow:0 0 0 1px var(--line-2) inset,0 4px 12px -6px rgba(10,30,60,.25)}
.hdr-auto-box{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease-io)}
.hdr-auto-box.on{grid-template-rows:1fr}
.hdr-auto-box > div{min-height:0;overflow:hidden}
.hdr-auto-in{padding:10px 6px 2px;display:flex;flex-direction:column;gap:8px}
.hdr-auto-rule{margin:0;font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.hdr-solar-msg{margin:0;font-size:.875rem;line-height:1.45;color:var(--muted)}
.hdr-solar-msg.err{color:var(--danger)}
.hdr-drop hr,.lp-sub hr{border:0;height:1px;background:var(--line);margin:10px 4px}
.hdr-drop-h{padding:2px 10px 8px;font:500 .875rem/1.2 var(--f);color:var(--muted)}
.hdr-set-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 4px 0;padding:8px 6px 0;border-top:1px solid var(--line)}
.hdr-set-foot .linkbtn .icon{width:18px;height:18px}
.hdr-set-foot .linkbtn:hover .icon{transform:none}
.hdr-build-no{border:0;background:none;padding:6px 4px;border-radius:8px;font:500 .875rem/1 var(--f);color:var(--muted);font-variant-numeric:tabular-nums;cursor:pointer;transition:color .2s}
.hdr-build-no:hover{color:var(--accent)}
/* Release Notes – Design wie „Was ist neu“ im Toolkit */
@media (min-width:641px){ #dlg-notes{width:min(680px,calc(100% - 32px))} }
.hdr-notes-lead{margin:8px 0 0;font:italic 400 18px/1.45 "New York",ui-serif,Georgia,serif;color:var(--ink-2);max-width:44ch}
.hdr-nl{position:relative;display:flex;flex-direction:column;gap:26px;padding-left:22px}
.hdr-nl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(var(--accent),var(--line-2) 60%)}
.hdr-nl-b{position:relative}
.hdr-nl-b::before{content:"";position:absolute;left:-22px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--solid);border:2px solid var(--line-2)}
.hdr-nl-b.cur::before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 12px rgba(var(--glow),.9)}
.hdr-nl-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.hdr-nl-h strong{font:650 18px/1.2 var(--fd);letter-spacing:-.01em;color:var(--ink)}
.hdr-badge-new{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font:700 14px/1 var(--f);white-space:nowrap;color:var(--accent-ink);background:linear-gradient(100deg,var(--accent),var(--accent-2));box-shadow:0 6px 20px -6px rgba(var(--glow),.7)}
.hdr-nl ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hdr-nl li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.45}
.hdr-nl li .icon{flex:none;width:16px;height:16px;color:var(--ok);margin-top:2px}
#m-look .hdr-drop-t{color:var(--ink);font-size:.9375rem}
.lp-sub .hdr-drop-t{display:none}
.sw{position:relative;display:flex;align-items:center;gap:12px;min-height:46px;padding:0 10px;border-radius:14px;font:500 .9375rem/1.2 var(--f);cursor:pointer;transition:background .2s}
.sw:hover{background:var(--glass-2)}
.sw > .icon{width:18px;height:18px;color:var(--ink-2)}
.sw .lbl{flex:1}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw.sm{min-height:40px;padding:0 4px;font-size:.875rem}

/* Kompakter Header (Tablet und Mobil) */
.hdr-m-only{display:none}
@media (max-width:1023px){
  .nav,.hdr-acts > :not(.hdr-m-keep){display:none}
  .hdr-m-only{display:grid}
  .hdr-row{height:58px;padding:0 6px 0 16px}
  .brand .logo{height:28px}
}

/* ---------- Mobil: Lichtpunkt-Knopf ---------- */
.lp-btn{display:none;position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:72;width:64px;height:64px;margin-left:-32px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--bar-s);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:var(--shadow),0 0 0 1px rgba(var(--glow),.08);place-items:center;transition:transform .35s var(--ease)}
.lp-btn:active{transform:scale(.94)}
/* D: weicht beim Runterscrollen aus · A: entsteht aus dem Lichtpunkt des Intros (--lpa 0–1, an den Scrollweg gekoppelt) */
.lp-btn{translate:0 0;transition:transform .35s var(--ease),translate .45s var(--ease-io)}
.lp-btn.lp-away{translate:0 calc(100% + 40px + env(safe-area-inset-bottom,0px))}
.lp-btn.lp-born{opacity:var(--lpa,1);scale:calc(.6 + .4 * var(--lpa,1));pointer-events:none}
.lp-btn.lp-born .lp-core{opacity:0}
.lp-fly{position:fixed;left:0;top:0;z-index:73;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;opacity:0;display:none;
  background:radial-gradient(circle,#fff 0 22%,var(--light) 45%,rgba(var(--light-rgb),0) 72%);box-shadow:0 0 14px 5px rgba(var(--light-rgb),.5),0 0 34px 10px rgba(var(--glow),.25)}
.lp-btn::before{content:"";position:absolute;inset:-4px;border-radius:50%;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0 220deg,rgba(var(--glow),.9) 290deg,rgba(var(--glow-2),.9) 320deg,transparent 350deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 6s linear infinite;opacity:.8}
@keyframes spin{to{--ang:360deg}}
.lp-core{position:relative;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#fff 0 22%,var(--light) 45%,rgba(var(--light-rgb),0) 72%);box-shadow:0 0 14px 5px rgba(var(--light-rgb),.5),0 0 34px 10px rgba(var(--glow),.25);transition:transform .45s var(--ease),opacity .3s}
:root[data-theme="light"] .lp-core{background:radial-gradient(circle,#fff 0 18%,var(--light) 42%,rgba(var(--light-rgb),0) 72%)}
.lp-x{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:rotate(-90deg) scale(.6);transition:opacity .3s,transform .45s var(--ease)}
.lp-x .icon{width:22px;height:22px}
.lp-open .lp-core{transform:scale(.2);opacity:0}
.lp-open .lp-x{opacity:1;transform:none}
.lp{position:fixed;inset:0;z-index:70;display:none;flex-direction:column;justify-content:flex-end;align-items:center;padding:0 16px calc(98px + env(safe-area-inset-bottom,0px))}
.lp::before{content:"";position:absolute;inset:0;background:var(--backdrop);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);opacity:0;transition:opacity .35s}
.lp.open::before{opacity:1}
.lp-panel{position:relative;width:min(420px,100%)}
.lp-fan{position:relative;width:100%;aspect-ratio:2.05/1;max-height:240px;margin:0 auto}
.lp-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.lp-arc path{fill:none;stroke:url(#lp-arc-full);stroke-width:.9;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s var(--ease) .05s}
/* Perlenkette (Muster Windows-Ladekreis): fünf Leuchtpunkte laufen von Home nach Kontakt, dicht → auseinander → dicht (header.js) */
.lp-dots circle{fill:rgb(var(--light-rgb));opacity:0;filter:drop-shadow(0 0 1.6px rgba(var(--glow),.95))}
:root[data-theme="light"] .lp-dots circle{fill:var(--accent)}
.lp:not(.open) .lp-dots{display:none}
.lp.open .lp-arc path{stroke-dashoffset:0}
/* Schließen: Panel und Unterebene blenden gemeinsam und schnell aus (statt einzeln zurückzufliegen) */
.lp.closing .lp-panel,.lp.closing .lp-sub{opacity:0;transform:translateY(10px);transition:opacity .18s var(--ease),transform .22s var(--ease)}
/* Einträge bleiben beim Schließen stehen und blenden mit dem Panel aus */
.lp.closing .lp-it,.lp.closing .lp-row{opacity:1;transform:none;transition:none}
.lp.closing .lp-arc path{stroke-dashoffset:0;transition:none}
.lp.closing::before{transition:opacity .22s}
/* Keine Fokusrahmen im Header, Panel und Header-Dialogen bei Touch und Maus (html.hdr-kbd nur bei Tastatur, header.js);
   per Tastatur bleibt der Rahmen, im Lichtbogen als weicher Lichtring statt Rechteck */
html:not(.hdr-kbd) :is(#topbar,#lp,#lp-btn,#dlg-cmd,#dlg-qr) :focus,html:not(.hdr-kbd) #lp-btn:focus{outline:none}
.lp :focus:not(:focus-visible),.lp-btn:focus:not(:focus-visible){outline:none}
.lp a,.lp button,.lp-btn{-webkit-tap-highlight-color:transparent}
.lp-it:focus-visible{outline:none}
.lp-it:focus-visible .c{box-shadow:0 0 0 2px rgba(var(--glow),.7),0 0 18px -2px rgba(var(--glow),.8)}
.lp-it{--fx:0px;--fy:80px;position:absolute;display:flex;flex-direction:column;align-items:center;gap:7px;width:92px;margin-left:-46px;border:0;background:none;padding:0;color:var(--ink);text-decoration:none;font:500 .875rem/1.15 var(--f);text-align:center;
  opacity:0;transform:translate(var(--fx),var(--fy)) scale(.4);transition:opacity .3s,transform .55s var(--ease)}
.lp.open .lp-it{opacity:1;transform:none}
.lp-it .c{position:relative;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:var(--bar-s);border:1px solid var(--line-2);box-shadow:0 14px 30px -14px rgba(0,0,0,.6),0 0 0 4px rgba(var(--glow),.05)}
:root[data-theme="light"] .lp-it .c{background:#fff;box-shadow:0 12px 26px -14px rgba(10,30,60,.4)}
.lp-it .c .icon{width:23px;height:23px}
.lp-it[aria-current="page"] .c{box-shadow:0 0 0 1px rgba(var(--glow),.6) inset,0 0 22px -4px rgba(var(--glow),.7)}
.lp-it .hdr-dot{right:2px;top:4px;margin:0}
.lp-who{position:relative;display:flex;justify-content:center;margin-top:-6px}
.lp-who .lp-it{position:relative;margin:0;flex-direction:row;width:auto;gap:10px;height:46px;padding:0 18px 0 14px;border-radius:999px;background:var(--bar-s);border:1px solid var(--line-2);font-size:.9375rem}
:root[data-theme="light"] .lp-who .lp-it{background:#fff}
.lp-who .lp-it .icon{width:19px;height:19px;color:var(--accent)}
.lp-who .lp-it .hdr-dot{position:static;margin:0 0 0 2px}
.lp-row{position:relative;display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px;margin-top:18px;opacity:0;transform:translateY(16px);transition:opacity .3s .12s,transform .5s var(--ease) .12s}
.lp.open .lp-row{opacity:1;transform:none}
.lp-chip{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 12px;border-radius:16px;border:1px solid var(--line-2);background:var(--bar-s);color:var(--ink);font:500 .9375rem/1 var(--f);text-decoration:none;white-space:nowrap}
:root[data-theme="light"] .lp-chip{background:#fff}
.lp-chip .icon{width:18px;height:18px;color:var(--accent)}
/* Unterebenen (Lösungen, Support, Wer sind wir, Sprache, Erscheinungsbild) */
.lp-sub{position:relative;width:min(460px,100%);max-height:calc(100dvh - 130px);display:flex;flex-direction:column;border-radius:28px;border:1px solid var(--line-2);background:color-mix(in srgb,var(--solid) 92%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:var(--shadow);overflow:hidden;animation:sub-in .45s var(--ease)}
:root[data-theme="light"] .lp-sub{background:rgba(255,255,255,.96)}
@keyframes sub-in{from{opacity:0;transform:translateY(24px) scale(.97)}}
.lp-sub-h{display:flex;align-items:center;gap:8px;padding:10px 10px 8px;border-bottom:1px solid var(--line)}
.lp-sub-h{cursor:pointer;-webkit-tap-highlight-color:transparent}
.lp-sub-h h2{margin:0;font:650 1.125rem/1 var(--fd);letter-spacing:-.02em}
.lp-back{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink-2)}
.lp-sub-b{overflow-y:auto;padding:8px;overscroll-behavior:contain}
/* Lösungen, Support, Wer sind wir: Glaspillen über die ganze Höhe, darunter abgesetzt ein runder Bereichsknopf */
.lp-sub.pills{width:min(400px,100%);border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;animation:none}
:root[data-theme="light"] .lp-sub.pills{background:none}
.lp-sub.pills .lp-sub-h{border:0;min-height:44px;padding:0 0 8px;justify-content:center;position:relative}
.lp-sub.pills .lp-back{position:absolute;left:0;top:0}
.lp-sub.pills .lp-sub-h h2{font:600 1rem/1 var(--f);color:var(--ink-2);letter-spacing:0}
.lp-sub.pills .lp-sub-b{padding:2px 2px 6px}
.lp-pills{display:flex;flex-direction:column;gap:clamp(6px,1.2svh,10px)}
.lp-pill,.lp-foot .c{border:1px solid rgba(255,255,255,.12);background:color-mix(in srgb,var(--solid) 58%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 28px -18px rgba(0,0,0,.7)}
:root[data-theme="light"] .lp-pill,:root[data-theme="light"] .lp-foot .c{border-color:var(--line-2);background:rgba(255,255,255,.72);box-shadow:inset 0 1px 0 #fff,0 10px 24px -16px rgba(10,30,60,.35)}
.lp-pill{position:relative;display:flex;align-items:center;justify-content:center;min-height:clamp(44px,6.4svh,54px);padding:4px 52px;border-radius:999px;color:var(--ink);text-decoration:none;text-align:center;
  animation:li-in .45s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms);transition:transform .2s var(--ease),border-color .2s}
.lp-pill:active{transform:scale(.97);border-color:rgba(var(--glow),.45)}
.lp-pill .hdr-pi{position:absolute;left:20px;top:50%;transform:translateY(-50%);display:grid;color:var(--accent)}
.lp-pill .hdr-pi .icon{width:21px;height:21px}
.lp-pill .hdr-pn{font:500 1rem/1.2 var(--f)}
.lp-pill .hdr-pn span{font-weight:400;color:var(--ink-2)}
.lp-pill .hdr-pn b{font-weight:600}
.lp-pill .hdr-px{position:absolute;right:20px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--muted)}
.lp-pill .hdr-dot{position:static;margin:0 0 0 8px}
.lp-pill.tk{background:linear-gradient(100deg,rgba(var(--glow-2),.14),rgba(var(--glow-2),.04)),color-mix(in srgb,var(--solid) 58%,transparent)}
:root[data-theme="light"] .lp-pill.tk{background:linear-gradient(100deg,rgba(var(--glow-2),.14),rgba(var(--glow-2),.04)),rgba(255,255,255,.72)}
.lp-pill.tk .hdr-pi{color:var(--accent-2)}
.lp-foot{display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;margin:clamp(10px,2.4svh,24px) auto 2px;color:var(--ink);text-decoration:none;font:500 .875rem/1 var(--f);animation:li-in .45s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
.lp-foot .c{width:clamp(44px,6.6svh,54px);height:clamp(44px,6.6svh,54px);border-radius:50%;display:grid;place-items:center;color:var(--accent);transition:transform .2s var(--ease)}
.lp-foot .c .icon{width:22px;height:22px}
.lp-foot:active .c{transform:scale(.94)}
@keyframes li-in{from{opacity:0;transform:translateY(14px)}}
.lp-li{display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:8px 10px;border:0;border-radius:16px;background:transparent;color:var(--ink);text-decoration:none;text-align:left}
.lp-li:active,.lp-li:hover{background:var(--glass-2)}
.lp-li .glyph{width:42px;height:42px;border-radius:13px}
.lp-li .glyph .icon{width:21px;height:21px}
.lp-li .t{flex:1;min-width:0}
.lp-li strong{display:block;font:600 1rem/1.25 var(--f)}
.lp-li span.s{display:block;font-size:.875rem;line-height:1.35;color:var(--muted)}
.lp-li .go{width:18px;height:18px;color:var(--muted)}
.lp-li.all{border:1px solid var(--line);margin-bottom:6px}
.lp-sep{height:1px;background:var(--line);margin:6px 10px}
.lp-sub .hdr-seg3{margin:4px 2px 0}
.lp-sub .hdr-drop-in{padding:6px 4px 8px}
@media (max-width:1023px){
  .lp-fly{display:block}
  .lp-btn{display:grid}
  .lp.show{display:flex}
}

/* QR „Seite aufs Handy" */
#dlg-qr{width:min(420px,calc(100% - 32px))}
.hdr-qr-box{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.hdr-qr-box canvas{width:220px;height:220px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line-2)}
.hdr-qr-box p{margin:0;color:var(--ink-2);font-size:.9375rem;max-width:30ch}
/* Befehlspalette */
dialog.hdr-cmdk{width:min(660px,calc(100% - 24px));margin:11vh auto auto;border-radius:32px;background:color-mix(in srgb,var(--solid) 82%,transparent);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);box-shadow:0 40px 120px -30px rgba(0,0,0,.7),0 0 0 1px rgba(var(--glow),.12);transition:border-radius .38s var(--ease)}
:root[data-theme="light"] dialog.hdr-cmdk{background:color-mix(in srgb,#FFFFFF 88%,transparent)}
dialog.hdr-cmdk[open]{display:block;animation:ck-in .3s var(--ease)}
dialog.hdr-cmdk.hdr-has-res{border-radius:24px}
@keyframes ck-in{from{opacity:0;transform:translateY(-10px) scale(.98)}}
dialog.hdr-cmdk::backdrop{backdrop-filter:blur(8px)}
.hdr-ck-field{position:relative;display:flex;align-items:center;gap:14px;padding:0 24px;height:64px}
.hdr-ck-field > .icon{color:var(--accent);width:22px;height:22px}
.hdr-ck-field input{flex:1;min-width:0;height:100%;border:0;outline:none;background:transparent;font-size:1.125rem;color:var(--ink)}
.hdr-ck-field input::placeholder{color:var(--muted)}
.hdr-ck-field::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--glow),.8),rgba(var(--glow-2),.8),transparent);opacity:0;transition:opacity .3s}
.hdr-has-res .hdr-ck-field::after{opacity:1}
.hdr-ck-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.hdr-has-res .hdr-ck-body{grid-template-rows:1fr}
.hdr-ck-inner{min-height:0;overflow:hidden;display:flex;flex-direction:column}
kbd{min-width:28px;height:28px;padding:0 7px;display:inline-grid;place-items:center;border-radius:7px;border:1px solid var(--line-2);border-bottom-width:2px;background:var(--glass);font:500 .875rem/1 var(--fm);color:var(--ink-2)}
.hdr-ck-list{max-height:min(56dvh,460px);overflow-y:auto;padding:8px;overscroll-behavior:contain;border-top:1px solid var(--line)}
.hdr-ck-group{padding:12px 12px 6px;font-size:.875rem;font-weight:600;color:var(--muted)}
.hdr-ck-item{width:100%;display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 12px;border:0;border-radius:14px;background:transparent;text-align:left;color:var(--ink);font-size:.9375rem}
.hdr-ck-item .glyph{width:34px;height:34px;border-radius:10px;box-shadow:0 0 0 1px rgba(var(--glow),.22) inset}
.hdr-ck-item .glyph .icon{width:17px;height:17px}
.hdr-ck-item .lbl{flex:1;min-width:0}
.hdr-ck-item .lbl mark{background:none;color:var(--accent);font-weight:700}
.hdr-ck-item .meta{font-size:.875rem;color:var(--muted);white-space:nowrap}
.hdr-ck-item .hdr-ret{opacity:0;color:var(--muted);width:16px;height:16px}
.hdr-ck-item[aria-selected="true"]{background:var(--glass-2);box-shadow:0 0 0 1px var(--line-2) inset}
.hdr-ck-item[aria-selected="true"] .hdr-ret{opacity:1}
.hdr-ck-foot{display:flex;gap:18px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line);font-size:.875rem;color:var(--muted)}
.hdr-ck-foot span{display:inline-flex;align-items:center;gap:6px}
@media (hover:none){.hdr-ck-foot{display:none}}

@media (max-width:640px){
  #dlg-qr{width:100%}
  dialog.hdr-cmdk{margin:12px auto auto;border-radius:28px;border-bottom:1px solid var(--line-2)}
  .hdr-ck-item .meta{display:none}
  .hdr-isl-c{padding:2px 14px 14px;gap:12px}
  .hdr-isl-a .btn{padding:0 14px}
}
/* Balken unter dem Raster (einer oder mehrere nebeneinander) */
.hdr-g-bars{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:8px}

/* ===== pages/solutions/../world/wbar.css ===== */
/* ---------- Leiste der Welten (CONCEPT §4, §6 Punkt 88) · Bereich: TENTEN-WEB_CODE_Solutions · /loesungen und Weltseiten ---------- */
.wbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 86px);z-index:40;display:flex;justify-content:center;padding:0 var(--gut);pointer-events:none}
.wbar-in{pointer-events:auto;display:flex;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding:5px;border-radius:999px;border:1px solid var(--line-2);background:var(--bar);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);box-shadow:var(--shadow)}
.wbar-in::-webkit-scrollbar{display:none}
.wbar a{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;color:var(--ink-2);text-decoration:none;font:500 .875rem/1 var(--f);white-space:nowrap;transition:color .25s,background .25s,box-shadow .25s}
.wbar a .icon{width:18px;height:18px;stroke-width:1.6}
.wbar a:hover{color:var(--ink);background:var(--glass-2)}
.wbar a[aria-current]{color:var(--ink);background:var(--glass-2);box-shadow:0 0 0 1px rgba(var(--glow),.38) inset,0 0 20px -6px rgba(var(--glow),.75)}
.wbar a[aria-current] .icon{color:var(--accent)}
.wbar .wb-sep{flex:none;width:1px;margin:8px 4px;background:var(--line-2)}
.wbar .wb-ext{width:14px;height:14px;opacity:.7}
@media (max-width:1023px){.wbar{top:calc(env(safe-area-inset-top,0px) + 78px)}}
@media (max-width:640px){
  .wbar{top:calc(env(safe-area-inset-top,0px) + 84px);padding:0 8px}
  .wbar a{padding:0 12px}
}

/* ===== pages/solutions/solutions.css ===== */
/* ---------- Alle Lösungen (/loesungen) · Bereich: TENTEN-WEB_CODE_Solutions ---------- */
.sol{position:relative}
.sol-head{position:relative;min-height:100svh;display:flex;align-items:center;padding:clamp(110px,14vh,140px) 0 clamp(80px,12vh,120px);text-align:center;overflow:clip}
.sol-head > .wrap{width:100%}
/* Kopf (Mark, 2026-10-11): Aurora mit Raster wie im Toolkit-Hero, unten Lichtbögen; zweiter Satz im Farbverlauf wie „Oder mit uns.“ auf der Startseite */
.sol-head{isolation:isolate}
/* Foto im Kopf (Mark 2026-10-11): Dunkel dezent, Hell kräftiger („Mehr als Mittel“) */
.sol-photo{position:absolute;inset:0;z-index:-2;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 35%,transparent 80%);mask-image:radial-gradient(ellipse 85% 75% at 50% 45%,#000 35%,transparent 80%)}
.sol-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;transform-origin:50% 50%;opacity:.28}
:root[data-theme="light"] .sol-photo img{opacity:.38}
/* Hellmodus: Türkis im Verlauf dunkler, damit er auf dem Foto lesbar bleibt (Mark, 2026-10-11) */
:root[data-theme="light"] .sol-h .soft{background-image:linear-gradient(100deg,var(--accent),#066B62)}
.sol-aur{position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.sol-aur i{position:absolute;border-radius:50%}
.sol-aur i:nth-child(1){left:-6%;top:2%;width:68%;height:62%;background:radial-gradient(closest-side,rgba(var(--glow),.34),rgba(var(--glow),.08) 55%,transparent)}
.sol-aur i:nth-child(2){right:-8%;top:10%;width:62%;height:66%;background:radial-gradient(closest-side,rgba(var(--glow-2),.26),rgba(var(--glow-2),.06) 55%,transparent)}
.sol-aur i:nth-child(3){left:24%;top:34%;width:52%;height:46%;background:radial-gradient(closest-side,rgba(var(--glow),.2),transparent)}
:root[data-theme="light"] .sol-aur i{opacity:.6}
.sol-head::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:56px 56px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 38%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 38%,#000 30%,transparent 75%)}
/* Hellmodus (Mark 2026-10-12): Fläche unter den Bögen nach unten zunehmend entsättigt (gräulich statt bläulich), über Foto, Aurora und Schein,
   unter Bögen und Raster; endet im Seitenhintergrund (keine Kante am Kopfende) */
.sol-gray{position:absolute;inset:0;z-index:-1;pointer-events:none;display:none}
:root[data-theme="light"] .sol-gray{display:block;-webkit-backdrop-filter:saturate(.15);backdrop-filter:saturate(.15);
  -webkit-mask-image:linear-gradient(transparent 25%,rgba(0,0,0,.5) 50%,#000 78%);mask-image:linear-gradient(transparent 25%,rgba(0,0,0,.5) 50%,#000 78%);
  background:linear-gradient(rgba(238,242,247,0) 70%,var(--bg))}
.sol-arcs{z-index:-1;height:clamp(240px,38vh,360px)}
.sol-arcs svg{width:max(1100px,104vw)}
.sol-head::before{content:"";position:absolute;left:50%;bottom:-10%;width:min(1400px,160vw);aspect-ratio:2.4;transform:translateX(-50%);border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgba(var(--glow),.12),transparent);pointer-events:none}
/* Erste Zeile im Dunkelmodus grau wie „TENTEN“ vor den Weltnamen (Mark, 2026-10-12) */
:root:not([data-theme="light"]) .sol-h > span:first-child{color:var(--ink-2)}
/* „Entdecke alle unsere Lösungen“ ohne Verlauf: Dunkel grau, Hell schwarz (Mark, 2026-10-12) */
.sol-all-h.sol-all-h{background:none;color:var(--ink-2)}
:root[data-theme="light"] .sol-all-h.sol-all-h{color:var(--ink)}
.sol-h .soft{display:table;margin:0 auto;padding-bottom:.08em;background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}

.sol-head .wrap{position:relative}
/* „Alle Lösungen“ zwischen Kopf und erster Welt, in der Akzentfarbe */
.sol-all{position:relative;padding:clamp(120px,20vh,220px) 0 clamp(24px,4vh,40px);scroll-margin-top:90px}
.sol-all-h{margin:0;max-width:20ch;text-wrap:balance;font:650 clamp(2rem,3.6vw,3.25rem)/1.05 var(--fd);letter-spacing:-.04em;background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em;width:fit-content}
/* Foto hinter den Kacheln (Mark, 2026-10-12): Band über die ganze Breite, genau so hoch wie die Kacheln, nur minimaler Übergang oben und unten; Kacheln darauf als dunkles Glas */
.wt-band{position:relative;isolation:isolate;margin-top:clamp(28px,5vh,48px)}
.wt-band .wt-grid{margin-top:0}
.wt-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - 14px),transparent)}
.wt-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wt-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 90% at 50% 50%,rgba(5,7,11,.3),rgba(5,7,11,.6))}
/* Hell und Dunkel gleich: ab 1024 px Đào Hiếu (tiefer), darunter 土豆 地雷 (Mark, 2026-10-12) */
.wt-bg .bg-dn{display:none}
.wt-bg .bg-dw{object-position:50% 37%}
@media (max-width:1023px){.wt-bg .bg-dw{display:none}.wt-bg .bg-dn{display:block}}
/* Hellmodus: weißer Schleier „Medium“ (15 %) über dem Foto (Mark, 2026-10-12) */
.wt-bg::before{content:"";position:absolute;inset:0;z-index:1;background:#fff;opacity:0}
:root[data-theme="light"] .wt-bg::before{opacity:.15}
.wt-band .wt,:root[data-theme="light"] .wt-band .wt{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border-color:rgba(255,255,255,.22)}
/* Überfahren auf dem Foto: nur etwas heller und Lichtrand, in Hell und Dunkel gleich (Fehler: im Hellmodus griff die weiße Hover-Fläche, Mark 2026-10-12) */
.wt-band .wt:hover,:root[data-theme="light"] .wt-band .wt:hover{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07));border-color:rgba(var(--glow),.55)}
/* Weltenkacheln: ziehen sich beim Weiterscrollen in die Auswahlpille zusammen (solutions.js) */
.wt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.wt{display:flex;flex-direction:column;justify-content:flex-start;height:100%;min-height:118px;padding:clamp(20px,2.4vw,30px);border-radius:var(--r);border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);text-decoration:none;transform-origin:50% 50%;will-change:transform;transition:border-color .25s,background .25s}
/* transparentes Glas wie die Karten auf /wir (Mark, 2026-10-11); hell: leicht milchig statt weiß */
:root[data-theme="light"] .wt{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.25))}
.wt:hover{border-color:rgba(var(--glow),.45);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04))}
:root[data-theme="light"] .wt:hover{background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.4))}
.wt-t{display:flex;flex-direction:column;gap:8px;min-width:0}
.wt-n{font:650 clamp(1.1875rem,1.7vw,1.375rem)/1.2 var(--fd);letter-spacing:-.025em}
.wt-n .tt{font-weight:500;color:var(--ink-2)}
.wt-k{font-size:1rem;line-height:1.5;color:var(--ink-2)}
.sol .sol-pill{margin:18px 0 clamp(90px,16vh,180px)}
.sol-pill .wbar-in{opacity:0}  /* sichtbar erst nach dem Zusammenziehen (solutions.js) */
.sol-h{margin:0 auto;max-width:22ch;font:650 clamp(2.75rem,7vw,6rem)/1 var(--fd);letter-spacing:-.05em;text-wrap:balance}
.sol-lead{margin:28px auto 0;max-width:52ch;font-size:clamp(1.0625rem,1.45vw,1.3125rem);line-height:1.55;color:var(--ink-2);text-wrap:pretty}

/* Gemeinsamer Inhalt je Welt */
.lw{position:relative;scroll-margin-top:150px}  /* nur ohne JS; sonst setzt solutions.js je Abschnitt den Sprungpunkt (Sprungziele) */
.lw-d{scroll-margin-top:-96px}  /* hebt das scroll-padding (96 px, base.css) auf – Sprung auf ein Vollbild-Foto landet genau am Andockpunkt, ohne Streifen darüber (Mark, 2026-10-12) */
/* Der Header setzt beim Sprung über die Leiste den Fokus auf den Abschnitt – ohne Rahmen (wie /nachhaltigkeit, Mark 2026-10-11) */
.lw:focus,.lw:focus-visible,.sol-all:focus,.sol-all:focus-visible{outline:none}
.lw-photo{position:relative;overflow:hidden;border-radius:var(--r);background:var(--bg-2)}
.lw-photo img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover}
.lw-txt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.lw-name{display:flex;align-items:center;gap:16px;margin:0;font:650 clamp(2.5rem,5.2vw,4.5rem)/1 var(--fd);letter-spacing:-.045em}
.lw-name .tt{font-weight:500;color:var(--ink-2)}
.lw-kz{margin:0;font:500 clamp(1.25rem,2vw,1.75rem)/1.2 var(--fd);letter-spacing:-.02em;background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
/* Ausführlicher Satz statt Kurzzusatz (nur /loesungen, Mark 2026-10-12): etwas kleiner als der Kurzzusatz, damit er als Satz lesbar bleibt */
/* Work (Mark, 2026-10-12): Einstiegssatz im Farbverlauf, darunter der ausführliche Satz als Fließtext – Satz darunter weiß (Mark) */
.lw-kz.lw-hook{max-width:none;font-size:clamp(1.25rem,1.9vw,1.625rem);line-height:1.25;text-wrap:pretty}
/* erster Teil des Einstiegs als eigene Zeile, ab Tablet ohne Umbruch (Mark, 2026-10-12) */
.lw-hook .l1{display:block}
@media (min-width:641px){.lw-hook .l1{white-space:nowrap}}
.lw-lead2{margin:0;max-width:46ch;font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.5;text-wrap:pretty;color:var(--ink)}
.lw-kz.lw-lead{max-width:34ch;font-size:clamp(1.1875rem,1.7vw,1.5rem);line-height:1.3;text-wrap:pretty}
.lw-topics{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.lw-topics li{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:500 .9375rem/1.25 var(--f);color:var(--ink)}
/* Pillen auf Fotos (Vollbild-Welten, Toolkit-Band): dunkles Glas, damit sie auch auf hellen Bildstellen lesbar sind – Hell und Dunkel gleich (Mark, 2026-10-12) */
.lw-pin .lw-topics li,.lw-band-in .lw-topics li{background:rgba(8,12,18,.55);border-color:rgba(255,255,255,.2);color:#F2F5F9}
.lw-pin .lw-go,.lw-band-in .lw-go{background:rgba(8,12,18,.55);border-color:rgba(255,255,255,.2);color:#F2F5F9}
.lw-pin .lw-go:hover,.lw-band-in .lw-go:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}  /* beim Überfahren hell-transparent wie der normale Glasknopf (Mark, 2026-10-12) */
.lw-isl{margin:0;max-width:48ch;font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
/* Ausführlicher Text in zwei Absätzen (Work, Mark 2026-10-12) */
.lw-text{max-width:64ch}
.lw-text p{margin:0}
.lw-text p + p{margin-top:.75em}
/* Work als Abfolge (Mark, 2026-10-12): Name, Einstieg und Pillen bleiben stehen; darunter eine Bühne, in der mit dem Scrollen
   erst der Satz erscheint, dann ihm Absatz 1 folgt (Satz blendet aus) und Absatz 2 dazukommt. Ohne Szene einfach untereinander. */
.lw-stage{display:flex;flex-direction:column;align-items:center;gap:inherit;width:100%}
.lw-seq.seq-jump .lw-txt{opacity:0;transition:none}  /* Rücksprung von unten: nur das Foto, Texte bauen sich erst am Andockpunkt neu auf */
html.scenes .lw-d.lw-seq{height:340vh}  /* Scrollweg 240vh: kurz genug für Scrollen von Hand, die Automatik übernimmt die Pausen (Mark, 2026-10-13) */
html.scenes .lw-seq .lw-stage{display:grid;justify-items:center;align-items:center;flex:1;min-height:0}
html.scenes .lw-seq .lw-stage > *{grid-area:1/1}
/* Platz nutzen (Mark, 2026-10-12): Kopfteil oben, die Bühne füllt den Rest und steht darin mittig, Knopf unten */
html.scenes .lw-seq .lw-pin{align-items:stretch}
html.scenes .lw-seq .lw-pin > .wrap{display:flex}
html.scenes .lw-seq .lw-txt{flex:1}
html.scenes .lw-seq .lw-act{margin-top:0}
html.scenes .lw-seq .st-lead{max-width:30ch;font-size:clamp(1.375rem,2.3vw,2rem);line-height:1.35}
.lw-seq .lw-text p + p{margin-top:1.1em}
.lw-seq .lw-text{color:var(--ink)}
/* Abfolge muss in jede Fensterhöhe passen (Absätze lagen bei 1000 × 700 auf dem Knopf): Abstände und Fließtext richten sich nach der Höhe, nie unter 15 px */
html.scenes .lw-d.lw-seq .lw-pin{padding-top:clamp(150px,21vh,220px)}
html.scenes .lw-seq .lw-text{font-size:clamp(.9375rem,2.15vh,1.25rem);line-height:1.5}
html.scenes .lw-seq .lw-name{font-size:clamp(2.25rem,7.2vh,4.5rem)}
html.scenes .lw-seq .lw-txt{gap:clamp(12px,2.2vh,40px)}
/* Handy: Satz mit mehr Abstand zu den Pillen (Mark, 2026-10-12) */
html:not(.scenes) .lw-seq .st-lead{margin-top:14vh}
/* Handy-Abfolge: jeder Block bekommt seinen eigenen Bildschirm, das Foto bleibt dahinter stehen (Mark, 2026-10-12) */
html.reveal:not(.scenes) .lw-seq .lw-pin{display:block;padding-top:0;padding-bottom:0;overflow:clip}
html.reveal:not(.scenes) .lw-seq .lw-photo{position:sticky;inset:auto;top:0;height:100svh;margin-bottom:-100svh}
html.reveal:not(.scenes) .lw-seq .lw-pin > .wrap{padding-top:clamp(110px,16svh,150px)}
html.reveal:not(.scenes) .lw-seq .st-p1,html.reveal:not(.scenes) .lw-seq .st-p2{margin-top:4svh}
html.reveal:not(.scenes) .lw-seq .lw-act{margin-top:7svh;margin-bottom:clamp(56px,9svh,88px)}  /* Knopf mit Abstand zum letzten Absatz (Mark) */
/* Fortschrittskreis beim Autoscroll (solutions.js) */
/* Während der Fahrt bleibt die Bühne fest stehen (fixed statt sticky), damit sie beim programmgesteuerten Scrollen nicht zittert (Flackern, Mark 2026-10-12) */
html.scenes .lw-seq.is-auto .lw-pin{position:fixed;top:0;left:0;right:0}
.sol-ring{position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);z-index:55;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
  background:rgba(8,12,18,.72);border:1px solid rgba(255,255,255,.18);color:#EAF6FF;
  opacity:0;transform:scale(.85);transition:opacity .35s var(--ease),transform .35s var(--ease);pointer-events:none}
.sol-ring.on{opacity:1;transform:none}
.sol-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.sol-ring circle{fill:none;stroke-width:3}
.sol-ring .bg{stroke:rgba(255,255,255,.14)}
/* Pause-Zeichen in der Mitte des Kreises: blendet am Halt weich ein, pulsiert, blendet beim Weiterfahren sanft aus (Mark, 2026-10-12) */
.sol-ring .pz{position:relative;display:flex;gap:4px;opacity:0;transform:scale(.8);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.sol-ring .pz i{display:block;width:4px;height:14px;border-radius:2px;background:#EAF6FF}
.sol-ring.wait .pz{opacity:1;transform:none;animation:sol-pz 1.8s ease-in-out .5s infinite}
@keyframes sol-pz{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.88)}}
.sol-ring .fg{stroke:url(#arc-g);stroke:var(--accent);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k,0));filter:drop-shadow(0 0 4px rgba(var(--glow),.7))}
@media (max-width:1023px){.sol-ring{bottom:96px}}  /* Absätze bei Work weiß (Mark, 2026-10-12) */
.lw-act{margin:6px 0 0}
/* Einblenden ohne Szene (Mobil, Tablet ohne Szene, A/Paar/Kompakt/Band immer): gestaffelt beim Erreichen */
html.reveal .lw-txt [data-s]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease) calc(var(--s) * 90ms),transform .7s var(--ease) calc(var(--s) * 90ms)}
html.reveal .lw-txt.in [data-s]{opacity:1;transform:none}
.lw-txt [data-s="0"]{--s:0}.lw-txt [data-s="1"]{--s:1}.lw-txt [data-s="2"]{--s:2}.lw-txt [data-s="3"]{--s:3}.lw-txt [data-s="4"]{--s:4}.lw-txt [data-s="5"]{--s:5}

/* D – groß, Foto über die ganze Breite (mit Szene angeheftet, Text baut sich mit dem Scrollen auf) */
.lw-d{margin:clamp(24px,6vh,60px) 0}
.lw-d .lw-pin{position:relative;min-height:max(560px,100svh);display:flex;align-items:flex-end;padding:clamp(80px,14vh,140px) 0 clamp(64px,12vh,120px);color:var(--ink);overflow:hidden}
.lw-d .lw-photo{position:absolute;inset:0;border-radius:0}
.lw-d .lw-photo img{inset:0;height:100%;transform-origin:50% 50%}
/* ohne Szene (Handy) gleitet das Foto: Überstand oben/unten, sonst wird oben der dunkle Grund sichtbar (Fehler, Mark 2026-10-12) */
html:not(.scenes) .lw-d .lw-photo img{inset:-6% 0;height:112%}
.lw-d .lw-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,6,10,.82),rgba(3,6,10,.5) 45%,rgba(3,6,10,.08) 75%),linear-gradient(180deg,rgba(3,6,10,.55),transparent 28%,transparent 62%,rgba(3,6,10,.7))}
.lw-d .lw-pin > .wrap{position:relative;width:100%}
.lw-d.lw-center .lw-pin{align-items:center}
.lw-d.lw-center .lw-txt{align-items:center;text-align:center;margin:0 auto}
.lw-d.lw-center .lw-topics{justify-content:center}
/* Work (Mark, 2026-10-12): Abstand oben wie bisher, Inhalt nach unten verteilt (größere Abstände statt leerer Fläche unten) */
.lw-d.lw-spread .lw-pin{align-items:flex-start;padding-top:clamp(150px,22vh,220px);padding-bottom:clamp(40px,8vh,90px)}
.lw-d.lw-spread .lw-txt{gap:clamp(14px,2.6vh,40px)}
.lw-d.lw-spread .lw-name + .lw-hook{margin-top:calc(-1 * clamp(4px,1.6vh,22px))}
.lw-d.lw-center .lw-photo::after{background:radial-gradient(60% 55% at 50% 55%,rgba(3,6,10,.78),rgba(3,6,10,.4) 70%,rgba(3,6,10,.2)),linear-gradient(180deg,rgba(3,6,10,.55),transparent 30%,transparent 70%,rgba(3,6,10,.6))}
html.scenes .lw-d{height:220vh;margin:0}
html.scenes .lw-d .lw-pin{position:sticky;top:0;height:100vh;min-height:0}
html.scenes .lw-d .lw-txt [data-s]{transition-delay:0s}
html.scenes .lw-seq .lw-txt [data-s],html.scenes .lw-seq .lw-stage *{transition:none}  /* Abfolge rein scroll-gekoppelt, keine nachlaufenden Übergänge */

/* A – großes Bild neben dem Text (gespiegelt möglich); kompakt = kleiner und niedriger */
/* Sprunglandung (Mark, 2026-10-19): Jede Welt beginnt mit --land Luft über ihrem Inhalt (Header 86 px + Auswahlpille 52 px + Abstand). So liegt nach
   einem Sprung die Abschnittskante oben am Fensterrand, vom vorigen Abschnitt ist nichts zu sehen und der Inhalt steht frei unter der Pille. */
.sol{--land:164px}
@media (max-width:640px){.sol{--land:152px}}
.lw-a{padding:var(--land) 0 clamp(32px,5vh,64px)}
.lw-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center}
.lw-a .lw-photo{aspect-ratio:4/5;max-height:calc(100vh - var(--land) - 32px);width:100%}
.lw-a:not(.lw-compact){min-height:100vh;display:flex;align-items:center}
.lw-a:not(.lw-compact) > .wrap{width:100%}
.lw-mirror .lw-photo{order:2}
/* Bild neben Text: Größen und Abstände folgen auch der Fensterhöhe, damit Name bis Knopf auf gängigen Laptops auf einen Bildschirm passen (Mark, 2026-10-19) */
@media (min-width:641px){
  .lw-a:not(.lw-compact) .lw-txt{gap:clamp(10px,2vh,18px)}
  .lw-a:not(.lw-compact) .lw-name{font-size:min(clamp(2.5rem,5.2vw,4.5rem),8vh)}
  .lw-a:not(.lw-compact) .lw-lead2,.lw-p .lw-lead2{font-size:clamp(1rem,2.2vh,1.25rem)}
  .lw-a:not(.lw-compact) .lw-text,.lw-p .lw-text{font-size:clamp(.9375rem,2.1vh,1.25rem);line-height:1.5}   /* Flow und Ready gleich groß wie die übrigen Welten (Mark, 2026-10-21) */
}
/* Bild neben Text ab 1024 px (Mark, 2026-10-19): Text in der breiteren Spalte; das Foto ist mindestens so hoch wie der Textblock – Name und Knopf
   ragen nie über das Foto hinaus; bei wenig Text steht der Text mittig neben dem Foto. Darunter stehen Foto und Text untereinander. */
@media (min-width:1024px){
  /* Foto breiter, weniger Rand (Mark, 2026-10-19): breiterer Rahmen; die Textspalte bleibt exakt wie vorher (55 % des bisherigen 1240-px-Rahmens), das Foto nimmt den Rest */
  .lw-a:not(.lw-compact) > .wrap{max-width:1600px}
  .lw-a:not(.lw-compact):not(.lw-mirror) .lw-grid{grid-template-columns:minmax(0,1fr) minmax(0,calc((min(100vw,1240px) - 2 * var(--gut) - clamp(32px,6vw,96px)) * .55))}
  .lw-a.lw-mirror .lw-grid{grid-template-columns:minmax(0,calc((min(100vw,1240px) - 2 * var(--gut) - clamp(32px,6vw,96px)) * .55)) minmax(0,1fr)}
  .lw-a:not(.lw-compact) .lw-grid{align-items:stretch}
  .lw-a:not(.lw-compact) .lw-photo{aspect-ratio:auto;max-height:none;min-height:clamp(380px,60vh,640px)}
  .lw-a:not(.lw-compact) .lw-txt{align-self:center}
}
@media (min-width:641px){   /* kompakt (Amps): Foto ebenfalls mindestens so hoch wie der Text */
  .lw-compact .lw-grid{align-items:stretch}
  .lw-compact .lw-photo{aspect-ratio:auto;min-height:clamp(240px,34vh,420px)}
  .lw-compact .lw-txt{align-self:center}
}
@media (min-width:641px) and (max-width:1023px){
  .lw-a:not(.lw-compact) .lw-grid{grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,40px)}
  .lw-a:not(.lw-compact) .lw-photo{order:0;aspect-ratio:16/9;max-height:none}
}
.lw-compact .lw-grid{grid-template-columns:minmax(0,.62fr) minmax(0,1fr)}
.lw-compact .lw-photo{aspect-ratio:1}
.lw-compact .lw-name{font-size:clamp(2.125rem,4vw,3.25rem)}

/* Paar – zwei kleinere Welten nebeneinander */
.lw-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);padding-block:var(--land) clamp(32px,5vh,64px)}
.lw-p{display:flex;flex-direction:column;border-radius:calc(var(--r) + 6px);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));overflow:hidden}
:root[data-theme="light"] .lw-p{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.72));box-shadow:0 1px 1px rgba(10,18,30,.04),0 18px 40px -24px rgba(10,30,60,.3)}
.lw-p .lw-photo{aspect-ratio:16/10;border-radius:0}
.lw-p .lw-txt{padding:clamp(22px,3vw,36px);flex:1}
.lw-p .lw-name{font-size:clamp(2rem,3.4vw,3rem)}
.lw-p .lw-act{margin-top:auto;padding-top:6px}

/* Band – Toolkit (extern) */
.lw-band{padding:var(--land) 0 clamp(32px,5vh,64px)}
.lw-band-in{position:relative;display:flex;align-items:center;min-height:clamp(320px,46vh,460px);padding:clamp(28px,5vw,64px);border-radius:calc(var(--r) + 8px);overflow:hidden;color:var(--ink)}
.lw-band-in .lw-photo{position:absolute;inset:0;border-radius:0}
.lw-band-in .lw-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,6,10,.85),rgba(3,6,10,.55) 55%,rgba(3,6,10,.2))}
.lw-band .lw-name{font-size:clamp(2.125rem,4vw,3.25rem)}

/* Aufruf */
.sol-cta{position:relative;padding:clamp(80px,16vh,180px) 0 clamp(100px,18vh,200px);text-align:center;overflow:clip}
.sol-cta::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,120vw);aspect-ratio:2;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(var(--glow),.16),rgba(var(--glow-2),.05) 60%,transparent);pointer-events:none}
.sol-cta .wrap{position:relative}
.sol-cta-p{margin:18px auto 0;max-width:46ch;font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.55;color:var(--ink-2)}
.sol-cta-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}

@media (min-width:1440px){.lw-name{font-size:clamp(4.5rem,5vw,5.25rem)}}
@media (max-width:1023px){
  /* Tablet: unten Platz für den Lichtpunkt-Knopf (Knopf „… entdecken“ lag darauf, Mark 2026-10-12) */
  html.scenes .lw-d.lw-spread .lw-pin{padding-bottom:100px}
  .wt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lw-a:not(.lw-compact){min-height:0}
  .lw-pair{grid-template-columns:minmax(0,1fr);row-gap:var(--land)}  /* untereinander: Ready landet ohne Flow darüber */
  .sol-cta{padding-bottom:clamp(140px,20vh,200px)}
}
@media (max-width:640px){
  .wt-grid{gap:10px}
  .wt{min-height:0;padding:16px}
  .wt-n{font-size:1.0625rem}
  .wt-k{font-size:.875rem;line-height:1.4}
  .lw-grid,.lw-compact .lw-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .lw-mirror .lw-photo{order:0}
  .lw-a .lw-photo{aspect-ratio:4/3}
  .lw-d .lw-pin{min-height:max(520px,88svh)}
  .lw-band-in .lw-photo::after{background:linear-gradient(180deg,rgba(3,6,10,.55),rgba(3,6,10,.85))}
  .sol-cta-btns .btn{width:100%}
}

/* One (Mark, 2026-10-19/20): Hintergrund Marks Foto (Vogel rechts im Bild), darüber iPad mit Hand (freigestellt per Maske, Foto Roberto Nickson).
   Der Arm sitzt immer in der linken unteren Ecke (läuft aus dem Bild). Das Display ist ein Viereck mit Perspektive (vermessene Ecken, solutions.js). */
#one .lw-photo{container-type:size}
#one .lw-photo > img{object-position:85% 50%}
/* Unter 1024 px steht das Foto über dem Text: bei One höher, damit iPad und Display groß genug bleiben (Tablet 4:3, Handy quadratisch) */
@media (max-width:1023px){#one .lw-photo{aspect-ratio:4/3}}
@media (max-width:640px){#one .lw-photo{aspect-ratio:1}}
.one-ipad{position:absolute;z-index:1;bottom:0;left:0;width:min(96cqw,80cqh);aspect-ratio:3900/4480;pointer-events:none}
.one-ipad .one-hand{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
  -webkit-mask:var(--m) 0 0/100% 100% no-repeat;mask:var(--m) 0 0/100% 100% no-repeat}
.one-screen{position:absolute;left:0;top:0;width:0;height:0;overflow:hidden;border-radius:1.3%/1.75%;transform-origin:0 0;background:#0b1220;container-type:inline-size}
.one-screen img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0}
/* Statusleiste wie iPadOS (Mark, 2026-10-20): Zeit und Datum links (live, Wien), WLAN, Akkustand rechts – neigt sich mit dem Display */
.one-sb{position:absolute;z-index:1;left:2.6%;right:2.4%;top:1.6%;display:flex;justify-content:space-between;align-items:center;color:#fff;font:600 max(7px,2.35cqw)/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;letter-spacing:.01em;text-shadow:0 0 6px rgba(0,20,50,.25)}
.one-sb-r{display:flex;align-items:center;gap:.4em}
.one-sb svg{display:block;width:1.15em;height:auto;fill:currentColor}
.one-sb svg.one-sb-bat{width:2em}
/* Display als Sperrbildschirm (Mark, 2026-10-20): kleine Zeile oben wie das Datum, große Zeile wie die Uhrzeit; die Berge stehen davor (Tiefeneffekt:
   dasselbe Foto noch einmal darüber, nur unter dem Kamm deckend). Ablauf: kleine Zeile blendet ein, die große steigt hinter den Bergen auf, dann kommen
   drei Mitteilungen nacheinander und stapeln sich (neueste vorne). Lage und Größe setzt solutions.js (--ridge, --fs, --nt-top). */
.one-ls{position:absolute;z-index:1;inset:0;text-align:center;color:rgba(255,255,255,.94)}
.one-ls-t{position:absolute;left:0;right:0;top:calc(var(--ridge,50%) - .77 * var(--fs,25cqw));font:650 var(--fs,25cqw)/1 var(--fd);letter-spacing:-.01em;white-space:nowrap;
  opacity:0;transform:translateY(1.05em);transition:transform 1.6s cubic-bezier(.2,.75,.15,1)}
.one-ls-d{position:absolute;left:0;right:0;top:calc(var(--ridge,50%) - .77 * var(--fs,25cqw) - var(--sm,4cqw) * 1.5);font:600 var(--sm,4cqw)/1 var(--fd);letter-spacing:.32em;padding-left:.32em;
  opacity:0;transition:opacity .9s var(--ease)}
.one-fg{z-index:2;-webkit-mask:var(--m) 0 0/100% 100% no-repeat;mask:var(--m) 0 0/100% 100% no-repeat}
.one-sb{z-index:4}
.one-nts{position:absolute;z-index:3;left:17%;right:17%;top:var(--nt-top,62%)}
@container (max-width:260px){.one-nt{padding:.55em .75em;gap:.55em}.one-nts{left:12%;right:12%}}
.one-nt{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:.7em;padding:.7em .9em;border-radius:1.15em;background:rgba(245,246,250,.82);color:#11161d;
  font:400 max(6px,2.75cqw)/1.2 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;box-shadow:0 .4em 1.6em rgba(0,10,30,.2);
  opacity:0;transform:translateY(45%) scale(.97);transition:opacity .55s var(--ease),transform .7s var(--ease)}
.one-nt[data-pos="0"]{opacity:1;transform:none;z-index:3}
.one-nt[data-pos="1"]{opacity:.9;transform:translateY(16%) scale(.94);z-index:2}
.one-nt[data-pos="2"]{opacity:.75;transform:translateY(30%) scale(.88);z-index:1}
.one-nt[data-pos="1"] .one-nt-b,.one-nt[data-pos="2"] .one-nt-b,.one-nt[data-pos="1"] .one-nt-i,.one-nt[data-pos="2"] .one-nt-i{opacity:0;transition:opacity .4s}
/* App-Symbol (Mark, 2026-10-20): weiß mit dem TENTEN-Logo in den dunkleren Markenfarben */
.one-nt-i{flex:none;display:grid;place-items:center;width:2.4em;height:2.4em;border-radius:.6em;background:#fff;box-shadow:inset 0 0 0 1px rgba(17,22,29,.1)}
.one-nt-i svg{display:block;width:84%;height:auto;--logo-b:#1A5A7E;--logo-g:#5A6270}
.one-nt-b{display:flex;flex-direction:column;gap:.12em;min-width:0}
.one-nt-b strong{font-weight:650}
.one-nt-h{display:flex;justify-content:space-between;gap:1em}
.one-nt-h b{font-weight:500;color:rgba(17,22,29,.6)}
.one-nt-h small{font-size:.86em;color:rgba(17,22,29,.55)}
.one-screen.ls-on .one-ls-d,.one-screen.ls-on .one-ls-t{opacity:1}   /* große Zeile erst sichtbar, wenn die Berge davor geladen sind (steht dann noch dahinter) */
.one-screen.ls-up .one-ls-t{transform:none}
@media (prefers-reduced-motion:reduce){.one-ls-t,.one-ls-d,.one-nt{transition:none}}

/* Pro (Mark, 2026-10-20): Einstieg als große Überschrift mittig über Name und Foto, wie der Seitenkopf – erste Zeile Text, zweite im Verlauf;
   mehr Abstand zu One (außerhalb des Abschnitts, damit der Sprung zu Pro unverändert mit --land landet) */
#pro{margin-top:clamp(64px,12vh,144px)}
.lw-a.lw-headed{flex-direction:column;justify-content:center;align-items:stretch}
.lw-headed > .wrap{width:100%}
.lw-head{margin:0 auto clamp(40px,7vh,88px);max-width:24ch;text-align:center;font:650 clamp(2rem,4.4vw,4rem)/1.05 var(--fd);letter-spacing:-.045em;text-wrap:balance}
.lw-head .soft{display:table;margin:0 auto;padding-bottom:.08em;background:linear-gradient(100deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] .lw-head .soft{background-image:linear-gradient(100deg,var(--accent),#066B62)}
@media (max-width:640px){.lw-head{margin-bottom:28px}}
/* Pro: Antwort unter dem Namen – ein Satz pro Zeile (Mark, 2026-10-20) */
.lw-two{text-wrap:pretty}
.lw-two .l1{display:block}
/* Pro-Überschrift (Mark, 2026-10-20): Hell erste Zeile Text, zweite im Verlauf; Dunkel in den Logo-Farben (erste Zeile Blau, zweite Grau) */
:root:not([data-theme="light"]) .lw-head > span:first-child{color:var(--logo-b)}
:root:not([data-theme="light"]) .lw-head .soft{background:none;color:var(--logo-g)}
/* Pro-Foto (Mark, 2026-10-20): Laden mit iMac; auf dem Display zuerst ein überladenes Programm, dann bleibt nur die aufgeräumte Anwendung.
   Foto ohne Gleiten (das Display ist fest im Foto vermessen), Ausschnitt so, dass der Bildschirm immer drin ist. Display als 640 × 360 px große Ebene,
   per Perspektivmatrix auf die vermessenen Ecken gelegt (solutions.js) */
#pro .lw-photo > img{inset:0;height:100%;object-position:50% 42%}
@media (max-width:1023px){#pro .lw-photo{aspect-ratio:4/3}}
@media (max-width:640px){#pro .lw-photo{aspect-ratio:1}}
.pro-scr{position:absolute;left:0;top:0;width:640px;height:360px;transform-origin:0 0;overflow:hidden;border-radius:3px;background:#E9ECF0;color:#1d232b;
  font:400 10px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;pointer-events:none;visibility:hidden}
.pro-scr.ready{visibility:visible}
.pro-scr.rs *{transition:none !important}
.pro-scr::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.12),rgba(255,255,255,0) 38%),linear-gradient(0deg,rgba(0,0,0,.06),transparent 30%)}   /* leichter Glanz wie auf dem echten Display */
/* vorher: überladenes Programm */
.pro-old{position:absolute;inset:0;display:flex;flex-direction:column;transition:opacity .5s ease}
.po-title{display:flex;align-items:center;gap:6px;height:17px;padding:0 6px;background:#2B5797;color:#fff;font-size:9.5px;white-space:nowrap}
.po-title i{margin-left:auto;display:flex;gap:4px}.po-title i u{width:11px;height:9px;background:rgba(255,255,255,.35);text-decoration:none}
.po-menu{display:flex;gap:9px;height:15px;align-items:center;padding:0 6px;background:#F4F5F7;border-bottom:1px solid #C9CDD3;font-size:9px;white-space:nowrap;overflow:hidden}
.po-tb{display:flex;gap:2px;height:16px;align-items:center;padding:0 4px;background:#EEF0F3;border-bottom:1px solid #D2D6DB;overflow:hidden}
.po-tb u{flex:none;width:11px;height:11px;border-radius:2px;text-decoration:none}
.po-tb s{flex:none;width:1px;height:12px;margin:0 3px;background:#B9BEC6}
.po-body{flex:1;display:flex;min-height:0}
.po-tree{width:104px;padding:4px 5px;background:#fff;border-right:1px solid #C9CDD3;font-size:8.5px;line-height:1.55;white-space:nowrap;overflow:hidden;color:#39424e}
.po-main{flex:1;display:flex;flex-direction:column;min-width:0}
.po-tabs{display:flex;gap:1px;height:15px;padding:2px 4px 0;background:#E1E4E8;overflow:hidden}
.po-tabs span{flex:none;padding:2px 5px;font-size:8px;background:#F4F5F7;border:1px solid #C9CDD3;border-bottom:0;white-space:nowrap}
.po-form{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:3px 8px;align-content:start;padding:6px 7px;background:#F7F8FA;overflow:hidden}
.po-form label{display:flex;align-items:center;gap:4px;font-size:8px;white-space:nowrap}
.po-form label em{flex:1;height:11px;background:#fff;border:1px solid #BFC4CB;font-style:normal}
.po-side{width:112px;padding:4px 5px;background:#fff;border-left:1px solid #C9CDD3;font-size:8px;line-height:1.6;white-space:nowrap;overflow:hidden;color:#39424e}
.po-status{display:flex;gap:1px;height:14px;background:#DDE1E6;border-top:1px solid #C1C6CD;font-size:8px}
.po-status span{padding:2px 6px;border-right:1px solid #C1C6CD;white-space:nowrap}
.po-pop{position:absolute;width:208px;background:#F4F5F7;border:1px solid #8A919B;box-shadow:0 6px 18px rgba(0,0,0,.28);font-size:9px;opacity:0;transform:scale(.85);transition:opacity .25s ease,transform .3s cubic-bezier(.3,1.5,.5,1)}
.po-pop b{display:block;padding:3px 6px;background:#2B5797;color:#fff;font-weight:600}
.po-pop p{margin:0;padding:9px 8px}
.po-pop i{display:flex;justify-content:flex-end;gap:5px;padding:0 8px 7px;font-style:normal}
.po-pop i span{padding:2px 10px;border:1px solid #9AA1AB;background:#fff}
.po-pop.p1{left:186px;top:118px}.po-pop.p2{left:262px;top:168px;transition-delay:.45s}
.pro-scr.s1 .po-pop{opacity:1;transform:none}
/* Wegräumen: jedes Teil mit eigener Verzögerung (--d, ms) */
.pro-old .x{transition:opacity .4s ease calc(var(--d) * 1ms),transform .45s cubic-bezier(.5,0,.75,0) calc(var(--d) * 1ms)}
.pro-scr.s2 .pro-old .x{opacity:0;transform:scale(.7)}
.pro-scr.s2 .po-pop{opacity:0;transform:scale(.6);transition-delay:0s}
/* Herausfiltern (Mark, 2026-10-20): drei Felder leuchten auf (mk), alles andere fällt weg (s2), das alte Fenster blendet aus;
   die drei Felder fliegen als eigene Ebene (.pro-gh) an den Platz der Kacheln und werden zu ihnen */
.pro-scr.pc .po-pop{opacity:0;transform:scale(.92);transition-delay:0s}
.po-form label.keep{position:relative;transition:color .3s ease}
.po-form label.keep::before{content:"";position:absolute;inset:-3px -4px;border-radius:4px;background:rgba(23,103,216,.12);box-shadow:0 0 0 1.5px #1767D8,0 0 16px rgba(23,103,216,.55);opacity:0;transition:opacity .35s ease}
.pro-scr.mk .po-form label.keep{color:#1767D8;font-weight:700}
.pro-scr.mk .po-form label.keep::before{opacity:1}
.pro-scr.mk:not(.s2) .pro-old .x{opacity:.3}
.pro-scr.s2 .pro-old{opacity:0;transition:opacity .5s ease 1s}
.pro-scr.s3 .pro-old{opacity:0}
.pro-gh{position:absolute;z-index:4;display:flex;align-items:center;gap:4px;padding:0 6px;box-sizing:border-box;overflow:hidden;white-space:nowrap;
  font:700 8px/1 var(--fd);color:#1767D8;background:#fff;border:1px solid #1767D8;border-radius:2px;box-shadow:0 0 0 2px rgba(23,103,216,.3),0 0 10px rgba(23,103,216,.45);
  transition:left .85s cubic-bezier(.65,0,.25,1),top .85s cubic-bezier(.65,0,.25,1),width .85s cubic-bezier(.65,0,.25,1),height .85s cubic-bezier(.65,0,.25,1),
    border-radius .85s ease,background-color .85s ease,color .85s ease,font-size .85s ease,box-shadow .85s ease,border-color .85s ease,opacity .35s ease}
.pro-gh.fly{font-size:13px;border-color:transparent;box-shadow:0 8px 20px -10px rgba(16,24,40,.25);align-items:flex-start;padding:12px 14px}
.pro-gh.fly.hero{background-color:#1767D8;color:#fff}
.pro-gh.out{opacity:0}
/* Dropdown-Menü und Mauszeiger (Variante mit Mauszeiger) */
.po-dd{position:absolute;z-index:3;min-width:118px;padding:3px 0;background:#fff;border:1px solid #8A919B;box-shadow:2px 4px 10px rgba(0,0,0,.25);font-size:8.5px;opacity:0;transition:opacity .12s ease}
.po-dd span{display:block;padding:2px 10px}.po-dd span:nth-child(3n){border-bottom:1px solid #E1E4E8}
.po-dd span.hl{background:#2B5797;color:#fff}
.po-dd.on{opacity:1}
.po-cur{position:absolute;z-index:6;left:0;top:0;width:14px;height:20px;opacity:0;transition:left .55s cubic-bezier(.45,0,.25,1),top .55s cubic-bezier(.45,0,.25,1),opacity .25s ease}
.po-cur svg{display:block;width:100%;height:100%;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35))}
.po-cur.on{opacity:1}
/* nachher: die Anwendung, die der Laden braucht – einfach, aber schön (Mark, 2026-10-20): Begrüßung, große Kachel im Verlauf mit Ring,
   zwei Kacheln (Bestellungen mit Wochenkurve, Termine), zum Schluss kommt eine Online-Buchung herein und landet bei den Terminen */
.pro-new{position:absolute;inset:0;padding:0 24px;display:grid;grid-template-columns:1.08fr 1fr;grid-template-rows:auto auto auto 1fr 1fr;gap:0 14px;opacity:0;transition:opacity .45s ease;
  font:400 12px/1.25 var(--fd);color:#18202B;
  background:radial-gradient(55% 75% at 100% 10%,rgba(47,123,234,.30),transparent 70%),radial-gradient(55% 70% at 0% 100%,rgba(11,143,131,.26),transparent 70%),radial-gradient(40% 50% at 55% 55%,rgba(140,107,194,.10),transparent 70%),linear-gradient(160deg,#E9F0FA,#E4ECF6 50%,#E2F0EE)}
.pro-new > *{opacity:0;transform:translateY(12px);transition:opacity .5s ease calc(var(--i, 0) * 110ms + 150ms),transform .6s cubic-bezier(.2,.75,.15,1) calc(var(--i, 0) * 110ms + 150ms)}
.pro-scr.sb .pro-new{opacity:1}
.pro-scr.s3 .pro-new > *{opacity:1;transform:none}
.pro-new > .pn-hero,.pro-new > .pn-card{transform:none;transition:opacity .35s ease}
.pn-safari{grid-column:1 / -1;display:flex;align-items:center;gap:9px;height:28px;margin:0 -24px;padding:0 10px;background:rgba(246,246,248,.92);border-bottom:1px solid rgba(0,0,0,.09);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pn-tl{display:flex;gap:5px;margin-right:6px}.pn-tl u{width:9px;height:9px;border-radius:50%;background:#FF5F57;text-decoration:none}.pn-tl u:nth-child(2){background:#FEBC2E}.pn-tl u:nth-child(3){background:#28C840}
.pn-ico{flex:none;width:13px;height:13px;fill:none;stroke:#6E6E73;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.pn-dim{stroke:#BDBDC2}
.pn-url{display:flex;align-items:center;justify-content:center;gap:4px;flex:1;max-width:250px;height:19px;margin:0 auto;border-radius:6px;background:rgba(0,0,0,.055);font-size:10.5px;color:#3A3A3C}
.pn-url svg{width:10px;height:10px;fill:none;stroke:#6E6E73;stroke-width:2.2}
.pn-bar{grid-column:1 / -1;display:flex;align-items:center;gap:8px;height:38px;font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.pn-logo{position:relative;flex:none;width:20px;height:20px;border-radius:6px;background:linear-gradient(135deg,#2F7BEA,#0B8F83);box-shadow:0 2px 6px rgba(23,103,216,.3)}
.pn-logo::after{content:"";position:absolute;inset:6px;border-radius:50%;border:2px solid #fff}
.pn-av{margin-left:auto;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#C9D6EA,#A9B9D3);box-shadow:0 0 0 2px #fff}
.pn-greet{grid-column:1 / -1;display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.pn-hi{font:650 27px/1 var(--fd);letter-spacing:-.03em}
.pn-date{color:#6B7684;font-size:12px}
.pn-hero{grid-row:4 / 6;position:relative;margin-bottom:18px;padding:16px 18px;border-radius:18px;color:#fff;overflow:hidden;
  background:radial-gradient(45% 55% at 95% 0%,rgba(255,255,255,.28),transparent 70%),linear-gradient(145deg,#2F7BEA 0%,#1767D8 45%,#0B8F83 100%);box-shadow:0 10px 24px -8px rgba(23,103,216,.5)}
.pn-hero span{display:block;font-size:13px;font-weight:600;opacity:.9}
.pn-hero b{display:block;margin-top:8px;font:650 56px/1 var(--fd);letter-spacing:-.04em}
.pn-hero small{display:block;margin-top:8px;font-size:12px;opacity:.85}
.pn-ring{position:absolute;right:16px;bottom:16px;width:74px;height:74px;transform:rotate(-90deg)}
.pn-hero em{position:absolute;right:16px;bottom:16px;width:74px;line-height:74px;text-align:center;font:650 17px/74px var(--fd);font-style:normal;letter-spacing:-.02em}
.pn-ring circle{fill:none;stroke:rgba(255,255,255,.25);stroke-width:11}
.pn-ring .pn-ring-v{stroke:#fff;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.2s cubic-bezier(.3,.7,.2,1) .7s}
.pro-scr.s3 .pn-ring-v{stroke-dashoffset:40}
.pn-card{position:relative;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.92);box-shadow:0 1px 2px rgba(16,24,40,.06),0 8px 20px -10px rgba(16,24,40,.18);overflow:hidden}
.pn-card > span{display:block;font-size:11.5px;font-weight:600;color:#4A5563}
.pn-orders{grid-column:2;grid-row:4;margin-bottom:10px}
.pn-orders b{display:block;margin-top:4px;font:650 28px/1 var(--fd);letter-spacing:-.03em;color:#18202B}
.pn-orders i{position:absolute;left:14px;bottom:11px;padding:2px 7px;border-radius:99px;background:#E3F5F2;color:#0B8F83;font:600 10px/1.3 var(--fd);font-style:normal}
.pn-spark{position:absolute;right:12px;bottom:12px;width:46%;height:44%}
.pn-spark-a{fill:rgba(23,103,216,.10)}
.pn-spark-l{fill:none;stroke:#1767D8;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s ease .9s}
.pro-scr.s3 .pn-spark-l{stroke-dashoffset:0}
.pn-appts{grid-column:2;grid-row:5;margin-bottom:18px}
.pn-appts ul{margin:6px 0 0;padding:0;list-style:none}
.pn-appts li{display:flex;align-items:center;gap:8px;height:19px;font-size:11.5px}
.pn-appts li b{width:36px;font-weight:650;color:#1767D8}
.pn-appts li.nw{height:0;opacity:0;transition:height .4s ease,opacity .4s ease .15s}
.pn-appts li em{margin-left:auto;padding:1px 7px;border-radius:99px;background:#1767D8;color:#fff;font:600 9.5px/1.4 var(--fd);font-style:normal}
.pro-scr.s5 .pn-appts li.nw{height:19px;opacity:1}
.pn-toast{position:absolute;right:10px;top:34px;display:flex;align-items:center;gap:9px;width:270px;padding:9px 11px;border-radius:14px;
  background:rgba(255,255,255,.94);box-shadow:0 12px 30px -8px rgba(16,24,40,.35),0 0 0 1px rgba(16,24,40,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0 !important;transform:translateX(calc(100% + 20px)) !important;transition:transform .6s cubic-bezier(.2,.9,.25,1.15),opacity .3s ease !important}
.pn-toast p{margin:0;display:flex;flex-direction:column;gap:1px;font-size:11px;color:#4A5563}
.pn-toast p b{font-size:11.5px;color:#18202B}
.pn-toast small{margin-left:auto;align-self:flex-start;font-size:9.5px;color:#8A94A3}
.pro-scr.s4 .pn-toast{opacity:1 !important;transform:none !important}
/* Ready-Foto (Mark, 2026-10-21): die Wolken ziehen ein wenig, danach zwei Blitze hintereinander – zuerst leuchtet der Blitz im Foto auf,
   dann schlägt rechts über der Skyline ein zweiter ein, immer wieder. Foto ohne Blitz (ready-bg, ready-blitz.swift), der Blitz im Foto als eigene Ebene
   (ready-blitz.png, nur beim Aufleuchten sichtbar); Himmel als eigene Ebene bis zur Skyline (--sk, umgerechnet in solutions.js) */
.rd-fx{position:absolute;inset:-6% 0;height:112%;pointer-events:none}
.lw-photo .rd-fx img{inset:0;height:100%}
.rd-sky{transform-origin:50% var(--sk,70%);transform:translateX(3.6%) scale(1.08);
  -webkit-mask-image:linear-gradient(#000 calc(var(--sk,70%) - 16%),transparent var(--sk,70%));mask-image:linear-gradient(#000 calc(var(--sk,70%) - 16%),transparent var(--sk,70%))}
.rd-fx.on .rd-sky{animation:rdDrift 18s ease-in-out infinite alternate}
@keyframes rdDrift{from{transform:translateX(3.6%) scale(1.08)}to{transform:translateX(-3.6%) scale(1.08)}}
.rd-flash{opacity:0;filter:brightness(1.85) saturate(.75);
  -webkit-mask-image:radial-gradient(ellipse 30% 36% at var(--fx,25%) var(--fy,60%),rgba(0,0,0,.85),transparent 80%);mask-image:radial-gradient(ellipse 30% 36% at var(--fx,25%) var(--fy,60%),rgba(0,0,0,.85),transparent 80%)}
.rd-bolt{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rd-bolt g{opacity:0}
.rd-halo{fill:#dfe8ff;filter:url(#rd-halo);opacity:.3}
.rd-glowp{fill:none;stroke:#c9d8ff;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;filter:url(#rd-glow);opacity:.9}
.rd-img{filter:brightness(1.25) drop-shadow(0 0 4px rgba(220,232,255,.8))}
.rd-core{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rd-fx.f1 .rd-flash,.rd-fx.f2 .rd-flash{animation:rdFlash .95s linear both}
.rd-fx.f1 .rd-b1,.rd-fx.f2 .rd-b2{animation:rdFlash .95s linear both}
@keyframes rdFlash{0%{opacity:0}5%{opacity:1}11%{opacity:.2}17%{opacity:.9}26%{opacity:.35}40%{opacity:.6}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.rd-fx.on .rd-sky{animation:none}.rd-fx .rd-flash,.rd-fx .rd-bolt g{animation:none !important}}
/* Flow-Foto (Mark, 2026-10-21): Büro über der Stadt (entrauscht, Wulst retuschiert, leicht aufgehellt; flow-schatten.swift).
   Ablauf A + C: der iMac wacht flackernd auf und darauf arbeitet eine Anwendung von selbst (Zeilen werden grün, Balken läuft, Kurve zeichnet sich),
   dann das Notebook; der Raum wird Nacht (die Lichter der Stadt leuchten weiter, flow-lichter.png), gegen Morgen wird es hell und die
   Schreibtischlampe geht von selbst an. Bildschirme als Ebenen per Perspektivmatrix auf die vermessenen Flächen (solutions.js); alles gleitet mit dem Foto. */
.fl-fx{position:absolute;inset:-6% 0;height:112%;pointer-events:none}
.lw-photo .fl-fx img{inset:0;height:100%}
.fl-night{position:absolute;inset:0;background:linear-gradient(rgba(3,7,22,.68),rgba(3,7,22,.66) 32%,rgba(3,7,22,.8) 41%,rgba(3,7,22,.52) 52%,rgba(3,7,22,.38));opacity:0;transition:opacity 9s cubic-bezier(.4,0,.3,1)}   /* Horizont (rund 37–43 %) stärker */
.fl-fx.night .fl-night{opacity:1}
.fl-lights{opacity:0;transition:opacity 3s ease}
.fl-fx.night .fl-lights{opacity:1;transition:opacity 6s ease 3s}
.fl-dawn{position:absolute;inset:0;background:radial-gradient(70% 45% at 22% 38%,rgba(255,170,120,.34),transparent 70%),linear-gradient(rgba(255,190,150,.16),transparent 62%);mix-blend-mode:screen;opacity:0;transition:opacity 4s ease}
.fl-fx.dawn .fl-dawn{opacity:1}
/* Schreibtischlampe: Kopf leuchtet, warmer Lichtkegel auf dem Tisch */
.fl-lamp{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;mix-blend-mode:screen;
  background:radial-gradient(1.6% 2.4% at var(--lx,25%) var(--ly,53%),rgba(255,236,200,.95),transparent),radial-gradient(10% 6.5% at var(--lx,25%) calc(var(--ly,53%) + 8%),rgba(255,190,120,.55),transparent),
    radial-gradient(5% 5% at var(--lx,25%) var(--ly,53%),rgba(255,210,150,.35),transparent)}
.fl-fx.lamp .fl-lamp{opacity:1}
/* Licht vom iMac auf dem Tisch: flach, neutral, zurückhaltend (Mark: blauer Schein unnatürlich) */
.fl-glow{position:absolute;left:var(--gx,48%);top:var(--gy,84%);width:22%;height:9%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(205,218,240,.24),transparent);mix-blend-mode:screen;opacity:0;transition:opacity 1.2s ease}
.fl-fx.on .fl-glow{opacity:1}
.fl-scr,.fl-lap{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;opacity:0;visibility:hidden}
.fl-scr{width:640px;height:360px;background:#050608}
.fl-lap{width:400px;height:250px;border-radius:2px;background:#0d1117}
.fl-scr.ready,.fl-lap.ready{visibility:visible}
.fl-scr.go,.fl-lap.go{transition:opacity .7s ease}
.fl-in{position:absolute;inset:14px 16px 12px;overflow:hidden;border-radius:2px;background:#0d1117}
.fl-in::after,.fl-lap::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.08),rgba(255,255,255,0) 40%)}
/* Code-Editor auf dem iMac: Zeile um Zeile wird Code geschrieben (farbige Wortbalken, nicht zum Lesen) */
.fc{position:absolute;inset:0;display:flex;flex-direction:column;background:#0d1117}
.fc-tabs{flex:none;display:flex;gap:2px;height:28px;padding:0 0 0 46px;background:#010409}
.fc-tabs i{width:110px;background:#161b22;border-top:2px solid transparent}.fc-tabs i:first-child{background:#0d1117;border-top-color:#2F7BEA}
.fc-body{flex:1;display:flex;min-height:0}
.fc-gut{flex:none;width:46px;padding-top:12px;background:#0d1117;display:flex;flex-direction:column;align-items:flex-end;gap:0;padding-right:10px;overflow:hidden}
.fc-gut i{flex:none;display:block;height:22px;width:14px;background:linear-gradient(#3d444d,#3d444d) right center / 100% 6px no-repeat;opacity:.7}
.fc-code{flex:1;position:relative;overflow:hidden}
.fc-lines{position:absolute;left:10px;right:16px;top:12px;transition:transform .35s ease}
.fc-l{display:flex;align-items:center;gap:7px;height:22px}
.fc-l u{flex:none;height:9px;border-radius:3px;text-decoration:none;width:0;transition:width .22s linear}
.fc-l u.on{width:var(--w)}
.fc-cur{flex:none;width:8px;height:15px;background:#c9d1d9;animation:fcBlink 1s steps(1) infinite}
@keyframes fcBlink{50%{opacity:0}}
.fc-status{flex:none;height:22px;background:#1767D8}
/* Terminal auf dem Notebook: Zeilen laufen durch */
.ft{position:absolute;inset:0;padding:16px 20px;background:#05070a;overflow:hidden}
.ft-lines{transition:transform .25s ease}
.ft-l{display:flex;gap:8px;align-items:center;height:21px}
.ft-l u{height:9px;border-radius:2px;text-decoration:none}
@media (prefers-reduced-motion:reduce){.fl-night,.fl-lights,.fl-dawn,.fl-lamp,.fl-glow,.fl-scr.go,.fl-lap.go,.fc-l u,.fc-lines,.ft-lines{transition:none}.fc-cur{animation:none}}
/* Amps (Mark, 2026-10-21): Einstieg in Schritten – „Energie gibt es genug.“ steht, dann „Aber“, Pause, dann der Rest.
   Jeder Teil hat seinen eigenen Verlauf, per JS so ausgerichtet, dass er über alle Teile durchläuft (ein gemeinsamer Verlauf ließe sich nicht einblenden) */
.lw-kz.lw-steps{display:block;background:none;color:inherit}
.lw-steps .hs-a,.lw-steps .hs-l,.lw-steps .hs-d{display:block}
.lw-steps .hs-b,.lw-steps .hs-c{display:inline-block}
.lw-steps .hs{background-image:linear-gradient(100deg,var(--accent),var(--accent-2));background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent}
.lw-steps.go .hs-b,.lw-steps.go .hs-c,.lw-steps.go .hs-d{opacity:0;filter:blur(5px);transition:opacity .9s ease,filter .9s ease}
.lw-steps.go .hs.on{opacity:1;filter:none}
/* Beim „Aber“ flackert der erste Satz und bleibt gedimmt, der Rest glüht in den TENTEN-Farben auf (Mark, 2026-10-21).
   Glühfarbe je Bild stufenlos berechnet (solutions.js), danach Übergang in den Verlauf */
/* beim „Aber“: erst ein kurzes Zucken, wenn es einblendet; ist es ganz da, flackert der erste Satz und bleibt schwach (Spannung schwankt, Mark 2026-10-21) */
.lw-steps .hs-a{transition:none}
.lw-steps.weak .hs-a{opacity:.48}
.lw-steps.twitch .hs-a{animation:hsTwitch .32s ease-out}
@keyframes hsTwitch{0%{opacity:1}30%{opacity:.5}100%{opacity:1}}
.lw-steps .hs-c,.lw-steps .hs-d{position:relative}
.hs-heat{position:absolute;left:0;top:0;width:100%;height:100%;color:transparent;-webkit-text-fill-color:currentColor;opacity:0;pointer-events:none;transition:opacity 1s ease}
.lw-steps .hs.hot{background-image:none;opacity:1;filter:none;transition:none}
.lw-steps .hs.hot .hs-heat{opacity:1;transition:none}
@media (prefers-reduced-motion:reduce){.lw-steps .hs-heat{display:none}.lw-steps.twitch .hs-a{animation:none}.lw-steps.weak .hs-a{opacity:1}}
/* Abstand Amps → Cloud wie Ready → Amps (Mark, 2026-10-21); Außenabstand, damit der Andockpunkt von Cloud bleibt */
#cloud{margin-top:var(--land)}

/* ===== footer/footer.css ===== */
/* ---------- Footer (Abschnitt 9, Neuaufbau 2026-10-02) · nur über .site-foot, nie das Element footer allgemein ---------- */
.site-foot{position:relative;background:var(--foot);border-top:1px solid var(--line)}
.site-foot::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--glow),.55) 30%,rgba(var(--glow-2),.55) 70%,transparent);opacity:.8}
:root[data-theme="light"] .site-foot{border-top-color:rgba(10,18,30,.06)}
:root[data-theme="light"] .site-foot::before{background:linear-gradient(90deg,transparent,#fff 20%,#fff 80%,transparent);opacity:1}
.site-foot p{margin:0}
.site-foot ul{list-style:none;margin:0;padding:0}

/* Hauptteil: Logo + fünf Spalten */
.f-grid{display:grid;grid-template-columns:minmax(0,.8fr) repeat(5,minmax(0,1fr));gap:32px;padding-block:64px 28px}
.f-brand .logo{height:28px}
.f-col summary{list-style:none;font:600 .9375rem/1.2 var(--f);color:var(--ink);margin-bottom:16px;cursor:default}
.f-col summary::-webkit-details-marker{display:none}
.f-col summary .icon{display:none}
.f-col ul{display:flex;flex-direction:column;gap:2px}
.f-col a{color:var(--ink-2);text-decoration:none;font-size:.875rem}
.f-col a:hover{color:var(--ink)}

/* Markensatz + Systemstatus */
.f-claim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;padding-block:0 16px;color:var(--ink-2);font-size:1rem;line-height:1.5}
.f-stat{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--glass);font:500 .875rem/1 var(--f);color:var(--ink-2);text-decoration:none}
.f-stat:hover{color:var(--ink)}
/* Punkt nach Zustand aus /status.json, Farben wie /status; ohne Daten neutral */
.f-stat{--c:var(--muted)}
.f-stat[data-st="ok"]{--c:var(--ok)}
.f-stat[data-st="degraded"]{--c:#FACC15}
:root[data-theme="light"] .f-stat[data-st="degraded"]{--c:#EAB308}
.f-stat[data-st="outage"]{--c:var(--danger)}
.f-stat[data-st="maintenance"]{--c:var(--accent)}
.f-stat i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px color-mix(in srgb,var(--c) 80%,transparent)}
.f-stat[data-st="none"] i{box-shadow:none}
:root[data-theme="light"] .f-stat{background:rgba(255,255,255,.6)}

/* Unterteil: Copyright, Rechtliches mit Trennstrichen */
.f-bot{padding-block:22px 30px;border-top:1px solid var(--line);font-size:.875rem;line-height:1.5}
.f-bot p{color:var(--muted)}
.f-bot ul{display:flex;flex-wrap:wrap;row-gap:4px;margin-top:6px}
.f-bot li:not(:last-child)::after{content:"|";margin-inline:12px;color:var(--muted)}
.f-bot a{color:var(--ink-2);text-decoration:none}
.f-bot a:hover{color:var(--ink)}

@media (max-width:1023px){
  .f-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 32px}
  .f-brand{grid-column:1/-1}
  /* Platz für den Lichtpunkt-Knopf */
  .site-foot{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:640px){
  .f-grid{grid-template-columns:minmax(0,1fr);gap:0;padding-block:48px 28px}
  .f-brand{margin-bottom:28px}
  .f-col{border-top:1px solid var(--line)}
  .f-col:last-child{border-bottom:1px solid var(--line)}
  .f-col summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;margin:0;cursor:pointer}
  .f-col summary .icon{display:block;width:18px;height:18px;color:var(--muted);transition:transform .25s}
  .f-col[open] summary .icon{transform:rotate(90deg)}
  .f-col ul{padding:0 0 20px;gap:4px}
  .f-col a{display:flex;align-items:center;min-height:40px}
  .f-claim{flex-direction:column;align-items:flex-start}
  /* mobil ohne Trennstriche (sonst hängen sie am Zeilenende) */
  .f-bot ul{column-gap:20px;row-gap:6px;margin-top:10px}
  .f-bot li:not(:last-child)::after{content:none}
}

/* Easter Egg: Einwahl wie ein altes Modem (DECISIONS 2026-10-09) – länger über das Logo fahren oder es fokussieren; nur Bild, kein Ton */
.f-brand{position:relative;align-self:start}
.f-logo{display:inline-block;border-radius:8px}
.f-logo:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.f-modem{position:absolute;left:0;top:calc(100% + 14px);z-index:5;min-width:250px;max-width:min(320px,calc(100vw - 2 * var(--gut)));padding:14px 16px;border-radius:14px;border:1px solid var(--line-2);background:var(--solid);box-shadow:var(--shadow);font:500 .875rem/1.6 var(--fm);color:var(--ink-2);opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.f-modem.on{opacity:1;transform:none}
.f-modem p{min-height:1.6em;white-space:pre-wrap}
.f-modem p:last-child{color:var(--ink);font-family:var(--f)}
.f-modem .f-led{display:flex;gap:8px;margin:2px 0 8px}
.f-modem .f-led i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.f-modem.dial .f-led i{animation:f-blink .32s steps(2) infinite}
.f-modem.dial .f-led i:nth-child(2){animation-delay:.08s}.f-modem.dial .f-led i:nth-child(3){animation-delay:.2s}.f-modem.dial .f-led i:nth-child(4){animation-delay:.12s}
.f-modem.link .f-led i{background:var(--ok);box-shadow:0 0 8px color-mix(in srgb,var(--ok) 70%,transparent)}
@keyframes f-blink{50%{background:var(--ok)}}

/* ===== wish/wish.css ===== */
/* Make a Wish und Rückfrage-Dialog (CONCEPT §7) */
.wprog{margin-top:20px;height:3px;border-radius:2px;background:var(--line-2);overflow:hidden}
.compact .wprog{margin-top:12px}
.wprog span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 12px rgba(var(--glow),.8);transition:width .45s var(--ease)}
.wprog-l{display:flex;justify-content:space-between;margin-top:8px;font-size:.875rem;color:var(--muted)}
/* Make a Wish */
#dlg-wish{width:min(680px,calc(100% - 32px))}
#dlg-wish > form{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.wstep{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:12px}
.wstep legend{padding:0;margin-bottom:12px;display:flex;align-items:center;gap:10px;font:600 1rem/1.2 var(--fd);letter-spacing:-.01em}
.wstep legend .no{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 .875rem/1 var(--f);color:var(--accent);background:rgba(var(--glow),.12);box-shadow:0 0 0 1px rgba(var(--glow),.3) inset;transition:background .25s,color .25s}
.wstep legend small{font:500 .875rem/1 var(--f);color:var(--muted);margin-left:2px}
.wstep.ok legend .no{background:var(--accent);color:var(--accent-ink)}
.req{color:var(--danger)}
.err{display:none;font-size:.875rem;color:var(--danger)}
.wstep[data-invalid] .err{display:block}
.wstep[data-invalid] .topics,.wstep[data-invalid] .subs,.wstep[data-invalid] .msgbox{box-shadow:0 0 0 1px var(--danger);border-radius:18px}
.topics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.topic{grid-column:span 2;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--glass);text-align:left;color:var(--ink);transition:border-color .2s,background .2s,transform .2s}
.topic:nth-child(n+4){grid-column:span 3}
.topic:hover{border-color:var(--line-2);transform:translateY(-1px)}
.topic .icon{width:20px;height:20px;color:var(--accent)}
.topic strong{font-size:.9375rem;font-weight:600;line-height:1.2}
.topic span{font-size:.875rem;color:var(--muted);line-height:1.35}
.topic[aria-checked="true"]{border-color:rgba(var(--glow),.8);background:linear-gradient(180deg,rgba(var(--glow),.14),rgba(var(--glow),.04));box-shadow:0 0 0 1px rgba(var(--glow),.5) inset,0 12px 30px -16px rgba(var(--glow),.8)}
.topic[aria-checked="true"]::after{content:"";position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.subs{display:flex;flex-wrap:wrap;gap:8px;min-height:40px;align-items:center}
.subs .muted{font-size:.875rem;color:var(--muted)}
.subchip{min-height:40px;padding:6px 15px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);font-size:.875rem;font-weight:500;color:var(--ink-2);transition:all .2s;animation:chip-in .35s var(--ease) both}
.subchip:hover{color:var(--ink);border-color:var(--ink-2)}
.subchip[aria-checked="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@keyframes chip-in{from{opacity:0;transform:translateY(6px)}}
.msgbox{position:relative;border-radius:18px;border:1px solid var(--line-2);background:var(--glass);transition:border-color .2s,box-shadow .2s}
.msgbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--glow),.15)}
.msgbox textarea{display:block;width:100%;min-height:140px;padding:16px 16px 44px;border:0;outline:none;background:transparent;resize:vertical;font:400 1rem/1.6 var(--f);color:var(--ink)}
.msgbox textarea::placeholder{color:var(--muted)}
.msgfoot{position:absolute;right:12px;bottom:10px;display:flex;align-items:center;gap:8px;font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums;pointer-events:none}
.msgfoot svg{width:20px;height:20px;transform:rotate(-90deg)}
.msgfoot circle{fill:none;stroke-width:3}
.msgfoot .bg{stroke:var(--line-2)}
.msgfoot .fg{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .2s}
.msg-hint{font-size:.875rem;color:var(--muted)}
.msg-hint.ok{color:var(--ok)}
.wstep[data-invalid] .msg-hint{display:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fl{position:relative}
.fl input{width:100%;height:60px;padding:26px 14px 8px;border-radius:14px;border:1px solid var(--line-2);background:var(--glass);outline:none;transition:border-color .2s,box-shadow .2s}
.fl label{position:absolute;left:15px;top:19px;font-size:.9375rem;color:var(--muted);pointer-events:none;transition:all .18s}
.fl input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--glow),.15)}
.fl input:focus + label,.fl input:not(:placeholder-shown) + label{top:8px;font-size:.875rem;color:var(--accent)}
.fl[data-invalid] input{border-color:var(--danger)}
.switch{position:relative;display:inline-flex;align-items:center;gap:12px;font-size:.9375rem;cursor:pointer;min-height:40px}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch.locked{cursor:default}
.switch.locked .track{opacity:.55}
.switch.locked .thumb::after{content:"";position:absolute;inset:5px;border-radius:2px;background:var(--muted);mask:none}
.lock-note{display:flex;gap:10px;align-items:flex-start;margin:0;padding:12px 14px;border-radius:14px;background:rgba(var(--glow),.07);box-shadow:0 0 0 1px rgba(var(--glow),.22) inset;font-size:.875rem;line-height:1.45;color:var(--ink-2)}
.lock-note .icon{width:17px;height:17px;color:var(--accent);margin-top:1px}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.success{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:8px 0 4px}
.success svg.big{width:64px;height:64px}
.success .c{fill:none;stroke:var(--ok);stroke-width:2;stroke-dasharray:190;stroke-dashoffset:190;animation:draw .7s ease-out forwards}
.success .k{fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:draw .4s .55s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.success h3{margin:4px 0 0;font:650 1.375rem/1.2 var(--fd);letter-spacing:-.02em}
.success p{margin:0;color:var(--ink-2);font-size:.9375rem}
.preview{margin:0;white-space:pre-wrap;font:400 .875rem/1.6 var(--f);padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--glass);max-height:300px;overflow:auto}
#dlg-wish .wf-done{display:none}
#dlg-wish.is-done .wf-form{display:none}
#dlg-wish.is-done .wf-done{display:inline-flex}
#dlg-confirm{width:min(480px,calc(100% - 32px))}
#dlg-confirm .d-foot{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
@media (max-width:640px){
  .row2{grid-template-columns:1fr}
  .topics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topic,.topic:nth-child(n+4){grid-column:auto}
  .topic:first-child{grid-column:1/-1}
  #dlg-wish,#dlg-confirm{width:100%}
}

/* ===== base/eggs.css ===== */
/* TENTEN-WEB · Basis: Easter Eggs (eggs.js, DECISIONS 2026-10-09). Taschenlampe wie auf /me: dunkle Fläche mit Lichtkreis, unter dem Header */
.tt-torch{position:fixed;inset:0;z-index:55;pointer-events:none;opacity:0;transition:opacity .45s ease;background:rgba(2,3,7,.92);
  -webkit-mask-image:radial-gradient(circle at var(--tx,50%) var(--ty,50%),transparent 0,transparent 95px,#000 180px);
  mask-image:radial-gradient(circle at var(--tx,50%) var(--ty,50%),transparent 0,transparent 95px,#000 180px)}
.tt-torch.on{opacity:1}
.tt-torch span{position:fixed;left:var(--tx,50%);top:var(--ty,50%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 22%,#EAF6FF 45%,rgba(200,232,255,0) 72%);box-shadow:0 0 16px 5px rgba(200,232,255,.5),0 0 50px 16px rgba(92,184,255,.25)}
html.rm .tt-torch{transition:none}
@media (prefers-reduced-motion:reduce){.tt-torch{transition:none}}

/* ===== base/end.css ===== */
/* Basis · am Ende jeder Seite: Reveal und reduzierte Bewegung */
/* ---------- Reveal für Mobil / statisch (nur mit Bewegung) ---------- */
.rv{transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
html.reveal .rv:not(.in){opacity:.001;transform:translateY(22px);filter:blur(8px)}

/* Bewegung reduziert: System oder Schalter */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}
html.rm *,html.rm *::before,html.rm *::after{animation:none!important;transition:none!important}