/* ============================================================================
   HERTHA FANCLUB — STYLES
   ----------------------------------------------------------------------------
   Aufbau:
     1. Design-Tokens (Farben, Abstaende, Schrift)  <- hier aenderst du das Blau
     2. Reset und Grundlagen
     3. Layout-Hilfen
     4. Buttons
     5. Header und Navigation
     6. Hero
     7. Sektionen (Ueber uns, Projekte)
     8. Liveticker
     9. Tabelle
    10. Domain-Verkauf
    11. Footer
    12. Rechtstexte
    13. Zustaende (Laden, Fehler)
    14. Responsive
    15. Motion / Print
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. DESIGN-TOKENS
   Alle Farben und Abstaende an einer Stelle. Aenderst du hier das Blau,
   aendert sich die komplette Seite mit.
--------------------------------------------------------------------------- */

:root {
  /* Hertha-inspiriertes Blau, von hell nach dunkel */
  --blue-50:  #eef5fd;
  --blue-100: #d6e7fa;
  --blue-200: #aecff5;
  --blue-300: #7db1ec;
  --blue-400: #4a8ede;
  --blue-500: #1a6fce;   /* Primaerfarbe */
  --blue-600: #0d56ab;
  --blue-700: #0a4185;
  --blue-800: #08315f;   /* Dunkle Flaechen */
  --blue-900: #051f3d;   /* Footer, Hero-Grund */
  --blue-950: #03142a;

  /* Neutrale Toene */
  --gray-0:   #ffffff;
  --gray-50:  #f7f9fc;
  --gray-100: #eef1f6;
  --gray-200: #dfe4ec;
  --gray-300: #c3cad6;
  --gray-400: #97a1b1;
  --gray-500: #6b7686;
  --gray-600: #4d5766;
  --gray-700: #363e4b;
  --gray-800: #232a34;
  --gray-900: #141920;

  /* Signalfarben */
  --live:        #e0203c;
  --live-dark:   #b5162e;
  --win:         #16a34a;
  --draw:        #a1a1aa;
  --loss:        #dc2626;

  /* Semantische Zuweisungen */
  --bg:            var(--gray-0);
  --bg-alt:        var(--gray-50);
  --bg-deep:       var(--blue-900);
  --text:          var(--gray-800);
  --text-muted:    var(--gray-500);
  --text-inverse:  var(--gray-0);
  --border:        var(--gray-200);
  --accent:        var(--blue-500);
  --accent-strong: var(--blue-700);

  /* Typografie */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-num:  ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
               Menlo, Consolas, monospace;

  /* Fluide Schriftgroessen: wachsen mit dem Viewport, ohne Sprünge */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   clamp(1.05rem, 0.99rem + 0.30vw, 1.2rem);
  --fs-lg:   clamp(1.25rem, 1.15rem + 0.50vw, 1.5rem);
  --fs-xl:   clamp(1.5rem,  1.32rem + 0.90vw, 2rem);
  --fs-2xl:  clamp(1.875rem, 1.55rem + 1.60vw, 2.75rem);
  --fs-3xl:  clamp(2.25rem, 1.60rem + 3.20vw, 4rem);
  --fs-4xl:  clamp(2.75rem, 1.70rem + 5.20vw, 5.5rem);

  /* Abstaende */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Vertikaler Abstand zwischen Sektionen, waechst mit dem Viewport */
  --section-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);

  /* Radien */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Schatten, bewusst dezent und blaustichig */
  --shadow-sm: 0 1px 2px rgba(5, 31, 61, 0.05),
               0 1px 3px rgba(5, 31, 61, 0.06);
  --shadow-md: 0 2px 6px rgba(5, 31, 61, 0.06),
               0 8px 20px rgba(5, 31, 61, 0.07);
  --shadow-lg: 0 4px 12px rgba(5, 31, 61, 0.07),
               0 18px 44px rgba(5, 31, 61, 0.10);

  /* Layout */
  --container: 1180px;
  --container-narrow: 760px;
  --header-h: 68px;

  /* Bewegung */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}


