/* ============================================================
   Design-Tokens — Kita „Der Spatz“
   Übernommen aus dem Design-System
   kita-der-spatz-design-system-cdeb2f88-5f8c-4a22-b8b3-2e3118b56197
   Diese Datei nicht per Hand umfärben — Werte kommen aus dem
   Design-System. Eigene Regeln gehören nach site.css.
   ============================================================ */

/* --- Schriften: Inter (Fließtext), lokal gehostet — keine Verbindung zu Google.
   Überschriften: "Simple Handmade" (siehe site.css), Fallback Georgia/Serif. --- */
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin-ext.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/inter-latin.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------------------------------------------------------- Farben */
:root{
  /* --- Logofarben --- */
  --spatzenblau: #949eab;
  --spatzenblau-tief: #79838f;
  --ocker: #cc9e68;
  --ocker-hover: #b98a55;
  --spatzenrot: #b96e61;
  --spatzenrot-hover: #a55c50;
  --laubgruen: #4a6655;
  --laubgruen-hell: #607868;
  --laubgruen-tief: #344438;
  --sand: #dbc3aa;
  --nussbraun: #a77b59;
  --dunkelbraun: #493d30;
  --schnabel: #bc7c57;

  /* --- Basis: Markenfarben --- */
  --blaugrau: #3f5266;
  --blaugrau-hover: #354657;
  --blaugrau-soft: #5b6f84;
  --blaugrau-tief: #2b3947;
  --wiesengruen: var(--laubgruen);
  --wiesengruen-hover: #3d5647;
  --wiesengruen-soft: var(--laubgruen-hell);
  --sonnengelb: var(--ocker);
  --sonnengelb-hover: var(--ocker-hover);
  --zartgruen: #e8ede2;
  --zartgruen-tief: #dae2d0;
  --sandflaeche: #f1e7db;
  --warmweiss: #faf9f6;
  --warmweiss-tief: #f2f0e9;
  --weiss: #ffffff;

  /* Neutrale Abstufungen (blaugrau eingefärbt, nie reines Grau) */
  --neutral-50: #f6f6f4;
  --neutral-100: #ebeceb;
  --neutral-200: #dcdfdd;
  --neutral-300: #c3c9c8;
  --neutral-400: #97a2a9;
  --neutral-600: #67757f;
  --neutral-800: #3a464f;
  --neutral-900: #232c34;

  /* --- Semantische Aliase (immer diese benutzen) --- */
  --surface-page: var(--warmweiss);
  --surface-card: var(--weiss);
  --surface-subtle: var(--zartgruen);
  --surface-warm: var(--sandflaeche);
  --surface-brand: var(--spatzenblau);
  --surface-sunken: var(--warmweiss-tief);
  --surface-inverse: var(--blaugrau-tief);

  --text-heading: var(--blaugrau-tief);
  --text-body: #4a5a68;
  --text-muted: #77879a;
  --text-inverse: var(--warmweiss);
  --text-link: var(--blaugrau);
  --text-link-hover: var(--laubgruen);

  --border-subtle: #e4e5e0;
  --border-strong: #cfd4cc;
  --border-focus: var(--blaugrau);

  --brand: var(--blaugrau);
  --accent-primary: var(--ocker);
  --accent-nature: var(--laubgruen);
  --accent-warm: var(--spatzenrot);

  --focus-ring: 0 0 0 3px rgba(63,82,102,.28);
}

[data-theme="dark"]{
  --surface-page: #1b232b;
  --surface-card: #232e38;
  --surface-subtle: #27333b;
  --surface-warm: #2e2a26;
  --surface-brand: #6c7681;
  --surface-sunken: #161d24;
  --surface-inverse: #f0f2ee;

  --text-heading: #edf0ec;
  --text-body: #c3ccd4;
  --text-muted: #93a1ac;
  --text-inverse: var(--blaugrau-tief);
  --text-link: #b4bec9;
  --text-link-hover: #9fb8a7;

  --border-subtle: #33404b;
  --border-strong: #46545f;
  --border-focus: #b4bec9;

  --brand: var(--spatzenblau);
  --accent-primary: #ddb684;
  --accent-nature: #7d9887;
  --accent-warm: #cf8579;

  --blaugrau-hover: #4d6178;
  --wiesengruen-hover: #7d9887;
  --sonnengelb-hover: #e8c799;

  --focus-ring: 0 0 0 3px rgba(148,158,171,.34);
}

/* ---------------------------------------------------- Typografie */
:root{
  --font-display: "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", "Helvetica Neue", system-ui, sans-serif;

  --font-display-settings: "SOFT" 0, "WONK" 0, "opsz" 48;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --fs-display: 4rem;
  --fs-h1: 3rem;
  --fs-h2: 2rem;
  --fs-h3: 1.375rem;
  --fs-lead: 1.1875rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-fine: 0.8125rem;

  --leading-tight: 1.1;
  --leading-heading: 1.18;
  --leading-snug: 1.4;
  --leading-body: 1.65;

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-body: 0;

  --measure-narrow: 34ch;
  --measure-body: 64ch;
}

/* --------------------------------------------------------- Raum */
:root{
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --gutter: var(--space-5);
  --space-section: 96px;
  --stack-tight: var(--space-3);
  --stack: var(--space-5);
  --stack-loose: var(--space-7);

  --page-max: 1120px;
  --page-narrow: 720px;
  --page-pad: clamp(20px, 5vw, 56px);
}

/* -------------------------------------------------------- Ecken */
:root{
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --border-width: 1px;
  --border-width-strong: 1.5px;
}

/* ----------------------------------------------------- Schatten */
:root{
  --shadow-none: none;
  --shadow-subtle: 0 1px 2px rgba(43,57,71,.05);
  --shadow-card: 0 2px 10px rgba(43,57,71,.06);
  --shadow-lifted: 0 8px 24px rgba(43,57,71,.10);
  --shadow-inset-hairline: inset 0 0 0 1px var(--border-subtle);
}
[data-theme="dark"]{
  --shadow-subtle: 0 1px 2px rgba(0,0,0,.30);
  --shadow-card: 0 2px 12px rgba(0,0,0,.34);
  --shadow-lifted: 0 10px 28px rgba(0,0,0,.42);
}

/* ---------------------------------------------------- Animation */
:root{
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 320ms;
  --transition-ui: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

/* --------------------------------------- Reset und Grundtypografie */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:100%}
@media (max-width:900px){html{font-size:94%}}
@media (max-width:560px){html{font-size:88%}}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--leading-body);font-weight:var(--weight-regular);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);font-variation-settings:var(--font-display-settings);color:var(--text-heading);font-weight:var(--weight-semibold);margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading)}
h2{font-size:var(--fs-h2);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading)}
h3{font-size:var(--fs-h3);line-height:var(--leading-snug);font-weight:var(--weight-medium)}
p{margin:0;max-width:var(--measure-body)}
small{font-size:var(--fs-fine);color:var(--text-muted);line-height:var(--leading-snug)}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--text-link) 35%,transparent);transition:var(--transition-ui)}
a:hover{color:var(--text-link-hover);border-bottom-color:color-mix(in oklab,var(--text-link-hover) 60%,transparent)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
img{max-width:100%;display:block}
hr{border:0;border-top:1px solid var(--border-subtle);margin:var(--space-6) 0}
::selection{background:var(--zartgruen);color:var(--blaugrau-tief)}
@media print{body{background:#fff}}