/* ============================================================
   Chiemsee Schulen — Design-Tokens fuer WordPress / Elementor.
   Quelle: Design System (tokens/*.css). Nicht per Hand aendern —
   bei Aenderungen im Design System hier nachziehen.
   ============================================================ */

/* --- Brandon Text (HVD Fonts, lizenziert) ---
   Wir lizenzieren nur drei Schnitte: Regular 400, Regular Italic 400, Bold 700.
   Andere Gewichte (300, 500, 600, ...) EXISTIEREN NICHT und werden ueber
   font-synthesis:none unten hart unterbunden -- sonst wuerde der Browser
   sie faelschen und typografisch matschig darstellen. */
@font-face { font-family:"Brandon Text"; font-weight:400; font-style:normal; font-display:swap; src:url("../fonts/BrandonText-Regular.woff2") format("woff2"); }
@font-face { font-family:"Brandon Text"; font-weight:400; font-style:italic; font-display:swap; src:url("../fonts/BrandonText-RegularItalic.woff2") format("woff2"); }
@font-face { font-family:"Brandon Text"; font-weight:700; font-style:normal; font-display:swap; src:url("../fonts/BrandonText-Bold.woff2") format("woff2"); }

:root {
  /* Blau */
  --blue-700:#1f6aae; --blue-600:#2f83c9; --blue-500:#3e96db;
  --blue-400:#6bb0e5; --blue-300:#9ecbef; --blue-100:#d9ecf9; --blue-050:#eef6fc;
  /* Bronze */
  --bronze-700:#6f5638; --bronze-600:#856745; --bronze-500:#9e7b54;
  --bronze-400:#b6976f; --bronze-300:#cdb593; --bronze-100:#e9dfd0; --bronze-050:#f5efe6;
  /* Neutral */
  --ink-900:#26282b; --ink-700:#45484c; --ink-500:#6b6f74; --ink-400:#8b9096;
  --ink-300:#b9bdc2; --ink-200:#d9dcdf; --ink-100:#eceef0;
  --paper:#ffffff; --paper-soft:#fbfaf8;
  /* Semantik */
  --color-primary:var(--blue-500); --color-primary-hover:var(--blue-600); --color-primary-active:var(--blue-700);
  --color-accent:var(--bronze-500); --color-link:var(--bronze-500); --color-link-hover:var(--bronze-600);
  --color-border:var(--ink-200); --color-divider:var(--bronze-500);
  /* Typo */
  --font-family-base:"Brandon Text","Futura","Avenir Next","Helvetica Neue",Arial,sans-serif;
  /* --fs-display -> Elementor "Primary" (H1/Display).
     --fs-h1      -> Elementor "Secondary" (H2 Abschnitt).
     --fs-h2      -> Custom "Bronze Subhead". */
  --fs-display:2.75rem;  /* 44px */
  --fs-h1:2rem;          /* 32px */
  --fs-h2:1.375rem;      /* 22px */
  --fs-h3:1.125rem;      /* 18px */
  --fs-body-lg:1.1875rem; --fs-body:1.0625rem; --fs-body-sm:0.9375rem;
  --fs-eyebrow:0.8125rem; --fs-caption:0.8125rem;
  --lh-heading:1.22; --lh-body:1.65;
  --ls-tight:-0.015em; --ls-eyebrow:0.16em; --ls-caps:0.08em; --ls-wide-tag:0.28em;
  /* Layout */
  --radius-sm:3px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(38,40,43,.05);
  --shadow-md:0 6px 20px rgba(38,40,43,.08);
  --shadow-lg:0 18px 48px rgba(38,40,43,.12);
  --focus-ring:0 0 0 3px var(--blue-100);
  --ease-out:cubic-bezier(.16,1,.3,1); --dur-base:200ms; --dur-slow:360ms;
  --content-max:1200px; --gutter:clamp(1.5rem,5vw,6rem); --measure:62ch;
}

/* --- Basis --- */
body {
  font-family:var(--font-family-base);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--ink-900);
  background:var(--paper);
  /* Faux-Weights und Faux-Italic verbieten -- Brandon Text hat nur
     400 normal, 400 italic und 700 normal. Ohne diese Regel wuerde
     der Browser bei Anforderung z. B. von 500 oder 700-italic
     synthetisieren und die Typografie matschig zeichnen. */
  font-synthesis:none;
}
h1,h2,h3,h4 {line-height:var(--lh-heading); letter-spacing:var(--ls-tight); color:var(--ink-900); }
p { max-width:var(--measure); }
a { color:var(--color-link); text-decoration:none; transition:color var(--dur-base) var(--ease-out); }
a:hover { color:var(--color-link-hover); }
:focus-visible { outline:none; box-shadow:var(--focus-ring); }