/* ---------------------------------------------------------------------------
   2. RESET UND GRUNDLAGEN
--------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Verhindert horizontales Scrollen auf schmalen Geraeten */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  text-wrap: balance;

  /* Notbremse gegen Ueberlauf auf sehr schmalen Displays: ein Wort, das
     allein schon breiter ist als der Bildschirm, darf umbrechen.

     KEINE automatische Silbentrennung an dieser Stelle! Die wuerde auch
     dort trennen, wo genug Platz ist, und aus "Domain" ein "Do-main"
     machen. Trennung gibt es nur gezielt bei .page-hero h1, siehe unten. */
  overflow-wrap: break-word;
  hyphens: manual;
  -webkit-hyphens: manual;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent-strong);
  text-decoration-color: var(--blue-200);
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--blue-500); }

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
li { margin-bottom: var(--sp-2); }

/* Sichtbarer Fokusring fuer Tastaturbedienung */
:focus-visible {
  outline: 3px solid var(--blue-400);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Nur fuer Screenreader */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sprunglink zum Inhalt */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  padding: var(--sp-3) var(--sp-5);
  background: var(--blue-700);
  color: var(--text-inverse);
  border-radius: var(--r-md);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); color: var(--text-inverse); }


/* ---------------------------------------------------------------------------
   3. LAYOUT-HILFEN
--------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-alt); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); }

/* Ueberschrift mit kleinem Label darueber */
.section-label {
  display: inline-block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-head { margin-bottom: var(--sp-7); }
.section-head p {
  max-width: 58ch;
  font-size: var(--fs-md);
  color: var(--text-muted);
}


/* ---------------------------------------------------------------------------
   4. BUTTONS
--------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--blue-500);
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--blue-600);
  color: var(--text-inverse);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--text-inverse);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--text-inverse);
}

.btn--outline {
  background: transparent;
  border-color: var(--border);
  color: var(--gray-700);
}
.btn--outline:hover {
  border-color: var(--blue-300);
  background: var(--blue-50);
  color: var(--accent-strong);
}

.btn--light {
  background: var(--gray-0);
  color: var(--blue-700);
}
.btn--light:hover {
  background: var(--blue-50);
  color: var(--blue-800);
}

.btn--lg { padding: 1rem 2rem; font-size: var(--fs-base); }
.btn--sm { padding: 0.5rem 1.1rem; font-size: var(--fs-xs); }


/* ---------------------------------------------------------------------------
   5. HEADER UND NAVIGATION
--------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* Wird per JS gesetzt, sobald gescrollt wird */
.header.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

/* Wortmarke: kleiner blau-weisser Schild plus Name */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 800;
  font-size: var(--fs-base);
  letter-spacing: -0.01em;
  color: var(--gray-900);
  text-decoration: none;
  min-width: 0;
}
.brand:hover { color: var(--gray-900); }

.brand__mark {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: linear-gradient(140deg, var(--blue-500), var(--blue-800));
  position: relative;
  overflow: hidden;
}
/* Weisser Diagonalstreifen im Schild */
.brand__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0 42%,
    rgba(255, 255, 255, 0.92) 42% 58%,
    transparent 58% 100%
  );
}

.brand__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gray-600);
  text-decoration: none;
  padding-block: var(--sp-2);
}
.nav__link:hover { color: var(--gray-900); }

/* Unterstrich der aktiven Seite */
.nav__link.is-active { color: var(--blue-700); }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-500);
}

/* Hamburger nur mobil */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--gray-700);
}
.nav-toggle:hover { background: var(--gray-50); }

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

/* Hamburger wird zum X */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: translateY(-6px) rotate(-45deg); }


