/* =========================================================================
   theme.css  --  heimtreffer: Schrift, Farbe, Skala, Abstaende, Radien,
   Schatten. NUR Tokens; styles.css und public/css/seite-<key>.css lesen nur
   diese.

   Umbau R4 (E9, User 2026-10-24): die Site folgt den Entwuerfen des Kunden
   (Mail 149 und 156, Orders/1_Inbox/2026-10-09_heimtreffer_neue-website/
   assets). Palette des Kunden aus Stevens Checkliste 5 (Mail 150), dazu nur,
   was die Entwuerfe zeigen: heller Himmel hinter dem Hero, Kartenfarben.
   Schrift nach Stevens Vorschlag (Checkliste 6): Manrope fuer Titel, Inter
   fuer Text, beide selbst gehostet (@fontsource-variable 5.2.8, latin).
   ========================================================================= */

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-var.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Metrik-Ersatz gegen den Sprung beim Laden (Werte wie next/font fuer Arial). */
@font-face {
  font-family: 'Manrope Fallback';
  src: local('Arial');
  size-adjust: 103.2%;
  ascent-override: 103.3%;
  descent-override: 29.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.1%;
  ascent-override: 90.5%;
  descent-override: 22.6%;
  line-gap-override: 0%;
}

:root {
  --font-titel: 'Manrope', 'Manrope Fallback', Arial, sans-serif;
  --font-text: 'Inter', 'Inter Fallback', Arial, sans-serif;

  /* --- Farbe: Palette des Kunden (Checkliste 5) ---------------------------
     Weiss Hauptflaeche, Gruen fuer Knoepfe, Icons und Akzente, Hellgruen fuer
     dezente Flaechen, Dunkelblau fuer Titel und Logo, Anthrazit fuer Text.
     Kontraste WCAG 2, gerechnet 2026-10-24: auf Weiss marine 16.5, text 7.6,
     text-2 6.0, gruen 5.3, Feldrand 3.1, Fehler 6.3; gruen auf mint 4.7 und
     auf bg-hell 5.0, gruen-dunkel auf mint 6.9, Weiss auf gruen 5.3,
     mint-auf-dunkel auf marine 10.3, Credit auf bg-hell 5.6. */
  --weiss: #FFFFFF;
  --bg: #FFFFFF;
  --bg-hell: #F5F8FB;        /* helle Flaechen der Entwuerfe (Fragen, Karten-Grund) */
  --himmel: #EAF2FA;         /* Verlauf ueber Bildern (Hero, Schluss) */
  --mint: #EAF4EF;           /* Hellgruen des Kunden */
  --mint-2: #D3EADF;         /* Linien und Raender auf Mint */
  --mint-hell: #F4FAF7;
  --gruen: #167A55;
  --gruen-dunkel: #0F5E41;
  --marine: #0B1F3A;
  --marine-2: #15304F;
  --text: #4B5563;
  --text-2: #5B6472;
  --linie: #E3E7EC;
  --linie-feld: #8A94A0;
  --grau-zeichen: #C9CFD7;   /* leere Garantiepunkte, Minus- und Fragezeichen */
  --fehler: #B72725;
  --fehler-hell: #FDF1F1;

  /* Dunkle Flaechen (partner-werden, m156 offerten-pruefen p4): Marine mit Mint */
  --auf-dunkel: #FFFFFF;
  --auf-dunkel-2: #C4CDD8;
  --mint-auf-dunkel: #8FDCB8;
  --linie-dunkel: rgb(255 255 255 / 0.14);
  --flaeche-dunkel: rgb(255 255 255 / 0.04);

  /* Karte (startseite-p5): Kantone grau, Gebiet gruen, Seen hellblau */
  --karte-land: #DDE2E8;
  --karte-gebiet: #5FB38F;
  --karte-see: #BFE0F5;

  /* Credit der Agentur auf hellem Footer (handbuch/CREDIT.md 3.2) */
  --credit: #7d5e24;

  --focus: var(--marine);

  /* --- Schriftgroessen (Handy -> 1440) ------------------------------------ */
  --fs-hero: clamp(2.6rem, 1.3rem + 5.2vw, 5.5rem);       /* 42 -> 88 */
  --fs-h1: clamp(2.25rem, 1.3rem + 3.9vw, 4.5rem);         /* 36 -> 72 */
  --fs-h2: clamp(1.75rem, 1.25rem + 2.2vw, 3rem);          /* 28 -> 48 */
  --fs-h3: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);     /* 17 -> 21 */
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);      /* 17 -> 20 */
  --fs-text: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);     /* 16 -> 17 */
  --fs-klein: 0.875rem;
  --fs-kicker: 0.75rem;
  --fs-mini: 0.75rem;

  --lh-titel: 1.08;
  --lh-text: 1.6;

  /* --- Raster und Abstaende ----------------------------------------------- */
  --max: 75rem;
  --max-schmal: 48rem;
  --gutter: clamp(1.375rem, 4vw, 2.5rem);
  --pad: clamp(3.5rem, 7vw, 6.5rem);
  --pad-eng: clamp(2.5rem, 5vw, 4rem);
  --gap: clamp(1rem, 2vw, 1.5rem);
  --header-h: 4rem;

  /* --- Radien: keine eckigen Kanten (A1, Rida 2026-10-09) ----------------- */
  --r-knopf: 12px;
  --r-feld: 10px;
  --r-karte: 16px;
  --r-gross: 24px;
  --r-rund: 999px;

  /* --- Schatten: dezent (Checkliste 7) ------------------------------------ */
  --schatten: 0 1px 2px rgb(11 31 58 / 0.04), 0 6px 20px rgb(11 31 58 / 0.06);
  --schatten-hoch: 0 2px 6px rgb(11 31 58 / 0.05), 0 16px 40px rgb(11 31 58 / 0.11);

  /* --- Bewegung: «auflegen» (konzept.md 5): Blaetter kommen von rechts herein,
     legen sich nebeneinander und bleiben liegen, ohne zu federn, weil es um
     Geld geht; Linien ziehen sich, Pins setzen sich von West nach Ost.
     Regeln handbuch/DESIGN.md 6, Choreografie styles.css 23 und seite-*.css. */
  --dur: 180ms;                                        /* Bedienung */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-auflegen: cubic-bezier(0.26, 0.62, 0.12, 1);  /* gleiten und liegen bleiben: sanfter Anlauf, langer Auslauf (E47) */
  --ease-ziehen: cubic-bezier(0.55, 0.05, 0.2, 1);     /* Linie, Ring, Fenster: zieht an, laeuft lang aus */
  --ease-weg: cubic-bezier(0.5, 0, 0.75, 0.2);         /* Abgang: beschleunigt aus der Ruhe */
  --dur-blatt: 1200ms;     /* ein Blatt legt sich (E47: langsamer, «hochwertig, nicht so rushing») */
  --dur-zeile: 1300ms;     /* Titelzeile steigt aus dem Fenster */
  --dur-linie: 1100ms;     /* Linie oder Ring zieht sich */
  --takt: 220ms;           /* Abstand zwischen zwei Blaettern */
  --hub: 2rem;             /* Weg eines Blatts von rechts: kurz und langsam statt weit und schnell */
  --tempo: 1;              /* boot.js setzt .wieder ab dem zweiten Aufruf der Sitzung: etwas kuerzer */
  --schatten-flug: 0 6px 14px rgb(11 31 58 / 0.06), 0 30px 60px rgb(11 31 58 / 0.16);   /* Blatt in der Luft */
}
.wieder { --tempo: 0.85; }

@media (min-width: 64rem) {
  :root { --header-h: 4.75rem; }
}