@charset "UTF-8";

/* ==================================================================
   Cthulhu Punk - Shop

   Zuerst fuers Handy, ab 60rem kommt die Desktop-Fassung dazu.
   Farben kommen als CSS-Variablen aus dem Backstage (rahmen.php).
   Nichts wird von fremden Servern nachgeladen.

   Aufbau
     1  Schrift, Grundlage, Hilfsklassen
     2  Kopfleiste, Menue, Laufband
     3  Ebene 1 - die Nacht
     4  Ebene 2 - die Ware
     5  Ebene 3 - das Papier (Farben gedreht)
     6  Fussbereich
     7  Textseiten
     8  Bewegung: Einblenden, Feinschliff, Notausschalter
   ================================================================== */


/* ══════════════════════════════════════════════════════════════════
   1  SCHRIFT, GRUNDLAGE, HILFSKLASSEN
   ══════════════════════════════════════════════════════════════════ */

/* Fehlt anton.woff2 (siehe schriften/LIESMICH.txt), greift die Ersatzliste. */
@font-face {
  font-family: "Anton";
  src: url("schriften/anton.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --schrift-display: "Anton", "Haettenschweiler", "Impact", "Arial Narrow", sans-serif;
  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-masch: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Nur der Ausgangswert, bis skript.js die tatsächliche Höhe meldet. */
  --kopf-hoehe: 6.5rem;
  --rand: 1.15rem;
  --breite: 80rem;
  /* Katalog und Motivseite laufen breiter als der Rest - dort wird
     verglichen, und jede Spalte mehr spart eine Bildschirmhöhe. */
  --breite-laden: 104rem;

  --schwung: cubic-bezier(.16, .84, .3, 1);
  --schwung-hart: cubic-bezier(.2, 1.3, .4, 1);
}

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

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

body {
  margin: 0;
  background: var(--tief);
  color: var(--text);
  font-family: var(--schrift-text);
  line-height: 1.6;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }
a { color: var(--akzent); }

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

h1, h2, h3 {
  font-family: var(--schrift-display);
  font-weight: 400;
  line-height: .9;
  text-transform: uppercase;
  margin: 0;
}

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

.zum-inhalt {
  position: absolute;
  left: -9999px;
  z-index: 300;
  background: var(--akzent);
  color: var(--text);
  padding: .75rem 1rem;
  font-weight: 800;
  text-decoration: none;
}
.zum-inhalt:focus { left: .5rem; top: .5rem; }

/* ---- Hintergrundbild fuer alles ausser der Startseite ----

   Liegt ganz hinten und fest: es scrollt nicht mit, sonst wandert bei
   einer langen AGB-Seite das halbe Foto durchs Bild. Der Schleier
   darueber ist einstellbar, damit die Schrift lesbar bleibt, egal wie
   hell das Foto ist. */

.untergrund {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.untergrund__bild {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.untergrund__schleier {
  position: absolute;
  inset: 0;
  background: var(--tief);
  opacity: var(--shop-schleier, .82);
}

/* Damit das Bild ueberhaupt durchscheint, darf der Koerper darunter nicht
   selbst schwarz gefuellt sein. Die Klasse setzt die Vorlage, nicht :has()
   - das kennen aeltere Browser noch nicht. */
body.hat-untergrund { background: transparent; }

/* ---- Das Schild an der Tuer, wenn der Laden zu ist ---- */

.schild {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 2rem var(--rand);
  text-align: center;
}
.schild__innen { max-width: 34rem; }

.schild__logo { width: 7.5rem; height: auto; margin: 0 auto 1.5rem; display: block; }

.schild__marke {
  font-family: var(--schrift-display);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  text-transform: uppercase;
  margin: 0 0 1.2rem;
}

.schild__wort {
  font-family: var(--schrift-display);
  font-size: clamp(2.6rem, 13vw, 5.5rem);
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--akzent);
  margin: 0 0 1.6rem;
  transform: rotate(-2deg);
}

.schild__text { color: var(--text); font-size: 1.08rem; line-height: 1.7; }
.schild__text p { margin: 0 0 1rem; }

.schild__kontakt { margin: 2rem 0 0; font-size: .92rem; }

/* ---- Streifen fuer den Betreiber, wenn der Laden zu ist ---- */

/* Klebt oben und schiebt die Kopfleiste um seine eigene Hoehe nach unten.
   Die misst das Skript, weil der Text am Handy umbrechen kann.

   Die Farbe sitzt im Rand, nicht in der Flaeche: helle Schrift auf Rot
   kommt nur auf 4,14:1, dunkle auf 4,07 - Rot liegt genau in der Mitte
   und taugt fuer Text auf beiden Seiten nicht. */
.zustreifen {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 130;
  margin: 0;
  padding: .55rem var(--rand);
  background: var(--karte);
  border-bottom: 3px solid var(--akzent);
  color: var(--text);
  font-size: .88rem;
  font-weight: 700;
  text-align: center;
}
.zustreifen::before {
  content: "";
  display: inline-block;
  width: .55rem; height: .55rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--akzent);
  vertical-align: baseline;
}
.zustreifen a { color: var(--text); }

/* Die Kopfleiste rutscht unter den Streifen. Die Startwerte gelten, bis
   das Skript nachgemessen hat - und dauerhaft, wenn kein Skript laeuft.
   Sie sind grosszuegig gewaehlt: lieber etwas Luft zu viel als eine
   Kopfleiste, die halb unter dem Streifen verschwindet. */
.hat-zustreifen { --kopf-hoehe: 9.2rem; }
.hat-zustreifen .kopfleiste { top: var(--zustreifen-hoehe, 2.9rem); }

/* Fotokopie-Korn ueber allem. Wird berechnet, nicht geladen. */
.korn {
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* CSS-gezeichnete Sinnbilder statt Emoji oder Bilddateien */
.zeichen-lupe {
  display: block;
  width: 1.1rem; height: 1.1rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: relative;
}
.zeichen-lupe::after {
  content: "";
  position: absolute;
  right: -.32rem; bottom: -.18rem;
  width: .45rem; height: 2px;
  background: currentColor;
  transform: rotate(45deg);
}
/* Einkaufstasche als kleines Inline-SVG (siehe kopfleiste.php). Als reines
   CSS-Gebilde sah sie wie ein Vorhaengeschloss aus. Die Linienfarbe kommt
   ueber currentColor, beim Drueberfahren geht sie also mit auf Akzent. */
.zeichen-korb {
  display: block;
  width: 1.4rem; height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ══════════════════════════════════════════════════════════════════
   2  KOPFLEISTE, MENUE, LAUFBAND
   Immer sichtbar, auf jeder Seite.
   ══════════════════════════════════════════════════════════════════ */

.kopfleiste {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--tief) 88%, transparent);
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--linie);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .kopfleiste { background: color-mix(in srgb, var(--tief) 86%, transparent); }
}

.kopfleiste__innen {
  display: flex;
  align-items: center;
  gap: .6rem;
  height: 4.1rem;
  padding: 0 var(--rand);
  max-width: var(--breite);
  margin: 0 auto;
}

/* ---- Marke ---- */

.marke {
  display: flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--text);
  flex: 0 0 auto;
}
.marke__scheibe {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.7rem; height: 2.7rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tief);
  box-shadow: 0 0 0 2px var(--akzent);
  transition: transform .5s var(--schwung), box-shadow .3s ease;
}
.marke__scheibe img { width: 100%; height: 100%; object-fit: cover; }
.marke__zeichen {
  font-family: var(--schrift-display);
  font-size: 1.5rem;
  color: var(--akzent);
  line-height: 1;
}
.marke:hover .marke__scheibe { transform: rotate(-14deg) scale(1.08); }
.marke__name {
  display: none;
  font-family: var(--schrift-display);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* ---- Hauptmenue (ab Desktop) ---- */

.hauptmenue { display: none; align-items: center; gap: .15rem; flex: 0 0 auto; }

.hauptmenue__punkt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .6rem .8rem;
  cursor: pointer;
}
.hauptmenue__punkt::after {
  content: "";
  position: absolute;
  left: .8rem; right: .8rem; bottom: .34rem;
  height: 2px;
  background: var(--akzent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--schwung);
}
.hauptmenue__punkt:hover::after,
.hauptmenue__punkt[aria-expanded="true"]::after { transform: scaleX(1); }

.hauptmenue__pfeil {
  width: .38rem; height: .38rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .3s var(--schwung);
}
.hauptmenue__punkt[aria-expanded="true"] .hauptmenue__pfeil { transform: rotate(-135deg) translateY(-1px); }

.hauptmenue__klapp { position: relative; }

.klappwand {
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(2, minmax(9rem, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--linie);
  border: 1px solid var(--linie);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .7);
  animation: klapp-auf .26s var(--schwung) both;
}
.klappwand[hidden] { display: none; }
@keyframes klapp-auf {
  from { opacity: 0; transform: translateY(-.6rem); }
  to   { opacity: 1; transform: none; }
}
.klappwand__punkt {
  background: var(--karte);
  color: var(--text);
  text-decoration: none;
  padding: .8rem 1.05rem;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.klappwand__punkt:hover { background: var(--akzent); padding-left: 1.2rem; }
.klappwand__punkt--alle { grid-column: 1 / -1; color: var(--akzent); }
.klappwand__punkt--alle:hover { color: var(--text); }

/* ---- Suche ---- */

.suche { flex: 1 1 auto; display: flex; min-width: 0; }
.suche__feld {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--linie);
  border-right: 0;
  color: var(--text);
  font: inherit;
  font-size: .95rem;
  padding: .55rem .8rem;
  transition: border-color .2s ease, background .2s ease;
}
.suche__feld::placeholder { color: var(--gedaempft); }
.suche__feld:focus { background: var(--karte); border-color: var(--akzent); outline: none; }
.suche__knopf {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.7rem;
  background: transparent;
  border: 1px solid var(--linie);
  color: var(--text);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.suche__knopf:hover { background: var(--akzent); border-color: var(--akzent); }

/* ---- Werkzeuge rechts ---- */

.werkzeug {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.7rem; height: 2.7rem;
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, transform .2s var(--schwung-hart);
}
.werkzeug:hover { border-color: var(--akzent); color: var(--akzent); transform: translateY(-2px); }
.werkzeug__zahl {
  position: absolute;
  top: -.5rem; right: -.5rem;
  min-width: 1.35rem;
  padding: 0 .28rem;
  background: var(--akzent);
  color: var(--text);
  font-size: .74rem;
  font-weight: 800;
  line-height: 1.35rem;
  text-align: center;
  animation: korb-pochen .5s var(--schwung-hart);
}
@keyframes korb-pochen {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

.burger { display: grid; gap: 5px; width: 1.3rem; }
.burger i {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform .3s var(--schwung), opacity .2s ease;
}
[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Laufband ---- */

.laufband {
  border-top: 1px solid var(--linie);
  background: var(--karte);
  overflow: hidden;
  height: 2.2rem;
  display: flex;
  align-items: center;
}
/*
 * Das Laufband schiebt sich um genau eine Gruppenbreite weiter und beginnt
 * dann von vorn - dadurch ist der Übergang unsichtbar. Wie breit eine Gruppe
 * ist und wie viele Kopien nebeneinander liegen müssen, damit nie eine Lücke
 * entsteht, rechnet skript.js aus und setzt es hier ein. Ohne Skript gelten
 * die Ausgangswerte: zwei Gruppen, Sprung um die halbe Spur.
 */
.laufband__spur {
  display: flex;
  width: max-content;
  animation: laufen var(--laufzeit, 46s) linear infinite;
}
.laufband:hover .laufband__spur { animation-play-state: paused; }
.laufband__gruppe { display: flex; align-items: center; gap: .8rem; padding-right: .8rem; }
.laufband__stueck {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  white-space: nowrap;
  color: var(--gedaempft);
}
.laufband__stueck--akzent { color: var(--akzent); }
.laufband__stueck--spar   { color: var(--spar); }
.laufband__stueck--kasten { color: var(--text); border: 1px solid var(--text); padding: .08rem .4rem; }
.laufband__punkt { color: var(--linie); }

@keyframes laufen {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-1 * var(--gruppenbreite, 50%))); }
}

/* ---- Fortschrittsbalken ---- */

.fortschritt { height: 3px; background: var(--linie); }
.fortschritt__balken {
  display: block;
  height: 100%;
  width: 0;
  background: var(--akzent);
  transition: width .1s linear;
}

/* ---- Vollbildmenue am Handy ---- */

