/* ==========================================================================
   Thomas Nostalgie & Raritaeten · Stildatei
   Leitbild: Galerie statt Flohmarkt. Pergament als Grund, Braunschwarz fuer
   Schrift und dunkle Baender, Amber nur als Linie und im Hauptknopf. Keine
   Schatten, keine runden Ecken, Haarlinien statt Kaesten. Das Foto des
   Moebelstuecks ist immer das Lauteste auf der Seite.
   Quelle der Regeln: Werkzeuge/DESIGN.md. Die Klassen liefern
   app/blocks/render.php (Bausteine) und app/templates/layout.php (Rahmen).
   Mobile-first: Basis < 600 px, Tablet >= 600 px, Desktop >= 900 px, Wide >= 1200 px
   ========================================================================== */

/* ---------- Schriften (lokal, DSGVO-konform) ----------
   Cormorant Garamond traegt die grossen Zeilen; sie liegt als variable Schrift
   (300 bis 700) in einer Datei je Zeichensatz vor. Kursiv 400 ist eine eigene
   Datei fuer Zitate und Bildunterschriften. Source Sans 3 macht alles andere,
   ebenfalls variabel. latin-ext liefert Umlaute in Kapitaelchen, Gedankenstrich,
   Euro und die Ligaturen; ohne den Block wuerden manche Zeichen aus der
   Ersatzschrift kommen. */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-latinext.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: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  font-weight: 400; font-style: italic; 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;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/fonts/cormorant-garamond-italic-latinext.woff2') format('woff2');
  font-weight: 400; font-style: italic; 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: 'Source Sans 3';
  src: url('/assets/fonts/source-sans-3-latin.woff2') format('woff2');
  font-weight: 200 900; 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;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/assets/fonts/source-sans-3-latinext.woff2') format('woff2');
  font-weight: 200 900; 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;
}

/* ---------- Tokens ----------
   Farbweg "Pergament": warmes Off-White als Grund, Braunschwarz fuer Schrift und
   dunkle Baender, Amber nur als Zierde und im Hauptknopf. Kein reines Schwarz,
   kein Blau. Jede Farbe steht genau hier einmal; alles darunter greift auf die
   Variablen zu. Kontrastwerte stehen in Werkzeuge/DESIGN.md Abschnitt 2.1. */
:root {
  /* Flaechen, von hell nach dunkel */
  --paper: #FBF7F0;          /* Pergament, Grundflaeche der Seite */
  --paper-deep: #F4EDE1;     /* Zwischenband, Kartenfuss, Formularfelder */
  --card: #FFFDF9;           /* Karte, eine Spur heller als der Grund */
  --ink: #2A2320;            /* Braunschwarz: Schrift, dunkle Baender, Hauptknopf-Text */
  --ink-deep: #1F1A17;       /* Fusszeile und Grund hinter dem Kopfbild */

  /* Schrift */
  --ink-soft: #6B5F56;       /* Nebentext, Kategorie-Zeile; 5,79:1 auf Pergament */
  --ink-on-dark: #C9B896;    /* gedaempfter Text im Fuss; 8,85:1 */

  /* Zierde: Amber. Nie als grosse Flaeche, nie als Text auf hell (2,25:1). */
  --amber: #E09900;          /* Haarlinien, Hauptknopf-Fuellung, Augenbraue auf dunkel */
  --amber-text: #8A5A00;     /* Amber als Text auf hell und als Fokusring; 5,55:1 */
  --amber-hover: #C98800;    /* Hauptknopf beim Zeigen; Schrift bleibt --ink, 5,15:1 */
  --amber-wash: #F7E7C3;     /* Etikett-Hintergrund, Hinweisflaeche */

  /* Das einzige Rot der Seite: Fehlermeldungen am Formular. */
  --error: #8A2A1A;

  /* Haarlinien statt Kaesten. Tiefe kommt aus Farbkontrast, nicht aus Schatten. */
  --line: rgba(42, 35, 32, .16);
  --line-on-dark: rgba(251, 247, 240, .14);
  --rule: 1px solid var(--line);

  /* Schriften */
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;

  --size-h1: clamp(2.4rem, 1.6rem + 3.6vw, 4.2rem);
  --size-h2: clamp(1.8rem, 1.3rem + 2.2vw, 2.8rem);
  --size-h3: clamp(1.3rem, 1.1rem + .9vw, 1.6rem);
  --size-body: clamp(1rem, .9rem + .35vw, 1.125rem);
  --size-small: .92rem;
  --size-eyebrow: .76rem;
  /* Vorgabe 17.09.2026: Texte breiter, der fruehe Umbruch wirkte seltsam. Gilt seitenweit.
     Fliesstext bis 95 Zeichen, Einleitungen und Vorspann bis 110. */
  --measure: 95ch;                        /* Fliesstext nie breiter */
  --measure-lead: 110ch;                  /* Einleitungen unter Ueberschriften */
  --sperr: .18em;                         /* Sperrsatz fuer Versalien */

  /* Abstaende: 4er-Raster */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-sec: clamp(4rem, 6vw + 1rem, 6.5rem);   /* Abstand zwischen Abschnitten, 64 bis 104 px */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);          /* Seitenrand, nie unter 20 px */

  /* Raster */
  --wrap: 1280px;                         /* Inhaltsbreite, siehe .container */
  --wrap-narrow: 760px;
  --header-h: 4.5rem;                     /* Kopfzeile; site.js misst die echte Hoehe nach */

  /* Radien: Galerie kennt keine runden Ecken. Nur der Pfeil-Knopf ist eine Pille. */
  --radius: 0px;
  --radius-pill: 999px;

  /* Bewusst schattenlos. Ein einziger weicher Schatten fuer schwebende Menues. */
  --shadow-none: none;
  --shadow-float: 0 12px 32px -12px rgba(31, 26, 23, .28);

  /* Bewegung: kurz und leise. Alles Groessere steckt in prefers-reduced-motion. */
  --ease-out: cubic-bezier(.22, .8, .35, 1);
  --dur-fast: .18s;
  --dur: .3s;
  --dur-slow: .6s;

  /* Kopfbild: zwei Verlaeufe, von links und von unten (siehe .hero) */
  --hero-ink: 31, 26, 23;                 /* --ink-deep als RGB fuer rgba() */
}
@media (min-width: 900px) { :root { --header-h: 5rem; } }

/* ---------- Reset und Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Sprungmarken landen sonst unter der klebenden Kopfzeile */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  /* clip statt hidden: hidden wuerde position: sticky in der Kopfzeile abschalten */
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--amber-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--ink); }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}
/* Seitenweit eine Groesse fuer Seitenueberschriften (Vorgabe 17.09.2026): wie der Shop-Kopf.
   Nur der Hero auf der Startseite und auf Unterseiten mit Hero bleibt grosser (.hero__title). */
