/* twins.mov — gemeinsame Styles der Unterseiten (Basis, Header, Abbinder, Coin, Buttons).
   Wird von work, about, ai, production und allen Case-Seiten geladen. Seitenspezifisches bleibt in der jeweiligen Seite. */
:root{--bg:#1e1e1f;--ink:#f1f0ec;--muted:rgba(241,240,236,.58);--line:rgba(241,240,236,.14);--padx:clamp(18px,2.2vw,32px);--hot:#ff3b1f;color-scheme:dark}
html[data-theme=light]{--bg:#e8e7dc;--ink:#141414;--muted:rgba(20,20,20,.58);--line:rgba(20,20,20,.14);color-scheme:light}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--ink);font-family:'Archivo',sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .9s ease,color .9s ease}
a{color:inherit;text-decoration:none}
img,video{display:block}
.serif{font-family:Georgia,'Times New Roman',serif;font-weight:400}
.grain{position:fixed;inset:-120%;z-index:900;pointer-events:none;opacity:.1;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:gm 1.2s steps(4) infinite}
@keyframes gm{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}
.top{position:fixed;top:0;left:0;right:0;z-index:400;display:flex;justify-content:space-between;align-items:center;padding:16px var(--padx);mix-blend-mode:difference;color:#fff}
.top .wm{font-weight:800;font-size:clamp(22px,2.1vw,32px);letter-spacing:-.01em;line-height:1}
.top nav{display:flex;gap:22px;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase}
.top nav a{opacity:.82}
.top nav a:hover{opacity:1}
@media(max-width:700px){.top nav{gap:12px;font-size:9px;letter-spacing:.08em;white-space:nowrap}}
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.9,.24,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.grain{animation:none}}
/* ================= ABBINDER ================= */
/* Abbinder und Abschluss teilen sich einen Hintergrund: der Hub-Shader laeuft von hell oben bis zu den Sternen unten */
.finale{position:relative;margin-top:clamp(90px,15vh,170px);background:linear-gradient(180deg,#ecebee 0%,#d8c3b8 45%,#c9773f 100%);isolation:isolate;overflow:hidden}
.finale>canvas{position:absolute;left:0;top:0;width:100%;height:calc(100% + 200svh);display:block;z-index:0;pointer-events:none}
.end{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;min-height:100svh;color:#140d09}
.end-l{background:transparent;justify-content:flex-start;padding:clamp(40px,7vh,70px) var(--padx) 28px;display:flex;flex-direction:column}
.end-l .lead{font-size:clamp(15px,1.3vw,19px);max-width:46ch}
.sub{display:flex;gap:10px;margin-top:clamp(24px,4vh,40px);max-width:none}
.sub input{flex:1;min-width:0;font:inherit;font-size:clamp(14px,1.2vw,17px);padding:15px 18px;border:0;border-radius:3px;background:#f6f1ec;color:#140d09}
.sub button{font:inherit;font-size:clamp(14px,1.2vw,17px);padding:15px 24px;border-radius:3px;border:0;background:#140d09;color:#f6f1ec;cursor:pointer}
.sub-ok{margin-top:8px;font-size:12px;min-height:1em}
.end-grp{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:clamp(40px,7vh,70px);padding:clamp(30px,5vh,50px) 0;border-top:1px solid rgba(20,13,9,.75);border-bottom:1px solid rgba(20,13,9,.75)}
.end-grp h3{font-weight:400;font-size:clamp(40px,4.2vw,64px);line-height:.98;letter-spacing:-.035em}
.end-grp>div>p{margin-top:clamp(24px,5vh,50px);font-size:clamp(16px,1.4vw,21px);line-height:1.25;max-width:24ch}
.end-grp .units a{display:block;font-size:clamp(17px,1.5vw,22px)}
.end-grp .units a svg{width:.95em;height:.95em;vertical-align:-.05em;margin-left:8px}
.end-grp .units a span{display:block;margin-top:6px;font-size:13.5px;line-height:1.4;max-width:34ch}
.end-grp .units a+a{margin-top:clamp(26px,5vh,48px)}
.end-grp .units a:hover{opacity:.7}
@media(max-width:600px){.end-grp{grid-template-columns:1fr}}
.end-nav{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:10px 20px;margin-top:clamp(50px,10vh,120px);font-size:clamp(16px,1.5vw,22px);letter-spacing:-.01em}
.end-nav a:hover{opacity:.6}
.end-r{position:relative;z-index:1;background:#2f2f30;color:#f2f1ee;display:flex;flex-direction:column;align-items:center;padding:clamp(40px,7vh,70px) var(--padx) 28px}
.live{display:flex;align-items:center;gap:9px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.live i{width:7px;height:7px;border-radius:50%;background:var(--hot);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
.stack{position:relative;flex:1;width:100%;max-width:520px;min-height:420px;margin:30px 0}
.stack a{position:absolute;width:44%;aspect-ratio:9/16;border-radius:6px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);transition:transform .6s cubic-bezier(.22,.9,.24,1)}
.stack a img{width:100%;height:100%;object-fit:cover}
.stack a:nth-child(1){left:4%;top:4%;transform:rotate(-4deg)}
.stack a:nth-child(2){left:30%;top:14%;transform:rotate(2deg);z-index:2}
.stack a:nth-child(3){left:54%;top:26%;transform:rotate(5deg);z-index:3}
.stack:hover a:nth-child(1){transform:rotate(-8deg) translate(-12px,-6px)}
.stack:hover a:nth-child(3){transform:rotate(9deg) translate(12px,6px)}
.soc-ic{display:flex;gap:16px}
.soc-ic svg{width:18px;height:18px}
@media(max-width:860px){.end{grid-template-columns:1fr}.end-r{order:-1;min-height:auto;padding-bottom:40px}.stack{min-height:380px}}
/* Mobil: weniger Luft zwischen Hero-Liste und Featuring */
@media(max-width:700px){.hero{padding-top:84px!important;padding-bottom:8px!important}.feat{padding-top:44px!important}}
.coin{bottom:calc(clamp(14px,2.4vh,30px) + env(safe-area-inset-bottom,0px))}
.bl-foot{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
html.atend .top{opacity:0;pointer-events:none}
.bloom{position:relative;z-index:1;height:100svh;min-height:520px;background:transparent;overflow:hidden}
.bloom canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bl-foot{position:absolute;z-index:2;left:var(--padx);bottom:20px;display:flex;gap:22px;font-size:12.5px;color:rgba(255,255,255,.8)}
.bl-foot a:hover{opacity:.6}
.end-legal{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:auto;padding-top:clamp(40px,7vh,70px);font-size:12.5px;color:rgba(20,13,9,.85)}
.end-legal a:hover{opacity:.6}
.top{transition:opacity .4s}
.coin-in{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.coin svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.coin:hover .coin-in{opacity:.85}
@media(prefers-reduced-motion:reduce){.live i{animation:none}}
/* ===== Option: Buttons im Apple-Glass-Look ===== */
.pills{gap:6px}
.pills button,.btn,.rail-ctl button,.hero-snd,.sub button{
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);
  background:color-mix(in srgb,var(--ink) 9%,transparent)!important;color:var(--ink)!important;
  border:0!important;border-radius:4px!important;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.55);
  transition:background .25s,transform .25s,box-shadow .25s,border-color .25s}
.pills button{padding:11px 18px!important}
.pills button:hover,.btn:hover,.rail-ctl button:hover:not(:disabled),.hero-snd:hover,.sub button:hover{
  background:color-mix(in srgb,var(--ink) 16%,transparent)!important;transform:translateY(-1px)}
.pills button.on{background:color-mix(in srgb,var(--hot) 78%,transparent)!important;color:#fff!important;
  box-shadow:0 10px 30px -12px color-mix(in srgb,var(--hot) 70%,transparent)}
.btn{padding:13px 22px!important;font-size:13px}
.hero-snd{background:rgba(255,255,255,.14)!important;color:#fff!important;}
.sub input{border-radius:4px!important;padding-left:22px!important}
.sub button{background:rgba(20,13,9,.82)!important;color:#f6f1ec!important;padding-left:26px!important;padding-right:26px!important}
.sub button:hover{background:rgba(20,13,9,.95)!important}