/* ==========================================================================
   Fancontent.de — Redesign
   Editorial Brutalism. Dark only. Eine Akzentfarbe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted)
   -------------------------------------------------------------------------- */
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-mono-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/dm-mono-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/dm-mono-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/dm-mono-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin-ext-400-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/vt323-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/vt323-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/oswald-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/oswald-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/oswald-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/oswald-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root{
  --accent:#E4002B;
  --bg:#0d0d0d;
  --bg-soft:#141313;
  --bg-tile:#1a1a1a;
  --bg-card:#161616;
  --line:#201D1E;
  --line-strong:#3a3a3a;
  --line-input:#4E4E4E;
  --fg:#fff;
  --fg-1:#ededed;
  /* Fliesstext, beide Stufen um 8% aufgehellt: a8->b5 (168->181) und
     9a->a6 (154->166). Kontrast auf dem Seitenhintergrund steigt damit von
     8,17:1 auf 9,48:1 bzw. von 6,91:1 auf 7,98:1. */
  --fg-2:#b5b5b5;
  --fg-3:#a6a6a6;
  --fg-4:#8b8b8b;      /* WCAG-tauglicher Ersatz fuer #777 auf Mono-Labels */
  --fg-5:#3a3a3a;
  --gray:1;            /* Graustufen-Faktor der Fotografie */
  --ticker:38s;
  --pad-x:40px;
  --gap-section:132px;
  --ease-out:cubic-bezier(0.16,1,0.3,1);

  --f-cond:'helvetica-neue-lt-pro-cond','Oswald','Haettenschweiler','Arial Narrow',sans-serif;
  --f-serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --f-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --f-sans:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --f-pixel:'VT323','DM Mono',monospace;
}

/* --------------------------------------------------------------------------
   3. Reset / Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--f-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%;}
a,button{-webkit-tap-highlight-color:rgba(228,0,43,0.18);}
button{font:inherit;color:inherit;}
h1,h2,h3,h4,p{margin:0;}
/* Schutz vor ueberlangen Woertern (deutsche Komposita, spaeter ergaenzte Namen):
   greift nur, wenn ein Wort sonst aus dem Layout laufen wuerde. */
h1,h2,h3,h4,p,li,td,th,figcaption,
.artist__name,.artist__role,.member__name,.member__role,.contact__name,
.artist-cta__head,.footer__brand,.faq-q__text{overflow-wrap:break-word;}
::selection{background:var(--accent);color:#fff;}

/* Sichtbarer Fokus, nur bei Tastaturnutzung */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}
:focus:not(:focus-visible){outline:none;}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100000;
  background:var(--accent);color:#111;font-family:var(--f-sans);font-weight:700;
  font-size:13px;text-transform:uppercase;text-decoration:none;padding:12px 20px;
}
.skip:focus{left:12px;top:12px;}

.vh{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
#fc-root{
  width:100%;max-width:1440px;margin:0 auto;
  background:var(--bg);color:var(--fg);position:relative;
}
.sec{padding:0 var(--pad-x) var(--gap-section);}

/* iPhone-Notch und Home-Indicator: das Meta-Tag viewport-fit=cover laesst die
   Seite bis in die Ecken laufen, deshalb muessen die Sicherheitsabstaende
   selbst gesetzt werden. Im Querformat sonst Text unter der Notch. */
@supports (padding: max(0px)) {
  .sec,.nav,.footer__tags{
    padding-left:max(var(--pad-x),env(safe-area-inset-left));
    padding-right:max(var(--pad-x),env(safe-area-inset-right));
  }
  .footer__col:first-child,.footer__col--clock{
    padding-left:max(var(--pad-x),env(safe-area-inset-left));
  }
  .footer__tags{padding-bottom:max(16px,env(safe-area-inset-bottom));}
}
.sec--hero{padding:60px var(--pad-x) 52px;}
/* Der Abstand unter dem FAQ lag frueher bei 128px und damit auf dem Handy
   deutlich ueber den 74px aller anderen Sektionen. Jetzt haengt er wie alle
   anderen an --gap-section, der Rhythmus der Seite ist damit durchgehend. */
.sec--faq{padding-bottom:var(--gap-section);}
.sec--result{padding-bottom:54px;}
.sec--contact{padding-top:74px;padding-bottom:112px;}
section[id]{scroll-margin-top:88px;}

/* Hinweis: content-visibility:auto wurde bewusst NICHT gesetzt.
   Bei Sektionen mit stark unterschiedlicher Hoehe erzeugt es beim Scrollen
   Layoutspruenge (CLS). Der Renderinggewinn waere hier gering. */

/* Einheitlicher Sektionskopf: Kicker + Ueberschrift links, ein kurzes Wort
   rechts, darunter der Trennstrich. Der Strich stand frueher ueber dem Kopf,
   dadurch sahen die Sektionen unterschiedlich aus (der Ablauf hatte den Strich
   schon unter der Ueberschrift). Jetzt trennt der Strich ueberall Ueberschrift
   und Inhalt. */
.sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  border-bottom:1px solid var(--line);padding-bottom:26px;
}
/* Flex- und Grid-Kinder duerfen unter ihre Mindestbreite schrumpfen. Ohne das
   sprengt ein einziges langes Wort das gesamte Layout. */
.sec-head > *,
.why-grid > *,.how-grid > *,.team-grid > *,.result__grid > *,
.contact__grid > *,.faq-grid > *,.benefit > div,.step,.why,
.contact__person > div,.member__id{min-width:0;}
.sec-head--plain{border-bottom:0;padding-bottom:0;}

.eyebrow{
  font-family:var(--f-mono);font-size:12px;letter-spacing:0.03em;
  text-transform:uppercase;color:var(--fg);margin-bottom:16px;
}
.eyebrow .dot,.dot{color:var(--accent);}
.meta{
  font-family:var(--f-mono);font-size:11px;text-transform:uppercase;
  color:var(--fg-4);letter-spacing:0.02em;text-align:right;
}
/* Zwei Angaben, am Desktop untereinander. Auf dem Handy fliessen sie in eine
   Zeile, siehe den 620er-Block. */
.meta--paar span{display:block;}
/* Ausnahme: "Drei Gründe · eine Crew" steht auf jeder Breite in einer Zeile. */
.meta--eine span{display:inline;}
.meta--eine span + span::before{content:" · ";}
h1,h2,h3,h4,.cond{font-family:var(--f-cond);font-weight:700;}
h2{font-size:58px;line-height:0.85;}
.lede{font-family:var(--f-serif);font-size:19px;line-height:1.4;color:var(--fg-2);}

/* --------------------------------------------------------------------------
   5. Ticker
   -------------------------------------------------------------------------- */
