/* ===========================================================================
   ELMETIC · app_v1 — Liquid Glass Mirror
   Gespiegelte Homepage als macOS-/Icon-Composer-artige Einstellungs-App.
   Geteiltes Design-System für alle app_v1-Seiten.
   =========================================================================== */

:root{
  --red:#E73D25; --red-deep:#c42a14;
  --accent:#E73D25; --accent-2:#ff7a5f;
  --accent-ink:#b3270f;   /* Text/Icon-Akzent — WCAG-tauglich auf Hell */
  --accent-strong:#c42a14; /* Flächen, die weißen Text tragen */
  --font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI','SF Pro Text',sans-serif;
  --font-display:'Bricolage Grotesque',var(--font-ui);
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  /* live vom Inspector */
  --glass-blur:24px;
  --glass-alpha:.55;
  --radius:20px;
  --ease:cubic-bezier(.22,.9,.26,1);

  /* Light */
  --ink:#0c1320; --ink-soft:#363d4a; --muted:#565d6b;
  --panel:rgba(255,255,255,var(--glass-alpha));
  --panel-strong:rgba(255,255,255,.74);
  --panel-line:rgba(255,255,255,.6);
  --hair:rgba(12,22,42,.10);
  --chip:rgba(255,255,255,.55);
  --field:rgba(255,255,255,.42);
  --spec:rgba(255,255,255,.85);
  --shadow:0 1px 0 var(--spec) inset, 0 24px 64px rgba(20,30,60,.22), 0 4px 16px rgba(20,30,60,.10);
}
html[data-theme="dark"]{
  --ink:#eef2f8; --ink-soft:#c8d0de; --muted:#a3aebd;
  --accent-ink:#ff8164;   /* heller Akzent für Text auf Dunkel */
  --accent-strong:#E73D25;
  --panel:rgba(26,32,46,calc(var(--glass-alpha) + .16));
  --panel-strong:rgba(28,34,50,.78);
  --panel-line:rgba(255,255,255,.12);
  --hair:rgba(255,255,255,.10);
  --chip:rgba(255,255,255,.08);
  --field:rgba(255,255,255,.055);
  --spec:rgba(255,255,255,.16);
  --shadow:0 1px 0 var(--spec) inset, 0 28px 80px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.45);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ margin:0; font-family:var(--font-ui); color:var(--ink); min-height:100vh; overflow:hidden; font-size:14px; line-height:1.45; }
a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; }
button{ font:inherit; cursor:pointer; color:inherit; }
::selection{ background:color-mix(in srgb,var(--accent) 35%,transparent); }

/* ---------- Wallpaper: warmes Liquid-Glass-Mesh ------------------------ */
.wallpaper{ position:fixed; inset:0; z-index:0; overflow:hidden; transition:background .6s var(--ease); }
.wallpaper{
  background:
    radial-gradient(58% 50% at 82% 4%, rgba(231,61,37,.22) 0%, transparent 60%),
    radial-gradient(50% 55% at 6% 14%, rgba(255,238,230,.95) 0%, transparent 55%),
    radial-gradient(70% 60% at 50% 112%, rgba(231,61,37,.10) 0%, transparent 60%),
    linear-gradient(165deg,#fafaf7 0%,#f4ede9 38%,#efe3dd 70%,#e8dad2 100%);
}
html[data-theme="dark"] .wallpaper{
  background:
    radial-gradient(58% 50% at 82% 4%, rgba(231,61,37,.32) 0%, transparent 60%),
    radial-gradient(50% 55% at 6% 16%, rgba(52,34,30,.7) 0%, transparent 55%),
    radial-gradient(70% 60% at 50% 114%, rgba(196,42,20,.20) 0%, transparent 60%),
    linear-gradient(165deg,#17110f 0%,#1d1512 45%,#130d0b 75%,#0a0706 100%);
}
.blob{ position:absolute; border-radius:50%; filter:blur(72px); opacity:.6; mix-blend-mode:screen; will-change:transform; animation:drift 28s var(--ease) infinite alternate; }
.blob.b1{ width:50vw;height:50vw; top:-16vw; right:-10vw; background:radial-gradient(circle,#ffb09c,transparent 70%); }
.blob.b2{ width:44vw;height:44vw; bottom:-18vw; left:-12vw; background:radial-gradient(circle,#ffe7db,transparent 70%); animation-delay:-9s; }
.blob.b3{ width:34vw;height:34vw; top:28%; left:44%; background:radial-gradient(circle,#ff7a5f,transparent 70%); animation-delay:-15s; opacity:.4; }
html[data-theme="dark"] .blob{ opacity:.5; }
@keyframes drift{ to{ transform:translate3d(var(--px,0),-5vw,0) scale(1.16); } }

/* feines Korn — frostige Realismus-Schicht */
.grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Menüleiste -------------------------------------------------- */
.menubar{ position:fixed; top:0; left:0; right:0; height:30px; z-index:40;
  display:flex; align-items:center; gap:18px; padding:0 14px; font-size:12.5px; font-weight:500; color:var(--ink);
  background:var(--panel-strong); -webkit-backdrop-filter:saturate(1.8) blur(var(--glass-blur)); backdrop-filter:saturate(1.8) blur(var(--glass-blur));
  border-bottom:1px solid var(--hair); }
.menubar .apple{ font-size:14px; opacity:.85; }
.menubar .mb-app{ font-weight:700; }
.menubar .mb-item{ opacity:.78; } .menubar .mb-item:hover{ opacity:1; }
.menubar .mb-right{ margin-left:auto; display:flex; align-items:center; gap:15px; font-family:var(--font-mono); font-size:11.5px; opacity:.85; }
.menubar .mb-right i{ font-size:13px; }
@media (max-width:860px){ .menubar .mb-hide{ display:none; } }

/* ---------- App-Fenster ------------------------------------------------- */
.window{ position:fixed; z-index:10; top:42px; left:14px; right:14px; bottom:14px;
  display:grid; grid-template-rows:auto 1fr; grid-template-columns:minmax(0,1fr);
  background:var(--panel); -webkit-backdrop-filter:saturate(1.6) blur(var(--glass-blur)); backdrop-filter:saturate(1.6) blur(var(--glass-blur));
  border:1px solid var(--panel-line); border-radius:16px; box-shadow:var(--shadow); overflow:hidden;
  transform-origin:center 30%; }
/* Boot-Animation */
.window.boot{ animation:bootWin .9s var(--ease) both; }
@keyframes bootWin{ 0%{ opacity:0; transform:scale(.965) translateY(10px); filter:blur(6px); } 100%{ opacity:1; transform:none; filter:none; } }

.titlebar{ display:flex; align-items:center; gap:13px; height:54px; padding:0 14px; border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 70%,transparent),transparent); }
.traffic{ display:flex; gap:8px; }
.traffic span{ width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 .5px rgba(0,0,0,.12) inset; }
.traffic .r{ background:#ff5f57; } .traffic .y{ background:#febc2e; } .traffic .g{ background:#28c840; }
.title-logo{ height:22px; width:auto; }
html[data-theme="dark"] .title-logo{ filter:brightness(0) invert(1); }
.title-doc{ display:flex; flex-direction:column; line-height:1.2; }
.title-doc b{ font-size:13px; font-weight:600; }
.title-doc small{ font-size:11px; color:var(--muted); font-family:var(--font-mono); }
.toolbar-spacer{ flex:1; }
.tool-pill{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px; background:var(--chip); border:1px solid var(--hair); border-radius:9px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); }
.tool-pill i{ color:var(--accent-ink); }
.tool-seg{ display:flex; background:var(--chip); border:1px solid var(--hair); border-radius:9px; padding:3px; gap:2px; }
.tool-seg button{ width:34px; height:26px; border:none; background:transparent; border-radius:6px; color:var(--ink-soft); font-size:14px; display:grid; place-items:center; transition:.2s; }
.tool-seg button.on{ background:var(--accent-strong); color:#fff; box-shadow:0 2px 6px color-mix(in srgb,var(--accent) 45%,transparent); }
@media (max-width:1180px){ .tool-hide{ display:none; } }

.appbody{ display:grid; grid-template-columns:236px minmax(0,1fr) 290px; min-height:0; }

/* ---------- Sidebar ----------------------------------------------------- */
.sidebar{ border-right:1px solid var(--hair); padding:12px 0; overflow-y:auto;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 40%,transparent),transparent); }
.side-search{ margin:0 12px 12px; height:30px; display:flex; align-items:center; gap:7px; padding:0 10px; background:var(--field); border:1px solid var(--hair); border-radius:8px; color:var(--muted); font-size:12.5px; }
.side-h{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:9px 16px 4px; }
.layer{ display:flex; align-items:center; gap:9px; padding:7px 14px; margin:1px 8px; border-radius:9px; font-size:13px; color:var(--ink-soft); cursor:pointer; transition:background .15s var(--ease); }
.layer:hover{ background:var(--chip); }
.layer.active{ background:var(--accent-strong); color:#fff; box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 40%,transparent); }
.layer.active .l-ico,.layer.active small{ color:#fff; opacity:.92; }
.layer .l-ico{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center; font-size:12px; background:var(--chip); color:var(--accent-ink); flex-shrink:0; }
.layer .l-main{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.layer .l-main b{ font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.layer .l-main small{ font-size:10.5px; color:var(--muted); font-family:var(--font-mono); }
.side-foot{ margin-top:8px; padding:10px 16px; display:flex; gap:6px; color:var(--muted); }
.side-foot button{ width:24px;height:24px;border-radius:6px;border:1px solid var(--hair); background:var(--field); display:grid;place-items:center; }

/* ---------- Canvas ------------------------------------------------------ */
.canvas{ overflow-y:auto; overflow-x:hidden; position:relative; }
.canvas-inner{ padding:clamp(18px,3.5vw,46px); max-width:840px; width:100%; margin:0 auto; }

/* Glas-Grundpanel mit Specular-Kante (Liquid Glass) */
.glass{ position:relative; background:var(--panel-strong); border:1px solid var(--panel-line); border-radius:var(--radius);
  -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px);
  box-shadow:0 1px 0 var(--spec) inset, 0 14px 38px rgba(20,30,60,.12); overflow:hidden; }
.glass::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 38%); opacity:.7; mix-blend-mode:screen; }
/* Maus-Glanz (JS setzt --gx/--gy) */
.glare::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(180px circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.35), transparent 60%); mix-blend-mode:screen; }
.glare:hover::after{ opacity:1; }
html[data-theme="dark"] .glass::before{ opacity:.4; }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* Kicker / Headlines */
.kicker{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-soft); background:var(--chip); border:1px solid var(--hair); padding:6px 11px; border-radius:999px; margin-bottom:18px; }
.kicker .dot{ width:7px;height:7px;border-radius:50%; background:var(--accent-strong); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent); } 70%{ box-shadow:0 0 0 7px transparent; } }

.display{ font-family:var(--font-display); font-weight:600; letter-spacing:-.035em; line-height:.98; font-size:clamp(2.4rem,6.4vw,5rem); margin:0 0 16px; overflow-wrap:break-word; }
.display .accent{ color:var(--accent-ink); }
@media (max-width:420px){ .display{ font-size:2.15rem; } }
.lede{ font-size:1.08rem; line-height:1.6; color:var(--ink-soft); max-width:56ch; margin:0 0 24px; }

/* Section head */
.sec{ scroll-margin-top:14px; padding-top:34px; margin-top:34px; border-top:1px solid var(--hair); }
.sec:first-child{ border-top:none; margin-top:0; padding-top:0; }
.sec-num{ font-family:var(--font-mono); font-size:11px; color:var(--accent-ink); letter-spacing:.04em; }
.sec-title{ font-family:var(--font-display); font-weight:600; letter-spacing:-.025em; font-size:clamp(1.7rem,3.4vw,2.4rem); margin:7px 0 12px; line-height:1.02; }
.sec-title .accent{ color:var(--accent-ink); }
.sec-lede{ color:var(--ink-soft); font-size:14.5px; line-height:1.6; max-width:62ch; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px; border-radius:12px; font-weight:600; font-size:14px; border:1px solid transparent; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; }
.btn-primary{ background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 92%,#fff), var(--accent)); color:#fff; box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 42%,transparent); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 50%,transparent); }
.btn-glass{ background:var(--panel-strong); border-color:var(--panel-line); color:var(--ink); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.btn-glass:hover{ transform:translateY(-2px); }
.btn-ghost{ background:transparent; border-color:var(--hair); color:var(--ink); }
.btn-ghost:hover{ background:var(--chip); }
.cta-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.tel{ display:inline-flex; align-items:center; gap:8px; height:44px; font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); }
.tel i{ color:var(--accent-ink); }
.inline-link{ display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:13px; font-weight:600; color:var(--accent-ink); }
.inline-link:hover{ text-decoration:underline; }

/* Hero-Visual */
.hero-visual{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; margin-top:26px; box-shadow:0 18px 50px rgba(20,30,60,.2); }
.hero-visual img{ width:100%; height:100%; object-fit:cover; }
.hero-visual::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.5)); }
.hero-badge{ position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:999px; font-family:var(--font-mono); font-size:11px; color:#fff; background:rgba(0,0,0,.4); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.25); }
.hero-badge::before{ content:''; width:6px;height:6px;border-radius:50%; background:var(--accent-strong); animation:pulse 2s infinite; }
.hero-float{ position:absolute; left:14px; right:14px; bottom:14px; z-index:2; padding:14px 16px; border-radius:14px; color:#fff; background:rgba(10,10,12,.55); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.14); }
.hero-float .hf-l{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.hero-float .hf-t{ font-size:14px; font-weight:500; margin-top:4px; }

/* Stats */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:26px 0 4px; }
@media (max-width:560px){ .stats{ grid-template-columns:1fr; } }
.stat{ background:var(--field); border:1px solid var(--hair); border-radius:14px; padding:15px; }
.stat .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.stat .v{ font-family:var(--font-display); font-weight:700; font-size:1.7rem; letter-spacing:-.02em; margin-top:4px; line-height:1; }
.stat .v .u{ color:var(--accent-ink); font-size:.8rem; font-weight:600; }

/* Trust-Pills */
.trust{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.trust span{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ink-soft); background:var(--chip); border:1px solid var(--hair); padding:7px 12px; border-radius:999px; }
.trust i{ color:var(--accent-ink); }

/* Karten-Grid (Leistungen/News mit Bild) */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px; }
@media (max-width:600px){ .cards{ grid-template-columns:1fr; } }
.card{ display:flex; flex-direction:column; cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.card:hover{ transform:translateY(-5px); box-shadow:0 1px 0 var(--spec) inset, 0 22px 50px rgba(20,30,60,.2); }
.card .c-img{ aspect-ratio:16/10; overflow:hidden; }
.card .c-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card:hover .c-img img{ transform:scale(1.06); }
.card .c-body{ padding:15px 16px 17px; }
.card .c-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink); }
.card h3{ margin:6px 0 5px; font-size:15px; font-weight:600; letter-spacing:-.01em; }
.card p{ margin:0; font-size:12.8px; color:var(--muted); line-height:1.5; }
.card .c-go{ margin-top:10px; font-size:12px; font-weight:600; color:var(--accent-ink); display:inline-flex; align-items:center; gap:6px; }

