/* =========================================================================
   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;
}
/* Echter Kursiv-Schnitt (für Sub-Headlines .sk-sh-sub) – ohne echten
   Schnitt würde der Browser Montserrat/Gin unsauber „faux-kursiv" neigen.
   Eine Datei deckt 400–500 ab (Variable-Font-Ausschnitt). */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-v31-latin-italic.woff2") format("woff2");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-v31-latin-ext-italic.woff2") format("woff2");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

  --jp-black:  #000000;   /* Schwarz */
  --jp-gold:   #e9b127;   /* Gelb */
  --jp-beige:  #f5f2e3;   /* Beige */
  --jp-white:  #ffffff;   /* Weiss */
  --jp-green-dark: #313010;  /* Grün – dunkel */
  --jp-green-light: #696527; /* Grün – hell */
  --jp-bordeaux: #5e040c;    /* Bordeaux */
  --jp-bg-light: #f5f2e3;    /* heller Hintergrund (ersetzt Gelb als Flächenfarbe) */

  --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); }