/* ---------------------------------------------------------------------------
   6. HERO
--------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 74vh, 720px);
  padding-block: var(--sp-9) var(--sp-8);
  background-color: var(--blue-900);
  color: var(--text-inverse);
  overflow: hidden;
  isolation: isolate;
}

/* Grundflaeche: tiefer Blauverlauf mit zwei Lichtquellen.
   Sieht auch ohne Foto hochwertig aus. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(90% 70% at 18% 12%, rgba(26, 111, 206, 0.55) 0%, transparent 62%),
    radial-gradient(70% 60% at 88% 88%, rgba(13, 86, 171, 0.45) 0%, transparent 60%),
    linear-gradient(165deg, var(--blue-800) 0%, var(--blue-950) 100%);
}

/* Optionales Foto. Wird per JS aktiviert, wenn config.heroImage gesetzt ist.
   Der Ausschnitt ist bewusst nach links verschoben (28% statt 50%):
   Das Motiv steht dadurch rechts, der Text links hat freie Flaeche. */
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: 28% center;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.hero__photo.is-loaded { opacity: 1; }

/* Dunkle Ueberlagerung, damit der Text auf jedem Foto lesbar bleibt */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(3, 20, 42, 0.30) 0%,
      rgba(3, 20, 42, 0.55) 55%,
      rgba(3, 20, 42, 0.88) 100%);
}

/* Sobald ein Foto geladen ist, wird kraeftiger abgedunkelt.
   Das Hero-Foto ist hell (weisse Raenge), weisse Schrift wuerde darauf
   sonst verschwimmen. Der Verlauf laeuft schraeg: links, wo der Text
   steht, ist es dunkel, rechts bleibt das Motiv sichtbar. */
.hero__photo.is-loaded ~ .hero__overlay {
  background:
    linear-gradient(100deg,
      rgba(3, 20, 42, 0.94) 0%,
      rgba(3, 20, 42, 0.90) 26%,
      rgba(3, 20, 42, 0.62) 48%,
      rgba(3, 20, 42, 0.28) 74%,
      rgba(3, 20, 42, 0.18) 100%),
    linear-gradient(180deg,
      rgba(3, 20, 42, 0.20) 0%,
      rgba(3, 20, 42, 0.26) 55%,
      rgba(3, 20, 42, 0.72) 100%);
}

/* Feines Rasterfeld, gibt dem Verlauf Struktur */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 78%);
  pointer-events: none;
}

/* Der Hero-Text sitzt linksbuendig am normalen Raster, nicht zentriert.
   Sonst wandert er in die Bildmitte und landet auf dem Motiv. */
.hero__inner { position: relative; }
.hero__inner > * { max-width: 700px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.08);
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
}
.hero__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-300);
}

.hero__title {
  margin-bottom: var(--sp-4);
  /* Eigene Skala statt --fs-4xl: gross genug fuer Wirkung, aber so
     gerechnet, dass eine Domain wie "herthafanclub.com" auch auf einem
     320px breiten Display in eine Zeile passt. */
  font-size: clamp(1.9rem, 1.25rem + 4.3vw, 4.5rem);
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--text-inverse);
  /* Im Hero lieber umbrechen als trennen, das sieht bei Namen besser aus */
  hyphens: manual;
  -webkit-hyphens: manual;
}

.hero__tagline {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.95);
}

.hero__subtitle {
  margin-bottom: var(--sp-6);
  /* Keine eigene Zeilenbegrenzung: der Untertitel soll auf Desktop und
     Tablet in EINER Zeile stehen. Die Breite gibt die Textspalte vor
     (.hero__inner > *, 700px). Erst unterhalb von rund 560px Displaybreite
     passt der Satz physisch nicht mehr in eine Zeile. */
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, 0.75);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Schmale helle Kante am unteren Hero-Rand.
   Bewusst flach gehalten: ein hoher Verlauf ueber dem dunklen Blau
   wirkt wie ein grauer Schleier statt wie ein Uebergang. */
.hero__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--blue-500) 0%, var(--blue-300) 50%, var(--blue-500) 100%);
  opacity: 0.55;
  pointer-events: none;
}

