/* ==========================================================================
   VERBENA — Blumen & Pflanzen, Hannover
   Gestaltungsdemonstration. Nachbau eines Präsentationssatzes als Website.

   Aufbau dieser Datei
   1  Grundlagen (Farben, Maße, Reset)
   2  Schrift, Überschriften, Bausteine
   3  Kopf und Navigation
   4  Startseite in der Reihenfolge der Abschnitte
   5  Katalog, Produkt, Warenkorb
   6  Rechtsseiten, 404, Fuß
   7  Bewegung und Rückfallebenen

   Die Werte in Klammern sind gerechnete Kontrastverhältnisse gegen den
   jeweiligen Grund, nicht geschätzte.
   ========================================================================== */

/* --- 1  Grundlagen ------------------------------------------------------ */

:root {
  --schrift-h: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --schrift-t: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --schrift-k: "Pinyon Script", "Snell Roundhand", cursive;

  /* helle Flächen */
  --papier: #fdfbf8;
  --creme: #f7f4f0;
  --rosenlicht: #f9eeec;   /* der große Kreis im Kopfbild, sehr blass */
  --weiss: #fff;

  /* dunkle Flächen */
  --tanne: #222a26;
  --tanne-tief: #1a201d;
  --tanne-hoch: #2b332e;

  /* Schriftfarben, hell */
  --tinte: #1e2220;        /* 15,1:1 auf Creme */
  --tinte-weich: #5c635d;  /*  5,6:1 auf Creme */
  --wein: #8c2e3e;         /*  6,3:1 auf Creme, 5,3:1 auf Rosenlicht */

  /* Schriftfarben, dunkel */
  --licht: #f4f1ec;        /* 13,6:1 auf Tanne */
  --licht-weich: #b7beb6;  /*  7,4:1 auf Tanne */
  --rose: #e3a7ae;         /*  6,5:1 auf Tanne */

  /* Linien */
  --linie: rgba(30, 34, 32, .14);
  --linie-stark: rgba(140, 46, 62, .34);
  --linie-hell: rgba(244, 241, 236, .2);
  --linie-hell-stark: rgba(244, 241, 236, .42);

  /* Maße im Achterrhythmus */
  --s1: .5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s5: 3rem;
  --s6: 4rem;
  --s7: 6rem;
  --s8: clamp(4rem, 9vw, 8.5rem);
  --bahn: 1240px;
  --rand: clamp(1.15rem, 5vw, 4rem);
  --kopfhoehe: 4.5rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopfhoehe) + 1rem);
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: var(--schrift-t);
  font-size: clamp(.95rem, .4vw + .88rem, 1.02rem);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;         /* die Tafeln ragen absichtlich über den Rand */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--wein);
  outline-offset: 3px;
  border-radius: 2px;
}
.dunkel a:focus-visible, .dunkel button:focus-visible,
.dunkel-seite a:focus-visible, .dunkel-seite button:focus-visible {
  outline-color: var(--rose);
}

.bahn { width: min(100% - 2 * var(--rand), var(--bahn)); margin-inline: auto; }
.bahn-schmal { width: min(100% - 2 * var(--rand), 720px); }

.nur-vorlesen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.sprung {
  position: absolute; top: -100px; left: var(--s2); z-index: 60;
  background: var(--tanne); color: var(--licht);
  padding: .7rem 1.1rem; font-size: .85rem; letter-spacing: .04em;
}
.sprung:focus { top: .6rem; }

/* --- 2  Schrift, Überschriften, Bausteine ------------------------------- */

.hero-titel, .h-paar, .gross, .galerie-titel, .produkt-name,
.fehler-ziffer, .zahl-wert, .kat-name {
  font-family: var(--schrift-h);
  font-weight: 400;
  font-optical-sizing: auto;
}

/* Das Erkennungszeichen der Vorlage: eine Zeile Versalien in der Didone,
   darunter nach rechts versetzt ein Wort in Schreibschrift. */
