/* Startseite */
.buehne{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.tropfen{position:absolute;left:0;top:0;will-change:transform,opacity;pointer-events:none;transform-origin:50% 50%}
.tropfen svg{width:100%;height:100%;overflow:visible;transition:filter .8s}
.tropfen[data-wer="maia"] svg{filter:drop-shadow(0 0 26px rgba(244,88,140,.55))}
.tropfen[data-wer="salma"] svg{filter:drop-shadow(0 0 26px rgba(22,198,137,.5))}
.tropfen[data-wer="socci"] svg{filter:drop-shadow(0 0 22px rgba(37,40,43,.35))}
.tropfen .form{transition:stroke .6s,stroke-width .6s}
body[data-world="socci"] .tropfen[data-wer="socci"] .form,body[data-world="nacht"] .tropfen[data-wer="socci"] .form{stroke:#8ADCB4;stroke-width:7}
body[data-world="socci"] .tropfen[data-wer="socci"] svg{filter:drop-shadow(0 0 30px rgba(138,220,180,.45))}
.tropfen .treffer{pointer-events:none;cursor:pointer}
.buehne.aktiv .tropfen .treffer{pointer-events:auto}
.sprech{position:absolute;left:0;top:0;padding:10px 15px;border-radius:16px 16px 16px 5px;background:#1A1D1F;color:#fff;font-weight:700;font-size:15px;white-space:nowrap;
  opacity:0;transform:translate(-50%,-50%) scale(.5);transition:opacity .25s,transform .5s var(--spring);pointer-events:none;z-index:3}
.sprech.da{opacity:1;transform:translate(-50%,-50%) scale(1)}

main{position:relative;z-index:2}
.fuss,.band{position:relative;z-index:2}

/* Kopf */
.kopf{justify-content:center}
.kopf-text{max-width:min(46vw,680px);display:flex;flex-direction:column;gap:26px}
.kopf h1{font-size:clamp(40px,min(6.9vw,12.4svh),118px)}
.kopf h1 em{font-style:normal}
/* drei Wörter, drei Farben: Maia, Salma, Socci – feste Farben statt Verlauf, das hält in jedem Browser */
.kopf h1 em .w:nth-child(1){color:var(--maia-tief)}
.kopf h1 em .w:nth-child(2){color:var(--salma-tief)}
.eq3{display:inline-flex;gap:3px;align-items:flex-end;height:16px}
.eq3 i{width:4px;border-radius:2px;animation:eq 1s ease-in-out infinite alternate}
.eq3 i:nth-child(1){background:var(--maia)}.eq3 i:nth-child(2){background:var(--salma);animation-delay:-.4s}.eq3 i:nth-child(3){background:var(--fg);animation-delay:-.7s}
.tipp{position:absolute;right:calc(var(--pad) + 4vw);bottom:15svh;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:10px}
.tipp::before{content:"";width:34px;height:1.5px;background:currentColor}
.runter{position:absolute;left:var(--pad);bottom:34px;width:26px;height:42px;border:2px solid var(--fg);border-radius:14px;opacity:.5}
.runter i{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--fg);animation:runter 1.8s infinite}
@keyframes runter{0%{transform:translateY(0);opacity:1}80%,100%{transform:translateY(14px);opacity:0}}

/* Alltag */
.alltag{gap:34px;max-width:1300px;margin:0 auto}
.gross{font-size:clamp(28px,4.6vw,76px);line-height:1.04;letter-spacing:-.03em}
.gross .hell .w{color:var(--salma-text)}
.klein-gross{font-size:clamp(22px,3vw,46px);max-width:22em}

/* Solo-Welten */
.solo{overflow:hidden}
.solo-text{max-width:min(44vw,640px);display:flex;flex-direction:column;gap:24px;align-items:flex-start;position:relative}
.riesig{position:absolute;left:0;top:50%;font-size:34vw;line-height:.8;letter-spacing:-.06em;white-space:nowrap;color:transparent;
  -webkit-text-stroke:2px color-mix(in srgb,var(--accent) 38%,transparent);transform:translate(var(--zx,0),-50%);pointer-events:none;will-change:transform}
.solo .titel{font-size:clamp(34px,min(5.2vw,9.6svh),84px)}
.gefuehl span{display:inline-block;font-family:Syne;font-weight:800;font-size:clamp(17px,1.6vw,24px);padding:12px 18px;border-radius:16px 16px 16px 5px;background:var(--card);color:var(--fg);
  box-shadow:0 14px 36px -14px rgba(0,0,0,.28);transform:rotate(-2deg)}

/* Tag: läuft quer */
.tag{height:520vh}
.tag-fest{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3.5svh,44px)}
.tag-kopf{padding:0 var(--pad);display:grid;grid-template-columns:1fr auto;gap:10px 30px;align-items:end;margin-top:54px}
.tag-kopf .kicker{grid-column:1/-1}
.uhr{font-size:clamp(40px,7vw,110px);letter-spacing:-.04em;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--fg);font-variant-numeric:tabular-nums}
.tag-spur{display:flex;gap:22px;padding:0 var(--pad);will-change:transform;align-items:stretch}
.tk{--c:var(--salma);--h:#E8F6F0;flex:none;width:min(400px,80vw);border-radius:24px;padding:22px;background:var(--h);color:#1A1D1F;display:flex;flex-direction:column;gap:14px;
  min-height:min(420px,52svh);transition:transform .6s var(--spring),box-shadow .6s,opacity .5s;transform:scale(.92);opacity:.55;position:relative}
