@charset "UTF-8";
/* grossmann · _breakpoints.scss — Partial (wird NICHT eigenständig kompiliert).
 * Verbindliches Breakpoint-System (Tobi 2026-06-13), an Elementor ausgerichtet:
 *   mobile      ≤ 767px
 *   tablet      768 – 1024px
 *   desktop     1025 – 1219px
 *   desktop-xl  ≥ 1220px
 * IMMER diese Mixins benutzen — keine ad-hoc px-Breakpoints mehr.
 * Nutzung:  .x { @include mobile { … } }  bzw.  @include tablet-down { … } */
/* „down" = max-width (desktop-first Overrides) · „up" = min-width · sonst = Bereich */
/* ≤ 767 */
/* 768–1024 */
/* ≤ 1024 (Tablet + Mobile) */
/* ≥ 768 */
/* 1025–1219 */
/* ≥ 1025 */
/* ≥ 1220 */
/* grossmann · tokens.scss → tokens.css. Einzige Quelle der Brand-Werte (CSS Custom
 * Properties). Reihenfolge-kritisch ZUERST geladen (Token→Base→…, inc/enqueue.php).
 * Schriften self-hosted via fonts.css (kein Google-Fonts-CDN — DSGVO/CORS). */
:root {
  --ink: #241526; /* Aubergine — STRUKTUR (Flächen/Pills/FAB/Nav), nicht Text */
  --ink-2: #33203A;
  --text: #26303C; /* dunkles Blau-Grau für Text/Headlines/Eyebrow */
  --pink: #DC4584; /* Lead-Akzent (Störer/CTA/Linie/Punkt) */
  --pink-deep: #6F1A3F;
  --pink-soft: #FAE0EA;
  --teal: #1A9D94; /* Zweit-Akzent (Insights-BG, AVGS-Highlight) */
  --teal-soft: #DCEFEC;
  --teal-soft-2: #E7F0EE;
  --purple: #6E3F86; /* Lila — NUR als Cutter/Breaker, nicht in Listen */
  --cream: #FBFAF7; /* warmes Papier als Bühne */
  --cream-2: #F6F4EE;
  --sand: #F2E6CD;
  --line: #E7E3DA; /* Hairline-Trenner */
  --muted: #697680;
  --r: 6px;
  --r-lg: 18px;
  --r-pill: 999px;
  --sh-sm: 0 1px 3px rgba(36, 21, 38, .06);
  --sh-md: 0 30px 60px -30px rgba(36, 21, 38, .18);
  --f-display: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Headlines = Sans */
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --f-script: 'Segoe Script', 'Segoe Print', 'Caveat', 'Brush Script MT', cursive;
  --gut: 0px; /* Grids: kein Eigen-Gutter — der Wrap liefert den Rand */
  --pad: clamp(56px, 6vw, 100px); /* Section vertikal — fluid */
  --pad-x: 40px; /* Wrap horizontal — Desktop */
  --maxw: 1280px;
}

/* Responsive Paddings — TB/LR: mobile 30/30 · tablet 40/30 · desktop 60/40.
   EINE Quelle pro Achse: Section = vertikal (--pad), Wrap = horizontal (--pad-x). */
@media (max-width: 1024px) {
  :root {
    --pad: clamp(44px, 6vw, 72px);
    --pad-x: 30px;
  }
}
@media (max-width: 767px) {
  :root {
    --pad: clamp(34px, 8vw, 52px);
    --pad-x: 30px;
  }
}