/* ==========================================================================
   ARC – Design-Tokens
   Eins zu eins aus der App übernommen (my-app/lib/theme.ts), damit Website
   und App dieselbe Sprache sprechen. Keine neuen Farben erfinden.
   ========================================================================== */

@font-face {
  font-family: "Pally";
  src: url("../assets/fonts/pally-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pally";
  src: url("../assets/fonts/pally-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pally";
  src: url("../assets/fonts/pally-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Flächen & Schrift (HC aus theme.ts) --- */
  --color-paper: #fafafb;
  --color-card: #ffffff;
  --color-ink: #16213a;
  --color-ink-soft: #48536b;
  --color-muted: #94a0b6;

  --color-ring: rgba(22, 33, 58, 0.1);
  --color-ring-soft: rgba(22, 33, 58, 0.07);
  --color-hairline: rgba(22, 33, 58, 0.06);

  /* --- Karten-Umrandung (CARD_BORDER/CARD_EDGE aus App.tsx:2813-2827):
     dicke, HELLE Umrandung, Lippe = EXAKT dieselbe Farbe wie der Rand
     (nicht dunkler). Tiefe kommt nur aus der dickeren Unterkante. --- */
  --card-border: #f0f1f3;
  --card-border-w: 4px;
  --card-lip-w: 6px; /* zusätzliche Dicke unten, on top von card-border-w */
  --card-radius: 26px;

  /* --- Marken-Anker --- */
  --color-navy: #143a8e; /* Wasser-Identität */
  --color-sky: #9cdff9; /* Himmel der Hero-Bilder */
  --color-sky-deep: #7cc9ee;

  /* --- CTA (PrimaryButton/SheetCta aus App.tsx): FLACHE Einzelfarbe, die
     Lippe ist ein DUNKLERER Ton DERSELBEN Farbe (shadeHex(fill,-0.16)) –
     kein Verlauf, keine zweite Akzentfarbe. --- */
  --cta-fill: #3d9bff; /* SheetCta-Default */
  --cta-lip: #2f7dcc; /* shadeHex(#3D9BFF, -0.16) */
  --cta-border-w: 4px;
  --cta-lip-w: 6px;
  --cta-radius: 26px;

  /* --- Ton-Set (HTONE) --- */
  --tone-blue: #3d9bff;
  --tone-blue-soft: #e2f0fe;
  --tone-violet: #7b61ff;
  --tone-violet-soft: #ece7ff;
  --tone-amber: #ff9d1c;
  --tone-amber-soft: #fff1dc;
  --tone-amber-text: #c9760a;
  --tone-coral: #ff5c5c;
  --tone-coral-soft: #ffe6e6;
  --tone-pink: #ff5c9d;
  --tone-pink-soft: #ffe6f1;
  --tone-cyan: #13c2ce;
  --tone-cyan-soft: #d9f5f7;
  --tone-green: #4e9e45; /* Paywall-Grün */
  --tone-green-soft: #e4f3e2;

  /* Beide Werte sind aus footer-v3.webp gemessen, nicht erfunden.
     --meadow ist exakt die Farbe der untersten Bildzeile: damit ist die Naht
     zwischen Bild und Balken unsichtbar. --meadow-lit ist der helle Grünton,
     der die Wiese im Bild flächenmäßig dominiert. Der Balken beginnt oben mit
     dem einen und läuft nach unten in den anderen – so bleibt die Naht dicht,
     und der Balken liest sich trotzdem so hell wie die Wiese darüber. */
  --meadow: #4ea13a;
  --meadow-lit: #96d34a;
  --meadow-ink: #16330c;

  /* Rundung der beiden großen Bildflächen (Hero + Footer). */
  --radius-scene: clamp(20px, 1rem + 1.6vw, 44px);

  /* Exakt der Himmelston am oberen Rand von hero-wide.webp (gemessen). Die
     Fläche über dem Bild trägt diese Farbe, darum ist die Kante unsichtbar. */
  --hero-sky: #a3dcf8;

  /* Höhe der schwebenden Kopfzeile – der Hero läuft darunter durch. */
  --header-h: 76px;

  /* --- Liquid Glass (dieselbe Sprache wie das Shield in der App:
     systemUltraThinMaterialLight + ein nur teilweise deckender Ton).
     Die Füllung MUSS unter 1 Alpha bleiben, sonst wird aus dem Glas eine
     Wand und der Hero darunter verschwindet. --- */
  --glass-fill: rgba(255, 255, 255, 0.55);
  --glass-blur: saturate(1.7) blur(20px);
  --glass-hairline: rgba(22, 33, 58, 0.09);
  --glass-sheen: rgba(255, 255, 255, 0.75);

  /* --- Typografie: NUR Pally, drei Gewichte ---
     Bold = Display/Headline/Zahlen · Medium = Betonung · Regular = Fließtext */
  --font-sans: "Pally", ui-rounded, "SF Pro Rounded", system-ui, -apple-system,
    "Segoe UI", sans-serif;

  --text-hero: clamp(2.75rem, 1.1rem + 6.6vw, 6.5rem);
  --text-display: clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem);
  --text-title: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --text-lead: clamp(1.0625rem, 0.98rem + 0.5vw, 1.375rem);
  --text-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  --text-sm: 0.9375rem;
  --text-xs: 0.8125rem;

  --leading-hero: 0.94;
  --leading-tight: 1.06;
  --leading-body: 1.6;

  /* --- Raster & Rhythmus (bewusst ungleichmäßig, kein Uniform-Padding) --- */
  --page-max: 1180px;
  --page-pad: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --space-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --space-section-tight: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* --- Radien --- */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-pill: 999px;

  /* --- H_SHADOW (lib/theme.ts:71-77): die EINZIGE erlaubte weiche Schatten-
     Spec, reserviert für schwebende Flächen (z. B. das Telefon-Mockup über
     dem Hero-Hintergrund). Karten und Buttons bekommen NIE einen Blur-
     Schatten – deren Tiefe kommt ausschließlich aus der Lippen-Umrandung
     (siehe DESIGN.md §0 Regel 1: „nicht durch Schlagschatten, Glanz oder
     Blur"). --- */
  --shadow-float: 5px 14px 34px rgba(145, 192, 255, 0.3);

  /* --- Bewegung --- */
  --duration-fast: 140ms;
  --duration-normal: 280ms;
  --duration-slow: 620ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Die Seite ist bewusst hell. Kein Auto-Dark-Mode (ARC-Regel: Dark nur dort,
   wo es die Marke wirklich will – hier will sie Tageslicht). Wir respektieren
   aber die Systemwahl beim Kontrast der Browser-UI. */
:root {
  color-scheme: light;
}