/* Tellerland — site.css
   Eine Datei, sechs Ebenen. Kein !important. Entscheidungen: studio/02_kararlar.md */
@layer tokens, base, layout, components, pages, utilities;

/* ───────────────────────── tokens ───────────────────────── */
@layer tokens {
  :root {
    /* Farbe (Kontraste in 02_kararlar.md §4) */
    --leinen: #F4F0E8; --porzellan: #FBFAF7; --stein: #ECE7DD; --kalk: #E3DCCF;
    --tinte: #1F2620; --grau: #5E625A; --tanne: #2C392D; --tanne-hover: #3A4A3B;
    --goldtext: #6F6038; --gold: #A8996B; --linie: #D8D0C1; --linie-stark: #B9AE98;
    --fehler: #9B2C1F; --erfolg: #2F5D3A;

    /* Schrift: Lizenz-Upgrade = nur diese zwei Zeilen tauschen (Suisse Works / Suisse Int'l) */
    --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
    --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    /* 8 Stile */
    --t1: clamp(64px, 3rem + 5vw, 132px);   /* Display */
    --t2: clamp(40px, 2rem + 2.5vw, 72px);  /* Titel */
    --t3: clamp(28px, 1.5rem + 1vw, 40px);  /* Kapitel */
    --t4: clamp(22px, 1.25rem + .4vw, 26px);/* Lead */
    --t5: clamp(16px, .95rem + .1vw, 17px); /* Text */
    --t6: 15px;                             /* Bedienung */
    --t7: 13px;                             /* Klein */
    --t8: 12px;                             /* Label */

    /* Raum (8-px-Raster) */
    --u: 8px;
    --m: clamp(20px, 4vw, 64px);
    --gap: 24px;
    --s1: 48px; --s2: 72px; --s3: 96px; --s4: 144px;
    --maxw: 1440px;

    /* Bewegung (4 Typen) */
    --ease-ui: cubic-bezier(.2, 0, 0, 1);
    --ease-open: cubic-bezier(.2, .7, .2, 1);
    --d-ui: 160ms; --d-open: 280ms; --d-img: 400ms; --d-muster: 500ms;

    /* Signatur «Medaillon»: Teller von oben, Schatten wie auf dem Tisch */
    --teller-schatten: 0 0 0 1px rgb(31 38 32 / .07), 0 1px 2px rgb(31 38 32 / .10), 0 8px 18px -8px rgb(31 38 32 / .28);
    color-scheme: light;
  }
  @media (max-width: 1023px) { :root { --gap: 20px; } }
  @media (max-width: 599px)  { :root { --gap: 16px; --s1: 32px; --s2: 48px; --s3: 64px; --s4: 96px; } }
  @media (prefers-reduced-motion: reduce) { :root { --d-ui: 0ms; --d-open: 0ms; --d-img: 0ms; --d-muster: 0ms; } }
}

