/* ============================================================
   aeste.living Galerie
   Eine Wand, 300 Prints, ein Punkt als ganze Kaufhandlung.
   ============================================================ */

:root {
  --wand:         #fafafa;
  --passepartout: #ffffff;
  --tinte:        #151515;
  --espresso:     #2e2014;
  /* Lesbares Sekundaergrau: 4,79:1 auf der Wand, 5,00:1 auf Weiss.
     Das Markengrau #b2b2b6 schafft nur 2,02:1 und taugt deshalb
     ausschliesslich fuer Dekoration, nie fuer Text. */
  --grau:         #6f6f73;
  --linie:        #e6e4e1;
  --linie-zart:   #f0eeeb;
  --dunkelraum:   #17120e;

  --rand:   clamp(16px, 4vw, 72px);
  --spalte: 26px;   /* Spaltenabstand  */
  --zeile:  56px;   /* Zeilenabstand   */

  --kopf: 88px;
  --leiste: 60px;

  --schnell: 180ms;
  --ruhig:   260ms;
  --kurve:   cubic-bezier(0.2, 0, 0, 1);
}

@media (max-width: 899px) {
  :root { --spalte: 16px; --zeile: 36px; --kopf: 64px; }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--wand);
  color: var(--tinte);
  font-family: Poppins, sans-serif;
  font-size: 14px;
  line-height: 1.9;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: "Brygada 1918", Georgia, serif; font-weight: 500; margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 1px solid var(--espresso);
  outline-offset: 3px;
}

.nur-lesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Kleine gesperrte Versalien - das Beschriftungsmass der Seite */
.marke {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
}

.ziffern { font-variant-numeric: tabular-nums; }

/* ============================================================ KOPF */

.kopf {
  position: sticky; top: 0; z-index: 60;
  height: var(--kopf);
  display: flex; align-items: center; gap: 24px;
  padding: 0 var(--rand);
  background: rgba(250, 250, 250, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: height var(--ruhig) var(--kurve), border-color var(--ruhig) var(--kurve);
}
.kopf[data-gescrollt] { border-bottom-color: var(--linie); }
@media (min-width: 900px) {
  .kopf[data-gescrollt] { height: 64px; }
}

.kopf__logo { display: flex; align-items: center; flex: 0 0 auto; }
.kopf__logo svg, .kopf__logo img {
  display: block; height: 42px; width: auto;
  transition: height var(--ruhig) var(--kurve);
}
.kopf[data-gescrollt] .kopf__logo svg,
.kopf[data-gescrollt] .kopf__logo img { height: 30px; }
@media (max-width: 899px) {
  .kopf__logo svg, .kopf__logo img { height: 32px; }
  .kopf[data-gescrollt] .kopf__logo svg,
  .kopf[data-gescrollt] .kopf__logo img { height: 28px; }
}

/* Lebender Kolumnentitel: zeigt das Kapitel, in dem man gerade scrollt */
.kopf__kapitel {
  flex: 1 1 auto;
  display: flex; align-items: baseline; gap: 12px;
  color: var(--grau);
  opacity: 0;
  transition: opacity var(--ruhig) var(--kurve);
}
.kopf[data-gescrollt] .kopf__kapitel { opacity: 1; }
@media (max-width: 1099px) { .kopf__kapitel { display: none; } }

.kopf__ende {
  margin-left: auto; flex: 0 0 auto;
  display: flex; align-items: center; gap: 20px;
}

.folio {
  font-family: "Brygada 1918", Georgia, serif;
  font-size: 14px; color: var(--grau);
}
.folio b { color: var(--tinte); font-weight: 500; }
@media (max-width: 599px) { .folio { display: none; } }

.auswahl-knopf {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 8px 0; margin: 0;
  font: inherit; color: var(--tinte); cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  white-space: nowrap;
}
.auswahl-knopf:hover .auswahl-knopf__text { color: var(--espresso); }
.auswahl-knopf__text { transition: color var(--schnell); }
.auswahl-knopf__zahl {
  font-variant-numeric: tabular-nums;
  color: var(--espresso); font-weight: 500;
}
.auswahl-knopf[data-leer] .auswahl-knopf__zahl { display: none; }

/* ============================================================ TITELBLATT */

.titelblatt {
  padding: clamp(56px, 9vw, 132px) var(--rand) clamp(40px, 6vw, 76px);
  display: grid; gap: clamp(24px, 4vw, 64px);
  grid-template-columns: 1fr;
  max-width: 1680px; margin: 0 auto;
}
@media (min-width: 1000px) {
  .titelblatt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}

.titelblatt__marke { color: var(--grau); margin-bottom: 20px; display: block; }

.titelblatt h1 {
  font-size: clamp(46px, 8vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin-bottom: 0;
}

.kolophon {
  border-top: 1px solid var(--tinte);
  padding-top: 18px;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 28px;
  font-size: 13px; line-height: 1.85;
}
.kolophon dt { color: var(--grau); }
.kolophon dd { margin: 0; }

/* ============================================================ RAUMPLAN (Filter) */

.raumplan {
  position: sticky; top: var(--kopf); z-index: 50;
  background: rgba(250, 250, 250, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  transition: top var(--ruhig) var(--kurve);
}
@media (min-width: 900px) { .kopf[data-gescrollt] ~ .raumplan { top: 64px; } }

.raumplan__spur {
  display: flex; gap: 4px; align-items: stretch;
  padding: 0 var(--rand);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 1680px; margin: 0 auto;
}
.raumplan__spur::-webkit-scrollbar { display: none; }

.raumplan__knopf {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; border-bottom: 1px solid transparent;
  margin: 0; padding: 17px 16px 15px;
  font: inherit; cursor: pointer; white-space: nowrap;
  color: var(--grau);
  display: flex; align-items: baseline; gap: 8px;
  transition: color var(--schnell), border-color var(--schnell);
}
.raumplan__knopf:first-child { padding-left: 0; }
.raumplan__knopf:hover { color: var(--tinte); }
.raumplan__knopf[aria-pressed="true"] {
  color: var(--tinte);
  border-bottom-color: var(--espresso);
}
.raumplan__knopf small {
  font-size: 10px; color: var(--grau);
  font-variant-numeric: tabular-nums;
}

/* ============================================================ DIE WAND */

.wand {
  max-width: 1680px; margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) var(--rand) 120px;
}

.raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--spalte);
  row-gap: var(--zeile);
}
/* Vier Spalten statt fuenf: bei 1512px ergibt das 330px breite Kacheln.
   Bei fuenf waeren es 257px - fuer Raumaufnahmen mit Holzbindern zu klein. */