h1 { font-size: clamp(2rem, 3vw, 3rem); line-height: 1.1; text-wrap: balance; }
h2 { font-size: var(--size-h2); }
/* Cormorant hat feine Haarstriche: unter 1,5 rem den Schnitt 600 nehmen, sonst franst sie aus */
h3 { font-size: var(--size-h3); font-weight: 600; line-height: 1.2; }
h4 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.3em; }
strong { font-weight: 600; }
hr { border: 0; border-top: var(--rule); margin: var(--space-8) 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
/* Ein Fokusring fuer alles. Amber-Text auf hell, Amber auf dunkel (siehe die Baender). */
:focus-visible { outline: 2px solid var(--amber-text); outline-offset: 3px; }
::selection { background: var(--amber-wash); color: var(--ink); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute; left: -999px; top: .5rem; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: .7rem 1.1rem; text-decoration: none;
  font-weight: 600; letter-spacing: .04em;
}
.skip-link:focus { left: .5rem; outline-color: var(--amber); }

.container { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.container--narrow { width: min(100% - 2 * var(--gutter), var(--wrap-narrow)); }

/* ---------- Augenbraue ----------
   Versalien mit Sperrsatz ueber einer Serifenzeile. Sie traegt Rubriken,
   Kategorien und Beschriftungen; im Kopfbild und auf dunklen Baendern in Amber. */
.accent {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--size-eyebrow);
  line-height: 1.5;
  letter-spacing: var(--sperr);
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
}

/* ---------- Abschnittskopf ----------
   Augenbraue -> h2 (--space-3), h2 -> Einleitung (--space-4), Einleitung -> Raster (--space-12) */
.block__head { margin-bottom: var(--space-8); }
.block__head .accent + .block__title { margin-top: 0; }
/* Die Grenze haengt an der Ueberschrift selbst: ch rechnet dann mit der
   Cormorant-Groesse. Am Kasten drumherum gemessen (Fliesstext-ch) war sie
   so eng, dass eine h1 in vier Zeilen zerfiel. 30ch statt 22ch: bei 22
   brach "Antike Moebel und Raritaeten" auch auf breiten Bildschirmen um;
   text-wrap: balance (siehe h1-h4) verteilt einen echten Umbruch gleichmaessig. */
.block__title { margin-bottom: 0; max-width: min(100%, 30ch); }
.block__intro {
  max-width: var(--measure-lead);
  color: var(--ink-soft);
  font-size: 1.06em;
  margin: calc(var(--space-4) - var(--space-8)) 0 var(--space-12);
}

/* ---------- Fliesstext ---------- */
.prose { max-width: var(--measure); text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose a { font-weight: 500; }
.prose a:hover { text-decoration-color: var(--amber); }
/* Zwischenueberschriften im Text sind h2 oder h3 (Bedeutung), sehen aber
   kleiner aus als die Abschnittsueberschrift (Gestaltung). */
.prose h2 { font-size: var(--size-h3); font-weight: 600; margin: 1.8em 0 .5em; }
.prose h3 { font-size: 1.2rem; font-weight: 600; margin: 1.6em 0 .4em; }
.prose h4 { margin: 1.4em 0 .3em; }
.prose li { margin-bottom: .35em; }
.prose blockquote { margin: 1.5em 0; padding-left: var(--space-6); border-left: 3px solid var(--amber); font-family: var(--font-display); font-style: italic; font-size: 1.2em; }
.prose img { margin-block: 1.5em; }
.prose table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: var(--size-small); }
.prose th, .prose td { text-align: left; padding: .5rem .8rem; border-bottom: var(--rule); vertical-align: top; }
.prose .btn { margin-top: .5em; }
/* Der erste Absatz nach der Ueberschrift laeuft eine Stufe groesser, mit
   Akzentlinie links: so faengt der Text den Blick, ohne laut zu werden. */
.block--text .prose > p:first-child:not(:only-child) {
  font-family: var(--font-display);
  font-size: 1.35rem; line-height: 1.45;
  border-left: 3px solid var(--amber);
  padding-left: var(--space-6);
  margin-bottom: var(--space-6);
  hyphens: manual; -webkit-hyphens: manual;
}
.block--text-center .container { text-align: center; }
.block--text-center .block__head, .block--text-center .prose { margin-inline: auto; }
.block--text-center .prose > p:first-child { border-left: 0; padding-left: 0; }

/* ---------- Knoepfe ----------
   Versalien mit Sperrsatz, keine Rundung. Der Hauptknopf ist der einzige Ort,
   an dem Amber eine Flaeche bildet; die Schrift darauf ist Braunschwarz, weil
   Weiss auf Amber nur 2,41:1 erreicht. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 44px;
  padding: .9rem 1.8rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .84rem;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--amber); border-color: var(--amber); color: var(--ink); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--amber-hover); border-color: var(--amber-hover); color: var(--ink); }
/* Der leise Knopf: nur Schrift und ein Pfeil, der beim Zeigen nach rechts rueckt.
   Der Pfeil ist eine Maske, keine Schriftglyphe: U+2192 liegt nicht im
   latin-Block der Schrift und kaeme sonst aus der Ersatzschrift. */
.btn--ghost { padding-inline: .2rem; border-color: transparent; color: var(--amber-text); }
.btn--ghost::after {
  content: ""; width: 1.1em; height: 1.1em; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease-out);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: transparent; color: var(--ink); border-color: transparent;
  text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 6px;
}
.btn--ghost:hover::after, .btn--ghost:focus-visible::after { transform: translateX(4px); }
.btn--sm { padding: .55rem 1.1rem; font-size: .76rem; min-height: 36px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: inherit; }

/* ---------- Etiketten ---------- */
.badge, .product-card__badge {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-weight: 600; font-size: .7rem; line-height: 1;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .7rem;
  background: var(--paper); color: var(--ink);
  border: var(--rule);
}
.badge--new { background: var(--amber-wash); color: var(--amber-text); border-color: transparent; }
.badge--sold, .product-card__badge { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.badge--outline { background: transparent; color: var(--ink-soft); }

/* ---------- Kopfzeile ----------
   Klebt oben. Die Haarlinie erscheint erst beim Scrollen (Klasse is-stuck aus
   site.js), damit die Leiste ueber dem Kopfbild nicht wie ein Rahmen wirkt.
   Kein Amber als Flaeche: die einzige Farbe ist die Unterstreichung. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 247, 240, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast);
}
.site-header.is-stuck { border-bottom-color: var(--line); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--header-h);
}
.site-header__brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; color: var(--ink); }
/* Das Logo ist eine Pixeldatei mit @2x-Fassung. 150 px am Handy, 200 px am
   Rechner; die Hoehe folgt dem Seitenverhaeltnis (560 x 205). */
.site-header__logo { width: 150px; height: auto; }
.site-header__brand-text { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.1; }
/* Platzhalter fuer Suche und Warenkorb: der Platz bleibt frei, damit das Menue
   spaeter nicht springt. */
.site-header__tools { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.site-header__tools:empty { display: none; }

.site-nav { margin-left: auto; }
.site-nav__toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 11px;
  margin-right: -11px;                    /* die Striche sollen buendig mit dem Rand stehen */
  background: none; border: 0;
}
.site-nav__toggle span:not(.visually-hidden) {
  display: block; height: 1.5px; background: var(--ink);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast);
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobil: das Menue klappt unter die Leiste, volle Breite, scrollbar */
.site-nav__list {
  list-style: none; margin: 0;
  padding: var(--space-2) var(--gutter) var(--space-8);
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper);
  border-bottom: var(--rule);
  display: none; flex-direction: column;
  max-height: calc(100svh - var(--header-h));
  overflow-y: auto; overscroll-behavior: contain;
}
.site-nav__list.is-open { display: flex; }
.site-nav__item { position: relative; }
.site-nav__link, .site-nav__sublink {
  display: block; padding: .8rem 0;
  font-weight: 500; font-size: 1.05rem; letter-spacing: .02em;
  color: var(--ink); text-decoration: none;
  border-bottom: var(--rule);
}
.site-nav__link:hover, .site-nav__link:focus-visible,
.site-nav__sublink:hover, .site-nav__sublink:focus-visible { color: var(--amber-text); }
.site-nav__link[aria-current], .site-nav__sublink[aria-current="page"] { color: var(--amber-text); }
.site-nav__link:focus-visible, .site-nav__sublink:focus-visible { outline-offset: -2px; }
/* Am Handy steht das Untermenue offen; der Oeffner wird erst am Rechner gebraucht */
.site-nav__opener { display: none; }
.site-nav__sub { list-style: none; margin: 0 0 .5rem; padding: 0 0 0 var(--space-4); border-left: 2px solid var(--paper-deep); }
.site-nav__sublink { font-size: .98rem; border-bottom: 0; padding: .55rem 0; }

@media (min-width: 900px) {
  .site-header__logo { width: 200px; }
  .site-nav { margin-left: 0; }
  .site-nav__toggle { display: none; }
  .site-nav__list {
    display: flex; flex-direction: row; align-items: center; gap: 1.6rem;
    position: static; padding: 0; background: none; border: 0;
    max-height: none; overflow: visible;
  }
  .site-nav__link {
    padding: .5rem 0; border-bottom: 0;
    font-size: .95rem; white-space: nowrap;
    /* Die Linie ist immer da, nur unsichtbar: so springt beim Zeigen nichts */
    text-decoration: underline; text-decoration-thickness: 1px;
    text-decoration-color: transparent; text-underline-offset: 8px;
    transition: color var(--dur-fast), text-decoration-color var(--dur-fast);
  }
  .site-nav__link:hover, .site-nav__link:focus-visible, .site-nav__link[aria-current] { text-decoration-color: var(--amber); }
  .site-nav__link:focus-visible { outline-offset: 4px; }
  .site-nav__item--has-sub { display: flex; align-items: center; }
  /* Der Oeffner ist ein Knopf und bleibt mit der Tastatur erreichbar; ein Tipp
     auf dem Tablet oeffnet darueber das Untermenue (Klasse is-open, site.js). */
  .site-nav__opener {
    display: grid; place-items: center; width: 28px; height: 28px; margin-left: -.2rem;
    background: none; border: 0; color: var(--ink-soft); font-size: .8rem;
  }
  .site-nav__opener[aria-expanded="true"] span[aria-hidden] { display: inline-block; transform: rotate(180deg); }
  .site-nav__sub {
    position: absolute; top: 100%; left: 0; z-index: 20;
    min-width: 240px; margin: 0; padding: .4rem 0;
    background: var(--paper);
    border: var(--rule); border-top: 2px solid var(--amber);
    box-shadow: var(--shadow-float);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
  }
  .site-nav__item--has-sub:hover .site-nav__sub,
  .site-nav__item--has-sub:focus-within .site-nav__sub,
  .site-nav__item--has-sub.is-open .site-nav__sub { opacity: 1; visibility: visible; transform: none; }
  .site-nav__sublink { padding: .55rem 1.1rem; font-size: .95rem; white-space: nowrap; }
  .site-nav__sublink:hover, .site-nav__sublink:focus-visible { background: var(--paper-deep); }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .site-nav__list { gap: 1.1rem; }
  .site-nav__link { font-size: .9rem; }
}

/* ---------- Abschnitte ----------
   Jeder Baustein ist eine section.block. Baender (Ueber mich, Aufruf) laufen
   ueber volle Breite; zwischen zwei hellen Abschnitten liegt eine Haarlinie in
   Inhaltsbreite, damit die Seite eine Ordnung hat, ohne Kaesten zu brauchen. */
