/* ==========================================================================
   Sofastil Berlin · Designsystem 2027 · 1/3 Tokens
   Alle Farben, Schriften, Größen und Abstände an einer Stelle.
   Nur diese Werte verwenden. Keine anderen Farben, keine anderen Schriften.
   ========================================================================== */

/* Schriften: lokal einbinden (nicht über Google-Server, wegen Datenschutz). */
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/InstrumentSerif-Regular.woff?v=0d8dbc5a37ee0addeb32") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/InstrumentSerif-Italic.woff?v=1e3ee214f9d3e865e3a8") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans-Regular.woff?v=3f94851ee08beb3a7d1d") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans-Bold.woff?v=43ff1de43ccf9d5d9b97") format("woff");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans-Italic.woff?v=77e7236dfdf3dec073c8") format("woff");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- Farben ------------------------------------------------------------ */
  --grund: #F6F6F2;          /* Seitenhintergrund: kühles Kalkweiß            */
  --kalk: #E9E8E1;           /* Flächen, Kästen, Bildhintergründe             */
  --kalk-tief: #DEDDD4;      /* gedrückte Zustände auf Kalk                   */
  --tinte: #1D1F1C;          /* Text                                          */
  --grau: #5B5F58;           /* Nebentext (Kontrast 6:1 auf --grund)          */
  --linie: #D3D2C8;          /* feine Linien, Rahmen                          */
  --gruen: #1F3B30;          /* Chesterfield-Grün: Hauptknopf, dunkle Flächen */
  --gruen-hell: #2C5243;     /* Hauptknopf beim Überfahren                    */
  --gruen-zart: #C9D6CC;     /* Nebentext auf Grün                            */
  --messing: #B38A4F;        /* Ziernagel: nur Schmuck, nie für Text          */
  --messing-dunkel: #8C6A35; /* Nur Schmuck, niemals Text             */
  --weiss: #FFFFFF;

  /* Glas für schwebende Leisten: hoher Deckungsgrad, damit Text lesbar bleibt */
  --glas: rgb(246 246 242 / 0.82);
  --glas-dunkel: rgb(22 34 28 / 0.72);
  --glas-rand: rgb(255 255 255 / 0.65);
  --glas-unschaerfe: 20px;

  /* ---- Schriften --------------------------------------------------------- */
  --schrift-titel: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --schrift-text: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Größen: wachsen fließend von 390 px (Handy) bis 1440 px (Computer) */
  --gr-buehne: clamp(3.25rem, 1.9rem + 6.4vw, 8.5rem);   /* Startbild-Titel   */
  --gr-h1: clamp(2.75rem, 1.9rem + 3.9vw, 5.5rem);
  --gr-h2: clamp(2.125rem, 1.6rem + 2.3vw, 3.875rem);
  --gr-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.875rem);
  --gr-gross: clamp(1.1875rem, 1.1rem + 0.35vw, 1.4375rem); /* Einleitung    */
  --gr-text: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);     /* 17 → 19 px    */
  --gr-klein: 0.9375rem;                                     /* 15 px         */
  --gr-mini: 0.8125rem;                                      /* 13 px         */

  --zeile-titel: 1.0;
  --zeile-text: 1.58;
  --laufweite-titel: -0.012em;

  /* ---- Abstände ---------------------------------------------------------- */
  --r-1: 0.25rem;  --r-2: 0.5rem;  --r-3: 0.75rem; --r-4: 1rem;   --r-5: 1.5rem;
  --r-6: 2rem;     --r-7: 3rem;    --r-8: 4rem;    --r-9: 6rem;   --r-10: 8rem;
  --rand: clamp(1rem, 0.55rem + 1.9vw, 3rem);               /* Seitenrand    */
  --abschnitt: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);        /* Kompakte Abschnittsabstände */
  --breite: 84rem;                                          /* max. Inhaltsbreite */
  --text-breite: 38rem;                                     /* max. Zeilenlänge   */

  /* ---- Formen ------------------------------------------------------------ */
  --rund-pille: 999px;     /* alles, was man drücken kann                      */
  --rund-bild: 6px;        /* Fotos und Kacheln                                */
  --rund-flaeche: 20px;    /* Kästen, Planer-Leisten, Fenster                  */
  --knopf-h: 3.25rem;      /* 52 px; auf dem Handy 56 px (siehe base.css)      */
  --kopf-h: 3.75rem;       /* schwebende Kopfleiste                            */

  /* ---- Schatten (nur für schwebende Elemente) ---------------------------- */
  --schatten-schwebend: 0 1px 0 rgb(255 255 255 / 0.7) inset, 0 18px 40px -18px rgb(29 31 28 / 0.35), 0 2px 6px -2px rgb(29 31 28 / 0.12);
  --schatten-fenster: 0 30px 80px -30px rgb(29 31 28 / 0.45);

  /* ---- Bewegung ---------------------------------------------------------- */
  --dauer-kurz: 160ms;
  --dauer: 320ms;
  --dauer-lang: 720ms;
  --kurve: cubic-bezier(0.2, 0.7, 0.2, 1);
  --kurve-raus: cubic-bezier(0.4, 0, 1, 1);
}
/* Compatibility names point only to the approved Bauplan palette. */
:root{--hintergrund:var(--grund);--flaeche:var(--kalk);--text:var(--tinte);--text-leise:var(--grau);--akzent:var(--gruen)}

[data-seo-heading]{display:block}
.kitchen-planner-heading{padding-bottom:0}