.h-paar {
  position: relative;
  margin: 0 0 var(--s4);
  font-size: clamp(2.1rem, 6.2vw, 4.3rem);
  line-height: .96;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.h-paar .h-zeile { display: block; }
.h-schreib {
  display: block;
  font-family: var(--schrift-k);
  font-size: clamp(1.5rem, 3.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wein);
  margin-top: -.35em;
  margin-left: clamp(3rem, 22vw, 13rem);
}
.dunkel .h-schreib, .dunkel-seite .h-schreib { color: var(--rose); }
.h-rechts { text-align: right; }
.h-rechts .h-schreib { margin-left: 0; margin-right: clamp(.5rem, 6vw, 4rem); }

.gross {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: .02em;
  margin: 0 0 var(--s3);
}
.mittel {
  font-family: var(--schrift-t);
  font-size: clamp(1.02rem, .5vw + .92rem, 1.2rem);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
  margin: var(--s4) 0 var(--s2);
}
.klein-titel {
  font-family: var(--schrift-t);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tinte-weich);
  margin: var(--s4) 0 var(--s2);
}
.dunkel .klein-titel, .dunkel-seite .klein-titel { color: var(--licht-weich); }

.fliess { margin: 0 0 var(--s3); max-width: 62ch; color: var(--tinte-weich); }
.dunkel .fliess, .dunkel-seite .fliess { color: var(--licht-weich); }

.vorlauf {
  margin: 0 0 var(--s3);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--wein);
}

/* Der Ellipsenknopf der Vorlage: eine feine Linie als liegendes Oval. */
.knopf-oval {
  display: inline-block;
  padding: 1.05rem 2.6rem;
  border: 1px solid var(--wein);
  border-radius: 50%;
  background: transparent;
  color: var(--wein);
  font-family: var(--schrift-t);
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .35s, color .35s, border-color .35s;
}
.knopf-oval:hover, .knopf-oval:focus-visible {
  background: var(--wein); color: var(--papier);
}
.dunkel .knopf-oval, .dunkel-seite .knopf-oval {
  border-color: var(--rose); color: var(--rose);
}
.dunkel .knopf-oval:hover, .dunkel-seite .knopf-oval:hover,
.dunkel .knopf-oval:focus-visible, .dunkel-seite .knopf-oval:focus-visible {
  background: var(--rose); color: var(--tanne-tief);
}

.knopf-voll {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--tanne); color: var(--licht);
  padding: .95rem 2.2rem;
  font-family: var(--schrift-t); font-size: .78rem;
  letter-spacing: .16em; text-transform: uppercase;
  transition: background-color .3s;
}
.knopf-voll:hover, .knopf-voll:focus-visible { background: var(--wein); }

.knopf-klein {
  display: inline-block; cursor: pointer;
  background: transparent; color: inherit;
  border: 1px solid var(--linie-stark);
  padding: .5rem 1.05rem;
  font-family: var(--schrift-t); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .3s, color .3s, border-color .3s;
}
.dunkel-seite .knopf-klein { border-color: var(--linie-hell-stark); }
.knopf-klein:hover, .knopf-klein:focus-visible {
  background: var(--wein); border-color: var(--wein); color: var(--papier);
}
.knopf-klein[data-zustand="drin"] {
  background: var(--wein); border-color: var(--wein); color: var(--papier);
}

.textlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 400; letter-spacing: .18em;
  text-transform: uppercase; text-decoration: none;
  color: var(--tinte);
  border-bottom: 1px solid var(--linie-stark);
  padding-bottom: .35rem;
  transition: color .3s, border-color .3s;
}
.dunkel .textlink, .dunkel-seite .textlink {
  color: var(--licht); border-bottom-color: var(--linie-hell-stark);
}
.textlink:hover, .textlink:focus-visible { color: var(--wein); border-color: var(--wein); }
.dunkel .textlink:hover, .dunkel-seite .textlink:hover,
.dunkel .textlink:focus-visible, .dunkel-seite .textlink:focus-visible {
  color: var(--rose); border-color: var(--rose);
}
.pfeil { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; }
.textlink:hover .pfeil { transform: translate(2px, -2px); }
.pfeil { transition: transform .3s; }

/* Die botanischen Tafeln. Geliefert wird eine Zeichnung auf reinweissem Grund
   ohne Alphakanal; multiply rechnet das Weiss heraus. Das funktioniert nur auf
   hellem Grund, deshalb liegt keine Tafel auf einer dunklen Fläche. */
.tafel {
  position: absolute;
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* --- 3  Kopf und Navigation --------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--creme) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linie);
}
.dunkel-seite .kopf {
  background: color-mix(in srgb, var(--tanne) 90%, transparent);
  border-bottom-color: var(--linie-hell);
  color: var(--licht);
}
.kopf-bahn {
  width: min(100% - 2 * var(--rand), var(--bahn));
  margin-inline: auto;
  min-height: var(--kopfhoehe);
  display: flex; align-items: center; gap: var(--s2);
}