.ticker{overflow:hidden;height:40px;border-bottom:1px solid var(--line);}
.ticker--footer{border-bottom:1px solid var(--line);}
.ticker__inner{
  display:inline-flex;white-space:nowrap;align-items:center;height:40px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.04em;
  text-transform:uppercase;color:#eaeaea;
  animation:fcMarquee var(--ticker) linear infinite;
  will-change:transform;
}
.ticker__inner > span{padding-inline:0;}
@keyframes fcMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */
.nav{
  display:flex;align-items:center;gap:30px;padding:20px var(--pad-x);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
  background:rgba(13,13,13,0.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.nav__logo{display:inline-flex;align-items:center;text-decoration:none;flex:none;}
.nav__logo img{height:28px;width:113px;}
.nav__tagline{
  font-family:var(--f-sans);font-size:11px;line-height:12px;letter-spacing:0.01em;
  text-transform:uppercase;color:var(--fg-4);flex:none;
}
.nav__spacer{flex:1;}
.nav__menu{
  display:flex;gap:26px;font-family:var(--f-sans);font-weight:700;font-size:13px;
  letter-spacing:-0.01em;text-transform:uppercase;
}
.nav__menu a{color:var(--fg);text-decoration:none;transition:color .2s ease;}
.nav__cta{
  font-family:var(--f-sans);font-weight:700;font-size:13px;letter-spacing:-0.01em;
  text-transform:uppercase;color:#111;background:var(--accent);padding:10px 18px;
  text-decoration:none;flex:none;transition:opacity .2s ease;
}
.nav__toggle{
  display:none;background:none;border:1px solid var(--line-input);color:var(--fg);
  width:44px;height:44px;border-radius:50%;font-size:18px;cursor:pointer;
  align-items:center;justify-content:center;flex:none;
  position:relative;z-index:80;
  transition:border-color .2s ease,background-color .2s ease;
  /* Der rote Tippschimmer des Browsers (-webkit-tap-highlight-color) ist bei
     runden Knoepfen trotzdem ein Rechteck. Deshalb hier abgeschaltet und durch
     eine eigene Flaeche ersetzt, die dem Kreis folgt. Gleiches gilt fuer den
     runden "Lass quatschen"-Knopf. */
  -webkit-tap-highlight-color:transparent;
}
.nav__toggle:active{background:rgba(228,0,43,0.22);border-color:var(--accent);}
.fab__btn{-webkit-tap-highlight-color:transparent;}
.fab__btn:active{filter:brightness(0.9);}
.nav__menu-cta{display:none;}

@media (hover:hover){
  .nav__menu a:hover{color:var(--accent);}
  .nav__cta:hover{opacity:.88;}
  .nav__toggle:hover{border-color:var(--fg);background:rgba(228,0,43,0.14);}
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:300px 1fr;gap:80px;align-items:center;}
.hero h1{
  font-size:80px;line-height:0.85;letter-spacing:0;margin:0 0 40px;color:var(--fg);
  text-wrap:balance;
}
.hero__p1{
  font-family:var(--f-serif);font-size:29px;line-height:1.2;color:var(--fg-1);
  margin:0 0 22px;max-width:720px;
}
.hero__p2{
  font-family:var(--f-serif);font-size:19px;line-height:1.4;color:var(--fg-3);
  margin:0;max-width:600px;
}

.phone{
  position:relative;width:300px;aspect-ratio:9/19.5;background:#000;
  border:2px solid #2b2b2b;border-radius:48px;padding:11px;
  box-shadow:0 34px 70px rgba(0,0,0,0.55);
}
.phone__screen{
  position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;
  background:#0c0c0c;
  background-image:repeating-linear-gradient(45deg,#141414,#141414 10px,#181818 10px,#181818 20px);
}
.phone__screen video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.phone__notch{
  position:absolute;top:13px;left:50%;transform:translateX(-50%);
  width:96px;height:28px;background:#000;border-radius:15px;z-index:3;
}
.phone__live{
  position:absolute;top:18px;left:16px;font-family:var(--f-pixel);font-size:16px;
  color:var(--accent);letter-spacing:0.05em;z-index:2;
}
.phone__badge{
  position:absolute;bottom:16px;left:16px;z-index:2;font-family:var(--f-mono);
  font-size:9px;text-transform:uppercase;background:#E9E9E9;color:#111;
  padding:2px 7px;letter-spacing:0.02em;
}
/* Das Vorschauvideo im Mockup hat bewusst keinen Ton-Knopf mehr.
   Es laeuft dauerhaft stumm, siehe initHeroVideo in main.js. */

/* --------------------------------------------------------------------------
   8. Kennzahlen
   -------------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:end;}
.stat{transition:filter .35s ease,opacity .35s ease;}
.stat:nth-child(2){margin-top:64px;}
.stat:nth-child(3){margin-top:24px;}
.stat:nth-child(4){margin-top:88px;}
.stat__num{
  font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:92px;
  line-height:0.9;letter-spacing:-0.01em;color:var(--fg);
  text-shadow:0 0 30px rgba(255,255,255,0.2);
  font-variant-numeric:tabular-nums;
}
.stat--accent .stat__num{color:var(--accent);text-shadow:0 0 34px rgba(228,0,43,0.55);}
.stat__label{
  font-family:var(--f-mono);font-size:11px;text-transform:uppercase;
  color:var(--fg-4);margin-top:12px;letter-spacing:0.02em;
}
.stat--accent .stat__label{color:var(--accent);}
@media (hover:hover){
  .stats:hover .stat{filter:blur(6px);opacity:0.4;}
  .stats:hover .stat:hover{filter:none;opacity:1;}
}

/* --------------------------------------------------------------------------
   9. Reels
   -------------------------------------------------------------------------- */
.reels-head{margin-bottom:34px;}
.reels-nav{display:flex;align-items:center;gap:12px;flex:none;}
.reels-nav .meta{margin-right:10px;}
/* Die Pfeile waren frueher die Zeichen ← und →. Fehlt eines davon in der
   Schrift, sucht der Browser pro Zeichen einen Ersatz und findet dabei
   unterschiedliche Schriften: der linke Pfeil sah dann duenner und kleiner
   aus als der rechte, in Brave deutlich, in Chrome je nach System gar nicht.
   Jetzt sind beide dieselbe gezeichnete Form, einmal gespiegelt. */
.reels-btn{
  width:48px;height:48px;border:1px solid var(--line-strong);background:none;
  color:var(--fg);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:none;
  transition:border-color .2s ease,color .2s ease,opacity .2s ease;
}
.reels-btn__ic{
  width:20px;height:20px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
}
.reels-btn[disabled]{opacity:.3;cursor:default;}
@media (hover:hover){
  .reels-btn:not([disabled]):hover{border-color:var(--accent);color:var(--accent);}
}
.reels-track{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
}
.reels-track::-webkit-scrollbar{display:none;}
.reel{
  position:relative;flex:none;width:236px;aspect-ratio:9/16;scroll-snap-align:start;
  overflow:hidden;background:var(--bg-card);
  /* Streifenmuster als Grundflaeche, solange das erste Videobild noch nicht
     da ist oder gar kein Video hinterlegt wurde. Gleiche Optik wie im
     iPhone-Mockup im Hero. */
  background-image:repeating-linear-gradient(45deg,#141414,#141414 10px,#181818 10px,#181818 20px);
  transition:filter .4s ease,opacity .4s ease;
}
/* Die Karten zeigen kein eigenes Vorschaubild mehr, sondern das erste Bild
   des Videos. Deshalb gibt es hier nur noch das video-Element. */
.reel video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  filter:grayscale(var(--gray));opacity:0;
  transition:opacity .4s ease,filter .5s ease;
}
.reel video.is-ready{opacity:1;}
.reel.is-active video{filter:grayscale(0);}
.reel__toggle{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;cursor:pointer;
}
.reel__toggle span{
  width:46px;height:46px;border:1px solid rgba(255,255,255,0.65);border-radius:9999px;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;
  padding-left:3px;background:rgba(0,0,0,0.32);transition:opacity .3s ease;
}
.reel.is-playing .reel__toggle span{opacity:0;}
.reel__toggle:focus-visible{outline-offset:-4px;}
.reel__n{
  position:absolute;top:10px;left:10px;z-index:2;font-family:var(--f-mono);font-size:10px;
  color:#fff;background:rgba(0,0,0,0.55);padding:3px 7px;text-transform:uppercase;
  letter-spacing:0.03em;
}
.reel__live{
  position:absolute;top:10px;right:10px;z-index:2;font-family:var(--f-pixel);
  font-size:16px;color:var(--accent);letter-spacing:0.05em;
}
/* Name und Stumm-Knopf sitzen auf einer Linie. Beide bekommen exakt dieselbe
   Zeilenhoehe, dasselbe Innenmass und einen 1px-Rahmen, den der Name nur
   unsichtbar traegt. Vorher war der Knopf durch Rahmen und groesseres Padding
   vier Pixel hoeher und wirkte dadurch nach oben verschoben. */
.reel__tag,.reel__mute{
  position:absolute;bottom:10px;z-index:2;
  font-family:var(--f-mono);font-size:9px;line-height:14px;
  text-transform:uppercase;padding:2px 7px;border:1px solid transparent;
}
.reel__tag{
  left:10px;background:#E9E9E9;color:#111;letter-spacing:0.02em;
  max-width:calc(100% - 84px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.reel__mute{
  right:10px;z-index:3;letter-spacing:0.04em;color:#fff;background:rgba(0,0,0,0.55);
  border-color:rgba(255,255,255,0.35);cursor:pointer;
  transition:background-color .2s ease;
}
/* Unsichtbare Trefferflaeche: der Knopf bleibt optisch klein, laesst sich auf
   dem Handy aber sicher treffen (WCAG 2.2, mindestens 24 x 24 Pixel). */
.reel__mute::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,28px);
}
@media (hover:hover){
  .reels-track:has(.reel:hover) .reel:not(:hover){filter:blur(6px);opacity:0.45;}
  .reel__mute:hover{background:rgba(0,0,0,0.85);}
}

/* --------------------------------------------------------------------------
   10. Warum Fancontent
   -------------------------------------------------------------------------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;}
.why-head{margin-bottom:44px;}
.why__kw{
  width:150px;height:150px;border-radius:9999px;background:var(--accent);color:#111;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--f-cond);font-weight:700;font-size:26px;line-height:0.95;
  margin-bottom:26px;
}
.why h3{font-size:28px;line-height:1;margin:0 0 14px;}
.why p{font-family:var(--f-serif);font-size:19px;line-height:1.4;color:var(--fg-2);}

/* --------------------------------------------------------------------------
   11. Kuenstler
   -------------------------------------------------------------------------- */
.artists-head{margin-bottom:30px;}
.artist-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;}
.artist{position:relative;transition:filter .35s ease,opacity .35s ease;}
.artist__frame{
  position:relative;overflow:hidden;background:var(--bg-tile);aspect-ratio:1/1;
}
.artist__frame img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(var(--gray));
  transition:transform .6s ease-in-out,filter .6s ease-in-out;
}
.artist__n{
  position:absolute;top:6px;left:6px;font-family:var(--f-mono);font-size:9px;color:#fff;
  background:rgba(0,0,0,0.55);padding:2px 5px;letter-spacing:0.02em;z-index:2;
}
.artist__name{
  font-family:var(--f-mono);font-size:10px;color:var(--fg);font-weight:500;
  line-height:1.2;letter-spacing:0.01em;margin-top:8px;
}
.artist__role{
  font-family:var(--f-mono);font-size:9px;color:var(--fg-4);margin-top:2px;letter-spacing:0.02em;
}
.artist__link{position:absolute;inset:0;z-index:3;}
/* Die rote Kachel setzt sich in die Luecke, die die letzte Kuenstlerreihe
   uebrig laesst, statt sich darunter zu haengen. Wie breit diese Luecke ist,
   haengt an der Zahl der Kuenstler und aendert sich mit jedem neuen Namen.
   Deshalb rechnet die build.py sie aus und schreibt sie als --cta-7 bis
   --cta-3 direkt ans Raster. Die Zahl hinter dem Komma ist der Notnagel,
   falls die Variable einmal fehlt: dann steht das Rot wie frueher in einer
   eigenen Reihe. */
.artist-cta{
  grid-column:span var(--cta-7,4);background:var(--accent);color:#111;text-decoration:none;
  display:flex;flex-direction:column;justify-content:space-between;gap:16px;
  /* Unten mehr Luft als oben: der Satz sass sonst auf der Kante und wirkte
     nach unten gedrueckt. Die Kachel selbst bleibt buendig mit der
     Bildreihe daneben, nur der Text rueckt rund ein Zehntel nach oben. */
  padding:16px 18px 40px;
  transition:filter .3s ease;
  /* Macht die Kachel zum Bezugsrahmen fuer die Schriftgroesse unten. */
  container-type:inline-size;
}
.artist-cta__kicker{
  font-family:var(--f-mono);font-size:10px;letter-spacing:0.03em;text-transform:uppercase;
}
.artist-cta__head{font-family:var(--f-cond);font-weight:700;font-size:30px;line-height:0.92;}
/* In der Luecke ist die Kachel schmaler als frueher ueber vier Spalten, mal
   zwei Spalten breit, mal vier. Eine feste Groesse passt dann nur in einem
   Fall. Die Schrift richtet sich deshalb nach der Breite der Kachel selbst
   (cqw = ein Prozent davon): rund 20px wenn sie zwei Spalten schmal ist,
   30px bei voller Breite. Kennt ein Browser cqw nicht, ueberspringt er die
   Zeile und behaelt die 30px von oben. */
.artist-cta__head{font-size:clamp(20px,calc(4.2cqw + 10px),30px);}
@media (hover:hover){
  .artist-grid:has(.artist:hover) .artist:not(:hover){filter:blur(6px);opacity:0.4;}
  .artist:hover .artist__frame img{transform:scale(1.06);filter:grayscale(0);}
  .artist-cta:hover{filter:brightness(1.08);}
}
.artist:focus-within .artist__frame img{transform:scale(1.06);filter:grayscale(0);}

/* --------------------------------------------------------------------------
   12. Ablauf
   -------------------------------------------------------------------------- */
/* Der Strich kommt jetzt vom Sektionskopf, deshalb hat das Raster keinen
   eigenen mehr. Der Abstand von 40px bleibt, nur haengt er nun am Kopf. */
.how-head{margin-bottom:40px;}
.how-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
}
.step__top{display:flex;align-items:center;gap:14px;margin-bottom:26px;}
.step__n{
  width:68px;height:68px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-family:var(--f-cond);
  font-weight:700;font-size:25px;flex:none;
}
.step__line{flex:1;height:2px;background:linear-gradient(90deg,var(--accent),#262626);}
.step__arrow{color:var(--accent);font-size:22px;flex:none;}
.step h3{font-size:32px;line-height:0.95;margin:0 0 12px;}
.step p{font-family:var(--f-serif);font-size:19px;line-height:1.4;color:var(--fg-2);}

/* --------------------------------------------------------------------------
   13. Team
   -------------------------------------------------------------------------- */
.team-head{margin-bottom:44px;}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:start;}
.member{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:20px;
  align-items:start;
}
.member__photo{
  width:182px;height:182px;overflow:hidden;background:var(--bg-tile);flex:none;
  grid-column:1;grid-row:1 / span 2;
}
.member__id{grid-column:2;grid-row:1;}
.member__bio{grid-column:2;grid-row:2;}
.member__photo img{
  width:100%;height:100%;object-fit:cover;filter:grayscale(var(--gray));
  transition:filter .5s ease;
}
.member__name{font-family:var(--f-cond);font-weight:700;font-size:24px;line-height:1;}
.member__role{
  font-family:var(--f-mono);font-size:10px;color:var(--accent);text-transform:uppercase;
  margin-top:6px;letter-spacing:0.02em;
}
.member__bio{font-family:var(--f-serif);font-size:19px;line-height:1.4;color:var(--fg-3);margin:12px 0 0;}
.member--becker img{object-position:18% 50%;}
@media (hover:hover){.member:hover .member__photo img{filter:grayscale(0);}}

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq-grid{display:grid;grid-template-columns:320px 1fr;gap:72px;align-items:start;}
.faq-aside{position:sticky;top:100px;}
.faq-aside h2{margin:0 0 20px;}
.faq-aside p{font-family:var(--f-serif);font-size:18px;line-height:1.4;color:var(--fg-3);max-width:250px;}
.faq-item{position:relative;border-top:1px solid var(--line);transition:background-color .35s ease;}
.faq-item__bar{
  position:absolute;left:0;top:-1px;bottom:0;width:0;background:var(--accent);
  transition:width .35s var(--ease-out);pointer-events:none;
}
.faq-q{
  width:100%;display:grid;grid-template-columns:46px 1fr auto;gap:18px;align-items:center;
  background:none;border:0;padding:24px 12px;cursor:pointer;text-align:left;color:var(--fg);
}
.faq-q__no{font-family:var(--f-mono);font-size:12px;color:var(--fg-4);letter-spacing:0.02em;}
.faq-q__text{
  font-family:var(--f-cond);font-weight:700;font-size:26px;line-height:1;display:inline-block;
  transition:transform .35s var(--ease-out),color .35s ease;
}
.faq-q__sign{
  font-family:var(--f-mono);font-size:26px;color:var(--accent);flex:none;display:inline-block;
  transition:transform .4s var(--ease-out);line-height:1;
}
.faq-q[aria-expanded="true"] .faq-q__sign{transform:rotate(45deg);}
.faq-a{display:grid;grid-template-rows:1fr;}
.js .faq-a{grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease-out);}
.js .faq-item.is-open .faq-a{grid-template-rows:1fr;}
.faq-a > div{overflow:hidden;}
.faq-a p{
  font-family:var(--f-serif);font-size:19px;line-height:1.45;color:var(--fg-2);
  margin:0;padding:0 12px 30px 64px;max-width:620px;
}
.js .faq-a p{opacity:0;transition:opacity .3s ease .05s;}
.js .faq-item.is-open .faq-a p{opacity:1;}
@media (hover:hover){
  .faq-item:hover{background:rgba(127,127,127,0.08);}
  .faq-item:hover .faq-item__bar{width:3px;}
  .faq-item:hover .faq-q__text{transform:translateX(16px);color:var(--accent);}
  .faq-item:hover .faq-q__sign{transform:scale(1.3);}
  .faq-item:hover .faq-q[aria-expanded="true"] .faq-q__sign{transform:scale(1.3) rotate(45deg);}
}
.faq-q:focus-visible{outline-offset:-2px;}