@media (min-width: 620px)  { .raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1900px) { .raster { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Kein content-visibility: die geschaetzte Ersatzhoehe weicht von der echten ab
   und laesst die Scrollleiste springen. Die Kacheln sind flach genug, dass
   natives loading="lazy" allein reicht. */
.werk {
  margin: 0;
  display: flex; flex-direction: column;
}
/* Querformate belegen zwei Spalten - dadurch bleiben die Oberkanten buendig
   und Hoch- wie Querformat wirken flaechengleich. */
.werk--quer { grid-column: span 2; }

/* Passepartout: der weisse Rahmen, in dem der Print haengt */
.werk__print {
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; padding: 0; margin: 0;
  border: 0; background: var(--passepartout);
  cursor: zoom-in;
  padding: clamp(10px, 1.4vw, 20px);
  box-shadow: 0 1px 2px rgba(21, 17, 12, 0.04), 0 8px 24px -14px rgba(21, 17, 12, 0.16);
  transition: box-shadow var(--ruhig) var(--kurve), transform var(--ruhig) var(--kurve);
}
.werk__print:hover {
  box-shadow: 0 2px 4px rgba(21, 17, 12, 0.05), 0 18px 40px -18px rgba(21, 17, 12, 0.28);
  transform: translateY(-2px);
}

/* Bewusst ohne Einblenden per JavaScript: ein Bild, das auf eine Klasse
   wartet, um sichtbar zu werden, ist ein Bild, das unsichtbar bleiben kann.
   Der Sandton dient als Platzhalter, bis die Datei da ist. */
.werk__print img {
  display: block; width: 100%; height: auto;
  background: #f2efea;
}

/* Werkschild: Punkt, Nummer, Kollektion, Preis */
.schild {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; margin: 0;
  padding: 13px 0 0;
  width: 100%; min-height: 44px;
  font: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: baseline; gap: 11px;
  color: var(--grau);
  transition: color var(--schnell);
}
.schild:hover { color: var(--tinte); }

.punkt {
  flex: 0 0 auto;
  position: relative;
  width: 9px; height: 9px; margin-top: 1px;
  border-radius: 50%;
  border: 1px solid rgba(21, 21, 21, 0.24);
  background: transparent;
  transition: background var(--schnell) var(--kurve), border-color var(--schnell) var(--kurve);
}
.schild:hover .punkt { border-color: var(--espresso); }
.punkt::after {
  content: ""; position: absolute; inset: -1px;
  border-radius: 50%; border: 1px solid var(--espresso);
  opacity: 0; transform: scale(1);
  pointer-events: none;
}

.schild__nr {
  font-family: "Brygada 1918", Georgia, serif;
  font-size: 14px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: color var(--schnell);
}
.schild__kollektion {
  font-size: 10.5px; letter-spacing: 0.07em;
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Der Preis steht bewusst NICHT an jeder Kachel: bei einem einzigen Preis
   fuer alle 300 Motive waeren 300 Wiederholungen reines Rauschen und
   machten aus dem Verzeichnis eine Preisliste. Er erscheint stattdessen
   im Titelblatt, an jedem Kapitelkopf, in der Setzleiste, im Dunkelraum
   und in der Werkliste - auf jedem Bildschirm mindestens einmal. */
.schild__aufnehmen {
  font-size: 10.5px; letter-spacing: 0.07em;
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity var(--schnell);
}
.schild:hover .schild__aufnehmen { opacity: 1; }
.werk[data-gewaehlt] .schild__aufnehmen { opacity: 1; color: var(--espresso); }
@media (hover: none) { .schild__aufnehmen { display: none; } }

/* gewaehlt */
.werk[data-gewaehlt] .punkt {
  background: var(--espresso);
  border-color: var(--espresso);
}
.werk[data-gewaehlt] .punkt::after { animation: ring 420ms ease-out; }
.werk[data-gewaehlt] .schild { color: var(--tinte); }
.werk[data-gewaehlt] .schild__nr { color: var(--tinte); }
.werk[data-gewaehlt] .schild__kollektion { color: #6b6560; }

@keyframes ring {
  from { opacity: 0.5; transform: scale(1); }
  to   { opacity: 0;   transform: scale(2.6); }
}

/* Filter: rein ueber CSS, kein DOM-Umbau */
.raster[data-k] .werk { display: none; }
.raster[data-k="juli-2025"]               .werk[data-k="juli-2025"],
.raster[data-k="august-2025"]             .werk[data-k="august-2025"],
.raster[data-k="suite-oktober-2025"]      .werk[data-k="suite-oktober-2025"],
.raster[data-k="november-2025"]           .werk[data-k="november-2025"],
.raster[data-k="schnee-januar-2026"]      .werk[data-k="schnee-januar-2026"],
.raster[data-k="yoga-retreat-april-2026"] .werk[data-k="yoga-retreat-april-2026"] {
  display: flex;
}

/* Kapitelmarke zwischen den Kollektionen */
.kapitel {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 16px;
  padding: clamp(28px, 4vw, 52px) 0 6px;
  border-top: 1px solid var(--linie);
  color: var(--grau);
}
.raster:first-child > .kapitel:first-child { padding-top: 0; border-top: 0; }
.kapitel h2 {
  font-size: 15px; font-weight: 500; color: var(--tinte);
  letter-spacing: 0.01em;
}
/* Einmalige Erklaerung: ohne sie versteht niemand, dass die Zeile unter
   dem Bild die Kaufhandlung ist. Verschwindet nach der ersten Auswahl. */
.hinweis-erste {
  grid-column: 1 / -1;
  margin: 4px 0 -18px;
  font-size: 12px; color: var(--grau);
  display: flex; align-items: center; gap: 9px;
}
.hinweis-erste .punkt { position: static; margin: 0; }
body[data-hat-auswahl] .hinweis-erste { display: none; }
.raster[data-k] .hinweis-erste { display: none; }
.raster[data-k] .kapitel { display: none; }
.raster[data-k="juli-2025"]               .kapitel[data-k="juli-2025"],
.raster[data-k="august-2025"]             .kapitel[data-k="august-2025"],
.raster[data-k="suite-oktober-2025"]      .kapitel[data-k="suite-oktober-2025"],
.raster[data-k="november-2025"]           .kapitel[data-k="november-2025"],
.raster[data-k="schnee-januar-2026"]      .kapitel[data-k="schnee-januar-2026"],
.raster[data-k="yoga-retreat-april-2026"] .kapitel[data-k="yoga-retreat-april-2026"] {
  display: flex;
}

/* ============================================================ SETZLEISTE */

.setzleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  min-height: var(--leiste);
  display: flex; align-items: center; gap: 20px;
  padding: 0 var(--rand);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--linie);
  transform: translateY(101%);
  transition: transform var(--ruhig) var(--kurve);
}
.setzleiste[data-sichtbar] { transform: translateY(0); }

.setzleiste__index {
  flex: 1 1 auto; min-width: 0;
  font-family: "Brygada 1918", Georgia, serif;
  font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--grau);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 767px) { .setzleiste__index { display: none; } }

.setzleiste__summe {
  flex: 0 0 auto; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 767px) { .setzleiste__summe { flex: 1 1 auto; } }
.setzleiste__summe b { font-weight: 500; }

/* ============================================================ KNOPF */

.knopf {
  appearance: none; -webkit-appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 26px; margin: 0;
  border: 1px solid var(--tinte); border-radius: 3px;
  background: var(--tinte); color: #fff;
  font-family: Poppins, sans-serif;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: background var(--schnell) var(--kurve), color var(--schnell) var(--kurve),
              border-color var(--schnell) var(--kurve);
}
.knopf:hover { background: var(--espresso); border-color: var(--espresso); }
.knopf[disabled] { opacity: 0.4; cursor: not-allowed; }

.knopf--leer { background: none; color: var(--tinte); border-color: var(--linie); }
.knopf--leer:hover { background: none; border-color: var(--tinte); color: var(--tinte); }

.knopf--schlicht {
  background: none; border: 0; color: var(--grau);
  padding: 8px 4px; min-height: 36px;
  letter-spacing: 0.1em;
}
.knopf--schlicht:hover { background: none; color: var(--tinte); }

/* ============================================================ WERKLISTE (Drawer) */

.schleier {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(23, 18, 14, 0.34);
  opacity: 0; pointer-events: none;
  transition: opacity var(--ruhig) var(--kurve);
}
.schleier[data-offen] { opacity: 1; pointer-events: auto; }

.werkliste {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(440px, 100vw);
  background: var(--passepartout);
  display: flex; flex-direction: column;
  transform: translateX(101%);
  transition: transform var(--ruhig) var(--kurve);
  box-shadow: -24px 0 60px -30px rgba(21, 17, 12, 0.4);
}
.werkliste[data-offen] { transform: translateX(0); }

.werkliste__kopf {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 26px 28px 18px;
  border-bottom: 1px solid var(--linie);
}
.werkliste__kopf h2 { font-size: 21px; font-weight: 500; }
.werkliste__kopf .marke { color: var(--grau); display: block; margin-top: 3px; }

.schliessen {
  appearance: none; background: none; border: 0;
  padding: 10px; margin: -10px -10px -10px 0;
  cursor: pointer; color: var(--grau); line-height: 0;
  transition: color var(--schnell);
}
.schliessen:hover { color: var(--tinte); }

.werkliste__rumpf { flex: 1 1 auto; overflow-y: auto; padding: 8px 28px; }

.posten {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linie-zart);
}
.posten:last-child { border-bottom: 0; }
.posten__bild {
  flex: 0 0 auto; width: 46px; height: 62px;
  object-fit: cover; background: #f2efea;
}
.posten__text { flex: 1 1 auto; min-width: 0; }
.posten__nr {
  font-family: "Brygada 1918", Georgia, serif;
  font-size: 14px; font-variant-numeric: tabular-nums;
  display: block;
}
.posten__kollektion { font-size: 10.5px; color: var(--grau); letter-spacing: 0.06em; }
.posten__preis {
  flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--grau);
}
.posten__weg {
  appearance: none; background: none; border: 0;
  padding: 8px; margin: -8px -4px -8px 0;
  cursor: pointer; color: var(--grau); line-height: 0;
  transition: color var(--schnell);
}
.posten__weg:hover { color: var(--espresso); }