/* Kompakter Kopf fuer Unterseiten */
.page-hero {
  position: relative;
  padding-block: clamp(3rem, 2.2rem + 3.5vw, 5rem) clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
  background-color: var(--blue-900);
  background-image:
    radial-gradient(80% 120% at 12% 0%, rgba(26, 111, 206, 0.45) 0%, transparent 60%),
    linear-gradient(160deg, var(--blue-800), var(--blue-950));
  color: var(--text-inverse);
  overflow: hidden;
  isolation: isolate;
}
.page-hero > .container { position: relative; }
.page-hero h1 { color: var(--text-inverse); margin-bottom: var(--sp-3); }
.page-hero p {
  max-width: 56ch;
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, 0.72);
}
.page-hero .section-label { color: var(--blue-300); }

/* Optionales Foto im Seitenkopf, gleiche Mechanik wie im Hero */
.page-hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: 62% center;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.page-hero__photo.is-loaded { opacity: 1; }

.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(3, 20, 42, 0.93) 0%,
      rgba(3, 20, 42, 0.82) 42%,
      rgba(3, 20, 42, 0.55) 78%,
      rgba(3, 20, 42, 0.40) 100%);
}


/* ---------------------------------------------------------------------------
   7. SEKTIONEN
--------------------------------------------------------------------------- */

/* Fliesstext in "Was ist das hier?" und Vereinsgeschichte.
   Die Zeilenlaenge ist auf gut 60 Zeichen begrenzt — darueber wird
   laengerer Text muehsam zu lesen. */
.intro__text,
.history__text {
  max-width: 62ch;
}
.intro__text p,
.history__text p {
  font-size: var(--fs-md);
  color: var(--gray-600);
}

/* Erster Absatz der Einordnung etwas groesser als Einstieg */
.intro__text p:first-of-type {
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--gray-800);
}

/* Die Geschichte ist laenger: etwas mehr Luft zwischen den Absaetzen */
.history__text p { margin-bottom: var(--sp-5); }
.history__text p:last-child { margin-bottom: 0; }


/* --- Empfehlungen ---------------------------------------------------------
   Immer zwei nebeneinander. Bei ungerader Anzahl bleibt rechts eine
   Luecke — das ist so gewollt und ruhiger als ein breiter Restblock.
------------------------------------------------------------------------- */

.recommendations__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

.reco {
  display: flex;
  flex-direction: column;
  background: var(--gray-0);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.reco:hover {
  transform: translateY(-3px);
  border-color: var(--blue-200);
  box-shadow: var(--shadow-lg);
  color: inherit;
}

/* Der Rahmen haelt 3:2 fest, egal welche Masse das Bild hat.
   object-fit schneidet mittig zu, statt zu verzerren. */
.reco__frame {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--gray-100);
  overflow: hidden;
}
.reco__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease);
}
.reco:hover .reco__image { transform: scale(1.03); }

.reco__body {
  display: block;
  padding: var(--sp-5);
}

.reco__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
  font-size: var(--fs-md);
  font-weight: 750;
  line-height: 1.25;
  color: var(--gray-900);
  letter-spacing: -0.01em;
}
.reco__title::after {
  content: "↗";
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--blue-400);
  transition: transform var(--dur) var(--ease);
}
.reco:hover .reco__title::after { transform: translate(2px, -2px); }

.reco__slogan {
  display: block;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-muted);
}


/* ---------------------------------------------------------------------------
   8. LIVETICKER
--------------------------------------------------------------------------- */

.ticker {
  background: var(--gray-0);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Kopfzeile mit Status und Wettbewerb */
.ticker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--blue-900);
  color: var(--text-inverse);
}

.ticker__competition {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.65);
}

/* Status-Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.35rem 0.8rem;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.badge--live     { background: var(--live); color: #fff; }
.badge--upcoming { background: rgba(255,255,255,0.14); color: #fff; }
.badge--finished { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.85); }

/* Pulsierender Punkt bei LIVE */
.badge--live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.6s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

/* Spielpaarung */
.ticker__body { padding: var(--sp-6) var(--sp-5); }

.matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-4);
}

.team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
  min-width: 0;
}

.team__logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  /* Platzhalterflaeche, solange das Logo laedt */
  background: var(--gray-50);
  border-radius: var(--r-md);
  padding: 4px;
}

.team__name {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.25;
  color: var(--gray-800);
  overflow-wrap: anywhere;
}
/* Hertha wird hervorgehoben */
.team--own .team__name { color: var(--blue-700); }