.tk.an{transform:none;opacity:1;box-shadow:0 30px 70px -34px var(--c)}
.tk.maia{--c:var(--maia);--h:#FDF0F3}
.tk.socci{--c:#000;--h:#17191B;color:#FCFDFD}
.tk header{display:flex;align-items:center;gap:10px;font-size:14px}
.tk header .face{width:34px;height:34px}
.tk header time{margin-left:auto;font-family:Syne;font-weight:800;font-size:15px;padding:6px 10px;border-radius:10px;background:var(--c);color:#1A1D1F}
.tk.socci header time{background:#8ADCB4}
.tk h3{font-size:clamp(22px,2.1vw,29px);line-height:1.04}
.mini-ui{margin-top:auto;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.4}
.mini-ui .bla{max-width:92%}
.mini-ui .bla.ich{background:#1A1D1F;color:#fff}
.mini-ui.quer{flex-direction:row;gap:12px;align-items:flex-end}
.mini-ui.quer .foto{width:42%;aspect-ratio:4/5;flex:none}
.zitat{font-weight:700;margin-bottom:10px}
.film{display:flex;gap:10px;align-items:center;background:#fff;border-radius:16px;padding:10px;box-shadow:0 3px 12px rgba(26,29,31,.08)}
.film small{display:block;color:#4E575B;font-size:12px}
.play{width:38px;height:38px;border-radius:50%;background:var(--maia);flex:none;position:relative}
.play::after{content:"";position:absolute;left:15px;top:11px;border:8px solid transparent;border-left:12px solid #fff;border-right:0}
.film .schild{margin-left:auto}
.reihe-s{display:flex;flex-wrap:wrap;gap:6px}
.gebucht{align-self:flex-start;padding:10px 13px;border-radius:12px;background:var(--salma);font-weight:700}
.sterne{display:flex;align-items:center;gap:6px;font-size:34px;color:var(--maia)}
.sterne i{font-style:normal;display:inline-block;transform:scale(0) rotate(-90deg);transition:transform .7s var(--spring)}
.tk.an .sterne i{transform:none}.tk.an .sterne i:nth-child(2){transition-delay:.12s}.tk.an .sterne i:nth-child(3){transition-delay:.24s}
.sterne b{font-family:Syne;font-size:26px;color:#1A1D1F;margin-left:6px}
.tk.ende{background:var(--fg);color:var(--bg);justify-content:center;width:min(560px,86vw)}
.tk.ende h3{font-size:clamp(28px,3.4vw,50px)}
.tag-fortschritt{margin:0 var(--pad);height:3px;border-radius:3px;background:var(--hair);overflow:hidden}
.tag-fortschritt i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--maia),var(--salma),var(--fg))}

/* Akkord */
.akkord{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;max-width:1440px;margin:0 auto}
.akkord-links{display:flex;flex-direction:column;gap:26px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:44px;padding:0 16px;border-radius:12px;border:1.5px solid var(--hair);font-weight:700;font-size:14.5px;transition:background .3s,color .3s,border-color .3s,transform .4s var(--spring)}
.chip:hover{border-color:var(--fg);transform:translateY(-2px)}
.chip[aria-selected="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.akkord-text{min-height:9.5em}
.akkord-text h3{font-size:clamp(22px,2.4vw,34px);margin-bottom:10px;color:var(--accent)}
.akkord-text p{font-size:clamp(17px,1.5vw,21px);color:var(--muted);max-width:30em}
.akkord-text.wechsel>*{animation:rein .6s var(--ease) both}.akkord-text.wechsel p{animation-delay:.08s}
@keyframes rein{from{opacity:0;transform:translateY(16px);filter:blur(6px)}}
.kreis{position:relative;width:min(100%,62svh,560px);aspect-ratio:1;justify-self:center}
.kreis svg{width:100%;height:100%;overflow:visible}
.kreis .bahn{fill:none;stroke:var(--hair);stroke-width:1.5;stroke-dasharray:3 9}
.kreis .bogen{fill:none;stroke:var(--mint-3);stroke-width:5;stroke-linecap:round;stroke-dasharray:440;stroke-dashoffset:440;transition:stroke-dashoffset 1s var(--ease),opacity .4s;opacity:0}
.kreis .bogen.an{stroke-dashoffset:0;opacity:1}
.kreis .welle{fill:none;stroke:var(--mint-3);stroke-width:1.5;opacity:0;transform-origin:300px 300px}
.kreis.klingt .welle{animation:welle 1.6s var(--ease)}.kreis.klingt .welle.w2{animation-delay:.25s}
@keyframes welle{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(4.4)}}
.kopf-k{position:absolute;width:26%;aspect-ratio:1;margin:-13%;border-radius:50%;transition:transform .6s var(--spring),opacity .5s,filter .5s;opacity:.35;filter:saturate(.5)}
.kopf-k .face{width:100%;height:100%}
.kopf-k.an{opacity:1;filter:none;transform:scale(1.12)}
.kopf-k:hover{transform:scale(1.18)}
.k-salma{left:50%;top:15%}.k-maia{left:19.7%;top:67.5%}.k-socci{left:80.3%;top:67.5%}
.kopf-k.an::after{content:"";position:absolute;inset:-8%;border-radius:50%;border:2px solid currentColor;opacity:.5;animation:puls2 2.4s infinite}
.k-maia{color:var(--maia)}.k-salma{color:var(--salma)}.k-socci{color:var(--mint-3)}
@keyframes puls2{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.35);opacity:0}}
.kreis .mitte{position:absolute;left:50%;top:50%;width:20%;aspect-ratio:1;margin:-10%;border-radius:50%;background:var(--fg);color:var(--bg);font-size:clamp(16px,2vw,26px);
  display:grid;place-items:center;transition:transform .5s var(--spring)}
.kreis .mitte:hover{transform:scale(1.12)}

/* Haltung */
.haltung{gap:36px;max-width:1300px;margin:0 auto}
.mega{font-size:clamp(56px,12.5vw,220px);letter-spacing:-.05em;line-height:.86}
.mega em{font-style:normal;color:var(--maia-text)}
.haltung blockquote{font-size:clamp(30px,5.4vw,88px);letter-spacing:-.03em;line-height:1;color:var(--maia-text);margin-top:6vh;transform:rotate(-2deg);transform-origin:left}

/* Woher */
.woher{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,100px);align-items:start}
.woher>div{display:flex;flex-direction:column;gap:22px}
.zahlen{list-style:none;padding:0;display:flex;flex-direction:column}
.zahlen li{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:24px;align-items:baseline;padding:22px 0;border-top:1.5px solid var(--hair)}
.zahlen li:last-child{border-bottom:1.5px solid var(--hair)}
.zahlen b{font-size:clamp(34px,4.6vw,68px);letter-spacing:-.04em;line-height:.9;color:var(--salma-text);font-variant-numeric:tabular-nums}
.zahlen span{color:var(--muted)}

/* Schluss */
.schluss{align-items:center;text-align:center;justify-content:flex-start;gap:20px;min-height:100svh;padding:44svh var(--pad) 0}
.schluss .fuss{align-self:stretch;margin:auto calc(var(--pad)*-1) 0;padding:40px var(--pad) 28px;text-align:left}
.lmg{font-size:clamp(20px,2.6vw,36px);letter-spacing:-.02em}
.lmg .m{color:var(--maia-text)}.lmg .s{color:var(--salma-text)}
.schluss .lead{margin:0 auto}
.schluss .reihe{justify-content:center}
.schluss .klein{font-size:14px;color:var(--muted)}

@media(max-width:860px){
  .kopf{justify-content:flex-end;padding-bottom:96px;padding-top:36svh}
  .kopf-text{max-width:none;gap:14px}
  .kopf .kicker,.tipp{display:none}
  .kopf h1{font-size:clamp(34px,10.4vw,56px)}
  .kopf .lead{font-size:16px}
  .kopf .knopf{height:48px;padding:0 16px;font-size:15px}
  .runter{display:none}
  .solo{justify-content:flex-end;padding-bottom:120px}
  .solo-text{max-width:none;gap:16px}
  .riesig{top:30%;font-size:52vw}
  .tag-kopf{grid-template-columns:1fr}.uhr{font-size:54px}
  .akkord{grid-template-columns:1fr;padding-top:90px;padding-bottom:120px}
  .kreis{order:-1;width:min(86vw,40svh)}
  .akkord-text{min-height:12em}
  .woher{grid-template-columns:1fr}
  .zahlen li{grid-template-columns:1fr;gap:6px}
  .schluss{padding-top:34svh;gap:16px}
  .schluss .klein,.schluss .fuss>span:first-child{display:none}
  .schluss .fuss{padding:22px var(--pad) 92px;justify-content:center}
}

/* niedrige Fenster (Laptop mit vielen Leisten, quer gehaltenes Tablet) */
@media(max-height:720px) and (min-width:861px){
  .voll{padding-top:84px;padding-bottom:44px}
  .runter,.tipp{display:none}
  .solo-text{gap:14px}
  .kopf-text{gap:16px}
  .tag-fest{gap:14px}
  .tag-kopf{margin-top:60px}
  .tag-kopf h2{font-size:clamp(26px,6.4svh,54px)}
  .uhr{font-size:clamp(34px,9svh,80px)}
  .tk{min-height:0;height:calc(100svh - 250px);padding:16px;gap:8px}
  .tk h3{font-size:clamp(18px,3.6svh,26px)}
  .mini-ui{font-size:13px;gap:6px}
  .mini-ui.quer .foto{width:30%}
  .kreis{width:min(100%,56svh)}
  .akkord-links{gap:16px}
  .akkord .titel-m{font-size:clamp(28px,6.6svh,60px)}
  .akkord-text{min-height:7.5em}
  .mega{font-size:clamp(50px,20svh,200px)}
}

@media(max-width:360px){.gross{font-size:24px}.kopf h1{font-size:32px}.uhr{font-size:44px}}

.tk-mehr{font-weight:700;font-size:14px;text-decoration:none;border-bottom:1.5px solid currentColor;align-self:flex-start;padding-bottom:2px;opacity:.85;transition:opacity .3s}
.tk-mehr:hover{opacity:1}
.ak-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px}
.ak-links .mehr-zeile{margin-top:0}
.zahlen a{color:inherit}

/* ===== Feinschliff nach dem Prüfbericht (14.11.2026) ===== */
.buehne{z-index:3}                         /* Tropfen liegen über dem Inhalt, damit man sie wirklich antippen kann */
.riesig{top:auto;bottom:-5vw;transform:translate(var(--zx,0),0);-webkit-text-stroke:1.5px color-mix(in srgb,var(--accent) 22%,transparent)}
.gross{font-family:'DM Sans',sans-serif;font-weight:500;font-size:clamp(24px,3.3vw,52px);line-height:1.18;letter-spacing:-.02em;max-width:24em}
.klein-gross{font-size:clamp(20px,2.4vw,36px)}
.gefuehl span{font-family:'DM Sans',sans-serif;font-weight:700;letter-spacing:0}
.mega{font-size:clamp(52px,10vw,190px)}
.uhr{color:var(--fg);-webkit-text-stroke:0;opacity:.9}
.tk{min-height:min(370px,46svh)}
.tk.ende{background:linear-gradient(135deg,#FB8FB3,#5FE3B4);color:#1A1D1F}
.zahlen li{grid-template-columns:minmax(200px,34%) 1fr}
.schluss .titel{font-size:clamp(34px,min(6.4vw,11svh),104px)}
@media(max-height:720px) and (min-width:861px){
  .schluss{padding-top:38svh;gap:12px}
  .schluss .klein{display:none}
  .schluss .fuss{padding:16px var(--pad) 14px}
}
@media(max-width:860px){.riesig{top:12%;bottom:auto}.zahlen li{grid-template-columns:1fr}.gross{font-size:clamp(22px,6.2vw,34px)}}

.mega{font-size:clamp(46px,8.6vw,170px)}
.mega em{white-space:nowrap}