.block { position: relative; padding-block: var(--space-sec); }
.block > .container > :last-child { margin-bottom: 0; }
:is(.block--text, .block--products, .block--cards, .block--categories, .block--stats, .block--faq, .block--contact, .block--gallery, .block--instagram, .block--quote, .block--bloglist)
+ :is(.block--text, .block--products, .block--cards, .block--categories, .block--stats, .block--faq, .block--contact, .block--gallery, .block--instagram, .block--quote)::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100% - 2 * var(--gutter), var(--wrap));
  border-top: var(--rule);
}
/* Ein Trenner-Baustein ersetzt die automatische Linie */
.divider { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; border-top: var(--rule); }
.divider + .block::before { display: none; }

/* Baender */
.block--textimage { background: var(--paper-deep); }
.block--cta { background: var(--ink-deep); color: var(--paper); }
.block--cta :focus-visible { outline-color: var(--amber); }

/* ---------- Seitenkopf, Brotkrumen, Hinweise ----------
   Der Seitenkopf laeuft ueber die volle Inhaltsbreite; unter dem Titel eine
   kurze Amber-Linie als Akzent. */
.page-head { padding-top: var(--space-12); }
.page-head + .block { padding-top: var(--space-8); }
.page-head__title { margin-bottom: 0; max-width: none; }
.page-head__title::after { content: ""; display: block; width: 3rem; height: 3px; margin-top: var(--space-4); background: var(--amber); }
.page-head__intro { max-width: none; color: var(--ink-soft); font-size: 1.06em; margin: var(--space-4) 0 0; }
.breadcrumb { padding-top: var(--space-6); font-size: var(--size-small); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; color: var(--ink-soft); }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--amber-text); text-decoration: underline; }
.breadcrumb [aria-current] { color: var(--ink); }
.notice {
  margin: var(--space-8) 0 0; padding: var(--space-4) var(--space-6);
  background: var(--paper-deep); border: var(--rule); border-left: 3px solid var(--amber);
  max-width: var(--measure);
}
.notice--error { border-left-color: var(--error); color: var(--error); }

/* ---------- Kopfbild ----------
   Vollbild-Foto, Text links unten. Zwei Verlaeufe, nicht einer: der von unten
   allein reicht nicht, denn bei 30 Prozent Hoehe liegt er fast bei null, und
   genau dort steht die Augenbraue. Der zweite kommt von links, weil der Text
   immer links steht; rechts bleibt das Foto frei. Nur Abdunklung, kein
   Farbstich. Unten schliesst das Bild als harte Kante ab, darunter ein
   3-px-Band in Amber: die einzige Amber-Flaeche der Seite. */
.hero {
  display: flex; align-items: flex-end;
  min-height: calc(100svh - var(--header-h));
  padding-block: 0;
  background: var(--ink-deep); color: var(--paper);
  isolation: isolate;
  border-bottom: 3px solid var(--amber);
}
.hero--compact { min-height: min(56svh, 520px); }
.hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-focus, center); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  /* Am Handy steht der Text ueber die ganze Breite; der Verlauf von links
     traegt dort nichts, also uebernimmt der von unten die Arbeit. */
  background: linear-gradient(180deg,
    rgba(var(--hero-ink), .45) 0%, rgba(var(--hero-ink), .20) 30%,
    rgba(var(--hero-ink), .62) 72%, rgba(var(--hero-ink), .92) 100%);
}
@media (min-width: 768px) {
  .hero__media::after {
    background:
      linear-gradient(90deg, rgba(var(--hero-ink), .72) 0%, rgba(var(--hero-ink), .50) 32%,
                              rgba(var(--hero-ink), .16) 60%, rgba(var(--hero-ink), 0) 80%),
      linear-gradient(180deg, rgba(var(--hero-ink), .30) 0%, rgba(var(--hero-ink), .12) 30%,
                               rgba(var(--hero-ink), .50) 72%, rgba(var(--hero-ink), .88) 100%);
  }
}
.hero__inner { position: relative; padding-block: var(--space-12) clamp(2.5rem, 6vw, 5rem); }
.hero__inner > :last-child { margin-bottom: 0; }
/* Die Augenbraue ist klein und duenn, also das Erste, was auf einem unruhigen
   Foto verschwindet. Sie bekommt den kraeftigsten Schatten. */
.hero__accent { color: var(--amber); text-shadow: 0 1px 3px rgba(var(--hero-ink), .9), 0 2px 12px rgba(var(--hero-ink), .7); }
.hero__title {
  color: var(--paper); max-width: 16ch; font-size: var(--size-h1); line-height: 1.06;
  margin-bottom: var(--space-4);
  text-shadow: 0 2px 18px rgba(var(--hero-ink), .5);
}
.hero--compact .hero__title { max-width: 22ch; font-size: var(--size-h2); }
/* Zweite Zeile kursiv und leichter: "Antike Moebel" traegt, "fuer Ihr Zuhause." fliesst */
.hero__title-b { display: block; font-style: italic; font-weight: 400; }
.hero__sub {
  font-size: clamp(1rem, 1.7vw, 1.2rem); line-height: 1.55; max-width: 62ch; /* breiter seit 17.09.2026, der Text steht links neben freiem Foto */
  color: rgba(251, 247, 240, .94);
  text-shadow: 0 1px 3px rgba(var(--hero-ink), .8), 0 2px 14px rgba(var(--hero-ink), .6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
/* Auf dem Foto: Hauptknopf Amber, Zweitknopf umrandet in Pergament */
.hero__actions .btn--ghost { padding-inline: 1.8rem; border-color: var(--paper); color: var(--paper); text-decoration: none; }
.hero__actions .btn--ghost::after { display: none; }
.hero__actions .btn--ghost:hover, .hero__actions .btn--ghost:focus-visible { background: var(--paper); color: var(--ink); text-decoration: none; }
.hero :focus-visible { outline-color: var(--amber); }
@media (max-width: 419px) {
  .hero__actions .btn { width: 100%; }
}
@media (max-width: 767px) {
  .hero__inner { padding-block: var(--space-8) var(--space-12); }
  .hero__title { text-shadow: 0 2px 8px rgba(var(--hero-ink), .75), 0 4px 28px rgba(var(--hero-ink), .55); }
  .hero__sub { font-size: 1rem; text-shadow: 0 1px 5px rgba(var(--hero-ink), .9); }
}

/* ---------- Text + Bild (Ueber mich) ----------
   Band auf Pergament-dunkel. Ab 900 px zwei Spalten 5:7, Bild mit Amber-Sockel.
   Mobil steht das Bild oben, hoechstens 320 px breit, links ausgerichtet. */
.textimage { display: grid; gap: var(--space-8); align-items: center; }
.textimage__media { order: -1; max-width: 320px; }
.textimage__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-deep); }
/* Der Sockel: eine 3-px-Linie in Amber, genau so breit wie das Bild */
.textimage__media::after { content: ""; display: block; height: 3px; background: var(--amber); }
.textimage__text .block__head { margin-bottom: var(--space-6); }
.textimage__text .prose .btn { margin-top: var(--space-4); }
@media (min-width: 900px) {
  .textimage { grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 6vw, 5rem); }
  .textimage__media { order: 2; max-width: 440px; justify-self: end; width: 100%; }
  .textimage--image-left .textimage__media { order: -1; justify-self: start; }
}

/* ---------- Karten (Schwerpunkte, Blog) ----------
   Kein Rahmen, kein Schatten: das Bild ist der Rahmen. Karten ohne Bild
   bekommen oben eine Haarlinie, sonst haengen sie in der Luft. */
.cards { display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.card:not(:has(.card__media)) { border-top: var(--rule); padding-top: var(--space-6); }
.card__media { overflow: hidden; background: var(--paper-deep); }
.card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card__body { display: flex; flex-direction: column; flex: 1; padding-top: var(--space-4); }
.card__title { font-size: 1.45rem; font-weight: 600; margin-bottom: var(--space-2); }
.card__text { color: var(--ink-soft); margin-bottom: var(--space-4); text-wrap: pretty; }
.card__more {
  margin-top: auto;
  font-weight: 600; font-size: .84rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber-text);
}
.card__more span { display: inline-block; transition: transform var(--dur) var(--ease-out); }
.card--link:hover .card__title, .card--link:focus-visible .card__title { color: var(--amber-text); }
.card--link:hover .card__more span { transform: translateX(4px); }
.card__date { display: block; font-size: var(--size-eyebrow); font-weight: 600; letter-spacing: var(--sperr); text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--space-2); }
.cards--blog .card__media img { aspect-ratio: 16 / 10; }
.cards--blog .card__title { font-size: 1.35rem; }

/* ---------- Kategorie-Kacheln ----------
   Mit Foto: Text auf dem Bild, unten links, Verlauf von unten. Ohne Foto (die
   alten Kategorien haben keins): eine ruhige Kachel auf Pergament-dunkel mit
   Name und Stueckzahl. Beides ohne Rundung, ohne Schatten. */