.marke {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none; color: inherit; margin-right: auto;
}
.marke-zeichen { width: 1.35rem; height: auto; color: var(--wein); flex: none; }
.dunkel-seite .marke-zeichen, .dunkel .marke-zeichen { color: var(--rose); }
.marke-wort {
  font-family: var(--schrift-h);
  font-size: 1.32rem; font-weight: 400; letter-spacing: .06em;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.4rem); }
.nav-liste, .nav-rechts { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-liste { gap: clamp(.9rem, 2.2vw, 2.1rem); }
.nav-rechts { gap: clamp(.9rem, 1.8vw, 1.6rem); }
.nav a {
  text-decoration: none; font-size: .8rem; letter-spacing: .05em;
  padding: .3rem 0; border-bottom: 1px solid transparent;
  transition: border-color .3s, color .3s;
}
.nav a:hover, .nav a:focus-visible { border-bottom-color: currentColor; }
.nav-kontakt { color: var(--wein); }
.dunkel-seite .nav-kontakt { color: var(--rose); }
.korb-link { display: inline-flex; align-items: center; gap: .4rem; }
.korb-link svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.3; }
.korb-zahl {
  display: inline-grid; place-items: center;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem;
  border-radius: 999px; background: var(--wein); color: var(--papier);
  font-size: .68rem; line-height: 1; letter-spacing: 0;
}
.dunkel-seite .korb-zahl { background: var(--rose); color: var(--tanne-tief); }

.burger { display: none; }

/* --- 4  Startseite ------------------------------------------------------ */

/* Kopfbild: die Überschrift steht in einem großen zartrosa Kreis, die Tafeln
   liegen an den Ecken und überschneiden ihn. */
.hero {
  position: relative;
  min-height: min(94svh, 900px);
  display: grid; place-items: center;
  padding: clamp(3rem, 9vh, 7rem) var(--rand) clamp(4rem, 11vh, 8rem);
  overflow: hidden;
  isolation: isolate;
  /* Der Grund muss hier ausdruecklich stehen: isolation schneidet den Blend
     vom Seitenhintergrund ab, und multiply gegen Nichts laesst das Weiss der
     Tafeln als Kasten stehen. */
  background: var(--creme);
}
.hero-kreis {
  position: absolute; z-index: 0;
  width: min(78vw, 640px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%,
              var(--rosenlicht) 0%, var(--rosenlicht) 58%,
              color-mix(in srgb, var(--rosenlicht) 45%, var(--creme)) 100%);
  top: 50%; left: 50%; translate: -50% -52%;
}
.hero-mitte { position: relative; z-index: 2; text-align: center; max-width: 46rem; }
.hero-titel {
  margin: 0 0 clamp(1.6rem, 4vh, 2.8rem);
  font-size: clamp(2.5rem, 11.5vw, 6.6rem);
  line-height: .93;
  letter-spacing: .015em;
  text-transform: uppercase;
}
.hero-zeile { display: block; }
/* Der Ellipsenknopf steht allein in der Mitte des Kreises, der stille Link
   darunter. Nebeneinander zoege das Paar die Mitte nach links. */
.hero-knoepfe {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1rem, 2.2vh, 1.6rem);
}

.tafel-rose  { width: clamp(11rem, 30vw, 25rem); left: -3vw;  bottom: -8%; }
.tafel-gelb  { width: clamp(8rem, 22vw, 18rem);  right: -2vw; top: 6%; }
.tafel-zweig { width: clamp(5rem, 12vw, 10rem);  right: 20vw; top: 1%; }
.tafel-falter { width: clamp(4.5rem, 9vw, 8rem); right: 9vw;  bottom: 14%; }

/* Über uns: dunkle Fläche, kleines Bild mit Text links, breites Bild rechts */
.dunkel { background: var(--tanne); color: var(--licht); }
.dunkel-seite { background: var(--tanne); color: var(--licht); }

.ueber { padding: var(--s8) 0; }
.ueber-gitter {
  display: grid; gap: clamp(1.5rem, 3.5vw, 3.5rem);
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  align-items: end;
}
.ueber-klein { margin: 0 0 var(--s3); }
.ueber-klein img { width: 100%; }
.ueber-text { margin: 0 0 var(--s3); color: var(--licht-weich); font-size: .92rem; }
.ueber-breit { margin: 0; }
.ueber-breit img { width: 100%; }
.zahlen {
  display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 6vw, 5rem);
  margin-top: var(--s6); padding-top: var(--s4);
  border-top: 1px solid var(--linie-hell);
}
.zahl-wert { display: block; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1; }
.zahl-wort {
  display: block; margin-top: .5rem;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--licht-weich);
}