/* --- Marken-Hilfsklassen. In Elementor als CSS-Klasse am Widget setzen. --- */
.csz-eyebrow { font-size:var(--fs-eyebrow); letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color:var(--ink-900); }
.csz-subhead { font-size:var(--fs-h2); color:var(--bronze-500); line-height:1.35; }
.csz-underline .elementor-heading-title,
.csz-underline { text-decoration:underline; text-decoration-color:var(--blue-500); text-decoration-thickness:2px; text-underline-offset:.16em; }
.csz-hairline { border-top:1px solid var(--color-divider); }
.csz-callout { border-top:1px solid var(--color-divider); border-bottom:1px solid var(--color-divider); padding:1.5rem 0; color:var(--bronze-600); }
.csz-card { background:var(--paper); border:1px solid var(--ink-200); box-shadow:var(--shadow-md); }
.csz-card--primary { border-top:3px solid var(--color-primary); }
.csz-card--accent  { border-top:3px solid var(--color-accent); }

/* --- Dezente Scroll-Reveals (entspricht der HTML-Vorlage) ---
   In Elementor: Motion Effects > Entrance Animation "Fade In Up",
   Duration slow, Delay 0. Diese Klasse nur, falls ohne Motion Effects gebaut wird. */
@media (prefers-reduced-motion:no-preference) {
  .csz-reveal { opacity:0; transform:translateY(16px); transition:opacity 520ms var(--ease-out), transform 520ms var(--ease-out); }
  .csz-reveal.is-visible { opacity:1; transform:none; }
}


/* ============================================================
   TYPOGRAFIE — fluide Skala (clamp)
   Chiemsee Schulen Zimmermann

   Interpolationsbereich: 375px (Mobil) bis 1440px (Desktop).
   Darunter und darüber greifen die festen Grenzwerte.

   Alle clamp()-Werte sind in rem mit einem vw-Anteil formuliert
   (rem + vw statt reinem vw). Nur so skaliert der Text noch mit,
   wenn Nutzer*innen die Browser-Schriftgröße hochsetzen —
   reines vw bricht diese Einstellung (WCAG 1.4.4).

   Brandon Text hat eine kleine x-Höhe: die Skala liegt bewusst
   eine Stufe über einer üblichen Sans, Fließtext endet bei 17px.
   ============================================================ */

:root {
  /* --- Skala: min (375px) → max (1440px) --- */

  /* Display / Hero-H1 — 36 → 54 */
  --fs-display: clamp(2.25rem, 1.854rem + 1.69vw, 3.375rem);

  /* H1 / Abschnittsüberschrift — 30 → 38 */
  --fs-h1: clamp(1.875rem, 1.699rem + 0.751vw, 2.375rem);

  /* CTA-Überschrift — 24 → 32 */
  --fs-h1-cta: clamp(1.5rem, 1.324rem + 0.751vw, 2rem);

  /* Karten-Überschrift (Weiche Ausbildung/Akademie) — 22 → 28 */
  --fs-h2-card: clamp(1.375rem, 1.243rem + 0.563vw, 1.75rem);

  /* H2 — bronzener Subhead — 21 → 25 */
  --fs-h2: clamp(1.3125rem, 1.224rem + 0.376vw, 1.5625rem);

  /* H3 — 17 → 19 */
  --fs-h3: clamp(1.0625rem, 1.019rem + 0.188vw, 1.1875rem);

  /* Lead / großer Fließtext — 18 → 19 */
  --fs-body-lg: clamp(1.125rem, 1.103rem + 0.094vw, 1.1875rem);

  /* Fließtext — 16 → 17 */
  --fs-body: clamp(1rem, 0.978rem + 0.094vw, 1.0625rem);

  /* Klein — 14 → 15 */
  --fs-body-sm: clamp(0.875rem, 0.853rem + 0.094vw, 0.9375rem);

  /* Eyebrow / Caption — 12 → 13 */
  --fs-eyebrow: clamp(0.75rem, 0.728rem + 0.094vw, 0.8125rem);
  --fs-caption: var(--fs-eyebrow);

  /* --- Zeilenhöhen: bleiben fest, keine Interpolation.
         Große Grade brauchen enger, Fließtext bleibt luftig. --- */
  --lh-tight: 1.12;    /* Display */
  --lh-heading: 1.22;  /* H1, H2 */
  --lh-body: 1.65;     /* Fließtext */
  --lh-relaxed: 1.8;

  /* --- Tracking. Brandon Text ist breit gebaut: große Grade
         brauchen negatives Tracking, Versalien Öffnung. --- */
  --ls-tight: -0.015em;
  --ls-normal: 0;
  --ls-eyebrow: 0.16em;
  --ls-caps: 0.08em;
  --ls-wide-tag: 0.28em;

  /* --- Signatur-Unterstreichung unter dem Display-Heading --- */
  --heading-underline-offset: 0.16em;
  --heading-underline-thickness: 2px;

  /* --- Zeilenlänge --- */
  --measure: 62ch;
  --measure-narrow: 44ch;
  --paragraph-gap: 1.15em;
}