/*
Theme Name: Team Madness
Theme URI: https://team-madness.at
Author: Team Madness
Description: Eigenes Theme fuer das Wiener Label Team Madness. Schwarz/Weiss,
 reduziert, auf Ladegeschwindigkeit gebaut und vollstaendig Elementor-kompatibel.
 Erzeugt aus team-madness-website/index.html – nicht von Hand aendern.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: team-madness
*/

:root{
  --ink:#121212;
  --paper:#ffffff;      /* pures Weiß wie im Logo */
  --bg:#fbfbfa;
  --grey:#9a9a9a;
  --line:rgba(18,18,18,.12);
  --rot:#c8102e;        /* einziger Farbakzent der Seite: der Scroll-Hinweis */
  --serif:'Didot','Bodoni MT','Playfair Display','Times New Roman',Georgia,serif;
  --sans:'Helvetica Neue','Helvetica','Arial',system-ui,sans-serif;
  --pad:clamp(22px,7vw,140px);
  --logo-w:min(80vw,880px);   /* identische Logo-Breite für Intro & Hero */
  /* Abstands-System: benachbarte Paddings addieren sich, daher bewusst knapp */
  --sp-section:clamp(56px,8.5vh,96px);   /* Standard-Sektion */
  --sp-lg:clamp(64px,10vh,112px);        /* Statement & Schluss-Sektion */
  --sp-quote:clamp(22px,3.2vh,38px);     /* Zitat-Übergänge (sitzen zwischen Sektionen) */
  --sp-divider:clamp(26px,3.2vw,40px);   /* Trennlinie innerhalb einer Sektion */
}
*{margin:0;padding:0;box-sizing:border-box}
/* Platz fuer den Scrollbalken dauerhaft freihalten. Ohne das springt beim Ende
   des Intros alles Zentrierte um die halbe Balkenbreite nach links, weil die
   Scrollsperre den Balken bis dahin unterdrueckt. */
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.intro-active{overflow:hidden;height:100vh}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
.eyebrow{font-size:.7rem;letter-spacing:.44em;text-transform:uppercase;font-weight:400;color:var(--grey)}

/* ---------- INTRO: Logo vollflächig, 1s, verblasst ---------- */
#intro{position:fixed;inset:0;z-index:9999;background:var(--paper);display:flex;align-items:center;justify-content:center;transition:opacity 1s ease,visibility 1s ease}
#intro.done{opacity:0;visibility:hidden;pointer-events:none}
#intro .wrap{width:var(--logo-w);text-align:center;animation:introIn .9s ease both}
#intro img{width:100%;height:auto;margin:0 auto}
.sig-fallback{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:.01em;line-height:1;display:inline-flex;align-items:baseline;gap:.12em;color:var(--ink)}
.sig-fallback sup{font-size:.26em;font-style:normal;vertical-align:top;margin-left:.1em}
#intro .sig-fallback{font-size:clamp(2.6rem,10vw,7.5rem)}
@keyframes introIn{from{opacity:0}to{opacity:1}}

/* ---------- NAV ---------- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:950;display:flex;align-items:center;justify-content:center;padding:18px var(--pad);transition:background .4s ease,padding .4s ease,border-color .4s ease;border-bottom:1px solid transparent}
header.nav.scrolled{background:rgba(251,251,250,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding-top:12px;padding-bottom:12px}
.nav .brand{display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-4px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.nav.scrolled .brand{opacity:1;transform:none;pointer-events:auto}
.nav .brand img{height:22px;width:auto}
.nav .brand .sig-fallback{font-size:1.05rem}

/* ---------- HERO ---------- */
.hero{min-height:100vh;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--pad);position:relative}
.hero .logo{width:var(--logo-w)}
.hero .logo img{width:100%;height:auto}
.hero .logo .sig-fallback{font-size:clamp(2.6rem,10vw,7.5rem)}
.hero .tagline{margin-top:44px;opacity:0;transition:opacity 1.2s ease .4s}
.hero .tagline.in{opacity:1}
.hero .tagline .line{display:flex;align-items:center;justify-content:center;gap:18px}
.hero .tagline .line::before,.hero .tagline .line::after{content:"";width:34px;height:1px;background:var(--line)}
.scroll-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;color:var(--grey);display:flex;flex-direction:column;align-items:center;gap:10px}
.scroll-hint .bar{width:1px;height:46px;background:var(--line);position:relative;overflow:hidden}
.scroll-hint .bar::after{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:var(--rot);animation:drop 2.4s cubic-bezier(.7,0,.3,1) infinite}
@keyframes drop{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}