/* Ganzflächiges Bild mit Ziffer und Titel */
.galerie { position: relative; background: var(--tanne-tief); }
.galerie-bild {
  width: 100%; height: min(88svh, 820px); object-fit: cover;
  object-position: 50% 30%;
}
.galerie-schrift {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; gap: clamp(.5rem, 2vw, 1.5rem);
  padding: var(--s5) var(--rand);
  background: linear-gradient(to top, rgba(26, 32, 29, .74) 0%, rgba(26, 32, 29, .34) 55%, transparent 100%);
  color: #fff;
}
.galerie-nummer {
  font-family: var(--schrift-h);
  font-size: clamp(3.4rem, 11vw, 8rem); line-height: .8; opacity: .92;
}
.galerie-titel {
  margin: 0; font-size: clamp(1.5rem, 4.6vw, 3.2rem); line-height: 1.05;
  letter-spacing: .01em;
}
.galerie-unter {
  margin: .4rem 0 0; font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(244, 241, 236, .82);
}

/* Unsere Arbeiten: versetztes Gitter, der Kreisknopf liegt auf der breiten
   Kachel der dritten Reihe. */
.arbeiten { padding: var(--s8) 0; background: var(--papier); }
.arbeiten-kopf {
  display: grid; gap: var(--s2);
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  align-items: end; margin-bottom: var(--s5);
}
.arbeiten-kopf .h-paar { margin-bottom: 0; }
.arbeiten-kopf .fliess { margin: 0; font-size: .92rem; }

.werk-gitter {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: clamp(.7rem, 1.5vw, 1.4rem);
  align-items: start;
}
.werk { margin: 0; overflow: hidden; background: var(--creme); }
.werk img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s ease; }
.werk:hover img { scale: 1.04; }
.werk-a1 { grid-column: 1 / 6;  grid-row: 1; aspect-ratio: 1000 / 1150; }
.werk-a2 { grid-column: 6 / 13; grid-row: 1; aspect-ratio: 1400 / 1150; }
.werk-a3 { grid-column: 1 / 8;  grid-row: 2; aspect-ratio: 1400 / 1050; }
.werk-a4 { grid-column: 8 / 13; grid-row: 2; aspect-ratio: 1050 / 1050; }
.werk-a5 { grid-column: 1 / 13; grid-row: 3; aspect-ratio: 1900 / 1000; }
.werk-a6 { grid-column: 1 / 7;  grid-row: 4; aspect-ratio: 1200 / 950; }
.werk-a7 { grid-column: 7 / 13; grid-row: 4; aspect-ratio: 1200 / 950; }
.werk[data-spaeter="ja"]:not([hidden]) { animation: auftauchen .7s both; }

.kreisknopf {
  grid-column: 1 / 13; grid-row: 3; place-self: center; z-index: 3;
  width: clamp(7.5rem, 13vw, 11rem); aspect-ratio: 1;
  display: grid; place-items: center; text-align: center;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 50%; cursor: pointer;
  background: rgba(26, 32, 29, .62);
  color: #fff;
  font-family: var(--schrift-t); font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase;
  backdrop-filter: blur(2px);
  transition: background-color .35s, scale .35s;
}
.kreisknopf:hover, .kreisknopf:focus-visible { background: rgba(140, 46, 62, .78); scale: 1.05; }
.kreisknopf[disabled] { cursor: default; opacity: .55; }

/* Shop: dunkle Karte mit drei hohen Kacheln, jede mit einem Kreis darauf.
   Beim Überfahren blendet der Name aus und das Bild tritt hervor — genau die
   Bewegung, die die Vorlage in ihrer Anmerkung beschreibt. */
