/* Calmy (Figma AicYeAFLn1qBGdBhzcOR28, Home 1:2), gemessen 2026-09-26, Werte aus messung/ */
:root {
  /* Farbrollen, Quellwerte. theme.css ueberschreibt */
  --grund: #ffffff;
  --flaeche: #f8f8f8;
  --tinte: #131313;
  --text-leise: #999999;
  --text-label: #959692;
  --akzent: #a1eae6;
  --auf-akzent: #131313;
  --auf-tinte: #ffffff;
  --auf-foto: #ffffff;
  --linie: rgba(0, 0, 0, 0.12);
  --wasserzeichen: rgba(19, 19, 19, 0.04);
  --wasserzeichen-footer: rgba(19, 19, 19, 0.08);
  --foto-schleier: rgba(0, 0, 0, 0.20);

  /* Schriften */
  --schrift-marke: "Playfair Display", Georgia, serif;
  --schrift-titel: "Roboto Flex", "Helvetica Neue", Arial, sans-serif;
  --schrift-text: "Inter", system-ui, sans-serif;

  /* Textstufen: Groesse / Zeilenhoehe / Tracking */
  --t-marke-hero: clamp(64px, 9.72vw, 140px);
  --t-marke-footer: clamp(88px, 12.5vw, 180px);
  --t-5xl: clamp(44px, 5vw, 72px);    --l-5xl: 1.111;  /* 72/80 */
  --t-4xl: clamp(38px, 4.17vw, 60px); --l-4xl: 1.2;    /* 60/72 */
  --t-3xl: clamp(30px, 3.33vw, 48px); --l-3xl: 1.167;  /* 48/56 */
  --t-zahl: clamp(44px, 4.17vw, 60px); --l-zahl: 1.2;  /* Playfair kursiv */
  --t-eyebrow: 24px; --l-eyebrow: 32px;
  --t-karte-gross: 30px; --l-karte-gross: 36px;
  --t-karte: 24px; --l-karte: 32px;
  --t-body: 16px; --l-body: 24px;
  --t-label: 16px; --l-label: 18px;
  --t-marke-klein: 16px;
  --track-titel: -0.03em;
  --track-label: -0.05em;

  /* Raum */
  --sektion-y: clamp(64px, 6.94vw, 100px);
  --rand: clamp(16px, 10.83vw, 156px);
  --container: 1128px;
  --gap-kopf: 60px;       /* Kopf zu Inhalt */
  --gap-text: 24px;       /* Eyebrow, Titel, Body */
  --gap-knopf: 40px;      /* Text zu Button */
  --gap-foto-reihe: 80px; /* Kopf zu Kartenreihe auf Foto */
  --gap-spalten: 60px;
  --gap-intro: 64px;
  --gap-karten: 32px;
  --gap-raster: 24px;
  --gap-nav: 40px;
  --nav-h: 88px;
  --nav-pad: 20px;

  /* Kanten */
  --r-klein: 8px;   /* Hero-Karte, eingesetztes Foto */
  --r-karte: 16px;  /* Karten, Fotos, Baender */
  --r-kreis: 40px;
  --r-pille: 56px;

  /* Bauteile */
  --knopf-h: 56px;
  --knopf-pad: 8px 32px 8px 8px;
  --knopf-gap: 10px;
  --knopf-kreis: 40px;
  --knopf2-pad: 12px 24px;
  --icon-kreis: 64px;
  --icon: 24px;
  --faq-kreis: 48px;
  --karte-pad: 32px;
  --karte-pad-klein: 24px;
  --stimme-w: 360px;
  --band-h: 112px;
  --hero-foto-h: 738px;
  --hero-karte-w: 552px;
  --faq-w: 840px;
  --text-breite: 680px; /* Fliesstextbreite, aus Zeilenlaenge abgeleitet */
  --wz-blur: 14px;
  /* Feinmasse aus messung/ (1:3, 1:9, 5:147, 1:57, 1:114) */
  --gap-4: 4px;
  --gap-8: 8px;
  --gap-12: 12px;  /* Logo, Linklisten */
  --gap-16: 16px;  /* Titel zu Text in Karten */
  --gap-20: 20px;  /* Icon-Kreis zu Titel */
  --hero-oben: 70px;
  --hero-karte-x: 48px;
  --hero-karte-y: 61px;
  --logo-icon: 20px;
  --wz-groesse: 360px;
  --band-text: 760px;
  --einsatz-w: 520px;
  --form-w: 640px;
  --textfeld-h: 160px;
  --feld-rand: #ebebeb;   /* Calmy Contact 1:409 */
  --feld-pad: 20px;
  --r-feld-gross: 24px;
  --kontakt-foto-h: 954px;
  --kontakt-form-w: 840px;
  --textfeld-h-klein: 112px;
  --kalender-w: 376px;
  --diplom-h: 220px;
  --lightbox-w: 1040px;
  --rand-mobil: 16px;

  /* Bewegung, in der Quelle nicht definiert, ergaenzt 2026-09-26 */
  --dauer: 600ms;
  --dauer-kurz: 250ms;
  --kurve: cubic-bezier(0.2, 0.7, 0.2, 1);
  --einblenden-weg: 24px;
  --pfeil-weg: 4px;
  --slider-knopf: 48px;
  --siegel-h: 72px;
  --fokus: 2px;
  --menue-w: 240px;
  --logo-h: 48px;
  --logo-h-footer: 72px;
  --scrim: rgba(19, 19, 19, 0.45);

  /* Blog, gemessen 1:470 und 1:997 (messung/1-471 bis 5-503) */
  --t-6xl: clamp(56px, 6.67vw, 96px); --l-6xl: 1; --track-6xl: -0.05em;
  --blog-hero-h: 927px;
  --blog-hero-pad: 72px;
  --gap-64: 64px;
  --gap-10: 10px;
  --kopf-w: 698px;
  --artikel-w: 640px;
  --artikel-pad: 80px;
  --artikel-foto-h: 667px;
  --beitrag-bild-h: 278px;
  --featured-w: 704px;
  --featured-bild: 240px;
  --featured-pad: 16px;
  --r-featured: 20px;
  --blog-schleier: rgba(0, 0, 0, 0.20);
  --kopf-breit: 903px;
  --l-beitrag-titel: 28px;
  /* Tiefe, auf Wunsch von Alex 2026-09-26, nicht aus Calmy: weich, mehrlagig, tintenfarben */
  --schatten-karte: 0 1px 2px rgba(19, 19, 19, 0.04), 0 8px 24px -12px rgba(19, 19, 19, 0.14);
  --schatten-hover: 0 2px 4px rgba(19, 19, 19, 0.06), 0 20px 44px -16px rgba(19, 19, 19, 0.22);
  --schatten-knopf: 0 1px 2px rgba(19, 19, 19, 0.08), 0 6px 16px -8px rgba(19, 19, 19, 0.24);
  --lift: -4px;
  --offen: #e5484d; /* Arbeitsmarkierung: fehlt noch von der Kundin, nicht Teil des Designs */
  --hero-min: 640px;
  --hero-max: 900px;
}