.categories { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .categories { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .categories { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.category-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 9.5rem;
  padding: var(--space-6);
  background: var(--paper-deep);
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur), background-color var(--dur);
}
.category-card:hover, .category-card:focus-visible { border-bottom-color: var(--amber); background: var(--card); }
.category-card__name { font-size: clamp(1.35rem, 1.2rem + .6vw, 1.7rem); font-weight: 500; margin: 0; }
.category-card__count { display: block; margin-top: var(--space-2); font-size: var(--size-eyebrow); font-weight: 600; letter-spacing: var(--sperr); text-transform: uppercase; color: var(--ink-soft); }
.category-card:has(.category-card__media) { padding: 0; min-height: 0; color: var(--paper); border-bottom: 0; background: var(--ink-deep); }
.category-card__media { position: relative; overflow: hidden; }
.category-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.category-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--hero-ink), 0) 45%, rgba(var(--hero-ink), .78) 100%);
  transition: opacity var(--dur);
}
.category-card:has(.category-card__media) .category-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6); }
.category-card:has(.category-card__media) .category-card__name { color: var(--paper); }
.category-card:has(.category-card__media) .category-card__count { color: var(--amber); }
.category-card:has(.category-card__media):focus-visible { outline-color: var(--amber); }
@media (min-width: 600px) { .category-card__media img { aspect-ratio: 5 / 4; } }
/* Am Handy stehen acht Kacheln untereinander; flach halten, sonst wird die
   Liste laenger als der Rest der Seite. */
@media (max-width: 479px) { .category-card { min-height: 0; padding: var(--space-4) var(--space-6); } }

/* ---------- Produktkarte ----------
   Die wichtigste Komponente. Ohne Rahmen und ohne Schatten als Karte lesbar:
   das Bild ist der Rahmen, 4:5, damit Schraenke Luft haben. Der Preis ist
   Information, kein Verkaufsschild: gleiche Schrift, kein Fettdruck. */
.products { display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 420px) { .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-4); } }
@media (min-width: 900px) { .products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); } }
@media (min-width: 1200px) { .products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.product-card { display: block; color: var(--ink); text-decoration: none; }
.product-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-deep); }
.product-card__img { width: 100%; height: 100%; object-fit: cover; }
.product-card__badge { position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1; }
.product-card--sold .product-card__img { filter: saturate(.65) brightness(.96); }
.product-card__body { padding: var(--space-4) 0 0; }
.product-card__category {
  display: block;
  font-size: .72rem; font-weight: 600; letter-spacing: var(--sperr); text-transform: uppercase;
  color: var(--ink-soft);
}
.product-card__name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; line-height: 1.25;
  margin: var(--space-2) 0 0;
  /* Die alten Produktnamen sind lang: hoechstens zwei Zeilen. Kein
     padding-bottom: overflow: hidden schneidet am Polsterrand, und in das
     Polster ragte die Oberkante der dritten Zeile hinein. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-wrap: pretty;
  /* Die Amber-Linie laeuft beim Zeigen von links ein. Sie liegt im Hintergrund,
     weil ein ::after vom Zeilenbeschnitt abgeschnitten wuerde. */
  background: linear-gradient(var(--amber), var(--amber)) no-repeat left bottom / 0 1px;
  transition: color var(--dur-fast), background-size var(--dur) var(--ease-out);
}
.product-card__price { display: block; margin-top: var(--space-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.product-card--sold .product-card__price { color: var(--ink-soft); text-decoration: line-through; }
.product-card:hover .product-card__name, .product-card:focus-visible .product-card__name { color: var(--amber-text); background-size: 100% 1px; }
.product-card:focus-visible { outline-offset: 6px; }
@media (max-width: 599px) {
  .product-card__name { font-size: 1.15rem; }
  .product-card__category { font-size: .68rem; }
}
.products__empty { color: var(--ink-soft); max-width: var(--measure); }
.products__more { margin: var(--space-8) 0 0; }

/* ---------- Kennzahlen ----------
   Im Markup steht die Beschriftung (dt) vor dem Wert (dd); das Raster stellt
   den Wert nach oben, ohne die Reihenfolge fuer Vorlesehilfen zu aendern. */
.stats { display: grid; gap: var(--space-8) var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { display: grid; grid-template-rows: auto auto auto; align-content: start; border-top: var(--rule); padding-top: var(--space-4); }
.stat__value {
  grid-row: 1; margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.4rem); line-height: 1.05; letter-spacing: -.01em;
  text-wrap: balance;
}
/* Wortwerte bleiben ruhig: gleiche Schrift, aber kaum groesser als der Fliesstext. */
.stat__value--wort { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 500; }
/* Alle Werte stehen auf derselben Grundlinie, egal ob Zahl oder Wort: feste Mindesthoehe
   in rem, Inhalt nach unten. So liegen Beschriftung und Notiz in jeder Spalte gleich hoch. */
.stat__value { min-height: 2.75rem; display: flex; align-items: flex-end; }
.stat__label { grid-row: 2; margin-top: var(--space-2); font-size: var(--size-eyebrow); font-weight: 600; letter-spacing: var(--sperr); text-transform: uppercase; color: var(--ink-soft); }
.stat__note { grid-row: 3; margin: var(--space-1) 0 0; font-size: var(--size-small); color: var(--ink-soft); }
/* Am Handy teilen sich zwei Kennzahlen 350 px. Ein Wort wie "Deutschlandweit"
   lief in 2 rem ueber die Nachbarspalte; kleiner setzen und im Notfall trennen. */
@media (max-width: 599px) {
  .stat { min-width: 0; }
  .stat__value { font-size: clamp(1.5rem, 6.5vw, 2rem); overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
}

/* ---------- Zitat ---------- */
.quote { margin: 0; display: grid; gap: var(--space-6); }
.quote__image img { width: 160px; aspect-ratio: 1; object-fit: cover; }
.quote__text {
  margin: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem); line-height: 1.4;
  quotes: "\201E" "\201C";
}
.quote__text p { margin: 0; }
.quote__text p::before { content: open-quote; }
.quote__text p::after { content: close-quote; }
.quote figcaption { font-size: var(--size-eyebrow); font-weight: 600; letter-spacing: var(--sperr); text-transform: uppercase; color: var(--ink-soft); }
.quote__role { font-weight: 400; }
.quote__role::before { content: "· "; }

/* ---------- FAQ ----------
   details/summary ohne Kaesten: Haarlinien zwischen den Eintraegen, die
   Amber-Linie erscheint nur am geoeffneten Eintrag. Das Plus besteht aus zwei
   Strichen und dreht sich beim Oeffnen zum Minus. */
.faq { border-bottom: var(--rule); }
.faq__item { border-top: var(--rule); transition: border-color var(--dur); }
.faq__item[open] { border-top-color: var(--amber); }
.faq__question {
  position: relative; cursor: pointer; list-style: none;
  padding: var(--space-4) var(--space-12) var(--space-4) 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.3;
  transition: color var(--dur-fast);
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::before, .faq__question::after {
  content: ""; position: absolute; right: .5rem; top: 50%;
  width: 14px; height: 1.5px; margin-top: -1px;
  background: var(--amber-text);
  transition: transform var(--dur) var(--ease-out);
}
.faq__question::after { transform: rotate(90deg); }
.faq__item[open] .faq__question::after { transform: rotate(0); }
.faq__question:hover, .faq__question:focus-visible { color: var(--amber-text); }
.faq__question:focus-visible { outline-offset: 0; }
.faq__answer { color: var(--ink-soft); padding-bottom: var(--space-6); }
@media (max-width: 599px) { .faq__question { font-size: 1.1rem; } }

/* ---------- Zweispaltige Textseiten ----------
   Ein text- oder faq-Block mit layout "zweispaltig": Kopf ueber volle
   Breite, links der Text (hoechstens --measure), rechts eine Seitenspalte
   mit Kontaktkarte, Schritten oder einem Foto. Die Spalte klebt ab 900 px,
   aber nur, wenn das Fenster hoch genug ist, sie ganz zu zeigen; sonst
   scrollt sie mit. Unter 900 px rutscht sie unter den Text. */
.twocol { display: grid; gap: var(--space-12) var(--space-8); align-items: start; }
.twocol__main { min-width: 0; }
.twocol__main .prose { max-width: var(--measure); }
.twocol__main .faq { max-width: 46rem; }
.twocol__aside { display: grid; gap: var(--space-6); min-width: 0; align-self: start; }
@media (min-width: 900px) {
  .twocol { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); gap: clamp(2.5rem, 6vw, 6rem); }
}
@media (min-width: 900px) and (min-height: 800px) {
  .twocol__aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
@media (min-width: 1200px) { .twocol { grid-template-columns: minmax(0, 1fr) 26rem; } }
.block--zweispaltig .block__head { margin-bottom: var(--space-8); }

/* Karten in der Seitenspalte: Pergament-dunkel, oben eine Amber-Linie */
.ccard, .steps { padding: var(--space-6); background: var(--paper-deep); border-top: 2px solid var(--amber); }
.ccard .accent, .steps .accent { margin-bottom: var(--space-2); }
.ccard__title, .steps__title { font-size: 1.45rem; font-weight: 600; line-height: 1.2; margin-bottom: var(--space-4); max-width: none; }
.ccard__text { color: var(--ink-soft); margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.ccard__list { margin: 0 0 var(--space-6); border-top: var(--rule); }
.ccard__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-3); padding: .6rem 0; border-bottom: var(--rule); }
.ccard__label { font-size: var(--size-eyebrow); font-weight: 600; letter-spacing: var(--sperr); text-transform: uppercase; color: var(--ink-soft); padding-top: .2rem; }
.ccard__row dd { margin: 0; overflow-wrap: anywhere; }
.ccard__btn { width: 100%; }
.steps__list { list-style: none; margin: 0; padding: 0; counter-reset: schritt; display: grid; gap: var(--space-4); }
.steps__item { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-3); counter-increment: schritt; }
.steps__n { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1.5px solid var(--ink); border-radius: 50%; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1; }
.steps__n::before { content: counter(schritt); }
.steps__label { display: block; font-weight: 600; padding-top: .3rem; }
.steps__text { margin: .15rem 0 0; font-size: var(--size-small); color: var(--ink-soft); }
.aside__figure { margin: 0; }
.aside__figure img { width: 100%; max-height: 20rem; object-fit: cover; background: var(--paper-deep); }
.aside__caption { margin-top: var(--space-2); font-size: var(--size-small); color: var(--ink-soft); }
.block--contactcard .ccard { max-width: 34rem; }

/* ---------- Aufruf (dunkles Band) ---------- */
.cta .accent { color: var(--amber); }
.cta__title { color: var(--paper); max-width: 22ch; }
.cta__text { color: var(--ink-on-dark); font-size: 1.06em; max-width: var(--measure); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.cta .btn--ghost { color: var(--paper); }
.cta .btn--ghost:hover, .cta .btn--ghost:focus-visible { color: var(--amber); }
.cta .btn:not(.btn--primary):not(.btn--ghost) { border-color: var(--paper); color: var(--paper); }
.cta .btn:not(.btn--primary):not(.btn--ghost):hover { background: var(--paper); color: var(--ink); }

/* ---------- Kontakt und Formular ---------- */
.contact { display: grid; gap: var(--space-12); align-items: start; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; } }
.contact__info { border-bottom: var(--rule); }
.contact__row { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-4) 0; border-top: var(--rule); }
/* Die Symbole kommen als Emoji aus render.php. Bunt stoeren sie die ruhige
   Seite, deshalb entsaettigt; das Instagram-Zeichen ist ohnehin einfarbig. */
