/* ==========================================================================
   OTHERMIND — Landingpage Stylesheet
   Ein einziges File. Keine Abhängigkeiten, kein Build.
   Reihenfolge: 1 Fonts · 2 Tokens · 3 Reset · 4 Layout · 5 Komponenten · 6 Sektionen · 7 Responsive
   ========================================================================== */

/* 1 — FONTS ================================================================ */
/* Lokal gehostete Schriften — keine Verbindung zu Google.
   Quelle: Google Fonts (Archivo, Space Grotesk, JetBrains Mono, OFL).
   Teilmenge latin + latin-ext. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../assets/fonts/archivo-100-900-latin-ext.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: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../assets/fonts/archivo-100-900-latin.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/jetbrains-mono-400-700-latin-ext.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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../assets/fonts/jetbrains-mono-400-700-latin.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../assets/fonts/space-grotesk-300-700-latin-ext.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: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../assets/fonts/space-grotesk-300-700-latin.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{
  /* Basis — Club-Dunkel. Alles sitzt auf --om-void. */
  --om-void:#070B0E;
  --om-base:#0C0E11;
  --om-surface:#12151A;
  --om-raised:#1A1F26;
  --om-line:#262C35;
  --om-line-strong:#38414D;

  /* Neutrals — genau drei Textstufen, nie eine vierte */
  --om-fog:#6B7684;
  --om-mist:#A8B2BF;
  --om-white:#F2F4F7;

  /* Akzent A — SIGNAL. Die Hauptstimme: CTAs, Rules, Active States. */
  --om-signal:#DBFE28;
  --om-signal-hover:#E7FF63;
  --om-signal-dim:#AECB1F;

  /* Akzent B — EMBER. Der warme Bruch. Genau einmal pro Layout. */
  --om-ember:#FF4B24;
  --om-ember-dim:#CC3B1C;

  /* Semantische Aliase — diese hier benutzen, nicht die Rohwerte */
  --bg-page:var(--om-void);
  --bg-surface:var(--om-surface);
  --bg-raised:var(--om-raised);
  --text-primary:var(--om-white);
  --text-secondary:var(--om-mist);
  --text-muted:var(--om-fog);
  --border-subtle:var(--om-line);
  --border-strong:var(--om-line-strong);
  --accent:var(--om-signal);
  --accent-on:var(--om-void);

  /* Schrift */
  --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-sans:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --fs-100:12px; --fs-125:13px; --fs-150:15px; --fs-200:17px;
  --fs-300:20px; --fs-400:24px; --fs-500:32px; --fs-600:44px; --fs-700:60px;

  --ls-wordmark:.14em; --ls-eyebrow:.28em; --ls-label:.08em; --ls-heading:-.02em;

  /* Abstände — 4px-Raster */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px;
  --sp-24:96px; --sp-32:128px;

  --content-max:1240px;
  --content-narrow:680px;

  /* Radien — OTHERMIND ist eckig. 2px ist der Default, Rundung die Ausnahme. */
  --radius-sm:2px;

  /* Motion — schnell und präzise. Kein Bounce, kein Overshoot. */
  --dur-fast:140ms;
  --dur-base:220ms;
  --ease-out:cubic-bezier(.2,0,.1,1);
  --ease-snap:cubic-bezier(.85,0,.15,1);

  /* Schutzgradienten für Text über Bild */
  --scrim-bottom:linear-gradient(to top,rgba(7,11,14,.94) 0%,rgba(7,11,14,.78) 28%,rgba(7,11,14,0) 72%);
  --scrim-full:linear-gradient(to top,rgba(7,11,14,.92) 0%,rgba(7,11,14,.4) 50%,rgba(7,11,14,.72) 100%);

  /* Bildgradation — kalt, entsättigt, harter Kontrast */
  --filter-photo-cold:grayscale(.3) contrast(1.22) brightness(.8) saturate(.85) hue-rotate(-6deg);
  --filter-photo-mono:grayscale(.55) contrast(1.18) brightness(.82);
}

/* 3 — RESET ================================================================ */
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{margin:0;background:var(--bg-page);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--fs-200);line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h1,h2,h3{margin:0;font-family:var(--font-display);font-variation-settings:"wdth" 125;font-weight:900;line-height:1.14;letter-spacing:var(--ls-heading);text-transform:uppercase;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--om-signal);text-decoration:none;border-bottom:1px solid rgba(219,254,40,.32);transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--om-signal-hover);border-bottom-color:var(--om-signal-hover)}
a:focus-visible,button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--om-void),0 0 0 4px var(--om-signal)}
::selection{background:var(--om-signal);color:var(--om-void)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--om-void)}
::-webkit-scrollbar-thumb{background:var(--om-line)}

/* 4 — LAYOUT =============================================================== */
.om-wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--sp-6)}
.om-section{padding:var(--sp-32) 0}
.om-section--tight{padding:var(--sp-24) 0}
.om-section--bordered{border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);background:var(--om-base)}
.om-grid{display:grid;gap:var(--sp-6)}
.om-grid--3{grid-template-columns:repeat(3,1fr)}
.om-grid--2{grid-template-columns:1fr 1fr}
.om-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}