.shop { padding: var(--s8) 0; }
.shop-bahn {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: center;
}
.shop-karte { padding: clamp(1.5rem, 3.5vw, 3.2rem); }
.kat-reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.6rem, 1.4vw, 1.2rem); }
.kat {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 760 / 1060; text-decoration: none; color: var(--licht);
}
.kat-bild { width: 100%; height: 100%; object-fit: cover; transition: scale .8s ease; }
.kat:hover .kat-bild, .kat:focus-visible .kat-bild { scale: 1.06; }
.kat-kreis {
  position: absolute; inset: 0; margin: auto;
  width: min(72%, 8.5rem); aspect-ratio: 1;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%;
  /* Heller Teller mit dunkler Schrift statt dunklem Teller mit heller: zwei
     der gelieferten Kategoriebilder haben eine helle Kreisflaeche in der Mitte
     schon eingemalt. Ein dunkler Teller stand darauf als grauer Fleck, ein
     heller verschmilzt damit. Auf dem dunklen dritten Bild wirkt er ebenso.
     Kontrast der Schrift: 11,8:1. */
  background: rgba(249, 246, 242, .9);
  backdrop-filter: blur(1px);
  transition: opacity .45s, scale .45s;
}
.kat-name {
  font-size: clamp(.78rem, 1.3vw, 1.05rem); letter-spacing: .04em;
  color: var(--tinte);
}
.kat:hover .kat-kreis, .kat:focus-visible .kat-kreis { opacity: 0; scale: .82; }
.kat-text {
  position: absolute; inset: auto 0 0 0; padding: .8rem .9rem;
  font-size: .74rem; line-height: 1.45; color: #fff;
  background: linear-gradient(to top, rgba(26, 32, 29, .82), transparent);
  opacity: 0; translate: 0 .5rem; transition: opacity .45s, translate .45s;
}
.kat:hover .kat-text, .kat:focus-visible .kat-text { opacity: 1; translate: 0; }
.shop-neben .fliess { font-size: .95rem; }

/* Kontakt: links die große Tafel und die Daten, rechts das Formular mit
   Linien statt Kästen. */
.kontakt { padding: var(--s8) 0; background: var(--papier); }
.kontakt-bahn {
  display: grid; gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  align-items: center;
}
.kontakt-bild { position: relative; min-height: 22rem; }
.tafel-kontakt { position: relative; width: min(24rem, 100%); margin-inline: auto; }
.daten { margin: var(--s3) 0 0; display: grid; grid-template-columns: 6.5rem 1fr; gap: .55rem 1rem; }
.daten dt {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--wein); padding-top: .18rem;
}
.daten dd { margin: 0; font-size: .9rem; color: var(--tinte-weich); }
.daten a { text-decoration: none; border-bottom: 1px solid var(--linie-stark); }

.form { margin-top: var(--s3); }
.feld-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1rem, 3vw, 2.5rem); }
.feld { margin: 0 0 var(--s4); }
.feld label {
  display: block; font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tinte-weich); margin-bottom: .4rem;
}
.feld abbr { text-decoration: none; color: var(--wein); }
.feld input, .feld textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--linie-stark);
  background: transparent; color: var(--tinte);
  font-family: var(--schrift-t); font-size: .98rem; font-weight: 300;
  padding: .45rem 0; border-radius: 0;
}
.feld textarea { resize: vertical; }
.feld input:focus, .feld textarea:focus { outline: 0; border-bottom-color: var(--wein); }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 0; }
.form-hinweis, .form-danke { font-size: .78rem; color: var(--tinte-weich); margin: var(--s2) 0 0; }
.dunkel-seite .form-hinweis, .dunkel-seite .form-danke { color: var(--licht-weich); }
.form-danke { color: var(--wein); }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-bottom-color: var(--wein); border-bottom-width: 2px; }

/* --- 5  Katalog, Produkt, Warenkorb ------------------------------------- */