.score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  min-width: 120px;
}

.score__value {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-family: var(--font-num);
  font-size: clamp(2.25rem, 1.8rem + 2.2vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}
.score__sep { color: var(--gray-300); font-weight: 400; }

.score__minute {
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--live);
}
.score__meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Anstosszeit statt Ergebnis bei kommenden Spielen */
.kickoff {
  text-align: center;
  min-width: 120px;
}
.kickoff__day {
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--gray-700);
}
.kickoff__time {
  font-family: var(--font-num);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.02em;
}
.kickoff__date {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Torliste */
.events {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}

.events__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.events__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
}

.event {
  display: grid;
  grid-template-columns: 22px 54px 1fr;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  margin-bottom: 0;
}
.event:nth-child(odd) { background: var(--gray-50); }

.event__icon { font-size: var(--fs-sm); line-height: 1; }

.event__score {
  font-family: var(--font-num);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gray-900);
}

.event__text { color: var(--gray-600); min-width: 0; }
.event__minute { font-weight: 650; color: var(--gray-700); }
.event__note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Fusszeile mit Aktualisierungszeit */
.ticker__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: var(--gray-50);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}


/* ---------------------------------------------------------------------------
   9. TABELLE
--------------------------------------------------------------------------- */

.table-card {
  background: var(--gray-0);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Wrapper macht die Tabelle auf schmalen Geraeten scrollbar */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.standings {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.standings thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--sp-3) var(--sp-3);
  background: var(--gray-50);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}
.standings thead th:nth-child(1),
.standings thead th:nth-child(2) { text-align: left; }

.standings tbody td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--gray-100);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.standings tbody tr:last-child td { border-bottom: none; }
.standings tbody tr { transition: background-color var(--dur) var(--ease); }
.standings tbody tr:hover { background: var(--gray-50); }

/* Platz */
.standings .col-rank {
  position: relative;
  width: 52px;
  text-align: left;
  font-weight: 650;
  color: var(--gray-600);
  padding-left: var(--sp-5);
}
/* Farbiger Zonenbalken links */
.standings .col-rank::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 4px;
  border-radius: 0 2px 2px 0;
  background: transparent;
}
tr.zone-promotion  .col-rank::before { background: var(--win); }
tr.zone-playoff-up .col-rank::before { background: #84cc16; }
tr.zone-playoff-dn .col-rank::before { background: #f59e0b; }
tr.zone-relegation .col-rank::before { background: var(--loss); }

/* Mannschaft */
.standings .col-team {
  text-align: left;
  min-width: 180px;
  white-space: normal;
}
.team-cell {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.team-cell__logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}
.team-cell__name { font-weight: 600; color: var(--gray-800); }

/* Punkte */
.standings .col-points {
  font-weight: 800;
  color: var(--gray-900);
  padding-right: var(--sp-4);
}

.standings .col-diff.is-positive { color: var(--win); }
.standings .col-diff.is-negative { color: var(--loss); }

/* Hertha-Zeile */
.standings tr.is-own {
  background: var(--blue-50);
  box-shadow: inset 3px 0 0 var(--blue-500);
}
.standings tr.is-own:hover { background: var(--blue-100); }
.standings tr.is-own .team-cell__name,
.standings tr.is-own .col-points,
.standings tr.is-own .col-rank { color: var(--blue-800); }
.standings tr.is-own .team-cell__name { font-weight: 800; }

/* Legende unter der Tabelle */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Hinweis auf horizontales Wischen, nur mobil sichtbar */
.table-hint {
  display: none;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}


/* ---------------------------------------------------------------------------
   10. DOMAIN-VERKAUF
--------------------------------------------------------------------------- */

.domain-sale {
  position: relative;
  /* Auf schmalen Geraeten deutlich weniger Innenabstand: 42px links und
     rechts fressen auf einem 320px-Display ein Viertel der Breite. */
  padding: clamp(1.5rem, 1rem + 3.5vw, 4rem);
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 100% at 90% 10%, rgba(26, 111, 206, 0.5) 0%, transparent 60%),
    linear-gradient(150deg, var(--blue-800), var(--blue-950));
  color: var(--text-inverse);
  overflow: hidden;
}

.domain-sale__label { color: var(--blue-300); }

.domain-sale h2 {
  /* Auf die Laenge der Ueberschrift abgestimmt: schmal genug fuer eine
     kraeftige Blocksetzung, breit genug, dass daraus kein schmaler
     Textturm wird. */
  max-width: 26ch;
  color: var(--text-inverse);
  font-size: var(--fs-2xl);
}

.domain-sale__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-block: var(--sp-5);
  padding: 0;
  list-style: none;
}
.domain-sale__list li { margin: 0; }