.contact__icon { flex-shrink: 0; width: 1.6rem; text-align: center; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); filter: grayscale(1); opacity: .75; }
.contact__icon svg { display: inline-block; vertical-align: -.3em; }
.contact__label { font-size: var(--size-eyebrow); font-weight: 600; letter-spacing: var(--sperr); text-transform: uppercase; color: var(--ink-soft); }
.contact__row a { overflow-wrap: anywhere; }
/* Foto unter den Kontaktzeilen (Option image am Block) */
.contact__info:has(.contact__figure) { border-bottom: 0; }
.contact__figure { margin: 0; padding-top: var(--space-6); border-top: var(--rule); }
.contact__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-deep); }

.form { display: grid; gap: var(--space-4); }
.form__field { display: grid; gap: var(--space-2); }
.form__label { font-size: var(--size-eyebrow); font-weight: 600; letter-spacing: var(--sperr); text-transform: uppercase; color: var(--ink-soft); }
.form__input, .form__textarea {
  width: 100%; padding: .8rem .9rem;
  background: var(--paper-deep); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.form__input { min-height: 48px; }
.form__textarea { resize: vertical; min-height: 9rem; }
.form__input:focus-visible, .form__textarea:focus-visible { border-color: var(--amber-text); background: var(--card); outline-offset: 2px; }
.form__input:user-invalid, .form__textarea:user-invalid { border-color: var(--error); }
.form__check { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--size-small); color: var(--ink-soft); }
.form__check input { width: 18px; height: 18px; margin: .2rem 0 0; flex-shrink: 0; accent-color: var(--amber-text); }
.form__check label { cursor: pointer; }
/* Honigtopf: kein display: none, sonst fuellen manche Bots das Feld nicht.
   Es steht weit ausserhalb des Bildes und ist fuer Vorlesehilfen versteckt. */
.form__honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__hint { margin: 0; font-size: .86rem; color: var(--ink-soft); }
.form__submit { justify-self: start; }
.form.is-sending .form__submit { opacity: .6; cursor: progress; }

/* ---------- Galerie ---------- */
.gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery__item { margin: 0; }
.gallery__btn { display: block; width: 100%; padding: 0; border: 0; background: var(--paper-deep); cursor: zoom-in; line-height: 0; overflow: hidden; }
.gallery__btn img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery__btn:focus-visible { outline-offset: 2px; }
.gallery__caption { margin-top: var(--space-2); font-size: var(--size-small); color: var(--ink-soft); line-height: 1.4; }

/* ---------- Instagram-Hinweis ----------
   Kopf (Icon, Ueberschrift, Text, Link) bleibt zentriert und schmal wie
   bisher. Das Raster der letzten 8 Beitraege (settings/instagram.json, von
   Hand im Admin gepflegt) laeuft darunter ueber die volle .container-Breite:
   4 Spalten ab 900 px, 2 darunter. Quadratische Kacheln, kein Radius, kein
   Schatten - die Bilder sind der Rahmen, wie bei der Produktkarte. */
.instagram__head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.instagram__icon { display: inline-flex; color: var(--amber-text); margin-bottom: var(--space-4); }
.instagram__icon svg { width: 32px; height: 32px; }
.instagram__head .block__head { margin-bottom: var(--space-4); max-width: none; }
.instagram__text { max-width: 52ch; color: var(--ink-soft); margin-bottom: var(--space-4); }

.instagram__grid {
  display: grid; gap: var(--space-1);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--space-8);
}
@media (min-width: 900px) { .instagram__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.instagram__post { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper-deep); }
.instagram__post-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.instagram__post-overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; padding: var(--space-3);
  background: linear-gradient(180deg, rgba(var(--hero-ink), 0) 45%, rgba(var(--hero-ink), .76) 100%);
  opacity: 0;
}
.instagram__post:hover .instagram__post-overlay, .instagram__post:focus-visible .instagram__post-overlay { opacity: 1; }
.instagram__post:focus-visible { outline-offset: 2px; }
.instagram__post-caption {
  color: var(--paper); font-size: var(--size-small); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.instagram__more { margin-top: var(--space-8); text-align: center; }

/* ---------- 404 und Shop-Pause ---------- */
.block--notfound, .block--shop-pause { padding-block: clamp(5rem, 12vh, 9rem); }
.block--notfound p, .block--shop-pause p { max-width: var(--measure); }
.block--notfound .btn, .block--shop-pause .btn { margin: var(--space-2) var(--space-3) 0 0; }

/* ---------- Blog ---------- */
.post__meta { color: var(--ink-soft); font-size: var(--size-small); margin-bottom: var(--space-4); }
.post__title { max-width: none; }
.post__cover { margin-block: var(--space-8); background: var(--paper-deep); }
.post__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.prose--post { font-size: 1.04em; }

/* ---------- Fusszeile ----------
   Braunschwarz, oben eine Amber-Linie mit 40 Prozent Deckkraft. Vier Spalten
   ab 700 px; die erste traegt den Namen und den Satz dazu. */
.site-footer {
  background: var(--ink-deep); color: var(--ink-on-dark);
  border-top: 1px solid rgba(224, 153, 0, .4);
  padding-block: var(--space-16) var(--space-8);
  font-size: .95rem;
}
.site-footer :focus-visible { outline-color: var(--amber); }
.site-footer__inner { display: grid; gap: var(--space-8); }
@media (min-width: 700px) { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8) var(--space-6); } }
.site-footer__col p { margin: 0; line-height: 2; }
.site-footer__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-body); font-weight: 600; font-size: .74rem; line-height: 1.5;
  letter-spacing: var(--sperr); text-transform: uppercase; color: var(--paper);
}
.site-footer__brand .site-footer__title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.6rem;
  letter-spacing: -.005em; text-transform: none; line-height: 1.15;
}
.site-footer__tagline { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: var(--ink-on-dark); line-height: 1.4 !important; max-width: 28ch; }
.site-footer a { color: var(--ink-on-dark); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--amber); }
.site-footer a[aria-current] { color: var(--amber); }
.site-footer a svg { display: inline-block; vertical-align: -.25em; margin-right: .2rem; }
.site-footer__note {
  margin: var(--space-12) auto 0; padding-top: var(--space-4);
  border-top: 1px solid var(--line-on-dark);
  font-size: .84rem; color: rgba(251, 247, 240, .5);
}
.site-footer__note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Vollbild-Galerie (Lightbox) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center;
  background: rgba(var(--hero-ink), .95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: clamp(.5rem, 3vw, 2.5rem);
}
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-height: 100%; }
.lightbox__img { max-width: 100%; max-height: 78svh; width: auto; height: auto; background: rgba(251, 247, 240, .05); }
.lightbox__caption { color: rgba(251, 247, 240, .92); text-align: center; max-width: 60ch; display: flex; flex-direction: column; gap: .25rem; font-size: var(--size-small); }
.lightbox__count { font-size: .78rem; letter-spacing: .1em; color: rgba(251, 247, 240, .5); }
.lightbox__close, .lightbox__nav {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  border: 1px solid rgba(251, 247, 240, .3);
  background: rgba(var(--hero-ink), .55);
  color: var(--paper);
  font-family: var(--font-body); line-height: 1;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(251, 247, 240, .18); border-color: var(--amber); }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline-color: var(--amber); }