.krumen { margin: var(--s4) 0 var(--s5); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.krumen ol { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; }
.krumen li + li::before { content: "/"; margin-right: .55rem; opacity: .5; }
.krumen a { text-decoration: none; opacity: .78; }
.krumen a:hover { opacity: 1; }
.krumen [aria-current] { color: var(--wein); }
.dunkel-seite .krumen [aria-current] { color: var(--rose); }

.katalog, .produkt, .korb { padding-bottom: var(--s8); }
.katalog-kopf { text-align: center; margin-bottom: var(--s4); }
.katalog-kopf .h-paar { text-align: center; }
.katalog-kopf .h-schreib { margin-left: clamp(4rem, 18vw, 9rem); margin-top: -.28em; }
.katalog-kopf .fliess { margin-inline: auto; text-align: center; }

.reiter-reihe {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(.4rem, 1.5vw, 1.4rem); margin-bottom: var(--s5);
}
.reiter {
  background: none; border: 0; cursor: pointer; color: inherit;
  font-family: var(--schrift-t); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; padding: .45rem .2rem;
  border-bottom: 1px solid transparent; opacity: .7;
  transition: opacity .3s, border-color .3s, color .3s;
}
.reiter:hover { opacity: 1; }
.reiter[aria-pressed="true"] { opacity: 1; color: var(--rose); border-bottom-color: var(--rose); }

.ware-gitter {
  display: grid; gap: clamp(1rem, 2.2vw, 2rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ware { display: flex; flex-direction: column; background: var(--tanne-hoch); }
.ware-bild { display: block; overflow: hidden; }
.ware-bild img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: scale .8s ease; }
.ware-bild:hover img, .ware-bild:focus-visible img { scale: 1.05; }
.ware-fuss { padding: clamp(.9rem, 1.6vw, 1.3rem); display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.ware-name { font-family: var(--schrift-h); font-size: 1.32rem; font-weight: 400; margin: 0; letter-spacing: .01em; }
.ware-name a { text-decoration: none; }
.ware-name a:hover { color: var(--rose); }
.ware-kurz { margin: 0; font-size: .82rem; color: var(--licht-weich); }
.ware-preis { margin: .2rem 0 .6rem; font-family: var(--schrift-h); font-size: 1.1rem; }
.ware-fuss .knopf-klein { align-self: start; margin-top: auto; }
.ware[hidden] { display: none; }
.leer-hinweis { text-align: center; color: var(--licht-weich); }

.produkt-gitter {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}
.produkt-bild { margin: 0; background: var(--tanne-hoch); }
.produkt-bild img { width: 100%; }
.produkt-name { margin: 0; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.02; }
.produkt-zusatz { margin: .3rem 0 0; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rose); }
.produkt-preis { margin: var(--s2) 0 var(--s3); font-family: var(--schrift-h); font-size: 1.6rem; }
.haken { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.haken li { position: relative; padding-left: 1.4rem; margin-bottom: .5rem; font-size: .88rem; color: var(--licht-weich); }
.haken li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .55rem; height: 1px; background: var(--rose);
}
.weiter { margin-top: var(--s8); border-top: 1px solid var(--linie-hell); padding-top: var(--s4); }
.weiter-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.8rem, 2vw, 1.6rem); }
.weiter-kachel { display: block; width: clamp(6rem, 14vw, 9rem); text-decoration: none; }
.weiter-kachel img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.weiter-kachel span { display: block; margin-top: .5rem; font-size: .74rem; letter-spacing: .1em; color: var(--licht-weich); }
.weiter-kachel:hover span { color: var(--rose); }
.weiter-alle {
  display: inline-flex; align-items: center; gap: .5rem; margin-left: auto;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--rose);
}

.seite-korb { background: var(--papier); }
.korb .h-paar { text-align: center; }
.korb .h-schreib { margin-left: clamp(4rem, 20vw, 11rem); }
.korb-tafel { width: 100%; border-collapse: collapse; margin-bottom: var(--s5); }
.korb-tafel thead th {
  font-size: .68rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinte-weich); text-align: left; padding: 0 .8rem .8rem;
  border-bottom: 1px solid var(--linie);
}
.korb-tafel .rechts, .korb-tafel td.korb-preis-zelle, .korb-tafel td.korb-weg { text-align: right; }
.korb-tafel tbody tr { background: var(--rosenlicht); border-bottom: 6px solid var(--papier); }
.korb-tafel td { padding: .8rem; vertical-align: middle; font-size: .9rem; }
.korb-bild { width: 5.5rem; padding: 0 !important; }
.korb-bild img { width: 5.5rem; height: 5.5rem; object-fit: cover; }
.korb-name { font-family: var(--schrift-h); font-size: 1.24rem; letter-spacing: .02em; }
.korb-name span { display: block; font-family: var(--schrift-t); font-size: .74rem; letter-spacing: .1em; color: var(--tinte-weich); }
.stufe { display: inline-flex; align-items: center; gap: .2rem; }
.stufe button {
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  border: 1px solid var(--linie-stark); background: transparent; color: var(--wein);
  cursor: pointer; font-size: 1rem; line-height: 1; border-radius: 50%;
}
.stufe button:hover { background: var(--wein); color: var(--papier); }
.stufe output { min-width: 1.6rem; text-align: center; font-size: .95rem; }
.korb-preis { font-family: var(--schrift-h); font-size: 1.1rem; white-space: nowrap; }
.weg {
  background: none; border: 0; cursor: pointer; color: var(--tinte-weich); padding: .3rem;
}
.weg svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
.weg:hover { color: var(--wein); }

.summe { max-width: 26rem; margin-left: auto; }
.summe dl { margin: 0; }
.summe-zeile { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--linie); }
.summe-zeile dt { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-weich); }
.summe-fein { display: block; letter-spacing: 0; text-transform: none; font-size: .74rem; opacity: .8; }
.summe-zeile dd { margin: 0; font-family: var(--schrift-h); font-size: 1.05rem; }
.summe-gesamt { border-bottom: 0; border-top: 1px solid var(--linie-stark); margin-top: .4rem; }
.summe-gesamt dt { color: var(--tinte); }
.summe-gesamt dd { font-size: 1.5rem; }
.summe .knopf-voll { width: 100%; margin-top: var(--s3); }
.korb-leer { text-align: center; padding: var(--s6) 0; }

