/* ==========================================================================
   Sofastil Berlin · Designsystem 2027 · 2/3 Grundlagen
   Zurücksetzen, Schrift, Raster, Zugänglichkeit, Seitenübergänge.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kopf-h) + 2rem);
  interpolate-size: allow-keywords;          /* weiches Aufklappen (Chrome, Edge) */
}
body {
  min-height: 100dvh;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--schrift-text);
  font-size: var(--gr-text);
  line-height: var(--zeile-text);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Fix overflow locally; do not conceal it at page level. */
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
::selection { background: var(--gruen); color: var(--grund); }

/* ---- Überschriften ------------------------------------------------------ */
:is(h1,:where([data-seo-heading="h1"],[data-seo-caption="h1"])), :is(h2,:where([data-seo-heading="h2"],[data-seo-caption="h2"])), :is(h3,:where([data-seo-heading="h3"],[data-seo-caption="h3"])), .titel-buehne, .titel-1, .titel-2 {
  font-family: var(--schrift-titel);
  font-weight: 400;
  line-height: var(--zeile-titel);
  letter-spacing: var(--laufweite-titel);
  text-wrap: balance;
  hyphens: manual;
}
.titel-buehne { font-size: var(--gr-buehne); line-height: 0.92; letter-spacing: -0.02em; }
:is(h1,:where([data-seo-heading="h1"],[data-seo-caption="h1"])), .titel-1 { font-size: var(--gr-h1); }
:is(h2,:where([data-seo-heading="h2"],[data-seo-caption="h2"])), .titel-2 { font-size: var(--gr-h2); line-height: 1.02; }
:is(h3,:where([data-seo-heading="h3"],[data-seo-caption="h3"])), .titel-3 { font-family: var(--schrift-text); font-size: var(--gr-h3); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; }
p, li, dd { text-wrap: pretty; }
p + p { margin-top: 1em; }
.einleitung { font-size: var(--gr-gross); line-height: 1.5; color: var(--tinte); max-width: var(--text-breite); }
.leise { color: var(--grau); }
.klein { font-size: var(--gr-klein); line-height: 1.5; }
.mini { font-size: var(--gr-mini); line-height: 1.4; }
.zahl { font-variant-numeric: tabular-nums lining-nums; }
.kursiv { font-style: italic; }
/* Kleine Zeile über einer Überschrift: normal geschrieben, keine Großbuchstaben */
.zeile-oben { display: inline-flex; align-items: center; gap: 0.6em; font-size: var(--gr-klein); color: var(--grau); margin-bottom: var(--r-4); }
.zeile-oben::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #E6CB97, var(--messing) 55%, #7A5A2B); flex: none; }

/* ---- Raster und Hülle --------------------------------------------------- */
.huelle { inline-size: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.huelle--schmal { inline-size: min(100% - 2 * var(--rand), 54rem); }
.abschnitt { padding-block: var(--abschnitt); }
.abschnitt--eng { padding-block: calc(var(--abschnitt) * 0.6); }
.abschnitt--kalk { background: var(--kalk); }
.abschnitt--gruen { background: var(--gruen); color: var(--grund); }
.abschnitt--gruen .leise { color: var(--gruen-zart); }
.stapel > * + * { margin-top: var(--abstand, var(--r-5)); }
.raster { display: grid; gap: var(--raster-abstand, clamp(1rem, 0.6rem + 1.6vw, 2rem)); grid-template-columns: repeat(var(--spalten, 1), minmax(0, 1fr)); }
@media (min-width: 48rem) { .raster--2 { --spalten: 2; } .raster--3 { --spalten: 3; } .raster--4 { --spalten: 2; } }
@media (min-width: 64rem) { .raster--4 { --spalten: 4; } }
.kopf-abschnitt { display: grid; gap: .5rem; margin-bottom: clamp(1rem, .75rem + 1vw, 1.5rem); }
@media (min-width: 64rem) {
  .kopf-abschnitt--zweispaltig { grid-template-columns: 1.1fr 0.9fr; align-items: end; column-gap: var(--r-8); }
}

/* ---- Zugänglichkeit ----------------------------------------------------- */
:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; border-radius: 4px; }
.abschnitt--gruen :focus-visible, .auf-dunkel :focus-visible { outline-color: var(--messing); }
.nur-vorlesen { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; inset-inline-start: var(--r-4); inset-block-start: -10rem; z-index: 100; background: var(--tinte); color: var(--grund); padding: var(--r-3) var(--r-4); border-radius: var(--rund-pille); }
.sprung:focus { inset-block-start: var(--r-4); }