.handymenue {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--tief);
  padding-top: var(--kopf-hoehe);
  overflow-y: auto;
  animation: menue-auf .3s var(--schwung) both;
}
.handymenue[hidden] { display: none; }
@keyframes menue-auf {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
.handymenue__innen { padding: 1.5rem var(--rand) 3rem; }
.handymenue__ueber {
  font-size: .74rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gedaempft);
  margin: 0 0 .8rem;
  font-weight: 800;
}
.handymenue__wand { display: grid; }
.handymenue__punkt {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--linie);
  font-family: var(--schrift-display);
  font-size: 2.15rem;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  animation: punkt-rein .45s var(--schwung) both;
  animation-delay: calc(var(--nr) * 45ms + 80ms);
}
.handymenue__punkt:hover,
.handymenue__punkt:focus-visible { color: var(--akzent); padding-left: .6rem; }
@keyframes punkt-rein {
  from { opacity: 0; transform: translateX(-1.5rem); }
  to   { opacity: 1; transform: none; }
}
.handymenue__unten {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  margin-top: 1.6rem;
}
.handymenue__unten a {
  color: var(--gedaempft);
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.handymenue__unten a:hover { color: var(--akzent); }

body.menue-offen { overflow: hidden; }

/* ---- Meldungen ---- */

.meldungen {
  position: relative;
  z-index: 60;
  max-width: var(--breite);
  margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + .8rem) var(--rand) 0;
}
.ist-startseite .meldungen { padding-top: calc(var(--kopf-hoehe) + .8rem); }
.meldung {
  margin: 0 0 .5rem;
  padding: .7rem .9rem;
  border: 1px solid var(--linie);
  background: var(--karte);
  font-size: .9rem;
}
.meldung--gut    { border-color: var(--spar);   color: var(--spar); }
.meldung--fehler { border-color: var(--akzent); color: var(--akzent); }


/* ══════════════════════════════════════════════════════════════════
   3  EBENE 1 - DIE NACHT
   Klebt oben. Ebene 2 schiebt sich darueber.
   ══════════════════════════════════════════════════════════════════ */

.buehne { position: relative; }
.ebene  { position: relative; }

.ebene--eins {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 100vh;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.held__bildschicht { position: absolute; inset: 0; }

.held__bild {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.4) contrast(1.2);
  transform: scale(1.12);
  animation: held-ankommen 1.6s var(--schwung) both;
}
.held__bild--leer {
  background:
    radial-gradient(70% 55% at 50% 34%, color-mix(in srgb, var(--akzent) 30%, transparent), transparent 72%),
    radial-gradient(90% 70% at 20% 90%, color-mix(in srgb, var(--spar) 8%, transparent), transparent 70%),
    var(--karte);
}
@keyframes held-ankommen {
  from { transform: scale(1.3); opacity: 0; }
  to   { transform: scale(1.12); opacity: 1; }
}

/* Rasterpunkte wie schlecht gedruckt */
.held__raster {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .32;
  background-image: radial-gradient(var(--tief) 1px, transparent 1.5px);
  background-size: 4px 4px;
}

.held__schleier {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--tief) calc(var(--schleier) + 15%), transparent) 0%,
      color-mix(in srgb, var(--tief) calc(var(--schleier) * .7), transparent) 38%,
      color-mix(in srgb, var(--tief) calc(var(--schleier) + 10%), transparent) 78%,
      var(--tief) 100%);
}

.held__inhalt {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: var(--kopf-hoehe) var(--rand) 5rem;
  max-width: 48rem;
}

/*
 * Weicher Dunstkreis hinter dem Textblock. Anders als der Aufnäher auf
 * Ebene 2 hat er keine sichtbare Kante - er dunkelt nur genau dort ab, wo
 * Schrift steht, damit sie auf jedem Hintergrundbild lesbar bleibt.
 */
.held__inhalt::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 165%; height: 155%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(0, 0, 0, .78) 0%,
    rgba(0, 0, 0, .6) 42%,
    rgba(0, 0, 0, .3) 66%,
    rgba(0, 0, 0, 0) 82%);
}

.held__logo {
  width: clamp(5.5rem, 24vw, 10rem);
  height: auto;
  margin: 0 auto .9rem;
  display: block;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .8));
  animation:
    logo-einflug 1s var(--schwung-hart) both,
    logo-atmen 7s ease-in-out 1.2s infinite;
}
@keyframes logo-einflug {
  from { opacity: 0; transform: translateY(2rem) scale(.75) rotate(-14deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes logo-atmen {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-.55rem) scale(1.025); }
}

/* Titel mit kurzem Bildstoerer beim Laden und beim Drueberfahren */
.held__name {
  position: relative;
  font-size: clamp(3rem, 15vw, 8.5rem);
  line-height: .82;
  letter-spacing: -.015em;
  /* Mehrere Schatten übereinander: der enge hält die Buchstabenkanten
     scharf, der weite hebt die ganze Zeile vom Bild ab. */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .9),
    0 0 14px rgba(0, 0, 0, .75),
    0 8px 44px rgba(0, 0, 0, .85);
  animation: name-rein 1s var(--schwung) .15s both;
}
@keyframes name-rein {
  from { opacity: 0; transform: translateY(1.6rem); letter-spacing: .12em; }
  to   { opacity: 1; transform: none; letter-spacing: -.015em; }
}
.held__name::before,
.held__name::after {
  content: attr(data-glitch);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}
.held__name::before { color: var(--akzent); }
.held__name::after  { color: var(--spar); }
.held__name::before { animation: stoerer-a 1.5s steps(2, end) 1.05s 1; }
.held__name::after  { animation: stoerer-b 1.5s steps(2, end) 1.05s 1; }
.held__name:hover::before { animation: stoerer-a .5s steps(2, end) 1; }
.held__name:hover::after  { animation: stoerer-b .5s steps(2, end) 1; }

@keyframes stoerer-a {
  0%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: none; }
  8%       { opacity: .85; clip-path: inset(8% 0 62% 0); transform: translate(-5px, -2px); }
  16%      { opacity: 0; }
  30%      { opacity: .7; clip-path: inset(48% 0 28% 0); transform: translate(6px, 1px); }
  38%      { opacity: 0; }
  58%      { opacity: .6; clip-path: inset(22% 0 55% 0); transform: translate(-3px, 2px); }
  66%      { opacity: 0; }
}
@keyframes stoerer-b {
  0%, 100% { opacity: 0; clip-path: inset(100% 0 0 0); transform: none; }
  12%      { opacity: .6; clip-path: inset(66% 0 12% 0); transform: translate(4px, 2px); }
  22%      { opacity: 0; }
  44%      { opacity: .5; clip-path: inset(14% 0 68% 0); transform: translate(-6px, -1px); }
  52%      { opacity: 0; }
}

/* Slogan wie mit Klebeband draufgepappt */
.held__slogan {
  margin: 1.2rem 0 0;
  animation: slogan-rein .8s var(--schwung-hart) .55s both;
}
.held__slogan span {
  display: inline-block;
  background: var(--akzent);
  color: var(--text);
  font-family: var(--schrift-masch);
  font-size: clamp(.82rem, 3.4vw, 1.05rem);
  font-weight: 700;
  padding: .3rem .8rem;
  transform: rotate(-1.6deg);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .55);
}
@keyframes slogan-rein {
  from { opacity: 0; transform: translateY(1rem) rotate(4deg); }
  to   { opacity: 1; transform: none; }
}

.held__info {
  font-family: var(--schrift-masch);
  font-size: .88rem;
  /* Nicht das gedämpfte Grau: auf einem Foto ist das kaum noch zu lesen. */
  color: var(--text);
  margin: 1.3rem 0 0;
  line-height: 1.75;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .8);
  animation: einblenden .9s ease .8s both;
}

.held__handlung { margin: 1.8rem 0 0; animation: einblenden .9s ease 1s both; }

@keyframes einblenden {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}

.scrolltipp {
  position: absolute;
  left: 50%;
  bottom: 3.2rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--text);
  opacity: .8;
  font-size: .72rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
  transition: opacity .4s ease, color .2s ease;

  /*
   * Eigene Bewegung mit "backwards" statt der allgemeinen: die allgemeine
   * endet auf transform:none und hätte damit die Zentrierung aufgehoben,
   * und ihr festgehaltenes opacity:1 hätte das spätere Ausblenden beim
   * Weiterscrollen blockiert.
   */
  animation: tipp-rein 1s ease 1.4s backwards;
}
.scrolltipp:hover { color: var(--akzent); opacity: 1; }

@keyframes tipp-rein {
  from { opacity: 0; transform: translate(-50%, 1rem); }
  to   { opacity: .8; transform: translate(-50%, 0); }
}
.scrolltipp__linie {
  width: 1px;
  height: 2.6rem;
  background: linear-gradient(to bottom, currentColor, transparent);
  position: relative;
  overflow: hidden;
}
.scrolltipp__linie::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 1px; height: 45%;
  background: var(--akzent);
  animation: tropfen 2.1s ease-in-out infinite;
}
@keyframes tropfen {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(240%); }
}
.scrolltipp--weg { opacity: 0; pointer-events: none; }

.wachposten { position: absolute; top: 72vh; left: 0; width: 1px; height: 1px; }


/* ══════════════════════════════════════════════════════════════════
   4  EBENE 2 - DIE WARE
   Schiebt sich mit schraeger Kante ueber Ebene 1.
   ══════════════════════════════════════════════════════════════════ */

.ebene--zwei {
  --kante: 3.5rem;
  z-index: 2;
  margin-top: calc(var(--kante) * -1 - 2.5rem);
  min-height: 100svh;
  background: var(--tief);
  overflow: hidden;
  clip-path: polygon(0 var(--kante), 100% 0, 100% 100%, 0 100%);
}
/* Der helle Strich genau auf der Schnittkante */
.ebene--zwei::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(var(--kante) + 6px);
  background: var(--papier);
  clip-path: polygon(0 var(--kante), 100% 0, 100% 6px, 0 calc(var(--kante) + 6px));
  z-index: 30;
}

.ebene__innen {
  position: relative;
  z-index: 2;
  max-width: var(--breite);
  margin: 0 auto;
  padding: 5rem var(--rand) 4rem;
}

.ebene__kopf {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-bottom: 1.2rem;
}
.ebene__titel {
  font-size: clamp(2.1rem, 9vw, 4.5rem);
  transform: rotate(-1.1deg);
  transform-origin: left center;
}
.ebene__untertitel {
  font-family: var(--schrift-masch);
  color: var(--gedaempft);
  font-size: .85rem;
  margin: 0 0 2rem;
  max-width: 34rem;
}

/* ---- Aufnäher: Überschrift und Auswahl ----
   Wie ein aufgenähter Rückenaufnäher auf der Jacke. Der Kasten ist nötig,
   damit Schrift auch auf einem unruhigen Foto lesbar bleibt - freistehend
   verschwindet sie sonst je nach Bild. */

.aufnaeher {
  align-self: flex-start;
  max-width: 100%;
  background: rgba(11, 11, 11, .9);
  border: 2px solid var(--text);
  padding: 1rem 1.3rem 1.1rem;
  box-shadow: 7px 7px 0 rgba(0, 0, 0, .55);
  transform: rotate(-1.2deg);
  backdrop-filter: blur(4px);
}
.aufnaeher .ebene__kopf { margin-bottom: 0; }
.aufnaeher .ebene__titel { transform: none; }

.kuttenfilter {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--linie);
}
.kuttenfilter__punkt {
  border: 1px solid var(--linie);
  color: var(--gedaempft);
  text-decoration: none;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .42rem .8rem;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.kuttenfilter__punkt:hover { color: var(--text); border-color: var(--text); }
.kuttenfilter__punkt.ist-aktiv {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--text);
}

/* ---- Die Kutte ----
   Die Buttons hängen auf von Hand gesetzten Plätzen, überlappend und
   schief - wie an einer echten Nietenjacke. Größe und Position stehen in
   Prozent, damit die ganze Anordnung mit der Fläche mitwächst.        */

.kutte {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #0d0d0c;
}

/*
 * Dunst über der Jacke: dunkelt genau dort ab, wo Überschrift und Knopf
 * liegen. Ohne das wäre die Schrift auf einem hellen Foto nicht lesbar.
 */
.kutte__dunst {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background:
    radial-gradient(62% 46% at 6% 12%, rgba(0,0,0,.85), transparent 72%),
    radial-gradient(52% 28% at 50% 97%, rgba(0,0,0,.78), transparent 74%),
    linear-gradient(to bottom, rgba(0,0,0,.4) 0%, transparent 20%, transparent 76%, rgba(0,0,0,.55) 100%);
}
/* Am Handy steht der Kopfbereich enger über den Ansteckern - dort muss
   der Dunst kräftiger sein, sonst leidet die Lesbarkeit. */
@media (max-width: 61.99rem) {
  .kutte__dunst {
    background:
      linear-gradient(to bottom, rgba(0,0,0,.88) 0%, rgba(0,0,0,.7) 22%, transparent 42%,
                      transparent 74%, rgba(0,0,0,.82) 100%);
  }
}

/*
 * Die Textschicht liegt über allem, lässt Zeiger aber durch - sonst wären
 * die Anstecker unter dem Kopfbereich und der Fußzeile nicht anklickbar.
 */