/* --- 6  Rechtsseiten, 404, Fuß ------------------------------------------ */

.recht { padding-bottom: var(--s8); }
.recht .fliess { max-width: none; }

.fehler { position: relative; padding: var(--s8) 0; text-align: center; overflow: hidden; }
.tafel-404 { width: clamp(6rem, 16vw, 12rem); right: 4vw; top: 2rem; }
.fehler-ziffer { font-size: clamp(4.5rem, 18vw, 11rem); line-height: .9; margin: 0; color: var(--wein); opacity: .22; }
.fehler .fliess { margin-inline: auto; }
.fehler .bahn { position: relative; z-index: 2; }

.fuss { background: var(--creme); border-top: 1px solid var(--linie); padding: var(--s5) 0 var(--s3); }
.dunkel-seite .fuss { background: var(--tanne-tief); border-top-color: var(--linie-hell); }
.fuss-bahn {
  width: min(100% - 2 * var(--rand), var(--bahn)); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4);
}
.marke-fuss { margin-right: auto; }
.fuss-sozial, .fuss-recht { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; padding: 0; }
.fuss-sozial a, .fuss-recht a, .fuss-oben, .fuss-adresse a {
  text-decoration: none; font-size: .78rem; letter-spacing: .1em;
  border-bottom: 1px solid transparent;
}
.fuss-sozial a:hover, .fuss-recht a:hover, .fuss-oben:hover, .fuss-adresse a:hover { border-bottom-color: currentColor; }
.fuss-unten { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--linie); }
.dunkel-seite .fuss-unten { border-top-color: var(--linie-hell); }
.fuss-adresse { margin: 0 auto 0 0; font-size: .78rem; color: var(--tinte-weich); }
.dunkel-seite .fuss-adresse { color: var(--licht-weich); }
.fuss-demo {
  width: min(100% - 2 * var(--rand), var(--bahn)); margin: var(--s3) auto 0;
  font-size: .72rem; color: var(--tinte-weich); opacity: .85;
}
.dunkel-seite .fuss-demo { color: var(--licht-weich); }

/* --- 7  Bewegung und Rückfallebenen ------------------------------------- */

.zeigen { opacity: 0; translate: 0 1.6rem; transition: opacity .8s ease, translate .8s ease; }
.zeigen.da { opacity: 1; translate: 0; }
.kein-js .zeigen { opacity: 1; translate: 0; }

@keyframes auftauchen { from { opacity: 0; translate: 0 1rem; } to { opacity: 1; translate: 0; } }

@media (min-width: 1081px) {
  /* Das breite Bild laeuft rechts aus dem Satzspiegel heraus, wie in der
     Vorlage. Prozente wuerden hier gegen die Gitterzelle rechnen und nicht
     gegen die Bahn, deshalb steht die Bahnbreite selbst in der Rechnung.
     Die 10 px Zugabe halten die Bildlaufleiste aus dem Spiel. */
  .ueber-breit { margin-right: min(0px, calc((var(--bahn) - 100vw) / 2 + 10px)); }
}

