/* ALIVEMAEX — shared styles */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');
:root{
  --blau:#1E74D9; --mondblau:#12244A; --gold:#C99A3A; --orange:#C4622E;
  --creme:#F4ECDA; --tabak:#3A2A1C; --terra:#B4553C; --lila:#8C7AA0;
  --ink:#2a2521; --ink2:#37302a;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --disp:'Oswald','Inter',sans-serif;
  --maxw:1180px; --ease:cubic-bezier(.16,.72,.29,1);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--font); background:#2a2521; color:var(--creme); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
::selection{ background:var(--lila); color:var(--creme); }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* FILMKORN */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.2; mix-blend-mode:overlay;
  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='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:190px;
  animation:grainshift .5s steps(3) infinite;
}
@keyframes grainshift{ 0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)} 50%{transform:translate(1%,-2%)} 75%{transform:translate(-1%,2%)} 100%{transform:translate(2%,-1%)} }

.display{ font-family:var(--disp); font-weight:700; text-transform:uppercase; letter-spacing:.015em; line-height:.98; }
.lower{ text-transform:lowercase; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,56px); }
section{ position:relative; }
.reveal{ opacity:0; transform:translateY(38px); filter:blur(7px); transition:opacity 1.9s var(--ease), transform 1.9s var(--ease), filter 1.9s var(--ease); }
.reveal.in{ opacity:1; transform:none; filter:none; }
.eyebrow{ font-size:.78rem; letter-spacing:.26em; color:var(--gold); text-transform:uppercase; font-weight:700; margin-bottom:22px; }
.lede{ font-size:clamp(1.35rem,2.6vw,2.1rem); font-weight:500; line-height:1.32; max-width:24ch; }
.prose{ font-size:clamp(1rem,1.25vw,1.15rem); max-width:56ch; color:rgba(244,236,218,.82); }
.prose + .prose{ margin-top:1.3em; }

.caustics{ position:absolute; inset:0; pointer-events:none; mix-blend-mode:soft-light; opacity:.12; }
.caustics svg{ width:100%; height:100%; }

/* ===================== NAV (shared) ===================== */
.nav{ display:flex; gap:clamp(14px,2.4vw,30px); flex-wrap:wrap; }
.nav a{ position:relative; opacity:.85; transition:opacity .3s; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.nav a:hover{ opacity:1; } .nav a:hover::after{ transform:scaleX(1); }
.nav a.on{ color:var(--gold); opacity:1; }
.brand{ font-weight:700; letter-spacing:.18em; display:inline-flex; align-items:center; gap:9px; }
.brandmark{ width:20px; height:20px; object-fit:contain; flex:0 0 auto; }

/* Subpage-Kopf */
.pagehead{ position:relative; z-index:40; display:flex; justify-content:space-between; align-items:center; gap:18px 26px; flex-wrap:wrap;
  padding:24px clamp(20px,5vw,56px); background:transparent; }

/* Subpage-Titelkopf */
.page-head{ padding:clamp(70px,12vw,150px) 0 clamp(30px,5vw,60px); }
.page-head h1{ font-size:clamp(2.4rem,8vw,5.5rem); }
.page-head .sub{ margin-top:18px; opacity:.6; font-size:1rem; max-width:44ch; }

/* ===================== HERO ===================== */
.hero{
  position:relative; height:100svh; min-height:660px;
  display:flex; flex-direction:column; justify-content:space-between;
  color:var(--creme); overflow:hidden; background:#2a2521;
}
.hero-photo{ position:absolute; inset:0; z-index:0; }
.hero-photo video, .hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; }
.hero-photo::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(201,154,58,.14),rgba(52,28,14,.18)); mix-blend-mode:soft-light; }
.hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(10,18,34,.40) 0%,transparent 24%,transparent 52%,rgba(8,14,28,.78) 100%); }
.hero::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; box-shadow:inset 0 0 200px 40px rgba(6,10,20,.5); }

.topbar{ position:relative; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; padding:24px clamp(20px,5vw,56px); font-size:.85rem; letter-spacing:.08em; text-shadow:0 1px 12px rgba(6,10,20,.55); }
.topbar .brand{ transition:color .3s; }
.topbar .brand:hover{ color:var(--gold); }

