/* Design-Tokens: Farben, Typo, Abstände, Radien, Schatten, Timings.
   Die Farben kommen aus dem Logo-SVG (#136CE9 plus Teal-Blau-Verlauf). */

/* Schriften liegen bei uns, kein Google-Link, sonst Datenschutzproblem */
@font-face{font-family:"Jakarta";src:url("../fonts/jakarta-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jakarta";src:url("../fonts/jakarta-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Jakarta";src:url("../fonts/jakarta-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Jakarta";src:url("../fonts/jakarta-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Jakarta";src:url("../fonts/jakarta-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Bricolage";src:url("../fonts/bricolage-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  /* Markenfarben */
  --brand-700:#0B57C4;
  --brand-600:#136CE9;   /* Hauptblau, Buttons und Logo */
  --brand-500:#2F7BEF;
  --brand-100:#DCEAFF;
  --brand-050:#EEF4FE;
  --teal:#48E7C0;        /* Start des Logo-Verlaufs */
  --teal-600:#10A47C;    /* etwas dunkler als im Logo, sonst nur 2.52 auf Weiß */

  /* Textfarben */
  --ink-900:#04203B;     /* Überschriften */
  --ink-800:#0F2E4C;
  --ink-700:#274763;
  --ink-600:#45586E;     /* Fließtext */
  --ink-400:#647383;     /* muss auch auf bg-soft über 4.5 kommen, dort sitzt Fließtext */
  --ink-300:#6E7684;     /* Platzhalter zählt als Text, also auch 4.5 */

  /* Flächen und Linien */
  --bg:#FFFFFF;
  --bg-soft:#F4F8FF;     /* für den Wechsel zwischen Sektionen */
  --bg-softer:#FAFCFF;
  --bg-tint:#EEF4FE;
  --line:#E6ECF5;
  --line-soft:#EFF3F9;
  --white-70:rgba(255,255,255,.7);

  /* Die Verläufe, die überall wiederkommen */
  --grad-brand:linear-gradient(118deg,#48E7C0 0%,#1F9AE0 42%,#136CE9 100%);
  --grad-brand-soft:linear-gradient(118deg,rgba(72,231,192,.16),rgba(19,108,233,.16));
  --grad-text:linear-gradient(100deg,#10A47C 0%,#136CE9 60%);   /* grünes Ende auf 3.17 gebracht */

  /* Pill-Farben nach der App, Schrift aber dunkler: die Originaltöne kamen auf
     3.08 und 3.39, WCAG will 4.5. Jetzt alle über 4.8. */
  --pill-loc-bg:#E8F8EF;    --pill-loc-fg:#0A7A54;
  --pill-pay-bg:#FFF6E4;    --pill-pay-fg:#8A5A12;
  --pill-cat-bg:#F2ECFE;    --pill-cat-fg:#6B2FD1;
  --pill-info-bg:#EAF1FE;   --pill-info-fg:#0B57C4;

  /* Schatten immer weich und mehrschichtig, nie hart */
  --sh-xs:0 1px 2px rgba(4,32,59,.05);
  --sh-sm:0 1px 2px rgba(4,32,59,.04), 0 3px 10px rgba(4,32,59,.05);
  --sh-md:0 4px 14px rgba(4,32,59,.05), 0 14px 34px rgba(19,108,233,.07);
  --sh-lg:0 8px 26px rgba(4,32,59,.06), 0 28px 70px rgba(19,108,233,.11);
  --sh-xl:0 20px 50px rgba(4,32,59,.10), 0 44px 100px rgba(19,108,233,.16);
  --sh-glow:0 14px 40px rgba(19,108,233,.34);
  --sh-inset-hi:inset 0 1px 1px rgba(255,255,255,.65);

  /* Eckenradien */
  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:36px; --r-pill:999px;

  /* Abstände im 4/8er-Raster */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  /* Bewusst knapp: die Paddings zweier Sektionen addieren sich */
  --sec-y:clamp(40px, 4vw, 84px);
  --sec-y-sm:clamp(30px, 2.6vw, 52px);

  /* Inhaltsbreite, wächst bis 4K mit */
  --container:min(1340px, 92vw);
  --container-narrow:min(940px, 92vw);
  --gutter:clamp(20px, 4vw, 48px);

  /* Schriften */
  --font-display:"Bricolage","Jakarta",system-ui,sans-serif;
  --font-body:"Jakarta",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-num:"Jakarta",system-ui,sans-serif;

  /* skaliert über die html-Schriftgröße, oben gedeckelt */
  --fs-hero:clamp(1.95rem, 1.1rem + 2.35vw, 3.3rem);
  --fs-h1:clamp(2.05rem, 1.4rem + 2.6vw, 3.6rem);
  --fs-h2:clamp(1.7rem, 1.25rem + 1.9vw, 2.8rem);
  --fs-h3:clamp(1.2rem, 1.05rem + 0.6vw, 1.55rem);
  --fs-lead:clamp(1.06rem, 0.98rem + 0.5vw, 1.32rem);
  --fs-body:1rem;
  --fs-sm:0.9rem;
  --fs-xs:0.78rem;
  --fs-eyebrow:0.7rem;

  --lh-tight:1.06;
  --lh-snug:1.22;
  --lh-body:1.62;
  --tracking-eyebrow:0.18em;

  /* Easings und Dauern */
  --e-out:cubic-bezier(0.23, 1, 0.32, 1);       /* Standard, fängt schnell an */
  --e-io:cubic-bezier(0.77, 0, 0.175, 1);       /* für Bewegung quer über den Schirm */
  --e-drawer:cubic-bezier(0.32, 0.72, 0, 1);    /* Schubladen, fühlt sich wie iOS an */
  --d-press:140ms;
  --d-fast:200ms;
  --d-med:320ms;
  --d-slow:600ms;

  /* Stapelreihenfolge */
  --z-nav:100; --z-overlay:200; --z-modal:300; --z-top:400;

  --nav-h:74px;
}

/* wächst mit dem Fenster, Untergrenze wegen iOS-Zoom */
html{font-size:clamp(15.5px, 10.4px + 0.34vw, 23px);}

/* Große Monitore: mehr Breite nutzen statt breiter Ränder */
@media (min-width:1600px){ :root{ --container:min(1540px, 90vw); } }
@media (min-width:1920px){ :root{ --container:min(1720px, 90vw); } }
@media (min-width:2560px){ :root{ --container:min(1960px, 84vw); --nav-h:84px; } }
@media (min-width:3400px){ :root{ --container:min(2440px, 80vw); } }