/* ---- Schirme bis 1080 px ---- */
@media (max-width: 1080px) {
  .shop-bahn { grid-template-columns: 1fr; }
  .shop-neben { order: -1; }
  .ueber-gitter { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
}

/* ---- Schirme bis 900 px: ein Strang ---- */
@media (max-width: 900px) {
  .kopf-bahn { flex-wrap: wrap; }
  .burger {
    display: grid; place-items: center;
    width: 2.6rem; height: 2.6rem; margin-left: auto;
    background: transparent; border: 1px solid var(--linie-stark);
    color: inherit; cursor: pointer;
  }
  .dunkel-seite .burger { border-color: var(--linie-hell-stark); }
  .burger-striche, .burger-striche::before, .burger-striche::after {
    content: ""; display: block; width: 1.1rem; height: 1px;
    background: currentColor; transition: translate .3s, rotate .3s, opacity .3s;
  }
  .burger-striche::before { translate: 0 -.36rem; }
  .burger-striche::after { translate: 0 .29rem; }
  .burger[aria-expanded="true"] .burger-striche { background: transparent; }
  .burger[aria-expanded="true"] .burger-striche::before { translate: 0 .5px; rotate: 45deg; }
  .burger[aria-expanded="true"] .burger-striche::after { translate: 0 -.5px; rotate: -45deg; }

  .nav {
    flex-basis: 100%; flex-direction: column; align-items: flex-start;
    gap: var(--s2); overflow: hidden;
    max-height: 0; opacity: 0;
    transition: max-height .4s ease, opacity .3s ease, padding .3s ease;
  }
  .nav[data-offen="ja"] { max-height: 26rem; opacity: 1; padding-bottom: var(--s3); }
  .kein-js .nav { max-height: none; opacity: 1; padding-bottom: var(--s2); }
  .nav-liste, .nav-rechts { flex-direction: column; align-items: flex-start; gap: .55rem; }
  .nav a { font-size: .95rem; }

  .ueber-gitter, .arbeiten-kopf, .kontakt-bahn, .produkt-gitter { grid-template-columns: 1fr; }
  .ware-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arbeiten-kopf { gap: var(--s3); }
  .werk-gitter { grid-template-columns: repeat(2, 1fr); }
  .werk-a1 { grid-column: 1 / 2; grid-row: 1; }
  .werk-a2 { grid-column: 2 / 3; grid-row: 1; }
  .werk-a3 { grid-column: 1 / 3; grid-row: 2; }
  .werk-a4 { grid-column: 1 / 3; grid-row: 3; }
  .werk-a5 { grid-column: 1 / 3; grid-row: 4; }
  .werk-a6 { grid-column: 1 / 3; grid-row: 5; }
  .werk-a7 { grid-column: 1 / 3; grid-row: 6; }
  .kreisknopf { grid-row: 4; }
  .tafel-zweig, .tafel-falter { display: none; }
  .kontakt-bild { min-height: 0; }
  .tafel-kontakt { width: min(18rem, 74%); }
  .daten { grid-template-columns: 5.5rem 1fr; }
}

/* ---- Schirme bis 700 px ---- */
@media (max-width: 700px) {
  .ware-gitter { grid-template-columns: 1fr; }
  .kat-reihe { grid-template-columns: 1fr; }
  .kat { aspect-ratio: 16 / 10; }
  .kat-kreis { width: min(40%, 7rem); }
  .kat-text { opacity: 1; translate: 0; }
  .feld-paar { grid-template-columns: 1fr; }
  .h-rechts { text-align: left; }
  .h-rechts .h-schreib { margin-left: clamp(2rem, 16vw, 6rem); margin-right: 0; }
  .zahlen { gap: var(--s3) var(--s5); }

  /* Der Warenkorb wird zur Kartenliste, eine Zeile je Ware */
  .korb-tafel thead { display: none; }
  .korb-tafel, .korb-tafel tbody, .korb-tafel tr, .korb-tafel td { display: block; width: 100%; }
  .korb-tafel tbody tr {
    display: grid; grid-template-columns: 5rem 1fr auto; gap: .3rem .8rem;
    align-items: center; padding: .7rem; margin-bottom: .8rem; border-bottom: 0;
  }
  .korb-tafel .korb-bild { grid-row: 1 / 3; width: 5rem; }
  .korb-bild img { width: 5rem; height: 5rem; }
  .korb-tafel td { padding: 0; }
  .korb-tafel .korb-weg { grid-row: 1; text-align: right; }
  .korb-tafel .korb-preis-zelle { grid-column: 2; text-align: left; }
  .summe { max-width: none; }
}

/* ---- Schirme bis 420 px ---- */
@media (max-width: 420px) {
  .werk-gitter { grid-template-columns: 1fr; }
  .werk-a1, .werk-a2 { grid-column: 1 / 2; }
  .werk-a1 { grid-row: 1; } .werk-a2 { grid-row: 2; }
  .werk-a3 { grid-row: 3; } .werk-a4 { grid-row: 4; }
  .werk-a5 { grid-row: 5; } .kreisknopf { grid-row: 5; }
  .werk-a6 { grid-row: 6; } .werk-a7 { grid-row: 7; }
  .tafel-rose { width: min(11rem, 62%); left: -8%; }
  .tafel-gelb { width: min(7.5rem, 44%); right: -6%; }
  .knopf-oval { padding: .95rem 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .zeigen { opacity: 1; translate: 0; }
}

@media print {
  .kopf, .fuss-sozial, .fuss-oben, .kreisknopf, .tafel, .hero-kreis { display: none; }
  body { background: #fff; color: #000; }
}