.lightbox__close { top: clamp(.6rem, 2vw, 1.5rem); right: clamp(.6rem, 2vw, 1.5rem); width: 46px; height: 46px; font-size: 1.9rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2.2rem; }
.lightbox__nav--prev { left: clamp(.4rem, 2vw, 1.5rem); }
.lightbox__nav--next { right: clamp(.4rem, 2vw, 1.5rem); }
@media (max-width: 600px) {
  .lightbox__nav { width: 44px; height: 44px; font-size: 1.9rem; top: auto; bottom: 1rem; transform: none; }
  .lightbox__img { max-height: 70svh; }
}

/* ---------- Nach oben ----------
   Die einzige Pille der Seite. Erscheint nach einer Bildschirmhoehe (site.js). */
.to-top {
  position: fixed; right: clamp(1rem, 2.5vw, 1.8rem); bottom: clamp(1rem, 2.5vw, 1.8rem); z-index: 40;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: rgba(251, 247, 240, .9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink-soft);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur), color var(--dur-fast), border-color var(--dur-fast);
}
.to-top[hidden] { display: none; }
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top:hover, .to-top:focus-visible { color: var(--amber-text); border-color: var(--amber); background: var(--paper); }

/* ---------- Bewegung ----------
   Alles Sichtbare steckt in prefers-reduced-motion: no-preference. Wer im
   System weniger Bewegung eingestellt hat, bekommt die fertige Seite ohne
   einen einzigen Uebergang ausser Farbe. Die Startwerte (unsichtbar, leicht
   verschoben) greifen NUR mit der Klasse .js am html-Element und NUR an
   Elementen, denen site.js die Klasse .reveal gibt. Ohne JavaScript ist alles
   sofort da; ohne diese doppelte Sicherung bliebe die Seite leer, wenn das
   Skript nicht laedt. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  /* Kacheln einer Gruppe laufen versetzt ein; --i setzt das Skript je Kachel */
  .js .stagger { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .stagger.is-visible { opacity: 1; transform: none; }

  /* Kopfbild: langsamer Zoom, damit das Foto lebt; der Text laeuft gestaffelt ein */
  .js .hero__img { animation: heroZoom 16s var(--ease-out) both; }
  @keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
  .js .hero__inner > * { opacity: 0; transform: translateY(16px); animation: heroRein .8s var(--ease-out) forwards; animation-delay: calc(.1s + var(--d, 0) * .12s); }
  @keyframes heroRein { to { opacity: 1; transform: none; } }

  /* Bilder wachsen beim Zeigen leicht; ohne Anhebung, ohne Schatten */
  .product-card__img, .card__media img, .category-card__media img, .gallery__btn img { transition: transform var(--dur-slow) var(--ease-out); }
  .product-card:hover .product-card__img, .product-card:focus-visible .product-card__img { transform: scale(1.03); }
  .card--link:hover .card__media img { transform: scale(1.03); }
  .category-card:hover .category-card__media img, .category-card:focus-visible .category-card__media img { transform: scale(1.04); }
  .category-card:hover .category-card__media::after { opacity: .9; }
  .gallery__btn:hover img { transform: scale(1.04); }
  .instagram__post-overlay { transition: opacity var(--dur) var(--ease-out); }
  .lightbox { animation: lbRein .25s var(--ease-out); }
  @keyframes lbRein { from { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav__toggle span, .site-nav__sub, .btn--ghost::after, .card__more span, .faq__question::before, .faq__question::after { transition: none; }
}
/* Ohne JavaScript und bei reduzierter Bewegung ist alles sofort sichtbar. */
.no-js .reveal, .no-js .stagger { opacity: 1; transform: none; }

/* ---------- Druck ---------- */
@media print {
  .site-nav, .skip-link, .to-top, .lightbox, .hero__actions, .form, .site-footer__note, .instagram__link { display: none !important; }
  body { background: #fff; color: #000; }
  .site-header { position: static; background: none; border-bottom: 1px solid #000; }
  .hero { min-height: 0; border-bottom: 0; color: #000; }
  .hero__media { display: none; }
  .hero__title, .hero__sub, .hero__accent { color: #000; text-shadow: none; }
  .block { padding-block: 1.5rem; }
  .block--cta, .block--textimage { background: none; color: #000; }
  .cta__title, .cta__text { color: #000; }
  .site-footer { background: none; color: #000; border-top: 1px solid #000; }
  .site-footer__title, .site-footer a { color: #000; }
  a { color: #000; }
}

/* ==========================================================================
   Shop
   Liste, Produktseite, Warenkorb, Kasse. Gleiche Regeln wie oben: Haarlinien
   statt Kaesten, Radius 0, Amber nur im Hauptknopf und als Linie. Das Rot
   fuer Fehler ist --error, sonst nirgends.
   ========================================================================== */

/* ---------- Kopfzeile: Suche und Warenkorb ----------
   Am Handy stehen die Werkzeuge zwischen Logo und Menueknopf; ab 900 px
   rechts neben dem Menue. Der Zaehler ist ein kleiner Kreis in Braunschwarz. */
.site-header__tools { order: 1; margin-left: auto; }
.site-nav { order: 2; margin-left: 0; }
.cart-link {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; color: var(--ink); text-decoration: none;
  transition: color var(--dur-fast);
}
.cart-link:hover, .cart-link:focus-visible { color: var(--amber-text); }
.cart-link__count {
  position: absolute; top: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  font-size: .68rem; font-weight: 600; line-height: 1;
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius-pill);
}
@media (min-width: 900px) {
  .site-header__tools { order: 0; margin-left: 0; gap: var(--space-3); }
  .site-nav { order: 0; }
}

/* ---------- Shop-Kopf ----------
   Titel in einer Zeile ueber die volle Inhaltsbreite: keine Zeichengrenze,
   dafuer eine ruhigere Groesse als die grosse h1 (2 bis 3 rem statt bis 4,2).
   Der Einleitungstext darf 80 Zeichen laufen, breiter als Fliesstext (68),
   weil er nur zwei Zeilen hat. Gilt auch fuer die Suchergebnisseite. */
.shop-head .page-head__title { max-width: none; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.1; text-wrap: balance; }
.shop-head__lead { max-width: none; color: var(--ink-soft); font-size: 1.06em; margin: var(--space-4) 0 0; text-wrap: pretty; }
/* Kategoriebild (Heft 18): dasselbe Seitenverhaeltnis wie ein Blog-Titelbild (.post__cover). */
.shop-head__media { margin: var(--space-6) 0 0; background: var(--paper-deep); }
/* Kopfbild als flaches Band, nicht bildschirmhoch (Vorgabe 17.09.2026): feste, ruhige Hoehe. */
.shop-head__media img { width: 100%; height: clamp(180px, 26vw, 320px); object-fit: cover; display: block; }

/* ---------- Shop: Filterspalte links, Raster rechts ----------
   Muster 1stdibs und Lempertz: ab 1000 px eine schmale Spalte mit
   Kategorien und Verfuegbarkeit, daneben das Raster. Die Leiste mit
   Ergebniszahl und Sortierung liegt ueber beiden (volle Inhaltsbreite).
   Darunter: die Spalte als aufklappbarer Kasten (details) ueber dem
   Raster, zusammengeklappt. Das Template gibt den Filter zweimal aus;
   hier ist immer nur einer sichtbar. */
.shop { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.shop__filter--desk { display: none; }
.shop__main { min-width: 0; }
.shop .shop-toolbar { margin-bottom: 0; }

/* Der Filter am Handy: Zeile mit Plus wie im FAQ, Inhalt darunter */
.shop__filter--mobil { border-top: var(--rule); border-bottom: var(--rule); }
.shop__filter-summary {
  position: relative; cursor: pointer; list-style: none;
  display: flex; align-items: center; min-height: 48px;
  padding: var(--space-3) var(--space-12) var(--space-3) 0;
  font-weight: 600; font-size: .84rem; letter-spacing: .14em; text-transform: uppercase;
  transition: color var(--dur-fast);
}
.shop__filter-summary::-webkit-details-marker { display: none; }
.shop__filter-summary::before, .shop__filter-summary::after {
  content: ""; position: absolute; right: .5rem; top: 50%;
  width: 14px; height: 1.5px; margin-top: -1px;
  background: var(--amber-text);
  transition: transform var(--dur) var(--ease-out);
}
.shop__filter-summary::after { transform: rotate(90deg); }
.shop__filter--mobil[open] .shop__filter-summary::after { transform: rotate(0); }
.shop__filter-summary:hover, .shop__filter-summary:focus-visible { color: var(--amber-text); }
.shop__filter-summary:focus-visible { outline-offset: 0; }
.shop__filter-body { padding: var(--space-2) 0 var(--space-6); }

/* Die Listen: Augenbraue als Titel, Zahl rechts leise, aktiver Eintrag mit
   Amber-Haarlinie links. Amber allein waere kein Bedienmerkmal (2,25:1), darum
   wird der aktive Eintrag zusaetzlich fett. */
.shop__filter-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body); font-weight: 600; font-size: var(--size-eyebrow); line-height: 1.5;
  letter-spacing: var(--sperr); text-transform: uppercase; color: var(--ink-soft);
  max-width: none;
}
.shop__filter-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.shop__filter-list:last-child { margin-bottom: 0; }
.shop__filter-link {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  min-height: 44px; padding: .55rem var(--space-2) .55rem var(--space-3);
  border-left: 2px solid transparent;
  font-size: .95rem; line-height: 1.35; color: var(--ink); text-decoration: none;
  transition: color var(--dur-fast), border-color var(--dur-fast), background-color var(--dur-fast);
}
.shop__filter-link:hover, .shop__filter-link:focus-visible { color: var(--amber-text); background: var(--paper-deep); }
.shop__filter-link:focus-visible { outline-offset: -2px; }
.shop__filter-link[aria-current] { border-left-color: var(--amber); font-weight: 600; }
.shop__filter-n { font-size: .8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* 42 Kategorien untereinander waeren am Tablet ein langer Turm: zwei Spalten */
@media (min-width: 600px) and (max-width: 999px) {
  .shop__filter-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-8); }
  .shop__filter-body > * { grid-column: 1; }
  .shop__filter-body > .shop__filter-list:first-of-type { grid-column: 1 / -1; columns: 2; column-gap: var(--space-8); }
  .shop__filter-body > .shop__filter-list:first-of-type li { break-inside: avoid; }
}

@media (min-width: 1000px) {
  .shop { grid-template-columns: 16rem minmax(0, 1fr); column-gap: clamp(2rem, 3vw, 3rem); row-gap: var(--space-6); }
  .shop__filter--mobil { display: none; }
  /* Die Spalte klebt unter der Kopfzeile und scrollt in sich, wenn sie hoeher
     als das Fenster ist; der Rollbalken ist duenn und leise. */
  .shop__filter--desk {
    display: block; position: sticky; top: calc(var(--header-h) + var(--space-6));
    max-height: calc(100vh - var(--header-h) - var(--space-8));
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
    padding-right: var(--space-2);
  }
  .shop__filter--desk::-webkit-scrollbar { width: 6px; }
  .shop__filter--desk::-webkit-scrollbar-thumb { background: var(--line); }
  .shop__filter-link { min-height: 2.25rem; padding-block: .3rem; }
  /* Feste Plaetze: die Leiste oben ueber beide Spalten, darunter links der
     Filter, rechts das Raster. Ohne diese Angaben wuerde die Auto-Platzierung
     das Raster unter den Filter in Spalte 1 setzen. */
  .shop .shop-toolbar { grid-column: 1 / -1; grid-row: 1; }
  .shop__filter--desk { grid-column: 1; grid-row: 2; }
  .shop__main { grid-column: 2; grid-row: 2; }
  /* Rechts vom Filter bleibt weniger Platz: 3 Spalten ab 1000, 4 ab 1400 */
  .shop__main .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
  .shop__main .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Ergebniszeile und Sortierung: eine Zeile, am Handy untereinander */
.shop-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6);
  padding-bottom: var(--space-4); margin-bottom: var(--space-8);
  border-bottom: var(--rule);
}
.shop-toolbar__count { margin: 0; color: var(--ink-soft); font-size: var(--size-small); }
.shop-toolbar__sort { display: flex; align-items: center; gap: var(--space-3); }
.shop-toolbar__sort .form__label { margin: 0; }
/* Der Knopf ist fuer Besucher ohne JavaScript; site.js schaltet auf Auto-Absenden */
.js .shop-toolbar__sort.is-auto .shop-toolbar__go { display: none; }
.form__select {
  min-height: 44px; padding: .55rem 2.4rem .55rem .9rem;
  background: var(--paper-deep) no-repeat right .8rem center / 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232A2320' stroke-width='1.5'/%3E%3C/svg%3E");
  color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.form__select:focus-visible { border-color: var(--amber-text); background-color: var(--card); outline-offset: 2px; }

/* ---------- Blaetterung ---------- */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-12); padding-top: var(--space-8); border-top: var(--rule); }
.pagination__list { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.pagination__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 .8rem;
  font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--ink); text-decoration: none;
  border: 1px solid transparent;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.pagination__link:hover, .pagination__link:focus-visible { border-color: var(--ink); color: var(--ink); }
.pagination__link.is-current { border-color: var(--amber); color: var(--ink); }
.pagination__gap { display: inline-flex; align-items: center; padding: 0 .3rem; color: var(--ink-soft); }
.pagination__link--prev, .pagination__link--next { font-size: .84rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Etiketten des Shops ----------
   "Reserviert" umrandet in Braunschwarz, "Verkauft" gefuellt. */
.product-card__badge--reserved, .badge--reserved { background: var(--paper); color: var(--ink); border: 1px solid var(--ink); }
.product-card--reserved .product-card__price { color: var(--ink-soft); }

/* ---------- Produktseite ----------
   Die Galerie richtet sich nach der Hoehe des Fensters, nicht nach der
   Breite: --pg-h ist die Fensterhoehe minus Kopfzeile, Brotkrumen und Luft.
   Ab 900 px zwei Spalten 11:9. Links die Miniaturen als schmale Spalte
   (Muster 1stdibs), daneben das grosse Bild mit object-fit: contain auf
   Pergament-dunkel, damit ein Schrank ganz zu sehen ist. Die Kachelgroesse
   der Miniaturen rechnet sich aus --pg-h und der Bilderzahl --n (aus dem
   Template), 44 bis 72 px: neun Bilder passen so auch bei 1280 x 720 ohne
   Scrollen. Mobil steht das Bild oben (hoechstens 70 svh), die Miniaturen
   laufen darunter als Reihe, die man seitwaerts schiebt. */
.block--produkt { padding-top: var(--space-8); }
.produkt { display: grid; gap: var(--space-8); align-items: start; }
.pgallery {
  --pg-top: 6.5rem;                                             /* Brotkrumen 3 rem + Abschnittsabstand 2 rem + Luft 1.5 rem */
  --pg-h: max(24rem, calc(100svh - var(--header-h) - var(--pg-top)));
  --thumb: 4rem;
  min-width: 0;
}
/* Mobil folgt der Kasten dem Bild (Querbilder werden nicht in 4:5 gezwungen),
   hoechstens 70 svh hoch; darueber hinaus zeigt contain das Bild verkleinert. */
/* Kein eigener Grund im Rahmen: bei Fotos, die den Rahmen nicht fuellen (Querformat, Hochformat
   schmaler als 4:5), waere er als Streifen ueber und unter dem Bild zu sehen (Fund 17.09.2026). */
.pgallery__main { position: relative; display: block; overflow: hidden; background: transparent; cursor: zoom-in; }
.pgallery__main--leer { cursor: default; aspect-ratio: 4 / 5; background: var(--paper-deep); } /* nur der leere Platzhalter ohne Bild bleibt gefaerbt */
.pgallery__img { width: 100%; height: auto; max-height: 70svh; object-fit: contain; }
.pgallery__badge { position: absolute; top: var(--space-3); left: var(--space-3); }
.pgallery__thumbs {
  display: flex; gap: var(--space-2); margin-top: var(--space-2);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-1);
}
.pgallery__thumb { display: block; flex: 0 0 auto; width: var(--thumb); height: var(--thumb); overflow: hidden; background: var(--paper-deep); border-bottom: 2px solid transparent; transition: border-color var(--dur-fast), opacity var(--dur-fast); opacity: .8; }
.pgallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pgallery__thumb:hover, .pgallery__thumb:focus-visible, .pgallery__thumb[aria-current="true"] { opacity: 1; border-bottom-color: var(--amber); }
.pgallery__thumb:focus-visible { outline-offset: 1px; }
@media (min-width: 900px) {
  .produkt { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: clamp(2rem, 4vw, 4rem); }
  .pgallery {
    --thumb: clamp(2.75rem, calc((var(--pg-h) - (var(--n, 1) - 1) * var(--space-2)) / var(--n, 1)), 4.5rem);
    display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); height: var(--pg-h);
  }
  .pgallery:has(.pgallery__thumbs) { grid-template-columns: var(--thumb) minmax(0, 1fr); }
  .pgallery__main { height: var(--pg-h); }
  .pgallery__img { height: 100%; max-height: none; }
  .pgallery__thumbs { order: -1; flex-direction: column; margin: 0; padding: 0; height: var(--pg-h); overflow: hidden auto; }
}

/* Rechte Spalte: Titel, Preis, Status, Knopf, Teilen und Versand kompakt untereinander */
.produkt__info { min-width: 0; }
.produkt__kategorie { color: inherit; text-decoration: none; }
.versand__preis { display: block; }
.versand__note { display: block; font-size: var(--size-small); color: var(--ink-soft); }
.produkt__kategorie:hover { color: var(--amber-text); }
/* Titel eine Stufe kleiner, mehr Luft darunter; der Preis steht rechts (Vorgabe 17.09.2026) */
.produkt__title { font-size: clamp(1.4rem, 1.9vw, 1.85rem); line-height: 1.2; max-width: none; margin-bottom: var(--space-6); text-wrap: balance; }
/* Der Preis ist gross, aber nicht fett und nicht farbig: Information, kein Schild */
.produkt__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; text-align: right; gap: .4rem .8rem; margin: 0 0 var(--space-1); padding-top: var(--space-2); border-top: var(--rule); font-variant-numeric: tabular-nums; }
.produkt__price-now { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); line-height: 1.1; }
.produkt__price-now--anfrage { font-size: 1.3rem; color: var(--ink-soft); }
.produkt__price-old { color: var(--ink-soft); font-size: 1.1rem; }
.produkt__price-note { flex-basis: 100%; font-size: var(--size-small); color: var(--ink-soft); }
.produkt__status { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; margin: 0 0 var(--space-4); font-size: var(--size-small); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.produkt__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.produkt__status--reserved::before { background: transparent; border: 1.5px solid var(--ink); }
.produkt__status--sold::before { background: var(--ink); }
.produkt__kauf { margin-bottom: var(--space-4); display: flex; justify-content: flex-end; }
.produkt__kauf .btn { width: 100%; }
@media (min-width: 420px) { .produkt__kauf .btn { width: auto; min-width: 16rem; } }
.produkt__imkorb { margin: 0 0 var(--space-3); color: var(--ink-soft); }
.produkt__info .notice { margin: 0 0 var(--space-4); }
.produkt__share { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: var(--rule); }
.produkt__share-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: 0; background: none; border: 0; font-size: var(--size-small); font-weight: 500; color: var(--amber-text); text-decoration: none; cursor: pointer; }
.produkt__share-link:hover, .produkt__share-link:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 4px; }
.produkt__share-link.is-copied { color: var(--ink); }
.produkt__h2 { font-size: var(--size-h3); font-weight: 600; margin: 0 0 var(--space-4); max-width: none; }
/* Versand als Liste: Begriff links, Erklaerung rechts (produkt.php zerlegt den Text) */
.versand { margin: 0; border-top: var(--rule); font-size: var(--size-small); }
.versand__row { display: grid; gap: var(--space-1) var(--space-4); padding: .6rem 0; border-bottom: var(--rule); }
@media (min-width: 600px) { .versand__row { grid-template-columns: minmax(9rem, 2fr) 3fr; } }
.versand dt { font-weight: 600; color: var(--ink); }
.versand dd { margin: 0; color: var(--ink-soft); }
.produkt__versand-text { font-size: var(--size-small); color: var(--ink-soft); }
.produkt__versand-text p { margin-bottom: .8em; }
.produkt__versand-text strong { color: var(--ink); }

/* Unter dem Falz: Beschreibung 7/12, daneben Details und Hinweis als Karte 5/12 */
.produkt__unten { display: grid; gap: var(--space-8); align-items: start; margin-top: var(--space-12); padding-top: var(--space-8); border-top: var(--rule); }
@media (min-width: 900px) { .produkt__unten { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); } }
.produkt__text { min-width: 0; }
.produkt__text .prose { max-width: var(--measure); }
.produkt__seite { display: grid; gap: var(--space-6); padding: var(--space-6); background: var(--paper-deep); border-top: 2px solid var(--amber); min-width: 0; }
.details { margin: 0; border-top: var(--rule); }
.details__row { display: grid; grid-template-columns: minmax(7rem, 1fr) 2fr; gap: var(--space-4); padding: .65rem 0; border-bottom: var(--rule); }
.details dt { font-size: var(--size-eyebrow); font-weight: 600; letter-spacing: var(--sperr); text-transform: uppercase; color: var(--ink-soft); padding-top: .2rem; }
.details dd { margin: 0; }
.produkt__seite .notice { margin: 0; max-width: none; background: var(--card); font-size: var(--size-small); }
.produkt__seite .produkt__h2 { margin-bottom: var(--space-3); }

/* Anfrageformular unter dem Produkt: Text links, Formular rechts */
.anfrage { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) { .anfrage { grid-template-columns: 5fr 7fr; gap: var(--space-12); } }
.anfrage__text .block__head { margin-bottom: var(--space-4); }
.anfrage__text .block__intro { margin: var(--space-4) 0 0; }
/* Felder einer Reihe gleich hoch: ein Hinweis unter einem Feld darf das Nachbarfeld
   nicht in die Hoehe ziehen (Fund 17.09.2026, Kasse). */
.form__row { display: grid; gap: var(--space-4); align-items: start; }
.form__field { align-content: start; }
.form__input { height: 48px; }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } .form__row--plz { grid-template-columns: 8rem 1fr; } }
.form__error { margin: 0; font-size: var(--size-small); color: var(--error); }
.form__input[aria-invalid="true"], .form__textarea[aria-invalid="true"] { border-color: var(--error); }
.form__field .form__hint { margin-top: -.15rem; }