/* ---------- STATEMENT ---------- */
/* Unten bewusst knapper als oben: "Mode als Handschrift." leitet den
   Namensabschnitt ein, beide gehoeren optisch zusammen. Mit vollem Polster
   auf beiden Seiten klaffte hier am Desktop ein Loch von rund 200px,
   waehrend der Rest der Seite bei 126px liegt. */
.statement{padding:var(--sp-lg) var(--pad) var(--sp-quote);text-align:center}
.statement p{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,6vw,4.6rem);line-height:1.06;letter-spacing:-.01em;max-width:16ch;margin:0 auto}
.statement p em{font-style:italic}

.reveal{opacity:0;transform:translateY(30px);transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.16,.84,.44,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- STORY / MANIFEST ---------- */
.story{padding:var(--sp-section) var(--pad)}
.story .eyebrow{display:block;margin-bottom:36px}
.story-lead{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5.6vw,4.2rem);line-height:1.08;letter-spacing:-.01em;max-width:22ch;margin-bottom:60px}
.story-lead em{font-style:italic}
/* Zweispaltig nur, wenn wirklich ein Bild dasteht. Ohne Bild bleibt der
   Abschnitt einspaltig, statt eine leere Spalte aufzureissen. */
.story:has(.story-bild) .story-oben{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(36px,4.5vw,88px);align-items:stretch}
.story-bild{margin:0;position:relative;overflow:hidden;
  min-height:clamp(300px,30vw,460px)}
.story-bild img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;filter:grayscale(1) contrast(1.04)}
.story-body{display:flex;flex-direction:column;gap:22px;max-width:640px}
.story-body p{font-size:1.08rem;color:#2c2c2c;max-width:58ch}
.story-body p strong{font-weight:500;color:var(--ink)}
.story-close{margin-top:var(--sp-divider);padding-top:var(--sp-divider);border-top:1px solid var(--line);text-align:center}
.story-close .eyebrow{display:block;margin-bottom:24px}
.story-close p{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2rem,6vw,4.4rem);line-height:1.04;letter-spacing:-.01em}

/* ---------- VERFÜGBARKEIT ---------- */
.avail{padding:var(--sp-section) var(--pad)}
.avail-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:start}
.avail-head .eyebrow{display:block;margin-bottom:26px}
.avail-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5vw,3.8rem);line-height:1.02;letter-spacing:-.01em}
.avail-body{display:flex;flex-direction:column;gap:22px}
.avail-body p{font-size:1.08rem;color:#2c2c2c;max-width:50ch}
.avail-body p strong{font-weight:500;color:var(--ink)}
/* Oben deutlich mehr Luft als unten: Der Fliesstext endete sonst fast auf der
   Trennlinie. Der Abstand ueber der Linie gehoert zum Text darueber, der
   darunter zum Zitat – beide brauchen nicht dasselbe Mass. */
.avail-quote{margin-top:clamp(46px,5.5vw,78px);padding-top:var(--sp-divider);border-top:1px solid var(--line);text-align:center}
.avail-quote blockquote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.3rem,3vw,2.1rem);line-height:1.3;max-width:34ch;margin:0 auto 14px;color:var(--ink)}
.avail-quote figcaption{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--grey)}