.ebene__ueber {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  max-width: var(--breite);
  margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + 2.5rem) var(--rand) 3.5rem;
  pointer-events: none;
}
.ebene__ueber .ebene__kopf,
.ebene__ueber .ebene__handlung { pointer-events: none; }
.ebene__ueber .aufnaeher,
.ebene__ueber a,
.ebene__ueber .kuttenfilter,
.ebene__ueber .kutte__leer { pointer-events: auto; }
.ebene__ueber .ebene__handlung { margin-top: auto; }

.kutte__foto,
.kutte__leder {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.kutte__leder {
  background:
    radial-gradient(120% 90% at 50% -10%, #262625, #0c0c0b 72%),
    repeating-linear-gradient(112deg, rgba(255,255,255,.014) 0 3px, transparent 3px 8px),
    repeating-linear-gradient(28deg, rgba(0,0,0,.22) 0 2px, transparent 2px 9px);
}
/* Mittelnaht */
.kutte__naht {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 0;
  border-left: 1px dashed rgba(240, 237, 230, .1);
}
/* Nietenreihe an der Schulter */
.kutte__nieten {
  position: absolute;
  top: 6%; left: 8%; right: 8%;
  height: 7px;
  background-image: radial-gradient(circle, rgba(240,237,230,.32) 0 2px, transparent 2.6px);
  background-size: 22px 7px;
  opacity: .5;
}

.kutte__schleier {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, calc(var(--kutte-schleier, 45) / 100));
}

.kutte__gruppe { position: absolute; inset: 0; }
.kutte__gruppe[hidden] { display: none; }

.kutte__leer {
  max-width: 34rem;
  margin: 2rem 0;
  border: 1px dashed var(--linie);
  color: var(--gedaempft);
  background: rgba(0, 0, 0, .7);
  padding: 1rem;
  font-size: .85rem;
}

/* ---- Ein Anstecker ---- */

.anstecker {
  position: absolute;
  left: var(--mx, var(--x));
  top: var(--my, var(--y));
  width: var(--md, var(--d));
  aspect-ratio: 1 / 1;
  margin-left: calc(var(--md, var(--d)) * -0.5);
  margin-top: calc(var(--md, var(--d)) * -0.5);
  z-index: var(--z, 1);
  text-decoration: none;
  color: var(--text);
  transform: rotate(var(--mr, var(--r)));

  /*
   * Die Größe läuft über die eigene scale-Eigenschaft, nicht über transform.
   * Dadurch stören sich Ein-/Ausblenden und das Anheben beim Zeigen nicht
   * gegenseitig - sonst müsste jede Regel die Drehung mitschleppen.
   */
  scale: 1;
  transition:
    transform .3s var(--schwung-hart),
    opacity .28s ease calc(var(--nr, 0) * 16ms),
    scale .44s var(--schwung-hart) calc(var(--nr, 0) * 16ms);
}
.anstecker--nur-desktop { display: none; }

/* Umschalten der Auswahl: alte Anstecker schrumpfen weg, neue springen auf */
.kutte__gruppe.geht .anstecker { opacity: 0; scale: .2; }
.kutte__gruppe.kommt .anstecker { opacity: 0; scale: .2; transition: none; }

.anstecker__nadel {
  position: absolute;
  left: 50%; top: 4%;
  width: 2px; height: 22%;
  margin-left: -1px;
  background: linear-gradient(to bottom, var(--gedaempft), transparent);
  opacity: 0;
  transform: translateY(-30%);
  transition: opacity .3s ease, transform .35s var(--schwung);
}

.anstecker__scheibe {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--karte);
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, .85),
    0 0 0 3px rgba(240, 237, 230, .3),
    0 10px 20px rgba(0, 0, 0, .75);
  transition: box-shadow .3s ease;
}
.anstecker__bild { width: 100%; height: 100%; object-fit: cover; display: block; }
.anstecker__platzhalter {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background: var(--platzfarbe, var(--karte));
  font-family: var(--schrift-display);
  font-size: clamp(.9rem, 3.2vw, 2rem);
  color: var(--text);
}
.anstecker__woelbung {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(112% 78% at 30% 15%, rgba(255,255,255,.3), rgba(255,255,255,0) 52%),
    radial-gradient(100% 100% at 50% 120%, rgba(0,0,0,.62), rgba(0,0,0,0) 58%);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.35);
}
.anstecker__glanz {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  overflow: hidden;
}
.anstecker__glanz::after {
  content: "";
  position: absolute;
  top: -60%; left: -130%;
  width: 55%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: rotate(22deg);
  transition: left .6s var(--schwung);
}

/* Das Schild taucht erst auf, wenn man den Button anhebt */
.anstecker__schild {
  position: absolute;
  top: calc(100% + .45rem);
  left: 50%;
  transform: translate(-50%, -.35rem);
  display: grid;
  gap: .05rem;
  justify-items: center;
  width: max-content;
  max-width: 11rem;
  background: rgba(0, 0, 0, .88);
  border: 1px solid var(--linie);
  padding: .3rem .5rem;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .28s var(--schwung);
}
.anstecker__name {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.25;
}
.anstecker__preis { font-size: .74rem; color: var(--gedaempft); font-family: var(--schrift-masch); }
.anstecker__weg {
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--akzent);
}

.anstecker:hover,
.anstecker:focus-visible {
  z-index: 40;
  transform: rotate(0deg) translateY(-.5rem) scale(1.09);
}
.anstecker:hover .anstecker__nadel,
.anstecker:focus-visible .anstecker__nadel { opacity: 1; transform: translateY(-85%); }
.anstecker:hover .anstecker__glanz::after,
.anstecker:focus-visible .anstecker__glanz::after { left: 150%; }
.anstecker:hover .anstecker__scheibe,
.anstecker:focus-visible .anstecker__scheibe {
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, .85),
    0 0 0 3px var(--akzent),
    0 18px 30px rgba(0, 0, 0, .8);
}
.anstecker:hover .anstecker__schild,
.anstecker:focus-visible .anstecker__schild { opacity: 1; transform: translate(-50%, 0); }
.anstecker:active { transform: rotate(0deg) translateY(-.15rem) scale(1.03); }

.ebene__handlung { margin: 2.8rem 0 0; text-align: center; }

/* ---- Der grosse Knopf ---- */

.grossknopf {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  overflow: hidden;
  background: var(--akzent);
  color: var(--text);
  text-decoration: none;
  font-weight: 900;
  font-size: .95rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 1rem 1.9rem;
  border: 2px solid var(--akzent);
  box-shadow: 6px 6px 0 var(--papier);
  transition: transform .18s var(--schwung), box-shadow .18s var(--schwung);
}
.grossknopf > span { position: relative; z-index: 1; }
.grossknopf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tinte);
  transform: translateY(101%);
  transition: transform .32s var(--schwung);
}
.grossknopf:hover,
.grossknopf:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--papier);
}
.grossknopf:hover::before,
.grossknopf:focus-visible::before { transform: translateY(0); }
.grossknopf__pfeil { transition: transform .3s var(--schwung); }
.grossknopf:hover .grossknopf__pfeil { transform: translateX(.35rem); }
.grossknopf--hell { box-shadow: 6px 6px 0 rgba(0, 0, 0, .55); }
.grossknopf--hell:hover { box-shadow: 2px 2px 0 rgba(0, 0, 0, .55); }

.leerhinweis {
  border: 1px dashed var(--linie);
  color: var(--gedaempft);
  padding: 1.3rem;
  font-size: .9rem;
  margin-top: 1.5rem;
}

/* ---- Motivkachel ---- */

.kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--text);
}
/*
 * Kein Einblenden beim Hereinscrollen: die Kachel steht im Katalog, in der
 * Suche und unter "Passt dazu" - alles Flaechen zum Vergleichen, nicht zum
 * Inszenieren. Frueher hing sie an einem data-zeigen-Block der Startseite;
 * ohne den blieb sie auf Deckkraft null und war schlicht unsichtbar.
 */

.knopf {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  transform: rotate(var(--dreh, 0deg));
  transition: transform .32s var(--schwung-hart);
}

/* Die Nadel auf der Rueckseite - blitzt beim Anheben kurz hervor */
.knopf__nadel {
  position: absolute;
  left: 50%; top: 8%;
  width: 2px; height: 26%;
  margin-left: -1px;
  background: linear-gradient(to bottom, var(--gedaempft), transparent);
  opacity: 0;
  transform: translateY(-40%);
  transition: opacity .3s ease, transform .35s var(--schwung);
}

.knopf__scheibe {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--karte);
  box-shadow:
    0 0 0 2px var(--tief),
    0 0 0 3px color-mix(in srgb, var(--text) 28%, transparent),
    0 10px 22px rgba(0, 0, 0, .6);
  transition: box-shadow .3s ease;
}
.knopf__bild { width: 100%; height: 100%; object-fit: cover; display: block; }
.knopf__platzhalter {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background: var(--platzfarbe, var(--karte));
  font-family: var(--schrift-display);
  font-size: 2.2rem;
  letter-spacing: .03em;
  color: var(--text);
}

/* Woelbung: innen dunkel am Rand, hell oben - macht aus der Scheibe einen Button */
.knopf__woelbung {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(112% 78% at 30% 15%, rgba(255,255,255,.3), rgba(255,255,255,0) 52%),
    radial-gradient(100% 100% at 50% 120%, rgba(0,0,0,.6), rgba(0,0,0,0) 58%);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.32);
}

/* Glanzstreifen, der beim Drueberfahren durchwandert */
.knopf__glanz {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  overflow: hidden;
}
.knopf__glanz::after {
  content: "";
  position: absolute;
  top: -60%; left: -120%;
  width: 55%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transform: rotate(22deg);
  transition: left .65s var(--schwung);
}

.kachel:hover .knopf,
.kachel:focus-visible .knopf { transform: rotate(var(--dreh, 0deg)) translateY(-.55rem) scale(1.04); }
.kachel:hover .knopf__nadel { opacity: 1; transform: translateY(-90%); }
.kachel:hover .knopf__glanz::after { left: 140%; }
.kachel:hover .knopf__scheibe {
  box-shadow:
    0 0 0 2px var(--tief),
    0 0 0 3px var(--akzent),
    0 18px 30px rgba(0, 0, 0, .7);
}
.kachel:active .knopf { transform: rotate(var(--dreh, 0deg)) translateY(-.15rem) scale(1.01); }

.kachel__text { display: grid; gap: .15rem; }
.kachel__name {
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.35;
  transition: color .2s ease;
}
.kachel:hover .kachel__name { color: var(--akzent); }
.kachel__preis { font-size: .8rem; color: var(--gedaempft); font-family: var(--schrift-masch); }
.kachel__hinweis {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--akzent);
  border: 1px solid var(--akzent);
  padding: .05rem .3rem;
}


/* ══════════════════════════════════════════════════════════════════
   5  EBENE 3 - DAS PAPIER
   Farben gedreht: Knochenweiss statt Nacht, mit gerissener Kante.
   Genau dieser Bruch nimmt der Seite die Gleichfoermigkeit.
   ══════════════════════════════════════════════════════════════════ */

.ebene--drei {
  z-index: 3;
  margin-top: -2rem;
  /* Nur so hoch wie nötig - die volle Bildschirmhöhe hätte bei wenigen
     Kategorien unten eine tote Fläche hinterlassen. */
  min-height: 60svh;
  background: var(--papier);
  overflow: hidden;

  /* Ab hier gilt die gedrehte Palette fuer alles darin */
  --text: var(--tinte);
  --gedaempft: #5C5A55;
  --linie: rgba(0, 0, 0, .22);
  --karte: rgba(0, 0, 0, .06);
  color: var(--tinte);

  clip-path: polygon(
    0% 1.5rem,  4% .5rem,  8% 1.7rem, 13% .35rem, 17% 1.25rem, 22% .2rem,
    27% 1.6rem, 32% .6rem, 37% 1.8rem, 42% .3rem, 47% 1.35rem, 52% .5rem,
    57% 1.7rem, 62% .4rem, 67% 1.45rem, 72% .75rem, 77% 1.85rem, 82% .3rem,
    87% 1.55rem, 92% .6rem, 96% 1.3rem, 100% .45rem,
    100% 100%, 0% 100%
  );
}
/* Kopierer-Struktur auf dem Papier */
.ebene--drei::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(0,0,0,.16) .5px, transparent 1px);
  background-size: 3px 3px;
}
/* Ausschneide-Schriftzug, wie aus Zeitungen geklebt */
.ebene__titel--ausschnitt { transform: none; line-height: 1.25; }
.ausschnitt__wort { display: inline-block; white-space: nowrap; }
.ausschnitt__luecke { display: inline-block; width: .3em; }
.ausschnitt__zeichen {
  display: inline-block;
  background: var(--tinte);
  color: var(--papier);
  padding: .02em .1em;
  margin: 0 .012em;
  transform: rotate(var(--dreh, 0deg));
  transition: transform .28s var(--schwung-hart), background .2s ease, color .2s ease;
}
.ausschnitt__zeichen:nth-child(3n) {
  background: var(--papier);
  color: var(--tinte);
  box-shadow: inset 0 0 0 2px var(--tinte);
}
.ausschnitt__zeichen:nth-child(5n) { background: var(--akzent); color: var(--papier); box-shadow: none; }
.ebene__titel--ausschnitt:hover .ausschnitt__zeichen {
  transform: rotate(calc(var(--dreh, 0deg) * -1.4)) translateY(-.1em);
}