/* 5 — KOMPONENTEN ========================================================== */

/* Wortmarke */
.om-logo{width:170px;height:auto}
.om-logo--lg{width:520px}

/* Eyebrow: Mono-Kicker mit kurzer Signal-Linie davor */
.om-eyebrow{display:flex;align-items:center;gap:var(--sp-3);font-family:var(--font-mono);font-size:var(--fs-100);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.om-eyebrow::before{content:"";width:28px;height:2px;background:var(--om-signal);flex:none}
.om-eyebrow--plain::before{display:none}

/* Headings */
.om-h1{font-size:clamp(56px,10.5vw,168px);line-height:.86;letter-spacing:.02em}
.om-h2{font-size:var(--fs-600);line-height:.92}
.om-h3{font-family:var(--font-display);font-variation-settings:"wdth" 100;font-weight:900;font-size:var(--fs-300);line-height:1.05;letter-spacing:var(--ls-heading);text-transform:uppercase}
.om-lead{max-width:var(--content-narrow);color:var(--text-secondary)}

/* Buttons */
.om-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);font-family:var(--font-sans);font-size:var(--fs-125);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;padding:12px 20px;min-height:44px;border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-snap)}
.om-btn:active{transform:translateY(1px)}
.om-btn--lg{font-size:var(--fs-150);padding:16px 28px;min-height:54px}
.om-btn--sm{font-size:var(--fs-100);padding:8px 14px;min-height:34px}
.om-btn--primary{background:var(--accent);color:var(--accent-on);border-color:var(--accent)}
.om-btn--primary:hover{background:var(--om-signal-hover);border-color:var(--om-signal-hover);color:var(--accent-on)}
.om-btn--ember{background:var(--om-ember);color:var(--om-white);border-color:var(--om-ember)}
.om-btn--ember:hover{background:var(--om-ember-dim);border-color:var(--om-ember-dim);color:var(--om-white)}
.om-btn--outline{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.om-btn--outline:hover{color:var(--accent);border-color:var(--accent);background:transparent}
.om-btn--ghost{background:transparent;color:var(--text-secondary);border-color:transparent}
.om-btn--ghost:hover{color:var(--text-primary);background:var(--bg-raised)}
.om-btn--full{width:100%}
a.om-btn{border-bottom-style:solid}

/* Tags — Genres, BPM, Episodennummern */
.om-tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;font-family:var(--font-sans);font-size:var(--fs-100);font-weight:500;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-secondary);background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-sm)}
.om-tag--mono{font-family:var(--font-mono)}
.om-tag--signal{color:var(--om-signal);border-color:rgba(219,254,40,.42);background:rgba(219,254,40,.07)}
.om-tag--ember{color:var(--om-ember);border-color:rgba(255,75,36,.42);background:rgba(255,75,36,.07)}

/* Cards — flach, 1px Linie, kein Schatten */
.om-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);transition:border-color var(--dur-base) var(--ease-out)}
.om-card:hover{border-color:var(--border-strong)}
.om-card__body{padding:var(--sp-5)}
.om-card__meta{font-family:var(--font-mono);font-size:var(--fs-100);letter-spacing:var(--ls-label);color:var(--text-muted);margin-bottom:var(--sp-2)}
.om-card__title{display:block;color:var(--text-primary);border:none;transition:color var(--dur-fast) var(--ease-out)}
.om-card:hover .om-card__title{color:var(--accent)}
.om-card__foot{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;margin-top:var(--sp-4)}
.om-card__dur{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-100);color:var(--text-muted)}

/* Bild — jedes Foto bekommt die Markengradation */
.om-photo{position:relative;overflow:hidden;background:var(--om-surface)}
.om-photo--square{aspect-ratio:1/1}
.om-photo--wide{aspect-ratio:16/9}
.om-photo img{width:100%;height:100%;object-fit:cover;filter:var(--filter-photo-cold)}
.om-photo--mono img{filter:var(--filter-photo-mono)}
.om-photo__scrim{position:absolute;inset:0;pointer-events:none;background:var(--scrim-bottom)}
.om-photo__scrim--full{background:var(--scrim-full)}
/* Platzhalter, solange kein Foto da ist */
.om-photo--empty{display:grid;justify-items:center;align-content:start;background:repeating-linear-gradient(135deg,#141821 0 14px,#1E2530 14px 28px)}
.om-photo--empty span{font-family:var(--font-mono);font-size:var(--fs-100);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);text-align:center;padding:var(--sp-6) 6%;max-width:640px}

/* Formularfelder — nur Unterstrich, kein Kasten */
.om-field{display:block}
.om-field span{display:block;font-family:var(--font-mono);font-size:var(--fs-100);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--sp-1)}
.om-field input,.om-field textarea{width:100%;background:transparent;border:none;border-bottom:1px solid var(--border-subtle);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--fs-200);padding:12px 0;outline:none;transition:border-color var(--dur-fast) var(--ease-out)}
.om-field textarea{resize:none}
.om-field input:focus,.om-field textarea:focus{border-bottom-color:var(--om-signal)}