.werkliste__leer {
  padding: 56px 0; text-align: center; color: var(--grau);
}
.werkliste__leer .punkt {
  display: block; margin: 0 auto 20px; width: 9px; height: 9px;
}

.werkliste__fuss {
  flex: 0 0 auto;
  padding: 20px 28px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linie);
  background: var(--passepartout);
}
.summe {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 6px;
}
.summe__wert {
  font-family: "Brygada 1918", Georgia, serif;
  font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums;
}
.zahlungshinweis {
  font-size: 11.5px; line-height: 1.7; color: var(--grau);
  margin: 0 0 18px;
}
.werkliste__fuss .knopf { width: 100%; }

.rueckgaengig {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 11px 14px; margin: 10px 0;
  background: #f7f5f2; font-size: 12px; color: #4a453f;
}

/* ============================================================ DUNKELRAUM (Lightbox) */

.dunkelraum {
  position: fixed; inset: 0; z-index: 100;
  background: var(--dunkelraum);
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity var(--ruhig) var(--kurve);
}
.dunkelraum[data-offen] { display: flex; opacity: 1; }

.dunkelraum__kopf {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 20px clamp(16px, 3vw, 32px);
  color: rgba(255, 255, 255, 0.62);
}
.dunkelraum__kopf .schliessen { color: rgba(255, 255, 255, 0.62); }
.dunkelraum__kopf .schliessen:hover { color: #fff; }

.dunkelraum__buehne {
  flex: 1 1 auto; position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 0 clamp(16px, 6vw, 88px);
  min-height: 0;
}
.dunkelraum__buehne img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--schnell) ease-out;
}
.dunkelraum__buehne img.da { opacity: 1; }