/* Hintergrundfoto unter hellem Schleier - wirkt wie aufs Papier gedruckt */
.papierbild {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.papierbild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.papierbild__schleier {
  position: absolute;
  inset: 0;
  background: var(--papier);
  opacity: calc(var(--ebene3-schleier, 78) / 100);
}
/*
 * Zusätzlicher Papierschleier genau dort, wo Überschrift und Fließtext
 * stehen - nach unten auslaufend. Ohne ihn schlägt ein kontrastreiches
 * Foto durch und macht besonders die kleine Schrift unlesbar, egal wie
 * der Regler steht. Weiter unten bleibt das Foto sichtbar.
 */
.papierbild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--papier) 78%, transparent) 0%,
    color-mix(in srgb, var(--papier) 70%, transparent) 22%,
    color-mix(in srgb, var(--papier) 30%, transparent) 40%,
    transparent 58%);
}
/* Die Kopierer-Körnung liegt über dem Foto, der Inhalt über beidem */
.ebene--drei::before { z-index: 1; }
.ebene--drei .ebene__innen { z-index: 2; }
/* Überschrift und Unterzeile laufen mit bis an den Rand, damit sie auf
   breiten Schirmen dieselbe linke Kante haben wie die Zeilen darunter.
   Der Abstand nach oben ist bewusst knapp - die Liste soll wuchtig
   dastehen und nicht in Leerraum schwimmen. */
.ebene__innen--kopfteil { max-width: none; padding-top: 2.2rem; padding-bottom: 0; }
.ebene__innen--kopfteil .ebene__kopf { margin-bottom: .55rem; }
/* Unter der Überschrift, über die halbe Breite laufend - so bleibt die
   Zeilenlänge lesbar, ohne dass der Text als schmale Säule dasteht. */
.ebene__innen--kopfteil .ebene__untertitel { margin-bottom: 0; max-width: 52rem; }

/* Auf Ebene 3 deutlich dunkler als das übliche Grau: die Schreibmaschinen-
   schrift ist klein, und darunter kann ein Foto liegen. */
.ebene--drei .ebene__untertitel {
  color: #46443F;
  color: color-mix(in srgb, var(--tinte) 80%, var(--papier));
}

/* ---- Kategorien als Liste ----
   Große Type statt Bildkacheln. Beim Zeigen kippt die Zeile auf Tinte und
   das Kategoriebild fährt von rechts herein; am Handy, wo es kein Zeigen
   gibt, steht es dauerhaft klein links in der Zeile. */

/*
 * Die Liste läuft von Rand zu Rand, nicht im mittigen Inhaltsblock - erst
 * dadurch wirken die Trennlinien wie Zeilen auf einem Bogen und nicht wie
 * ein eingerückter Kasten. Der Abstand nach außen sitzt in den Zeilen.
 */
.kategorienliste {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: .7rem 0 0;
  padding: 0 0 1.4rem;
  border-top: 3px solid var(--tinte);
}
.kategorie { border-bottom: 3px solid var(--tinte); }

.kategorie__zeile {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .3rem var(--rand);
  overflow: hidden;
  text-decoration: none;
  color: var(--tinte);
  transition: background .3s var(--schwung), color .25s ease, padding-left .3s var(--schwung);
}
.kategorie__zeile:hover,
.kategorie__zeile:focus-visible {
  background: var(--tinte);
  color: var(--papier);
  padding-left: calc(var(--rand) + .8rem);
}

.kategorie__bild {
  flex: 0 0 auto;
  display: block;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--karte);
  box-shadow: 0 0 0 2px currentColor;
}
.kategorie__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kategorie__platzhalter {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background: var(--platzfarbe, var(--karte));
  font-family: var(--schrift-display);
  font-size: .95rem;
  color: var(--papier);
}

.kategorie__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--schrift-display);
  font-size: clamp(2.1rem, 9.5vw, 5.6rem);
  line-height: .88;
  text-transform: uppercase;
  letter-spacing: -.025em;
}

/* Auflagennummer: große Zahl, kleines Wort darunter. Die Mindestbreite
   sorgt dafür, dass die Zahlen aller Zeilen untereinander fluchten. */
.kategorie__anzahl {
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  min-width: 3.4rem;
  line-height: 1;
}
.kategorie__wert {
  font-family: var(--schrift-display);
  font-size: clamp(1.5rem, 4.5vw, 2.8rem);
  line-height: .85;
  letter-spacing: -.02em;
}
.kategorie__wort {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  /* Nicht schwächer: darunter fällt der Kontrast der Kleinschrift
     unter die Lesbarkeitsschwelle. */
  opacity: .68;
  margin-top: .18rem;
}

.kategorie__pfeil {
  flex: 0 0 auto;
  font-size: 1.2rem;
  opacity: 0;
  transform: translateX(-.5rem);
  transition: opacity .3s ease, transform .35s var(--schwung);
}
.kategorie__zeile:hover .kategorie__pfeil,
.kategorie__zeile:focus-visible .kategorie__pfeil { opacity: 1; transform: none; }


/* ══════════════════════════════════════════════════════════════════
   6  FUSSBEREICH
   ══════════════════════════════════════════════════════════════════ */

.fuss {
  position: relative;
  z-index: 4;
  background: var(--tief);
  overflow: hidden;
}

/*
 * Liegt ein Hintergrundbild, laesst der Fussbereich es durch. Der Verlauf
 * nach unten haelt die Schrift trotzdem lesbar - die Fusszeilentexte sind
 * gedaempftes Grau, und ueber einem hellen Foto waeren sie sonst weg.
 * Bewusst Schwarz und nicht --tief: der Verlauf soll abdunkeln, egal
 * welche Grundfarbe eingestellt ist.
 */
.hat-untergrund .fuss {
  background: linear-gradient(180deg, rgba(0, 0, 0, .62) 0, rgba(0, 0, 0, .92) 100%);
}

/*
 * Der Schleier allein reicht nicht. Steht er auf 0 und das Foto ist an
 * einer Stelle fast weiss, kommt gedaempftes Grau nur noch auf 2:1. Ueber
 * dem Bild wird deshalb die volle Textfarbe genommen, dazu ein dunkler
 * Schatten als Rueckversicherung fuer helle Flecken.
 */
.hat-untergrund .fuss__menue a,
.hat-untergrund .fuss__kontakt,
.hat-untergrund .fuss__kontakt a,
.hat-untergrund .fuss__hinweis,
.hat-untergrund .termin__monat,
.hat-untergrund .termin__was { color: var(--text); }

.hat-untergrund .fuss { text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.hat-untergrund .fuss__gross { text-shadow: none; }

.termine__innen {
  max-width: var(--breite-laden);
  margin: 0 auto;
  padding: 4rem var(--rand) 2rem;
}
.termine__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }

.termin {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--linie);
  padding: .85rem .2rem;
  transition: background .25s ease, padding-left .25s ease;
}
.js .termin {
  opacity: 0;
  transform: translateX(-1rem);
  transition: opacity .5s ease, transform .5s var(--schwung), background .25s ease, padding-left .25s ease;
  transition-delay: calc(var(--nr, 0) * 70ms);
}
.js .ist-da.termin { opacity: 1; transform: none; }
.termin:last-child { border-bottom: 1px solid var(--linie); }
.termin:hover { background: var(--karte); padding-left: .8rem; }

.termin__tag {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3.1rem;
  border: 2px solid var(--spar);
  padding: .25rem 0;
  color: var(--spar);
}
.termin__zahl { font-family: var(--schrift-display); font-size: 1.35rem; line-height: 1; }
.termin__monat { font-size: .66rem; letter-spacing: .16em; font-weight: 800; }

.termin__text { display: grid; gap: .1rem; min-width: 0; }
.termin__ort {
  font-family: var(--schrift-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  line-height: 1.05;
}
.termin__was { color: var(--gedaempft); font-size: .8rem; }

/* Riesiger Schriftzug am Fuss, halb abgeschnitten */
.fuss__gross {
  font-family: var(--schrift-display);
  font-size: clamp(3.5rem, 17vw, 12rem);
  line-height: .78;
  text-transform: uppercase;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px var(--linie);
  margin: 2rem 0 -.4rem;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
}

.fuss__unten {
  max-width: var(--breite-laden);
  margin: 0 auto;
  padding: 1.6rem var(--rand) 2.8rem;
  border-top: 1px solid var(--linie);
}
.fuss__menue { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-bottom: 1rem; }
.fuss__menue a {
  position: relative;
  color: var(--gedaempft);
  text-decoration: none;
  font-size: .84rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s ease;
}
.fuss__menue a:hover { color: var(--akzent); }
.fuss__kontakt { margin: 0 0 .9rem; font-size: .85rem; }
.fuss__kontakt a { color: var(--gedaempft); }
.fuss__hinweis { margin: 0; font-size: .8rem; color: var(--gedaempft); line-height: 1.7; max-width: 46rem; }


/* ══════════════════════════════════════════════════════════════════
   7  TEXTSEITEN
   ══════════════════════════════════════════════════════════════════ */

.textseite {
  max-width: 46rem;
  margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + 3rem) var(--rand) 5rem;
}
.textseite--mitte { text-align: center; }
.textseite__titel { font-size: clamp(2.2rem, 10vw, 4rem); margin-bottom: 1.4rem; transform: rotate(-1deg); transform-origin: left center; }
.textseite--mitte .textseite__titel { transform: none; }
.textseite__lead { color: var(--gedaempft); }
.textseite__inhalt p { margin: 0 0 1rem; }
.textseite__zurueck { margin-top: 2.5rem; }

/* ══════════ Textseiten als Blatt ══════════

   Die Lesebreite bleibt bei rund 70 Zeichen, das ist Typografie und keine
   Sparsamkeit. Damit die Spalte auf einem breiten Schirm trotzdem nicht
   im Nichts haengt, bekommt sie einen hellen Untergrund wie ein Blatt
   Papier und links daneben eine schmale Spalte mit Sprungliste und den
   anderen Seiten.
   ══════════════════════════════════════════════════════════════════ */

.blattseite {
  max-width: var(--breite-laden);
  margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + 2.5rem) var(--rand) 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.blattseite__rand { display: grid; gap: 1.6rem; align-content: start; }

/* ---- Die Seitenlinks als Balken, wie die Kategorien auf der Startseite ---- */

.seitenbalken { display: grid; }

.seitenbalken__zeile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .7rem .9rem;
  border-bottom: 2px solid var(--linie);
  text-decoration: none;
  color: var(--text);
  transition: background .28s var(--schwung), color .2s ease, padding-left .28s var(--schwung);
}
.seitenbalken__zeile:first-child { border-top: 2px solid var(--linie); }

.seitenbalken__name {
  font-family: var(--schrift-display);
  font-size: 1.15rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1.15;
}

.seitenbalken__pfeil {
  flex: 0 0 auto;
  opacity: 0;
  transform: translateX(-.4rem);
  transition: opacity .22s ease, transform .22s var(--schwung);
}

.seitenbalken__zeile:hover,
.seitenbalken__zeile:focus-visible {
  background: var(--papier);
  color: var(--tinte);
  padding-left: 1.5rem;
  border-bottom-color: var(--papier);
}
.seitenbalken__zeile:hover .seitenbalken__pfeil,
.seitenbalken__zeile:focus-visible .seitenbalken__pfeil { opacity: 1; transform: none; }

/* Die Seite, auf der man gerade steht, traegt den roten Balken. */
.seitenbalken__zeile.ist-hier {
  background: var(--akzent);
  color: var(--text);
  border-bottom-color: var(--akzent);
}
.seitenbalken__zeile.ist-hier .seitenbalken__pfeil { opacity: 1; transform: none; }

.sprungliste__punkte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
  counter-reset: sprung;
}
.sprungliste__punkt { font-size: .86rem; line-height: 1.35; }
.sprungliste__punkt--3 { padding-left: .9rem; font-size: .8rem; }
.sprungliste__punkt a {
  color: var(--text);
  text-decoration: none;
  border-left: 2px solid var(--linie);
  padding-left: .6rem;
  display: block;
}
.sprungliste__punkt a:hover { border-left-color: var(--akzent); color: var(--akzent); }


/* ---- Das Blatt selbst ---- */

.blatt {
  background: #F3F0E8;
  color: #16150F;
  /* Am Handy schmaler Rand, sonst bleibt auf kleinen Schirmen kaum Platz fuer Text. */
  padding: 1.8rem 1.3rem 2.4rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
  max-width: 68rem;
  position: relative;
}

/* Die abgerissene Oberkante. Kostet nichts und nimmt dem Blatt das
   Fabrikneue. */
