/* =========================================================================
   Joe Peña's Franchise — Markendesign 2.0 (zusammengeführtes Stylesheet)
   Ehemals zwei Dateien (style.css Basis + sketch.css Skizzen-Ebene) — hier
   in einer Datei vereint, unbenutzte Regeln aus beiden entfernt. Header und
   Footer liegen separat in header-footer.css (lädt danach).

   Display/Headlines: GIN (Marken-Plakatschrift, Versalien) · Fließtext: Montserrat.
   Beide Schriften liegen lokal in assets/fonts/ (kein Google-Fonts-Request).

   Aufbau: Basis-Regeln zuerst, danach die „Skizzen"-Ebene (.sk-Präfix bzw.
   body.sk), die auf jeder Seite aktiv ist und gezielt überschreibt — v. a.
   für den transparent-über-dem-Hero-Header und die Karussell-/Parallax-Layer.
   ========================================================================= */

/* ---------- Markenschriften: Gin (Headlines) & Montserrat (Fließtext) ----------
   Beide Schnitte liegen lokal in assets/fonts/ (Brandbook „Typografie/Montserrat"
   und „Typografie/Gin"). Montserrat deckt 400/500/700 ab — dazwischenliegende
   Schriftstärken (z. B. 600) wählt der Browser automatisch die nächstliegende
   geladene Type. */
@font-face {
  font-family: "Gin";
  src: url("../fonts/gin-regular.woff") format("woff"),
       url("../joe-pena-fonts/fonts/gin-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-v26-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-v26-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-v26-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Brandbook-Farben (offizielle Palette — keine anderen Farben verwenden) --- */

  --jp-black:  #000000;   /* Schwarz */
  --jp-gold:   #e9b127;   /* Gelb */
  --jp-beige:  #f5eac7;   /* Beige */
  --jp-white:  #ffffff;   /* Weiss */
  --jp-green-dark: #313010;  /* Grün – dunkel */

  --line: rgba(26, 26, 25, 0.14);

  --font-display: "Gin", sans-serif;
  --font-body: "Montserrat", sans-serif;

  --wrap: 1200px;
  --gap: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 3px;
  --radius-lg: 6px;
  --shadow: 0 22px 60px var(--line);
  --shadow-soft: 0 10px 34px var(--line);

  --transition: all 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.13rem);
  line-height: 1.68;
  color: var(--jp-black);
  background: var(--jp-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* kein horizontales Scrollen / Überlauf auf Mobil */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none;}
::selection { background: var(--jp-gold); color: var(--jp-black); }
:focus-visible { outline: 3px solid var(--jp-green-dark); outline-offset: 3px; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4, .kicker, .btn { font-family: var(--font-display); }
h1, h2, h3, h4 { line-height: 1.08; margin: 0 0 .5em; font-weight: 600; letter-spacing: .01em; color: var(--jp-black); }
h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); font-weight: 600; }
h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 1rem + 0.7vw, 1.5rem); }
h4 { font-size: 1rem; }
p { margin: 0 0 1.1rem; }
.lead { font-size: clamp(1.12rem, 1rem + 0.7vw, 1.45rem); color: var(--jp-black); line-height: 1.55; }
em, i { font-style: italic; }
strong { color: var(--jp-black); }