/* --------------------------------------------------------------------------
   15. Ergebnis-Band
   -------------------------------------------------------------------------- */
.result{background:var(--bg-soft);border:1px solid var(--line);padding:44px 48px;}
.result__kicker{
  font-family:var(--f-mono);font-size:12px;letter-spacing:0.03em;text-transform:uppercase;
  color:var(--fg-4);margin-bottom:30px;
}
.result__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;}
.benefit{display:flex;gap:16px;align-items:flex-start;}
.benefit__mark{width:12px;height:12px;background:var(--accent);flex:none;margin-top:9px;}
.benefit h3{font-size:26px;line-height:1;margin:0 0 8px;}
.benefit p{font-family:var(--f-serif);font-size:19px;line-height:1.4;color:var(--fg-3);}

/* --------------------------------------------------------------------------
   16. Kontakt
   -------------------------------------------------------------------------- */
.contact-head{margin-bottom:44px;}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;}
.contact__person{display:flex;gap:20px;align-items:center;margin-bottom:32px;}
.contact__photo{width:182px;height:182px;overflow:hidden;background:var(--bg-tile);flex:none;}
.contact__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(var(--gray));}
.contact__kicker{
  font-family:var(--f-mono);font-size:11px;text-transform:uppercase;color:var(--fg-4);
  letter-spacing:0.02em;
}
.contact__name{font-family:var(--f-cond);font-weight:700;font-size:30px;margin:4px 0 6px;line-height:1;}
.contact__tel{
  display:inline-block;font-family:var(--f-mono);font-size:13px;color:var(--fg);
  text-decoration:underline;letter-spacing:0.02em;text-underline-offset:3px;
  /* Tap-Flaeche auf 25px erhoehen, ohne das Layout zu verschieben */
  padding-block:4px;margin-block:-4px;
}
.contact__mail{
  display:block;margin-top:4px;width:fit-content;font-family:var(--f-mono);font-size:13px;color:var(--fg);
  text-decoration:underline;letter-spacing:0.02em;text-underline-offset:3px;
  padding-block:4px;margin-bottom:-4px;
}
.contact__text{font-family:var(--f-serif);font-size:19px;line-height:1.4;color:var(--fg-2);max-width:620px;}

