/*
 * Design-Tokens.
 *
 * Die Farbwerte stammen aus dem :root-Block des Webflow-Exports
 * (scentariuminfo.css Z. 25-35), sind aber sprechend umbenannt.
 * Ergänzt um drei Werte, die Webflow hartcodiert liess: --ink-strong,
 * --border und --danger.
 */

:root {
  /*
   * Marke — vom kräftigsten zum hellsten Ton.
   *
   * Zwei Töne sind gegenüber dem Export abgedunkelt, damit weisse Schrift
   * darauf die WCAG-AA-Schwelle von 4,5:1 erreicht. Die Originalwerte kamen
   * nur auf 2,29:1 (Fläche) bzw. 4,19:1 (Button) und waren damit für kleine
   * Schrift nicht barrierefrei.
   */
  --brand-deep: #155800;   /* Zitate — dunkler als --brand, 8,2:1 auf Weiss */
  --brand: #4d7a3f;        /* Buttons, Links, Icons   (Export: --100 #4d8951) — 5,03:1 auf Weiss */
  --brand-mid: #547f45;    /* Header, Footer, CTA     (Export: --200 #90b67b) — 4,67:1 mit Weiss */
  --brand-soft: #90b67b;   /* dekorative Flächen ohne Text, z. B. Hero-Backdrop */
  --brand-light: #add3a2;  /*                              (Export: --300) */
  --brand-pale: #d4eed4;   /*                              (Export: --400) */
  --brand-tint: #eef5ef;   /* Card-Hintergrund             (Export: --500) */

  /* Text und Flächen */
  --ink: #1a1a1a;          /* Fliesstext                   (Export: --black) */
  /*
   * Sekundärtext. Der Export-Wert #6b6b6b kam auf Weiss nur auf 5,4:1 und auf
   * der getönten Preiskarte auf 4,9:1 — formal AA, bei 14–15px aber mühsam.
   * Dieser Ton liegt bei 7,3:1 bzw. 6,6:1 und damit auf AAA-Niveau.
   */
  --ink-muted: #565656;
  --ink-strong: #1f2023;   /* Buttons, Hamburger, Formularrahmen */
  --surface: #fff;
  /*
   * Rahmenfarbe. Der Export nutzte #e4eaf3 — ein bläuliches Grau aus dem
   * BRIX-Template, das neben den Grüntönen kühl und fremd wirkte. Gleiche
   * Helligkeit, aber in die Markenfamilie gedreht.
   */
  --border: #e3e7e0;
  --danger: #fe566b;       /* Fehlermeldungen */

  /* Radien */
  --radius-pill: 300px;    /* Buttons, Inputs */
  /*
   * Fest in px statt der 1.5em aus dem Export: em koppelt den Radius an die
   * Schriftgrösse des Elements, wodurch Karte, Formularfeld und Akkordeon
   * je nach Kontext unterschiedlich stark gerundet waren.
   */
  --radius-card: 24px;     /*                              (Export: --rounded-corner) */
  --radius-sm: 8px;
  --radius-footer: 26px;

  /* Schatten */
  --shadow-card: 0 2px 4px #19213d14;
  --shadow-raised: 0 8px 24px #19213d14;
  --shadow-button: 0 4px 8px #4d91e11a;

  /* Layout */
  --container: 1336px;
  --gutter: 24px;
  --section-padding: 100px;

  /*
   * Abstandsskala auf 4-px-Basis. Der Export streute krumme Einzelwerte
   * (25px, 70px, 5px); dieselben Stellen greifen jetzt auf diese Stufen zu,
   * damit Abstände über Seiten hinweg denselben Rhythmus haben.
   */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Abstand zwischen Section-Überschrift und ihrem Inhalt — überall gleich */
  --space-title: 48px;

  /* Typografie */
  --font-body: "Manrope", "Manrope Variablefont Wght", Arial, sans-serif;
  --text-base: 1.1rem;
  /*
   * Typoskala. h1 und h2 lagen im Export mit 3rem und 2.8rem nur 7 %
   * auseinander — nebeneinander war keine Rangfolge erkennbar. Die Stufen
   * folgen jetzt einem gleichmässigen Verhältnis (≈1,33).
   */
  --text-h1: 3rem;
  --text-h2: 2.25rem;
  --text-h3: 1.5rem;
  --text-h4: 1.2rem;
  /*
   * Zwei Zeilenhöhen statt einer. Der Export fuhr alles mit 1.3 — für
   * Überschriften richtig, für Fliesstext so eng, dass Absatzabstände
   * kleiner waren als der Zeilenabstand und Absätze ineinanderliefen.
   */
  --leading: 1.5;
  --leading-tight: 1.15;

  /* Bewegung — Buttons schrumpfen beim Hover, das ist die Signatur der Site */
  --ease: .3s;
  --hover-press: scale3d(.94, .94, 1.01);
  --hover-lift: scale3d(1.025, 1.025, 1.01);
}

@media screen and (max-width: 991px) {
  :root {
    --section-padding: 80px;
    --radius-footer: 16px;
    --space-title: 40px;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --gutter: 16px;
    --section-padding: 64px;
    --text-h1: 2.5rem;
    --text-h2: 1.9rem;
    --radius-card: 16px;
    --space-title: 32px;
  }
}

@media screen and (max-width: 479px) {
  :root {
    --text-h1: 2.1rem;
    --text-h2: 1.75rem;
  }
}