/* ---------- HALTUNG / KEINE WERBUNG ---------- */
.stance{background:var(--ink);color:var(--paper);padding:var(--sp-lg) var(--pad);text-align:center}
.stance .eyebrow{display:block;margin-bottom:30px;color:rgba(255,255,255,.5)}
.stance-lead{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,6.5vw,5rem);line-height:1.02;letter-spacing:-.02em;max-width:18ch;margin:0 auto 32px}
.stance-lead em{font-style:italic}
.stance-sub{color:rgba(255,255,255,.62);font-size:1.12rem;max-width:42ch;margin:0 auto}
.stance-points{display:flex;flex-direction:column;gap:18px;max-width:48ch;margin:0 auto}
.stance-points p{color:rgba(255,255,255,.64);font-size:1.12rem;line-height:1.55}

/* ---------- BILDSTRECKE WIEN ---------- */
.strecke{position:relative}
.strecke figure{position:relative;margin:0;overflow:hidden}
/* Ein einzelnes Bild als zentrierte Tafel – eine Atempause, kein Banner.
   Das Hochformat bleibt unbeschnitten, die Komposition traegt sich selbst. */
.strecke{padding:var(--sp-section) var(--pad);display:flex;justify-content:center}
.strecke figure{width:clamp(240px,32vw,400px)}
.strecke img{width:100%;height:auto;display:block;
  filter:grayscale(1) contrast(1.04);
  transition:transform 1.8s cubic-bezier(.16,.84,.44,1)}
.strecke:hover img{transform:scale(1.015)}
@media (max-width:720px){.strecke figure{width:min(74vw,300px)}}
.strecke figcaption{position:absolute;left:var(--pad);bottom:26px;color:var(--paper);
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  text-shadow:0 1px 14px rgba(0,0,0,.55)}
/* Zwei oder drei Hochformat-Aufnahmen nebeneinander */
.strecke-zwei,.strecke-drei{display:grid;gap:2px}
.strecke-zwei{grid-template-columns:1fr 1fr}
.strecke-drei{grid-template-columns:repeat(3,1fr)}
.strecke-zwei img,.strecke-drei img{height:auto;width:100%;aspect-ratio:3/4}
@media (max-width:860px){
  .strecke-drei{grid-template-columns:1fr}
  .strecke-drei img{aspect-ratio:4/5}
}
@media (max-width:720px){
  .strecke-zwei{grid-template-columns:1fr}
  .strecke-zwei img{aspect-ratio:4/5}
}

/* ---------- ZITAT-ÜBERGÄNGE (leise) ---------- */
.interlude{padding:var(--sp-quote) var(--pad);text-align:center}
/* An dunklen Sektionen zaehlt deren Padding optisch nicht mit (liegt in der schwarzen
   Flaeche) – daher hier ausgleichen, damit das Zitat mittig zwischen den Bloecken sitzt */
.interlude.after-dark{padding-top:calc(var(--sp-quote) + var(--sp-section))}
.interlude.before-dark{padding-bottom:calc(var(--sp-quote) + var(--sp-section))}
.interlude blockquote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.35rem,3vw,2.1rem);line-height:1.32;letter-spacing:-.005em;max-width:32ch;margin:0 auto 18px;color:var(--ink)}
.interlude figcaption{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--grey)}

/* ---------- DER NAME ---------- */
.thename{padding:var(--sp-section) var(--pad);text-align:center}
.thename .eyebrow{display:block;margin-bottom:30px}
.thename-lead{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,6vw,4.4rem);line-height:1.04;letter-spacing:-.01em;max-width:20ch;margin:0 auto 48px}
.thename-lead em{font-style:italic}
.thename-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);max-width:900px;margin:0 auto;text-align:left}
.thename-body p{font-size:1.08rem;color:#2c2c2c}

/* ---------- WIEN ---------- */
.wien{background:var(--ink);color:var(--paper);padding:var(--sp-section) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,120px);align-items:center}
.wien .eyebrow{color:rgba(255,255,255,.5);margin-bottom:26px;display:block}
.wien h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5vw,4rem);line-height:1.02;letter-spacing:-.01em;margin-bottom:30px}
.wien p{color:rgba(255,255,255,.66);font-size:1.05rem;max-width:46ch}
.wien .mark{font-family:var(--serif);font-style:italic;font-size:clamp(3rem,12vw,9rem);line-height:.9;text-align:right;opacity:.9}
.wien .mark small{display:block;font-style:normal;font-family:var(--sans);font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:20px}