.blatt::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -6px;
  height: 6px;
  background: #F3F0E8;
  clip-path: polygon(
    0 100%, 2% 20%, 5% 80%, 9% 10%, 13% 70%, 17% 25%, 22% 85%, 26% 15%,
    31% 75%, 35% 30%, 40% 90%, 44% 20%, 49% 70%, 54% 15%, 58% 80%, 63% 25%,
    67% 85%, 72% 10%, 76% 70%, 81% 30%, 85% 90%, 90% 20%, 94% 75%, 98% 35%,
    100% 100%);
}

.blatt__titel {
  font-family: var(--schrift-display);
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.05;
  margin: 0 0 1.8rem;
  color: #16150F;
  transform: rotate(-.6deg);
  transform-origin: left center;
}

/* Etwas groessere Schrift und mehr Zeilenabstand: bei einem breiten Blatt
   werden die Zeilen lang, und dann muss das Auge beim Zurueckspringen die
   richtige Zeile wiederfinden. */
.blatt__inhalt { font-size: 1.12rem; line-height: 1.8; }
.blatt__inhalt p { margin: 0 0 1.2rem; }
.blatt__inhalt h2 {
  font-size: 1.45rem;
  line-height: 1.2;
  margin: 2.4rem 0 .8rem;
  padding-top: 1.2rem;
  border-top: 2px solid rgba(22, 21, 15, .18);
  scroll-margin-top: calc(var(--kopf-hoehe) + 1.5rem);
}
.blatt__inhalt h3 {
  font-size: 1.12rem;
  margin: 1.8rem 0 .5rem;
  scroll-margin-top: calc(var(--kopf-hoehe) + 1.5rem);
}
.blatt__inhalt ul,
.blatt__inhalt ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.blatt__inhalt li { margin-bottom: .4rem; }
.blatt__inhalt a { color: #A8140F; }
.blatt__inhalt strong { font-weight: 800; }
.blatt__inhalt blockquote {
  margin: 1.2rem 0;
  padding: .2rem 0 .2rem 1.1rem;
  border-left: 3px solid var(--akzent);
  font-style: italic;
}
.blatt .kommtnoch { color: #16150F; border-left-color: var(--akzent); }

/* Leere Seite: kein Kasten, keine Erklaerung, nur die ehrliche Ansage.
   Was noch fehlt und was davon Pflicht ist, sieht der Betreiber im Backstage. */
.kommtnoch {
  font-family: var(--schrift-masch);
  font-size: 1.05rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text);          /* einziger Inhalt der Seite - also lesbar, nicht gedaempft */
  margin: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--akzent);
}

.fehlerzahl {
  font-family: var(--schrift-display);
  font-size: clamp(5rem, 26vw, 11rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--akzent);
  margin: 0 0 .5rem;
}

.hinweiskasten {
  border-left: 3px solid var(--akzent);
  background: var(--karte);
  padding: 1.2rem 1.3rem;
  font-size: .93rem;
}
.hinweiskasten p { margin: 0 0 .6rem; }
.hinweiskasten p:last-child { margin-bottom: 0; }


/* ══════════════════════════════════════════════════════════════════
   7b  DER LADEN - Katalog, Suche, Motivseite

   Bewusst ruhig gehalten: hier wird verglichen und gesucht, nicht
   inszeniert. Die Startseite ist das Schaufenster, das hier ist die
   Werkbank - und die Motive selbst sind bunt genug.
   ══════════════════════════════════════════════════════════════════ */

.laden {
  max-width: var(--breite-laden);
  margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + 1.6rem) var(--rand) 4rem;
}

.ladenkopf { margin-bottom: 1.4rem; }
.ladenkopf__titel {
  font-size: clamp(2rem, 9vw, 3.6rem);
  transform: rotate(-1deg);
  transform-origin: left center;
}
.ladenkopf__text { color: var(--gedaempft); font-size: .9rem; margin: .7rem 0 0; max-width: 46rem; }

/* ---- Kategorien: am Handy wischbare Leiste, am Desktop Spalte ---- */

.katspalte { margin-bottom: 1.6rem; }
.katspalte__ueber {
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gedaempft);
  font-weight: 800;
  margin: 0 0 .6rem;
}
.katspalte__liste {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: .4rem;
  scrollbar-width: none;
}
.katspalte__liste::-webkit-scrollbar { display: none; }

/* Dieselbe Handschrift wie die Kategorienliste auf Ebene 3, nur klein:
   Display-Schrift, Trennlinien, Umschlag auf Farbe beim Zeigen. */
.katspalte__punkt {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid var(--linie);
  /* Mindestens 44px hoch - darunter trifft man am Handy daneben. */
  min-height: 2.75rem;
  padding: .4rem .8rem;
  color: var(--gedaempft);
  text-decoration: none;
  font-family: var(--schrift-display);
  font-size: 1.05rem;
  letter-spacing: .005em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease, background .2s ease, padding-left .2s var(--schwung);
}
.katspalte__punkt:hover { border-color: var(--text); color: var(--text); }
.katspalte__punkt.ist-aktiv {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--text);
}
.katspalte__zahl {
  font-family: var(--schrift-masch);
  font-size: .74rem;
  font-weight: 700;
  opacity: .7;
}

/* ---- Kopfzeile über dem Raster ---- */

.katkopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: .7rem 0;
  margin-bottom: 1.4rem;
}
.katkopf__zahl {
  margin: 0;
  font-family: var(--schrift-masch);
  font-size: .8rem;
  color: var(--gedaempft);
}

.sortierung { display: flex; flex-wrap: wrap; gap: .3rem; }
.sortierung__punkt {
  border: 1px solid transparent;
  padding: .28rem .6rem;
  color: var(--gedaempft);
  text-decoration: none;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sortierung__punkt:hover { color: var(--text); }
.sortierung__punkt.ist-aktiv { border-color: var(--text); color: var(--text); }

/* ---- Das Raster ---- */

.motivraster {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem .9rem;
}

/*
 * "Passt dazu" unter einem Motiv. Das ist eine Anregung nebenbei und
 * nicht die Ware selbst, deshalb kleiner als im Katalog: mehr Stueck je
 * Reihe, engerer Abstand und kleinere Beschriftung.
 */
/*
 * Feste kleine Breite statt einer Spaltenzahl je Bildschirmgroesse. Sonst
 * muesste in jedem Breakpoint eine eigene Zeile stehen, und weil
 * .motivraster und .motivraster--schmal gleich schwer wiegen, gewinnt
 * dort sonst die spaetere Zeile. So passen sich die Kacheln von selbst an
 * und bleiben immer gleich gross.
 */
.motivraster.motivraster--schmal {
  /* auto-fit statt auto-fill: leere Spalten fallen zusammen, damit die
     Kacheln als Gruppe mittig stehen und nicht links kleben. Die Spanne
     laesst sie am Handy etwas mitwachsen, statt dort breite Raender zu
     lassen, deckelt sie am Rechner aber bei 8,5 rem. */
  grid-template-columns: repeat(auto-fit, minmax(7rem, 8.5rem));
  justify-content: center;
  gap: 1rem .8rem;
}
.motivraster--schmal .kachel { gap: .4rem; }
.motivraster--schmal .kachel__name { font-size: .74rem; letter-spacing: .07em; }
.motivraster--schmal .kachel__preis { font-size: .76rem; }
.motivraster--schmal .kachel__hinweis { font-size: .66rem; }

.leermeldung {
  border: 1px dashed var(--linie);
  background: var(--karte);
  padding: 1.4rem;
  font-size: .92rem;
  color: var(--gedaempft);
}
.leermeldung strong { color: var(--text); }
.leermeldung p { margin: 0 0 .6rem; }
.leermeldung__weiter { margin-top: 1.2rem; }

/* ---- Blättern ---- */

.blaettern {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linie);
}
.blaettern__zahlen { display: flex; flex-wrap: wrap; gap: .25rem; order: -1; width: 100%; justify-content: center; }
.blaettern__zahl {
  min-width: 2.1rem;
  padding: .35rem .5rem;
  border: 1px solid var(--linie);
  color: var(--text);
  text-decoration: none;
  text-align: center;
  font-family: var(--schrift-masch);
  font-size: .8rem;
}
.blaettern__zahl:hover { border-color: var(--akzent); }
.blaettern__zahl.ist-aktiv { background: var(--akzent); border-color: var(--akzent); font-weight: 700; }
.blaettern__luecke { color: var(--gedaempft); padding: .35rem .2rem; }
.blaettern__pfeil {
  color: var(--text);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.blaettern__pfeil:hover { color: var(--akzent); }
.blaettern__pfeil.ist-aus { color: var(--linie); }

/* ---- Große Suche ---- */

.grosssuche { display: flex; margin-top: 1.2rem; max-width: 34rem; }
.grosssuche__feld {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-right: 0;
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  padding: .7rem .9rem;
}
.grosssuche__feld:focus { border-color: var(--akzent); outline: none; }
.grosssuche__knopf {
  flex: 0 0 auto;
  background: var(--akzent);
  border: 1px solid var(--akzent);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 1.1rem;
  cursor: pointer;
}

/* ══════════ Motivseite ══════════ */

.motivseite {
  max-width: var(--breite-laden);
  margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + 1.6rem) var(--rand) 7rem;
}

.brotkrumen {
  display: flex;
  gap: .5rem;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gedaempft);
  margin-bottom: 1.4rem;
}
.brotkrumen a { color: var(--gedaempft); text-decoration: none; }
.brotkrumen a:hover { color: var(--akzent); }

.motivseite__oben { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; }

.motivbild { max-width: 22rem; margin: 0 auto; width: 100%; }
.knopf--gross { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; }
.knopf--gross .knopf__scheibe {
  box-shadow:
    0 0 0 3px var(--tief),
    0 0 0 5px color-mix(in srgb, var(--text) 30%, transparent),
    0 20px 44px rgba(0, 0, 0, .7);
}
.knopf--gross .knopf__platzhalter { font-size: clamp(3rem, 18vw, 6rem); }

.motivangaben__name {
  font-size: clamp(2rem, 9vw, 3.4rem);
  line-height: .92;
  margin-bottom: .9rem;
}
.motivangaben__text { color: var(--gedaempft); font-size: .95rem; margin: 0 0 1.4rem; max-width: 38rem; }
.motivangaben__weg {
  display: inline-block;
  border: 1px solid var(--akzent);
  color: var(--akzent);
  padding: .55rem .8rem;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---- Kaufen ---- */

.kaufen { margin: 0 0 1.6rem; }
.kaufen__ueber {
  display: block;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gedaempft);
  font-weight: 800;
  margin-bottom: .5rem;
  padding: 0;
}
.kaufen__groessen { border: 0; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.kaufen__groessen .kaufen__ueber { width: 100%; }

.groessenwahl { cursor: pointer; }
.groessenwahl input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.groessenwahl__kasten {
  display: grid;
  gap: .15rem;
  border: 2px solid var(--linie);
  padding: .6rem .9rem;
  transition: border-color .2s ease, background .2s ease;
}
.groessenwahl__name { font-weight: 800; font-size: .9rem; letter-spacing: .06em; }
.groessenwahl__preis { font-family: var(--schrift-masch); font-size: .8rem; color: var(--gedaempft); }
.groessenwahl:hover .groessenwahl__kasten { border-color: var(--text); }
.groessenwahl input:checked + .groessenwahl__kasten { border-color: var(--akzent); background: var(--karte); }
.groessenwahl input:checked + .groessenwahl__kasten .groessenwahl__preis { color: var(--text); }
.groessenwahl input:focus-visible + .groessenwahl__kasten { outline: 3px solid var(--akzent); outline-offset: 3px; }

.kaufen__unten { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; }
.mengenwahl { display: block; }
.mengenwahl__feld {
  width: 5rem;
  background: var(--karte);
  border: 2px solid var(--linie);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  padding: .62rem .4rem;
}
.mengenwahl__feld:focus { border-color: var(--akzent); outline: none; }

.kaufen__hinweis { color: var(--gedaempft); font-size: .78rem; margin: 1rem 0 0; line-height: 1.6; }

/* ---- Marken ---- */

.motivmarken { display: flex; flex-wrap: wrap; gap: .4rem; }
.motivmarke {
  border: 1px solid var(--linie);
  color: var(--text);
  text-decoration: none;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .6rem;
}
.motivmarke:hover { border-color: var(--akzent); color: var(--akzent); }
.motivmarke--still { color: var(--gedaempft); font-weight: 600; text-transform: none; letter-spacing: .02em; }

.auchdas { margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--linie); }
.auchdas__titel { font-size: 1.5rem; margin-bottom: 1.4rem; }

/* ---- Klebender Kaufknopf am Handy ---- */

.kaufleiste {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem var(--rand);
  padding-bottom: max(.7rem, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linie);
}
.kaufleiste__preis {
  font-family: var(--schrift-masch);
  font-size: .85rem;
  color: var(--gedaempft);
  white-space: nowrap;
}
.kaufleiste__knopf { flex: 1 1 auto; justify-content: center; box-shadow: none; padding: .8rem 1rem; font-size: .85rem; }
.kaufleiste__knopf:hover { transform: none; box-shadow: none; }

