/* ============================================================
   DDPP® — Ding Dong Ping Pong · Brand Stylesheet (Produktion)
   Quelle: „DDPP — Die Marke" (Markenbausteine, Stand 02/2025)
   + DDPP Design System (Stand 06/2026)

   Einbindung auf jeder Seite:
   <link rel="stylesheet" href="/brand/ddpp-brand.css">
   (Pfad ggf. anpassen — fonts/ muss neben dieser Datei liegen)
   ============================================================ */

/* ------- Fonts (self-hosted) ------- */
@font-face {
  font-family: "TT Hoves Pro";
  src: url("fonts/TT-Hoves-Pro-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "TT Hoves Pro";
  src: url("fonts/TT-Hoves-Pro-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Items";
  src: url("fonts/Items-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Items";
  src: url("fonts/Items-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Items Condensed";
  src: url("fonts/Items-CondensedRegular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BC AlphaPipe";
  src: url("fonts/bc-alphapipe-bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "BC AlphaPipe";
  src: url("fonts/bc-alphapipe-bold-italic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 800; font-style: italic; font-display: swap;
}

:root {
  /* ------- Primärfarben (offiziell) ------- */
  --ddpp-green:        #115740; /* „Backhand Green" · Pantone 343 C · RAL 6005 */
  --ddpp-cyan:         #00D2EA; /* „Smash Blue" · Pantone 306 C */
  --ddpp-orange:       #FF8638; /* „Forehand Orange" · Pantone 1505 C · RAL 2007 */
  --ddpp-green-deep:   #0c3f2e; /* hover/pressed — abgeleitet */

  /* ------- Sekundärfarben (offiziell) ------- */
  --ddpp-jimmy-blue:   #3C32C8; /* „Jimmy Blue" · Pantone 2738 C · RAL 5002 */
  --ddpp-lavendl:      #9186FD; /* „Lucky Lavendl" · Pantone 7452 C · RAL 4005 */
  --ddpp-sunny:        #FFFA5F; /* „Sunny Side" · Pantone 100 C · RAL 1016 */
  --ddpp-taube:        #C5B4E3; /* „Straßen Taube" · Pantone 2635 C · RAL 4011 */
  --ddpp-flamingo:     #F8C5B5; /* „Flamingo Rose" · Pantone 1692 C · RAL 3016 */
  --ddpp-black:        #000000; /* „Pitch Black" · Pantone Black C · RAL 7021 */
  --ddpp-offwhite:     #F9F4F0; /* „Off White" · 15% Pantone 2309 C · RAL 9001 */
  --ddpp-white:        #FFFFFF;

  /* ------- Semantik ------- */
  --bg:                var(--ddpp-offwhite);
  --bg-inverse:        var(--ddpp-green);
  --fg-1:              var(--ddpp-green);
  --fg-2:              #2C3E37;
  --fg-3:              #6B7B73;
  --fg-on-dark:        var(--ddpp-offwhite);
  --cta:               var(--ddpp-orange); /* primärer CTA: „Platte buchen" etc. */
  --border:            color-mix(in oklab, var(--ddpp-green) 18%, transparent);
  --border-strong:     var(--ddpp-green);

  /* ------- Schrift-Rollen (lt. Markenbuch S. 17) ------- */
  --font-headline:     "Items", "TT Hoves Pro", sans-serif;       /* Headlines */
  --font-body:         "TT Hoves Pro", "Helvetica Neue", system-ui, sans-serif; /* Copy + Lead */
  --font-stoerer:      "BC AlphaPipe", "Arial Black", sans-serif; /* NUR Störer/Misc */
  --font-accent:       "Items", "TT Hoves Pro", sans-serif;       /* Labels, Eyebrows, Zahlen */
  --font-condensed:    "Items Condensed", "Items", sans-serif;    /* Ticker, Metadaten */
  --font-mono:         "JetBrains Mono", ui-monospace, Menlo, monospace; /* Codes, Tabellen */

  /* ------- Spacing (4pt) ------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ------- Radii (Marke ist flach & kantig) ------- */
  --r-0: 0; --r-1: 4px; --r-2: 8px; --r-pill: 999px;

  /* ------- Type scale ------- */
  --fs-display:  clamp(56px, 9vw, 144px);
  --fs-h1:       clamp(40px, 5vw, 72px);
  --fs-h2:       clamp(28px, 3.4vw, 44px);
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-caption:  12px;
}

/* ============================================================
   Basis-Typografie
   ============================================================ */

html { color-scheme: light; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines = Items Medium, Sentence Case (KEIN uppercase) */
.display, h1.display {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 0.96;
  letter-spacing: -0.01em;
}
h1, .h1 {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 0;
}
h2, .h2 {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 0;
}
h3, .h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.2;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.3;
  margin: 0;
}
p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  margin: 0;
}
.lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
}
.eyebrow {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.caption, small {
  font-family: var(--font-accent);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  color: var(--fg-3);
}
code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.94em;
}

/* Störer — BC AlphaPipe. NUR für Aufmerksamkeits-Elemente:
   Stamps, Badges, Promo-Bursts („−50%"), Ticker, „funtimes".
   NIEMALS als Headline-Schrift. */
.stoerer {
  font-family: var(--font-stoerer);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 0.95;
}
.stoerer.italic, .stoerer em {
  font-style: italic;
  text-transform: none;
}

/* Links + CTA */
a {
  color: var(--ddpp-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
a:hover { color: var(--ddpp-orange); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--ddpp-green);
  background: var(--cta);
  border: none;
  border-radius: var(--r-pill);
  padding: 14px 28px;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 120ms;
}
.btn-primary:hover { background: color-mix(in oklab, var(--ddpp-orange) 88%, black); color: var(--ddpp-green); }
.btn-primary:active { transform: scale(0.97); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  color: var(--ddpp-green);
  background: transparent;
  border: 1.5px solid var(--ddpp-green);
  border-radius: var(--r-pill);
  padding: 13px 28px;
  text-decoration: none;
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn-secondary:hover { background: var(--ddpp-green); color: var(--ddpp-offwhite); }
.btn-secondary:active { transform: scale(0.97); }

/* Dunkle Flächen */
.on-dark, .surface-green { color: var(--fg-on-dark); }
.on-dark a, .surface-green a { color: var(--ddpp-cyan); }
.surface-green { background: var(--ddpp-green); }
.surface-cyan { background: var(--ddpp-cyan); color: var(--ddpp-green); }
.surface-orange { background: var(--ddpp-orange); color: var(--ddpp-green); }