/* Reason-Karten (Icon, ohne Bild) */
.reasons{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px; }
@media (max-width:600px){ .reasons{ grid-template-columns:1fr; } }
.reason{ padding:18px; }
.reason .r-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink); }
.reason .r-ico{ width:42px;height:42px;border-radius:12px; display:grid;place-items:center; font-size:19px; color:#fff; margin:10px 0 12px;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000)); box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 35%,transparent); }
.reason h3{ margin:0 0 6px; font-size:15px; font-weight:600; }
.reason p{ margin:0; font-size:12.8px; color:var(--muted); line-height:1.55; }

/* Feature-Grid (Bullet-Listen der Leistungen) */
.feat-list{ margin-top:18px; display:grid; gap:2px; }
.feat-row{ display:flex; gap:12px; align-items:flex-start; padding:12px 2px; border-bottom:1px solid var(--hair); }
.feat-row:last-child{ border-bottom:none; }
.feat-row i{ color:var(--accent-ink); font-size:15px; margin-top:2px; flex-shrink:0; }
.feat-row span{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; }

/* Gemeinden-Pills */
.pill-row{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.pill{ font-size:12px; padding:6px 11px; border-radius:999px; background:var(--chip); border:1px solid var(--hair); color:var(--ink-soft); }
.pill.main{ background:var(--accent-strong); color:#fff; border-color:transparent; }
.pill.seat{ border-color:color-mix(in srgb,var(--accent) 40%,transparent); color:var(--accent-ink); }

/* Team */
.team{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px; }
@media (max-width:600px){ .team{ grid-template-columns:1fr; } }
.member{ overflow:hidden; }
.member .m-img{ aspect-ratio:4/3; overflow:hidden; position:relative; }
.member .m-img img{ width:100%; height:100%; object-fit:cover; object-position:top; }
.member .m-badge{ position:absolute; top:12px; left:12px; font-family:var(--font-mono); font-size:10px; color:#fff; background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); padding:5px 10px; border-radius:999px; display:inline-flex; gap:6px; align-items:center; }
.member .m-badge::before{ content:''; width:6px;height:6px;border-radius:50%; background:#28c840; }
.member .m-body{ padding:16px; }
.member .m-role{ font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink); }
.member h3{ margin:4px 0 8px; font-size:17px; font-weight:600; font-family:var(--font-display); }
.member .m-quote{ font-size:13px; color:var(--ink-soft); line-height:1.55; font-style:italic; }
.member .m-contact{ margin-top:12px; padding-top:12px; border-top:1px solid var(--hair); font-family:var(--font-mono); font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:7px; }
.member .m-contact i{ color:var(--accent-ink); }

/* Steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
@media (max-width:700px){ .steps{ grid-template-columns:1fr; } }
.step{ padding:17px; }
.step-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.step-no{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--accent-ink); }
.step-meta{ font-family:var(--font-mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); background:var(--chip); padding:4px 9px; border-radius:999px; }
.step b{ display:block; font-size:14px; margin-bottom:5px; }
.step span{ font-size:12.5px; color:var(--muted); line-height:1.5; }

/* Tools */
.tools{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }
@media (max-width:560px){ .tools{ grid-template-columns:1fr; } }
.tool{ padding:16px; display:flex; flex-direction:column; gap:3px; cursor:pointer; transition:transform .25s var(--ease); }
.tool:hover{ transform:translateY(-3px); }
.tool .t-ico{ font-size:19px; color:var(--accent-ink); margin-bottom:6px; }
.tool .t-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.tool b{ font-size:14px; } .tool p{ margin:3px 0 0; font-size:12px; color:var(--muted); line-height:1.45; }
.tool .t-meta{ margin-top:10px; font-family:var(--font-mono); font-size:10.5px; color:var(--accent-ink); }

/* Partner */
.partners{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
@media (max-width:760px){ .partners{ grid-template-columns:1fr; } }
.partner{ padding:18px; }
.partner .p-logo{ height:34px; display:flex; align-items:center; margin-bottom:12px; }
.partner .p-logo img{ max-height:34px; width:auto; }
.partner .p-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink); }
.partner h3{ margin:6px 0 7px; font-size:15px; font-weight:600; }
.partner p{ margin:0 0 10px; font-size:12.3px; color:var(--muted); line-height:1.5; }
.partner ul{ margin:0; padding:0; list-style:none; }
.partner li{ font-size:12px; color:var(--ink-soft); padding:4px 0; display:flex; gap:7px; align-items:center; }
.partner li::before{ content:''; width:5px;height:5px;border-radius:50%; background:var(--accent-strong); flex-shrink:0; }

/* Quote-/Versprechen-Karten (dunkel) */
.promise{ background:linear-gradient(160deg,#15110f,#0c0908); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:clamp(20px,3vw,30px); margin-top:18px; color:#fff; }
.promise-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
@media (max-width:760px){ .promise-grid{ grid-template-columns:1fr; } }
.qcard{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:16px; }
.qcard .q-ico{ font-size:20px; color:var(--accent-2); }
.qcard .q-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:rgba(255,255,255,.5); margin:8px 0; }
.qcard p{ margin:0 0 12px; font-size:12.8px; line-height:1.55; color:rgba(255,255,255,.85); }
.qcard .q-foot{ font-family:var(--font-mono); font-size:10px; color:rgba(255,255,255,.45); border-top:1px solid rgba(255,255,255,.1); padding-top:9px; }
.promise h2{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,3.2vw,2.2rem); margin:0 0 8px; letter-spacing:-.02em; }
.promise h2 .accent{ color:var(--accent-2); }
.promise .p-lede{ color:rgba(255,255,255,.7); font-size:14px; max-width:60ch; }
.promise .p-note{ margin-top:16px; font-size:11.5px; color:rgba(255,255,255,.5); }

/* FAQ */
.faq{ margin-top:18px; border:1px solid var(--hair); border-radius:var(--radius); overflow:hidden; background:var(--panel-strong); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.faq-i{ border-bottom:1px solid var(--hair); } .faq-i:last-child{ border-bottom:none; }
.faq-i summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 17px; font-size:13.5px; font-weight:600; }
.faq-i summary::-webkit-details-marker{ display:none; }
.faq-i summary i{ color:var(--accent-ink); transition:transform .25s var(--ease); flex-shrink:0; }
.faq-i[open] summary i{ transform:rotate(45deg); }
.faq-i p{ margin:0; padding:0 17px 16px; font-size:12.8px; color:var(--muted); line-height:1.6; }

/* Kontakt */
.contact-box{ padding:22px; margin-top:18px; }
.contact-card{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; margin-top:16px; padding-top:16px; border-top:1px solid var(--hair); }
.contact-card img{ width:64px; height:64px; border-radius:14px; object-fit:cover; object-position:top; }
.contact-meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-top:7px; }
.contact-meta i{ color:var(--accent-ink); }

.canvas-foot{ margin-top:40px; padding:18px 0 8px; border-top:1px solid var(--hair); color:var(--muted); font-size:11.5px; font-family:var(--font-mono); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.canvas-foot a{ color:var(--accent-ink); }

/* ---------- Inspector --------------------------------------------------- */
.inspector{ border-left:1px solid var(--hair); overflow-y:auto; padding:6px 0 18px; background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 45%,transparent),transparent); }
.insp-tabs{ display:flex; gap:4px; padding:10px 12px; border-bottom:1px solid var(--hair); }
.insp-tabs button{ flex:1; height:30px; border:1px solid var(--hair); background:var(--field); border-radius:8px; font-size:12px; color:var(--ink-soft); display:grid;place-items:center; }
.insp-tabs button.on{ background:var(--accent-strong); color:#fff; border-color:transparent; }
.insp-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 6px; }
.insp-head .t{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.insp-head .all{ font-size:11px; color:var(--muted); font-family:var(--font-mono); }
.ctrl{ display:flex; align-items:center; gap:10px; padding:8px 14px; }
.ctrl .lbl{ display:flex; align-items:center; gap:8px; font-size:12.5px; min-width:92px; }
.ctrl .lbl i{ color:var(--muted); width:16px; text-align:center; }
.ctrl .val{ margin-left:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--muted); min-width:44px; text-align:right; }
.sw{ position:relative; width:40px; height:24px; flex-shrink:0; margin-left:auto; }
.sw input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.sw .track{ position:absolute; inset:0; background:var(--chip); border:1px solid var(--hair); border-radius:999px; transition:.25s var(--ease); }
.sw .knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:.25s var(--ease); }
.sw input:checked + .track{ background:var(--accent-strong); border-color:transparent; }
.sw input:checked + .track + .knob{ transform:translateX(16px); }
.rng{ -webkit-appearance:none; appearance:none; flex:1; height:5px; border-radius:999px; background:var(--chip); outline:none; }
.rng::-webkit-slider-thumb{ -webkit-appearance:none; width:16px;height:16px;border-radius:50%; background:#fff; border:1px solid var(--hair); box-shadow:0 1px 4px rgba(0,0,0,.3); cursor:pointer; }
.rng::-moz-range-thumb{ width:16px;height:16px;border-radius:50%; background:#fff; border:1px solid var(--hair); cursor:pointer; }
.seg{ margin-left:auto; display:flex; gap:3px; background:var(--chip); border:1px solid var(--hair); border-radius:8px; padding:3px; }
.seg button{ height:24px; min-width:30px; padding:0 8px; border:none; background:transparent; border-radius:6px; font-size:11.5px; color:var(--ink-soft); }
.seg button.on{ background:var(--accent-strong); color:#fff; }
.swatch{ width:18px;height:18px;border-radius:5px; border:1px solid rgba(0,0,0,.15); }
.insp-cta{ margin:14px; }
.insp-note{ padding:0 14px 14px; font-size:11px; color:var(--muted); font-family:var(--font-mono); line-height:1.5; }

/* ---------- Dock -------------------------------------------------------- */
.dock{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:30; display:flex; gap:10px; padding:8px 12px; border-radius:20px;
  background:var(--panel-strong); border:1px solid var(--panel-line); -webkit-backdrop-filter:blur(22px) saturate(1.7); backdrop-filter:blur(22px) saturate(1.7); box-shadow:0 18px 48px rgba(20,30,60,.3); }
.dock a{ position:relative; width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:20px; color:#fff; transition:transform .2s var(--ease); }
.dock a:hover{ transform:translateY(-9px) scale(1.08); }
.dock a span{ position:absolute; bottom:58px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:11px; background:rgba(0,0,0,.82); color:#fff; padding:3px 8px; border-radius:6px; opacity:0; pointer-events:none; transition:.18s; }
.dock a:hover span{ opacity:1; }
.d-pv{ background:linear-gradient(135deg,#f59e0b,#ef4444); }
.d-ev{ background:linear-gradient(135deg,#6366f1,#3b82f6); }
.d-home{ background:linear-gradient(135deg,#8b5cf6,#ec4899); }
.d-tool{ background:linear-gradient(135deg,#10b981,#0ea5e9); }
.d-call{ background:linear-gradient(135deg,#ef4444,#f97316); }
@media (max-width:860px){ .dock{ display:none; } }

/* ---------- Mobile ------------------------------------------------------ */
.m-toggle{ display:none; }
@media (max-width:980px){
  .appbody{ grid-template-columns:minmax(0,1fr); }
  .canvas{ width:100%; max-width:100%; min-width:0; }
  .sidebar,.inspector{ position:fixed; z-index:60; top:42px; bottom:14px; width:264px; background:var(--panel-strong); -webkit-backdrop-filter:blur(26px); backdrop-filter:blur(26px); transition:transform .3s var(--ease); }
  .sidebar{ left:14px; transform:translateX(-340px); border-radius:16px; border:1px solid var(--panel-line); }
  .inspector{ right:14px; transform:translateX(340px); border-radius:16px; border:1px solid var(--panel-line); }
  .sidebar.open{ transform:none; } .inspector.open{ transform:none; }
  .m-toggle{ display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--chip); border:1px solid var(--hair); }
}
@media (min-width:981px){ .m-only{ display:none; } }

/* ===== Spektakel-Schicht ================================================ */

/* Hero-Wortrotator */
.rotline{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rot{ position:relative; display:inline-block; min-width:23ch; height:1.25em; overflow:hidden; vertical-align:bottom; }
@media (max-width:480px){ .rot{ min-width:17ch; font-size:.92em; } .rotline{ font-size:.9em; } }
.rot b{ position:absolute; left:0; top:0; white-space:nowrap; color:var(--accent-ink); font-weight:700; opacity:0; transform:translateY(70%); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.rot b.on{ opacity:1; transform:none; }
.rot b.out{ opacity:0; transform:translateY(-70%); }

/* Sheen-Lichtsweep über Glas/Buttons */
.sheen{ position:relative; overflow:hidden; isolation:isolate; }
.sheen::after{ content:''; position:absolute; top:-20%; left:-70%; width:45%; height:140%; pointer-events:none; z-index:2;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%); transform:skewX(-16deg);
  animation:sweep 6.5s cubic-bezier(.6,.05,.3,1) infinite; }
@keyframes sweep{ 0%{ left:-70%; } 22%{ left:150%; } 100%{ left:150%; } }
html.reduce-motion .sheen::after{ display:none; }

/* Live-Energiefluss-Widget */
.energy{ margin-top:26px; padding:18px 18px 14px; position:relative; }
.energy-head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.energy-head .live{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink); }
.energy-head .live::before{ content:''; width:7px;height:7px;border-radius:50%; background:var(--accent-strong); animation:pulse 1.6s infinite; }
.energy-head .e-title{ font-size:12.5px; font-weight:600; color:var(--ink-soft); }
.energy-head .e-now{ margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--muted); }
.energy svg{ width:100%; height:auto; display:block; }
.e-node-label{ font-family:var(--font-mono); font-weight:600; }
.e-flow{ fill:var(--accent); }
html.reduce-motion .e-flow{ display:none; }
.e-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.e-stat{ text-align:center; }
.e-stat .es-k{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.e-stat .es-v{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; color:var(--ink); }
.e-stat .es-v .u{ color:var(--accent-ink); font-size:.7em; }

/* Dock-Magnification (JS setzt --mag) */
.dock a{ transform:scale(var(--mag,1)) translateY(calc((var(--mag,1) - 1) * -14px)); }
.dock a:hover{ transform:scale(1.18) translateY(-9px); }

html.no-spec .glass::before,
html.no-spec .glare::after,
html.no-spec .sheen::after{ display:none; }
html.no-spec{ --spec:transparent; }

html.reduce-motion *{ animation:none !important; transition:none !important; }
html.reduce-motion .reveal{ opacity:1; transform:none; }

/* ===========================================================================
   v2 — Accessibility · Mobile-Premium · Performance · Politur
   =========================================================================== */

/* --- Fokus & Skip-Link --- */
:where(a,button,[role="button"],input,summary,.layer,.tool,.dock a,.mobilebar a,.mobilebar button):focus-visible{
  outline:2.5px solid var(--accent); outline-offset:2px; border-radius:9px;
}
html[data-theme="dark"] :focus-visible{ outline-color:#fff; }
.skip{ position:fixed; top:-70px; left:14px; z-index:120; background:var(--accent-strong); color:#fff; padding:11px 18px; border-radius:11px; font-weight:600; font-size:13px; transition:top .25s var(--ease); box-shadow:0 8px 24px rgba(0,0,0,.3); }
.skip:focus{ top:38px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* --- Tap-Feedback / Active-States (mobil ohne :hover) --- */
*{ -webkit-tap-highlight-color:transparent; }
.btn:active{ transform:translateY(0) scale(.97); }
.card:active,.tool:active,.reason:active,.partner:active,.member:active,.step:active{ transform:scale(.985); }
.layer:active{ background:var(--accent-strong); color:#fff; }
.layer:active .l-ico,.layer:active small{ color:#fff; }
.dock a:active{ transform:scale(1.06); }
.cursor-go{ cursor:pointer; }

/* --- Scroll-Fortschritt in der Titelleiste --- */
.titlebar{ position:relative; }
.scroll-prog{ position:absolute; left:0; bottom:-1px; height:2px; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .08s linear; z-index:3; }

/* --- Native Mobile Tab-Bar mit zentralem Anruf-FAB --- */
.mobilebar{ display:none; }
@media (max-width:860px){
  .mobilebar{ display:flex; align-items:flex-end; justify-content:space-around; position:fixed; left:0; right:0; bottom:0; z-index:62;
    height:calc(60px + env(safe-area-inset-bottom)); padding:0 6px env(safe-area-inset-bottom);
    background:var(--panel-strong); -webkit-backdrop-filter:blur(26px) saturate(1.8); backdrop-filter:blur(26px) saturate(1.8);
    border-top:1px solid var(--panel-line); box-shadow:0 -10px 30px rgba(20,30,60,.14); }
  .mb-tab{ flex:1; height:60px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    background:none; border:none; color:var(--muted); font-size:10px; font-weight:600; font-family:var(--font-ui); text-decoration:none; }
  .mb-tab i{ font-size:21px; transition:transform .2s var(--ease); }
  .mb-tab.active{ color:var(--accent-ink); }
  .mb-tab.active i{ transform:translateY(-1px) scale(1.08); }
  .mb-tab:active i{ transform:scale(.88); }
  .mb-fab{ flex:0 0 auto; width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 90%,#fff), var(--accent)); color:#fff; font-size:23px;
    margin-bottom:14px; border:4px solid var(--panel-strong); box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 52%,transparent); transition:transform .2s var(--ease); }
  .mb-fab:active{ transform:scale(.9); }
  .canvas{ padding-bottom:86px; }
}

/* --- Off-Canvas-Scrim --- */
.scrim{ position:fixed; inset:0; z-index:58; background:rgba(8,12,20,.42); opacity:0; pointer-events:none; transition:opacity .3s var(--ease); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.scrim.on{ opacity:1; pointer-events:auto; }

/* --- Mobile = echte native App: Desktop-Chrome weg, Vollbild, schlanke App-Bar --- */
@media (max-width:860px){
  .menubar{ display:none; }
  .window{ top:0; left:0; right:0; bottom:0; border-radius:0; border:none; }
  /* App-Bar: nur Logo links, Theme + Einstellungen rechts */
  .titlebar{ height:calc(56px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 16px 0; gap:10px;
    background:var(--panel-strong); -webkit-backdrop-filter:saturate(1.7) blur(var(--glass-blur)); backdrop-filter:saturate(1.7) blur(var(--glass-blur)); }
  .titlebar .traffic, .titlebar .title-doc, .titlebar .tool-pill, #mLeft{ display:none !important; }
  .title-logo{ height:25px; }
  .tool-seg button{ width:40px; height:32px; }
  #mRight{ width:42px; height:42px; display:grid; place-items:center; font-size:18px; }
  .layer{ min-height:46px; }
  .faq-i summary{ min-height:52px; }
  .canvas-inner{ padding-left:18px; padding-right:18px; padding-top:26px; }
}
@media (max-width:980px){ .layer{ min-height:44px; } }

/* --- iOS: dynamische Viewport-Hoehe & Safe-Area --- */
body{ min-height:100vh; min-height:100svh; }
.menubar{ padding-top:env(safe-area-inset-top); }

/* --- Reduced Transparency / High Contrast --- */
@media (prefers-reduced-transparency: reduce){
  :root{ --glass-alpha:.94; --panel-strong:rgba(255,255,255,.97); }
  html[data-theme="dark"]{ --panel-strong:rgba(26,30,42,.97); }
  .menubar,.window,.glass,.dock,.mobilebar,.faq,.sidebar,.inspector,.btn-glass{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .wallpaper .blob{ display:none; }
}
@media (prefers-contrast: more){
  :root{ --hair:rgba(12,22,42,.34); --muted:#454b56; }
  html[data-theme="dark"]{ --hair:rgba(255,255,255,.32); --muted:#b8c0cc; }
  .sec-lede,.lede,.card p,.reason p,.partner p{ color:var(--ink-soft); }
}

/* --- Bild-Layout-Stabilitaet (CLS) --- */
.card .c-img img,.hero-visual img,.member .m-img img{ background:var(--field); }

/* ===========================================================================
   Native Mobile Bottom-Sheets (Menü · Leistungen · Einstellungen)
   =========================================================================== */
.sheet-nav{ display:none; }
@media (max-width:860px){
  /* Sidebar, Inspector und Leistungs-Sheet werden zu Bottom-Sheets */
  .appsheet{
    position:fixed !important; top:auto !important; bottom:0 !important; left:0 !important; right:0 !important;
    width:auto !important; max-height:86vh; display:flex !important; flex-direction:column;
    border-radius:26px 26px 0 0 !important; border:1px solid var(--panel-line) !important; border-bottom:none !important;
    background:var(--panel-strong); -webkit-backdrop-filter:blur(28px) saturate(1.8); backdrop-filter:blur(28px) saturate(1.8);
    transform:translateY(112%) !important; transition:transform .4s var(--ease) !important;
    z-index:70; padding:0 0 calc(16px + env(safe-area-inset-bottom)); overflow:hidden;
    box-shadow:0 -24px 64px rgba(20,30,60,.36);
  }
  .appsheet.open{ transform:translateY(0) !important; }
  .sheet-nav.open{ display:flex !important; }
  /* Drag-Handle */
  .appsheet::before{ content:''; flex:0 0 auto; width:42px; height:5px; border-radius:3px; background:var(--hair); margin:11px auto 6px; }
  /* innerer Scrollbereich */
  .sidebar, .inspector{ overflow-y:auto; }
  .scrim{ z-index:68; }
  /* Sheet-Kopf */
  .sheet-title{ font-family:var(--font-display); font-weight:600; font-size:1.25rem; letter-spacing:-.02em; padding:6px 20px 4px; }
  .sheet-sub{ padding:0 20px 12px; font-size:12.5px; color:var(--muted); }
  /* Sheet-Zeilen (Kategorie-Auswahl) */
  .sheet-list{ overflow-y:auto; padding:4px 12px 8px; -webkit-overflow-scrolling:touch; }
  .sheet-row{ display:flex; align-items:center; gap:14px; padding:14px 12px; border-radius:16px; color:var(--ink); }
  .sheet-row:active{ background:var(--chip); }
  .sheet-row .sr-ico{ width:44px; height:44px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center; font-size:20px; color:#fff;
    background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000)); box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 32%,transparent); }
  .sheet-row .sr-main{ flex:1; min-width:0; }
  .sheet-row .sr-main b{ display:block; font-size:14.5px; font-weight:600; }
  .sheet-row .sr-main span{ font-size:12px; color:var(--muted); }
  .sheet-row > .bi-chevron-right{ color:var(--muted); font-size:13px; }
  /* Inspector als Sheet: Tabs/Kopf bleiben, Inhalt scrollt */
  .inspector .insp-tabs{ position:sticky; top:0; background:var(--panel-strong); z-index:2; }
}

/* --- Overflow-Schutz --- */
html,body{ overflow-x:hidden; }
.canvas-inner,.appbody,.canvas{ min-width:0; }
.lede,.sec-lede,.display,.sec-title,.card p,.reason p{ overflow-wrap:break-word; }
.energy-head{ flex-wrap:wrap; }
.energy-head .e-title{ min-width:0; }

/* --- View-Transitions (Theme-Wechsel) --- */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root),::view-transition-new(root){ animation-duration:.4s; animation-timing-function:var(--ease); }
}

/* ===========================================================================
   PREMIUM-POLISH v3 — Tiefe, Glow, Fokus, Reduced-Motion, Safe-Area
   =========================================================================== */

/* Fokus folgt dem element-eigenen Radius (kein 9px-Sprung mehr) */
:where(a,button,[role="button"],input,summary,.layer,.tool,.dock a,.mb-tab,.sheet-row):focus-visible{
  outline:2.5px solid var(--accent); outline-offset:3px; border-radius:inherit;
}

/* Premium-Glow: Akzent-Text & primäre Aktionen leuchten dezent (auch im ersten Frame) */
.display .accent{ text-shadow:0 1px 0 rgba(255,255,255,.25), 0 0 22px color-mix(in srgb,var(--accent) 22%,transparent); }
html[data-theme="dark"] .display .accent{ text-shadow:0 0 26px color-mix(in srgb,var(--accent) 42%,transparent); }
.btn-primary{ background:linear-gradient(180deg, var(--accent), var(--accent-strong)); box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 8px 22px color-mix(in srgb,var(--accent) 42%,transparent), 0 2px 6px color-mix(in srgb,var(--accent) 30%,transparent); }
.btn-primary:hover{ box-shadow:0 1px 0 rgba(255,255,255,.32) inset, 0 14px 34px color-mix(in srgb,var(--accent) 52%,transparent); }
.mb-fab{ background:linear-gradient(180deg, var(--accent), var(--accent-strong)) !important; }

/* Mehr Tiefe & Glas-Realismus auf Karten */
.glass{ box-shadow:0 1px 0 var(--spec) inset, 0 2px 6px rgba(20,30,60,.05), 0 18px 44px rgba(20,30,60,.13); }
.card:hover,.tool:hover,.reason:hover,.partner:hover{ box-shadow:0 1px 0 var(--spec) inset, 0 26px 58px rgba(20,30,60,.22); }
html[data-theme="dark"] .glass{ box-shadow:0 1px 0 var(--spec) inset, 0 2px 8px rgba(0,0,0,.4), 0 22px 54px rgba(0,0,0,.5); }

/* Kontrast-Feinschliff (dunkle Promise-Karten + aktive Sidebar) */
.qcard .q-foot{ color:rgba(255,255,255,.64); }
.qcard .q-tag{ color:rgba(255,255,255,.66); }
.layer.active{ background:var(--accent-strong); }

/* Aktiver Sektions-Indikator (Mobile App-Bar) */
.app-section{ display:none; }
@media (max-width:860px){
  .app-section{ display:flex; flex-direction:column; line-height:1.15; margin-left:2px; }
  .app-section b{ font-size:13px; font-weight:600; color:var(--ink); }
  .app-section small{ font-size:10px; font-family:var(--font-mono); color:var(--accent-ink); letter-spacing:.04em; }
}

/* Trigger-Highlight bei offenem Sheet */
.mb-tab.sheet-open, #mRight.sheet-open{ color:var(--accent-ink); }
.mb-tab.sheet-open i{ transform:translateY(-2px) scale(1.1); }

/* z-index-Ordnung: Bar < Scrim < Sheet */
@media (max-width:860px){ .mobilebar{ z-index:60; } .scrim{ z-index:66; } .appsheet{ z-index:72; } }

/* Safe-Area sauber: Fenster, Canvas-Reserve, Bottom-Bar, Dock */
@media (max-width:860px){
  .window{ top:calc(0px + env(safe-area-inset-top)); left:env(safe-area-inset-left); right:env(safe-area-inset-right); }
  .canvas{ padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
  .canvas-inner{ padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right)); }
  .sec{ scroll-margin-top:64px; }
}
.dock{ bottom:calc(22px + env(safe-area-inset-bottom)); }

/* Reduced-Motion: reiner CSS-Riegel (greift auch ohne JS) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .blob,.sheen::after,.e-flow{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  ::view-transition-group(*),::view-transition-old(root),::view-transition-new(root){ animation:none !important; }
}

/* Reduced-Transparency: auch dekorative Glas-Schichten entfernen */
@media (prefers-reduced-transparency: reduce){
  .glass::before,.glare::after,.sheen::after{ display:none; }
  :root,html[data-theme="dark"]{ --spec:transparent; }
}

/* ===========================================================================
   DRAMA & POLITUR v4 — Gesamteindruck heben (alle Seiten)
   =========================================================================== */

/* Großzügigere Typo & Rhythmus */
.display{ font-size:clamp(2.6rem,6.6vw,5.4rem); letter-spacing:-.042em; line-height:.95; margin-bottom:20px; }
.lede{ font-size:1.13rem; line-height:1.68; color:var(--ink-soft); max-width:60ch; }
.sec-title{ font-size:clamp(1.8rem,3.7vw,2.7rem); letter-spacing:-.032em; line-height:1.04; }
.sec-lede{ font-size:15px; line-height:1.7; }
.canvas-inner{ padding-top:clamp(26px,4vw,52px); position:relative; }

/* Dramatischeres Akzent-Wort: Verlauf + Glow */
.display .accent{
  background:linear-gradient(118deg, var(--accent-strong), var(--accent) 50%, var(--accent-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--accent-ink);
  filter:drop-shadow(0 3px 20px color-mix(in srgb,var(--accent) 30%,transparent)); text-shadow:none;
}
html[data-theme="dark"] .display .accent{ filter:drop-shadow(0 0 28px color-mix(in srgb,var(--accent) 50%,transparent)); }

/* Hero-Ambient: weiches Licht hinter der ersten Sektion (Drama auch ohne Foto) */
.canvas-inner::before{ content:''; position:absolute; z-index:0; top:-10px; left:-6%; width:62%; height:clamp(280px,42vw,460px); pointer-events:none;
  background:radial-gradient(60% 70% at 28% 22%, color-mix(in srgb,var(--accent) 15%,transparent), transparent 72%); filter:blur(18px); opacity:.75; }
html[data-theme="dark"] .canvas-inner::before{ opacity:.5; background:radial-gradient(60% 70% at 28% 22%, color-mix(in srgb,var(--accent) 30%,transparent), transparent 72%); }
.canvas-inner > *{ position:relative; z-index:1; }

/* Edlere Sektions-Trennung: Verlaufslinie + Akzent-Tick am Label */
.sec{ border-top:none !important; padding-top:clamp(34px,4.5vw,58px); margin-top:clamp(34px,4.5vw,58px); }
.sec:first-child{ padding-top:0; margin-top:0; }
.sec:not(:first-child)::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--hair) 18%, var(--hair) 82%, transparent); }
.sec{ position:relative; }
.sec-num{ display:inline-flex; align-items:center; gap:9px; font-weight:600; }
.sec-num::before{ content:''; width:20px; height:2px; border-radius:2px; background:var(--accent); box-shadow:0 0 10px color-mix(in srgb,var(--accent) 60%,transparent); }

/* Weicheres, edleres Reveal (Blur-in + leichte Skalierung) */
.reveal{ opacity:0; transform:translateY(24px) scale(.992); filter:blur(7px);
  transition:opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease); }
.reveal.in{ opacity:1; transform:none; filter:none; }
html.reduce-motion .reveal{ opacity:1 !important; transform:none !important; filter:none !important; }

/* Glas: kräftigere Lichtkante + feiner Innenrahmen */
.glass::before{ background:linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.08) 30%, transparent 46%); opacity:.85; }
.glass{ box-shadow:0 1px 0 var(--spec) inset, inset 0 0 0 1px rgba(255,255,255,.04), 0 2px 6px rgba(20,30,60,.05), 0 22px 50px rgba(20,30,60,.14); }

/* Karten-Micro-Interaktion: definierter Lift */
.card,.tool,.reason,.partner,.member,.step{ transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.card:hover,.tool:hover,.reason:hover,.partner:hover{ transform:translateY(-6px); }

/* Buttons: präsenter, satter Schliff */
.btn{ height:46px; letter-spacing:-.01em; }
.btn-lg{ height:52px; }
.kicker{ background:var(--panel-strong); box-shadow:0 1px 0 var(--spec) inset, 0 4px 14px rgba(20,30,60,.06); }

/* Trust-Pills edler */
.trust span{ background:var(--panel-strong); box-shadow:0 1px 0 var(--spec) inset; }

@media (max-width:420px){ .display{ font-size:2.2rem; letter-spacing:-.03em; } }

/* ===========================================================================
   HORIZONTALE GALERIEN ("Puzzle" — links/rechts ziehen mit Snap)
   =========================================================================== */
.cards, .reasons{
  display:flex !important; flex-wrap:nowrap !important; gap:16px;
  grid-template-columns:none !important;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:4px 2px 16px; margin-bottom:6px;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; cursor:grab;
  scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--accent) 40%,transparent) transparent;
}
.cards.dragging, .reasons.dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.cards.dragging *, .reasons.dragging *{ pointer-events:none; }
.cards > *, .reasons > *{ flex:0 0 min(86%, 360px); scroll-snap-align:start; }
.cards::-webkit-scrollbar, .reasons::-webkit-scrollbar{ height:7px; }
.cards::-webkit-scrollbar-thumb, .reasons::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--accent) 38%,transparent); border-radius:99px; }
.cards::-webkit-scrollbar-track, .reasons::-webkit-scrollbar-track{ background:transparent; }
@media (min-width:1100px){ .cards > *, .reasons > *{ flex-basis:340px; } }

/* Galerie-Rahmen: Kantenverlauf rechts als "mehr"-Hinweis + Swipe-Label */
.gallery{ position:relative; }
.gallery::after{ content:''; position:absolute; top:0; right:0; bottom:18px; width:54px; pointer-events:none;
  background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--panel) 80%, transparent)); opacity:.0; transition:opacity .3s; }
.gallery.has-more::after{ opacity:1; }
.gallery-hint{ display:inline-flex; align-items:center; gap:7px; margin-top:2px; font-family:var(--font-mono); font-size:11px; color:var(--accent-ink); }
.gallery-hint i{ animation:nudge 1.8s var(--ease) infinite; }
@keyframes nudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }
html.reduce-motion .gallery-hint i{ animation:none; }

/* Menü-Sheet: aktive Seite markiert */
.sheet-row.current{ background:color-mix(in srgb,var(--accent) 9%,transparent); }
.sheet-row.current .bi-check2{ color:var(--accent-ink); }
@media (min-width:861px){ .sheet-nav{ display:none !important; } }

/* ===========================================================================
   v5 — MULTI-AGENT-POLITUR (Konsens aus Visual · A11y · Performance · UX)
   Spätere Regeln = Single Source of Truth. Bündelt die widersprüchlichen
   v1–v4-Stapel auf je einen finalen, bewusst gesetzten Wert.
   =========================================================================== */

/* — UX/Visual/Perf-Konsens: Desktop zeigt wieder ALLE Karten als ruhiges Raster.
     Horizontale „Puzzle"-Galerie bleibt nur Touch/Mobile (<861px). — */
@media (min-width:861px){
  .cards, .reasons{
    display:grid !important; grid-template-columns:repeat(2,1fr) !important;
    overflow:visible !important; scroll-snap-type:none !important;
    cursor:default !important; padding:0; margin-bottom:0;
  }
  .cards > *, .reasons > *{ flex:initial !important; scroll-snap-align:none; }
  .gallery::after, .gallery-hint{ display:none !important; }
}

/* — Visual #1+#6: Glaskante wird ein klar definierter Specular-Streifen statt
     diffusem screen-Schimmer; Dark-Mode-Glas bekommt sichtbare Oberkante. — */
.glass::before{
  background:linear-gradient(135deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.10) 28%, transparent 46%);
  opacity:.9; mix-blend-mode:plus-lighter;
}
html[data-theme="dark"] .glass::before{
  background:linear-gradient(135deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.06) 30%, transparent 48%);
  opacity:.7;
}
html[data-theme="dark"] .glass{
  border-color:rgba(255,255,255,.14);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset, inset 0 0 0 1px rgba(255,255,255,.05),
             0 2px 8px rgba(0,0,0,.4), 0 22px 54px rgba(0,0,0,.5);
}

/* — Perf #4: Karten-Glas braucht kein echtes backdrop-blur (panel-strong ist
     ~.74–.78 deckend, das Fenster blurrt die Tapete bereits). Spart pro Karte
     den teuersten Compositing-Effekt — Optik praktisch identisch. — */
.glass{ -webkit-backdrop-filter:none; backdrop-filter:none; }

/* — Visual #9: Maus-Glanz dezenter, überstrahlt die Oberkante nicht mehr. — */
.glare::after{ background:radial-gradient(150px circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.22), transparent 62%); }
.glare:hover::after{ opacity:.8; }

/* — Visual #3: Rot-Übersättigung im Sektionskopf zurücknehmen — der Tick wird
     ruhige Strukturmarke, nur das Akzent-Wort leuchtet noch. — */
.sec-num::before{ box-shadow:none; opacity:.85; }

/* — Visual #5: Dauer-Sheen auf dem großen Energie-Widget beruhigen
     (Buttons behalten ihren Sweep). — */
.energy.sheen::after{ animation-duration:9s; animation-iteration-count:3; opacity:.5; width:38%; }

/* — Visual #10: kein Unschärfe-„Pop" auf Foto-Karten; Text behält Blur-in,
     Bilder gleiten nur sauber herein. — */
.reveal:has(img){ filter:none; transform:translateY(20px) scale(1); }
.reveal:has(img).in{ transform:none; }

/* — Visual #7: etwas Luft zwischen den zwei Display-Zeilen. — */
.display{ line-height:1.0; }

/* — A11y #8: Lese-Kontrast von Sekundärtext anheben (#565d6b → #4b515e). — */
:root{ --muted:#4b515e; }

/* — A11y #9: Links nicht nur über Farbe erkennbar. — */
.inline-link, .canvas-foot a{ text-decoration:underline; text-underline-offset:2px; }

/* — A11y #2: Dock-Tooltip auch bei Tastatur-Fokus sichtbar. — */
.dock a:focus-visible span{ opacity:1; }

/* — Karten sind jetzt echte <a>-Links: Vererbung sicherstellen. — */
a.card{ color:inherit; text-decoration:none; }

/* — A11y #6: horizontaler Galerie-Scroller per Tastatur fokussier-/scrollbar. — */
.gallery > .cards:focus-visible, .gallery > .reasons:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:14px; }

/* ===========================================================================
   v6 — Funktionierende Sidebar-Suche (Spotlight-artig)
   =========================================================================== */
.side-search{ position:relative; cursor:text; }
.side-search > i.bi-search{ flex:0 0 auto; pointer-events:none; }
.side-search input[type="search"]{
  flex:1; min-width:0; border:none; background:transparent; outline:none;
  font:inherit; font-size:12.5px; color:var(--ink); padding:0; margin:0;
}
.side-search input[type="search"]::placeholder{ color:var(--muted); }
.side-search input[type="search"]::-webkit-search-decoration,
.side-search input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.ss-clear{ flex:0 0 auto; width:20px; height:20px; border:none; background:var(--chip); color:var(--muted);
  border-radius:6px; display:grid; place-items:center; font-size:10px; transition:.15s var(--ease); }
.ss-clear:hover{ color:var(--ink); background:var(--hair); }
/* Treffer-Markierung in der Sidebar */
.side-empty{ margin:2px 14px 8px; padding:9px 11px; font-size:12px; color:var(--muted);
  background:var(--field); border:1px solid var(--hair); border-radius:9px; line-height:1.45; }
.ss-link{ border:none; background:none; color:var(--accent-ink); font:inherit; font-size:12px; text-decoration:underline; padding:0; }

/* Inhaltssuche: Navigation ausblenden, Ergebnisliste zeigen */
#sidebar.searching .side-h, #sidebar.searching .layer, #sidebar.searching .side-foot{ display:none !important; }
.side-results{ display:flex; flex-direction:column; gap:2px; padding:2px 8px 10px; }
.sr-res{ display:block; width:100%; text-align:left; border:none; background:transparent; border-radius:10px;
  padding:9px 11px; cursor:pointer; transition:background .12s var(--ease); }
.sr-res:hover, .sr-res.sel{ background:var(--chip); }
.sr-res.sel{ box-shadow:0 0 0 1.5px color-mix(in srgb,var(--accent) 45%,transparent) inset; }
.sr-res .sr-sec{ display:block; font-family:var(--font-mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:2px; }
.sr-res b{ display:block; font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.25; }
.sr-res small{ display:block; font-size:11px; color:var(--muted); margin-top:2px; line-height:1.4; }
.side-results mark{ background:color-mix(in srgb,var(--accent) 26%,transparent); color:inherit; border-radius:3px; padding:0 1px; font-weight:600; }
.sr-more{ padding:7px 12px 2px; font-size:10.5px; color:var(--muted); font-family:var(--font-mono); }

/* Fundstellen-Highlight im Canvas (Outline rendert auch über overflow:hidden) */
.search-flash{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:14px; animation:searchPulse 1.7s var(--ease); }
@keyframes searchPulse{ 0%{ outline-color:transparent; } 18%,55%{ outline-color:var(--accent); } 100%{ outline-color:transparent; } }
html.reduce-motion .search-flash{ animation:none; }


/* ===========================================================================
   v6 — CINEMATIC EDITORIAL  (Art-Direction-Pass)
   Ziel: First-Impression „Magazin-Cover / Keynote-Folie". Hebt Tiefe, Licht,
   Typo-Choreografie und Bewegungs-Orchestrierung — kohärent über alle Sektionen.
   Spätere Schicht = Single Source of Truth; alle harten App-Hooks bleiben intakt.
   =========================================================================== */

/* ---- 6.1 · FARB-GRADING HELL: mehr Tiefe, Wärme & Kontrast ---------------- */
/* Der beige Grund bekommt eine reichere, mehrschichtige Lichtführung mit einem
   warmen Kern (oben links Sonne) und kühlerem, sattem Schatten unten rechts.
   Markenton bleibt — nur edler abgestuft. */
.wallpaper{
  background:
    radial-gradient(46% 40% at 84% -4%, rgba(231,61,37,.26) 0%, transparent 58%),
    radial-gradient(40% 46% at 12% 8%, rgba(255,247,240,.98) 0%, transparent 56%),
    radial-gradient(80% 64% at 50% 118%, rgba(196,42,20,.13) 0%, transparent 62%),
    radial-gradient(70% 60% at 96% 88%, rgba(120,84,72,.16) 0%, transparent 60%),
    linear-gradient(168deg,#fbf8f3 0%,#f5ece5 30%,#eee0d7 58%,#e6d4c9 80%,#dcc6ba 100%);
}
/* Hauchfeine Vignette am Fensterrand → „teures" Fokuslicht in der Mitte */
.window::after{
  content:''; position:absolute; inset:0; z-index:5; pointer-events:none; border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), inset 0 64px 120px rgba(255,250,246,.30),
             inset 0 -90px 150px rgba(86,52,40,.10);
  mix-blend-mode:normal;
}

/* ---- 6.1b · FARB-GRADING DARK: edel-kinoreif (tiefes Anthrazit + Glut) ---- */
html[data-theme="dark"] .wallpaper{
  background:
    radial-gradient(48% 42% at 84% -6%, rgba(231,61,37,.34) 0%, transparent 56%),
    radial-gradient(42% 48% at 10% 10%, rgba(58,38,32,.72) 0%, transparent 56%),
    radial-gradient(82% 66% at 50% 120%, rgba(196,42,20,.22) 0%, transparent 62%),
    radial-gradient(60% 60% at 98% 92%, rgba(20,14,12,.9) 0%, transparent 58%),
    linear-gradient(168deg,#1a1310 0%,#181210 42%,#0f0a09 74%,#070504 100%);
}
html[data-theme="dark"] .window::after{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 70px 130px rgba(231,61,37,.07),
             inset 0 -110px 170px rgba(0,0,0,.55);
}

/* ---- 6.2 · HERO ALS SHOWSTOPPER ------------------------------------------ */
/* Asymmetrische, selbstbewusste Komposition: Display darf größer atmen, das
   Akzent-Wort wird inszeniert, Lede bekommt editorialen Rhythmus. */
.hero-cine{ padding-bottom:8px; }

/* Eyebrow/Kicker: präziser, ruhiger, mit feinem Akzent-Tick */
.hero-cine .kicker{
  letter-spacing:.12em; text-transform:uppercase; font-size:10.5px; font-weight:600;
  padding:7px 13px 7px 11px; gap:10px;
}

/* Display: dramatischere Skala + engere optische Laufweite + Licht dahinter */
.hero-cine .display{
  font-size:clamp(2.7rem,7.4vw,6.2rem);
  letter-spacing:-.045em; line-height:.92; font-weight:700;
  margin:6px 0 22px; text-wrap:balance;
}
/* Erste Zeile etwas leiser, Akzent-Zeile trägt das Gewicht (editorial-Hierarchie) */
.hero-cine .display{ color:var(--ink); }
.hero-cine .display .accent{ font-weight:800; letter-spacing:-.05em; }

/* Licht/Tiefe hinter der Headline — zweite, stärkere Lichtquelle nur im Hero */
.hero-cine::before{
  content:''; position:absolute; z-index:0; top:clamp(-40px,-3vw,-10px); left:-8%;
  width:min(78%,720px); height:clamp(320px,46vw,560px); pointer-events:none;
  background:
    radial-gradient(54% 62% at 30% 26%, color-mix(in srgb,var(--accent) 22%,transparent), transparent 70%),
    radial-gradient(40% 50% at 8% 10%, rgba(255,244,236,.9), transparent 72%);
  filter:blur(8px); opacity:.9;
}
html[data-theme="dark"] .hero-cine::before{
  opacity:.62;
  background:
    radial-gradient(54% 62% at 30% 26%, color-mix(in srgb,var(--accent) 34%,transparent), transparent 70%),
    radial-gradient(40% 50% at 8% 10%, rgba(60,40,34,.7), transparent 72%);
}
.hero-cine > *{ position:relative; z-index:1; }

/* Lede: editoriale Spaltenbreite + ruhiger Zeilenrhythmus */
.hero-cine .lede{ font-size:1.16rem; line-height:1.66; max-width:54ch; color:var(--ink-soft); }
.hero-cine .lede{ font-weight:420; }

/* CTA-Reihe: mehr Präsenz für die Primäraktion */
.hero-cine .cta-row{ gap:12px; margin-top:6px; }
.hero-cine .btn-primary{ height:50px; padding:0 22px; font-size:14.5px; }

/* ---- 6.3 · HERO-FOTO IMMERSIVER INSZENIEREN ------------------------------ */
.hero-cine .hero-visual{
  aspect-ratio:21/10; margin-top:30px; border-radius:calc(var(--radius) + 4px);
  box-shadow:0 1px 0 var(--spec) inset, 0 40px 90px rgba(30,16,10,.30), 0 12px 30px rgba(30,16,10,.16);
}
/* Feinere, mehrstufige Overlay-Gradienten statt harter Schwarz-Kante */
.hero-cine .hero-visual::after{
  background:
    linear-gradient(180deg, rgba(8,6,5,.10) 0%, transparent 26%, transparent 52%, rgba(8,6,5,.62) 100%),
    radial-gradient(120% 80% at 80% 8%, rgba(231,61,37,.16), transparent 56%),
    linear-gradient(90deg, rgba(8,6,5,.30) 0%, transparent 34%);
}
/* Langsamer Ken-Burns-Hauch — Foto „lebt", ohne abzulenken */
.hero-cine .hero-visual img{ transform:scale(1.04); transform-origin:62% 40%; animation:heroKB 26s var(--ease) infinite alternate; }
@keyframes heroKB{ from{ transform:scale(1.045) translate3d(0,0,0); } to{ transform:scale(1.10) translate3d(-1.4%,-1.2%,0); } }
html.reduce-motion .hero-cine .hero-visual img{ animation:none; transform:scale(1.02); }

/* Elegantere Float-Caption: feinere Glas-Leiste mit editorialer Kennzahl-Zeile */
.hero-cine .hero-float{
  left:18px; right:18px; bottom:18px; padding:15px 18px 16px; border-radius:16px;
  background:linear-gradient(180deg, rgba(14,10,9,.34), rgba(14,10,9,.62));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset, 0 18px 40px rgba(0,0,0,.32);
}
.hero-cine .hero-float .hf-l{ letter-spacing:.16em; }
.hero-cine .hero-float .hf-t{ font-size:14.5px; line-height:1.4; max-width:46ch; }
.hf-spec{ display:flex; align-items:center; gap:13px; margin-top:11px; padding-top:11px;
  border-top:1px solid rgba(255,255,255,.16); font-family:var(--font-mono); font-size:11px;
  letter-spacing:.04em; color:rgba(255,255,255,.78); }
.hf-spec b{ font-family:var(--font-display); font-size:17px; font-weight:700; color:#fff; letter-spacing:-.01em; }
.hf-spec span{ display:inline-flex; align-items:baseline; gap:5px; }
.hf-div{ width:1px; height:14px; background:rgba(255,255,255,.28); }
/* Badge edler: schmaler, monospace, weniger „App-Sticker" */
.hero-cine .hero-badge{ top:16px; left:16px; letter-spacing:.08em; background:rgba(8,6,5,.42); }

/* Hero-Badge rechts unten bleibt — Stats darunter editorial separieren */
.hero-cine .stats{ margin-top:30px; }
.hero-cine .stat .v{ font-size:1.85rem; }

/* ---- 6.4 · ORCHESTRIERTE BEWEGUNG (gestaffelte Reveals) ------------------ */
/* JS setzt --i pro Sektion. Wir verzögern jeden Eintritt um i*step — ruhig,
   präzise, nie zappelig. Greift NUR, solange das Element noch nicht .in ist. */
@media (prefers-reduced-motion: no-preference){
  html:not(.reduce-motion) .sec > .reveal,
  html:not(.reduce-motion) .sec > * > .reveal{
    transition-delay:calc(var(--i,0) * 90ms);
  }
  /* Sobald sichtbar, Verzögerung neutralisieren, damit spätere Hover/State-
     Transitions nicht nachhängen. */
  html:not(.reduce-motion) .sec > .reveal.in,
  html:not(.reduce-motion) .sec > * > .reveal.in{ transition-delay:0ms, 0ms, 0ms; }
  /* Etwas weiterer, „filmischer" Anlauf für die Eintritts-Drift */
  html:not(.reduce-motion) .reveal{ transform:translateY(28px) scale(.99); }
  html:not(.reduce-motion) .reveal:has(img){ transform:translateY(22px) scale(1); }
}
html.reduce-motion .sec > .reveal,
html.reduce-motion .sec > * > .reveal{ transition-delay:0ms !important; }

/* ---- 6.5 · TYPO-FEINSCHLIFF (editorial-grade Rhythmus) ------------------- */
/* Sektions-Köpfe bekommen mehr vertikalen Atem & klarere Hierarchie */
.sec-title{ text-wrap:balance; letter-spacing:-.034em; }
.sec-lede{ max-width:60ch; }
/* Akzent-Wörter in Sektions-Titeln erben den Hero-Verlauf (kohärent) */
.sec-title .accent{
  background:linear-gradient(116deg, var(--accent-strong), var(--accent) 52%, var(--accent-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--accent-ink);
}
html[data-theme="dark"] .sec-title .accent{ filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 38%,transparent)); }
/* „Kapitel"-Nummern wirken wie Magazin-Marginalien */
.sec-num{ font-size:10.5px; letter-spacing:.14em; opacity:.95; }

/* ---- 6.6 · KOHÄRENTE TIEFE über alle Sektionen --------------------------- */
/* Karten/Glas: feiner Doppelschatten für „schwebende" Magazin-Optik */
.card,.tool,.reason,.partner,.member,.step,.faq,.contact-box,.energy{
  box-shadow:0 1px 0 var(--spec) inset, 0 2px 8px rgba(30,16,10,.05), 0 26px 56px rgba(30,16,10,.12);
}
html[data-theme="dark"] .card,html[data-theme="dark"] .tool,html[data-theme="dark"] .reason,
html[data-theme="dark"] .partner,html[data-theme="dark"] .member,html[data-theme="dark"] .step,
html[data-theme="dark"] .faq,html[data-theme="dark"] .contact-box,html[data-theme="dark"] .energy{
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, inset 0 0 0 1px rgba(255,255,255,.05),
             0 3px 10px rgba(0,0,0,.45), 0 28px 64px rgba(0,0,0,.55);
}
/* Promise-/Doku-Karten (dunkle Sektionen): kinoreifer Verlauf + Glut-Rand */
.promise{ background:linear-gradient(158deg,#1a120f 0%,#120b09 55%,#0a0605 100%);
  position:relative; overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 30px 70px rgba(0,0,0,.42); }
.promise::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:radial-gradient(60% 50% at 86% 0%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 60%); }
.promise > *{ position:relative; }

/* Reason-/Partner-Icons: sattere, dimensionalere Akzent-Kacheln */
.reason .r-ico{ box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 38%,transparent), 0 1px 0 rgba(255,255,255,.25) inset; }

/* ---- 6.7 · Mobile bleibt sauber: Showstopper skaliert, kein Overflow ----- */
@media (max-width:860px){
  .hero-cine .hero-visual{ aspect-ratio:4/3; }
  .hero-cine .display{ font-size:clamp(2.2rem,11vw,3.4rem); letter-spacing:-.038em; line-height:.96; }
  .hero-cine::before{ left:-12%; width:96%; opacity:.7; }
  .window::after{ display:none; } /* Vollbild-App braucht keine Fenster-Vignette */
  .hf-spec{ font-size:10px; gap:10px; }
}
@media (max-width:420px){
  .hero-cine .display{ font-size:2.15rem; }
  .hero-cine .lede{ font-size:1.04rem; }
}

/* ---- 6.8 · Reduced-Transparency: dekorative Licht-Schichten entfernen ----- */
@media (prefers-reduced-transparency: reduce){
  .window::after, .hero-cine::before, .promise::before{ display:none; }
  .hero-cine .hero-visual img{ animation:none; }
}


/* ===========================================================================
   v6 — AUTHENTIC LIQUID GLASS
   Ziel: überzeugendes, lichtbrechendes Material statt halbtransparenter Karten.
   Aufbau (Single Source of Truth, daher ganz am Ende):
     1. Tiefen-/Material-Token (chromatische Kante, Schatten-Staffelung)
     2. Reicheres Liquid-Wallpaper (verkauft das Blur dahinter)
     3. Layered-Edge-Karten: Lichtkante oben, Gegenglanz unten, Innen-Frost, Dicke
     4. Tiefes, beleuchtetes Dark-Glas mit klarer Kante
     5. Dynamischer Glanz (Glare + scroll-gekoppelter Wander-Highlight)
     6. Inspector/Dock/Energie/FAQ/Sheets kohärent
   Respektiert: --glass-blur, --glass-alpha, --radius, .no-spec, reduced-*.
   Performance: KEIN neues backdrop-blur auf Karten — alles über
   Gradient/box-shadow/Pseudo-Elemente. (Begründung siehe unten bei #3.)
   =========================================================================== */

:root{
  /* Chromatisch getönte Glaskante: kühl oben, warm unten */
  --edge-cool:rgba(214,232,255,.72);   /* oberer Lichtsaum (leicht bläulich) */
  --edge-warm:rgba(255,221,205,.40);   /* unterer Gegenglanz (leicht rötlich) */
  --edge-line:rgba(255,255,255,.55);   /* heller Innenrahmen (Glasdicke) */
  --edge-dark:rgba(14,22,40,.10);      /* unterer Konturschatten (Materialkante) */
  --frost:rgba(255,255,255,.30);       /* feiner Innen-Frost */
  /* Physikalisch plausible Schatten-Staffelung (Fenster > Panel > Karte) */
  --sh-card:0 1px 2px rgba(20,30,60,.06), 0 10px 24px -8px rgba(20,30,60,.16), 0 30px 60px -18px rgba(20,30,60,.18);
  --sh-card-hi:0 2px 4px rgba(20,30,60,.08), 0 18px 36px -10px rgba(20,30,60,.22), 0 44px 80px -24px rgba(20,30,60,.26);
  --sh-float:0 2px 6px rgba(20,30,60,.10), 0 24px 60px -14px rgba(20,30,60,.30);
}
html[data-theme="dark"]{
  --edge-cool:rgba(150,196,255,.30);   /* gedämpfter kühler Lichtsaum */
  --edge-warm:rgba(255,150,110,.20);   /* warmer Bodenglanz */
  --edge-line:rgba(255,255,255,.16);   /* sichtbare Glaskante im Dunkeln */
  --edge-dark:rgba(0,0,0,.45);
  --frost:rgba(255,255,255,.05);
  --sh-card:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -10px rgba(0,0,0,.55), 0 36px 70px -20px rgba(0,0,0,.6);
  --sh-card-hi:0 2px 6px rgba(0,0,0,.5), 0 22px 44px -12px rgba(0,0,0,.62), 0 52px 96px -26px rgba(0,0,0,.7);
  --sh-float:0 2px 8px rgba(0,0,0,.5), 0 28px 70px -16px rgba(0,0,0,.66);
}

/* ---- 2 · Reicheres Liquid-Wallpaper: mehr Farb-Tiefe & ein vierter Blob ---- */
.wallpaper{
  background:
    radial-gradient(46% 42% at 84% 2%,  rgba(231,61,37,.26) 0%, transparent 60%),
    radial-gradient(40% 50% at 12% 8%,  rgba(255,243,236,.98) 0%, transparent 55%),
    radial-gradient(34% 40% at 70% 40%, rgba(120,170,255,.16) 0%, transparent 62%),
    radial-gradient(60% 55% at 46% 116%, rgba(231,61,37,.14) 0%, transparent 60%),
    linear-gradient(165deg,#fbfaf7 0%,#f4ede9 36%,#efe2dc 68%,#e6d6cd 100%);
}
html[data-theme="dark"] .wallpaper{
  background:
    radial-gradient(46% 42% at 84% 2%,  rgba(231,61,37,.40) 0%, transparent 60%),
    radial-gradient(40% 50% at 10% 10%, rgba(70,46,40,.78) 0%, transparent 55%),
    radial-gradient(36% 42% at 72% 38%, rgba(60,110,210,.22) 0%, transparent 62%),
    radial-gradient(60% 55% at 46% 118%, rgba(196,42,20,.26) 0%, transparent 60%),
    linear-gradient(165deg,#181210 0%,#1e1613 44%,#120c0a 74%,#080605 100%);
}
.wallpaper .blob.b3{ opacity:.5; }
/* vierter, kühler Akzent-Blob für lichtbrechendes Spiel hinter dem Glas */
.wallpaper::after{ content:''; position:absolute; width:38vw; height:38vw; bottom:6%; right:8%;
  border-radius:50%; filter:blur(82px); opacity:.42; mix-blend-mode:screen; pointer-events:none;
  background:radial-gradient(circle,#7fa8ff,transparent 70%);
  animation:drift 34s var(--ease) infinite alternate; animation-delay:-6s; }
html[data-theme="dark"] .wallpaper::after{ opacity:.34; }
html.reduce-motion .wallpaper::after{ animation:none; }
@media (prefers-reduced-motion: reduce){ .wallpaper::after{ animation:none !important; } }

/* ---- 3 · Layered-Edge-Karten: Lichtkante oben + Gegenglanz unten + Frost ----
   Wir bringen KEIN backdrop-blur zurück (Perf-Regel): das Fenster blurrt die
   Tapete bereits, und panel-strong ist ~.74 deckend. Tiefe entsteht rein über
   einen mehrstufigen box-shadow (Innen-Lichtkante, Innenrahmen, äußere
   Staffelung) plus zwei Pseudo-Element-Gradients. ---- */
.glass{
  background:
    /* feiner Innen-Frost oben, Materialkörper darunter */
    linear-gradient(180deg, var(--frost) 0%, transparent 22%),
    var(--panel-strong);
  box-shadow:
    0 1px 0 var(--edge-cool) inset,            /* scharfe kühle Lichtkante oben */
    0 -1px 0 var(--edge-warm) inset,           /* warmer Gegenglanz unten */
    inset 0 0 0 1px var(--edge-line),          /* Glasdicke / Innenrahmen */
    0 1px 0 var(--edge-dark),                  /* untere Materialkontur */
    var(--sh-card);                            /* äußere Tiefenstaffelung */
}
/* Obere Specular-Strähne (diagonaler Lichtbrechungs-Streifen) bleibt über ::before */
.glass::before{
  background:linear-gradient(135deg,
    rgba(255,255,255,.66) 0%, rgba(255,255,255,.14) 26%, transparent 46%);
  opacity:.92; mix-blend-mode:plus-lighter;
}
/* Unterer Gegenglanz als eigene Schicht — gibt dem Glas „Boden" und Dicke.
   Liegt auf ::after; .glare-Karten haben ::after schon (Maus-Glanz) — dort
   ergänzen wir den Bodenglanz per Box-Shadow statt Pseudo (s.u.), damit der
   Maus-Glanz frei bleibt. */
.glass:not(.glare)::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:42%;
  border-radius:inherit; pointer-events:none; z-index:0;
  background:linear-gradient(0deg, var(--edge-warm) 0%, transparent 80%);
  opacity:.6; mix-blend-mode:screen;
}
html[data-theme="dark"] .glass:not(.glare)::after{ opacity:.5; }
/* Inhalt der Glaskarten sicher ÜBER den Bodenglanz heben (Text bleibt klar). */
.glass:not(.glare) > *{ position:relative; z-index:1; }

/* Karten-Hover: Lift + verstärkte Tiefe (Schatten-Staffelung bleibt kohärent) */
.card:hover, .tool:hover, .reason:hover, .partner:hover, .member:hover{
  box-shadow:
    0 1px 0 var(--edge-cool) inset,
    0 -1px 0 var(--edge-warm) inset,
    inset 0 0 0 1px var(--edge-line),
    0 1px 0 var(--edge-dark),
    var(--sh-card-hi);
}

/* ---- 4 · Tiefes, beleuchtetes Dark-Glas mit klarer Kante ---- */
html[data-theme="dark"] .glass{
  background:
    linear-gradient(180deg, var(--frost) 0%, transparent 24%),
    var(--panel-strong);
  border-color:rgba(255,255,255,.13);
}
html[data-theme="dark"] .glass::before{
  background:linear-gradient(135deg,
    rgba(190,214,255,.34) 0%, rgba(255,255,255,.06) 30%, transparent 50%);
  opacity:.74;
}

/* ---- 5 · Dynamischer Glanz ----
   Maus-Glare bekommt eine zarte chromatische Tönung (kühl), wirkt wie ein
   wandernder Lichtreflex auf poliertem Glas. */
.glare::after{
  background:
    radial-gradient(160px circle at var(--gx,50%) var(--gy,0%),
      rgba(214,232,255,.26), transparent 60%),
    radial-gradient(220px circle at var(--gx,50%) var(--gy,0%),
      rgba(255,255,255,.16), transparent 64%);
}
.glare:hover::after{ opacity:.9; }
html[data-theme="dark"] .glare::after{
  background:
    radial-gradient(170px circle at var(--gx,50%) var(--gy,0%),
      rgba(150,196,255,.20), transparent 60%),
    radial-gradient(230px circle at var(--gx,50%) var(--gy,0%),
      rgba(255,255,255,.10), transparent 64%);
}

/* Scroll-gekoppelter Wander-Highlight auf großen Panels — sehr subtil.
   JS setzt --beam (0..1 = Position von oben nach unten). Nur auf großen
   Glas-Flächen, nie auf kleinen Karten. */
.energy, .promise, .contact-box, .faq{ position:relative; }
.energy::before, .promise::after, .contact-box::before{
  content:''; position:absolute; left:0; right:0; top:0; height:100%;
  border-radius:inherit; pointer-events:none; z-index:1;
  background:linear-gradient(180deg,
    transparent calc(var(--beam,0.5) * 100% - 22%),
    rgba(255,255,255,.10) calc(var(--beam,0.5) * 100%),
    transparent calc(var(--beam,0.5) * 100% + 22%));
  mix-blend-mode:screen; opacity:.0; transition:opacity .5s var(--ease);
}
.has-beam .energy::before,
.has-beam .promise::after,
.has-beam .contact-box::before{ opacity:.9; }
html[data-theme="dark"] .energy::before,
html[data-theme="dark"] .promise::after,
html[data-theme="dark"] .contact-box::before{
  background:linear-gradient(180deg,
    transparent calc(var(--beam,0.5) * 100% - 22%),
    rgba(190,214,255,.10) calc(var(--beam,0.5) * 100%),
    transparent calc(var(--beam,0.5) * 100% + 22%));
}
/* promise nutzt ::after schon nicht — sicherstellen, dass es nicht den dunklen
   Karton überdeckt: nur Lichtschimmer, kein Hintergrund. */
.promise{ overflow:hidden; }
html.reduce-motion .has-beam .energy::before,
html.reduce-motion .has-beam .promise::after,
html.reduce-motion .has-beam .contact-box::before{ opacity:0; }

/* ---- 6 · Kohärenz über die übrigen Glas-Flächen ---- */
/* Fenster selbst: kühle Oberkante + warme Unterkante + tiefere Staffelung */
.window{
  box-shadow:
    0 1px 0 var(--edge-cool) inset,
    inset 0 0 0 1px var(--edge-line),
    var(--sh-float),
    0 40px 120px -30px rgba(20,30,60,.34);
}
html[data-theme="dark"] .window{
  box-shadow:
    0 1px 0 rgba(190,214,255,.18) inset,
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 40px 120px -28px rgba(0,0,0,.7);
}
/* Dock: schwebendes Glasstück mit klarer Lichtkante */
.dock{
  box-shadow:
    0 1px 0 var(--edge-cool) inset,
    inset 0 0 0 1px var(--edge-line),
    var(--sh-float);
}
html[data-theme="dark"] .dock{
  box-shadow:
    0 1px 0 rgba(190,214,255,.16) inset,
    inset 0 0 0 1px rgba(255,255,255,.07),
    0 22px 60px -12px rgba(0,0,0,.66);
}
/* FAQ-Container erbt das Material (Lichtkanten, Frost) */
.faq{
  background:
    linear-gradient(180deg, var(--frost) 0%, transparent 18%),
    var(--panel-strong);
  box-shadow:
    0 1px 0 var(--edge-cool) inset,
    inset 0 0 0 1px var(--edge-line),
    var(--sh-card);
}
/* Mobile Bottom-Sheets: oberer Lichtsaum an der Greif-Kante */
@media (max-width:860px){
  .appsheet{
    box-shadow:
      0 1px 0 var(--edge-cool) inset,
      inset 0 0 0 1px var(--edge-line),
      0 -24px 64px rgba(20,30,60,.36) !important;
  }
  html[data-theme="dark"] .appsheet{
    box-shadow:
      0 1px 0 rgba(190,214,255,.16) inset,
      inset 0 0 0 1px rgba(255,255,255,.07),
      0 -24px 64px rgba(0,0,0,.62) !important;
  }
}
/* Energie-Widget bekommt extra „Dicke" (es ist das Schaustück des Hero) */
.energy{
  box-shadow:
    0 1px 0 var(--edge-cool) inset,
    0 -1px 0 var(--edge-warm) inset,
    inset 0 0 0 1px var(--edge-line),
    0 1px 0 var(--edge-dark),
    var(--sh-card-hi);
}

/* ---- A11y / Inspector-Treue ----
   .no-spec (Specular-Schalter AUS) muss das gesamte neue Material flach machen:
   keine chromatischen Kanten, kein Frost, kein Wander-Highlight. */
html.no-spec .glass,
html.no-spec .energy,
html.no-spec .faq,
html.no-spec .window,
html.no-spec .dock,
html.no-spec .appsheet{
  background:var(--panel-strong) !important;
  box-shadow:var(--sh-card) !important;
}
html.no-spec .glass:not(.glare)::after,
html.no-spec .energy::before,
html.no-spec .promise::after,
html.no-spec .contact-box::before{ display:none !important; }

/* reduced-transparency MUSS das Material flach/opak schalten (harte Regel #4).
   Alle Glanz-/Frost-/Kanten-Schichten raus, satte Fläche, ruhiger Schatten. */
@media (prefers-reduced-transparency: reduce){
  .glass, .energy, .faq, .window, .dock, .appsheet, .btn-glass{
    background:var(--panel-strong) !important;
    box-shadow:0 1px 2px rgba(20,30,60,.10), 0 8px 24px rgba(20,30,60,.12) !important;
  }
  html[data-theme="dark"] .glass,
  html[data-theme="dark"] .energy,
  html[data-theme="dark"] .faq,
  html[data-theme="dark"] .window,
  html[data-theme="dark"] .dock,
  html[data-theme="dark"] .appsheet{
    box-shadow:0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.5) !important;
  }
  .glass::before, .glass:not(.glare)::after, .glare::after,
  .energy::before, .promise::after, .contact-box::before,
  .wallpaper::after{ display:none !important; }
}

/* ===========================================================================
   v8 — Ansicht-Umschalter (Normale Website ↔ App-Ansicht)
   =========================================================================== */
.view-seg{ display:flex; align-items:center; gap:2px; padding:3px; margin-right:2px;
  background:var(--chip); border:1px solid var(--hair); border-radius:9px; }
.view-seg .vs-btn{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px;
  border:none; background:transparent; border-radius:6px; color:var(--ink-soft);
  font:600 11.5px/1 var(--font-ui); white-space:nowrap; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease); }
.view-seg .vs-btn i{ font-size:13px; }
.view-seg .vs-btn.on{ background:var(--accent-strong); color:#fff;
  box-shadow:0 2px 6px color-mix(in srgb,var(--accent) 45%,transparent); }
.view-seg .vs-btn:not(.on):hover{ color:var(--ink); background:var(--field); }
/* Mobile App-Bar: App ist aktuell → nur den Ausgang „Normal" als kompakten Icon-Button */
@media (max-width:860px){
  .view-seg{ padding:0; gap:0; margin-right:0; border:none; background:transparent; }
  .view-seg .vs-btn span{ display:none; }
  .view-seg .vs-btn.on{ display:none; }
  .view-seg .vs-btn:not(.on){ width:34px; height:32px; padding:0; justify-content:center; border-radius:8px;
    background:var(--chip); border:1px solid var(--hair); color:var(--ink-soft); }
  .view-seg .vs-btn i{ font-size:15px; }
}