/* =====================================================================
   Digitales Vereinsheim — Brand CSS (drop-in)
   DFB × Coachbetter.
   Basiert auf dem DFB-Layoutprinzip (Dachmarke): modulares Zusammenspiel
   aus Superzeichen, DFB Sans Pro und der DFB-Farbwelt, in drei
   Ausprägungsstufen (Organisation → Gesellschaft → Sport).
   Alle Werte leiten sich aus den Tokens in :root ab.
   ===================================================================== */

/* ---------- DFB Sans Pro (eingebettet) ---------------------------------
   Corporate Font. Breiten-Varianz ist ein Marken-Stilmittel:
   Condensed/Compressed für laute Headlines, Basis für Body, Wide für Akzent.
   Fallback: Arial. -------------------------------------------------------*/
@font-face { font-family:"DFB Sans"; font-weight:300; font-style:normal;
  src:url("fonts/DFB-Sans-Pro-Light.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"DFB Sans"; font-weight:400; font-style:normal;
  src:url("fonts/DFB-Sans-Pro-Regular.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"DFB Sans"; font-weight:700; font-style:normal;
  src:url("fonts/DFB-Sans-Pro-Bold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"DFB Sans"; font-weight:900; font-style:normal;
  src:url("fonts/DFB-Sans-Pro-Black.ttf") format("truetype"); font-display:swap; }

@font-face { font-family:"DFB Sans Condensed"; font-weight:300; font-style:normal;
  src:url("fonts/DFB-Sans-Pro-CondensedLight.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"DFB Sans Condensed"; font-weight:400; font-style:normal;
  src:url("fonts/DFB-Sans-Pro-CondensedRegular.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"DFB Sans Condensed"; font-weight:700; font-style:normal;
  src:url("fonts/DFB-Sans-Pro-CondensedBold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"DFB Sans Condensed"; font-weight:900; font-style:normal;
  src:url("fonts/DFB-Sans-Pro-CondensedBlack.ttf") format("truetype"); font-display:swap; }

@font-face { font-family:"DFB Sans Compressed"; font-weight:700; font-style:normal;
  src:url("fonts/DFB-Sans-Pro-CompressedBold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"DFB Sans Compressed"; font-weight:900; font-style:normal;
  src:url("fonts/DFB-Sans-Pro-CompressedBlack.ttf") format("truetype"); font-display:swap; }

@font-face { font-family:"DFB Sans Wide"; font-weight:700; font-style:normal;
  src:url("fonts/DFB-Sans-Pro-WideBold.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"DFB Sans Wide"; font-weight:900; font-style:normal;
  src:url("fonts/DFB-Sans-Pro-WideBlack.ttf") format("truetype"); font-display:swap; }

:root {
  /* --- DFB-Farbwelt (offizielle Werte, DFB_Farben_RGB.ase) --- */
  --tiefgruen:    #001f23; /* DFB-Tiefgrün — tiefste Fläche / Logo-Haus / ink-dunkel */
  --dunkelgruen:  #004941; /* DFB-Dunkelgrün — PRIMÄRE Markenfläche + Headlines (die Stimme) */
  --mint-2:       #a6caba; /* DFB-Mintgrün-02 — Sekundärfläche */
  --mint-1:       #c8f2e0; /* DFB-Mintgrün-01 — weicher Tint / Hero-Karte */
  --akzentgruen:  #bdff00; /* DFB-Akzentgrün — Highlight / der eine laute Moment */
  --akzentviolett:#6100ff; /* DFB-Akzentviolett — Kategorie-Akzent / Halbtonraster */

  /* --- Arbeits-Neutrale --- */
  --ink:      #1b1c1d;
  --muted:    #5f6f68;
  --slate:    #9aa7a1;
  --hairline: #e2e8e5;
  --gray:     #f6f6f7;
  --paper:    #ffffff;

  /* --- Font-Stacks --- */
  --font:       "DFB Sans", Arial, "Helvetica Neue", sans-serif;
  --font-cond:  "DFB Sans Condensed", "DFB Sans", "Arial Narrow", Arial, sans-serif;
  --font-comp:  "DFB Sans Compressed", "DFB Sans Condensed", "Arial Narrow", Arial, sans-serif;
  --font-wide:  "DFB Sans Wide", "DFB Sans", Arial, sans-serif;

  /* --- Radius / Spacing (Flächenmodul: Radius ≈ Logoring-Breite) --- */
  --radius:    16px; /* digital "big": Logo 80px → 16px */
  --radius-sm: 10px;
  --gutter:    96px;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.45;
}

/* Zahlen immer tabular */
.num, .figure, table td, table th { font-variant-numeric: tabular-nums; }

/* ---------- Typo-Skala ------------------------------------------------- */
.display { font-family: var(--font-cond); font-weight: 900; font-size: clamp(56px,9vw,130px);
           line-height: .98; letter-spacing: -0.01em; color: var(--dunkelgruen); }
h1, .h1 { font-family: var(--font-cond); font-weight: 900; font-size: clamp(44px,6vw,88px);
          line-height: 1.02; color: var(--dunkelgruen); }
h2, .h2 { font-family: var(--font-cond); font-weight: 700; font-size: clamp(30px,4vw,46px);
          line-height: 1.08; color: var(--dunkelgruen); }
h3, .h3 { font-family: var(--font); font-weight: 700; font-size: clamp(24px,2.6vw,32px);
          line-height: 1.15; color: var(--dunkelgruen); }
p, li, .body { font-size: 18px; font-weight: 400; }

.figure { font-family: var(--font-comp); font-weight: 900; font-size: clamp(72px,12vw,160px);
          line-height: .9; color: var(--dunkelgruen); }

.claim  { font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; }

/* Kleiner Kicker über einer Headline (z. B. "JULI 2026 / FRÜHSTART").
   Dezent — steht ÜBER einer echten Headline, ersetzt sie nicht. */
.eyebrow{ font-family: var(--font); font-weight: 700; font-size: 15px; letter-spacing: 0.14em;
          text-transform: uppercase; color: var(--muted); }

/* Sektions-Überschrift ("WAS VEREINE GEWINNEN" etc.) — MUSS sichtbar sein.
   Deutlich größer, kräftig, Dunkelgrün (nicht muted), mit Akzent-Tick davor. */
.section-title { font-family: var(--font-cond); font-weight: 900;
          font-size: clamp(26px,3vw,40px); line-height: 1.06; letter-spacing: 0.01em;
          text-transform: uppercase; color: var(--dunkelgruen);
          display: flex; align-items: center; gap: .5em; margin: 0 0 .6em; }
.section-title::before { content:""; width:.5em; height:.16em; flex:0 0 auto;
          background: var(--akzentgruen); border-radius: 2px; }  /* kleiner Neon-Tick als Akzent */

/* Der eine laute Moment (Akzentgrün) — nur inline hinter EINEM Wort/Zahl. */
.highlight { background: var(--akzentgruen); color: var(--tiefgruen);
             padding: 0 .14em; border-radius: 4px; }

/* ---------- Flächenmodul (zentrales DFB-Layoutelement) -----------------
   Trägerfläche für Inhalt. Regeln (DFB-Layoutprinzip):
   - max. 50 % der Bildfläche, NIE randabfallend
   - Ecken immer abgerundet (Radius ≈ Logoring)
   - nur EINMAL pro Layout, keine verschachtelten Trägerflächen
   - Akzentfarbe nur in der Minimalausprägung (reine Logohinterlegung)   */
.flaechenmodul {
  background: var(--paper);
  border-radius: var(--radius);
  padding: var(--radius);              /* Innenabstand ≈ Logoring */
  max-width: 50%;
  box-shadow: 0 10px 40px rgba(0,31,35,.10);
}
.flaechenmodul--dunkel { background: var(--dunkelgruen); color: var(--paper); }
.flaechenmodul--tief   { background: var(--tiefgruen);   color: var(--paper); }
.flaechenmodul--mint   { background: var(--mint-1); color: var(--tiefgruen); }
/* Minimalausprägung = reine Logohinterlegung: HIER (und nur hier) Akzent erlaubt */
.flaechenmodul--logo   { display:inline-flex; align-items:center; justify-content:center;
                         padding: var(--radius); max-width:none; }
.flaechenmodul--akzent { background: var(--akzentgruen); color: var(--tiefgruen); } /* nur mit --logo kombinieren */

/* ---------- Halbtonraster (dekoratives Element) ------------------------
   Immer HINTER Text. Nur DFB-Akzentviolett. Für Organisation & Gesellschaft.
   Nicht mit Superzeichen "Sport" kombinieren. */
.halbtonraster {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(var(--akzentviolett) 22%, transparent 24%);
  background-size: 14px 14px;
  opacity: .18;
}
.halbtonraster + * { position: relative; z-index: 1; }

/* ---------- Karten ----------------------------------------------------- */
.card { background: var(--paper); border: 1px solid var(--hairline);
        border-top: 6px solid var(--dunkelgruen); border-radius: var(--radius-sm); padding: 28px; }
.card--hero { background: var(--mint-1); border-top-color: var(--akzentgruen); }

/* ---------- Buttons / CTA-Akzent --------------------------------------
   Akzentgrün gehört auf KLEINE Elemente, die poppen sollen — v. a. den
   Aktions-Button/Link. NICHT als großflächige Fläche einsetzen. */
.btn { display: inline-flex; align-items: center; gap: .5em;
       font-family: var(--font); font-weight: 700; font-size: 16px; line-height: 1;
       padding: 14px 22px; border-radius: var(--radius-sm); text-decoration: none;
       border: 0; cursor: pointer; }
.btn--akzent { background: var(--akzentgruen); color: var(--tiefgruen); }  /* der Pop-Moment */
.btn--dark   { background: var(--dunkelgruen); color: var(--paper); }
.btn--ghost  { background: transparent; color: var(--dunkelgruen);
               box-shadow: inset 0 0 0 2px var(--dunkelgruen); }

/* ---------- Verdikt-Bänder (DVH) ---------------------------------------
   Ruhiger Grund (Dunkel-/Tiefgrün oder Mint) trägt die Aussage; der grüne
   AKZENT sitzt punktuell — als Button/Tick, nicht als volle Neonfläche. */
.punch  { background: var(--dunkelgruen); color: var(--paper);
          border-left: 8px solid var(--akzentgruen); border-radius: var(--radius-sm);
          padding: 24px 28px; }
/* Abschluss-CTA: Dunkelgrün-Band, Headline weiß, EIN Akzentgrün-Button rechts.
   (Früher volle Neonfläche — bewusst ersetzt: Neon poppt als Button, nicht als Fläche.) */
.climax { display: flex; align-items: center; justify-content: space-between; gap: 24px;
          flex-wrap: wrap; background: var(--dunkelgruen); color: var(--paper);
          border-radius: var(--radius-sm); padding: 28px 32px; }
.climax .h2, .climax h2 { color: var(--paper); margin: 0; }
.climax p { color: var(--mint-1); margin: 4px 0 0; }
/* Nur wenn ein Höhepunkt bewusst „laut" sein soll (Stufe Sport, kleine Fläche): */
.climax--laut { background: var(--akzentgruen); color: var(--tiefgruen); }
.climax--laut p { color: var(--tiefgruen); }

/* ---------- Ausprägungsstufen (Lautstärke) ----------------------------
   Kontext-Klasse auf Sektion/Cover setzen — steuert Farbe + Type-Breite. */
.stufe-organisation h1, .stufe-organisation h2, .stufe-organisation .display {
  font-family: var(--font-cond); }                          /* ruhig, sachlich */
.stufe-gesellschaft h1, .stufe-gesellschaft h2, .stufe-gesellschaft .display {
  font-family: var(--font-cond); }                          /* wärmer, Freisteller */
.stufe-sport h1, .stufe-sport h2, .stufe-sport .display {   /* laut, dynamisch */
  font-family: var(--font-comp); text-transform: uppercase; letter-spacing: -0.01em; }

/* ---------- Flächen-Helfer -------------------------------------------- */
.bg-tief  { background: var(--tiefgruen);   color: var(--paper); }
.bg-dunkel{ background: var(--dunkelgruen); color: var(--paper); }
.bg-mint1 { background: var(--mint-1);      color: var(--tiefgruen); }
.bg-mint2 { background: var(--mint-2);      color: var(--tiefgruen); }
.on-dark h1, .on-dark h2, .on-dark h3,
.bg-tief h1, .bg-tief h2, .bg-dunkel h1, .bg-dunkel h2 { color: var(--paper); }

.section { padding: var(--gutter); }
.logo-safe { padding: 50%; } /* Schutzraum = halbe Logohöhe */