/* ===== wulutapps – style.css (Hell- & Dunkelmodus) ===== */

/* Selbst gehostete Schriften (werden von setup.sh nach /fonts geladen) */
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- Farben: HELL (Standard) ---------- */
:root{
  --a:#FFD43B;              /* Logo-Gelb */
  --a-text:#9A6B00;         /* Gelb als Textfarbe – lesbar auf hell */
  --navy:#0E1530;
  --bg:#FFFCF3;
  --bg2:#FFF4CF;
  --card:#FFFFFF;
  --card2:#FFF9E6;
  --text:#0E1530;
  --soft:#353E62;
  --muted:#565F80;
  --line:rgba(14,21,48,.10);
  --line-strong:rgba(14,21,48,.18);
  --header:rgba(255,252,243,.78);
  --grid:rgba(14,21,48,.06);
  --ghost:rgba(14,21,48,.05);
  --frame:#0E1530;
  --screen:#F6F7FB;
  --shadow:0 30px 70px rgba(14,21,48,.16);
  --shadow-sm:0 10px 30px rgba(14,21,48,.08);
  --blob1:rgba(255,212,59,.55);
  --blob2:rgba(163,145,255,.38);
  --blob3:rgba(108,240,194,.35);
  --grad:linear-gradient(90deg,#E6A700,#FF6A1A,#E8338A,#7A5CFF,#0FA878,#E6A700);
  --marq:#0E1530;--marq-text:#F2F4FA;
  --chip:rgba(14,21,48,.06);
  --input:#FFFFFF;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  color-scheme:light;
}
/* ---------- Farben: DUNKEL (etwas heller als vorher) ---------- */
:root[data-theme="dark"]{
  --a-text:#FFD43B;
  --bg:#131B3B;
  --bg2:#1A2350;
  --card:#1D2757;
  --card2:#232E63;
  --text:#F5F7FD;
  --soft:#D3D8EA;
  --muted:#AEB6D1;
  --line:rgba(255,255,255,.11);
  --line-strong:rgba(255,255,255,.2);
  --header:rgba(19,27,59,.78);
  --grid:rgba(255,255,255,.06);
  --ghost:rgba(255,255,255,.07);
  --frame:#0B1130;
  --screen:#F6F7FB;
  --shadow:0 30px 70px rgba(0,0,0,.45);
  --shadow-sm:0 10px 30px rgba(0,0,0,.25);
  --blob1:rgba(255,212,59,.34);
  --blob2:rgba(163,145,255,.42);
  --blob3:rgba(108,240,194,.26);
  --grad:linear-gradient(90deg,#FFD43B,#FF8A3D,#FF5FA2,#A391FF,#6CF0C2,#FFD43B);
  --marq:#0B1130;--marq-text:#D3D8EA;
  --chip:rgba(255,255,255,.08);
  --input:#FFFFFF;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
@supports (overflow:clip){html{overflow-x:clip}}
body{margin:0;background:var(--bg);color:var(--text);font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif;font-size:17px;line-height:1.55;overflow-x:hidden;transition:background-color .4s ease,color .4s ease}
main{overflow-x:hidden}
@supports (overflow:clip){main{overflow-x:clip}}
a{color:var(--a-text)}
img{max-width:100%}
input,button,textarea{font:inherit}
input:focus,button:focus-visible,a:focus-visible{outline:3px solid var(--a);outline-offset:3px}
::selection{background:var(--a);color:var(--navy)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}
.display{font-family:var(--display);font-weight:800}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--a-text);letter-spacing:1.5px;text-transform:uppercase}
.eyebrow::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--a)}
.h2{font-family:var(--display);font-weight:800;font-size:58px;line-height:1.03;letter-spacing:-1.5px;margin:14px 0 14px;color:var(--text)}
.lead{color:var(--muted);font-size:19px;max-width:620px;margin:0 0 30px}
.soft{color:var(--soft)}
.muted{color:var(--muted)}

/* Körnung für mehr Tiefe */
.grain{position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .grain{mix-blend-mode:screen;opacity:.04}

/* ---------- Theme-Wechsel als Kreis ---------- */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:999}

/* ---------- Header ---------- */
.header{position:sticky;top:0;z-index:50;background:var(--header);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line);transition:background-color .4s}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo-word{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.5px}
.logo-grid{display:grid;grid-template-columns:repeat(2,18px);gap:3px;font-family:var(--display);font-weight:800;font-size:13px;line-height:1}
.logo-grid span{width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--text)}
.logo-grid .s{background:var(--a);color:var(--navy);border-radius:5px}
.nav{display:flex;gap:6px;flex-wrap:wrap;font-size:15px;font-weight:500}
.nav a{color:var(--soft);text-decoration:none;padding:8px 12px;border-radius:999px;transition:background .2s,color .2s}
.nav a:hover{color:var(--text);background:var(--ghost)}
.head-actions{display:flex;align-items:center;gap:10px}
.progress{position:absolute;left:0;bottom:-1px;height:3px;width:100%;background:var(--grad);background-size:300% 100%;transform-origin:left;transform:scaleX(0);animation:wa-grad 6s linear infinite}