/* ---------- Warenkorb ---------- */
.cart { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) { .cart { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-12); } }
.cart__notice { margin: 0 0 var(--space-8); }
.cart__list { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.cart__item {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr); grid-template-areas: "media body" "media price" "media remove";
  gap: var(--space-1) var(--space-4); align-items: start;
  padding: var(--space-4) 0; border-bottom: var(--rule);
}
@media (min-width: 600px) {
  .cart__item { grid-template-columns: 6rem minmax(0, 1fr) auto auto; grid-template-areas: "media body price remove"; align-items: center; gap: var(--space-4) var(--space-6); }
}
.cart__media { grid-area: media; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-deep); }
.cart__media img { width: 100%; height: 100%; object-fit: cover; }
.cart__body { grid-area: body; display: grid; gap: .2rem; }
.cart__name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; color: var(--ink); text-decoration: none; }
.cart__name:hover, .cart__name:focus-visible { color: var(--amber-text); }
.cart__warn { font-size: var(--size-small); color: var(--error); }
.cart__price { grid-area: price; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart__remove { grid-area: remove; }
.cart__summary { padding: var(--space-6); background: var(--paper-deep); display: grid; gap: var(--space-4); }
.cart__summary-title { font-size: 1.35rem; font-weight: 600; margin: 0; }
.cart__totals { margin: 0; display: grid; gap: .5rem; }
.cart__totals > div { display: flex; justify-content: space-between; gap: var(--space-4); align-items: baseline; }
.cart__totals dt { color: var(--ink-soft); }
.cart__totals dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.cart__totals-note { font-size: var(--size-small); font-weight: 400; color: var(--ink-soft); }
.cart__totals-sum { padding-top: .5rem; border-top: var(--rule); }
.cart__totals-sum dd { font-size: 1.25rem; }
.cart__summary .btn { width: 100%; }
.cart__summary .form__hint { margin: 0; }

/* ---------- Kasse ---------- */
.kasse { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 900px) { .kasse { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-12); } .kasse__summary { position: sticky; top: calc(var(--header-h) + 1rem); } }
.kasse__form { display: grid; gap: var(--space-8); }
.kasse__fieldset { margin: 0; padding: 0; border: 0; border-top: var(--rule); padding-top: var(--space-4); display: grid; gap: var(--space-4); min-width: 0; }
.kasse__legend { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; padding: 0 0 var(--space-2); }
.form__field--short { max-width: 14rem; }
.kasse__optionen { display: grid; gap: var(--space-2); }
.kasse__option {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: start;
  padding: var(--space-3) var(--space-4);
  background: var(--paper-deep); border: 1px solid transparent; cursor: pointer;
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.kasse__option:hover { border-color: var(--line); }
.kasse__option:has(input:checked) { border-color: var(--ink); background: var(--card); }
.kasse__option:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.kasse__option input { width: 18px; height: 18px; margin: .25rem 0 0; accent-color: var(--amber-text); }
.kasse__option-text { display: grid; gap: .1rem; }
.kasse__option-label { font-weight: 500; }
.kasse__option-note { font-size: var(--size-small); color: var(--ink-soft); }
.kasse__option-price { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kasse__checks { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--rule); }
.kasse__summary { padding: var(--space-6); background: var(--paper-deep); display: grid; gap: var(--space-4); }
.kasse__summary .btn { width: 100%; }
.kasse__submit { font-size: .9rem; }
.kasse__items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.kasse__item { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.kasse__item-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper); }
.kasse__item-media img { width: 100%; height: 100%; object-fit: cover; }
.kasse__item-name { font-size: var(--size-small); line-height: 1.35; color: var(--ink); }
.kasse__item-price { font-size: var(--size-small); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Danke-Seite und Bestellstand ---------- */
.danke { display: grid; gap: var(--space-6); }
.danke .kasse__items { max-width: 40rem; }
.danke .cart__totals { max-width: 40rem; }
.danke .produkt__h2 { margin-bottom: 0; }
.danke__bank { margin: 0; display: grid; gap: .3rem; }
.danke__bank > div { display: grid; grid-template-columns: 8rem 1fr; gap: var(--space-4); }
.danke__bank dt { color: var(--ink-soft); }
.danke__bank dd { margin: 0; font-variant-numeric: tabular-nums; }
.konto__form { margin-top: var(--space-8); padding-top: var(--space-8); border-top: var(--rule); }
.konto__status { font-size: 1.1em; }