/* ============================================================
   Redesign-Layer „Messing" — überschreibt style.css
   (7b Farbwelt · 9a hell via [data-theme=light] · 1a/2a/3a/4a/5b
   · 6b Logo · 8a/8b Reveals · 11c E-Objekt · 12b/c/d/f/g)
   ============================================================ */
:root{
  --bg-0:#0d0c0a;--bg-1:#14120f;--bg-2:#191612;
  --surface:rgba(234,229,218,.04);--surface-strong:rgba(234,229,218,.07);
  --border:rgba(234,229,218,.1);--border-strong:rgba(234,229,218,.18);
  --text-0:#eae5da;--text-1:#c9c3b6;--text-2:#98917f;--text-3:#6b6455;
  --accent:#b3915a;--accent-2:#cfae72;--accent-soft:rgba(179,145,90,.22);
  --btn-bg:#e9e6df;--btn-fg:#14120f;
  --shadow-glow:0 0 0 1px var(--border),0 20px 60px -20px rgba(0,0,0,.6);
}
html[data-theme="light"], html[data-theme="light"] body{
  --bg-0:#f3eee2;--bg-1:#ece6d6;--bg-2:#e5deca;
  --surface:rgba(26,23,19,.04);--surface-strong:rgba(26,23,19,.06);
  --border:rgba(160,123,66,.32);--border-strong:rgba(160,123,66,.55);
  --text-0:#1a1713;--text-1:#3c362c;--text-2:#6f6759;--text-3:#948b7a;
  --accent:#a07b42;--accent-2:#8a6836;--accent-soft:rgba(160,123,66,.2);
  --btn-bg:#1a1713;--btn-fg:#f5f2ea;
  --shadow-glow:0 0 0 1px var(--border),0 24px 50px -30px rgba(26,23,19,.3);
}
/* Hintergrund: warm, ruhig — Orbs (Aurora) komplett raus */
body::before{background:radial-gradient(60% 45% at 18% 0%,var(--accent-soft),transparent 62%),var(--bg-0)}
.orbs{display:none}
html[data-theme="light"] body::after{opacity:.06;mix-blend-mode:multiply}
/* Buttons 1a: Bone/Tinte statt Verlaufs-Pille, Shine-Sweep raus */
.btn{border-radius:10px}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn-primary:hover{box-shadow:0 14px 30px -14px rgba(0,0,0,.55)}
.btn-primary::after{display:none}
/* Eyebrow 2a: Linie statt Glow-Dot */
.eyebrow{color:var(--text-2)}
.eyebrow::before{width:30px;height:1px;border-radius:0;background:var(--accent);box-shadow:none;animation:none}
html.js [data-aos] .eyebrow::before,html.js .eyebrow[data-aos]::before{transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.22,1,.36,1) .15s}
html.js [data-aos].aos-in .eyebrow::before,html.js .eyebrow[data-aos].aos-in::before{transform:scaleX(1)}
/* Badges 4a: eckige Tags */
.badge,.step-points span,.legal-toc a{border-radius:4px;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;padding:6px 10px}
.badge.badge-soon{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
/* Karten 3a: flache Panels, kein Glas/Glow/Spotlight/Tilt */
.glass{background:var(--bg-1);border-radius:14px;box-shadow:none}
.app-card{transform:none!important}
.app-card:hover{transform:translateY(-4px)!important}
.feature-card .num{display:none}
/* 12c: Haarlinien-Hover statt Spotlight (Pseudo-Elemente umgewidmet) */
.app-card::before,.feature-card::before,.callout::before{inset:0 0 auto 0;height:1px;width:auto;border-radius:0;background:var(--accent);opacity:1;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.app-card:hover::before,.feature-card:hover::before,.callout:hover::before{opacity:1;transform:scaleX(1)}
.app-card::after{inset:auto 0 0 0;width:auto;height:1px;border-radius:0;filter:none;opacity:1;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.app-card:hover::after{transform:scaleX(1)}
.app-card[data-app="closet"]{--card-accent:#b0757f}
.app-card[data-app="cart"]{--card-accent:#9aa065}
.app-card[data-app="lumio"]{--card-accent:#c0903e}
html[data-theme="light"] .app-card[data-app="closet"]{--card-accent:#96545e}
html[data-theme="light"] .app-card[data-app="cart"]{--card-accent:#71763f}
html[data-theme="light"] .app-card[data-app="lumio"]{--card-accent:#96702c}
/* Nav: 6b-Logo, einfarbige Underline, Umschalter */
html[data-theme="light"] .nav{background:rgba(243,238,226,.85)}
html[data-theme="light"] .nav.scrolled{background:rgba(243,238,226,.92);box-shadow:0 12px 32px -24px rgba(26,23,19,.5)}
.ebrand{display:flex;flex-direction:column;justify-content:space-between;width:16px;height:15px;flex:0 0 auto}
.ebrand i{height:3px;background:var(--accent)}
.ebrand i:nth-child(2){width:66%}
.nav-links a::after{background:var(--accent)}
.theme-toggle{width:36px;height:36px;border:1px solid var(--border);border-radius:4px;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text-2);transition:border-color .25s}
.theme-toggle:hover{border-color:var(--border-strong);color:var(--text-0)}
.theme-toggle .tt-sq{width:10px;height:10px;border:1.5px solid currentColor;transition:background .25s}
.theme-toggle[aria-pressed="true"] .tt-sq{background:currentColor}
.lang-toggle{height:36px;padding:0 10px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--text-2);font:600 12px/36px var(--ff-body);letter-spacing:.04em;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:border-color .25s,color .25s}
.lang-toggle:hover{border-color:var(--border-strong);color:var(--text-0)}
.nav-inner{gap:14px}
.nav-links{margin-left:auto}
/* Fortschritt & Page-Veil entschlackt */
.scroll-progress{height:1px;background:var(--accent)}
.page-veil-dot{border-radius:0;background:var(--accent);box-shadow:none}
/* Hero 8b: Wörter steigen aus Maske (statt Glow-Fade) */
.wmask{display:inline-block;overflow:hidden;vertical-align:bottom}
h1.split .w{opacity:1;transform:translateY(112%);animation:word-rise .85s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i)*60ms + 150ms)}
@keyframes word-rise{to{transform:none}}
/* Reveals 8a: Manifest-Zeilen — Linie zieht sich, dann Text */
.manif{border-bottom:1px solid var(--border)}
.m-row{position:relative;display:grid;grid-template-columns:1fr 1.5fr;gap:26px;padding:32px 0;border-top:1px solid var(--border)}
html.js .m-row{border-top-color:transparent}
.m-row::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--border-strong);transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.22,1,.36,1)}
html.js .m-row.aos-in::before{transform:scaleX(1)}
.m-row h3{font-size:clamp(1.3rem,1.6vw+.8rem,1.7rem)}
.m-row p{color:var(--text-2);font-size:.98rem}
@media (max-width:760px){.m-row{grid-template-columns:1fr;gap:8px}}
/* 12f: Outline-Kapitelziffern */
.sec-head-row{display:flex;gap:28px;align-items:flex-start;margin-bottom:46px}
.secnum{font-family:var(--ff-display);font-weight:700;font-size:clamp(64px,7vw,104px);line-height:.82;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--accent) 60%,transparent);flex:0 0 auto;user-select:none}
.sec-head-row .section-head{margin-bottom:0}
/* 12b: Marginalien */
.has-marg{position:relative}
.marg{position:absolute;left:-32px;top:10px;bottom:10px;width:40px;display:flex;flex-direction:column;align-items:center;gap:14px;border-right:1px solid var(--border)}
.marg b{font-family:var(--ff-display);font-size:.68rem;font-weight:600;color:var(--accent);letter-spacing:.05em}
.marg span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--ff-display);font-size:.6rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--text-3)}
@media (max-width:1330px){.marg{display:none}}
/* Booking: Quadrat-Marker statt Emoji */
.bk-sq{width:10px;height:10px;background:var(--accent);display:block;margin-bottom:18px}
/* CTA-Banner: flach, Ring (cta-ring.css) läuft jetzt in Messing */
.cta-banner{background:var(--bg-1)}
/* 11c + 12d: Brandband vor dem Footer */
.brandband{overflow:hidden;padding:100px 24px 60px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(24px,4vw,54px);user-select:none}
.e3dw{animation:ebob 6s ease-in-out infinite}
@keyframes ebob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.e3dw{perspective:900px}
.e3dg{position:relative;width:110px;height:110px;transform-style:preserve-3d;animation:e3spin 10s ease-in-out infinite alternate}
@keyframes e3spin{from{transform:rotateY(-40deg) rotateX(9deg)}to{transform:rotateY(40deg) rotateX(-7deg)}}
.e3dg i{position:absolute;inset:0;background:linear-gradient(180deg,#7a5f35,#5e4826) 0 0/100% 22% no-repeat,linear-gradient(180deg,#7a5f35,#5e4826) 0 50%/68% 22% no-repeat,linear-gradient(180deg,#7a5f35,#5e4826) 0 100%/100% 22% no-repeat}
.e3dg i.f{background:linear-gradient(180deg,#cfae72,#a07b42) 0 0/100% 22% no-repeat,linear-gradient(180deg,#cfae72,#a07b42) 0 50%/68% 22% no-repeat,linear-gradient(180deg,#cfae72,#a07b42) 0 100%/100% 22% no-repeat}
.wm-outline{position:relative;font-family:var(--ff-display);font-weight:700;font-size:clamp(2.2rem,7vw,6.5rem);line-height:1;letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--accent) 65%,transparent);white-space:nowrap;width:fit-content}
.wm-outline .fillc{position:absolute;inset:0;overflow:hidden;width:14%;animation:wmfill 8s ease-in-out infinite alternate}
.wm-outline .fillc span{display:block;color:var(--text-0);-webkit-text-stroke:0;white-space:nowrap}
@keyframes wmfill{to{width:100%}}
/* Wortmarken-Band der App-Seiten: Outline statt Farbverlauf */
.wordmark{background:none;color:color-mix(in srgb,var(--accent) 18%,transparent);-webkit-text-stroke:2px color-mix(in srgb,var(--accent) 88%,transparent)}
/* Selection dezent (nicht 12e-Messing, aber kein Browser-Blau) */
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
@media (prefers-reduced-motion:reduce){
  h1.split .w{transform:none;animation:none}
  .m-row::before{transform:scaleX(1)}
  .e3dg,.wm-outline .fillc{animation:none}
  .wm-outline .fillc{width:100%}
}

/* ---- Per-App-Akzente: entsättigt, gleiche Helligkeitsfamilie wie Messing ---- */
body.theme-closet{--accent:#b0757f;--accent-2:#c4919a;--accent-soft:rgba(176,117,127,.2)}
body.theme-cart{--accent:#9aa065;--accent-2:#b4b983;--accent-soft:rgba(154,160,101,.2)}
body.theme-lumio{--accent:#c0903e;--accent-2:#d4ab5f;--accent-soft:rgba(192,144,62,.2)}
html[data-theme="light"] body.theme-closet{--accent:#96545e;--accent-2:#7d434c;--accent-soft:rgba(150,84,94,.18)}
html[data-theme="light"] body.theme-cart{--accent:#71763f;--accent-2:#5c6033;--accent-soft:rgba(113,118,63,.18)}
html[data-theme="light"] body.theme-lumio{--accent:#96702c;--accent-2:#7d5c22;--accent-soft:rgba(150,112,44,.18)}
[data-app="closet"]{--section-accent:#b0757f}
[data-app="cart"]{--section-accent:#9aa065}
[data-app="lumio"]{--section-accent:#c0903e}
/* ---- De-AI: rotierender CTA-Ring aus, Häkchen → Quadrate, Stats mit Haarlinien ---- */
.cta-banner::before{display:none}
.cta-banner{border:1px solid var(--border-strong)}
.app-card ul.feature-list li::before{content:"";width:5px;height:5px;background:var(--card-accent,var(--accent));top:.55em;left:2px}
.hero-stats{gap:0}
.hero-stat{padding:0 36px;border-left:1px solid var(--border)}
.hero-stat:first-child{border-left:none}
/* ---- App-Seiten: Verläufe raus, Linien einfarbig ---- */
.mega-row h3 em,.zoom-copy-a h2 em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--accent)}
.scrolly-steps::after{background:var(--accent);box-shadow:none}
.callout .icon{font-size:0;width:10px;height:10px;background:var(--accent);margin-top:8px}
/* ---- 11a Materialität: Akzent-Rim auf allen Geräte-Kanten ---- */
.iphone{box-shadow:0 30px 60px -20px rgba(0,0,0,.7),inset 0 0 0 6px #0f0f14,0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
/* ---- 3D-App-Icon im Hero der App-Seiten ---- */
.icon3dw{perspective:700px;width:fit-content;margin-bottom:26px}
.icon3dg{position:relative;width:72px;height:72px;transform-style:preserve-3d;animation:icon3spin 9s ease-in-out infinite alternate}
.icon3dg i{position:absolute;inset:0;border-radius:20px;background:color-mix(in srgb,var(--accent) 26%,#141210)}
.icon3dg .tile{position:absolute;inset:0;border-radius:20px;overflow:hidden;box-shadow:0 16px 34px -10px rgba(0,0,0,.6)}
.icon3dg .tile img{width:100%;height:100%;object-fit:cover}
@keyframes icon3spin{from{transform:rotateY(-26deg) rotateX(7deg)}to{transform:rotateY(26deg) rotateX(-7deg)}}
@media (prefers-reduced-motion:reduce){.icon3dg{animation:none}}

/* ---- 10b: Screen scrollt im Geraet (Film-Streifen statt Crossfade) ---- */
.screenfilm{position:absolute;left:0;right:0;top:0;will-change:transform}
.screenfilm .scene{position:relative!important;inset:auto!important;opacity:1!important;transform:none!important;transition:none!important;padding:0;pointer-events:none}
.screenfilm .scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ---- Page-Veil: E-Monogramm statt Verlaufs-Punkt ---- */
.page-veil-dot{width:28px;height:26px;border-radius:0;box-shadow:none;background:linear-gradient(180deg,#cfae72,#a07b42) 0 0/100% 24% no-repeat,linear-gradient(180deg,#cfae72,#a07b42) 0 50%/66% 24% no-repeat,linear-gradient(180deg,#cfae72,#a07b42) 0 100%/100% 24% no-repeat}

/* ---- 13b: Kapitelziffer blaettert beim Reveal ein ---- */
html.js .sec-head-row[data-aos] .secnum{opacity:0;transform:translateY(30%);transition:opacity .7s ease .35s,transform .8s cubic-bezier(.22,1,.36,1) .35s}
html.js .sec-head-row[data-aos].aos-in .secnum{opacity:1;transform:none}
/* ---- 18c: Mega-Rows — permanentes Thumbnail statt Klapp-Panel ---- */
html[data-theme="light"] .fillscrub{color:rgba(26,23,19,.15)}
.mega-row{position:relative;overflow:visible;padding:clamp(48px,6vw,74px) min(310px,27vw) clamp(48px,6vw,74px) 0}
.mega-row .arrow{display:none}
.mega-row-panel{display:none}
.peek-shot{position:absolute;right:6px;top:50%;transform:translateY(-50%);height:96%;max-height:350px;aspect-ratio:9/16;border-radius:18px;overflow:hidden;border:1px solid var(--border-strong);transition:transform .5s cubic-bezier(.22,1,.36,1);pointer-events:none;z-index:0;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.peek-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.mega-row:hover .peek-shot{transform:translateY(-50%) scale(1.07)}
@media (max-width:700px){.mega-row{padding-right:132px}.peek-shot{height:86%;max-height:210px}}
/* ---- 13d: Z-Welle der Wortmarke ---- */
.wordmark{--wmstroke:color-mix(in srgb,var(--accent) 88%,transparent)}
.wordmark b{display:inline-block;font-weight:inherit;-webkit-text-stroke:2px var(--wmstroke)}
.wordmark.zplay b{animation:zchar 1.1s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--ci)*55ms)}
@keyframes zchar{0%{opacity:0;transform:translateY(.3em)}50%{opacity:1;-webkit-text-stroke-color:#cfae72}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wordmark.zplay b{animation:none}.peek-shot{transition:none}.e3dw{animation:none}}

/* ---- 19: Finale — aus der App herausscrollen, endet im schwebenden Icon ---- */
.finale-stage{position:relative;height:100svh;overflow:clip}
.fin-app{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:24px;overflow:hidden;opacity:0;box-shadow:0 30px 80px -24px rgba(0,0,0,.6)}
.fin-app img{width:100%;height:100%;object-fit:cover;object-position:top}
.fin-icon{position:absolute;left:calc(50% - 48px);top:calc(50% - 48px);width:96px;height:96px;border-radius:24px;overflow:hidden;box-shadow:0 24px 60px -18px rgba(0,0,0,.6);animation:ebob 7s ease-in-out infinite}
.fin-icon img{width:100%;height:100%;display:block}
.fin-tag{position:absolute;left:0;right:0;top:calc(50% + 78px);text-align:center;font-family:var(--ff-display);font-weight:600;font-size:1.05rem;color:var(--text-0);max-width:none}
/* ---- 17c: Abspann — gepinnte Credits-Rolle ---- */
.fin-credits{padding:8vh 24px 4vh;text-align:center}
.cr-roll{display:flex;flex-direction:column;gap:clamp(44px,9vh,100px)}
.cr-line{font-family:var(--ff-display);font-weight:600;font-size:clamp(1.5rem,3.2vw,2.6rem);letter-spacing:-.015em;line-height:1.25;color:var(--text-0);margin:0 auto;padding:0;max-width:24ch}
.cr-title{font-weight:700;font-size:clamp(2.8rem,9vw,6.5rem);letter-spacing:-.03em;max-width:none;color:color-mix(in srgb,var(--accent) 18%,transparent);-webkit-text-stroke:2px color-mix(in srgb,var(--accent) 88%,transparent)}

/* ---- Rechtsseiten im Light Mode: Platzhalter & Hinweis lesbar ---- */
html[data-theme="light"] .legal-page .placeholder{color:#7a5410;background:rgba(160,123,66,.18)}
html[data-theme="light"] .legal-notice{color:#6b4a12;border-color:rgba(160,123,66,.5);background:rgba(160,123,66,.1)}