.domain-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--font-num);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
}
/* Hauptdomain hervorgehoben */
.domain-chip--primary {
  background: rgba(255, 255, 255, 0.95);
  border-color: transparent;
  color: var(--blue-800);
  font-weight: 700;
  font-size: var(--fs-md);
  padding: 0.6rem 1.4rem;
}

.domain-sale__text {
  max-width: 62ch;
  font-size: var(--fs-md);
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--sp-6);
}

/* --- Slogans ----------------------------------------------------------
   Zwei Darstellungen stehen bereit. Verwendet wird derzeit die Liste
   (.domain-sale__slogans). Willst du stattdessen nur EINEN hervorgehobenen
   Slogan, ersetze in der index.html die <ul> durch:

     <p class="domain-sale__slogan">Dein Slogan</p>
------------------------------------------------------------------------- */

/* Variante A: ein Slogan als hervorgehobene Zeile mit Balken */

.domain-sale__slogan {
  max-width: 34ch;
  margin-block: var(--sp-5);
  padding-left: var(--sp-5);
  border-left: 3px solid var(--blue-400);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-inverse);
}

/* Variante B (aktiv): mehrere Slogans untereinander */

.domain-sale__slogans {
  list-style: none;
  margin-block: var(--sp-5);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  /* Breit genug, dass jeder Slogan auf Desktop und Tablet in eine Zeile
     passt. Auf dem Handy reicht der Platz nicht, dort wird umbrochen. */
  max-width: 62ch;
}
.domain-sale__slogans li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}
.domain-sale__slogans li::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue-300);
  transform: translateY(-2px);
}

.domain-sale__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.5);
}


/* ---------------------------------------------------------------------------
   11. FOOTER
--------------------------------------------------------------------------- */

.footer {
  padding-block: var(--sp-7) var(--sp-6);
  background: var(--blue-950);
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--fs-sm);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.footer__brand {
  font-size: var(--fs-md);
  font-weight: 750;
  color: var(--text-inverse);
  margin-bottom: var(--sp-1);
}
.footer__tag { color: rgba(255, 255, 255, 0.5); font-size: var(--fs-sm); }

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}
.footer__links a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-weight: 500;
}
.footer__links a:hover {
  color: var(--text-inverse);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.45);
}
.footer__bottom p { margin: 0; }


/* ---------------------------------------------------------------------------
   12. RECHTSTEXTE (Impressum, Datenschutz)
--------------------------------------------------------------------------- */

.legal { font-size: var(--fs-base); }

.legal h2 {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  font-size: var(--fs-lg);
}
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

.legal h3 {
  margin-top: var(--sp-5);
  font-size: var(--fs-base);
  font-weight: 700;
}

.legal p,
.legal li { color: var(--gray-600); }

.legal address {
  margin-bottom: var(--sp-4);
  padding: var(--sp-5);
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-style: normal;
  line-height: 1.8;
}

.legal__updated {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}


/* ---------------------------------------------------------------------------
   13. ZUSTAENDE: Laden, Fehler, Leer
--------------------------------------------------------------------------- */

/* Grauer Platzhalterbalken waehrend des Ladens */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--gray-100) 25%,
    var(--gray-200) 37%,
    var(--gray-100) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--r-sm);
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.skeleton--logo  { width: 56px; height: 56px; border-radius: var(--r-md); }
.skeleton--line  { height: 12px; width: 90px; }
.skeleton--score { height: 44px; width: 110px; }
.skeleton--row   { height: 44px; width: 100%; margin-bottom: 6px; }