.hero-center{ position:relative; z-index:5; flex:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 clamp(20px,5vw,56px); }
.hero-title{ font-family:var(--disp); font-weight:600; text-transform:lowercase; letter-spacing:0; line-height:.82; font-size:clamp(3.4rem,17vw,12rem); text-shadow:0 2px 60px rgba(6,10,20,.5); }
.hero-foot{ position:relative; z-index:5; display:flex; flex-direction:column; align-items:center; gap:20px; padding:0 20px 32px; text-align:center; }
.hero-release{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:center; font-size:.85rem; letter-spacing:.1em; text-shadow:0 1px 10px rgba(6,10,20,.6); }
.btn-listen{ padding:9px 24px; border:1px solid rgba(244,236,218,.55); border-radius:40px; letter-spacing:.14em; transition:.3s; }
.btn-listen:hover{ background:var(--gold); border-color:var(--gold); color:#2a2521; }
.platforms{ display:flex; gap:clamp(14px,1.8vw,22px); flex-wrap:wrap; }
.platforms a{ padding-bottom:3px; border-bottom:1px solid rgba(244,236,218,.4); transition:border-color .35s,color .35s; }
.platforms a:hover{ color:var(--gold); border-color:var(--gold); }

.scrollcue{ position:relative; z-index:5; padding:0 clamp(20px,5vw,56px) 32px; font-size:1.1rem; opacity:.8; }
.scrollcue .arrow{ display:inline-block; animation:bob 2.6s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* ===================== RELEASES ===================== */
.musik{ padding:clamp(50px,8vw,100px) 0 clamp(90px,13vw,160px); background:#2a2521; }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:28px; }
.sec-head h2{ font-size:clamp(1.8rem,4.4vw,2.6rem); }
.sec-head .hint{ font-size:.85rem; opacity:.45; }
.tabs{ display:flex; gap:10px; margin-bottom:34px; }
.tab{ font-family:inherit; font-size:.85rem; letter-spacing:.1em; background:transparent; border:1px solid rgba(244,236,218,.22); color:rgba(244,236,218,.6); padding:9px 20px; cursor:pointer; border-radius:2px; transition:.3s; }
.tab:hover{ border-color:var(--gold); color:var(--gold); }
.tab.active{ background:var(--creme); border-color:var(--creme); color:var(--mondblau); }
.grid{ display:grid; gap:clamp(14px,2vw,26px); grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.release{ position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:var(--mondblau); color:var(--creme); transition:transform .6s var(--ease); }
.release .cov{ position:absolute; inset:0; }
.release .grade{ position:absolute; inset:0; mix-blend-mode:soft-light; opacity:.6; }
.release::after{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none; box-shadow:inset 0 0 90px 10px rgba(20,14,6,.5); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:120px; mix-blend-mode:overlay; opacity:.5; }
.release .meta{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; justify-content:space-between; padding:18px; }
.release .rt{ font-size:1.3rem; text-align:right; text-shadow:0 2px 24px rgba(0,0,0,.35); }
.release .rname{ font-size:.7rem; letter-spacing:.12em; opacity:.85; }
.release .rfoot{ display:flex; justify-content:space-between; align-items:flex-end; }
.release .rdate{ font-size:.72rem; opacity:.8; }
.release .play{ font-size:.72rem; letter-spacing:.12em; padding:6px 12px; border:1px solid rgba(244,236,218,.55); border-radius:2px; transition:.35s; }
.release .rinfo{ position:absolute; inset:0; z-index:6; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding:20px; background:linear-gradient(180deg, transparent 34%, rgba(18,10,4,.92)); opacity:0; transform:translateY(8px); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.release:hover .rinfo{ opacity:1; transform:none; }
.release .ri-t{ font-family:var(--disp); font-size:clamp(1.2rem,2.2vw,1.6rem); line-height:1; text-transform:uppercase; letter-spacing:.01em; }
.release .ri-meta{ display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.72rem; letter-spacing:.08em; opacity:.9; }
.release .ri-play{ color:var(--gold); white-space:nowrap; }
.release:hover{ transform:translateY(-6px); }
.release:hover .grade{ opacity:.85; }

/* ===================== FRAGMENT ===================== */
.fragment{ position:relative; overflow:hidden; padding:clamp(130px,24vw,300px) 0; background:linear-gradient(180deg,#2a2521 0%,#4a2c18 100%); }
.fragment p{ font-size:clamp(1.9rem,6vw,4.6rem); font-weight:500; line-height:1.1; max-width:15ch; letter-spacing:-.01em; }
.fragment .sm{ color:var(--gold); }

/* ===================== VISUALS ===================== */
.frag{ padding:clamp(30px,5vw,60px) 0 clamp(90px,13vw,150px); background:#37302a; }
.fgrid{ display:grid; gap:clamp(8px,1.2vw,14px); grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); }
.tile{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--mondblau); }
.tile .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease); }
.tile:hover .bg{ transform:scale(1.04); }
.tile .grade{ position:absolute; inset:0; mix-blend-mode:soft-light; opacity:.3; }
.tile::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; box-shadow:inset 0 0 70px 8px rgba(20,14,6,.45); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:120px; mix-blend-mode:overlay; opacity:.5; }
.tile:hover .grade{ opacity:.8; }

/* ===================== LIEBE ÜBER ANGST (Manifest + Signup) ===================== */
.manifest{ padding:clamp(120px,20vw,280px) 0; text-align:center; background:#2a2521; overflow:hidden; }
.manifest .wrap{ position:relative; z-index:1; }
.mannequin{ position:absolute; left:-1%; bottom:0; height:min(88%,640px); width:auto; opacity:.15; pointer-events:none; z-index:0; filter:contrast(.9); }
@media(max-width:680px){ .mannequin{ opacity:.09; height:56%; left:-14%; } }
.about-page{ position:relative; overflow:hidden; }
.about-page > .wrap{ position:relative; z-index:1; }
.mannequin-tr{ position:absolute; right:-1%; top:10px; height:min(80%,720px); width:auto; opacity:.28; pointer-events:none; z-index:0; transform:scaleX(-1); filter:contrast(.95); }
@media(max-width:680px){ .mannequin-tr{ opacity:.16; height:50%; right:-14%; } }
.manifest h2{ font-size:clamp(2.8rem,13vw,9rem); line-height:.95; }
.manifest h2 .of{ color:var(--orange); }
.manifest .sub{ margin:30px auto 34px; max-width:32ch; opacity:.72; font-size:1rem; }
.signup{ display:flex; gap:10px; max-width:440px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
.signup input{ flex:1 1 240px; min-width:0; background:transparent; border:1px solid rgba(244,236,218,.4); color:var(--creme); padding:15px 18px; font-family:inherit; font-size:1rem; outline:none; transition:border-color .35s; }
.signup input::placeholder{ color:rgba(244,236,218,.5); }
.signup input:focus{ border-color:var(--lila); }
.signup button{ background:var(--orange); color:var(--creme); border:none; cursor:pointer; padding:15px 26px; font-family:inherit; font-size:.95rem; letter-spacing:.06em; transition:.35s; }
.signup button:hover{ background:var(--gold); color:var(--mondblau); }

/* ===================== SHOP ===================== */
.shopgrid{ display:grid; gap:clamp(16px,2.5vw,32px); grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.product{ position:relative; }
.product .ph{ aspect-ratio:1/1; background:linear-gradient(150deg,var(--mondblau),#2a2521); position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.product .ph span{ font-size:.8rem; letter-spacing:.16em; opacity:.4; text-transform:uppercase; }
.product .pn{ margin-top:12px; font-size:.95rem; }
.product .pp{ font-size:.85rem; opacity:.55; margin-top:2px; }
.soon{ display:inline-block; margin-top:26px; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; opacity:.5; border:1px solid rgba(244,236,218,.25); padding:8px 16px; border-radius:40px; }

/* ===================== ABOUT ===================== */
.about-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px); align-items:start; }
@media(max-width:760px){ .about-cols{ grid-template-columns:1fr; gap:34px; } }
.press-grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); margin-top:20px; }
.press-grid .tile{ aspect-ratio:4/5; }
.kit{ display:flex; flex-wrap:wrap; gap:14px; margin-top:20px; }
.kit a{ font-size:.9rem; border:1px solid rgba(244,236,218,.3); padding:11px 20px; border-radius:40px; transition:.3s; letter-spacing:.04em; }
.kit a:hover{ background:var(--gold); border-color:var(--gold); color:#2a2521; }
.contact-rows{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:30px; margin-top:10px; }
.contact-rows h3{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; opacity:.5; margin-bottom:10px; font-weight:700; }
.contact-rows a{ border-bottom:1px solid transparent; transition:.3s; }
.contact-rows a:hover{ color:var(--gold); border-color:var(--gold); }

/* ===================== FOOTER ===================== */
footer{ background:#2a2521; padding:60px 0 46px; border-top:1px solid rgba(244,236,218,.08); }
.foot{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:26px; }
.foot .links{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.foot .links a{ display:block; opacity:.78; transition:opacity .3s, transform .3s; } .foot .links a:hover{ opacity:1; transform:translateY(-2px); }
.foot .links img{ display:block; width:22px; height:22px; }
.foot .fine{ font-size:.75rem; opacity:.4; max-width:34ch; }
.foot .fine a{ border-bottom:1px solid rgba(244,236,218,.2); }

/* ===================== DICHTE DER REALITÄT ===================== */
.density{ position:fixed; inset:0; z-index:57; pointer-events:none; }
.density .tint{ position:absolute; inset:0; background:radial-gradient(130% 100% at 50% 24%, rgba(206,140,66,.07), transparent 60%); mix-blend-mode:screen; }
.density .milk{ position:absolute; inset:0; background:linear-gradient(180deg, transparent 34%, rgba(216,188,150,.07) 100%); opacity:0; transition:opacity 1.4s linear; }
.density .press{ position:absolute; inset:0; box-shadow:inset 0 0 300px 90px rgba(30,16,8,.30); }
.diverlight{ position:fixed; z-index:58; top:0; left:0; width:560px; height:560px; margin:-280px 0 0 -280px; pointer-events:none; border-radius:50%; opacity:0; transition:opacity 1s ease; mix-blend-mode:screen;
  background:radial-gradient(circle, rgba(214,150,86,.11), rgba(201,154,58,.06) 38%, transparent 66%); }
@media (hover:none){ .diverlight{ display:none; } }

.tile .bg, .release img{ filter:contrast(.95) brightness(1.03) saturate(.95); }
.hero-photo video, .hero-photo img{ filter:url(#refract) contrast(.95) brightness(1.03) saturate(.95); transform:scale(1.07); transform-origin:center; }
.manifest h2{ filter:url(#refract-soft); }
.hero-photo::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(206,140,66,.07), rgba(44,24,12,.14)); mix-blend-mode:soft-light; }
.tile::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(180deg, rgba(206,140,66,.08), rgba(44,24,12,.16)); mix-blend-mode:soft-light; }

.weightless{ animation:weightless 13s ease-in-out infinite; }
@keyframes weightless{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }

/* SOUND-TOGGLE */
.soundtoggle{
  position:fixed; z-index:70; right:22px; bottom:22px;
  display:flex; align-items:center; gap:10px; padding:11px 17px;
  background:rgba(10,20,40,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(244,236,218,.25); border-radius:40px; color:var(--creme);
  cursor:pointer; font-family:inherit; font-size:.78rem; letter-spacing:.1em;
  transition:border-color .3s, background .3s;
}
.soundtoggle:hover{ border-color:var(--gold); background:rgba(10,20,40,.65); }
.soundtoggle .eq{ display:flex; align-items:flex-end; gap:2px; height:14px; }
.soundtoggle .eq i{ width:2px; height:3px; background:var(--gold); display:block; border-radius:1px; }
.soundtoggle.playing .eq i{ animation:eq .9s ease-in-out infinite; }
.soundtoggle.playing .eq i:nth-child(2){ animation-delay:.18s; }
.soundtoggle.playing .eq i:nth-child(3){ animation-delay:.36s; }
.soundtoggle.playing .eq i:nth-child(4){ animation-delay:.52s; }
@keyframes eq{ 0%,100%{height:3px} 50%{height:14px} }

/* ===================== INTRO / ABTAUCHEN (erster Besuch) ===================== */
.intro{ position:fixed; inset:0; z-index:200; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; cursor:pointer;
  background:radial-gradient(130% 110% at 50% -15%, #7b6748 0%, #3a3128 34%, #221c17 66%, #140f0b 100%);
  transition:transform 1.4s var(--ease), opacity 1.2s ease; }
.intro.dive{ transform:translateY(-10%) scale(1.05); opacity:0; }
.intro-caust{ position:absolute; inset:0; mix-blend-mode:soft-light; opacity:.5; pointer-events:none;
  background:radial-gradient(60% 40% at 30% 18%, rgba(255,240,200,.5), transparent 60%), radial-gradient(50% 40% at 72% 8%, rgba(255,240,200,.4), transparent 60%);
  animation:in-caust 3s ease-in-out infinite alternate; }
@keyframes in-caust{ 0%{transform:translateY(0)} 100%{transform:translateY(34px)} }
.intro-bubbles{ position:absolute; inset:0; pointer-events:none; }
.intro-bubbles i{ position:absolute; bottom:-30px; border-radius:50%; background:radial-gradient(circle at 35% 30%, rgba(244,236,218,.6), rgba(200,170,120,.15) 60%, transparent 70%); animation:in-bub linear forwards; }
@keyframes in-bub{ 0%{transform:translateY(0) scale(1); opacity:0} 15%{opacity:.7} 100%{transform:translateY(-108vh) scale(1.2); opacity:0} }
.intro-badge{ width:56px; height:56px; opacity:0; animation:in-badge 2.2s var(--ease) both .1s; }
.intro-word{ font-family:var(--disp); text-transform:lowercase; letter-spacing:.02em; color:var(--creme); font-size:clamp(2.2rem,8vw,5rem); opacity:0; animation:in-word 2.4s var(--ease) both .2s; text-shadow:0 4px 40px rgba(0,0,0,.4); }
.intro-hint{ position:absolute; bottom:44px; font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(244,236,218,.5); animation:in-hint 2s ease both 1s; }
@keyframes in-word{ 0%{opacity:0; transform:translateY(26px) scale(.94); filter:blur(10px)} 45%{opacity:1; filter:blur(0)} 100%{opacity:1; transform:none} }
@keyframes in-badge{ 0%{opacity:0; transform:translateY(-14px) rotate(-8deg)} 60%{opacity:1} 100%{opacity:.95; transform:none} }
@keyframes in-hint{ 0%,55%{opacity:0} 100%{opacity:1} }

/* ===================== COOKIE-BANNER ===================== */
.cookie{ position:fixed; z-index:80; left:16px; right:16px; bottom:16px; max-width:640px; margin:0 auto;
  display:flex; gap:12px 22px; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:16px 20px; background:rgba(42,37,33,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(244,236,218,.18); border-radius:12px; box-shadow:0 12px 44px rgba(0,0,0,.42);
  transform:translateY(160%); transition:transform .6s var(--ease); }
.cookie.in{ transform:none; }
.cookie p{ font-size:.82rem; opacity:.82; max-width:44ch; }
.cookie p a{ border-bottom:1px solid rgba(244,236,218,.35); }
.cookie button{ font-family:inherit; font-size:.8rem; letter-spacing:.08em; cursor:pointer; border-radius:40px; padding:10px 22px; border:none; background:var(--gold); color:#2a2521; transition:.3s; }
.cookie button:hover{ background:var(--orange); color:var(--creme); }

/* ===================== CRT / RÖHREN-TV ===================== */
.crt{ position:fixed; inset:0; z-index:59; pointer-events:none; }
.crt .lines{ position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px); mix-blend-mode:multiply; opacity:.45; }
.crt .roll{ position:absolute; left:0; right:0; height:24%; top:-24%; background:linear-gradient(180deg, transparent, rgba(180,220,210,.05), transparent); animation:crtroll 8s linear infinite; }
.crt .glow{ position:absolute; inset:0; background:radial-gradient(128% 112% at 50% 50%, transparent 56%, rgba(22,11,6,.42) 100%); }
@keyframes crtroll{ 0%{transform:translateY(0)} 100%{transform:translateY(560%)} }

/* Stärkerer Röhren-TV-Screen im Hero (oben deutlich, animiertes Video dahinter) */
.tvscreen{ position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; animation:tvflick 3.2s steps(22) infinite; }
.tvscreen .lines{ position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(0,0,0,.46) 0 1px, rgba(0,0,0,.06) 1px 2px, transparent 2px 4px); mix-blend-mode:multiply; opacity:.95; }
.tvscreen .curve{ position:absolute; inset:0; border-radius:min(4vw,54px); box-shadow:inset 0 0 260px 66px rgba(8,3,0,.86), inset 0 0 100px rgba(0,0,0,.6), inset 3px 0 30px rgba(255,60,60,.10), inset -3px 0 30px rgba(60,140,255,.12); }
.tvscreen .bar{ position:absolute; left:0; right:0; height:16%; top:-16%; background:linear-gradient(180deg, transparent, rgba(255,240,210,.16), transparent); animation:tvroll 5.5s linear infinite; }
@keyframes tvroll{ 0%{transform:translateY(0)} 100%{transform:translateY(760%)} }
@keyframes tvflick{ 0%,100%{opacity:1} 45%{opacity:.9} 47%{opacity:1} 68%{opacity:.86} 70%{opacity:1} 92%{opacity:.94} }

/* ===================== HAUPT-REITER (music / video) ===================== */
.maintabs{ display:flex; gap:26px; margin-bottom:34px; border-bottom:1px solid rgba(244,236,218,.12); }
.maintab{ font-family:var(--disp); font-size:clamp(1.1rem,2.4vw,1.5rem); text-transform:uppercase; letter-spacing:.02em; background:none; border:none; color:rgba(244,236,218,.45); padding:4px 2px 14px; cursor:pointer; position:relative; transition:color .3s; }
.maintab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.maintab:hover{ color:var(--creme); }
.maintab.active{ color:var(--creme); }
.maintab.active::after{ transform:scaleX(1); }
.panel[hidden]{ display:none; }
.vgrid{ display:grid; grid-template-columns:1fr; gap:20px; }

/* ===================== YOUTUBE-VIDEO (TV-Rahmen) ===================== */
.videoft{ padding:clamp(50px,8vw,100px) 0; }
.tvframe{ position:relative; max-width:900px; margin:0 auto; aspect-ratio:16/9; overflow:hidden; border-radius:min(2vw,18px); background:#000; box-shadow:0 24px 70px rgba(0,0,0,.5); border:1px solid rgba(244,236,218,.1); }
.tvframe iframe, .tvframe img{ position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; }
.tvframe .playbtn{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:74px; height:74px; border-radius:50%; background:rgba(42,37,33,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); border:1px solid rgba(244,236,218,.5); transition:.3s; }
.tvframe .playbtn::after{ content:""; position:absolute; left:54%; top:50%; transform:translate(-50%,-50%); border-style:solid; border-width:11px 0 11px 19px; border-color:transparent transparent transparent var(--creme); }
.ytlink:hover .playbtn{ background:var(--orange); border-color:var(--orange); transform:translate(-50%,-50%) scale(1.08); }
.ytlink:hover img{ transform:scale(1.03); transition:transform 1s var(--ease); }
.tvframe .lines{ position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,0,0,.24) 0 1px,transparent 1px 3px); mix-blend-mode:multiply; opacity:.4; }
.tvframe .curve{ position:absolute; inset:0; pointer-events:none; border-radius:min(2vw,18px); box-shadow:inset 0 0 90px 16px rgba(12,5,0,.42); }

/* ===================== CANVAS-VIDEOS (transmissions) ===================== */
.canvas{ padding:clamp(70px,11vw,150px) 0; background:var(--ink); }
.canvas .row{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,2vw,22px); max-width:540px; margin:0 auto; }
.canvasclip{ position:relative; aspect-ratio:9/16; overflow:hidden; border-radius:min(2.5vw,20px); background:#000; box-shadow:0 24px 70px rgba(0,0,0,.5); border:1px solid rgba(244,236,218,.10); }
.canvasclip video{ width:100%; height:100%; object-fit:cover; filter:contrast(.98) saturate(.97); }
.canvasclip .lines{ position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1px, transparent 1px 3px); mix-blend-mode:multiply; opacity:.7; }
.canvasclip .curve{ position:absolute; inset:0; pointer-events:none; border-radius:min(2.5vw,20px); box-shadow:inset 0 0 110px 20px rgba(12,5,0,.62), inset 2px 0 20px rgba(255,60,60,.08), inset -2px 0 20px rgba(60,140,255,.09); }
.canvasclip .bar{ position:absolute; left:0; right:0; height:18%; top:-18%; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(255,240,210,.10),transparent); animation:tvroll 5.5s linear infinite; }

/* ===================== INTERAKTION: Wasser-Ripple beim Klick ===================== */
.ripple{ position:fixed; z-index:56; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); border:1px solid rgba(140,190,180,.55); box-shadow:0 0 26px rgba(201,154,58,.28), inset 0 0 26px rgba(140,190,180,.18); mix-blend-mode:screen; animation:rippleout 1.5s var(--ease) forwards; }
@keyframes rippleout{ 0%{opacity:.55; width:12px; height:12px} 100%{opacity:0; width:360px; height:360px} }

/* Unterseiten lebendiger: Titel schwebt & bricht sich leicht */
.page-head h1{ filter:url(#refract-soft); animation:weightless 14s ease-in-out infinite; }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } .reveal{ opacity:1; transform:none; } }
@media (max-width:680px){ .nav{ gap:14px; font-size:.8rem; } .crt .lines{ opacity:.3; } }