/* Die Leiste schwebt über allem und würde am Seitenende den Fußbereich
   verdecken - deshalb bekommt der zusätzlichen Platz, aber nur auf den
   Seiten, die überhaupt eine Leiste haben. */
.hat-kaufleiste .fuss__unten { padding-bottom: 6.5rem; }


/* ══════════ Warenkorb ══════════ */

.korbseite {
  max-width: 52rem;
  margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + 1.6rem) var(--rand) 4rem;
}
.korbseite__titel { font-size: clamp(2rem, 9vw, 3.4rem); margin-bottom: 1.6rem; }

.korbliste { border-top: 1px solid var(--linie); }

.korbzeile {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr) auto;
  grid-template-areas:
    "bild text weg"
    "bild menge summe";
  align-items: center;
  gap: .5rem .9rem;
  border-bottom: 1px solid var(--linie);
  padding: .9rem 0;
}
.korbzeile__bild { grid-area: bild; display: block; width: 3.6rem; }
.korbzeile__bild .knopf { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; }
.korbzeile__text { grid-area: text; display: grid; gap: .15rem; min-width: 0; }
.korbzeile__name {
  color: var(--text);
  text-decoration: none;
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .04em;
}
.korbzeile__name:hover { color: var(--akzent); }
.korbzeile__groesse { color: var(--gedaempft); font-size: .78rem; font-family: var(--schrift-masch); }
.korbzeile__weg {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--akzent);
}
.korbzeile__menge { grid-area: menge; }
.korbzeile__menge .mengenwahl__feld { width: 4.2rem; height: 2.75rem; padding: .3rem; font-size: .95rem; }
.korbzeile__summe {
  grid-area: summe;
  text-align: right;
  font-family: var(--schrift-masch);
  font-size: 1rem;
  font-weight: 700;
  white-space: nowrap;
}
.korbzeile__weg-knopf {
  grid-area: weg;
  justify-self: end;
  /* Sichtbar bleibt das kleine Kreuz - angefasst wird eine volle Daumenflaeche. */
  width: 2.75rem; height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--linie);
  color: var(--gedaempft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.korbzeile__weg-knopf:hover { border-color: var(--akzent); color: var(--akzent); }

.korb__werkzeuge { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 2rem; }

.knopfrand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;          /* 44 px - unter dem Daumen zuverlaessig zu treffen */
  background: none;
  border: 1px solid var(--linie);
  color: var(--text);
  font: inherit;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .55rem .9rem;
  cursor: pointer;
}
.knopfrand:hover { border-color: var(--akzent); color: var(--akzent); }
.knopfrand--still { color: var(--gedaempft); }

/* ---- Abrechnung ---- */

.abrechnung {
  border: 1px solid var(--linie);
  background: var(--karte);
  padding: 1.1rem 1.2rem;
}
.abrechnung__zeile {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .4rem 0;
  font-size: .95rem;
}
.abrechnung__zeile--spar { color: var(--spar); }
.abrechnung__zeile--summe {
  border-top: 1px solid var(--linie);
  margin-top: .5rem;
  padding-top: .8rem;
  font-size: 1.25rem;
  font-weight: 800;
}
.abrechnung__frei { color: var(--spar); font-weight: 700; }
.abrechnung__hinweis {
  margin: .9rem 0 0;
  font-size: .78rem;
  color: var(--gedaempft);
  line-height: 1.6;
}

/* ---- Anstupser ---- */

.stupser { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .4rem; }
.stupser__punkt {
  border: 1px dashed var(--spar);
  color: var(--spar);
  padding: .55rem .8rem;
  font-size: .82rem;
  font-weight: 700;
}

.korbwarnung {
  margin: 1rem 0 0;
  border: 1px solid var(--akzent);
  color: var(--akzent);
  padding: .7rem .9rem;
  font-size: .85rem;
  font-weight: 700;
}

.korb__weiter { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.8rem 0 0; }
.korb__zurueck { color: var(--gedaempft); font-size: .82rem; }
.grossknopf--aus {
  background: var(--karte);
  border-color: var(--linie);
  color: var(--gedaempft);
  box-shadow: none;
  cursor: not-allowed;
}
.grossknopf--aus:hover { transform: none; box-shadow: none; }


/* ══════════ Kasse ══════════

   Am Handy untereinander: erst entscheiden, dann tippen, ganz zuletzt der
   Knopf. Am Rechner zweispaltig, die Bestelluebersicht klebt rechts mit -
   so steht immer sichtbar da, was das Ganze kostet.
   ══════════════════════════════════════════════════════════════════ */

.kasse {
  max-width: var(--breite-laden);
  margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + 2.5rem) var(--rand) 5rem;
}
.kasse__titel {
  font-size: clamp(2.2rem, 10vw, 3.6rem);
  margin: 0 0 1.6rem;
  transform: rotate(-1deg);
  transform-origin: left center;
}
.kasse__spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
.kasse__eingaben { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-content: start; }

/* Das Feld, das kein Mensch sehen darf. Nicht display:none - manche
   Ausfuellhilfen ueberspringen genau das, und dann faellt die Falle aus. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.kastenfeld {
  border: 1px solid var(--linie);
  background: var(--karte);
  padding: 1.1rem 1.2rem 1.3rem;
}
.kastenfeld.ist-still { opacity: .75; }
.kastenfeld__titel {
  font-family: var(--schrift-display);
  font-size: 1.15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.kastenfeld__hinweis {
  margin: .9rem 0 0;
  font-size: .8rem;
  color: var(--gedaempft);
  line-height: 1.6;
}

/* ---- Felder ---- */

.feld { display: grid; gap: .35rem; margin: 0 0 .9rem; }
.feld__name {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gedaempft);
}
/* Kein zusaetzliches Abdunkeln: --gedaempft liegt schon bei 5,3:1, mit
   Deckkraft 0.8 waeren es 3,85:1 - und das ist Kleinschrift. */
.feld__kann { font-weight: 600; letter-spacing: .04em; text-transform: none; }
.feld__eingabe {
  width: 100%;
  min-height: 2.75rem;
  background: var(--tief);
  border: 2px solid var(--linie);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  padding: .55rem .7rem;
}
.feld__eingabe--gross { min-height: 5rem; resize: vertical; }
.feld__eingabe:focus { border-color: var(--akzent); outline: none; }
.feld__notiz { font-size: .74rem; color: var(--gedaempft); }
.feld__fehler {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--akzent);
}
.feld.ist-schief .feld__eingabe { border-color: var(--akzent); }

.feldpaar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 .9rem; }

/* ---- Kacheln zum Auswaehlen ---- */

.wahlreihe { display: grid; gap: .6rem; }
.wahlkachel {
  display: grid;
  gap: .15rem;
  border: 2px solid var(--linie);
  padding: .8rem .9rem;
  cursor: pointer;
  min-height: 2.75rem;
  align-content: center;
}
.wahlkachel:hover { border-color: var(--gedaempft); }
.wahlkachel.ist-gewaehlt { border-color: var(--akzent); background: rgba(224, 27, 24, .07); }
.wahlkachel input { position: absolute; opacity: 0; width: 0; height: 0; }
.wahlkachel:focus-within { outline: 2px solid var(--akzent); outline-offset: 2px; }
.wahlkachel__name { font-weight: 800; font-size: .95rem; }
.wahlkachel__notiz { font-size: .78rem; color: var(--gedaempft); }

/* ---- Bestelluebersicht ---- */

.uebersicht {
  border: 1px solid var(--linie);
  background: var(--karte);
  padding: 1.1rem 1.2rem 1.3rem;
}
.uebersicht__titel {
  font-family: var(--schrift-display);
  font-size: 1.15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 .9rem;
}
.uebersicht__liste { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.uebersicht__posten {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  gap: .6rem;
  align-items: baseline;
  font-size: .88rem;
}
.uebersicht__menge { font-family: var(--schrift-masch); font-weight: 700; color: var(--gedaempft); }
.uebersicht__name { min-width: 0; }
.uebersicht__groesse { display: block; font-size: .76rem; color: var(--gedaempft); }
.uebersicht__preis { font-family: var(--schrift-masch); font-weight: 700; white-space: nowrap; }
.uebersicht__zurueck { margin: 1rem 0 0; font-size: .82rem; }
.uebersicht__zurueck a { color: var(--gedaempft); }

.abrechnung--knapp { border: none; background: none; padding: 0; }

/* ---- Einverstaendnis ---- */

.haken {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin: 1.2rem 0 1rem;
  font-size: .84rem;
  line-height: 1.55;
  cursor: pointer;
}
.haken input {
  flex: 0 0 auto;
  width: 1.4rem; height: 1.4rem;
  margin-top: .1rem;
  accent-color: var(--akzent);
}
.haken.ist-schief { color: var(--akzent); }
.haken a { color: var(--text); }

.grossknopf--voll { width: 100%; justify-content: center; text-align: center; }

/* ══════════ Bestaetigung ══════════ */

.dank {
  max-width: 46rem;
  margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + 3rem) var(--rand) 5rem;
}
.dank__marke {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--spar);
  margin: 0 0 .5rem;
}
.dank__nummer {
  font-family: var(--schrift-masch);
  font-size: clamp(2rem, 9vw, 3.2rem);
  font-weight: 700;
  letter-spacing: .04em;
  margin: 0 0 1rem;
}
.dank__lead { color: var(--gedaempft); margin: 0 0 2rem; line-height: 1.7; }
.dank__weiter { margin-top: 2.5rem; }

.zahlkasten {
  border: 2px solid var(--akzent);
  background: var(--karte);
  padding: 1.2rem 1.3rem 1.4rem;
  margin: 0 0 1.6rem;
}
.zahlkasten__titel {
  font-family: var(--schrift-display);
  font-size: 1.3rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.zahlkasten__zeile { margin: 0 0 1.1rem; }
.zahlkasten__notiz { margin: 1.1rem 0 0; font-size: .84rem; color: var(--gedaempft); line-height: 1.6; }
.zahlkasten__warnung {
  margin: 1rem 0 0;
  border: 1px dashed var(--akzent);
  color: var(--akzent);
  padding: .7rem .9rem;
  font-size: .82rem;
  font-weight: 700;
}

.zahlliste { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1.1rem; margin: 0; }
.zahlliste dt {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gedaempft);
  align-self: center;
}
.zahlliste dd { margin: 0; font-family: var(--schrift-masch); font-size: 1rem; word-break: break-all; }
.zahlliste__wichtig { font-weight: 700; font-size: 1.1rem; }

.belegblock {
  border: 1px solid var(--linie);
  padding: 1.1rem 1.2rem 1.3rem;
  margin: 0 0 1.2rem;
}
.belegblock__titel {
  font-family: var(--schrift-display);
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 .9rem;
}
.belegblock__anschrift { margin: 0; line-height: 1.7; }
.belegblock__nachricht { margin: 1rem 0 0; color: var(--gedaempft); font-style: italic; }

.dank__foto {
  margin: 2.4rem 0 0;
  text-align: center;
  color: var(--gedaempft);
  font-size: .95rem;
}
.dank__foto a { color: var(--text); }


/* ══════════════════════════════════════════════════════════════════
   8  GALERIE
   Fotos, die Kunden von ihren Buttons schicken. Sieht bewusst nach
   Pinnwand aus und nicht nach Bilderstrecke: alles leicht schief,
   weisser Rand wie beim Sofortbild, Reissnagel oben drauf.
   ══════════════════════════════════════════════════════════════════ */

/* ---- Das Zeichen in der Kopfleiste ---- */

/*
 * Ein Sofortbild: Rechteck mit fettem Unterrand. Wie Lupe und Korb aus
 * nichts als Rahmenlinien gebaut, damit nichts nachgeladen werden muss
 * und currentColor beim Ueberfahren automatisch mit auf Akzent geht.
 */
.zeichen-sofortbild {
  display: block;
  width: .82rem; height: .78rem;
  border: 2px solid currentColor;
  border-bottom-width: .3rem;
  transform: rotate(-7deg);
  flex: 0 0 auto;
}

/* ---- Kopf der Seite ---- */

.galerieseite { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand) 4rem; }

.galeriekopf { max-width: 42rem; margin: 0 0 2.6rem; }
.galeriekopf__titel {
  font-family: var(--schrift-display);
  font-size: clamp(2.4rem, 9vw, 4.6rem);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0 0 .8rem;
}
.galeriekopf__lead { margin: 0; color: var(--gedaempft); font-size: 1.05rem; line-height: 1.7; }

/* ---- Die Wand ---- */

.fotowand {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem 1rem;
  margin: 0 0 4rem;
}

.fotokarte {
  position: relative;
  margin: 0;
  padding: .5rem .5rem 0;
  background: var(--papier);
  color: var(--tinte);
  transform: rotate(var(--dreh, 0deg));
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
  transition: transform .3s var(--schwung), box-shadow .3s ease;
}
.fotokarte:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .55);
  z-index: 2;
}