/* Nav */
.om-nav{position:sticky;top:0;z-index:40;background:rgba(18,21,26,.62);backdrop-filter:blur(16px) saturate(1.1);border-bottom:1px solid var(--border-subtle)}
.om-nav__inner{max-width:var(--content-max);margin:0 auto;padding:0 var(--sp-6);height:76px;display:flex;align-items:center;justify-content:space-between}
.om-nav__links{display:flex;align-items:center;gap:var(--sp-8)}
.om-nav__links a:not(.om-btn){font-family:var(--font-mono);font-size:var(--fs-100);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-secondary);border:none}
.om-nav__links a:not(.om-btn):hover{color:var(--om-signal)}

/* Hero */
.om-hero{position:relative;min-height:calc(100vh - 76px);display:flex;align-items:flex-end;overflow:hidden}
.om-hero__bg{position:absolute;inset:0}
.om-hero__inner{position:relative;width:100%;max-width:var(--content-max);margin:0 auto;padding:0 var(--sp-6) var(--sp-24)}
.om-hero__claim{margin-top:var(--sp-6);font-size:var(--fs-400);font-weight:300;letter-spacing:.14em;text-transform:uppercase}
/* Der bewusste Stilbruch: EINE Ember-Linie pro Seite. */
.om-break{position:absolute;right:0;bottom:var(--sp-10);width:22%;height:3px;background:var(--om-ember)}

/* Kanäle */
.om-channels{display:grid;grid-template-columns:repeat(5,1fr);border-left:1px solid var(--border-subtle)}
.om-channel{border-right:1px solid var(--border-subtle);border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);padding:var(--sp-8) var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-6);transition:background-color var(--dur-base) var(--ease-out)}
.om-channel:hover{background:var(--bg-raised)}
.om-channel__name{font-family:var(--font-display);font-variation-settings:"wdth" 100;font-weight:900;font-size:var(--fs-200);text-transform:uppercase;letter-spacing:var(--ls-heading);color:var(--text-primary)}
.om-channel:hover .om-channel__name{color:var(--om-signal)}
.om-channel__meta{font-family:var(--font-mono);font-size:var(--fs-100);color:var(--text-muted);margin-top:var(--sp-2)}

/* Player */
.om-player{border:1px solid var(--border-subtle);background:var(--bg-surface);padding:var(--sp-6);display:flex;align-items:center;gap:var(--sp-5)}
.om-player__btn{width:56px;height:56px;flex:none;border:none;border-radius:var(--radius-sm);background:var(--accent);color:var(--accent-on);cursor:pointer;font-size:17px}
.om-player__track{flex:1}
.om-player__bar{height:3px;background:var(--om-line);position:relative}
.om-player__fill{position:absolute;inset:0;width:12%;background:var(--om-signal)}
.om-player__labels{display:flex;justify-content:space-between;margin-top:var(--sp-3);font-family:var(--font-mono);font-size:var(--fs-100);color:var(--text-muted)}

/* Footer */
.om-footer{border-top:1px solid var(--border-subtle)}
.om-footer__inner{max-width:var(--content-max);margin:0 auto;padding:var(--sp-12) var(--sp-6);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-6)}
.om-footer__claim{margin-top:var(--sp-2);font-size:var(--fs-100);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.om-footer__links{display:flex;gap:var(--sp-6);font-family:var(--font-mono);font-size:var(--fs-100);letter-spacing:var(--ls-label);color:var(--text-muted)}
.om-footer__links a{color:var(--text-muted);border:none}
.om-footer__links a:hover{color:var(--om-signal)}

/* Hilfsklassen */
.om-mono{font-family:var(--font-mono);font-size:var(--fs-100);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.om-stack{display:flex;flex-direction:column}
.om-stack--2{gap:var(--sp-2)} .om-stack--4{gap:var(--sp-4)} .om-stack--6{gap:var(--sp-6)}
.om-stack--10{gap:var(--sp-10)} .om-stack--12{gap:var(--sp-12)}
.om-signal{color:var(--om-signal)}

/* 7 — RESPONSIVE =========================================================== */
@media (max-width:900px){
  .om-grid--3,.om-grid--2{grid-template-columns:1fr}
  .om-channels{grid-template-columns:1fr 1fr}
  .om-section{padding:var(--sp-20) 0}
  .om-h2{font-size:var(--fs-500)}
  .om-footer__inner{flex-direction:column;align-items:flex-start}
  .om-break{width:40%;bottom:var(--sp-6)}
}
@media (max-width:600px){
  .om-nav__links{gap:var(--sp-4)}
  .om-nav__links a{display:none}
  .om-channels{grid-template-columns:1fr}
  .om-btn--lg{width:100%}
  .om-logo{width:130px}
}