/* ============================================================
   1. FC HOFFNUNGSVOLL — Landing
   Eine Datei. Oben die Tokens aus dem Design-System (nur die,
   die diese Seite wirklich braucht), unten die Seite selbst.
   ============================================================ */

/* ---- Schriften: selbst gehostet, kein Google-Request ----
   Archivo ist der variable Schnitt MIT wdth-Achse — die Headline
   läuft auf 125% Weite, sonst ist es nicht der Akira-Look.
   Figtree ersetzt Circular Std Book. */
@font-face {
  font-family: 'Archivo';
  src: url('assets/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('assets/figtree-latin.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Archivo', 'Arial Black', sans-serif;
  --font-text:    'Figtree', 'Century Gothic', system-ui, sans-serif;

  /* Farben — CI v2 */
  --creme:     #F7F2E8;
  --schwarz:   #171717;
  --bordeaux:  #7D2340;
  --gruen:     #1E5B3A;
  --rosa:      #F2B8C6;
  --rosa-tint: #F9DEE3;
  --hellblau:  #80CCF1;
  --graphit:   #3A3A38;
  --stein:     #6E6B66;
  --white:     #FFFFFF;

  --cta-bg:   var(--rosa);      /* CTA = Rosa-Pill mit Bordeaux-Text */
  --cta-text: var(--bordeaux);

  /* Typo */
  --fs-display-m: clamp(1.6rem, 3.2vw, 2.4rem);
  --fs-xl: 1.25rem;
  --fs-lg: 1.125rem;
  --fs-xs: 0.75rem;
  --fw-medium: 500;
  --fw-semibold: 600;
  --lh-tight: 1.02;
  --lh-snug: 1.25;
  --lh-body: 1.55;
  --track-display: 0.02em;
  --track-eyebrow: 0.16em;

  /* Effects */
  --radius-pill: 999px;
  --shadow-soft: 0 10px 24px -12px rgba(23, 23, 23, 0.30);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--creme);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--graphit);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--rosa); color: var(--schwarz); }
:focus-visible { outline: 3px solid var(--hellblau); outline-offset: 2px; }

/* ---- Hero ------------------------------------------------- */

main {
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 72px 48px;
}

/* wrap-reverse: auf schmalen Schirmen steht das Wappen oben. */
.hero {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  gap: 56px;
  width: 100%;
}

.hero-text {
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.eyebrow {
  margin: 0;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  font-size: var(--fs-xs);
  color: var(--bordeaux);
}

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: var(--lh-tight);
  font-size: var(--fs-display-m);
  color: var(--schwarz);
  text-wrap: balance;
}

.lead {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--graphit);
  max-width: 34ch;
  text-wrap: pretty;
}

/* ---- Buttons ---------------------------------------------- */

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
  max-width: 460px;
}

.btn {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 62px;
  border-radius: var(--radius-pill);
  background: var(--cta-bg);
  color: var(--cta-text);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  font-size: var(--fs-lg);
  transition: transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow: none;
}

.btn-gruen { background: var(--gruen); color: var(--creme); }

.btn-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 0;
}
.btn-row { display: flex; align-items: center; gap: 10px; }
.btn-sub {
  font-family: var(--font-text);
  font-weight: var(--fw-medium);
  font-stretch: 100%;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-xs);
}

/* ---- Wappen + Sticker ------------------------------------- */

.hero-crest {
  flex: 0 1 auto;
  margin: 0 auto;
  position: relative;
}
.hero-crest img {
  width: clamp(220px, 26vw, 320px);
  height: auto;
  display: block;
}

/* Sticker aus dem Design-System (components/merch/Sticker.jsx):
   Zacken-Siegel, tone="red", 22 Zacken, in sich -12° gedreht,
   plus -5° aus der Platzierung am Wappen = -17°.
   Das polygon() ist exakt die Ausgabe der starburst(22, 40, 50)-
   Funktion des Bundles — nicht per Hand nachgezeichnet. */
.sticker {
  --zacken: polygon(50.00% 0.00%,55.69% 10.41%,64.09% 2.03%,66.62% 13.61%,77.03% 7.94%,
    76.19% 19.77%,87.79% 17.26%,83.65% 28.37%,95.48% 29.23%,88.38% 38.73%,99.49% 42.88%,
    90.00% 50.00%,99.49% 57.12%,88.38% 61.27%,95.48% 70.77%,83.65% 71.63%,87.79% 82.74%,
    76.19% 80.23%,77.03% 92.06%,66.62% 86.39%,64.09% 97.97%,55.69% 89.59%,50.00% 100.00%,
    44.31% 89.59%,35.91% 97.97%,33.38% 86.39%,22.97% 92.06%,23.81% 80.23%,12.21% 82.74%,
    16.35% 71.63%,4.52% 70.77%,11.62% 61.27%,0.51% 57.12%,10.00% 50.00%,0.51% 42.88%,
    11.62% 38.73%,4.52% 29.23%,16.35% 28.37%,12.21% 17.26%,23.81% 19.77%,22.97% 7.94%,
    33.38% 13.61%,35.91% 2.03%,44.31% 10.41%);

  position: absolute;
  bottom: -8px;
  left: -28px;
  width: 148px;
  height: 148px;
  display: grid;
  place-items: center;
  transform: rotate(-17deg);

  text-align: center;
  font-family: var(--font-text);
  font-weight: 900;
  text-transform: uppercase;
  /* Kein Tracking und deutlich kleiner als die 0.13 × size aus dem Bundle:
     die längste Zeile „Fanclub‑Welt" ist zugleich die unterste, und dort
     ist die Scheibe schon schmaler als in der Mitte. Sie muss am Stück
     hineinpassen, sonst trennt der Browser mitten im Wort. */
  letter-spacing: 0;
  font-size: 8.75px;
  line-height: 1.25;
  color: var(--white);
  padding: 0 12%;
}
/* äußerer Ring */
.sticker::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rosa-tint);
  clip-path: var(--zacken);
}
/* innere Scheibe */
.sticker::after {
  content: "";
  position: absolute;
  inset: 8%;
  background: var(--bordeaux);
  clip-path: var(--zacken);
}
/* der Text liegt über beiden Scheiben */
.sticker > span { position: relative; z-index: 1; }

/* ---- Footer ------------------------------------------------ */

footer { display: flex; flex-direction: column; }

.legal {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 16px 24px;
  font-size: var(--fs-xs);
}
.legal a { color: var(--stein); text-decoration: none; }
.legal a:hover { color: var(--schwarz); }

/* Leo-Band an der Unterkante — das Template-Device der CI. */
.rk-band {
  height: 56px;
  background-image: url('assets/leo-fresh-band.png');
  background-size: auto 100%;
  background-repeat: repeat-x;
}

/* ---- Klein ------------------------------------------------- */

@media (max-width: 640px) {
  main { padding: 48px 24px; }
  .hero { gap: 40px; }
  .sticker { width: 128px; height: 128px; font-size: 8.5px; left: -18px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}