/* ---------- SIGNUP / IN KÜRZE ---------- */
.signup{background:var(--paper);padding:clamp(100px,18vh,200px) var(--pad);text-align:center}
.signup .eyebrow{margin-bottom:26px;display:block}
.signup h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,6vw,4.4rem);line-height:1;letter-spacing:-.01em;margin-bottom:22px}
.signup p{color:#3a3a3a;max-width:42ch;margin:0 auto 46px;font-size:1.05rem}
.form{display:flex;max-width:480px;margin:0 auto;border-bottom:1px solid var(--ink)}
.form input{flex:1;background:none;border:0;color:var(--ink);font-family:var(--sans);font-size:1rem;padding:16px 4px;letter-spacing:.03em}
.form input::placeholder{color:var(--grey)}
.form input:focus{outline:none}
.form button{background:none;border:0;color:var(--ink);cursor:pointer;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;padding:0 6px;transition:opacity .3s}
.form button:hover{opacity:.55}

/* ---------- FOOTER ----------
   Eine einzige Zeile, ohne Logo: Das Logo steht bereits gross im Kopf der
   Seite, im Fuss wiederholt es sich nur. Links und Angaben liegen auf einer
   gemeinsamen Grundlinie. */
footer{background:var(--bg);padding:var(--sp-section) var(--pad)}
.foot-row{display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:14px 40px;padding-top:26px;border-top:1px solid var(--line)}
.foot-links{display:flex;gap:40px;flex-wrap:wrap}
.foot-links a{font-size:.8rem;letter-spacing:.08em;color:#333}
.foot-links a:hover{text-decoration:underline}
.foot-meta{font-size:.7rem;letter-spacing:.08em;color:var(--grey)}

@media (max-width:860px){
  .story:has(.story-bild) .story-oben{grid-template-columns:1fr;gap:34px}
  .story-bild{min-height:0;aspect-ratio:4/3}
  .thename-body{grid-template-columns:1fr;gap:22px}
  .avail-inner{grid-template-columns:1fr;gap:26px}
  .wien{grid-template-columns:1fr;text-align:left}
  .wien .mark{text-align:left}
  .foot-row{flex-direction:column;align-items:flex-start}
}
@media (max-width:720px){
  :root{--logo-w:88vw}
  .foot-links{gap:24px}
}
@media (max-width:420px){
  :root{--logo-w:92vw}
  .foot-links{flex-direction:column;gap:12px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- WordPress-Grundlagen ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.alignwide{max-width:1200px;margin-left:auto;margin-right:auto}
.alignfull{width:100%}
.wp-caption,.gallery-caption{font-size:.85rem;color:var(--grey)}

/* ---------- Inhaltsseiten (auch fuer Elementor-Seiten) ---------- */
.page-wrap{max-width:760px;margin:0 auto;padding:calc(var(--sp-lg) + 60px) var(--pad) var(--sp-lg)}
.page-wrap h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;letter-spacing:-.01em;margin-bottom:26px}
.page-wrap h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.6vw,1.8rem);margin:44px 0 14px}
.page-wrap h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:32px 0 12px}
.page-wrap p,.page-wrap li{font-size:1rem;color:#2c2c2c;margin-bottom:12px}
.page-wrap ul,.page-wrap ol{padding-left:20px;margin-bottom:16px}
.page-wrap a{text-decoration:underline;text-underline-offset:3px}
.page-wrap img{margin:24px 0}
.page-wrap .todo{background:#f2f0ec;border-left:3px solid var(--ink);padding:14px 18px;margin:18px 0;font-size:.94rem}

/* Elementor: eigene Sektionen duerfen volle Breite nutzen */
.elementor-page .page-wrap{max-width:none;padding-left:0;padding-right:0}
.elementor-page .site-main{padding-top:0}