/* Der Reissnagel. Sitzt oben mittig und ist nur ein Punkt mit Glanz. */
.fotokarte::before {
  content: "";
  position: absolute;
  top: -.42rem; left: 50%;
  width: .85rem; height: .85rem;
  margin-left: -.42rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6, transparent 55%), var(--akzent);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
  z-index: 3;
}

.fotokarte__bild { display: block; }
.fotokarte__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #d8d4cc;
}

.fotokarte__text {
  margin: 0;
  padding: .6rem .3rem .7rem;
  font-size: .82rem;
  line-height: 1.4;
  text-align: center;
  color: #2a2825;
  /* Lange Einsendungen duerfen die Karte nicht in die Laenge ziehen. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Karten ohne Text brauchen unten trotzdem den breiten Sofortbild-Rand. */
.fotokarte:not(:has(.fotokarte__text)) { padding-bottom: 1.6rem; }

/* ---- Leere Wand ---- */

.galerieleer {
  border: 1px dashed var(--linie);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--gedaempft);
  margin: 0 0 3.4rem;
}
.galerieleer__rahmen {
  display: block;
  width: 3.2rem; height: 3rem;
  margin: 0 auto 1.4rem;
  border: 3px solid var(--linie);
  border-bottom-width: 1rem;
  transform: rotate(-7deg);
}
.galerieleer__satz { margin: 0 0 .4rem; color: var(--text); font-size: 1.1rem; }
.galerieleer p { margin: 0; }

/* ---- Einsenden ---- */

.einsenden {
  border-top: 1px solid var(--linie);
  padding-top: 2.6rem;
  max-width: 40rem;
}
.einsenden__titel {
  font-family: var(--schrift-display);
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 .7rem;
}
.einsenden__lead { margin: 0 0 1.8rem; color: var(--gedaempft); line-height: 1.7; }

.einsenden__zu {
  margin: 0;
  border: 1px solid var(--linie);
  border-left: 3px solid var(--akzent);
  background: var(--karte);
  padding: 1rem 1.2rem;
  color: var(--gedaempft);
  line-height: 1.6;
}

.einsenden__knopf { margin-top: 1.4rem; }

/* ---- "So wird der getragen" auf der Motivseite ---- */

.getragen { margin: 4rem 0 0; }
.getragen__titel {
  font-family: var(--schrift-display);
  font-size: clamp(1.4rem, 4vw, 2rem);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0 0 1.4rem;
}

/*
 * Waagerechte Reihe zum Wischen statt Raster: die Fotos stehen unter dem
 * Kaufknopf und duerfen die Seite nicht noch einmal um zwei Bildschirme
 * verlaengern.
 */
.getragen__reihe {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: .6rem .2rem 1.2rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.getragen__karte {
  flex: 0 0 9.5rem;
  scroll-snap-align: start;
  margin: 0;
  padding: .4rem .4rem 0;
  background: var(--papier);
  color: var(--tinte);
  transform: rotate(var(--dreh, 0deg));
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
  transition: transform .3s var(--schwung);
}
.getragen__karte:hover { transform: rotate(0deg) translateY(-3px); }
.getragen__karte img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #d8d4cc;
}
.getragen__wer {
  margin: 0;
  padding: .45rem .2rem .55rem;
  font-size: .75rem;
  text-align: center;
  color: #2a2825;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.getragen__karte:not(:has(.getragen__wer)) { padding-bottom: 1.1rem; }

.getragen__mit { margin: .4rem 0 0; font-size: .9rem; }
.getragen__mit a { color: var(--gedaempft); }
.getragen__mit a:hover { color: var(--akzent); }

/* ---- Lichtbild ----------------------------------------------------
   Das Foto wird von der Wand genommen und hochgehalten: der Sofortbild-
   Rand bleibt, die Schraeglage faellt weg. Als <dialog> liegt es in der
   Top-Layer, also ueber der Koernung - deshalb steht hier nirgends ein
   z-index. */

.lichtbild {
  border: 0;
  /* Oben Platz fuers Schliessen-Kreuz. Es sitzt damit ausserhalb des
     Sofortbilds, aber innerhalb des Dialogs - waere es darueber gesetzt,
     ruckte es bei einem hohen Hochformat aus dem Bild. */
  padding: 3.4rem 0 0;
  margin: auto;
  max-width: min(92vw, 54rem);
  max-height: 94vh;
  overflow: visible;
  background: transparent;
  color: var(--tinte);
}
.lichtbild::backdrop { background: rgba(0, 0, 0, .88); }

/* Nur beim Oeffnen bewegt. Das Schliessen laeuft ohne - dafuer muesste
   der Dialog seine Anzeige ueberdauern, und das ist Aufwand fuer etwas,
   das niemand vermisst. */
.lichtbild[open] { animation: lichtbild-auf .32s var(--schwung); }
.lichtbild[open]::backdrop { animation: lichtbild-schleier .32s ease; }

@keyframes lichtbild-auf {
  from { opacity: 0; transform: scale(.92) rotate(-2deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes lichtbild-schleier {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.lichtbild__rahmen {
  margin: 0;
  padding: .7rem .7rem 0;
  background: var(--papier);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7);
}

.lichtbild__bild {
  display: block;
  max-width: 100%;
  /* Kreuzleiste, weisser Rand, Unterschrift und Luft muessen mit in die
     Fensterhoehe passen, sonst haengt die Unterschrift unten heraus. */
  max-height: calc(94vh - 9rem);
  width: auto;
  margin: 0 auto;
  background: #d8d4cc;
}

.lichtbild__text {
  margin: 0;
  padding: .7rem .4rem .8rem;
  font-size: .9rem;
  line-height: 1.45;
  text-align: center;
  color: #2a2825;
}
/* Ohne Unterschrift trotzdem der breite Sofortbild-Rand unten. */
.lichtbild__text[hidden] { display: block; padding: 0; height: 1.8rem; }

.lichtbild__zu {
  position: absolute;
  top: 0; right: 0;
  width: 2.6rem; height: 2.6rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  color: var(--papier);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, transform .2s var(--schwung-hart);
}
.lichtbild__zu:hover { border-color: var(--akzent); color: var(--akzent); transform: translateY(-2px); }

/* Das Kreuz aus zwei Strichen, wie Lupe und Korb aus nichts als Linien. */
.lichtbild__zu span {
  position: relative;
  width: 1rem; height: 1rem;
}
.lichtbild__zu span::before,
.lichtbild__zu span::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 2px;
  background: currentColor;
}
.lichtbild__zu span::before { transform: rotate(45deg); }
.lichtbild__zu span::after  { transform: rotate(-45deg); }

/*
 * Der Dialog sperrt das Scrollen der Seite dahinter nicht in jedem
 * Browser zuverlaessig - dieselbe Sperre wie beim Vollbildmenue.
 */
body.lichtbild-offen { overflow: hidden; }


/* ---- Freunde ------------------------------------------------------
   Getauschte Banner anderer Laeden, im Fussbereich auf jeder Seite.

   Alle in derselben Kachel, damit aus drei fremden Gestaltungen eine
   Reihe wird und kein Erpresserbrief. Standardmaessig in Graustufen:
   bunte Fremdbanner ziehen sonst mehr Aufmerksamkeit auf sich als der
   eigene Laden. Wer hinsieht, weckt sie auf. */

.freunde {
  padding: 2.6rem var(--rand) 0;
  max-width: var(--breite);
  margin: 0 auto;
  text-align: center;
}

/*
 * Bewusst kein gesperrtes Versal-Etikett wie sonst bei Rubriken: das hier
 * ist ein ganzer Satz. In Grossbuchstaben und weit gesperrt wuerde daraus
 * ein Band, das lauter schreit als die Banner darunter. Also gewoehnliche
 * Schreibweise, etwas groesser, gedaempft in der Farbe - es soll klingen
 * wie eine Bemerkung und nicht wie eine Ueberschrift.
 */
.freunde__titel {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .01em;
  /* Ausdruecklich zurueckgesetzt: weiter oben steht ein globales
     "h1, h2, h3 { text-transform: uppercase }". Die Eigenschaft hier
     nur wegzulassen genuegt nicht, dann gewinnt wieder die Grundregel. */
  text-transform: none;
  color: var(--gedaempft);
  margin: 0 0 1.4rem;
}

.freunde__reihe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.freundebanner {
  display: block;
  width: 18.75rem;  /* 300px - dieselben Masse wie FREUNDE_BREITE/HOEHE */
  height: 6.25rem;  /* 100px */
  padding: .35rem;
  border: 1px solid var(--linie);
  background: var(--karte);
  transition: border-color .25s ease, transform .25s var(--schwung);
}

.freundebanner img {
  display: block;
  width: 100%;
  height: 100%;
  /* Eingepasst, nie beschnitten und nie verzerrt: die Banner kommen in
     allen moeglichen Seitenverhaeltnissen herein. */
  object-fit: contain;
  filter: grayscale(1) opacity(.55);
  transition: filter .25s ease;
}

.freundebanner:hover,
.freundebanner:focus-visible { border-color: var(--akzent); transform: translateY(-3px); }
.freundebanner:hover img,
.freundebanner:focus-visible img { filter: none; }


/* ══════════════════════════════════════════════════════════════════
   8b  BLOG
   Uebersicht als Raster aus Karten, der Beitrag selbst auf dem Blatt
   der Textseiten. Der Streifen auf der Startseite zeigt dieselben Karten.
   ══════════════════════════════════════════════════════════════════ */

.blog {
  max-width: var(--breite-laden);
  margin: 0 auto;
  padding: calc(var(--kopf-hoehe) + 1.6rem) var(--rand) 4rem;
}

.blogkopf { margin-bottom: 1.8rem; }
.blogkopf__titel {
  font-size: clamp(2.2rem, 10vw, 3.8rem);
  transform: rotate(-1deg);
  transform-origin: left center;
  margin-bottom: .7rem;
}
.blogkopf__lead { margin: 0; max-width: 40rem; color: var(--gedaempft); line-height: 1.7; }

/* ---- Das Raster ---- */

.bloggrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
}

/* ---- Eine Karte ---- */

.blogkarte {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
  background: var(--karte);
  border: 1px solid var(--linie);
  transition: border-color .2s ease, transform .3s var(--schwung);
}
.blogkarte:hover,
.blogkarte:focus-visible { border-color: var(--akzent); transform: translateY(-4px); }

.blogkarte__bild {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--tief);
  border-bottom: 3px solid var(--akzent);
}
.blogkarte__bild img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.3) contrast(1.08);
  transition: transform .5s var(--schwung), filter .3s ease;
}
.blogkarte:hover .blogkarte__bild img,
.blogkarte:focus-visible .blogkarte__bild img { transform: scale(1.05); filter: none; }

.blogkarte__platzhalter {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background: var(--platzfarbe, var(--karte));
  font-family: var(--schrift-display);
  font-size: clamp(3rem, 10vw, 5rem);
  color: var(--text);
  text-shadow: 3px 3px 0 rgba(0, 0, 0, .35);
}

.blogkarte__text {
  display: grid;
  gap: .5rem;
  align-content: start;
  flex: 1 1 auto;
  padding: 1rem 1.1rem 1.2rem;
}
.blogkarte__datum {
  font-family: var(--schrift-masch);
  font-size: .76rem;
  color: var(--gedaempft);
}
.blogkarte__titel {
  font-family: var(--schrift-display);
  font-size: 1.65rem;
  line-height: 1.02;
  text-transform: uppercase;
  transition: color .2s ease;
}
.blogkarte:hover .blogkarte__titel,
.blogkarte:focus-visible .blogkarte__titel { color: var(--akzent); }
.blogkarte__auszug { color: var(--gedaempft); font-size: .92rem; line-height: 1.6; }
.blogkarte__mehr {
  margin-top: .2rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---- Das Menue mit dem sechsten Punkt ----
   Mit "Blog" im Menue wird die Kopfleiste zwischen 62 und 75 rem so eng, dass
   die Suche auf null zusammenschrumpft und unter dem Korb liegt. Dort rueckt
   das Menue etwas zusammen. */
@media (min-width: 62rem) and (max-width: 74.99rem) {
  .hauptmenue__punkt { padding: .6rem .5rem; font-size: .8rem; letter-spacing: .08em; }
  .hauptmenue__punkt::after { left: .5rem; right: .5rem; }
}

/* ---- Der Streifen auf der Startseite ---- */

.ebene--blog {
  z-index: 3;
  background: var(--tief);
  border-top: 4px solid var(--akzent);
}
/* Zwei Klassen, damit die Polsterung des Rechner-Layouts (.ebene__innen weiter
   unten) nicht gewinnt - der Streifen soll kompakter sein als die Ebenen. */
.ebene--blog .ebene__innen { padding: 3.2rem var(--rand) 3.6rem; }
.ebene--blog .ebene__handlung { margin-top: 2.2rem; }

/* ---- Der Beitrag ---- */

.blattseite--blog { padding-bottom: 2rem; }

/* Am Handy zuerst der Beitrag, die anderen Beitraege darunter - sonst muss man
   erst an einer langen Liste vorbei, bevor der Text anfaengt. Eine Sprungliste
   am Seitenende hilft niemandem, sie gibt es nur am Rechner. */
.blattseite--blog .blattseite__rand { order: 2; }
/* Die Buttons gehoeren direkt unter den Beitrag und ueber alle Raster-Spalten. */
.blattseite--blog .beitragbuttons { order: 1; grid-column: 1 / -1; width: 100%; padding: .6rem 0 1rem; }
.blattseite--blog .sprungliste { display: none; }
@media (min-width: 62rem) {
  .blattseite--blog .blattseite__rand { order: 0; }
  .blattseite--blog .sprungliste { display: block; }
}
.blatt--beitrag .blatt__titel { font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: 1; }

.blatt__meta {
  margin: 0 0 .8rem;
  font-family: var(--schrift-masch);
  font-size: .82rem;
  letter-spacing: .04em;
  color: #5C5A55;
}
.blatt__lead {
  margin: 0 0 1.8rem;
  padding-left: 1rem;
  border-left: 4px solid var(--akzent);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.55;
  color: #16150F;
}
.blatt__bild { margin: 0 0 2rem; }
.blatt__bild img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid #16150F;
  box-shadow: 6px 6px 0 rgba(22, 21, 15, .85);
}
.blatt__inhalt img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.6rem auto;
  border: 2px solid #16150F;
}