/* ───────────────────────── base ───────────────────────── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
  body { margin: 0; background: var(--leinen); color: var(--tinte); font: 400 var(--t5)/1.6 var(--sans); font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; }
  h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[class], ol[class] { padding: 0; list-style: none; }
  h1, h2, h3 { font-family: var(--serif); font-weight: 300; text-wrap: balance; hyphens: manual; }
  p, li, dd { text-wrap: pretty; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
  img, svg { display: block; max-inline-size: 100%; block-size: auto; }
  img { background: var(--kalk); }
  img[src$=".webp"], .muster img { background: transparent; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
  a:hover { text-decoration-color: var(--goldtext); }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  b, strong, th { font-weight: 600; }
  :focus-visible { outline: 2px solid var(--tinte); outline-offset: 3px; }
  .tl-dark :focus-visible { outline-color: var(--leinen); }
  ::selection { background: var(--kalk); }
  table { border-collapse: collapse; inline-size: 100%; font-variant-numeric: tabular-nums lining-nums; }
  th, td { text-align: start; vertical-align: baseline; }
}

/* ───────────────────────── layout ───────────────────────── */
@layer layout {
  .wrap { inline-size: 100%; max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--m); }
  .g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  @media (max-width: 1023px) { .g12 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
  @media (max-width: 599px)  { .g12 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .g12 > * { min-inline-size: 0; }
  .sec { padding-block: var(--s3); }
  .sec--tight { padding-block: var(--s2); }
  .sec + .sec { border-block-start: 1px solid var(--linie); }
  .prose { max-inline-size: 62ch; }
  .stack > * + * { margin-block-start: calc(var(--u) * 2); }
}

/* ───────────────────────── components ───────────────────────── */
@layer components {
  /* Typografie-Stile */
  .t-display { font: 300 var(--t1)/.95 var(--serif); letter-spacing: -.02em; }
  .t-titel   { font: 300 var(--t2)/1.05 var(--serif); letter-spacing: -.01em; }
  .t-kapitel { font: 300 var(--t3)/1.2 var(--serif); }
  .t-lead    { font: 300 italic var(--t4)/1.35 var(--serif); }
  .t-text    { font: 400 var(--t5)/1.6 var(--sans); }
  .t-ui      { font: 400 var(--t6)/1.4 var(--sans); }
  .t-klein   { font: 400 var(--t7)/1.45 var(--sans); letter-spacing: .01em; }
  .t-label   { font: 600 var(--t8)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--goldtext); }
  .t-grau    { color: var(--grau); }
  .t-display, .t-titel, .t-kapitel, .t-lead, .versprechen__satz, .koll-satz { hyphens: manual; }
  .num       { font-variant-numeric: tabular-nums lining-nums; }
  .preis     { font: 300 var(--t3)/1.2 var(--serif); font-variant-numeric: tabular-nums lining-nums; }
  .preis small { font: 400 var(--t7)/1.45 var(--sans); color: var(--grau); margin-inline-start: 8px; }
  .label-h1 { display: block; margin-block-end: 16px; }

  /* Skip-Link */
  .skip { position: absolute; inset-inline-start: 8px; inset-block-start: -100px; background: var(--tinte); color: var(--leinen); padding: 12px 16px; z-index: 100; }
  .skip:focus { inset-block-start: 8px; }

  /* Servicezeile */
  .service { background: var(--tanne); color: var(--leinen); font: 400 var(--t7)/1.45 var(--sans); }
  .service .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-block-size: 32px; }
  .service ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
  .modus { display: flex; gap: 4px; align-items: center; white-space: nowrap; hyphens: manual; }
  .service li { hyphens: manual; }
  .modus a { text-decoration: none; padding: 4px 8px; color: #C9CFC4; }
  .modus a[aria-current="true"] { color: var(--leinen); text-decoration: underline; }
  @media (max-width: 767px) { .service ul li + li, .service .lang { display: none; } }

  /* Kopf */
  .kopf { position: sticky; inset-block-start: 0; z-index: 20; background: var(--leinen); border-block-end: 1px solid var(--linie); }
  .kopf .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-block-size: 64px; gap: 24px; }
  .marke { font: 300 28px/1 var(--serif); letter-spacing: -.01em; text-decoration: none; justify-self: center; grid-column: 2; }
  .nav { display: flex; gap: 24px; font: 400 var(--t6)/1.4 var(--sans); grid-column: 1; grid-row: 1; }
  .nav > a, .nav summary { text-decoration: none; padding-block: 8px; border-block-end: 1px solid transparent; transition: border-color var(--d-ui) var(--ease-ui); }
  .nav > a:hover, .nav summary:hover, .nav [aria-current="page"] { border-block-end-color: var(--tinte); }
  .werkzeug { display: flex; gap: 24px; justify-content: end; font: 400 var(--t6)/1.4 var(--sans); grid-column: 3; }
  .werkzeug a, .werkzeug button { text-decoration: none; background: none; border: 0; padding: 8px 0; }
  .werkzeug a:hover, .werkzeug button:hover { text-decoration: underline; }
  .menu { display: none; }

  /* Kollektionen-Menü (details, funktioniert ohne JS) */
  .nav-k { position: static; }
  .nav-k summary { list-style: none; cursor: pointer; }
  .nav-k summary::-webkit-details-marker { display: none; }
  .nav-k summary::after { content: ""; display: inline-block; inline-size: 6px; block-size: 6px; margin-inline-start: 8px; border-inline-end: 1px solid; border-block-end: 1px solid; transform: translateY(-3px) rotate(45deg); transition: transform var(--d-ui) var(--ease-ui); }
  .nav-k[open] summary::after { transform: translateY(0) rotate(-135deg); }
  .nav-k__panel { position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--leinen); border-block: 1px solid var(--linie); padding-block: 32px 40px; }
  .nav-k__panel ol { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--gap); }
  .nav-k__panel a { display: grid; gap: 8px; text-decoration: none; }
  .nav-k__panel .muster { inline-size: 100%; }

  @media (max-width: 1023px) {
    .kopf .wrap { grid-template-columns: auto 1fr auto; min-block-size: 56px; }
    .nav { display: none; }
    .menu { display: block; grid-column: 1; grid-row: 1; }
    .marke { grid-column: 2; font-size: 24px; }
    .werkzeug .nur-gross { display: none; }
  }
  .menu summary { list-style: none; cursor: pointer; padding: 8px 0; font: 400 var(--t6)/1.4 var(--sans); }
  .menu summary::-webkit-details-marker { display: none; }
  .menu__panel { position: fixed; inset: 0; inset-block-start: var(--kopf-h, 97px); background: var(--leinen); padding: 24px var(--m) 48px; overflow-y: auto; z-index: 30; border-block-start: 1px solid var(--linie); }
  .menu__panel > ol { list-style: none; padding: 0; }
  .menu__panel > ol > li { border-block-end: 1px solid var(--linie); }
  .menu__panel > ol > li > a { display: block; padding: 16px 0; font: 300 var(--t3)/1.2 var(--serif); text-decoration: none; }
  .menu__k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px 0 24px; }
  .menu__k a { display: grid; gap: 6px; text-decoration: none; font: 400 var(--t7)/1.45 var(--sans); }

  /* Signatur: Musterausschnitt */
  .muster { display: block; aspect-ratio: 1; border-radius: 50%; }
  .muster img { inline-size: 100%; block-size: 100%; border-radius: 50%; box-shadow: var(--teller-schatten); transition: transform var(--d-muster) var(--ease-open); }
  a:hover .muster img, a:focus-visible .muster img { transform: rotate(-14deg) scale(1.03); }
  .muster--xs img, .muster--s img { box-shadow: 0 0 0 1px rgb(31 38 32 / .12); }
  .medaillon { display: block; position: relative; aspect-ratio: 1; }
  .medaillon svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
  .medaillon text { font: 600 5.6px/1 var(--sans); letter-spacing: .14em; fill: var(--goldtext); }
  .medaillon .muster { position: absolute; inset: 14%; }
  .muster--s { inline-size: 32px; } .muster--m { inline-size: 40px; } .muster--xs { inline-size: 24px; }
  .muster-name { display: grid; gap: 2px; font: 400 var(--t7)/1.45 var(--sans); }
  .muster-name b { font-weight: 400; }
  .muster-name span { color: var(--grau); }

  /* Bühne (Freisteller auf Kalk) */
  .buehne { position: relative; aspect-ratio: 1; background: var(--kalk); overflow: hidden; }
  .buehne > img { position: absolute; inset: 0; margin: auto; inline-size: 100%; block-size: 100%; object-fit: contain; animation: tl-in var(--d-img) ease-out both; }
  .buehne--szene > img { object-fit: cover; }
  .buehne--4x5 { aspect-ratio: 4 / 5; }
  @keyframes tl-in { from { opacity: 0; } to { opacity: 1; } }

  /* Abbildung + Bildunterschrift */
  .abb figcaption, .abb-text { margin-block-start: 12px; font: 400 var(--t7)/1.45 var(--sans); color: var(--grau); }
  .abb figcaption b { font-weight: 400; color: var(--tinte); }

  /* Links und Buttons (eckig, keine Pillen) */
  .lnk { font: 600 var(--t6)/1.4 var(--sans); text-decoration: underline; text-underline-offset: .3em; }
  .lnk::after { content: " →"; }
  button.lnk { background: none; border: 0; padding: 0; color: inherit; }
  .lnk--ruhig { font-weight: 400; }
  .lnk--ruhig::after { content: none; }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-block-size: 48px; padding: 12px 24px; border: 1px solid var(--tanne); background: var(--tanne); color: var(--leinen); font: 600 var(--t6)/1.4 var(--sans); text-decoration: none; border-radius: 0; transition: background-color var(--d-ui) var(--ease-ui), border-color var(--d-ui) var(--ease-ui), color var(--d-ui) var(--ease-ui); }
  .btn:hover { background: var(--tanne-hover); border-color: var(--tanne-hover); }
  .btn:active { transform: translateY(1px); }
  .btn--zwei { background: transparent; color: var(--tinte); border-color: var(--tinte); }
  .btn--zwei:hover { background: var(--tinte); color: var(--leinen); }
  .btn--breit { inline-size: 100%; }
  .btn[disabled], .btn[aria-disabled="true"] { background: var(--stein); border-color: var(--stein); color: var(--grau); cursor: not-allowed; }
  .btn[aria-busy="true"] { color: transparent; position: relative; }
  .btn[aria-busy="true"]::after { content: ""; position: absolute; inline-size: 16px; block-size: 16px; border: 1px solid var(--leinen); border-inline-end-color: transparent; border-radius: 50%; animation: tl-spin .8s linear infinite; }
  @keyframes tl-spin { to { transform: rotate(1turn); } }

  /* Menge */
  .menge { display: inline-grid; grid-template-columns: 44px 56px 44px; block-size: 48px; border: 1px solid var(--linie-stark); background: var(--porzellan); }
  .menge button { border: 0; background: none; font-size: 18px; }
  .menge button:hover { background: var(--stein); }
  .menge input { border: 0; background: none; text-align: center; font-variant-numeric: tabular-nums; inline-size: 100%; -moz-appearance: textfield; appearance: textfield; }
  .menge input::-webkit-inner-spin-button { -webkit-appearance: none; }

  /* Formulare */
  .feld { display: grid; gap: 8px; }
  .feld label { font: 600 var(--t6)/1.4 var(--sans); }
  .feld { min-inline-size: 0; }
  .feld input, .feld select, .feld textarea { min-inline-size: 0; inline-size: 100%; min-block-size: 48px; padding: 12px 14px; border: 1px solid var(--linie-stark); background: var(--porzellan); border-radius: 0; }
  .feld input:hover, .feld select:hover { border-color: var(--grau); }
  .feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline-offset: 0; border-color: var(--tinte); }
  .feld [aria-invalid="true"] { border-color: var(--fehler); }
  .feld .fehler { color: var(--fehler); font: 400 var(--t7)/1.45 var(--sans); }
  .feld .fehler::before { content: "! "; font-weight: 600; }
  .feld .hilfe { color: var(--grau); font: 400 var(--t7)/1.45 var(--sans); }

  /* Brotkrumen */
  .krumen { font: 400 var(--t7)/1.45 var(--sans); color: var(--grau); padding-block: 16px 0; }
  .krumen ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
  .krumen li + li::before { content: "/"; margin-inline-end: 8px; }

  /* Faktenliste */
  .fakten { display: grid; grid-template-columns: max-content 1fr; gap: 8px 32px; padding-block-start: 16px; border-block-start: 1px solid var(--linie); font: 400 var(--t6)/1.4 var(--sans); }
  .fakten dt { color: var(--grau); }

  /* Artikel-Kachel (keine Karte: kein Rahmen, kein Schatten) */
  .artikel { position: relative; display: grid; gap: 12px; align-content: start; }
  .artikel a.artikel__link { text-decoration: none; }
  .artikel a.artikel__link::after { content: ""; position: absolute; inset: 0; }
  .artikel__name { font: 400 var(--t6)/1.4 var(--sans); }
  .artikel__meta { display: flex; align-items: center; gap: 8px; font: 400 var(--t7)/1.45 var(--sans); color: var(--grau); }
  .artikel__preis { font: 400 var(--t6)/1.4 var(--sans); font-variant-numeric: tabular-nums lining-nums; }
  .artikel:hover .buehne > img { transform: scale(1.03); transition: transform var(--d-muster) var(--ease-open); }
  .artikel__gastro { display: none; font: 400 var(--t7)/1.45 var(--sans); color: var(--grau); }
  [data-modus="gastro"] .artikel__gastro { display: block; }

  /* Musterkarte in der Liste (2x2) */
  .musterkarte { grid-column: span 2; grid-row: span 2; display: grid; align-content: space-between; gap: 24px; background: var(--stein); padding: 32px; text-decoration: none; }
  .musterkarte .muster { inline-size: 45%; }

  /* Filter */
  .filter { display: grid; gap: 24px; align-content: start; }
  .filter fieldset { border: 0; margin: 0; padding: 0 0 16px; border-block-end: 1px solid var(--linie); }
  .filter legend { font: 600 var(--t8)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--goldtext); margin-block-end: 16px; padding: 0; }
  .filter label { display: flex; align-items: center; gap: 12px; padding-block: 6px; font: 400 var(--t6)/1.4 var(--sans); cursor: pointer; }
  .filter label .anz { margin-inline-start: auto; color: var(--grau); font: 400 var(--t7)/1.45 var(--sans); font-variant-numeric: tabular-nums; }
  .filter input[type="checkbox"] { inline-size: 18px; block-size: 18px; accent-color: var(--tanne); margin: 0; }
  .leiste { flex-wrap: wrap; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 16px; border-block: 1px solid var(--linie); font: 400 var(--t6)/1.4 var(--sans); }
  .leiste select { min-block-size: 44px; padding: 8px 12px; border: 1px solid var(--linie-stark); background: var(--porzellan); border-radius: 0; }
  .aktiv { display: flex; flex-wrap: wrap; gap: 8px 16px; font: 400 var(--t7)/1.45 var(--sans); }
  .aktiv button { background: none; border: 0; padding: 4px 0; text-decoration: underline; }
  .aktiv button::after { content: " ×"; }

  /* Tabellen */
  .liste { font: 400 var(--t6)/1.4 var(--sans); }
  .liste caption { text-align: start; font: 400 var(--t7)/1.45 var(--sans); color: var(--grau); padding-block-end: 12px; }
  .liste th { font: 600 var(--t8)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--grau); padding: 12px 16px 12px 0; border-block-end: 1px solid var(--tinte); }
  .liste td { padding: 14px 16px 14px 0; border-block-end: 1px solid var(--linie); }
  .liste .r { text-align: end; }
  .liste tbody tr:hover { background: var(--stein); }
  .liste a { text-decoration: none; }
  .liste a:hover { text-decoration: underline; }
  .tabelle-scroll { overflow-x: auto; position: relative; }

  /* Hinweis (Platzhalter nur im Studio sichtbar) */
  [data-studio] .ph { background: linear-gradient(transparent 60%, #EADFB8 60%); }
  .vertrauen { display: flex; flex-wrap: wrap; gap: 4px 20px; font: 400 var(--t7)/1.45 var(--sans); color: var(--grau); }

  /* Warenkorb-Schublade (dialog) */
  .schublade { margin: 0 0 0 auto; inline-size: min(440px, 100vw); max-inline-size: 100vw; block-size: 100dvh; max-block-size: 100dvh; border: 0; padding: 0; background: var(--leinen); color: var(--tinte); }
  .schublade::backdrop { background: rgb(31 38 32 / .32); }
  .schublade[open] { animation: tl-rein var(--d-open) var(--ease-open); }
  @keyframes tl-rein { from { transform: translateX(24px); opacity: 0; } }
  .schublade__inner { display: grid; grid-template-rows: auto 1fr auto; block-size: 100%; }
  .schublade header, .schublade footer { padding: 20px 24px; border-block-end: 1px solid var(--linie); }
  .schublade footer { border-block: 1px solid var(--linie) 0; display: grid; gap: 12px; }
  .schublade header { display: flex; justify-content: space-between; align-items: center; }
  .schublade__liste { overflow-y: auto; padding: 0 24px; }
  .posten { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; padding-block: 16px; border-block-end: 1px solid var(--linie); align-items: start; }
  .posten .buehne { aspect-ratio: 1; }
  .posten button.weg { background: none; border: 0; padding: 0; text-decoration: underline; font: 400 var(--t7)/1.45 var(--sans); color: var(--grau); }
  .leer { padding: 48px 0; display: grid; gap: 16px; justify-items: start; }

  /* Toast */
  .toast { position: fixed; inset-inline: var(--m); inset-block-end: 24px; margin-inline: auto; max-inline-size: 480px; background: var(--tinte); color: var(--leinen); padding: 16px 20px; font: 400 var(--t6)/1.4 var(--sans); z-index: 50; opacity: 0; transform: translateY(8px); transition: opacity var(--d-open) var(--ease-open), transform var(--d-open) var(--ease-open); pointer-events: none; }
  .toast.ist-da { opacity: 1; transform: none; }

  /* Fuss */
  .fuss { border-block-start: 1px solid var(--linie); padding-block: var(--s2) 32px; font: 400 var(--t6)/1.4 var(--sans); }
  .fuss__grid { display: grid; grid-template-columns: 4fr repeat(4, 2fr); gap: var(--gap); }
  .fuss h2 { font: 600 var(--t8)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--goldtext); margin-block-end: 16px; }
  .fuss li + li { margin-block-start: 8px; }
  .fuss a { text-decoration: none; }
  .fuss a:hover { text-decoration: underline; }
  .fuss__marke { display: grid; gap: 16px; align-content: start; }
  .fuss__marke .muster { inline-size: 56px; }
  .fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-block-start: var(--s1); padding-block-start: 24px; border-block-start: 1px solid var(--linie); font: 400 var(--t7)/1.45 var(--sans); color: var(--grau); }
  @media (max-width: 1023px) { .fuss__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fuss__marke { grid-column: 1 / -1; } }

  /* Cookie-Hinweis */
  .keks { position: fixed; inset-inline-start: var(--m); inset-block-end: 24px; z-index: 40; max-inline-size: 400px; background: var(--porzellan); border: 1px solid var(--linie-stark); padding: 20px; display: grid; gap: 16px; font: 400 var(--t7)/1.45 var(--sans); }
  .keks div { display: flex; gap: 12px; flex-wrap: wrap; }
  .keks .btn { min-block-size: 44px; padding: 8px 16px; }

  /* Nummerierte Kapitel */
  .kapitel-kopf { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; margin-block-end: var(--s1); }
  .kapitel-kopf .nr { grid-column: 1 / span 2; font: 300 italic var(--t4)/1.35 var(--serif); color: var(--goldtext); font-variant-numeric: tabular-nums; }
  .kapitel-kopf h2 { grid-column: 3 / span 7; }
  .kapitel-kopf p { grid-column: 3 / span 6; margin-block-start: 16px; color: var(--grau); }
  @media (max-width: 1023px) { .kapitel-kopf .nr, .kapitel-kopf h2, .kapitel-kopf p { grid-column: 1 / -1; } .kapitel-kopf .nr { margin-block-end: 12px; } }
}