.blaettern {
  position: absolute; top: 0; bottom: 0;
  width: clamp(56px, 8vw, 96px);
  appearance: none; background: none; border: 0;
  cursor: pointer; color: rgba(255, 255, 255, 0.5);
  display: flex; align-items: center; justify-content: center;
  transition: color var(--schnell);
}
.blaettern:hover { color: #fff; }
.blaettern[disabled] { opacity: 0.16; cursor: default; }
.blaettern--zurueck { left: 0; }
.blaettern--vor { right: 0; }

.dunkelraum__fuss {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 34px);
  padding: 20px clamp(16px, 3vw, 32px) calc(24px + env(safe-area-inset-bottom));
  color: rgba(255, 255, 255, 0.62);
  flex-wrap: wrap;
}
.dunkelraum__nr {
  font-family: "Brygada 1918", Georgia, serif;
  font-size: 17px; color: #fff; font-variant-numeric: tabular-nums;
}
.dunkelraum .knopf {
  background: none; border-color: rgba(255, 255, 255, 0.34); color: #fff;
}
.dunkelraum .knopf:hover { background: #fff; border-color: #fff; color: var(--dunkelraum); }
.dunkelraum .knopf[data-gewaehlt] {
  background: #fff; border-color: #fff; color: var(--dunkelraum);
}

/* ============================================================ BESTELLUNG */

.blatt {
  max-width: 1680px; margin: 0 auto;
  padding: clamp(40px, 6vw, 88px) var(--rand) 140px;
  display: none;
}
.blatt[data-offen] { display: block; }

.blatt__kopf { max-width: 62ch; margin-bottom: clamp(32px, 5vw, 56px); }
.blatt__kopf .marke { color: var(--grau); display: block; margin-bottom: 16px; }
.blatt__kopf h1 {
  font-size: clamp(30px, 4vw, 46px); font-weight: 600;
  line-height: 1.1; margin-bottom: 18px;
}
.blatt__kopf p { margin: 0; color: #4a453f; max-width: 56ch; }

.bestellgitter {
  display: grid; gap: clamp(32px, 5vw, 72px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1000px) {
  .bestellgitter { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
}

fieldset { border: 0; padding: 0; margin: 0 0 34px; }
legend {
  padding: 0; margin-bottom: 18px;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grau);
  width: 100%;
  border-bottom: 1px solid var(--linie);
  padding-bottom: 10px;
}

.feldreihe { display: grid; gap: 0 20px; grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .feldreihe--zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

.feld { margin-bottom: 20px; }
.feld label {
  display: block; margin-bottom: 7px;
  font-size: 11px; letter-spacing: 0.07em; color: #4a453f;
}
.feld label .optional { color: var(--grau); }

.feld input, .feld textarea, .feld select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: 0;
  background: var(--passepartout);
  font-family: Poppins, sans-serif;
  font-size: 14px; line-height: 1.5; color: var(--tinte);
  transition: border-color var(--schnell);
}
.feld input:hover, .feld textarea:hover { border-color: #d4d0ca; }
.feld input:focus, .feld textarea:focus {
  outline: none; border-color: var(--espresso);
}
.feld textarea { min-height: 108px; resize: vertical; }
.feld[data-fehler] input, .feld[data-fehler] textarea { border-color: #a3402c; }
.feld__fehler {
  display: none; margin-top: 6px;
  font-size: 11.5px; color: #a3402c;
}
.feld[data-fehler] .feld__fehler { display: block; }

/* Honigtopf - fuer Menschen unsichtbar */
.honigtopf {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.beleg {
  background: var(--passepartout);
  border: 1px solid var(--linie);
  padding: 26px 26px 22px;
  position: sticky; top: calc(var(--kopf) + 24px);
}
.beleg h2 {
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grau);
  font-family: Poppins, sans-serif;
  padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--linie);
}
.beleg__streifen {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 16px 0 18px;
}
.beleg__streifen img {
  width: 38px; height: 51px; object-fit: cover; background: #f2efea;
}
.beleg__mehr {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 51px; background: #f7f5f2;
  font-size: 10.5px; color: var(--grau);
  font-variant-numeric: tabular-nums;
}
.beleg__zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 5px 0; font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.beleg__zeile--summe {
  border-top: 1px solid var(--linie);
  margin-top: 10px; padding-top: 14px;
}
.beleg__zeile--summe .beleg__wert {
  font-family: "Brygada 1918", Georgia, serif;
  font-size: 22px; font-weight: 500;
}
.beleg__hinweis {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--linie-zart);
  font-size: 11.5px; line-height: 1.75; color: var(--grau);
}

.absenden { margin-top: 8px; }
.absenden .knopf { width: 100%; }
.absenden__zusatz {
  margin: 14px 0 0; font-size: 11.5px; line-height: 1.75; color: var(--grau);
}
.absenden__zusatz a { color: #4a453f; }

.meldung {
  padding: 14px 18px; margin-bottom: 22px;
  border: 1px solid #e2c7c0; background: #fdf6f4;
  color: #8a3a28; font-size: 13px; line-height: 1.65;
  display: none;
}
.meldung[data-sichtbar] { display: block; }

/* ============================================================ BESTAETIGUNG */

.quittung { max-width: 62ch; }
.quittung .punkt {
  width: 9px; height: 9px; background: var(--espresso);
  border-color: var(--espresso); display: block; margin-bottom: 26px;
}
.quittung h1 {
  font-size: clamp(30px, 4vw, 46px); font-weight: 600;
  margin-bottom: 20px;
}
.quittung__nummer {
  font-family: "Brygada 1918", Georgia, serif;
  font-size: 26px; font-weight: 500; letter-spacing: 0.02em;
  padding: 18px 0; margin: 26px 0;
  border-top: 1px solid var(--tinte);
  border-bottom: 1px solid var(--linie);
  display: block;
}
.quittung p { margin: 0 0 18px; color: #4a453f; }
.quittung__liste {
  font-size: 12.5px; color: var(--grau);
  font-variant-numeric: tabular-nums;
  line-height: 2; word-break: break-word;
}

/* ============================================================ FUSS */

.fuss {
  border-top: 1px solid var(--linie);
  background: var(--passepartout);
  padding: clamp(48px, 6vw, 80px) var(--rand) calc(clamp(48px, 6vw, 80px) + var(--leiste));
}
.fuss__innen {
  max-width: 1680px; margin: 0 auto;
  display: grid; gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px)  { .fuss__innen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .fuss__innen { grid-template-columns: repeat(4, 1fr); } }

.fuss h2 {
  font-family: Poppins, sans-serif;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grau); margin-bottom: 16px;
}
.fuss p { margin: 0 0 12px; font-size: 13px; line-height: 1.9; }
.fuss a { color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--linie); }
.fuss a:hover { border-bottom-color: var(--tinte); }
.fuss__logo { margin-bottom: 20px; display: block; }
.fuss__logo svg, .fuss__logo img { height: 46px; width: auto; display: block; }

.fuss__hinweis {
  max-width: 1680px; margin: clamp(40px, 5vw, 64px) auto 0;
  padding-top: 24px; border-top: 1px solid var(--linie);
  font-size: 11.5px; line-height: 1.85; color: var(--grau);
}