/* ============================================================
   REGULATE WEB · Tokens und Komponenten
   Quelle: styleguide/index.html. Main und Kampagnenseiten binden diese Datei ein.
   ============================================================ */

@font-face{font-family:"PP Neue Montreal"; src:url("../fonts/PPNeueMontreal-Regular.otf") format("opentype"); font-weight:400; font-display:swap}
@font-face{font-family:"PP Neue Montreal"; src:url("../fonts/PPNeueMontreal-Medium.otf") format("opentype"); font-weight:500; font-display:swap}
@font-face{font-family:"PP Neue Montreal"; src:url("../fonts/PPNeueMontreal-Bold.otf") format("opentype"); font-weight:700; font-display:swap}

:root{
  --font:"PP Neue Montreal",system-ui,sans-serif;

  /* Neutrals */
  --black:#000; --ink-60:rgba(0,0,0,.6); --ink-40:rgba(0,0,0,.4); --ink-12:rgba(0,0,0,.12);
  --line:#d9d9d9; --chip:#f6f7f9; --white:#fff; --star:#ffb400;

  /* Pastels */
  --sky:#e5f2f9; --cloud:#d7f0f7; --mint:#c8f5ee; --peach:#ffe3db; --lilac:#f6ecfa; --blush:#ffe1f7; --haze:#ebe9ff;

  /* Gradients */
  --g-energize:linear-gradient(31.9deg,var(--peach) 14%,#fff 104%);
  --g-focus:linear-gradient(-78.5deg,var(--mint) 2%,#fff 139%);
  --g-calm:linear-gradient(108.9deg,var(--cloud) 23%,#fff 111%);
  --g-sleep:linear-gradient(-11.2deg,var(--lilac) 5%,#fff 125%);
  --g-hero:linear-gradient(174.2deg,var(--sky) 34%,#fff 109%);
  --g-panel:linear-gradient(189.7deg,#eaf5f8 27%,#fff 101%);
  --g-offer:linear-gradient(-11.2deg,var(--lilac) 5%,#fff 125%);
  --g-footer:linear-gradient(167.9deg,#ffe9f9 21%,var(--haze) 86%);
  --stage-energize:linear-gradient(to bottom,#ff4a5f,#ffb27a 55%,#fff6e0);
  --stage-focus:linear-gradient(to bottom,#19d46b,#8fe9a8 55%,#f2fbf2);
  --stage-calm:linear-gradient(to bottom,#1fc6e8,#8fe3f0 55%,#f0fbfd);
  --stage-sleep:linear-gradient(to bottom,#faadff,#f7d6ff 47%,#fff);

  /* Radius */
  --r-panel:40px; --r-media:32px; --r-mobile:28px; --r-badge:8px; --r-tag:6px; --r-tag-sm:2px; --r-pill:999px;

  /* Shadow */
  --shadow-soft:0 6px 30px rgba(0,0,0,.06);
  --shadow-float:0 18px 50px rgba(0,0,0,.12);
  --shadow-media:0 18px 39px rgba(0,0,0,.1),0 70px 70px rgba(0,0,0,.09),0 158px 95px rgba(0,0,0,.05);

  /* Layout */
  --wrap:1140px; --gutter:32px; --panel-inset:40px; --section:160px;
}
@media (max-width:880px){
  :root{ --gutter:16px; --panel-inset:12px; --section:96px; --r-panel:28px; --panel-pad:40px }
  /* Panels Mobile: rundum 40 Innenabstand (oben, unten, links, rechts) */
  .panel{padding:var(--panel-pad) 0; --gutter:var(--panel-pad)}
}

/* ---------- Base ---------- */
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; overflow-x:clip}  /* nie breiter als der Bildschirm, auch wenn Browser-Uebersetzung Text verlaengert */
body{font-family:var(--font); color:var(--black); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:clip}
h1,h2,h3,.t-display{overflow-wrap:break-word}
a{color:inherit; text-decoration:none}
img{display:block}
.wrap{width:min(var(--wrap), calc(100% - 2*var(--gutter))); margin:0 auto}

/* ---------- Type scale ---------- */
.t-display{font-size:96px; line-height:92px; font-weight:500; letter-spacing:-.01em}
.t-h1{font-size:80px; line-height:80px; font-weight:500}
.t-h2{font-size:64px; line-height:64px; font-weight:500}
.t-h3{font-size:36px; line-height:40px; font-weight:500}
.t-h4{font-size:32px; line-height:32px; font-weight:500}
.t-h5{font-size:24px; line-height:28px; font-weight:500}
.t-lead{font-size:22px; line-height:30px; font-weight:400}
.t-body-l{font-size:20px; line-height:26px; font-weight:500}
.t-body{font-size:16px; line-height:22px; font-weight:400}
.t-small{font-size:14px; line-height:18px; font-weight:400}
.t-caption{font-size:12px; line-height:16px; font-weight:400}
.ink-60{color:var(--ink-60)}
.ink-40{color:var(--ink-40)}
@media (max-width:1240px){ .t-display{font-size:72px; line-height:72px} }
@media (max-width:880px){
  .t-display{font-size:48px; line-height:48px}
  .t-h1,.t-h2{font-size:44px; line-height:46px}
  .t-h3{font-size:28px; line-height:32px}
  .t-h4{font-size:24px; line-height:28px}
  .t-h5{font-size:20px; line-height:24px}
  .t-lead,.t-body-l{font-size:18px; line-height:24px}
}

/* ---------- Tags ---------- */
.tag{display:inline-flex; align-items:center; height:21px; padding:0 8px; border:1px solid currentColor; border-radius:var(--r-tag); font-size:12px; font-weight:500; line-height:1; white-space:nowrap}
.tag.sm{height:17px; padding:0 6px; border-radius:var(--r-tag-sm)}
.tag.light{color:#fff}
.tag.fill{background:#fff; color:#000; border-color:#fff}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; height:59px; padding:0 40px; border-radius:var(--r-pill); background:#000; color:#fff; font:700 16px/1 var(--font); white-space:nowrap; border:0; cursor:pointer; transition:transform .2s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent; color:#000; box-shadow:inset 0 0 0 1px #000}
.btn.white{background:#fff; color:#000}
.btn.sm{height:44px; padding:0 22px; font-size:15px}
.cta{display:flex; flex-direction:column; align-items:flex-start; gap:16px}

/* ---------- Rating, platforms, store badges ---------- */
.rating{display:flex; align-items:center; gap:4px; font-size:12px; line-height:16px}
.stars{display:flex; gap:2px}
.stars img{width:12px; height:12px}
.cta .rating + .platforms{margin-top:-8px}
.platforms{display:flex; align-items:center; gap:10px; font-size:12px; line-height:16px; color:var(--ink-60)}
.platforms img{height:13px; width:auto}
.platforms img:nth-of-type(2){margin-left:6px}
.platforms a{display:inline-flex; align-items:center; gap:6px}
.platforms a + a{margin-left:0}  /* Label, iOS und Android stehen im selben 10px-Takt */
.apps{display:flex; gap:16px}
.store{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:var(--r-badge); background:#000; color:#fff}
.store img{height:24px; width:auto}
.store small{display:block; font-size:8px; font-weight:500; line-height:1; margin-bottom:4px}
.store b{display:block; font-size:12px; font-weight:500; line-height:1}
.store.light{background:#fff; color:#000}

/* ---------- Section title ---------- */
.sec-title{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px}
.sec-title .l{display:flex; flex-direction:column; gap:16px; align-items:flex-start}
@media (max-width:880px){ .sec-title{flex-direction:column; align-items:flex-start} }

/* ---------- State card ---------- */
.state{height:400px; border-radius:var(--r-panel); padding:32px; display:flex; flex-direction:column; min-width:0}
.state .top{display:flex; justify-content:space-between; align-items:center; font-size:16px; line-height:22px}
.state .orbwrap{flex:1; display:flex; align-items:center; justify-content:center; min-height:0}
.state .orbwrap img{width:160px}
.state .txt{display:flex; flex-direction:column; gap:4px}  /* Situation und Titel gehoeren zusammen */
.state .when{font-size:14px; line-height:18px; color:var(--ink-60)}
.state h3{font-size:24px; line-height:28px; font-weight:500; white-space:nowrap}
.state .sess{display:flex; align-items:center; gap:12px; font-size:14px; line-height:18px; margin-top:20px}
.state .play{width:32px; height:32px; border-radius:50%; background:#000; display:flex; align-items:center; justify-content:center; flex:none}
.state .play img{width:14px; height:14px}
.state.energize{background:var(--g-energize)}
.state.focus{background:var(--g-focus)}
.state.calm{background:var(--g-calm)}
.state.sleep{background:var(--g-sleep)}

/* ---------- Quote card ---------- */
.quote{background:var(--chip); border-radius:var(--r-panel); padding:40px 32px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px}
.quote .av{width:48px; height:48px; border-radius:var(--r-pill); background:var(--line); flex:none}
.quote p{font-size:22px; line-height:28px; font-weight:500; flex:1}
.quote .who{font-size:16px; line-height:20px}
.quote .who b{display:block; font-weight:700}

/* ---------- Feature row ---------- */
.feat{display:flex; align-items:center; gap:16px}
.feat .ic{width:56px; height:56px; flex:none; border-radius:var(--r-pill); background:var(--chip); display:flex; align-items:center; justify-content:center}
.feat .ic img{width:32px; height:32px}
.feat h4{font-size:20px; line-height:20px; font-weight:500}
.feat p{font-size:14px; line-height:16px; color:var(--ink-60); margin-top:8px}

/* ---------- Numbers ---------- */
.nums{display:flex; justify-content:space-between; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px}
.nums b{display:block; font-size:48px; line-height:40px; font-weight:500}
.nums span{display:block; font-size:16px; line-height:22px; color:var(--ink-60); margin-top:16px}
.source{font-size:12px; line-height:16px; color:var(--ink-40); margin-top:12px}
@media (max-width:880px){ .nums{flex-wrap:wrap; gap:28px 0; padding:24px 0} .nums > div{width:50%} }

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--ink-12)}
.faq details{border-bottom:1px solid var(--ink-12); padding:20px 0}
.faq summary{font-size:20px; line-height:26px; font-weight:500; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-weight:400; transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{font-size:16px; line-height:22px; margin-top:12px; color:var(--ink-60); transform:translateY(-6px); transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.faq details[open] p{transform:none}
.faq{interpolate-size:allow-keywords}
.faq details::details-content{height:0; opacity:0; overflow:clip; transition:height .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease, content-visibility .5s allow-discrete}
.faq details[open]::details-content{height:auto; opacity:1}

/* ---------- Newsletter input ---------- */
.news-form{display:flex; gap:16px}
.news-form input{width:240px; height:48px; border:0; border-radius:var(--r-pill); padding:0 20px; font:inherit; font-size:16px; background:#fff}
.news-form input::placeholder{color:var(--ink-40)}
.news-form .btn{height:48px; padding:0 48px}
@media (max-width:880px){ .news-form{width:100%} .news-form input{flex:1; width:auto; min-width:0} .news-form .btn{padding:0 28px} }

/* ---------- Sticky bar ---------- */
.sticky{display:inline-flex; align-items:center; gap:18px; padding:8px 8px 8px 22px; border-radius:var(--r-pill); background:rgba(255,255,255,.85);
  backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5); box-shadow:0 4px 24px rgba(0,0,0,.10), inset 0 0 0 1px rgba(0,0,0,.06)}  /* Schatten nach allen Seiten, damit er am Bildschirmrand nicht abgeschnitten wird */
.sticky span{font-size:14px; line-height:18px; white-space:nowrap}

/* ============================================================
   Komponenten aus der Main-Seite (Stand Okt 2026)
   ============================================================ */

/* ---------- Panel ---------- */
.panel{margin:0 var(--panel-inset); border-radius:var(--r-panel); overflow:hidden; position:relative; padding:var(--section) 0}

/* ---------- Kampagnen-Banner ---------- */
.campaign{display:flex; justify-content:center; align-items:center; gap:12px; height:44px; background:#000; color:#fff; font-size:14px; line-height:18px}
.campaign b{font-weight:500}
.campaign .dot{width:8px; height:8px; border-radius:50%; background:#1fc6e8}
.campaign img{width:16px; height:16px; filter:invert(1)}

/* ---------- Hoerprobe (State card) ---------- */
.state .sess{cursor:pointer}
.state .sess-t{display:flex; flex-direction:column; gap:2px}
.state .sess-t small{font-size:12px; line-height:14px; opacity:.6}
.state .play{position:relative}
.state .play .ring{position:absolute; inset:-4px; width:40px; height:40px; transform:rotate(-90deg)}
.state .play .ring circle{fill:none; stroke:#000; stroke-width:2; stroke-dasharray:113; stroke-dashoffset:113}
.state.playing .play img{content:url("../main/img/icons/pause.svg")}

/* ---------- Pfeile, Rail, Person card ---------- */
.arrows{display:flex; gap:12px}
/* Pfeile: schwarz = es geht in diese Richtung weiter, hell = Ende erreicht */
.arr{width:48px; height:48px; border-radius:var(--r-pill); border:0; background:#000; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .3s}
.arr img{filter:invert(1)}
.arr:disabled{background:#fff; cursor:default}
.arr:disabled img{filter:none; opacity:.35}
.arr img{width:20px; height:20px}
.rail{display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:0 max(var(--gutter), calc((100% - var(--wrap))/2)); scroll-padding:0 max(var(--gutter), calc((100% - var(--wrap))/2))}
.rail::-webkit-scrollbar{display:none}
.person{position:relative; flex:none; width:440px; aspect-ratio:4/5; border-radius:var(--r-panel); overflow:hidden; scroll-snap-align:start; color:#fff; background:#111}
.person > img,.person .noimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.person .noimg{background:linear-gradient(160deg,#3a4650,#11161a)}
.person::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.65) 100%); pointer-events:none}
.person .pill{position:absolute; z-index:2; left:24px; top:24px; height:36px; padding:0 16px; display:flex; align-items:center; border-radius:var(--r-pill);
  font-size:14px; line-height:18px; background:rgba(0,0,0,.35); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
.person .more{position:absolute; z-index:3; right:24px; top:24px; width:44px; height:44px; border-radius:50%; border:0; background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .3s}
.person .more svg{width:20px; height:20px}
.person{cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.person .more::before{content:""; position:absolute; inset:-12px}  /* groessere Trefferflaeche auf Touch */
.person.open .more{transform:rotate(45deg)}
.person h3 span{display:block}
.person h3{position:absolute; z-index:2; left:32px; right:32px; bottom:32px; transition:opacity .3s}
.person .detail{position:absolute; z-index:2; inset:0; padding:96px 32px 32px; display:flex; align-items:flex-end; background:rgba(0,0,0,.55); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); opacity:0; pointer-events:none; transition:opacity .3s}
.person .detail a{text-decoration:underline; text-underline-offset:3px}
.person.open .detail{opacity:1; pointer-events:auto}
.person.open h3{opacity:0}

/* ---------- Bento und Zitat-Kachel ---------- */
.bento{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(240px,auto); gap:16px}
.b{background:var(--chip); border-radius:var(--r-panel); padding:32px; display:flex; flex-direction:column; justify-content:space-between; gap:24px}
.b-hero{grid-column:span 2; grid-row:span 2; background:var(--g-calm)}
.b-hero .t-h5 span{display:block}
.b-hero{position:relative; overflow:hidden}
.b-hero .b-orb{position:absolute; width:300px; right:-110px; bottom:-60px}
.b-hero > *:not(.b-orb){position:relative}
.b.b-hero .source{margin-top:16px}
.b-wide{grid-column:span 2}
.b .big{font-size:200px; line-height:.85; font-weight:500; letter-spacing:-.03em}
.b .num{display:block; font-size:48px; line-height:40px; font-weight:500}
.b .num + p{margin-top:12px}
@media (max-width:880px){ .b .big{font-size:120px} .b .num{font-size:36px; line-height:34px} }
.stars.lg img{width:20px; height:20px}
.b-end{justify-content:flex-end}
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.b .source{margin-top:0}
.qhead .arr:disabled{background:var(--chip)}
.qhead{display:flex; justify-content:space-between; align-items:center; margin:64px 0 24px}
.qrail{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 48px)/4); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none}
.qrail::-webkit-scrollbar{display:none}
.qt{scroll-snap-align:start; background:var(--chip); border-radius:var(--r-panel); padding:32px; min-height:300px; display:flex; flex-direction:column; justify-content:space-between; gap:24px}
.qt .who{display:flex; align-items:center; gap:12px; font-size:14px; line-height:18px}
.qt .who b{display:block; font-weight:700}
.qt .av{width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none; background:var(--line)}

/* ---------- Tabs (Segment) ---------- */
.seg{position:relative; display:inline-flex; gap:2px; padding:4px; border-radius:var(--r-pill); background:rgba(255,255,255,.1)}
.seg button{border:0; outline:none; background:transparent; color:rgba(255,255,255,.7); font:inherit; font-size:14px; font-weight:500; padding:10px 20px; border-radius:var(--r-pill); cursor:pointer; position:relative; z-index:1; transition:color .45s cubic-bezier(.2,.8,.2,1)}
.seg i{position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:var(--r-pill); background:#fff; transition:transform .5s cubic-bezier(.3,1.3,.5,1), width .5s cubic-bezier(.3,1.3,.5,1)}
.seg button:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.seg button.on{color:#000}

/* ---------- Dunkle Kacheln: Zahl, Paket, Logo-Zitat, Logo-Leiste ---------- */
.stat,.pkwrap,.biz-quotes blockquote{background:rgba(255,255,255,.07); border-radius:32px; padding:32px}
.stat{display:flex; flex-direction:column; justify-content:flex-end}
.stat .num{display:block; font-size:48px; line-height:40px; font-weight:500}
.stat p{color:rgba(255,255,255,.6); margin-top:12px}
.pkwrap{display:flex; flex-direction:column}
.pk{display:none; flex:1; flex-direction:column; gap:28px}
.pk.on{display:flex}
.pk.on > *, .pk.on li{animation:pkIn .6s cubic-bezier(.2,.8,.2,1) both}
.pk.on li:nth-child(1){animation-delay:.06s} .pk.on li:nth-child(2){animation-delay:.12s} .pk.on li:nth-child(3){animation-delay:.18s}
.pk.on ul{animation:none}
.pk.on .pk-foot{animation-delay:.22s}
@keyframes pkIn{from{opacity:0; transform:translateY(10px); filter:blur(4px)} to{opacity:1; transform:none; filter:none}}
.pk-top p{color:rgba(255,255,255,.6); margin-top:8px}
.pk ul{list-style:none; display:flex; flex-direction:column; gap:14px}
.pk li{display:flex; gap:12px; align-items:center; font-size:16px; line-height:22px}
.pk li img{width:20px; height:20px; filter:invert(1)}
.pk-foot{margin-top:auto; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12)}
.pk-foot span{display:block; color:rgba(255,255,255,.6)}
.pk-foot b{display:block; font-size:40px; line-height:40px; font-weight:500; margin:4px 0}
.biz-quotes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:16px}
.biz-quotes blockquote{display:flex; flex-direction:column; justify-content:space-between; gap:24px}
.biz-quotes .ql{height:24px; width:auto; align-self:flex-start; opacity:.7}
.biz-quotes .ql-rbi{height:26px} .biz-quotes .ql-audi{height:20px; margin:3px 0} .biz-quotes .ql-pers{height:17px; margin:4.5px 0}
.biz-quotes img.ql{filter:brightness(0) invert(1)}
.biz-quotes p{flex:1}
.biz-quotes cite{display:block; font-style:normal; color:rgba(255,255,255,.5)}
.clients{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px 32px; margin-top:64px}
.clients img{height:24px; width:auto; filter:brightness(0) invert(1); opacity:.5}

@media (max-width:880px){
  .person{width:78vw}
  .rail{gap:12px}
  .arrows{display:none}
  .bento{grid-template-columns:1fr 1fr; grid-auto-rows:auto}
  .b{padding:24px}
  .qrail{grid-auto-columns:78%}
  .pkwrap{padding:28px}
  .pk-foot{flex-direction:column; align-items:flex-start}
  .campaign{font-size:12px; padding:0 16px; height:auto; min-height:44px}
}

/* ---------- App-Bühnen (Spline-Renders aus der App). Nur auf Seiten mit <body class="app-stages"> (aktuell Sebastian). B2C bleibt beim alten Stil, bis der neue Orb-Stil kommt ---------- */
.app-stages .state.energize,.app-stages .m-energize{background:#f6b49b url("img/stage-energize.jpg") center 65%/auto 150% no-repeat}
.app-stages .state.focus,.app-stages .m-focus{background:#bfe6b0 url("img/stage-focus.jpg") center 65%/auto 150% no-repeat}
.app-stages .state.calm,.app-stages .m-calm{background:#9fdde8 url("img/stage-calm.jpg") center 65%/auto 150% no-repeat}
.app-stages .state.sleep,.app-stages .m-sleep{background:#e3c6f0 url("img/stage-sleep.jpg") center 65%/auto 150% no-repeat}
.app-stages .state .orbwrap img,.app-stages .m-energize img,.app-stages .m-focus img,.app-stages .m-calm img,.app-stages .m-sleep img{visibility:hidden}