/* Umschalter Hell/Dunkel */
.theme-btn{position:relative;width:64px;height:36px;border-radius:999px;border:1px solid var(--line-strong);background:var(--ghost);cursor:pointer;padding:0;flex:none}
.theme-btn .knob{position:absolute;top:3px;left:3px;width:28px;height:28px;border-radius:50%;background:var(--a);display:flex;align-items:center;justify-content:center;transition:transform .45s cubic-bezier(.7,-0.4,.3,1.4);box-shadow:0 4px 12px rgba(0,0,0,.2)}
:root[data-theme="dark"] .theme-btn .knob{transform:translateX(28px);background:#C9D2FF}
.theme-btn svg{position:absolute;transition:opacity .3s,transform .45s}
.theme-btn .sun{opacity:1}
.theme-btn .moon{opacity:0;transform:rotate(-90deg) scale(.5)}
:root[data-theme="dark"] .theme-btn .sun{opacity:0;transform:rotate(90deg) scale(.5)}
:root[data-theme="dark"] .theme-btn .moon{opacity:1;transform:none}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;border-radius:16px;padding:16px 26px;min-height:52px;border:0;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .15s ease,box-shadow .2s;will-change:transform}
.btn:hover{filter:brightness(1.05)}
.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:wa-shine 4.5s ease-in-out infinite;pointer-events:none}
.btn-primary{background:var(--a);color:var(--navy);box-shadow:0 10px 30px rgba(255,190,0,.35)}
.btn-primary:hover{color:var(--navy);box-shadow:0 16px 40px rgba(255,190,0,.5)}
.btn-ghost{background:var(--ghost);color:var(--text);border:1px solid var(--line-strong)}.btn-ghost:hover{color:var(--text)}
.btn-dark{background:var(--navy);color:#fff}.btn-dark:hover{color:#fff}
.btn-sm{font-size:15px;padding:10px 18px;border-radius:999px;min-height:44px}
.btn-store{background:var(--navy);color:#fff;padding:10px 18px;border-radius:14px;min-height:54px}
:root[data-theme="dark"] .btn-store{background:#fff;color:var(--navy)}
.btn-store:hover{color:inherit}
.btn-store small{display:block;font-size:11px;font-weight:500;opacity:.8}
.btn-store b{display:block;font-size:16px;line-height:1.1}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(ellipse 90% 60% at 50% 0%,var(--bg2),transparent 70%)}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 25%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 30%,#000 25%,transparent 72%)}
.blob{position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none}
.glow{position:absolute;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,var(--blob1),transparent 60%);opacity:.5;transform:translate(-50%,-50%);pointer-events:none;transition:left .35s ease-out,top .35s ease-out;left:50%;top:30%}
.spark{position:absolute;border-radius:50%;animation:wa-twinkle 3s ease-in-out infinite}
.hero-in{position:relative;padding-top:76px;padding-bottom:40px;text-align:center}
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border:1px solid var(--line-strong);border-radius:999px;font-size:14px;font-weight:500;color:var(--soft);background:var(--card);box-shadow:var(--shadow-sm)}
.badge b{background:var(--a);color:var(--navy);padding:2px 9px;border-radius:999px;font-size:12px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--a);display:inline-block;animation:wa-pulse 2s ease-out infinite}
.h1{font-family:var(--display);font-weight:800;font-size:88px;line-height:.98;letter-spacing:-3px;margin:26px auto 22px;max-width:960px;color:var(--text)}
.h1 .w{display:inline-block;opacity:0;transform:translateY(60%) rotate(4deg);filter:blur(10px);animation:wa-word .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 90ms + 150ms)}
.words{display:inline-block;height:1.1em;overflow:hidden;vertical-align:bottom;min-width:4.6em;text-align:center}
.words-in{display:flex;flex-direction:column;animation:wa-words 8s cubic-bezier(.75,0,.2,1) infinite}
.words-in span{height:1.1em;display:block}
.grad{background:var(--grad);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:wa-grad 8s linear infinite}
.hero-text{font-size:20px;color:var(--soft);margin:0 auto 32px;max-width:600px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.center{justify-content:center}
.fade-up{opacity:0;animation:wa-in .9s cubic-bezier(.2,.8,.2,1) forwards}

.fan{position:relative;height:580px;margin-top:56px;display:flex;justify-content:center;align-items:flex-start;transform-style:preserve-3d;transition:transform .3s ease-out}
.ring{position:absolute;top:120px;width:300px;height:300px;border-radius:50%;animation:wa-ring 2.8s ease-out infinite}
.orbit-line{position:absolute;width:560px;height:560px;border-radius:50%;border:1px dashed var(--line-strong);top:-10px;animation:wa-spin 14s linear infinite}
.phone{border-radius:44px;background:var(--screen);border:10px solid var(--frame);box-shadow:var(--shadow);overflow:hidden;color:var(--navy);text-align:left}
.phone-head{padding:32px 18px 18px}
.phone-head .t{font-family:var(--display);font-weight:800;font-size:20px}
.phone-head .s{font-size:11px;opacity:.85}
.phone-body{padding:14px;display:flex;flex-direction:column;gap:9px;font-size:13px}
.item{background:#fff;border-radius:12px;padding:11px;display:flex;gap:9px;align-items:center;box-shadow:0 2px 8px rgba(14,21,48,.06);color:var(--navy)}
.box{width:18px;height:18px;border-radius:6px;border:2px solid #5B8CFF;display:inline-block}
.bubble-l{align-self:flex-start;background:#fff;padding:10px 13px;border-radius:16px 16px 16px 4px;max-width:82%;box-shadow:0 2px 8px rgba(14,21,48,.08)}
.bubble-r{align-self:flex-end;background:var(--navy);color:#fff;padding:10px 13px;border-radius:16px 16px 4px 16px;max-width:82%}
.phone-left{position:absolute;left:calc(50% - 330px);top:40px;width:240px;height:480px;border-radius:38px;border-width:9px;animation:wa-floatL 7s ease-in-out infinite}
.phone-right{position:absolute;left:calc(50% + 90px);top:40px;width:240px;height:480px;border-radius:38px;border-width:9px;animation:wa-floatR 8s ease-in-out infinite}
.phone-center{position:relative;width:270px;height:540px;z-index:2;animation:wa-float 6s ease-in-out infinite}
.chart{background:#fff;border-radius:16px;padding:14px;height:170px;display:flex;align-items:flex-end;gap:8px}
.bar{flex:1;background:#2FC79A;border-radius:6px;transform-origin:bottom;animation:wa-grow 5s ease-in-out infinite}
.track{height:6px;background:#E6E9F2;border-radius:99px;margin-top:8px;overflow:hidden}
.track i{display:block;height:100%;background:#2FC79A;animation:wa-fill 4s ease-out infinite}
.app-icon-mini{width:36px;height:36px;border-radius:11px;background:var(--a);display:inline-flex;align-items:center;justify-content:center;color:var(--navy);font-family:var(--display);font-weight:800}
.float-tag{position:absolute;z-index:3;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:18px;padding:12px 16px;box-shadow:var(--shadow);font-size:14px;text-align:left;display:flex;gap:10px;align-items:center}
.float-tag .ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}

.pop1{animation:wa-pop 8s ease-in-out infinite}
.pop2{animation:wa-pop 8s ease-in-out infinite;animation-delay:.8s;opacity:0}
.pop3{animation:wa-pop 8s ease-in-out infinite;animation-delay:1.6s;opacity:0}
.pop4{animation:wa-pop 8s ease-in-out infinite;animation-delay:2.4s;opacity:0}
.tile{animation:wa-tile 5s ease-in-out infinite}
.check{animation:wa-check 3s ease-out infinite}
.float{animation:wa-float 6s ease-in-out infinite}
.float2{animation:wa-float2 7s ease-in-out infinite}
.spin{animation:wa-spin 14s linear infinite}

/* ---------- Laufbänder ---------- */
.marquee{background:var(--marq);padding:20px 0;overflow:hidden;white-space:nowrap;transform:rotate(1.5deg) scale(1.05);margin-top:20px;position:relative;z-index:2}
.marquee-in{display:inline-flex;gap:48px;font-family:var(--display);font-weight:700;font-size:24px;color:var(--marq-text);animation:wa-marquee 30s linear infinite}
.marquee-in b{color:var(--a)}
.marquee2{background:var(--a);color:var(--navy);padding:18px 0;overflow:hidden;white-space:nowrap;transform:rotate(-2deg) scale(1.05);margin-top:-6px;box-shadow:0 20px 50px rgba(255,190,0,.3);position:relative;z-index:1}
.marquee2-in{display:inline-flex;gap:40px;font-family:var(--display);font-weight:800;font-size:30px;text-transform:uppercase;letter-spacing:1px;animation:wa-marquee-r 24s linear infinite}

/* ---------- App-Familie (Orbit) ---------- */
.split{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.split > .main{flex:999 1 420px;min-width:0}
.split > .side{flex:1 1 340px;min-width:0;display:flex;justify-content:center}
.orbit-box{position:relative;width:100%;max-width:420px;aspect-ratio:1}
.orbit-ring{position:absolute;inset:0;border-radius:50%;border:2px dashed var(--line-strong);animation:wa-spin 18s linear infinite}
.orbit-ring2{position:absolute;inset:-8%;border-radius:50%;border:1px solid var(--line);animation:wa-spin 40s linear infinite reverse}
.orbit-inner{position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle,var(--blob1),transparent 70%)}
.orbit-core{position:absolute;left:50%;top:50%;width:136px;height:136px;margin:-68px 0 0 -68px;border-radius:38px;background:var(--card);border:1px solid var(--line-strong);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:var(--shadow);animation:wa-pulse 2s ease-out infinite}
.orbit-core .w{font-family:var(--display);font-weight:800;font-size:30px;color:var(--text)}
.orbit-core .a{font-family:var(--display);font-weight:800;font-size:15px;background:var(--a);color:var(--navy);border-radius:6px;padding:1px 8px}
.orbit{position:absolute;inset:0;animation:wa-orbit 30s linear infinite}
.orbit-slot{position:absolute;width:80px;height:80px;margin:-40px 0 0 -40px}
.orbit-icon{width:100%;height:100%;border-radius:24px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:32px;animation:wa-counter 30s linear infinite}

/* ---------- Gestapelte Karten (Scroll-Story) ---------- */
.stack{display:flex;flex-direction:column;gap:28px;margin-top:40px;padding-bottom:12vh}
.stack-card{position:sticky;border-radius:36px;padding:48px;min-height:340px;display:flex;flex-wrap:wrap;gap:36px;align-items:center;box-shadow:var(--shadow);overflow:hidden;color:var(--navy)}
.stack-card:nth-child(1){top:96px;background:linear-gradient(135deg,#FFE27A,#FFD43B)}
.stack-card:nth-child(2){top:120px;background:linear-gradient(135deg,#C9D6FF,#8FA9FF)}
.stack-card:nth-child(3){top:144px;background:linear-gradient(135deg,#B6F5DE,#6CF0C2)}
.stack-card .num{font-family:var(--display);font-weight:800;font-size:140px;line-height:.8;opacity:.18;position:absolute;right:30px;top:20px}
.stack-card h3{font-family:var(--display);font-weight:800;font-size:46px;letter-spacing:-1px;line-height:1.02;margin:10px 0 12px}
.stack-card p{font-size:19px;margin:0;max-width:480px;color:#1E2547}
.stack-card .tag{display:inline-block;background:var(--navy);color:#fff;font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px}
.stack-visual{flex:1 1 260px;min-width:0;display:flex;justify-content:center;position:relative}
.stack-text{flex:999 1 380px;min-width:0;position:relative}

/* ---------- Showroom ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.tab{display:flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;border-radius:20px;font-size:16px;cursor:pointer;min-height:60px;transition:all .25s;background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.tab:hover{transform:translateY(-2px)}
.tab .ic{width:40px;height:40px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:18px}
.tab .nm{display:block;font-weight:700;text-align:left}
.tab .ct{display:block;font-size:13px;opacity:.75;text-align:left}
.panel{border-radius:36px;padding:44px;display:flex;flex-wrap:wrap;gap:40px;align-items:center;transition:background .4s,border-color .4s;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.panel-text{flex:999 1 440px;min-width:0}
.panel-phone{flex:1 1 300px;min-width:0;display:flex;justify-content:center}
.big-icon{width:76px;height:76px;flex:none;border-radius:22px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:34px}
.feat{display:flex;gap:12px;align-items:center;color:var(--text)}
.feat-dot{flex:none;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.anim-in{animation:wa-in .55s cubic-bezier(.2,.8,.2,1) both}

/* ---------- Karten mit Spotlight + Leuchtrand ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{--mx:50%;--my:50%;position:relative;isolation:isolate;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:28px;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;color:var(--text);text-decoration:none;display:block;box-shadow:var(--shadow-sm);overflow:hidden}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(400px circle at var(--mx) var(--my),var(--blob1),transparent 45%);opacity:0;transition:opacity .3s}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--ang),transparent 0 60%,#FFD43B,#FF8A3D,#FF5FA2,transparent 95%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .3s;animation:wa-ang 3s linear infinite;pointer-events:none}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow);color:var(--text)}
.card:hover::before,.card:hover::after{opacity:1}
.card h3{font-family:var(--display);font-size:23px;margin:0 0 8px}
.card p{margin:0;color:var(--muted)}
.card-ic{width:54px;height:54px;border-radius:16px;background:var(--a);display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.card:hover .card-ic{transform:rotate(-8deg) scale(1.12)}
.app-card-ic{width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:28px;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.card:hover .app-card-ic{transform:rotate(-8deg) scale(1.1)}
.chip{background:var(--chip);padding:6px 11px;border-radius:999px;font-size:13px;font-weight:700}

/* ---------- Demnächst ---------- */
.soon{background:linear-gradient(135deg,#FFE27A,#FFD43B 50%,#FFC21A);color:var(--navy);border-radius:40px;padding:52px;display:flex;flex-wrap:wrap;gap:40px;align-items:center;position:relative;overflow:hidden;box-shadow:0 30px 80px rgba(255,190,0,.3)}
.soon a{color:var(--navy)}
.soon-badge{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:var(--a);font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px}
.soon-form{display:flex;gap:10px;flex-wrap:wrap;max-width:540px}
.soon-form input[type=email]{flex:1 1 240px;background:#fff;border:2px solid var(--navy);border-radius:14px;padding:14px 16px;font-size:16px;color:var(--navy);min-height:54px}
.soon-form .btn{border-radius:14px;padding:14px 22px;min-height:54px}
.soon-ok{background:var(--navy);color:#fff;border-radius:18px;padding:16px 20px;display:inline-flex;gap:12px;align-items:center;font-weight:700}
.soon-err{color:#8A1C1C;font-weight:700;margin-top:10px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mystery{width:190px;height:190px;border-radius:52px;background:var(--navy);display:flex;align-items:center;justify-content:center;box-shadow:0 30px 60px rgba(14,21,48,.35);font-family:var(--display);font-weight:800;font-size:96px;color:var(--a)}

/* ---------- Über ---------- */
.about{background:var(--card);border:1px solid var(--line);border-radius:36px;padding:44px;display:flex;flex-wrap:wrap;gap:40px;align-items:center;box-shadow:var(--shadow-sm)}
.photo{width:240px;height:240px;border-radius:40px;background:var(--card2);border:2px dashed var(--a);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:15px;transform:rotate(-3deg);overflow:hidden;transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.photo:hover{transform:rotate(2deg) scale(1.03)}
.photo img{width:100%;height:100%;object-fit:cover}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:40px;color:var(--a-text)}
.stat span{color:var(--muted);font-size:14px}

/* ---------- Gründer / Über mich ---------- */
.founder{padding:52px;gap:56px;position:relative;overflow:hidden}
.founder::before{content:"";position:absolute;width:420px;height:420px;left:-120px;top:-120px;border-radius:50%;background:radial-gradient(circle,var(--blob1),transparent 65%);filter:blur(30px);pointer-events:none;animation:wa-aurora1 16s ease-in-out infinite}
.founder > *{position:relative}
.founder-pic-col{flex:1 1 300px;min-width:0;display:flex;justify-content:center}
.founder-pic{position:relative;width:300px;height:300px;flex:none}
.founder-ring{position:absolute;inset:-12px;border-radius:50%;background:conic-gradient(from var(--ang),#FFD43B,#FF8A3D,#FF5FA2,#A391FF,#6CF0C2,#FFD43B);animation:wa-ang 6s linear infinite;filter:blur(1px)}
.founder-frame{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--card2);border:6px solid var(--card);display:flex;align-items:center;justify-content:center;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.founder-pic:hover .founder-frame{transform:scale(1.04) rotate(-2deg)}
.founder-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;position:relative;z-index:1}
.founder-initials{position:absolute;font-family:var(--display);font-weight:800;font-size:90px;color:var(--a-text)}
.founder-hi{position:absolute;left:-14px;top:24px;background:var(--a);color:var(--navy);font-family:var(--display);font-weight:800;font-size:22px;padding:10px 18px;border-radius:20px 20px 20px 4px;box-shadow:var(--shadow);z-index:2}
.founder-badge{position:absolute;right:-22px;bottom:-10px;width:120px;height:120px;z-index:2}
.founder-badge > svg{position:absolute;inset:0;animation:wa-spin 16s linear infinite;background:var(--card);border-radius:50%;box-shadow:var(--shadow)}
.founder-badge text{font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:1.6px;fill:var(--text)}
.founder-badge > span{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--a);display:flex;align-items:center;justify-content:center;animation:wa-pulse 2s ease-out infinite}
.founder-quote{margin:0 0 22px;padding:20px 24px;border-radius:20px;background:var(--card2);border:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:21px;line-height:1.35;color:var(--text);position:relative}
.founder-quote::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:4px;background:var(--a)}
.founder-sign{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.founder-sign b{display:block;font-family:var(--display);font-size:22px}
.founder-sign span{color:var(--muted);font-size:14px}
.founder-chip{display:inline-flex;align-items:center;gap:6px;color:var(--soft);padding:8px 13px}
@media (max-width:860px){
  .founder{padding:28px;gap:40px}
  .founder-pic{width:230px;height:230px}
  .founder-badge{width:96px;height:96px;right:-14px}
  .founder-badge > svg{width:96px;height:96px}
  .founder-initials{font-size:70px}
}

/* ---------- Großes Finale ---------- */
.finale{position:relative;border-radius:44px;padding:80px 30px;text-align:center;overflow:hidden;background:var(--navy);color:#fff}
.finale .h2{color:#fff;font-size:64px}
.finale p{color:#D3D8EA}
.finale .blob{opacity:.8}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line)}
.footer-in{padding-top:30px;padding-bottom:30px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;font-size:14px;color:var(--muted)}
.footer a{color:var(--muted)}.footer a:hover{color:var(--text)}

/* ---------- Legal-Seiten ---------- */
.legal{max-width:800px;margin:0 auto;padding:60px 20px 100px}
.legal h1{font-family:var(--display);font-size:48px;margin:0 0 24px}
.legal h2{font-family:var(--display);font-size:24px;margin:32px 0 8px}
.legal p,.legal li{color:var(--soft)}

/* ---------- Scroll-Reveal ---------- */
.reveal{opacity:0;translate:0 60px;scale:.96;transition:opacity .9s cubic-bezier(.2,.8,.2,1),translate .9s cubic-bezier(.2,.8,.2,1),scale .9s cubic-bezier(.2,.8,.2,1)}
.reveal.is-in{opacity:1;translate:0 0;scale:1}

/* ---------- Keyframes ---------- */
@keyframes wa-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes wa-float2{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@keyframes wa-floatL{0%,100%{transform:translateY(30px) rotate(-10deg)}50%{transform:translateY(16px) rotate(-9deg)}}
@keyframes wa-floatR{0%,100%{transform:translateY(30px) rotate(10deg)}50%{transform:translateY(18px) rotate(11deg)}}
@keyframes wa-pop{0%,6%{opacity:0;transform:translateY(12px) scale(.95)}12%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes wa-grow{0%,10%{transform:scaleY(.15)}40%,90%{transform:scaleY(1)}100%{transform:scaleY(.15)}}
@keyframes wa-fill{0%{width:5%}60%,100%{width:100%}}
@keyframes wa-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wa-marquee-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes wa-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,212,59,.6)}50%{box-shadow:0 0 0 12px rgba(255,212,59,0)}}
@keyframes wa-tile{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-12deg) scale(1.08)}86%{transform:rotate(6deg)}}
@keyframes wa-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes wa-word{to{opacity:1;transform:none;filter:none}}
@keyframes wa-spin{to{transform:rotate(360deg)}}
@keyframes wa-check{0%,30%{transform:scale(0)}45%{transform:scale(1.2)}55%,100%{transform:scale(1)}}
@keyframes wa-grad{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes wa-words{0%,20%{transform:translateY(0)}25%,45%{transform:translateY(-25%)}50%,70%{transform:translateY(-50%)}75%,100%{transform:translateY(-75%)}}
@keyframes wa-twinkle{0%,100%{opacity:.15;transform:scale(.5)}50%{opacity:1;transform:scale(1.3)}}
@keyframes wa-orbit{to{transform:rotate(360deg)}}
@keyframes wa-counter{to{transform:rotate(-360deg)}}
@keyframes wa-shine{0%,65%{left:-60%}100%{left:130%}}
@keyframes wa-ring{0%{transform:scale(.7);opacity:.8}100%{transform:scale(1.7);opacity:0}}
@keyframes wa-aurora1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(120px,60px) scale(1.25)}}
@keyframes wa-aurora2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-140px,-40px) scale(.9)}}
@keyframes wa-ang{to{--ang:360deg}}

/* ---------- Mobil ---------- */
@media (max-width:860px){
  .hide-m{display:none!important}
  .h1{font-size:48px;letter-spacing:-1.5px}
  .h2,.finale .h2{font-size:38px}
  .panel,.soon,.about,.stack-card{padding:28px}
  .stack-card h3{font-size:32px}
  .stack-card .num{font-size:90px}
  .orbit-box{max-width:280px}
  .orbit-slot{width:60px;height:60px;margin:-30px 0 0 -30px}
  .orbit-icon{font-size:24px;border-radius:18px}
  .float-tag{display:none}
  .marquee-in{font-size:18px}.marquee2-in{font-size:22px}
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pop2,.pop3,.pop4,.reveal,.h1 .w,.fade-up{opacity:1!important;translate:none!important;scale:1!important;filter:none!important;transform:none!important}
}

/* ---------- Kopfzeile auf dem Handy in einer Zeile ---------- */
@media (max-width:860px){.header-in{flex-wrap:nowrap}}
@media (max-width:480px){.hide-xs{display:none!important}.logo-word{font-size:23px}}

/* =====================================================================
   WER STECKT DAHINTER – große animierte Vorstellung
   ===================================================================== */
.intro{display:flex;flex-wrap:wrap;gap:40px 60px;align-items:center;padding-top:130px;padding-bottom:30px}
.intro-stage{--px:0;--py:0;--sy:0;position:relative;flex:1 1 440px;min-width:0;height:640px;display:flex;justify-content:center;align-items:flex-end}
.intro-stage > [data-depth]{translate:calc(var(--px) * var(--dep,0) * 34px) calc(var(--py) * var(--dep,0) * 24px + var(--sy) * var(--dep,0) * -60px);transition:translate .25s ease-out}
.intro-text{flex:1 1 420px;min-width:0}

/* Riesiger Name im Hintergrund */
.intro-bigword{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:200%;display:flex;gap:60px;white-space:nowrap;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
.intro-bigword span{font-family:var(--display);font-weight:800;font-size:220px;line-height:1;letter-spacing:-6px;color:transparent;-webkit-text-stroke:2px var(--line-strong);animation:wa-marquee 22s linear infinite}

/* Sonne hinter dem Foto */
.intro-sun{position:absolute;left:50%;bottom:90px;width:440px;height:440px;margin-left:-220px}
.intro-sun-core{position:absolute;inset:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF3B0,#FFD43B 45%,#FFB800);box-shadow:0 40px 100px rgba(255,190,0,.45)}
.intro-sun-ring{position:absolute;inset:-10px;border-radius:50%;background:conic-gradient(from var(--ang),#FFD43B,#FF8A3D,#FF5FA2,#A391FF,#6CF0C2,#FFD43B);animation:wa-ang 8s linear infinite;-webkit-mask:radial-gradient(circle,transparent 66%,#000 67%);mask:radial-gradient(circle,transparent 66%,#000 67%)}
:root[data-theme="dark"] .intro-sun-core{box-shadow:0 40px 120px rgba(255,190,0,.35)}
.intro-dots{position:absolute;right:4%;top:12%;width:140px;height:140px;background-image:radial-gradient(var(--line-strong) 2px,transparent 2.5px);background-size:18px 18px;border-radius:20px}

/* Foto */
.intro-photo{position:relative;z-index:2;width:400px;height:610px;display:flex;align-items:flex-end;justify-content:center;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
.intro-photo img{width:100%;height:auto;display:block}
.intro-photo::after{content:"";position:absolute;left:10%;right:10%;bottom:4%;height:60px;border-radius:50%;background:radial-gradient(ellipse,rgba(14,21,48,.25),transparent 70%);z-index:-1}

/* Schwebende Karten */
.intro-tag{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;background:var(--card);color:var(--text);border:1px solid var(--line);padding:10px 16px 10px 10px;border-radius:18px;font-weight:700;font-size:15px;box-shadow:var(--shadow);white-space:nowrap}
.intro-tag .ic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:none}
.intro-tag.t1{left:0;top:110px}
.intro-tag.t2{right:0;top:250px}
.intro-tag.t3{left:4%;bottom:170px}
.intro-appicon{position:absolute;z-index:3;width:58px;height:58px;border-radius:18px;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:24px;box-shadow:var(--shadow)}
.intro-appicon.a1{right:14%;top:70px}
.intro-appicon.a2{right:2%;bottom:200px;width:48px;height:48px;font-size:20px;border-radius:15px}
.intro-appicon.a3{left:12%;top:300px;width:44px;height:44px;font-size:18px;border-radius:14px}
.intro-name{position:absolute;z-index:4;left:50%;bottom:30px;transform:translateX(-50%);background:var(--navy);color:#fff;border-radius:22px;padding:14px 24px;text-align:center;box-shadow:var(--shadow);white-space:nowrap}
.intro-name b{display:block;font-family:var(--display);font-size:22px;line-height:1.1}
.intro-name span{font-size:13px;color:#FFD43B;font-weight:700;letter-spacing:.5px}

/* Liste */
.intro-points{list-style:none;padding:0;margin:0 0 30px;display:flex;flex-direction:column;gap:12px}
.intro-points li{display:flex;align-items:center;gap:14px;font-weight:500;color:var(--text);font-size:17px}
.intro-points .n{flex:none;width:34px;height:34px;border-radius:11px;background:var(--a);color:var(--navy);font-family:var(--display);font-weight:800;display:flex;align-items:center;justify-content:center}

/* Auftritts-Animation (startet, sobald der Bereich ins Bild scrollt) */
.intro-stage .intro-photo img{transform:translateY(60%) scale(.9);opacity:0}
.intro-stage .intro-sun-core,.intro-stage .intro-sun-ring{transform:scale(.2);opacity:0}
.intro-stage .intro-tag,.intro-stage .intro-appicon{opacity:0;transform:scale(.4) translateY(30px)}
.intro-stage .intro-name{opacity:0;transform:translate(-50%,30px)}
.intro-stage.is-in .intro-photo img{animation:intro-rise 1.1s cubic-bezier(.2,.9,.25,1.15) .25s forwards}
.intro-stage.is-in .intro-sun-core{animation:intro-pop .9s cubic-bezier(.3,1.5,.5,1) forwards}
.intro-stage.is-in .intro-sun-ring{animation:intro-pop .9s cubic-bezier(.3,1.5,.5,1) .1s forwards,wa-ang 8s linear infinite}
.intro-stage.is-in .intro-tag,.intro-stage.is-in .intro-appicon{animation:intro-tag .7s cubic-bezier(.3,1.6,.5,1) forwards,intro-bob 5s ease-in-out infinite}
.intro-stage.is-in .t1{animation-delay:.9s,1.6s}
.intro-stage.is-in .t2{animation-delay:1.05s,2.2s}
.intro-stage.is-in .t3{animation-delay:1.2s,1.9s}
.intro-stage.is-in .a1{animation-delay:1.3s,2s}
.intro-stage.is-in .a2{animation-delay:1.4s,2.6s}
.intro-stage.is-in .a3{animation-delay:1.5s,2.3s}
.intro-stage.is-in .intro-name{animation:intro-name .8s cubic-bezier(.3,1.4,.5,1) 1s forwards}
.intro-text.is-in .intro-points li{animation:wa-in .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.3s + var(--d) * .12s)}
@keyframes intro-rise{to{transform:none;opacity:1}}
@keyframes intro-pop{to{transform:none;opacity:1}}
@keyframes intro-tag{to{opacity:1;transform:none}}
@keyframes intro-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes intro-name{to{opacity:1;transform:translate(-50%,0)}}

@media (max-width:860px){
  .intro{padding-top:90px}
  .intro-stage{height:500px;flex-basis:100%}
  .intro-photo{width:300px;height:470px}
  .intro-sun{width:320px;height:320px;margin-left:-160px;bottom:70px}
  .intro-bigword span{font-size:130px}
  .intro-tag{font-size:13px;padding:8px 12px 8px 8px}
  .intro-tag .ic{width:28px;height:28px}
  .intro-tag.t1{top:60px;left:-4px}
  .intro-tag.t2{top:180px;right:-4px}
  .intro-tag.t3{bottom:120px;left:-4px}
  .intro-appicon.a3{display:none}
  .intro-name b{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .intro-stage .intro-photo img,.intro-stage .intro-sun-core,.intro-stage .intro-sun-ring,.intro-stage .intro-tag,.intro-stage .intro-appicon{opacity:1!important;transform:none!important}
  .intro-stage .intro-name{opacity:1!important;transform:translateX(-50%)!important}
}

/* ---------- Kopfzeile bleibt beim Scrollen oben ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background-color .3s,box-shadow .3s,border-color .3s}
.header-in{min-height:68px;transition:min-height .3s}
body{padding-top:69px}
.header.scrolled{box-shadow:0 10px 30px rgba(14,21,48,.10)}
:root[data-theme="dark"] .header.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.35)}
.header.scrolled .header-in{min-height:58px}
section[id],[id="top"]{scroll-margin-top:80px}

/* =====================================================================
   Mittleres Handy: Nachbau der App wulut:reader (Startseite)
   ===================================================================== */
.rd{background:#F4F5F2;color:#16181D;position:relative;font-size:12px}
.rd-top{padding:30px 16px 6px}
.rd-brand{font-size:10.5px;font-weight:700;color:#131B3B;letter-spacing:.2px}
.rd-brand b{color:#1F4FD8}
.rd-title-row{display:flex;align-items:center;justify-content:space-between}
.rd-title{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.4px;color:#16181D}
.rd-dots{display:flex;flex-direction:column;gap:2px;padding:4px}
.rd-dots i{width:3px;height:3px;border-radius:50%;background:#16181D;display:block}
.rd-search{margin:6px 14px 8px;background:#fff;border:1px solid #D9DBD6;border-radius:11px;padding:8px 10px;display:flex;align-items:center;gap:7px;color:#555A63;font-size:11.5px;overflow:hidden;white-space:nowrap}
.rd-typing{display:inline-block;overflow:hidden;white-space:nowrap;border-right:1.5px solid transparent;animation:rd-type 7s steps(22,end) infinite}
.rd-chips{display:flex;gap:6px;padding:0 14px;overflow:hidden;white-space:nowrap}
.rd-chip{flex:none;background:#fff;border:1px solid #D9DBD6;border-radius:14px;padding:5px 10px;font-size:11px;font-weight:600;color:#3D4148;animation:rd-chip 9s ease-in-out infinite;animation-delay:calc(var(--d) * 1.8s)}
.rd-chip.on{background:#16181D;border-color:#16181D;color:#fff}
.rd-section{font-weight:700;font-size:12.5px;padding:12px 14px 6px}
.rd-files{padding:0 12px;display:flex;flex-direction:column;gap:6px}
.rd-file{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #E3E5E0;border-radius:12px;padding:8px 6px 8px 9px;opacity:0;animation:rd-in 8s cubic-bezier(.2,.8,.2,1) infinite;animation-delay:calc(.3s + var(--d) * .35s)}
.rd-badge{flex:none;width:30px;height:36px;border-radius:6px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;font-size:7.5px;font-weight:800;letter-spacing:.3px}
.rd-meta{flex:1;min-width:0;display:flex;flex-direction:column}
.rd-meta b{font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-meta small{font-size:9.5px;color:#555A63;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-prog{display:block;width:56px;height:3px;border-radius:2px;background:#E3E5E0;margin-top:4px;overflow:hidden}
.rd-prog i{display:block;height:100%;background:#1F4FD8;border-radius:2px;width:0;animation:rd-prog 8s ease-out infinite;animation-delay:calc(.8s + var(--d) * .35s)}
.rd-file:nth-child(1) .rd-prog i{animation-delay:.9s}
.rd-x{color:#9AA0A8;font-size:13px;padding:0 4px}
.rd-fab{position:absolute;right:12px;bottom:14px;display:flex;align-items:center;gap:6px;background:#1F4FD8;color:#fff;font-weight:700;font-size:12px;padding:11px 14px;border-radius:14px;box-shadow:0 10px 24px rgba(31,79,216,.45);animation:rd-fab 3s ease-in-out infinite}
@keyframes rd-in{0%{opacity:0;transform:translateY(14px) scale(.97)}8%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes rd-prog{0%,10%{width:0}40%,100%{width:var(--p)}}
@keyframes rd-type{0%{max-width:0}35%,85%{max-width:200px}100%{max-width:0}}
@keyframes rd-chip{0%,100%{transform:none}5%{transform:translateY(-2px)}}
@keyframes rd-fab{0%,100%{transform:none;box-shadow:0 10px 24px rgba(31,79,216,.45)}50%{transform:translateY(-3px);box-shadow:0 16px 30px rgba(31,79,216,.55)}}
@media (prefers-reduced-motion:reduce){.rd-file{opacity:1!important}.rd-prog i{width:var(--p)!important}}