/* Fehlermeldung, wenn die API nicht erreichbar ist */
.state {
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
}
.state__icon {
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: var(--sp-3);
  opacity: 0.4;
}
.state__text {
  margin: 0 auto var(--sp-4);
  max-width: 44ch;
  color: var(--text-muted);
}
.state__text strong {
  display: block;
  margin-bottom: var(--sp-1);
  color: var(--gray-700);
  font-weight: 650;
}


/* ---------------------------------------------------------------------------
   14. RESPONSIVE
   Mobile First bedeutet hier: die Basis oben gilt fuer alle Groessen,
   darunter wird fuer schmale Geraete angepasst.
--------------------------------------------------------------------------- */

/* Tablet und kleiner */
@media (max-width: 900px) {
  .recommendations__grid { gap: var(--sp-4); }
}

/* Mobiles Menue */
@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-2) var(--sp-5) var(--sp-5);
    background: var(--gray-0);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);

    /* Geschlossen: unsichtbar und nicht fokussierbar */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
  }

  .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .nav__link {
    padding: var(--sp-4) 0;
    font-size: var(--fs-md);
    border-bottom: 1px solid var(--gray-100);
  }
  .nav__link.is-active::after { display: none; }
  .nav__link.is-active { color: var(--blue-700); }

  .nav .btn {
    margin-top: var(--sp-4);
    justify-content: center;
  }
}

/* Telefon */
@media (max-width: 640px) {
  .hero { min-height: auto; padding-block: var(--sp-8) var(--sp-7); }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  /* Am Handy wird das breite Foto stark beschnitten. Hier ist die Mitte
     der richtige Ausschnitt, sonst bleibt nur leere Traverse uebrig. */
  .hero__photo { background-position: 50% center; }
  .page-hero__photo { background-position: 58% center; }

  /* Ueber die volle Breite abdunkeln, weil der Text hier mittig sitzt */
  .hero__photo.is-loaded ~ .hero__overlay {
    background: linear-gradient(180deg,
      rgba(3, 20, 42, 0.82) 0%,
      rgba(3, 20, 42, 0.78) 50%,
      rgba(3, 20, 42, 0.92) 100%);
  }
  .page-hero__overlay {
    background: linear-gradient(180deg,
      rgba(3, 20, 42, 0.86) 0%,
      rgba(3, 20, 42, 0.80) 100%);
  }

  /* Empfehlungen untereinander */
  .recommendations__grid { grid-template-columns: 1fr; }

  .matchup {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
  /* Ergebnis wandert zwischen die Teams */
  .score, .kickoff { order: 2; min-width: 0; }
  .team:first-child { order: 1; }
  .team:last-child  { order: 3; }

  .team {
    flex-direction: row;
    justify-content: center;
    gap: var(--sp-3);
    text-align: left;
  }
  .team__logo { width: 40px; height: 40px; }

  .event {
    grid-template-columns: 20px 46px 1fr;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
  }

  .table-hint { display: block; }

  .domain-sale__list { gap: var(--sp-2); }

  .footer__top { flex-direction: column; gap: var(--sp-4); }
  .footer__links { gap: var(--sp-4); }
}

/* Sehr schmale Geraete, 360px und darunter */
@media (max-width: 380px) {
  .container { padding-inline: var(--sp-4); }
  .brand__name { font-size: var(--fs-sm); }
  .ticker__body { padding: var(--sp-5) var(--sp-4); }
}


/* ---------------------------------------------------------------------------
   15. MOTION UND PRINT
--------------------------------------------------------------------------- */

/* Nutzer, die weniger Bewegung wollen, bekommen keine */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .header, .footer, .hero__actions, .nav-toggle, .domain-sale { display: none; }
  body { color: #000; background: #fff; }
  .ticker, .table-card { box-shadow: none; border: 1px solid #ccc; }
  a { text-decoration: underline; }
}