/* ---- Bilder ------------------------------------------------------------- */
.bild { position: relative; overflow: hidden; border-radius: var(--rund-bild); background: var(--kalk); }
.bild > img, .bild > picture > img { inline-size: 100%; block-size: auto; object-fit: contain; }
.bild > canvas { inline-size: 100%; block-size: 100%; object-fit: cover; }
.bild--4-5 { aspect-ratio: 4 / 5; } .bild--3-2 { aspect-ratio: 3 / 2; } .bild--1-1 { aspect-ratio: 1; } .bild--16-9 { aspect-ratio: 16 / 9; }
.ki-hinweis { position: absolute; inset-block-end: var(--r-3); inset-inline-start: var(--r-3); font-size: var(--gr-mini); background: var(--glas); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 0.2rem 0.6rem; border-radius: var(--rund-pille); color: var(--tinte); }

/* ---- Seitenübergänge (Chrome, Edge, Safari; andere Browser laden normal) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 220ms var(--kurve-raus) both seite-raus; }
::view-transition-new(root) { animation: 420ms var(--kurve) both seite-rein; }
@keyframes seite-raus { to { opacity: 0; } }
@keyframes seite-rein { from { opacity: 0; transform: translateY(10px); } }

/* ---- Bewegung reduzieren ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glas: var(--grund); --glas-dunkel: var(--gruen); }
}
@media (prefers-contrast: more) {
  :root { --grau: #3F423D; --linie: #8E8D84; --glas: var(--grund); }
}
@media (pointer: coarse) { :root { --knopf-h: 3.5rem; } }

/* Step 2: specimen layout using the supplied spacing, type and colour tokens. */
.muster-seite{padding-block:var(--r-8) var(--r-7)}
.muster-intro{display:grid;gap:var(--r-5);padding-block:var(--r-7) var(--r-9)}
.muster-intro .titel-buehne{max-inline-size:11ch}
.muster-abschnitt{padding-block:var(--r-8);border-top:1px solid var(--linie)}
.muster-farben{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--r-5)}
.muster-farben li{display:grid;align-content:start;gap:var(--r-2);font-size:var(--gr-klein)}
.muster-farben strong{font-weight:400}
.muster-farben li>span:last-child{font-size:var(--gr-mini);color:var(--grau)}
.muster-farbprobe{display:block;block-size:6rem;border-radius:var(--rund-bild);border:1px solid var(--linie)}
.probe-grund{background:var(--grund)}.probe-kalk{background:var(--kalk)}.probe-tinte{background:var(--tinte)}.probe-grau{background:var(--grau)}.probe-linie{background:var(--linie)}.probe-gruen{background:var(--gruen)}.probe-messing{background:var(--messing)}
.muster-schrift{display:grid;gap:var(--r-4);padding-block:var(--r-5);border-bottom:1px solid var(--linie)}
.muster-foto{aspect-ratio:3/2}.muster-foto figcaption{position:absolute;inset-inline:var(--r-4);inset-block-end:var(--r-4)}
.abschluss.muster-hell{display:block}.muster-hell :is(h3,:where([data-seo-heading="h3"],[data-seo-caption="h3"])){color:var(--grund)}
.muster-ende{margin-top:var(--r-7)}
@media(min-width:48rem){.muster-farben{grid-template-columns:repeat(4,minmax(0,1fr))}.muster-schrift{grid-template-columns:7rem minmax(0,1fr);align-items:baseline}}
@media(min-width:75rem){.muster-farben{grid-template-columns:repeat(7,minmax(0,1fr))}}
/* Existing page templates receive the same base type and spacing; their redesign comes later. */
body:not(:has(.muster-seite))>main{margin-inline:auto;max-inline-size:var(--breite);padding:var(--r-6) var(--rand)}
body:not(:has(.muster-seite))>main :is(:is(h1,:where([data-seo-heading="h1"],[data-seo-caption="h1"])),:is(h2,:where([data-seo-heading="h2"],[data-seo-caption="h2"])),:is(h3,:where([data-seo-heading="h3"],[data-seo-caption="h3"]))){margin-block:var(--r-5) var(--r-4)}
body:not(:has(.muster-seite)) :is(.site-header,.site-footer){padding:var(--r-4) var(--rand);gap:var(--r-4)}
body:not(:has(.muster-seite)) .header-actions{gap:var(--r-3)}
dialog{padding:var(--r-5);background:var(--grund);color:var(--tinte);border:1px solid var(--linie);border-radius:var(--rund-flaeche);margin:auto}

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