/* Hinweis fuer den Betreiber, wenn er einen Entwurf oder einen geplanten Beitrag ansieht. */
.blatt__entwurf {
  margin: 0 0 1.4rem;
  padding: .7rem 1rem;
  background: #16150F;
  color: #F3F0E8;
  font-size: .86rem;
  font-weight: 700;
}
.blatt__entwurf a { margin-left: .6rem; color: #F3F0E8; }

/* ---- "Dazu im Blog" auf der Motivseite ---- */

.motivblog { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--linie); }
.motivblog__titel { font-size: 1.5rem; margin-bottom: 1rem; }
.motivblog__liste { list-style: none; margin: 0; padding: 0; }
.motivblog__liste li { border-bottom: 1px solid var(--linie); }
.motivblog__liste a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem 1rem;
  padding: .8rem .2rem;
  color: var(--text);
  text-decoration: none;
  transition: background .2s ease, padding-left .2s ease, color .2s ease;
}
.motivblog__liste a:hover,
.motivblog__liste a:focus-visible { background: var(--karte); padding-left: .8rem; color: var(--akzent); }
.motivblog__datum { font-family: var(--schrift-masch); font-size: .78rem; color: var(--gedaempft); }
.motivblog__name { font-family: var(--schrift-display); font-size: 1.25rem; text-transform: uppercase; line-height: 1.1; }

/* ---- Buttons unter dem Beitrag ---- */

.beitragbuttons {
  max-width: var(--breite-laden);
  margin: 0 auto;
  padding: 1.4rem var(--rand) 4.5rem;
}
.beitragbuttons__titel {
  margin-bottom: 1.6rem;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  text-align: center;
}


/* ══════════════════════════════════════════════════════════════════
   9  BEWEGUNG
   ══════════════════════════════════════════════════════════════════ */

/*
 * Einblenden beim Hereinscrollen.
 *
 * Der versteckte Startzustand haengt an der Klasse "js", die ein winziges
 * Skript im Kopf der Seite setzt. Laedt das Hauptskript nicht oder bleibt
 * der Beobachter stumm, steht trotzdem alles da - sichtbarer Inhalt darf
 * niemals davon abhaengen, dass JavaScript durchlaeuft.
 */
.js [data-zeigen]:not(.termin) {
  opacity: 0;
  transform: translateY(1.8rem);
  transition: opacity .6s ease, transform .7s var(--schwung);
}
/* Die :not()-Kette oben zaehlt bei der Spezifitaet mit - die Zeig-Regel
   muss sie deshalb wiederholen, sonst gewinnt das Verstecken. */
.js [data-zeigen]:not(.termin).ist-da {
  opacity: 1;
  transform: none;
}

/* Die Kategorienzeilen kommen nacheinander herein, nicht alle auf einmal. */
.js .kategorie[data-zeigen] {
  transform: translateY(1.1rem);
  transition-delay: calc(var(--nr, 0) * 55ms);
}


/* ---------- Desktop ---------- */

@media (min-width: 40rem) {
  :root { --rand: 1.6rem; }
  .marke__name { display: inline; }
  .motivraster { grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.1rem; }

  /* Vor- und Nachname nebeneinander, sobald zwei Felder nebeneinander passen. */
  .feldpaar { grid-template-columns: 1fr 1fr; }
  .blatt { padding: 3rem 3.2rem 3.5rem; }
  .feldpaar--eng { grid-template-columns: 8rem minmax(0, 1fr); }
  .wahlreihe { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

  .fotowand { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.4rem; }
  .getragen__karte { flex-basis: 11rem; }
  .bloggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.3rem; }
}

@media (min-width: 62rem) {
  :root { --rand: 2.2rem; --kopf-hoehe: 7.6rem; }

  .kopfleiste__innen { height: 5rem; gap: 1.2rem; }
  .hauptmenue { display: flex; }
  .werkzeug--burger { display: none; }
  .suche { max-width: 20rem; margin-left: auto; }
  .laufband { height: 2.4rem; }
  .laufband__stueck { font-size: .82rem; }

  .fotowand { grid-template-columns: repeat(4, 1fr); }
  .getragen__karte { flex-basis: 12rem; }
  .bloggrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8rem 1.6rem; }

  .ebene--zwei { --kante: 6rem; }
  .ebene__innen { padding: 7rem var(--rand) 5.5rem; }
  .ebene--drei { margin-top: -3rem; }

  /* Ab hier gilt die Desktop-Anordnung der Kutte: mehr Plätze, und die
     Anstecker rücken auf ihre eigentlichen Positionen. */
  .anstecker--nur-desktop { display: block; }
  .anstecker {
    left: var(--x);
    top: var(--y);
    width: var(--d);
    margin-left: calc(var(--d) * -0.5);
    margin-top: calc(var(--d) * -0.5);
    transform: rotate(var(--r));
  }
  .anstecker:hover,
  .anstecker:focus-visible { transform: rotate(0deg) translateY(-.5rem) scale(1.09); }
  .anstecker:active { transform: rotate(0deg) translateY(-.15rem) scale(1.03); }

  /* Der Kopfteil muss die allgemeine Polsterung von .ebene__innen wieder
     zurücknehmen - sie steht weiter unten in dieser Datei und würde sonst
     gewinnen. */
  .ebene__innen--kopfteil { padding-top: 2.6rem; padding-bottom: 0; }

  /* Am Desktop fährt das Kategoriebild erst beim Zeigen herein. */
  .kategorie__zeile { gap: 1.1rem; padding: .25rem var(--rand); }
  .kategorie__bild {
    position: absolute;
    right: calc(var(--rand) + 5.5rem); top: 50%;
    width: 5.4rem; height: 5.4rem;
    margin-top: -2.7rem;
    opacity: 0;
    transform: translateX(2.5rem) rotate(-10deg);
    transition: opacity .3s ease, transform .45s var(--schwung-hart);
  }
  .kategorie__zeile:hover .kategorie__bild,
  .kategorie__zeile:focus-visible .kategorie__bild {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
  .kategorie__anzahl { margin-right: .5rem; }

  .termine__liste { gap: 0; }
  .scrolltipp { bottom: 4rem; }

  /* ---- Laden am Desktop ---- */

  .laden {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 2.8rem;
    align-items: start;
  }
  /* Die Kategorienspalte läuft beim Scrollen mit - bei zehn Kategorien und
     mehreren hundert Motiven springt man sonst ständig zurück nach oben. */
  .katspalte {
    position: sticky;
    top: calc(var(--kopf-hoehe) + 1.6rem);
    margin-bottom: 0;
  }
  /* Am Desktop als Liste - wie Ebene 3, nur kompakt: Trennlinien oben und
     unten, beim Zeigen kippt die Zeile auf die Akzentfarbe. */
  .katspalte__liste {
    flex-direction: column;
    overflow: visible;
    gap: 0;
    padding-bottom: 0;
    border-top: 2px solid var(--linie);
  }
  .katspalte__punkt {
    justify-content: space-between;
    min-height: 0;
    border: 0;
    border-bottom: 1px solid var(--linie);
    padding: .45rem .55rem;
    font-size: 1.15rem;
    color: var(--text);
  }
  .katspalte__punkt:hover {
    background: var(--akzent);
    color: var(--text);
    border-bottom-color: var(--akzent);
    padding-left: .95rem;
  }
  .katspalte__punkt.ist-aktiv {
    background: var(--akzent);
    border-bottom-color: var(--akzent);
    color: var(--text);
  }
  .katspalte__zahl { opacity: .8; }

  .motivraster { grid-template-columns: repeat(4, 1fr); gap: 1.8rem 1.3rem; }

  /* ---- Textseiten: schmale Spalte links, Blatt rechts ---- */

  /* Die Spalten wachsen nur bis zur Breite des Blattes, und das Ganze
     steht mittig. Vorher klebte das Blatt links in einem viel breiteren
     Rasterfeld, und rechts blieb eine Wand aus Nichts. */
  .blattseite {
    grid-template-columns: 15rem minmax(0, 68rem);
    justify-content: center;
    gap: 2.5rem;
    align-items: start;
  }
  .blattseite__rand {
    position: sticky;
    top: calc(var(--kopf-hoehe) + 2rem);
  }

  /* ---- Kasse am Rechner: Eingaben links, Uebersicht klebt rechts mit ---- */

  .kasse__spalten {
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 2rem;
    align-items: start;
  }
  .kasse__uebersicht {
    position: sticky;
    top: calc(var(--kopf-hoehe) + 1.5rem);
  }

  /* ---- Warenkorb am Desktop: alles in einer Zeile ---- */

  .korbzeile {
    grid-template-columns: 4.2rem minmax(0, 1fr) 6rem 7rem 2.75rem;
    grid-template-areas: "bild text menge summe weg";
    gap: 1.1rem;
    padding: 1rem 0;
  }
  .korbzeile__bild { width: 4.2rem; }
  .korbzeile__summe { font-size: 1.05rem; }

  /* ---- Motivseite am Desktop: Bild links, Angaben rechts ---- */

  .motivseite { padding-bottom: 5rem; }
  .motivseite__oben {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
  .motivbild { margin: 0; position: sticky; top: calc(var(--kopf-hoehe) + 1.6rem); }

  /* Am Desktop ist der Kaufknopf ohnehin im Blick. */
  .kaufleiste { display: none; }
}

/* Mehr Platz, mehr Spalten - bei mehreren hundert Motiven zählt jede. */
@media (min-width: 80rem) {
  .laden { grid-template-columns: 14rem minmax(0, 1fr); gap: 3.2rem; }
  .motivraster { grid-template-columns: repeat(5, 1fr); }
}

@media (min-width: 100rem) {
  .motivraster { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- Parallaxe ----------
   Die jeweils darunterliegende Ebene wandert beim Scrollen langsam nach
   oben mit, statt starr stehenzubleiben - erst dadurch entsteht Tiefe.
   Gerechnet wird das in skript.js, weil nur dort der genaue Stand der
   darüberliegenden Ebene bekannt ist. Ohne Skript klebt Ebene 1 einfach,
   wie vorher; es fehlt dann Tiefe, aber nichts Inhaltliches.          */

.ebene--eins,
.ebene--zwei,
.held__bildschicht { backface-visibility: hidden; }

/* ---------- Notausschalter ----------
   Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat,
   bekommt drei ruhige Abschnitte statt der Schiebeshow.          */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }

  .laufband__spur { animation: none; transform: none; }

  /* relativ, nicht statisch: sonst verlieren Bild, Raster, Schleier und
     Scrolltipp ihren Bezugspunkt und beziehen sich auf die ganze Bühne. */
  .ebene--eins { position: relative; height: auto; min-height: 80vh; min-height: 80svh; }
  .ebene--zwei,
  .ebene--drei { margin-top: 0; clip-path: none; border-top: 4px solid var(--papier); }
  .ebene--zwei::before { display: none; }

  .held__bild { transform: none; }
  .kachel, [data-zeigen], .kategorie, .termin { opacity: 1 !important; transform: none !important; }

  /* Die Anstecker behalten ihre Schräglage - die ist Gestaltung, keine
     Bewegung. Nur das Anheben beim Zeigen entfällt. */
  .ebene__titel,
  .textseite__titel,
  .held__slogan span,
  .knopf,
  .aufnaeher,
  .ausschnitt__zeichen { transform: none; }

  /* Auswahl umschalten ohne Schrumpfen */
  .kutte__gruppe.geht .anstecker,
  .kutte__gruppe.kommt .anstecker { opacity: 1; scale: 1; }
}