/* ───────────────────────── pages ───────────────────────── */
@layer pages {
  /* Startseite */
  .start-kopf { padding-block: 48px var(--s2); row-gap: 32px; align-items: end; }
  .start-kopf__text { grid-column: 1 / span 6; display: grid; gap: 24px; align-content: end; }
  .start-kopf__text .t-text { max-inline-size: 46ch; }
  .start-kopf__kauf { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-block-start: 24px; border-block-start: 1px solid var(--linie); }
  .start-kopf__bild { grid-column: 7 / -1; position: relative; }
  .tisch { position: relative; overflow: clip; aspect-ratio: 10 / 9; background: var(--kalk); margin-inline-end: calc(var(--m) * -1); }
  .tisch__teller { position: absolute; inline-size: calc(var(--d) * 1.05% * .86); inset-inline-start: calc(7% + var(--x) * .86); inset-block-start: calc(7% + var(--y) * .86); translate: -50% -50%; text-decoration: none; z-index: 1; }
  .tisch__teller .muster img { box-shadow: 0 0 0 1px rgb(31 38 32 / .06), 0 2px 3px rgb(31 38 32 / .10), 0 18px 30px -14px rgb(31 38 32 / .38); transition: transform var(--d-muster) var(--ease-open), box-shadow var(--d-open) var(--ease-open); }
  .tisch__teller:hover .muster img, .tisch__teller:focus-visible .muster img { transform: translateY(-6px) rotate(-10deg); box-shadow: 0 0 0 1px rgb(31 38 32 / .06), 0 4px 6px rgb(31 38 32 / .10), 0 30px 40px -16px rgb(31 38 32 / .42); }
  .tisch__teller:hover, .tisch__teller:focus-visible { z-index: 2; }
  .tisch__name { position: absolute; inset-inline-start: 50%; inset-block-end: 6%; translate: -50% 4px; white-space: nowrap; padding: 4px 10px; background: var(--porzellan); font: 400 var(--t7)/1.4 var(--sans); color: var(--tinte); opacity: 0; transition: opacity var(--d-ui) var(--ease-ui), translate var(--d-ui) var(--ease-ui); pointer-events: none; }
  .tisch__teller.rechts .tisch__name { inset-inline-start: auto; inset-inline-end: 4%; translate: 0 4px; }
  .tisch__teller.rechts:hover .tisch__name, .tisch__teller.rechts:focus-visible .tisch__name { translate: 0 0; }
  .tisch__teller:hover .tisch__name, .tisch__teller:focus-visible .tisch__name { opacity: 1; translate: -50% 0; }
  .tisch__teller:focus-visible { outline: none; }
  .tisch__teller:focus-visible .muster { outline: 2px solid var(--tinte); outline-offset: 4px; }
  .leiste-d__reihe { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: clamp(12px, 3vw, 48px); padding: 56px clamp(16px, 9vw, 160px) 32px; background: var(--stein); }
  .leiste-d__teller { flex: var(--w) 1 0; min-inline-size: 0; display: grid; gap: 4px; text-decoration: none; }
  .leiste-d__scheibe { display: block; aspect-ratio: 1; border-radius: 50%; overflow: hidden; position: relative; box-shadow: var(--teller-schatten); margin-block-end: 20px; transition: transform var(--d-muster) var(--ease-open); }
  .leiste-d__scheibe img { position: absolute; inline-size: 128.2%; max-inline-size: none; inset-inline-start: -14.1%; inset-block-start: -14.1%; }
  .leiste-d__teller:hover .leiste-d__scheibe { transform: translateY(-4px) rotate(-8deg); }
  .leiste-d__mass { font: 300 var(--t3)/1.1 var(--serif); padding-block-start: 12px; border-block-start: 1px solid var(--linie-stark); }
  .leiste-d__wofuer { font: 400 var(--t6)/1.4 var(--sans); }
  .leiste-d__mehr { grid-column: 1 / -1; padding-block-start: 8px; }
  @media (max-width: 599px) { .leiste-d__reihe { gap: 10px; padding: 32px 16px 24px; margin-inline: calc(var(--m) * -1); } .leiste-d__mass { font-size: var(--t4); } .leiste-d__wofuer { font-size: var(--t7); } }
  .kartela { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--gap); padding-block-start: 24px; border-block-start: 1px solid var(--linie); }
  .kartela a { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .kartela .muster { inline-size: 44px; flex: none; }
  .kartela a:hover b { text-decoration: underline; }
  @media (max-width: 1023px) {
    .start-kopf__text, .start-kopf__bild { grid-column: 1 / -1; }
    .tisch { margin-inline: calc(var(--m) * -1); }
    .kartela { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (max-width: 599px) { .start-kopf { padding-block-start: 24px; row-gap: 20px; } .kartela { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kartela .muster { inline-size: 36px; } .start-kopf__text { gap: 16px; } .start-kopf__kauf { padding-block-start: 16px; gap: 12px 24px; } }

  .gruppe { row-gap: 48px; }
  .gruppe__text { grid-column: 1 / span 4; display: grid; gap: 16px; align-content: start; position: sticky; inset-block-start: 96px; }
  .gruppe__reihe { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
  .gruppe__reihe .artikel:first-child { grid-column: span 2; grid-row: span 2; }
  @media (max-width: 1023px) { .gruppe__text { position: static; grid-column: 1 / -1; } .gruppe__reihe { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  .versprechen { background: var(--tanne); color: var(--leinen); }
  .versprechen .t-label { color: #CFC6A6; margin-block-end: 24px; }
  .versprechen__satz { grid-column: 1 / span 9; font: 300 var(--t2)/1.05 var(--serif); letter-spacing: -.01em; }
  .versprechen__liste { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-block-start: var(--s2); padding-block-start: 24px; border-block-start: 1px solid #56635A; }
  .versprechen__liste dt { font: 600 var(--t8)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; margin-block-end: 12px; }
  .versprechen__liste dd { color: #D9DDD3; font: 400 var(--t6)/1.4 var(--sans); }
  .versprechen a { color: var(--leinen); }
  @media (max-width: 1023px) { .versprechen__satz { grid-column: 1 / -1; } .versprechen__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; } }

  .gastro-band { row-gap: 32px; align-items: center; }
  .gastro-band__bild { grid-column: 1 / span 5; }
  .gastro-band__text { grid-column: 7 / -1; display: grid; gap: 24px; }
  @media (max-width: 1023px) { .gastro-band__bild, .gastro-band__text { grid-column: 1 / -1; } }

  .journal-liste { grid-column: 1 / -1; display: grid; grid-template-columns: 5fr 4fr 3fr; gap: var(--gap); }
  .journal-liste a { display: grid; gap: 12px; align-content: start; text-decoration: none; }
  .journal-liste a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; }
  @media (max-width: 1023px) { .journal-liste { grid-template-columns: 1fr; } }

  /* Kollektion */
  .koll-kopf { padding-block: 32px var(--s2); row-gap: 40px; align-items: end; }
  .koll-kopf__bild { grid-column: 1 / span 6; position: relative; }
  .koll-kopf__bild .medaillon { position: absolute; inline-size: 34%; inset-inline-end: -10%; inset-block-end: -8%; }
  .koll-kopf__text { grid-column: 8 / -1; display: grid; gap: 24px; }
  .koll-nr { font: 300 italic var(--t4)/1.35 var(--serif); color: var(--goldtext); font-variant-numeric: tabular-nums; }
  @media (max-width: 1023px) { .koll-kopf__bild, .koll-kopf__text { grid-column: 1 / -1; } .koll-kopf__bild .medaillon { inset-inline-end: 8px; inset-block-start: auto; inset-block-end: -10%; inline-size: 34%; } }
  .koll-satz { grid-column: 3 / span 8; font: 300 var(--t3)/1.2 var(--serif); }
  @media (max-width: 1023px) { .koll-satz { grid-column: 1 / -1; } }
  .formen { grid-column: 1 / -1; display: grid; gap: var(--s1); }
  .form-gruppe { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
  .form-gruppe > h3 { grid-column: 1 / span 3; font: 300 var(--t3)/1.2 var(--serif); position: sticky; inset-block-start: 96px; }
  .form-gruppe .reihe { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--gap); }
  @media (max-width: 1023px) { .form-gruppe > h3 { position: static; grid-column: 1 / -1; } .form-gruppe .reihe { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .koll-wechsel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--gap); }
  .koll-wechsel a { display: grid; gap: 8px; text-decoration: none; }
  .koll-wechsel a[aria-current="page"] .muster-name b { text-decoration: underline; }
  @media (max-width: 1023px) { .koll-wechsel { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  /* Geschirr */
  .liste-kopf { padding-block: 24px 40px; row-gap: 16px; align-items: end; }
  .liste-kopf h1 { grid-column: 1 / span 6; }
  .liste-kopf p { grid-column: 8 / -1; color: var(--grau); }
  @media (max-width: 1023px) { .liste-kopf h1, .liste-kopf p { grid-column: 1 / -1; } }
  .liste-rumpf { padding-block: 32px var(--s3); align-items: start; }
  .liste-rumpf .filter { grid-column: 1 / span 3; position: sticky; inset-block-start: 96px; max-block-size: calc(100dvh - 120px); overflow-y: auto; padding-inline-end: 8px; }
  .liste-rumpf .raster { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px var(--gap); }
  .filter-knopf { display: none; }
  @media (max-width: 1023px) {
    .liste-rumpf .filter { display: none; }
    .liste-rumpf .filter.ist-offen { display: grid; position: fixed; inset: 0; z-index: 35; max-block-size: none; background: var(--leinen); padding: 24px var(--m) 96px; }
    .liste-rumpf .raster { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px var(--gap); }
    .filter-knopf { display: inline-flex; }
    .musterkarte { grid-column: span 2; grid-row: auto; }
  }
  .filter__fertig { display: none; }
  @media (max-width: 1023px) { .filter.ist-offen .filter__fertig { display: flex; position: fixed; inset-inline: var(--m); inset-block-end: 16px; } }

  /* Produkt */
  .pdp { padding-block: 16px var(--s3); row-gap: 40px; align-items: start; }
  .pdp__galerie { grid-column: 1 / span 7; display: grid; gap: var(--gap); }
  .pdp__galerie figure:first-child .buehne { aspect-ratio: 1; }
  .pdp__galerie .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
  .pdp__kauf { grid-column: 9 / -1; position: sticky; inset-block-start: 88px; display: grid; gap: 24px; }
  .pdp__koll { display: flex; align-items: center; gap: 12px; font: 400 var(--t7)/1.45 var(--sans); text-decoration: none; }
  .pdp__koll:hover span { text-decoration: underline; }
  .pdp__masse { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 var(--t6)/1.4 var(--sans); }
  .pdp__masse li + li::before { content: "·"; margin-inline-end: 16px; color: var(--grau); }
  .durchmesser { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 12px; }
  .durchmesser a { display: grid; grid-template-rows: 60px auto; justify-items: center; align-items: center; gap: 6px; min-inline-size: 48px; padding-inline: 4px; text-decoration: none; font: 400 var(--t7)/1.4 var(--sans); color: var(--grau); }
  .durchmesser .teller { position: relative; inline-size: var(--px); block-size: var(--px); border-radius: 50%; transition: transform var(--d-ui) var(--ease-ui); }
  .durchmesser .teller img { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; inline-size: calc(var(--px) / .78); max-inline-size: none; block-size: auto; }
  .t-label .nb { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--grau); }
  .durchmesser .num { padding-block-end: 2px; border-block-end: 2px solid transparent; }
  .durchmesser a:hover .teller { transform: translateY(-2px); }
  .durchmesser a:hover .num { color: var(--tinte); }
  .durchmesser a[aria-current="page"] { color: var(--tinte); }
  .durchmesser a[aria-current="page"] .num { border-block-end-color: var(--tinte); font-weight: 600; }
  .durchmesser a[aria-current="page"] .teller { box-shadow: 0 0 0 2px var(--leinen), 0 0 0 3px var(--tinte); }
  .kaufzeile { display: grid; grid-template-columns: auto 1fr; gap: 12px; }
  .liefer { font: 400 var(--t6)/1.4 var(--sans); }
  .liefer b { font-weight: 600; }
  .liefer::before { content: ""; display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--erfolg); margin-inline-end: 8px; }
  .pdp details { border-block-end: 1px solid var(--linie); }
  .pdp details summary { padding-block: 16px; cursor: pointer; font: 600 var(--t6)/1.4 var(--sans); list-style: none; display: flex; justify-content: space-between; }
  .pdp details summary::-webkit-details-marker { display: none; }
  .pdp details summary::after { content: "+"; font-weight: 400; }
  .pdp details[open] summary::after { content: "–"; }
  .pdp details > div { padding-block-end: 16px; font: 400 var(--t6)/1.5 var(--sans); color: var(--grau); }
  .spec { grid-column: 1 / -1; }
  .spec table { font: 400 var(--t6)/1.4 var(--sans); max-inline-size: 760px; }
  .spec th { inline-size: 40%; color: var(--grau); font-weight: 400; padding: 12px 16px 12px 0; border-block-end: 1px solid var(--linie); }
  .spec td { padding: 12px 0; border-block-end: 1px solid var(--linie); }
  .klebe { display: none; }
  @media (max-width: 1023px) {
    .pdp__galerie, .pdp__kauf { grid-column: 1 / -1; position: static; }
    .pdp__galerie { margin-inline: calc(var(--m) * -1); grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding-inline: var(--m); scrollbar-width: none; }
    .pdp__galerie > * { scroll-snap-align: center; }
    .pdp__galerie .duo { display: contents; }
    .klebe { display: flex; position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 25; background: var(--porzellan); border-block-start: 1px solid var(--linie); padding: 12px var(--m); justify-content: space-between; align-items: center; gap: 16px; transform: translateY(100%); transition: transform var(--d-open) var(--ease-open); }
    .klebe.ist-da { transform: none; }
  }

  /* Service */
  .service-rechner { padding-block: 32px var(--s3); row-gap: 40px; align-items: start; }
  .service-rechner__wahl { grid-column: 1 / span 5; display: grid; gap: 32px; }
  .service-rechner__ergebnis { grid-column: 7 / -1; display: grid; gap: 24px; }
  .wahl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .wahl label { display: grid; gap: 8px; cursor: pointer; font: 400 var(--t7)/1.45 var(--sans); }
  .wahl input { position: absolute; opacity: 0; }
  .wahl input:checked + .muster { outline: 2px solid var(--tinte); outline-offset: 3px; }
  .wahl input:focus-visible + .muster { outline: 2px solid var(--tinte); outline-offset: 6px; }
  .personen { display: flex; gap: 8px; flex-wrap: wrap; }
  .personen label { position: relative; }
  .personen input { position: absolute; opacity: 0; }
  .personen span { display: inline-grid; place-items: center; min-inline-size: 56px; min-block-size: 48px; border: 1px solid var(--linie-stark); font: 400 var(--t6)/1.4 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; }
  .personen input:checked + span { background: var(--tinte); color: var(--leinen); border-color: var(--tinte); }
  .personen input:focus-visible + span { outline: 2px solid var(--tinte); outline-offset: 3px; }
  @media (max-width: 1023px) { .service-rechner__wahl, .service-rechner__ergebnis { grid-column: 1 / -1; } }

  /* Gastronomie */
  .gastro-kopf { background: var(--tanne); color: var(--leinen); }
  .gastro-kopf .g12 { padding-block: var(--s2); row-gap: 32px; align-items: end; }
  .gastro-kopf h1 { grid-column: 1 / span 7; }
  .gastro-kopf p { grid-column: 9 / -1; color: #D9DDD3; }
  .gastro-kopf .t-label { color: #CFC6A6; grid-column: 1 / -1; }
  @media (max-width: 1023px) { .gastro-kopf h1, .gastro-kopf p { grid-column: 1 / -1; } }
  .schritte { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); counter-reset: s; }
  .schritte li { counter-increment: s; display: grid; gap: 12px; padding-block-start: 16px; border-block-start: 1px solid var(--tinte); }
  .schritte li::before { content: "Schritt " counter(s); font: 600 var(--t8)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--goldtext); }
  @media (max-width: 767px) { .schritte { grid-template-columns: 1fr; } }
  .zahlen { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
  .zahlen div { display: grid; gap: 8px; }
  .zahlen b { font: 300 var(--t2)/1.05 var(--serif); font-weight: 300; font-variant-numeric: tabular-nums; }
  @media (max-width: 767px) { .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } }
  .antrag { grid-column: 3 / span 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gap); }
  .antrag .voll { grid-column: 1 / -1; }
  @media (max-width: 1023px) { .antrag { grid-column: 1 / -1; grid-template-columns: 1fr; } }

  /* Schnellbestellung */
  .schnell { padding-block: 32px var(--s3); row-gap: 32px; }
  .schnell__suche { grid-column: 1 / span 7; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
  @media (max-width: 479px) { .schnell__suche { grid-template-columns: 1fr; } }
  .schnell__tabelle { grid-column: 1 / -1; }
  .schnell__tabelle table { min-inline-size: 760px; }
  .schnell__tabelle td .muster { display: inline-block; vertical-align: middle; margin-inline-end: 12px; }
  .schnell__summe { grid-column: 8 / -1; display: grid; gap: 16px; justify-items: end; text-align: end; }
  @media (max-width: 1023px) { .schnell__suche, .schnell__summe { grid-column: 1 / -1; } }

  /* Warenkorb-Seite */
  .korb { padding-block: 32px var(--s3); row-gap: 40px; align-items: start; }
  .korb__liste { grid-column: 1 / span 7; }
  .korb__summe { grid-column: 9 / -1; display: grid; gap: 16px; padding: 24px; background: var(--porzellan); position: sticky; inset-block-start: 96px; }
  .korb__summe dl { display: grid; grid-template-columns: 1fr auto; gap: 8px; font: 400 var(--t6)/1.4 var(--sans); }
  .korb__summe dd { text-align: end; font-variant-numeric: tabular-nums; }
  .korb__summe .total { font: 300 var(--t3)/1.2 var(--serif); padding-block-start: 12px; border-block-start: 1px solid var(--linie); }
  @media (max-width: 1023px) { .korb__liste, .korb__summe { grid-column: 1 / -1; position: static; } }

  /* Suche */
  .suche-feld { grid-column: 1 / span 8; display: grid; grid-template-columns: 1fr auto; gap: 12px; }
  .suche-feld input { min-inline-size: 0; min-block-size: 56px; font: 300 var(--t4)/1.35 var(--serif); padding: 8px 0; border: 0; border-block-end: 1px solid var(--tinte); background: transparent; border-radius: 0; }
  .suche-feld input:focus-visible { outline: 0; border-block-end-width: 2px; }
  @media (max-width: 1023px) { .suche-feld { grid-column: 1 / -1; } }

  /* Journal */
  .jr-kopf { padding-block: 32px var(--s2); row-gap: 24px; }
  .jr-kopf h1 { grid-column: 1 / span 8; }
  .jr-haupt { grid-column: 1 / span 7; display: grid; gap: 20px; text-decoration: none; }
  .jr-neben { grid-column: 9 / -1; display: grid; gap: 0; align-content: start; }
  .jr-neben a { display: grid; gap: 8px; padding-block: 24px; border-block-end: 1px solid var(--linie); text-decoration: none; }
  .jr-neben a:first-child { padding-block-start: 0; }
  .jr-haupt:hover h2, .jr-neben a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
  @media (max-width: 1023px) { .jr-kopf h1, .jr-haupt, .jr-neben { grid-column: 1 / -1; } }
  .meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font: 400 var(--t7)/1.45 var(--sans); color: var(--grau); }

  /* Beitrag */
  .beitrag-kopf { padding-block: 32px var(--s1); row-gap: 24px; }
  .beitrag-kopf > * { grid-column: 3 / span 8; }
  .beitrag-kopf .t-lead { max-inline-size: 36ch; color: var(--grau); }
  .beitrag-kopf .meta { padding-block-start: 16px; border-block-start: 1px solid var(--linie); }
  .beitrag { padding-block: var(--s1) var(--s3); }
  .beitrag > * { grid-column: 4 / span 6; }
  .beitrag > * + * { margin-block-start: 20px; }
  .beitrag h2 { font: 300 var(--t3)/1.2 var(--serif); margin-block-start: 48px; }
  .beitrag h3 { font: 600 var(--t6)/1.4 var(--sans); margin-block-start: 32px; }
  .beitrag ul, .beitrag ol { padding-inline-start: 1.2em; }
  .beitrag li + li { margin-block-start: 8px; }
  .beitrag table { font: 400 var(--t6)/1.4 var(--sans); }
  .beitrag th { font: 600 var(--t8)/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--grau); padding: 10px 12px 10px 0; border-block-end: 1px solid var(--tinte); }
  .beitrag td { padding: 12px 12px 12px 0; border-block-end: 1px solid var(--linie); }
  .beitrag .r { text-align: end; }
  .beitrag .breit { grid-column: 2 / span 10; }
  .beitrag .tabelle-scroll table { min-inline-size: 520px; }
  .beitrag blockquote { grid-column: 3 / span 8; font: 300 italic var(--t4)/1.35 var(--serif); padding-block: 24px; border-block: 1px solid var(--linie); }
  .beitrag .notiz { font: 400 var(--t7)/1.45 var(--sans); color: var(--grau); }
  .beitrag .empfehlung { display: grid; grid-template-columns: 96px 1fr auto; gap: 20px; align-items: center; padding-block: 20px; border-block: 1px solid var(--linie); }
  @media (max-width: 1023px) { .beitrag-kopf > *, .beitrag > *, .beitrag .breit, .beitrag blockquote { grid-column: 1 / -1; } }
  @media (max-width: 599px) { .beitrag .empfehlung { grid-template-columns: 72px 1fr; } .beitrag .empfehlung .lnk { grid-column: 2; } }

  /* Haltung, Hilfe, Impressum */
  .seite-kopf { padding-block: 32px var(--s2); row-gap: 24px; }
  .seite-kopf h1 { grid-column: 1 / span 8; }
  .seite-kopf p { grid-column: 1 / span 6; color: var(--grau); }
  @media (max-width: 1023px) { .seite-kopf h1, .seite-kopf p { grid-column: 1 / -1; } }
  .absatz { grid-column: 3 / span 6; display: grid; gap: 20px; }
  @media (max-width: 1023px) { .absatz { grid-column: 1 / -1; } }
  .nicht { grid-column: 3 / span 8; display: grid; gap: 0; }
  .nicht div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding-block: 20px; border-block-end: 1px solid var(--linie); }
  .nicht s { font: 300 var(--t4)/1.35 var(--serif); color: var(--grau); text-decoration-thickness: 1px; }
  @media (max-width: 767px) { .nicht { grid-column: 1 / -1; } .nicht div { grid-template-columns: 1fr; gap: 8px; } }
  .fragen { grid-column: 3 / span 8; }
  .fragen h2 { font: 300 var(--t3)/1.2 var(--serif); margin-block: 48px 8px; }
  .fragen details { border-block-end: 1px solid var(--linie); }
  .fragen summary { padding-block: 18px; cursor: pointer; font: 400 var(--t5)/1.5 var(--sans); list-style: none; display: flex; justify-content: space-between; gap: 24px; }
  .fragen summary::-webkit-details-marker { display: none; }
  .fragen summary::after { content: "+"; color: var(--grau); }
  .fragen details[open] summary::after { content: "–"; }
  .fragen details > div { padding-block-end: 20px; max-inline-size: 62ch; color: var(--grau); }
  @media (max-width: 1023px) { .fragen { grid-column: 1 / -1; } }

  /* 404 */
  .bruch { padding-block: var(--s3); row-gap: 32px; align-items: center; }
  .bruch__muster { grid-column: 2 / span 4; position: relative; }
  .bruch__muster .muster { clip-path: polygon(0 0, 100% 0, 100% 38%, 72% 52%, 88% 64%, 54% 100%, 0 100%); }
  .bruch__text { grid-column: 7 / span 5; display: grid; gap: 24px; }
  @media (max-width: 1023px) { .bruch__muster { grid-column: 1 / span 3; } .bruch__text { grid-column: 1 / -1; } }
}

/* ───────────────────────── utilities ───────────────────────── */
@layer utilities {
  [hidden] { display: none; }
  .vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .voll { grid-column: 1 / -1; }
  .mt-s1 { margin-block-start: var(--s1); }
  .mt-s2 { margin-block-start: var(--s2); }
  .zentriert { justify-self: center; }
  [data-modus="privat"] .nur-gastro, [data-modus="gastro"] .nur-privat { display: none; }
}