/* ============================================================
   Feed Them Hope – Gemeinsames Design-System ("Ember")
   Version 0.260815.1 (.sr-only ergaenzt; zuvor 0.260718.1)
   Wird von Website, Rechtsseiten, Backend, Bandportal & Login
   eingebunden. Single Source of Truth fuer Fonts, Farben,
   Typografie und Basis-Komponenten.

   DSGVO: Alle Schriften werden lokal geladen (assets/fonts/),
   es besteht KEINE Verbindung zu Google-Servern.
   ============================================================ */

/* ---------- Lokale Schriften (woff2, self-hosted) ---------- */
/* Anton – Display/Headlines (statisch, 400) */
@font-face{
  font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/anton-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:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/anton-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;
}
/* Space Grotesk – Fliesstext & UI (variable 400–700) */
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/spacegrotesk-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:400 700;font-display:swap;
  src:url('../fonts/spacegrotesk-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;
}
/* JetBrains Mono – technischer Akzent/Labels (variable 400–700) */
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/jetbrainsmono-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('../fonts/jetbrainsmono-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;
}

/* ---------- Design-Tokens (geschaerfte Ember-Welt) ---------- */
:root{
  /* Basis-Ebenen – Tiefe durch Abstufung statt einer flachen Flaeche */
  --ink:#0a0908;          /* tiefstes warmes Schwarz – Seitengrund */
  --coal:#131010;         /* Ebene 1 */
  --coal-2:#1c1714;       /* Ebene 2 – Cards/Panels */
  --coal-3:#251d17;       /* Ebene 3 – erhoeht/Hover */

  /* Signatur – dominante Farbe + scharfe Akzente */
  --ember:#ef7526;        /* dominantes Orange */
  --ember-hot:#ff6a1a;    /* Hot-Akzent fuer Glows/Hover */
  --ember-deep:#b6541a;   /* tiefes Orange fuer Verlaeufe */
  --amber:#ffb36b;        /* warmes Highlight */
  --steel:#7fb0c8;        /* kuehler Kontrast-Akzent (sparsam, wie Syntax-Highlight) */

  /* Text */
  --bone:#f4efe8;         /* Haupttext */
  --muted:#9c9288;        /* Sekundaertext */
  --faint:#6b635b;        /* Hinweise/Deko */

  /* Linien & Fokus */
  --line:rgba(244,239,232,.10);
  --line-strong:rgba(244,239,232,.20);
  --focus:var(--amber);

  /* Status – geteilt von Login, Bandportal & Backend */
  --ok:#6bbf7b;           /* Erfolg/bestätigt */
  --bad:#ff6b5e;          /* Fehler/Gefahr */
  --warn:#e0b45c;         /* Warnung */
  --info:var(--steel);    /* neutral/Hinweis */

  /* Typografie */
  --font-display:'Anton','Arial Narrow',sans-serif;
  --font:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Consolas',ui-monospace,monospace;

  /* Geometrie – abgeschraegte Ecken aus der Logo-DNA */
  --cut:22px;
  --cut-sm:12px;

  /* Bewegung */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.5s;

  color-scheme:dark;
}

/* ---------- Reset & Basis ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--ink);color:var(--bone);
  font-family:var(--font);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--ember);color:var(--ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

h1,h2,h3,.display{
  font-family:var(--font-display);font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.02;
}

/* Mono-Label / Eyebrow – das IDE-Signatur-Element (// LABEL) */
.eyebrow{
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ember);
  display:inline-flex;align-items:center;gap:12px;margin-bottom:22px;
}
.eyebrow::before{content:"//";color:var(--ember);opacity:.6;font-weight:700}

/* ---------- Atmosphaere: Film-Grain & Raster (reines CSS/SVG-Data-URI) ---------- */
/* Feine Koernung ueber der ganzen Seite gegen die Flaechigkeit */
.fx-grain::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* HINWEIS: Komponenten (.btn, .field ...) werden bewusst NICHT hier definiert.
   Der Klassenname .btn bedeutet je Oberflaeche etwas anderes (Website: abgeschraegte
   Glut-Buttons; Portal/Backend: kompakte App-Buttons). Jede Oberflaeche stylt ihre
   eigenen Komponenten lokal – theme.css liefert nur die geteilten Tokens & Basics. */

/* ---------- Nur fuer Screenreader und Suchmaschinen sichtbar ---------- */
/* Traegt Text, der zum Bild daneben gehoert, aber optisch nicht wiederholt
   werden soll (z. B. der Genre-Zusatz in der H1 der Startseite, deren
   sichtbarer Teil das Logo-Bild ist). Bewusst NICHT display:none oder
   visibility:hidden - beides wuerde den Text auch der Vorlesesoftware
   und den Suchmaschinen entziehen. */
.sr-only{
  position:absolute;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;
}

/* ---------- Reveal-Basis fuer gestaffelte Einblendungen (JS ergaenzt .in) ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.fx-grain::after{transition:none}
}