.form{display:flex;flex-direction:column;gap:22px;border-top:2px solid var(--fg);padding-top:30px;}
.field{display:block;}
.field__label{
  font-family:var(--f-mono);font-size:11px;text-transform:uppercase;color:var(--fg-4);
  letter-spacing:0.02em;display:block;
}
.field input,.field textarea{
  width:100%;background:none;border:0;border-bottom:1px solid var(--line-input);color:var(--fg);
  font-family:var(--f-sans);font-size:18px;padding:12px 0;outline:none;
  transition:border-color .2s ease;border-radius:0;
}
.field textarea{resize:vertical;min-height:76px;}
.field input:focus,.field textarea:focus{border-bottom-color:var(--accent);}
/* Tastaturfokus zusaetzlich sichtbar machen, mit der Maus bleibt es wie gehabt */
.field input:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-4);opacity:1;}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-bottom-color:var(--accent);}
.field__err{
  display:none;font-family:var(--f-mono);font-size:10px;text-transform:uppercase;
  color:var(--accent);letter-spacing:0.02em;margin-top:6px;
}
.field__err.is-on{display:block;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form__row{display:flex;align-items:center;gap:20px;margin-top:6px;flex-wrap:wrap;}
.form__submit{
  background:var(--accent);border:0;color:#111;font-family:var(--f-sans);font-weight:700;
  font-size:14px;text-transform:uppercase;letter-spacing:-0.01em;padding:16px 28px;cursor:pointer;
  transition:opacity .2s ease;
}
.form__submit[disabled]{opacity:.5;cursor:default;}
@media (hover:hover){.form__submit:not([disabled]):hover{opacity:.88;}}
.form__status{
  font-family:var(--f-mono);font-size:12px;text-transform:uppercase;color:var(--accent);
  letter-spacing:0.02em;
}
.form__note{
  font-family:var(--f-mono);font-size:10px;line-height:1.5;text-transform:uppercase;
  color:var(--fg-4);letter-spacing:0.02em;
}
.form__note a{color:var(--fg-4);}

/* --------------------------------------------------------------------------
   16b. Fancontent Universe
   -------------------------------------------------------------------------- */
.sec--universe{padding-top:0;padding-bottom:112px;}
.universe-head{margin-bottom:40px;}
.universe-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
/* Die ganze Kachel ist der Link. Grid statt Flex, damit die Fusszeile immer
   unten sitzt, auch wenn eine Beschreibung zweizeilig wird. */
.universe{
  display:grid;grid-template-rows:auto auto 1fr auto;
  background:var(--bg-soft);border:1px solid var(--line);
  padding:26px 28px 22px;text-decoration:none;color:var(--fg);
  transition:border-color .25s ease,background-color .25s ease,transform .25s ease;
}
/* Roter Punkt, weisser Text: dieselbe Kicker-Form wie in den Sektionskoepfen.
   Eine rote Ziffer stand hier vorher, kam auf dem Kachelhintergrund aber nur
   auf 3,83:1 und blieb damit unter den 4,5:1, die WCAG fuer kleine Schrift
   verlangt. Weiss auf der Kachel sind 18,55:1. */
.universe__k{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.03em;
  text-transform:uppercase;color:var(--fg);margin-bottom:18px;
}
.universe__name{
  font-family:var(--f-cond);font-weight:700;font-size:32px;line-height:1;
  margin-bottom:10px;
}
.universe__text{
  font-family:var(--f-serif);font-size:19px;line-height:1.4;color:var(--fg-2);
  margin-bottom:24px;
}
.universe__foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-top:1px solid var(--line);padding-top:16px;
}
.universe__host{
  font-family:var(--f-mono);font-size:11px;text-transform:uppercase;
  color:var(--fg-4);letter-spacing:0.02em;min-width:0;overflow-wrap:break-word;
}
.universe__ic{
  width:20px;height:20px;flex:none;display:block;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .25s ease;
}
@media (hover:hover){
  .universe:hover{border-color:var(--line-input);background:var(--bg-tile);}
  .universe:hover .universe__ic{transform:translateX(5px);}
}
.universe:focus-visible{outline-offset:-2px;}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.footer{border-top:1px solid var(--line);}
.footer__cols{display:grid;grid-template-columns:1fr 1fr 1fr auto;border-bottom:1px solid var(--line);}
.footer__col{padding:26px 24px;border-left:1px solid var(--line);}
.footer__col:first-child{padding:26px var(--pad-x);border-left:0;}
.footer__col--clock{padding:26px var(--pad-x);display:flex;align-items:center;}
.footer__brand{font-family:var(--f-cond);font-weight:700;font-size:24px;color:var(--fg);}
.footer__sub{
  font-family:var(--f-mono);font-size:11px;color:var(--fg-4);text-transform:uppercase;
  margin-top:8px;letter-spacing:0.02em;
}
.footer__links{
  display:flex;flex-direction:column;gap:8px;font-family:var(--f-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:0.02em;
}
.footer__links a,.footer__links span{color:var(--fg-4);}
.footer__links a{
  text-decoration:underline;text-underline-offset:3px;transition:color .2s ease;
  display:inline-block;padding-block:5px;margin-block:-5px;width:fit-content;
}
/* Sieht aus wie die Links daneben, ist aber ein Knopf: er oeffnet den
   Einwilligungsbanner erneut, statt irgendwohin zu navigieren. */
.footer__cc{
  font:inherit;color:var(--fg-4);background:none;border:0;padding:5px 0;margin:-5px 0;
  text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  width:fit-content;transition:color .2s ease;
}
@media (hover:hover){
  .footer__links a:hover{color:var(--accent);}
  .footer__cc:hover{color:var(--accent);}
}
.footer__clock{font-family:var(--f-pixel);font-size:26px;color:var(--fg);letter-spacing:0.04em;font-variant-numeric:tabular-nums;}
.footer__tags{
  padding:16px var(--pad-x);font-family:var(--f-mono);font-size:10px;text-transform:uppercase;
  color:var(--fg-5);letter-spacing:0.03em;
}

/* --------------------------------------------------------------------------
   18. Floating CTA
   -------------------------------------------------------------------------- */
.fab{
  position:fixed;z-index:9999;width:92px;height:92px;
  bottom:26px;right:26px;
  bottom:max(26px,env(safe-area-inset-bottom));
  right:max(26px,env(safe-area-inset-right));
  transition:opacity .35s ease,transform .35s ease;
}
.fab[data-hidden="1"]{opacity:0;transform:scale(.7);pointer-events:none;}
.fab__ping,.fab__ping2{
  position:absolute;inset:0;border-radius:9999px;border:1.5px solid var(--accent);
  animation:fcPing 2.4s ease-in-out infinite;pointer-events:none;
}
.fab__ping2{border-width:1px;animation-delay:0.6s;}
.fab__btn{
  position:absolute;inset:0;border-radius:9999px;background:var(--accent);color:#111;
  display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;
  font-family:var(--f-cond);font-weight:700;font-size:15px;line-height:0.95;
  box-shadow:0 16px 34px rgba(0,0,0,0.45);transition:transform .3s ease;
}
@keyframes fcPing{0%,100%{transform:scale(1);opacity:0.85;}50%{transform:scale(1.55);opacity:0.08;}}
@media (hover:hover){.fab__btn:hover{transform:scale(1.06);}}

/* --------------------------------------------------------------------------
   18b. Einwilligungsbanner
   --------------------------------------------------------------------------
   Sitzt unten links, damit er den "Lass quatschen"-Knopf unten rechts nicht
   verdeckt. Er legt sich nicht ueber die ganze Seite: die Inhalte bleiben
   lesbar und bedienbar, auch ohne eine Entscheidung zu treffen. Ein Banner,
   der die Seite blockiert, waere Noetigung und macht die Einwilligung
   angreifbar.
   -------------------------------------------------------------------------- */
.cc{
  position:fixed;z-index:9998;
  left:26px;bottom:26px;
  left:max(26px,env(safe-area-inset-left));
  bottom:max(26px,env(safe-area-inset-bottom));
  width:min(420px,calc(100vw - 52px));
}
.cc[hidden]{display:none;}
.cc__box{
  background:var(--bg-soft);border:1px solid var(--line-strong);
  box-shadow:0 24px 60px rgba(0,0,0,0.6);
  padding:24px 26px 22px;
}
.cc__eyebrow{
  font-family:var(--f-mono);font-size:11px;letter-spacing:0.03em;
  text-transform:uppercase;color:var(--fg);margin-bottom:12px;
}
.cc__h{font-family:var(--f-cond);font-weight:700;font-size:30px;line-height:0.95;margin:0 0 10px;}
.cc__t{
  font-family:var(--f-serif);font-size:17px;line-height:1.35;color:var(--fg-2);
  margin:0 0 20px;
}
.cc__t a{color:var(--fg);text-underline-offset:3px;}
/* Beide Knoepfe exakt gleich gross und gleich stark. Wer ablehnen will, darf
   nicht laenger suchen als wer zustimmt. */
.cc__row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.cc__btn{
  font-family:var(--f-sans);font-weight:700;font-size:13px;letter-spacing:-0.01em;
  text-transform:uppercase;
  padding:13px 10px;border:1px solid var(--fg);background:none;color:var(--fg);
  cursor:pointer;transition:background-color .2s ease,color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.cc__btn:active{background:var(--fg);color:#111;}
@media (hover:hover){.cc__btn:hover{background:var(--fg);color:#111;}}
.cc.is-an{animation:ccRein .4s var(--ease-out) both;}
@keyframes ccRein{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

@media (max-width:620px){
  /* Auf dem Handy ueber die volle Breite. Der Banner sitzt oberhalb des
     runden Knopfes statt darauf: der ist 67px hoch und steht 20px ueber dem
     unteren Rand, macht 87px, plus 12px Luft. So bleiben beide bedienbar,
     ohne dass einer von beiden verschwinden muss. */
  .cc{left:12px;right:12px;width:auto;
      left:max(12px,env(safe-area-inset-left));
      right:max(12px,env(safe-area-inset-right));
      bottom:99px;
      bottom:calc(99px + env(safe-area-inset-bottom));}
  .cc__box{padding:20px 18px 18px;}
  .cc__h{font-size:26px;}
  .cc__t{font-size:16px;margin-bottom:16px;}
}

/* --------------------------------------------------------------------------
   19. Scroll-Reveal (nur wenn JS laeuft)
   -------------------------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(32px);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);will-change:opacity,transform;}
.js .reveal.is-in{opacity:1;transform:none;will-change:auto;}

/* --------------------------------------------------------------------------
   19b. Rechtsseiten (Impressum, Datenschutz)
   Eine schmale Lesespalte im gleichen Farb- und Schriftsystem wie der Rest.
   Bewusst ohne Reveal und ohne Animation: Rechtstexte muessen auch dann
   vollstaendig dastehen, wenn JavaScript blockiert ist.
   -------------------------------------------------------------------------- */
/* Auf kurzen Unterseiten (z. B. 404) soll der Fuss unten stehen und nicht
   mitten im Bild haengen. */
.page--sub{display:flex;flex-direction:column;min-height:100vh;}
@supports (min-height:100dvh){.page--sub{min-height:100dvh;}}
.page--sub main{flex:1 0 auto;}
.page--sub .footer{flex:none;}

.sec--legal{padding-top:60px;padding-bottom:96px;}
.sec--legal h1{font-size:72px;line-height:0.85;margin:0;}

.legal{max-width:70ch;margin-top:46px;}
.legal h2{
  font-size:26px;line-height:1;letter-spacing:0.01em;
  margin:48px 0 14px;padding-top:22px;border-top:1px solid var(--line);
}
.legal h2:first-of-type{margin-top:0;}
.legal p,.legal li{
  font-family:var(--f-serif);font-size:19px;line-height:1.5;color:var(--fg-2);
  margin:0 0 16px;overflow-wrap:break-word;
}
.legal ul{margin:0 0 16px;padding-left:1.1em;}
.legal li{margin-bottom:6px;}
.legal a{color:var(--fg-1);text-decoration:underline;text-underline-offset:3px;}
.legal strong{color:var(--fg);font-weight:400;}
.legal em{font-style:italic;}
.legal code{font-family:var(--f-mono);font-size:0.86em;color:var(--fg-1);}

/* Adressbloecke: Mono, damit die Zeilenumbrueche als Struktur lesbar bleiben */
.legal .legal__block{
  font-family:var(--f-mono);font-size:14px;line-height:1.8;color:var(--fg-1);
  border-left:2px solid var(--accent);padding-left:18px;
}
.legal .legal__stand{
  font-family:var(--f-mono);font-size:12px;text-transform:uppercase;
  color:var(--fg-4);letter-spacing:0.02em;margin-top:40px;
}

/* Hinweiskasten fuer die noch offenen Platzhalter. Faellt vor dem Launch weg. */
.legal__hint{
  font-family:var(--f-mono);font-size:13px;line-height:1.7;color:var(--fg-1);
  background:var(--bg-tile);border:1px dashed var(--line-strong);
  border-left:3px solid var(--accent);padding:18px 20px;margin-bottom:44px;
}
.legal__hint strong{color:var(--accent);font-weight:400;}

.legal__back{margin-top:56px;}
.legal__back a{
  font-family:var(--f-mono);font-size:13px;text-transform:uppercase;
  letter-spacing:0.04em;color:var(--fg-1);text-decoration:none;
  display:inline-block;padding-block:8px;
}
@media (hover:hover){
  .legal a:hover,.legal__back a:hover{color:var(--accent);}
}
@media (max-width:860px){
  .sec--legal h1{font-size:52px;}
  .legal h2{font-size:23px;}
}
@media (max-width:620px){
  .sec--legal{padding-top:44px;padding-bottom:72px;}
  .sec--legal h1{font-size:42px;}
  .legal{margin-top:34px;}
  .legal p,.legal li{font-size:18px;}
  .legal .legal__block{font-size:13px;padding-left:14px;}
}

/* ==========================================================================
   20. RESPONSIVE
   ========================================================================== */

/* ---- <= 1280px: Raster leicht entspannen ---- */
@media (max-width:1280px){
  .hero{gap:56px;}
  .why-grid{gap:36px;}
  .faq-grid{grid-template-columns:280px 1fr;gap:48px;}
  .team-grid{gap:28px;}
  .member__photo{width:150px;height:150px;}
  .result{padding:40px 36px;}
  .result__grid{gap:32px;}
}

/* ---- <= 1180px: Team untereinander lesbarer, Stats etwas kleiner ---- */
@media (max-width:1180px){
  .stat__num{font-size:clamp(3.4rem,7.4vw,92px);}
  .why__kw{width:130px;height:130px;font-size:23px;}
  /* 24 Kuenstler ergeben bei 6 Spalten genau 4 volle Reihen. Die CTA-Kachel
     muss deshalb die ganze Breite nehmen, sonst bleibt eine halbe Zeile leer. */
  .artist-grid{grid-template-columns:repeat(6,1fr);}
  .artist-cta{grid-column:span var(--cta-6,6);gap:22px;padding:20px 22px;}
}

/* ---- <= 1100px: Hero-Headline mitskalieren ---- */
@media (max-width:1100px){
  .hero h1{font-size:clamp(2.6rem,7.4vw,6.75rem);}
  .hero__p1{font-size:25px;}
  .team-grid{grid-template-columns:repeat(2,1fr);gap:34px 28px;}
  .member__photo{width:170px;height:170px;}
}

/* ---- <= 980px: Tablet ---- */
@media (max-width:980px){
  :root{--pad-x:24px;--gap-section:96px;}

  /* backdrop-filter macht die Leiste zum Bezugsrahmen fuer alles, was darin
     position:fixed ist. Die Schublade unten braucht aber den ganzen Bildschirm
     als Bezug, deshalb ist der Weichzeichner hier aus und der Hintergrund
     stattdessen deckend. Optisch ist der Unterschied nicht zu sehen. */
  .nav{
    gap:14px;padding:14px var(--pad-x);
    background:var(--bg);
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .nav__tagline{display:none;}
  .nav > .nav__cta{display:none;}
  /* Deckender Hintergrund: der Knopf hat nur einen Rand und ist innen sonst
     durchsichtig. Waehrend die Schublade hereinfaehrt, wuerde die Schrift
     sonst mitten durch den Kreis wandern. */
  .nav__toggle{display:inline-flex;background:var(--bg);}

  /* Menue als Schublade: faehrt von rechts herein und nimmt die rechte
     Bildschirmhaelfte ein. Geschlossen steht sie mit visibility:hidden
     ausserhalb des Sichtfelds, damit die Tabulatortaste nicht hineinlaeuft. */
  .nav__menu{
    display:flex;flex-direction:column;gap:22px;
    position:fixed;top:0;right:0;bottom:0;left:auto;
    width:50%;min-width:186px;max-width:340px;
    background:var(--bg);border-left:1px solid var(--line);
    box-shadow:-26px 0 60px rgba(0,0,0,0.55);
    /* Luft nach oben, damit der erste Menuepunkt beim Hereinfahren deutlich
       unter dem Burger-Knopf durchlaeuft. Massgeblich ist der Seitenanfang:
       dort steht der Laufband-Streifen (40px) ueber der Leiste, der Knopf
       endet deshalb erst bei 98px - genau da lag der erste Punkt vorher. */
    padding:128px 20px 26px;
    padding-bottom:max(26px,env(safe-area-inset-bottom));
    padding-right:max(20px,env(safe-area-inset-right));
    z-index:70;overflow-y:auto;overscroll-behavior:contain;
    transform:translateX(100%);visibility:hidden;
    transition:transform .34s cubic-bezier(.4,0,.2,1),visibility 0s linear .34s;
  }
  .nav[data-open="1"] .nav__menu{
    transform:none;visibility:visible;
    transition:transform .34s cubic-bezier(.4,0,.2,1),visibility 0s linear 0s;
  }

  /* Solange die Schublade offen ist, tritt der Rest der Seite zurueck.
     Der "Lass quatschen"-Knopf liegt ausserhalb von main und footer und
     bleibt deshalb scharf. */
  .nav-offen body > .ticker,
  .nav-offen main,
  .nav-offen .footer{
    filter:blur(5px) brightness(0.62);
    pointer-events:none;
  }
  body > .ticker,main,.footer{transition:filter .34s ease;}
  /* Kein overflow:hidden am <html>, um das Scrollen zu sperren: das nimmt der
     Leiste ihr position:sticky, sie rutscht an den Seitenanfang und der
     Schliessen-Knopf waere nicht mehr erreichbar. */

  .nav__menu-cta{
    display:inline-block;align-self:flex-start;margin-top:4px;
    background:var(--accent);color:#111;padding:12px 20px;text-decoration:none;
    font-family:var(--f-sans);font-weight:700;font-size:13px;text-transform:uppercase;
  }
  .nav__menu-cta:hover{color:#111;}

  .sec--hero{padding-top:44px;padding-bottom:44px;}
  .hero{grid-template-columns:1fr;gap:34px;}
  .hero__media{order:2;display:flex;justify-content:center;}
  .hero__copy{order:1;}
  .hero h1{margin-bottom:28px;}
  .phone{width:min(300px,60vw);}

  /* Sobald das iPhone mittig ueber den Kennzahlen steht, steht auch der
     Kennzahlenblock mittig. Siehe die ausfuehrliche Notiz im 620er-Block. */
  .stats{
    grid-template-columns:repeat(2,minmax(0,max-content));
    justify-content:center;gap:26px 24px;
  }
  .stat{margin-top:0!important;}

  .why-grid{grid-template-columns:repeat(2,1fr);gap:34px;}
  .artist-grid{grid-template-columns:repeat(4,1fr);}
  .artist-cta{grid-column:span var(--cta-4,4);}
  .how-grid{grid-template-columns:1fr;gap:26px;}
  .step__top{margin-bottom:16px;}
  .team-grid{grid-template-columns:1fr;gap:26px;}
  .faq-grid{grid-template-columns:1fr;gap:22px;}
  .faq-aside{position:static;}
  .faq-aside p{max-width:none;}
  .contact__grid{grid-template-columns:1fr;gap:34px;}
  .universe-grid{grid-template-columns:1fr;gap:18px;}
  .result{padding:32px 26px;}
  .result__grid{grid-template-columns:1fr;gap:22px;}
  .footer__cols{grid-template-columns:1fr 1fr;}
  .footer__col:nth-child(3){border-left:0;}
  .footer__col{border-top:1px solid var(--line);}
  .footer__col:first-child,.footer__col:nth-child(2){border-top:0;}
  .footer__col--clock{padding-left:24px;}

  .fab{width:76px;height:76px;bottom:20px;right:20px;}
  .fab__btn{font-size:13px;}
}

/* ---- <= 860px: Reels-Kopf umbrechen ---- */
@media (max-width:860px){
  .sec-head{flex-wrap:wrap;align-items:flex-start;}
  /* Auf schmalen Schirmen steht das kleine Wort immer in einer eigenen Zeile
     unter der Ueberschrift. Ohne width:100% rutschte ein kurzes Wort wie
     "Komm an Bord" neben den Kicker, waehrend ein langes umbrach - die
     Sektionen sahen dann wieder unterschiedlich aus. */
  .sec-head > .meta{width:100%;text-align:left;}
  /* Die Zeile "Fancontent Originals" steht links unter der Ueberschrift,
     die Pfeile bleiben rechts. space-between haette den Platz auf alle drei
     Kinder verteilt und damit auch die beiden Pfeile auseinandergezogen,
     deshalb schiebt die Textzeile sie stattdessen mit margin-right:auto
     nach rechts. Der Abstand der Pfeile zueinander bleibt bei 12px. */
  .reels-nav{width:100%;justify-content:flex-start;}
  .reels-nav .meta{margin-right:auto;text-align:left;}
  .artists-head h2{max-width:100%;}
}

/* ---- <= 700px: Team-Karten stapeln ---- */
@media (max-width:700px){
  .member{column-gap:16px;}
  .member__photo{width:132px;height:132px;}
  .member__bio{font-size:17px;}
}

/* ---- <= 620px: Phone ---- */
@media (max-width:620px){
  :root{--pad-x:16px;--gap-section:74px;}

  h2{font-size:clamp(1.85rem,8.5vw,3.4rem);}
  .hero h1{font-size:clamp(2rem,10vw,3.4rem);}
  .hero__p1{font-size:22px;line-height:1.25;}
  .hero__p2{font-size:17px;}
  .phone{width:min(300px,72vw);}

  /* align-items:end richtet die Kacheln an ihrer Unterkante aus. Sobald zwei
     Beschriftungen in derselben Reihe unterschiedlich viele Zeilen brauchen,
     sitzen die Zahlen darueber verschieden hoch. Genau das passierte mit
     "20+" gegenueber "5.000+". Oben ausrichten loest es. */
  /* Die Spalten sind so breit wie ihr Inhalt, der uebrige Platz verteilt sich
     links und rechts gleich - der Block steht damit mittig unter dem iPhone.
     Mit repeat(2,1fr) klebte er am linken Rand, waehrend rechts je nach Breite
     der Zahlen bis zu 52px Luft blieben. minmax(0,max-content) laesst die
     Spalten auf sehr schmalen Schirmen trotzdem schrumpfen und umbrechen. */
  .stats{
    grid-template-columns:repeat(2,minmax(0,max-content));
    justify-content:center;gap:22px 18px;align-items:start;
  }
  .stat__num{font-size:clamp(2.3rem,12vw,4rem);}
  .stat__label{font-size:10px;margin-top:8px;}

  /* Auf dem Handy tragen diese Zeilen nichts bei und kosten je eine eigene
     Zeile ueber dem Trennstrich. Sie entfallen, der Abstand schrumpft dadurch
     von selbst. Es bleiben "Fancontent Originals" (steht neben den Pfeilen)
     und "Über 20 Künstler · Comedy · Musik · Podcast" (traegt Inhalt). */
  .why-head .meta,
  .how-head .meta,
  .team-head .meta,
  .universe-head .meta,
  .contact-head .meta{display:none;}

  .sec--universe{padding-bottom:86px;}
  .universe-head{margin-bottom:26px;}
  .universe-grid{grid-template-columns:1fr;gap:16px;}
  .universe{padding:22px 20px 18px;}
  .universe__name{font-size:27px;}
  .universe__text{font-size:17px;margin-bottom:20px;}

  /* "Drei Gründe" und "eine Crew" in eine Zeile, mit Trennpunkt. */
  .meta--paar span{display:inline;}
  .meta--paar span + span::before{content:" · ";}

  /* Bei den Kuenstlern stattdessen links und rechts in einer Zeile. */
  .meta--breit{display:flex;justify-content:space-between;gap:12px;width:100%;}
  .meta--breit span + span::before{content:none;}
  .meta--breit span:last-child{text-align:right;}

  /* Auf dem Handy nur "Mehr Fancontent, mehr Spaß", das passt in eine Zeile. */
  .nur-breit{display:none;}

  .reels-head{margin-bottom:24px;}
  .reels-btn{width:44px;height:44px;}
  .reel{width:min(236px,62vw);}
  /* Name und Stumm-Knopf einen Punkt groesser, beide gemeinsam, damit sie
     weiter exakt gleich hoch bleiben. */
  .reel__tag,.reel__mute{font-size:10px;line-height:15px;}
  .reel__tag{max-width:calc(100% - 90px);}

  .why-grid{grid-template-columns:1fr;gap:30px;}
  /* Auf dem Handy kostet der rote Kreis fast 140 Pixel Hoehe pro Grund, also
     ueber 400 Pixel in der Sektion, ohne Information zu tragen. Stattdessen
     steht das Stichwort als rote Grossbuchstabenzeile ueber der Ueberschrift.
     Auf dem Desktop bleibt der Kreis unveraendert. */
  .why__kw{
    width:auto;height:auto;border:0;border-radius:0;background:none;
    display:block;padding:0;margin:0 0 8px;text-align:left;
    font-family:var(--f-mono);font-size:11px;font-weight:500;line-height:1.2;
    text-transform:uppercase;letter-spacing:0.08em;color:var(--accent);
  }
  .why h3{font-size:25px;}
  .why p,.step p,.benefit p,.member__bio,.faq-a p,.contact__text{font-size:17px;}

  .artist-grid{grid-template-columns:repeat(3,1fr);gap:10px;}
  /* Gleicher Abstand oben und unten. Der Satz hat line-height 0.92, seine
     Unterlaengen sitzen dadurch dicht an der Kante, deshalb unten zwei Pixel
     mehr als oben: optisch ergibt das den gleichen Abstand. */
  /* Kicker und Satz ruecken zusammen und stehen als Paar mittig im Block,
     statt oben und unten auseinandergezogen. */
  .artist-cta{
    grid-column:span var(--cta-3,3);padding:15px 15px 17px;gap:10px;
    justify-content:center;
  }
  .artist-cta__head{font-size:21px;}
  /* Auf dem Handy stehen drei Kacheln nebeneinander, die Namen wurden dadurch
     sehr klein. Ein Punkt mehr als am Desktop, die Rolle waechst mit, damit
     der Groessenunterschied zwischen beiden gleich bleibt. */
  .artist__name{font-size:11px;}
  .artist__role{font-size:10px;}

  .step__n{width:56px;height:56px;font-size:21px;}
  .step h3{font-size:27px;}

  /* Wie der Kontaktblock: Foto links, Name daneben, Text darunter */
  .member{column-gap:16px;}
  .member__photo{width:120px;height:120px;grid-row:1;}
  .member__id{align-self:center;}
  .member__bio{grid-column:1 / -1;grid-row:2;margin-top:16px;}

  .faq-q{grid-template-columns:32px 1fr auto;gap:12px;padding:20px 4px;}
  .faq-q__text{font-size:21px;}
  .faq-q__sign{font-size:22px;}
  .faq-a p{padding:0 4px 24px 44px;}
  .faq-item:hover .faq-q__text{transform:none;}

  .result{padding:26px 20px;}
  .result__kicker{margin-bottom:22px;font-size:11px;}
  .benefit h3{font-size:23px;}

  /* 20 + 54 aus dem Ergebnisband darueber = 74, wie zwischen allen Sektionen */
  .sec--contact{padding-top:20px;padding-bottom:86px;}
  /* Foto exakt so gross wie die Teamfotos, Text bleibt daneben stehen.
     Die Schriftgroessen ziehen mit den Teamkarten gleich. */
  .contact__person{gap:16px;margin-bottom:24px;align-items:center;}
  .contact__photo{width:120px;height:120px;}
  .contact__name{font-size:24px;}
  .contact__kicker{font-size:10px;}
  .contact__tel,.contact__mail{font-size:13px;}
  .form{gap:18px;padding-top:24px;}
  .field input,.field textarea{font-size:16px;}

  .footer__cols{grid-template-columns:1fr;}
  .footer__col{border-left:0;border-top:1px solid var(--line);padding:20px var(--pad-x);}
  .footer__col:first-child{border-top:0;}
  .footer__links{flex-direction:row;gap:18px;flex-wrap:wrap;}
  .footer__tags{font-size:9px;line-height:1.6;}

  /* 5 Prozent groesser als vorher: 64 -> 67 Pixel */
  .fab{width:67px;height:67px;bottom:16px;right:16px;}
  .fab__btn{font-size:12px;}

  /* Logo 20 Prozent groesser: 28 x 113 -> 34 x 136 Pixel */
  .nav__logo img{height:34px;width:136px;}
}

/* ---- <= 400px: kleine Geraete (iPhone SE, Galaxy S) ---- */
@media (max-width:400px){
  .nav{gap:10px;}
  /* auch hier 20 Prozent mehr: 24 x 97 -> 29 x 116 Pixel */
  .nav__logo img{height:29px;width:116px;}
  .phone{width:min(260px,74vw);border-radius:40px;padding:9px;}
  .phone__screen{border-radius:32px;}
  /* Overlays mitskalieren, sonst kollidieren LIVE und Timecode mit der Notch */
  .phone__notch{width:74px;height:21px;top:10px;border-radius:11px;}
  .phone__live{font-size:13px;top:12px;left:11px;}
  .phone__badge{font-size:8px;bottom:12px;left:11px;padding:2px 5px;}
  
  .artist-grid{gap:8px;}
  .artist__name{font-size:10px;}
  .artist__role{font-size:9px;}
  .artist__n{font-size:8px;padding:1px 4px;}
  .stats{gap:20px 14px;}
  .reel{width:min(236px,70vw);}
  /* Der Block bleibt hier bewusst nebeneinander stehen. Vorher stapelte er
     an dieser Stelle und das Foto wurde dabei groesser als die Teamfotos.
     Die Groessen haengen jetzt an denselben Haltepunkten wie das Team,
     siehe den 360er-Block weiter unten. */
}

/* ---- Ab 1441px: Rahmen um den Container vermeiden ---- */
@media (min-width:1441px){
  body{background:var(--bg);}
}

/* ---- <= 360px: Teamfoto etwas kleiner, sonst wird die Namenszeile zu eng ---- */
@media (max-width:360px){
  .member__photo{width:100px;height:100px;}
  .member{column-gap:14px;}
  .member__name{font-size:21px;}
  /* Kontaktblock zieht mit dem Team gleich */
  .contact__photo{width:100px;height:100px;}
  .contact__person{gap:14px;}
  .contact__name{font-size:21px;}
}

/* --------------------------------------------------------------------------
   21. Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .ticker__inner{animation:none;transform:none;}
  /* Ohne das bliebe die Schublade nach dem Schliessen 0,34s lang sichtbar:
     transition-duration wird oben gekappt, transition-delay nicht. */
  .nav__menu{transition-delay:0s!important;}
  .fab__ping,.fab__ping2{display:none;}
  .js .reveal{opacity:1;transform:none;}
}

/* --------------------------------------------------------------------------
   22. Print
   -------------------------------------------------------------------------- */
@media print{
  .nav,.fab,.ticker,.reels-nav,.form__submit{display:none!important;}
  body,#fc-root{background:#fff;color:#000;}
  *,*::before,*::after{transition:none!important;animation:none!important;}
  .js .reveal{opacity:1!important;transform:none!important;}
  /* Alle FAQ-Antworten mit ausdrucken */
  .js .faq-a{grid-template-rows:1fr!important;}
  .js .faq-a p{opacity:1!important;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#555;}
}