/* ==========================================================================
   Ela's 3D Studio — Blütenkabinett
   Kopf, Fuß und die Nach-oben-Pille · Stufe 2 · 31.07.2026

   Quelle: claude/elas3dstudio.de/shop.html (Kopf Z. 54–72, Fuß Z. 212–281).
   Die Entwurfsdateien tragen alles als Inline-Style; AUFTRAG Regel 3 verlangt,
   die Deklarationen hierher zu holen und die Wirkung pixelgleich zu erhalten.

   Diese Datei trägt seit Stufe 3 die ganze Seite. Das alte site.css und die
   Übergangsschicht in tokens.css sind ersatzlos entfernt — es gibt nur noch
   tokens.css (Werte) und diese Datei (Regeln).

   Werte sind aus dem Entwurf übernommen und NICHT gerundet (AUFTRAG Regel 2).
   Wo ein Token exakt passt, steht das Token.
   ========================================================================== */

/* --- Rahmen ---------------------------------------------------------------
   Der Entwurf setzt die Seite auf 1240 px mit hellem Grund; die dunklen
   Bänder laufen innerhalb dieser Spalte, nicht randlos.                    */
.seite {
  max-width: var(--container);
  margin-inline: auto;
  background: var(--grund-hell);
  color: var(--text-hell);
}

/* ==========================================================================
   DUNKLES BAND — trägt Kopf und jeden dunklen Abschnitt
   ========================================================================== */
.band-nacht {
  position: relative;
  background: var(--grund-dunkel);
  color: var(--text-dunkel);
}

/* DAS BAND SCHNEIDET NICHT MEHR SELBST AB — 26.08.2026.

   Hier stand `overflow: hidden`. Es galt den driftenden Lichtern: Die Kreise
   sind 560 Pixel gross und sitzen mit Absicht halb ausserhalb, ohne den
   Schnitt lagen sie auf dem hellen Grund darunter.

   Es traf aber ALLES im Band, auch das Klappmenue „+3 mehr". Auf einer Seite
   mit Kopfband OHNE Hero — jede Produktseite, der Warenkorb, das Konto — ist
   das Band nur die Kopfzeile hoch: Das Menue klappte auf und war im selben
   Moment abgeschnitten. Der Pfeil drehte sich, sonst geschah nichts.

   Jetzt schneidet die Lichtebene sich selbst zu (`.lichter`), und das Band
   laesst durch, was aus ihm herausragen darf. Wer hier wieder `overflow`
   setzt, macht das Klappmenue erneut unsichtbar. */

/* Zwei driftende Lichter. Sie stehen nie still, brauchen aber 28 bzw. 34
   Sekunden für eine Runde — das ist Absicht (AUFTRAG Regel 9).

   Sie haengen an `.lichter`, einer eigenen Ebene ueber dem Band: Nur sie
   traegt den Schnitt, den vorher das ganze Band trug.                      */
.lichter {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.lichter::before,
.lichter::after {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
}
.lichter::before {
  left: -4%;
  top: -30%;
  background: radial-gradient(circle, rgba(var(--bluete-rose-rgb), .34) 0%, rgba(var(--bluete-rose-rgb), 0) 66%);
  animation: schweben 28s ease-in-out infinite;
}
.lichter::after {
  right: 8%;
  bottom: -56%;
  filter: blur(54px);
  background: radial-gradient(circle, rgba(var(--bluete-pfirsich-rgb), .26) 0%, rgba(var(--bluete-pfirsich-rgb), 0) 66%);
  animation: schweben2 var(--d-lichter) ease-in-out infinite;
}

/* Die Startseite bekommt DREI Lichter statt zweier — ihr Band ist doppelt so
   hoch, zwei ließen die untere Hälfte dunkel liegen. Werte aus index.html
   (Z. 38–40), das dritte Licht hängt an .schichten, weil ::before und
   ::after am Band schon vergeben sind.                                      */
.band-start .lichter::before {
  left: 2%;
  top: -14%;
  width: 600px;
  height: 600px;
  filter: blur(50px);
  background: radial-gradient(circle, rgba(var(--bluete-rose-rgb), .38) 0%, rgba(var(--bluete-rose-rgb), 0) 66%);
}
.band-start .lichter::after {
  right: -6%;
  top: -4%;
  bottom: auto;
  background: radial-gradient(circle, rgba(var(--bluete-pfirsich-rgb), .30) 0%, rgba(var(--bluete-pfirsich-rgb), 0) 66%);
}
.band-start .schichten::after {
  content: "";
  position: absolute;
  right: 22%;
  bottom: -24%;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  filter: blur(56px);
  pointer-events: none;
  background: radial-gradient(circle, rgba(var(--bluete-pflaume-rgb), .34) 0%, rgba(var(--bluete-pflaume-rgb), 0) 68%);
  animation: schweben 40s ease-in-out infinite;
}

/* Schichtlinien — dieselbe Idee wie die Druckschichten im Produkt.         */
.schichten {
  position: absolute;
  inset: 0;
  overflow: hidden;                    /* traegt auf der Startseite ein Licht */
  pointer-events: none;
  background: repeating-linear-gradient(to bottom,
              rgba(var(--text-dunkel-rgb), .04) 0 1px, transparent 1px 10px);
}

@keyframes schweben  { 0%,100% { transform: translate(0,0); }
                       50%     { transform: translate(38px,26px); } }
@keyframes schweben2 { 0%,100% { transform: translate(0,0); }
                       50%     { transform: translate(-32px,-22px); } }

/* Goldlinie als Abschluss des dunklen Bandes.                              */
.goldlinie {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg,
              rgba(var(--gold-rgb), 0) 0%, rgba(var(--gold-rgb), .55) 22%,
              rgba(253,133,7,.75) 50%, rgba(var(--gold-rgb), .55) 78%,
              rgba(var(--gold-rgb), 0) 100%);
}

/* ==========================================================================
   KOPF — auf allen Seiten identisch, neun Einträge
   ========================================================================== */
.kopf-innen {
  position: relative;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 20px var(--seitenrand);
}

.kopf-marke { display: block; flex: none; }
.kopf-marke img {
  height: 48px;
  width: auto;
  /* Das Lockup liegt in Dunkel vor; auf dem Nachtgrund wird es weiß. */
  filter: brightness(0) invert(1);
  opacity: .94;
}

.kopf-nav {
  display: flex;
  gap: 20px;
  margin-left: auto;
  align-items: center;
  font-size: 13.5px;
}
.kopf-nav a {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-dunkel-nav);               /* auf --grund-dunkel 10,7:1 */
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color var(--d-schnell) var(--uebergang),
              border-color var(--d-schnell) var(--uebergang);
}
.kopf-nav a:hover { color: var(--text-dunkel); }

/* Die aktive Seite trägt helle Schrift und eine goldene Unterlinie.        */
.kopf-nav a[aria-current="page"] {
  color: var(--text-dunkel);
  border-bottom-color: rgba(var(--gold-rgb), .7);
}

/* Farbpunkt der Kategorie — dasselbe Ordnungssystem wie im Fuß.            */
.punkt {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}
.punkt-rose     { background: var(--bluete-rose); }
.punkt-pfirsich { background: var(--bluete-pfirsich); }
.punkt-pflaume  { background: var(--bluete-pflaume); }
.punkt-petrol   { background: var(--bluete-petrol); }
.punkt-salbei   { background: var(--bluete-salbei); }
.punkt-gold     { background: var(--gold); }

/* --- Der Ueberlauf im Kopf -------------------------------------------------
   Entwurf 1c „Kompakt mit Ueberlauf" (24.08.2026): Die ersten drei Kategorien
   stehen offen, der Rest sammelt sich hinter einem Chip. Gebaut aus
   <details>/<summary> wie das Handymenue — es oeffnet ohne Skript.

   position: relative traegt das aufgesetzte Blatt darunter. Es liegt am Chip,
   NICHT an .kopf-innen: Sonst muesste die Position beim naechsten Menuepunkt
   nachgerechnet werden.                                                     */
.kopf-mehr { position: relative; flex: none; }

.kopf-mehr-knopf {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--rand-dunkel);
  border-radius: var(--radius-pille);
  color: var(--text-dunkel-nav);
  cursor: pointer;
  list-style: none;                    /* das Dreieck des Browsers weg */
  transition: color var(--d-schnell) var(--uebergang),
              border-color var(--d-schnell) var(--uebergang);
}
.kopf-mehr-knopf::-webkit-details-marker { display: none; }
.kopf-mehr-knopf:hover { color: var(--text-dunkel); }

/* Der Pfeil dreht beim Oeffnen — dieselbe Bewegung wie am Handymenue.       */
.kopf-mehr-pfeil {
  width: 9px; height: 6px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.3;
  transition: transform var(--d-schnell) var(--uebergang);
}
.kopf-mehr[open] .kopf-mehr-pfeil { transform: rotate(180deg); }
.kopf-mehr[open] .kopf-mehr-knopf { color: var(--text-dunkel); }

/* Steht der Besucher hinter dem Chip, traegt er dieselbe goldene Unterlinie
   wie ein aktiver Eintrag — sonst widerspraeche die Zeile dem Ort.
   border-bottom statt einer zweiten Farbe: Es ist dasselbe Zeichen wie bei
   .kopf-nav a[aria-current], nur an einer Pille.                            */
.kopf-mehr-aktiv .kopf-mehr-knopf {
  color: var(--text-dunkel);
  border-color: rgba(var(--gold-rgb), .7);
}

.kopf-mehr-blatt {
  position: absolute; top: calc(100% + 12px); left: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 200px; padding: 10px;
  background: var(--grund-dunkel-blatt);
  border: 1px solid var(--rand-dunkel);
  border-radius: 10px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55);
}
/* Die Eintraege sind Zeilen, keine Nav-Links in einer Reihe: voller Kasten,
   damit die Trefferflaeche bis an den Rand reicht.                          */
.kopf-nav .kopf-mehr-blatt a {
  padding: 8px 10px; border-radius: 6px; border-bottom: 0;
  transition: background var(--d-schnell) var(--uebergang),
              color var(--d-schnell) var(--uebergang);
}
.kopf-nav .kopf-mehr-blatt a:hover { background: rgba(var(--text-dunkel-rgb), .06); }
.kopf-nav .kopf-mehr-blatt a[aria-current="page"] {
  background: rgba(var(--gold-rgb), .12);
  color: var(--text-dunkel);
}

/* Kontakt ist der einzige Eintrag mit Rahmen.                              */
.kopf-kontakt {
  flex: none;
  border: 1px solid rgba(var(--gold-rgb), .75);
  color: #F0D6A6;                /* auf --grund-dunkel 13,1:1 */
  border-radius: var(--radius-pille);
  padding: 9px 20px;
  font-size: 13px;
  font-weight: var(--gewicht-halb);
  text-decoration: none;
  transition: background var(--d-schnell) var(--uebergang);
}
.kopf-kontakt:hover { background: rgba(var(--gold-rgb), .14); }

/* Sprungmarke — sichtbar, sobald sie den Fokus bekommt.                    */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--grund-dunkel);
  color: var(--text-dunkel);
  padding: 12px 18px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-klein);
}
.skip:focus { left: var(--seitenrand); top: 10px; }

/* ==========================================================================
   FUSS — tieferer Grund, Goldkante, Faden, Farbleiste
   ========================================================================== */
.fuss {
  position: relative;
  background: var(--grund-fuss);
  color: var(--text-dunkel-nav);                /* auf --grund-fuss 11,1:1 */
  overflow: hidden;
  border-top: 1px solid rgba(var(--gold-rgb), .22);
}

/* Der Faden aus dem Hero kommt oben rechts wieder herein und endet an der
   Wortmarke. Dieselbe Zeichnung, dieselben 22 s.                           */
.fuss-faden {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.faden-linie { stroke-dasharray: 1600; animation: faden var(--d-faden) cubic-bezier(.45,0,.3,1) infinite; }
.faden-funke { stroke-dasharray: 56 1544; animation: komet var(--d-faden) linear infinite; }

@keyframes faden { 0% { stroke-dashoffset: 1600; } 55%,100% { stroke-dashoffset: 0; } }
@keyframes komet { 0% { stroke-dashoffset: 1600; } 100% { stroke-dashoffset: 0; } }

.fuss-raster {
  position: relative;
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr 1fr 1.15fr;
  gap: 36px;
  padding: 64px var(--seitenrand) 44px;
}

.fuss-marke img {
  height: 46px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .96;
}
.fuss-claim {
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-dunkel-weich);
  max-width: 28ch;
}
.fuss-faden-ende {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 21px;
  color: var(--text-dunkel-rubrik);                /* auf --grund-fuss 8,7:1 */
  margin-top: 20px;
}

.fuss-titel {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dunkel-rubrik);                /* auf --grund-fuss 8,7:1 */
  font-weight: var(--gewicht-halb);
  margin-bottom: 18px;
}
.fuss-liste {
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 13.5px;
}
.fuss-liste a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-dunkel-nav);
  text-decoration: none;
}
.fuss-liste a:hover { color: var(--text-dunkel); text-decoration: underline; }
.fuss-liste a.gedaempft { color: var(--text-dunkel-weich); }

.fuss-adresse {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text-dunkel-weich);
  font-style: normal;
}
.fuss-adresse a { color: var(--gold-weich); text-decoration: none; }
.fuss-adresse a:hover { text-decoration: underline; }

/* Öffnungszeiten — durch eine Haarlinie abgesetzt. Geschlossene Tage sind
   die Ausnahme, nicht die Botschaft: sie stehen in --text-dunkel-grenze.   */
.fuss-zeiten { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(var(--text-dunkel-rgb), .10); }
.fuss-zeiten-liste { display: flex; flex-direction: column; gap: 7px; font-size: 13px; }
.fuss-zeit { display: flex; justify-content: space-between; gap: 14px; }
.fuss-zeit dt { color: var(--text-dunkel-weich); }
.fuss-zeit dd { margin: 0; color: var(--text-dunkel); white-space: nowrap; flex: none; }
.fuss-zeit dd.zu { color: var(--text-dunkel-grenze); }

/* `.fuss-nachoben` stand hier bis zum 02.08.2026 — der zweite „Nach oben"-Weg
   am Ende der letzten Fußspalte. Gestrichen, die schwebende Pille `.nachoben`
   genügt. Die Regel ist mit dem Markup gegangen und nicht liegengeblieben:
   Eine Regel, die nirgends greift, ist meistens ein vergessener Bauauftrag —
   der Nächste baut sie sonst wieder ein. Begründung in inc/fuss.php.        */

/* Widerrufspille — § 356a BGB verlangt sie auf jeder Unterseite.
   Deshalb ein Knopf und kein Textlink. Nicht entfernen.                    */
.fuss-widerruf {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(var(--gold-rgb), .75);
  color: #F0D6A6;
  border-radius: var(--radius-pille);
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: var(--gewicht-halb);
  text-decoration: none;
  /* Deutlich abgesetzt von der Liste darüber: Die Belehrung ist ein Text zum
     Lesen, dieser Knopf löst einen Vorgang aus. Zwei Pixel Abstand ließen
     ihn wie den nächsten Listeneintrag aussehen.                           */
  margin-top: 16px;
}
.fuss-widerruf:hover { background: rgba(var(--gold-rgb), .14); }

/* --- Bezahlen mit -------------------------------------------------------
   Fremdmarken werden nicht eingefärbt. Deshalb das weiße Plättchen: beide
   Dateien bringen einen hellen Grund mit und funktionieren so auch auf dem
   dunklen Fuß.                                                             */
.fuss-zahlung {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 var(--seitenrand) 30px;
  flex-wrap: wrap;
}
.zahl-plaettchen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 11px;
  background: var(--grund-weiss);
  border-radius: var(--radius-plaettchen);
  flex: none;
}
.zahl-plaettchen.eng { padding: 0 9px; }
.zahl-plaettchen img { width: auto; }
.zahl-paypal img { height: 17px; }
.zahl-klarna img { height: 22px; }

/* Für die dritte Zahlart gibt es kein Logo — sie steht als Textmarke.
   box-sizing zählt den Rand mit, sonst steht sie 2 px höher als die
   Plättchen (AUFTRAG, Falle 10).                                           */
.zahl-text {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(var(--text-dunkel-rgb), .22);
  border-radius: var(--radius-plaettchen);
  font-size: 12.5px;
  color: var(--text-dunkel-nav);
  flex: none;
  white-space: nowrap;
}

/* Die KI-Auskunft. Sie läuft über die volle Breite bis zum Seitenrand — als
   schmaler Block sah sie aus wie ein abgeschnittener Absatz. Der Abstand
   nach unten hält sie vom Schlussstrich weg: Sie gehört nicht zu Preis und
   Urheberrecht darunter, und ein Satz, der auf einer Linie sitzt, liest sich
   wie deren Überschrift.                                                    */
.fuss-ki {
  position: relative;
  margin: 0;
  padding: 0 var(--seitenrand) 22px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-dunkel-grenze);
}

.fuss-schluss {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--seitenrand) 22px;
  border-top: 1px solid rgba(var(--text-dunkel-rgb), .10);
  font-size: 12px;
  color: var(--text-dunkel-grenze);   /* 5,1:1 — die Untergrenze */
}

/* Der Weg in die Verwaltung. Er soll gefunden werden, wenn man ihn sucht,
   und übersehen, wenn nicht.

   ER WIRD NICHT ABGEDUNKELT. `.fuss-schluss` sitzt mit 5,1:1 schon auf der
   Untergrenze; ein Link, der noch blasser wäre, wäre für manche gar nicht
   mehr da. Dezent kommt aus Platz und Nachbarschaft — er steht hinter dem
   Copyright statt in der Navigation, und ohne Unterstreichung liest er sich
   als Teil der Zeile. Erst bei Maus und Tastatur tritt er hervor.

   Der Trenner ist ein eigenes Element, damit er zusammen mit dem Link
   verschwindet, falls dieser je entfällt — ein „·" am Zeilenende hat noch
   jeden ratlos gemacht.

   Er wird NICHT abgeschwächt. In derselben Zeile steht schon ein „·"
   zwischen Marke und Inhaber; zwei verschieden kräftige Punkte nebeneinander
   sehen nach Versehen aus. Ein `opacity: .55` stand hier kurz und ist genau
   daran gescheitert.                                                       */
.fuss-trenner { padding: 0 4px; }

/* `.fuss-admin` STAND HIER BIS ZUM 27.08.2026 — der Verweis auf die eigene
   Verwaltung des Ladens in der Schlusszeile. Die Verwaltung ist mit dem
   08.08.2026 nach ElasPrintFlow gezogen, `public/admin.php` gibt es nicht
   mehr, und die Regel hat seither nichts mehr gefärbt. */

/* Die Blüte als 4 px hohe Leiste. Sie schließt die Seite.                  */
.fuss-leiste {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 4px;
}

/* ==========================================================================
   NACH-OBEN-PILLE — echter Anker, kein JavaScript-Sprung
   ========================================================================== */
.nachoben {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(var(--grund-dunkel-rgb), .88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(var(--gold-rgb), .55);
  color: #F0D6A6;
  border-radius: var(--radius-pille);
  padding: 11px 20px 11px 15px;
  font-size: 13px;
  font-weight: var(--gewicht-halb);
  text-decoration: none;
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.75);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--d-blende) var(--uebergang),
              transform var(--d-blende) var(--uebergang);
}
.nachoben span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb), .5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex: none;
}
.nachoben.sichtbar { opacity: 1; transform: none; pointer-events: auto; }

/* Ohne JavaScript bleibt der Anker nutzbar — er ist dann dauerhaft da,
   statt sich einzublenden.                                                 */
html:not(.js) .nachoben { opacity: 1; transform: none; pointer-events: auto; }

/* ==========================================================================
   FOKUS — kein Browserstandard (AUFTRAG Regel 13)
   ========================================================================== */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: var(--fokus);
  outline-offset: var(--fokus-abstand);
  border-radius: var(--radius-klein);
}

/* ==========================================================================
   HANDY — 390 px
   Seitenrand 52 → 20. Die neun Einträge wandern ins Menü; solange das Menü
   noch nicht gebaut ist (Stufe 3), bricht die Navigation um, statt zu
   verschwinden — sichtbar unfertig ist besser als unerreichbar.
   ========================================================================== */
@media (max-width: 900px) {
  .kopf-innen,
  .fuss-raster,
  .fuss-zahlung,
  .fuss-schluss,
  .fuss-ki { padding-inline: var(--seitenrand-handy); }

  .kopf-innen { flex-wrap: wrap; gap: 14px; }
  .kopf-nav   { margin-left: 0; flex-wrap: wrap; gap: 14px; width: 100%; order: 3; }
  .kopf-marke img { height: 40px; }
}

/* ==========================================================================
   ZWISCHENBAND: TABLET IM QUERFORMAT (901–1240 px)
   ==========================================================================

   Hier lief die Kopfzeile bisher mit Desktop-Werten, und die passten nicht:
   Sie braucht rund 1122 px Inhalt, dazu 2 x 52 px Seitenrand. Unterhalb von
   etwa 1226 px Fensterbreite steht `.kopf-kontakt` deshalb AUSSERHALB des
   Bildes — gemessen am 18.08.2026 bei 1024 px: von 1050 bis 1141 px, bei
   einem 1024 px breiten Fenster.

   Und weil nichts querscrollt, war der Knopf nicht bloss abgeschnitten,
   sondern UNERREICHBAR. Das Mobilmenue haette ihn aufgefangen, uebernimmt
   aber erst ab 900 px. Dazwischen lag ein Band von 300 px Breite — das
   gesamte Tablet-Querformat — ohne Weg zum Kontakt.

   DIE NAVIGATION BLEIBT SICHTBAR, statt frueher ins Mobilmenue zu wandern.
   Auf einem Tablet ist Platz fuer sie, nur nicht in derselben Zeile: Sie
   rueckt in eine eigene darunter. Die Regeln dafuer gab es laengst im
   900er-Block — dort werden sie allerdings vom Mobilmenue ueberschrieben und
   kamen nie zum Zug.

   Die Grenze ist --container (1240 px), nicht die gemessenen 1226: Unterhalb
   der Containerbreite ist das Layout ohnehin fluessig, und eine Zahl, die im
   Entwurf steht, ist leichter zu behalten als eine ausgerechnete.
   ========================================================================== */
@media (min-width: 901px) and (max-width: 1240px) {
  .kopf-innen { flex-wrap: wrap; gap: 14px 20px; }
  .kopf-nav   { margin-left: 0; flex-wrap: wrap; gap: 18px; width: 100%; order: 3; }

  /* Ohne die Navigation fehlt der Zeile ihr Abstandhalter — sonst klebten
     Korb, Lupe, Wunschzettel und Kontakt links an der Bildmarke. */
  .kopf-korb { margin-left: auto; }

  .fuss-raster { grid-template-columns: 1fr 1fr; gap: 30px; padding-top: 44px; }
  .fuss-marke  { grid-column: 1 / -1; }

  /* Der Faden braucht Breite — am Handy entfällt er (AUFTRAG, Abschnitt
     Handy).                                                                */
  .fuss-faden { display: none; }

  .fuss-zahlung { gap: 10px; }
  .fuss-schluss { flex-direction: column; gap: 10px; }

  .nachoben { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}

/* Erst wirklich schmal bricht der Fuß auf eine Spalte um. Bei 390 px stehen
   die Spalten zu zweit — so wie in mobil.html.                              */
@media (max-width: 380px) {
  .fuss-raster { grid-template-columns: 1fr; }
}

/* Trefferflächen nirgends unter 44 px.                                     */
@media (pointer: coarse) {
  .kopf-nav a,
  .fuss-liste a { min-height: var(--treffer); }
  .kopf-kontakt,
  /* Der Chip des Ueberlaufs ist ein Bedienelement wie jedes andere — und das
     einzige, das auf Tablets in Reichweite steht, wo die Kopfzeile noch die
     grosse ist (24.08.2026).                                                */
  .kopf-mehr-knopf { min-height: var(--treffer); box-sizing: border-box; }

  /* NACHGEZOGEN AM 15.08.2026. Die Regel oben galt seit jeher, erreichte aber
     nur Kopf- und Fußnavigation. Sechs echte Bedienelemente lagen darunter:
     das Kreuz am Ankündigungsband mit 26 px als kleinstes der Seite, das Herz
     auf den Kacheln und das Kreuz der Suche mit je 34, das Mengenfeld im Korb
     mit rund 40 und die Brotkrumen mit 23.

     ZWEI WEGE, JE NACHDEM WAS DAS ELEMENT IST:

     Symbolknöpfe behalten ihre Größe und bekommen mit ::after einen
     unsichtbaren Kreis darüber. Ihre Maße sind gestaltet — ein aufgeblasenes
     Kreuz sähe falsch aus, ein danebengreifender Daumen ist trotzdem ein
     Fehler. Dasselbe Muster wie bei den Farbproben der Produktseite.

     Elemente in einer Zeile wachsen stattdessen in die Höhe: Brotkrumen und
     Mengenfeld stehen dicht nebeneinander, überlappende Trefferflächen würden
     dort das Danebengreifen erst erzeugen, das sie verhindern sollen.      */
  /* OHNE .neuband-zu: Das Kreuz ist bereits `position: absolute` und sitzt
     damit an einer gerechneten Stelle am Bandrand. Ein `relative` hier würde
     ihm genau diese Platzierung nehmen — und es stellt als absolut
     positioniertes Element ohnehin schon den Bezugsrahmen für sein ::after. */
  .herz,
  .suchleiste-weg,
  .suchkasten-zu { position: relative; }

  .neuband-zu::after,
  .herz::after,
  .suchleiste-weg::after,
  .suchkasten-zu::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--treffer);
    height: var(--treffer);
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }

  .brotkrume a {
    display: inline-flex;
    align-items: center;
    min-height: var(--treffer);
  }
  .korb-menge input { min-height: var(--treffer); box-sizing: border-box; }
}

/* „Bezahlen mit" steht in der Reihe, nicht darüber — deshalb ohne
   Unterabstand und ohne Umbruch. */
.fuss-titel-inline { margin-bottom: 0; flex: none; white-space: nowrap; }

/* ==========================================================================
   STUFE 3 — GRUNDTYPOGRAFIE
   Ab hier trägt blueten.css die ganze Seite.
   ========================================================================== */
body {
  margin: 0;
  background: var(--grund-dunkel);
  font-family: var(--schrift);
  font-size: var(--t-text);
  line-height: var(--zeile-text);
  color: var(--text-hell);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a   { color: var(--handlung); text-decoration: none; }
a:hover { color: var(--handlung-hover); }
h1, h2, h3 { font-weight: var(--gewicht-leicht); margin: 0; }

/* Cormorant kursiv steht überall dort, wo <em> im Fließtext eines Titels
   auftaucht — Zahlen, Preise, einzelne Wörter. Nie für ganze Absätze.      */
.kursiv, .k {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-weight: var(--gewicht-leicht);
}

/* ==========================================================================
   BEWEGUNG — die Namen aus dem Entwurf, unverändert
   ========================================================================== */
@keyframes schimmer  { 0%   { background-position: -220% 0; }
                       60%,100% { background-position: 220% 0; } }
@keyframes farbfluss { 0%,100% { background-position:   0% 50%; }
                       50%     { background-position: 100% 50%; } }
@keyframes blattAtem { 0%,100% { transform: translateY(0) rotate(0deg); }
                       50%     { transform: translateY(-7px) rotate(-.6deg); } }
@keyframes ringPuls  { 0%,100% { transform: scale(.96); opacity: .5; }
                       50%     { transform: scale(1.04); opacity: .95; } }

/* Der Entwurf schaltet Bewegung hart ab. Die 1-ms-Werte in tokens.css
   allein genügen nicht: eine Schleife mit 1 ms läuft weiter, nur schneller.  */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   HERO — dunkel, innerhalb von .band-nacht
   Zwei Fassungen: „start" mit Blüte, „schmal" für alle übrigen Seiten.
   ========================================================================== */

/* Der Filamentfaden zeichnet sich aus der Düse. Er liegt über dem ganzen
   Hero und nimmt keine Klicks an.                                          */
.hero-faden {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.hero-faden .faden-linie { stroke-dasharray: 2000; }
.hero-faden .faden-funke { stroke-dasharray: 64 1936; }

@keyframes faden2000 { 0% { stroke-dashoffset: 2000; } 55%,100% { stroke-dashoffset: 0; } }
@keyframes komet2000 { 0% { stroke-dashoffset: 2000; } 100% { stroke-dashoffset: -120; } }
.hero-faden .faden-linie { animation: faden2000 var(--d-faden) cubic-bezier(.45,0,.3,1) infinite; }
.hero-faden .faden-funke { animation: komet2000 var(--d-faden) linear infinite; }

/* --- Kicker: Sperrschrift über der Überschrift ---------------------------- */
.kicker {
  margin-bottom: 26px;
  font-size: var(--t-mikro);
  font-weight: var(--gewicht-halb);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dunkel-rubrik);                 /* auf --grund-dunkel 8,4:1 */
}
/* SEIT DEM 24.08.2026 STEHT ER AUCH IN DER H1 — als <span>, damit Google ihn
   als Teil der Überschrift liest (siehe hero-schmal.php). Ein <span> ist
   inline: Ohne diese Regel klebte „KATEGORIE · DEKO" in derselben Zeile vor
   „Vasen, Halter, Objekte" und der Abstand darunter fiel weg, weil ein
   inline-Element keinen unteren Rand kennt. Die Zeilenhöhe kommt von der H1
   (1,05) und wäre für 11-px-Sperrschrift zu eng.                            */
h1 > .kicker {
  display: block;
  line-height: 1.5;
}

/* --- Startseite ----------------------------------------------------------- */
.hero-start {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 56px var(--seitenrand) 66px;
  align-items: center;
}
.hero-start h1 {
  margin: 0;
  font-size: var(--t-hero);
  line-height: var(--t-hero-hoehe);
  letter-spacing: var(--t-hero-sperrung);
  color: var(--text-dunkel-titel);                 /* auf --grund-dunkel 17,0:1 */
}
/* Das dritte Wort läuft durch die ganze Blütenpalette — 24 s für einen
   Durchlauf. Der Verlauf liegt in der Schrift, nicht dahinter.             */
.hero-wort {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-weight: var(--gewicht-leicht);
  font-size: 74px;
  letter-spacing: -.012em;
  background: linear-gradient(96deg, var(--bluete-rose), var(--bluete-pfirsich), var(--gold), var(--bluete-pflaume), var(--bluete-petrol), var(--bluete-rose));
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: farbfluss var(--d-verlauf) ease-in-out infinite;
}
.hero-text {
  margin: 28px 0 0;
  max-width: 40ch;
  font-size: 17px;
  line-height: 1.78;
  color: var(--text-dunkel-lead);                 /* auf --grund-dunkel 8,8:1 */
}
.hero-knoepfe {
  display: flex;
  gap: 16px;
  margin-top: 36px;
  align-items: center;
  flex-wrap: wrap;
}
.hero-nebensatz {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 20px;
  color: var(--text-dunkel-rubrik);
}

/* --- Übrige Seiten -------------------------------------------------------- */
.hero-schmal {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 44px;
  padding: 46px var(--seitenrand) 52px;
  align-items: end;
}
.hero-schmal .kicker { margin-bottom: 20px; }
.hero-schmal h1 {
  margin: 0;
  font-size: 54px;
  line-height: 1.05;
  letter-spacing: -.04em;
  color: var(--text-dunkel-titel);
}
/* In der schmalen Fassung steht das kursive Wort ruhig in Gold — kein
   Farbverlauf. Der gehört der Startseite.                                   */
.hero-schmal h1 em {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 60px;
  color: var(--gold-weich);                 /* auf --grund-dunkel 11,8:1 */
}
/* --- Schmaler Hero, zweite Fassung: mit Bild ------------------------------
   Für Seiten, die ohne Bild nicht erklären, worum es geht. Der Text rückt in
   die linke Spalte zusammen, rechts läuft ein Foto bis an den Seitenrand —
   deshalb die negativen Ränder: Sie heben die Polsterung von .hero-schmal
   genau dort wieder auf, wo das Bild anstößt.                              */
.hero-mitbild {
  grid-template-columns: 1.02fr .98fr;
  /* stretch, nicht center: Sonst ist das Bild nur so hoch wie sein Inhalt und
     die negativen Ränder unten greifen ins Leere — es blieb ein Streifen
     Dunkelheit unter dem Foto stehen. Die Textspalte richtet sich einzeln
     mittig aus.                                                            */
  align-items: stretch;
  gap: 40px;
}
.hero-mitbild .hero-spalte { align-self: center; }
.hero-mitbild h1 { font-size: 50px; }
.hero-mitbild h1 em { font-size: 56px; }
.hero-lead {
  margin: 24px 0 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.78;
  color: var(--text-dunkel-lead);
}
.hero-mitbild .hero-knoepfe { margin: 30px 0 0; }
.hero-bild {
  position: relative;
  overflow: hidden;
  margin: -46px calc(-1 * var(--seitenrand)) -52px 0;
  min-height: 430px;
}
.hero-bild img { width: 100%; height: 100%; object-fit: cover; }
/* Der Verlauf zieht das Bild an seiner linken Kante ins Dunkel des Bandes.
   Ohne ihn stünde eine harte Kante mitten in der Fläche.                   */
.hero-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(var(--grund-dunkel-rgb), .96) 0%, rgba(var(--grund-dunkel-rgb), .42) 34%, rgba(var(--grund-dunkel-rgb), .06) 70%);
}
.hero-bild-marke {
  position: absolute;
  left: 20px;
  bottom: 18px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 8px 15px;
  border: 1px solid rgba(var(--text-dunkel-rgb), .16);
  border-radius: var(--radius-pille);
  background: rgba(var(--grund-dunkel-rgb), .82);
  font-size: 11.5px;
  color: var(--text-dunkel-nav);
  white-space: nowrap;
}
.hero-bild-punkt {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--gold);
}

/* --- Die KI-Marke ---------------------------------------------------------
   Sitzt IM Bild, unten rechts, 10 px vom Rand. Maße und Verhalten aus dem
   Entwurf „KI-Kennzeichnung" (02.08.2026); die Begründungen stehen bei
   ki_marke() in inc/funktionen.php.

   `box-sizing: border-box` ist hier keine Gewohnheit, sondern nötig: Sonst
   addieren Rand und Polsterung auf die 21 px auf, und aus dem Ring wird ein
   Ei.

   Das Wort ist echter Text und nur BESCHNITTEN — `max-width` plus
   `overflow: hidden`, nicht `display: none`. So liest es der Vorleser auch
   im eingeklappten Zustand.                                                */
.ki-marke {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 21px;
  max-width: 21px;
  overflow: hidden;
  border: 1px solid rgba(var(--text-dunkel-rgb), .24);
  border-radius: 999px;
  background: rgba(var(--grund-dunkel-rgb), .68);
  backdrop-filter: blur(7px);
  color: var(--text-dunkel);
  white-space: nowrap;
  transition: max-width var(--d-blende) var(--uebergang);
}
.ki-marke:hover,
.ki-marke:focus-visible { max-width: 132px; }

/* Ohne Maus gibt es kein Überfahren — dort steht das Wort dauerhaft offen.
   Ein Hinweis, den man auf dem Telefon nicht aufklappen kann, wäre keiner. */
@media (hover: none) {
  .ki-marke { max-width: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .ki-marke { transition: none; }
}

.ki-marke-ring {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  flex: none;
  border: 1px solid rgba(231,201,160,.62);
  border-radius: 50%;
  background: rgba(231,201,160,.12);
  color: var(--gold-weich);
  font-size: 8px;
  font-weight: var(--gewicht-halb);
  letter-spacing: .02em;
}
.ki-marke-wort {
  padding: 0 9px 0 1px;
  font-size: 9px;
  font-weight: var(--gewicht-halb);
  letter-spacing: .05em;
}

.hero-schmal-text {
  position: relative;
  padding-bottom: 8px;
}
.hero-schmal-text p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-dunkel-lead);
}
/* Der Absatz hier ist mit `line-height: 1.75` schon 27 px luftig gesetzt. Die
   36 px aus `.hero-knoepfe` sind danach nur das 1,3-fache des Zeilenabstands
   und lesen sich nicht mehr als Trennung, sondern wie eine weitere Zeile —
   am 03.08.2026 an der Werkstattseite gemeldet. In der Bildfassung stellt
   sich die Frage nicht: dort steht die Knopfzeile in der anderen Spalte. */
.hero-schmal-text .hero-knoepfe { margin-top: 48px; }
.hero-spalte { position: relative; }

/* ==========================================================================
   KNÖPFE
   Auf Nacht führt Gold, auf Tag die Handlungsfarbe (AUFTRAG Regel 4).
   ========================================================================== */
.knopf-gold {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(var(--gold-rgb), .8);
  color: var(--gold-auf);                 /* auf --grund-dunkel 14,1:1 */
  border-radius: var(--radius-pille);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: var(--gewicht-halb);
  box-shadow: 0 0 30px -8px rgba(var(--gold-rgb), .55);
  transition: background var(--d-schnell) var(--uebergang);
}
.knopf-gold:hover { background: rgba(var(--gold-rgb), .14); color: var(--gold-auf); }

/* Der zweite Knopf im dunklen Kopfband — leiser als der goldene, aber lesbar.
   Er gehört hierher und nicht zu `.knopf-schlicht`: Der ist mit
   `var(--text-hell)` (#242933) für HELLE Gründe gemacht und käme auf
   --grund-dunkel auf 1,27:1. Genau so stand er bis v116 im Kopfband — der
   Rahmen war zu sehen, die Schrift nicht. Gemeldet am 03.08.2026 an der
   Werkstattseite. */
.knopf-leise {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(207,194,188,.34);
  color: var(--text-dunkel-nav);                 /* auf --grund-dunkel 10,7:1 */
  border-radius: var(--radius-pille);
  padding: 14px 28px;
  font-size: 15px;
  font-weight: var(--gewicht-halb);
  text-decoration: none;
  transition: border-color var(--d-schnell) var(--uebergang),
              color var(--d-schnell) var(--uebergang);
}
.knopf-leise:hover { border-color: rgba(var(--gold-rgb), .75); color: var(--gold-auf); }

.knopf-hell {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(var(--text-dunkel-rgb), .28);
  color: var(--text-dunkel);
  border-radius: var(--radius-pille);
  padding: 13px 24px;
  font-size: 14.5px;
  font-weight: var(--gewicht-halb);
  transition: background var(--d-schnell) var(--uebergang);
}
.knopf-hell:hover { background: rgba(var(--text-dunkel-rgb), .10); color: var(--text-dunkel); }

/* ==========================================================================
   DIE BLÜTE — fünf Blätter um einen Punkt
   Jedes Blatt sitzt mit transform-origin an der linken unteren Ecke und wird
   in 72°-Schritten gedreht. Das Foto darin bekommt die Gegendrehung, damit
   es aufrecht steht.
   ========================================================================== */
.bluete-spalte { display: flex; flex-direction: column; }
.bluete { position: relative; height: 520px; }

.bluete-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 430px;
  height: 430px;
  margin: -215px 0 0 -215px;
  border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb), .22);
  animation: ringPuls 13s ease-in-out infinite;
}

/* Nullpunkt: Der Container hat keine Ausdehnung, er ist nur der Drehpunkt. */
.bluete-mitte { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }

.blatt {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 134px;
  height: 196px;
  transform-origin: 0% 100%;
}
.blatt:nth-child(1) { transform: rotate(0deg); }
.blatt:nth-child(2) { transform: rotate(72deg); }
.blatt:nth-child(3) { transform: rotate(144deg); }
.blatt:nth-child(4) { transform: rotate(216deg); }
.blatt:nth-child(5) { transform: rotate(288deg); }

/* Farblicht hinter dem Blatt — die Kategoriefarbe als Schein.              */
.blatt-licht {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  filter: blur(22px);
  background: radial-gradient(circle, rgba(var(--licht), .55) 0%, rgba(var(--licht), 0) 68%);
}
.blatt-flaeche {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--blatt);
  overflow: hidden;
  background: var(--grund-platte);
  box-shadow: 0 0 0 1px rgba(var(--text-dunkel-rgb), .2);
}
.blatt-flaeche img { width: 100%; height: 100%; object-fit: cover; }

/* Gegendrehung. scale(1.5) füllt die schräg stehende Fläche wieder aus.    */
.blatt:nth-child(2) .blatt-flaeche img { transform: rotate(-72deg)  scale(1.5); }
.blatt:nth-child(3) .blatt-flaeche img { transform: rotate(-144deg) scale(1.5); }
.blatt:nth-child(4) .blatt-flaeche img { transform: rotate(-216deg) scale(1.5); }
.blatt:nth-child(5) .blatt-flaeche img { transform: rotate(-288deg) scale(1.5); }

/* --- Die Blätter als Verweise -------------------------------------------
   Seit dem 02.08.2026 führt jedes Blatt in seine Kategorie. Die
   Baustellenseite trägt dieselbe Blüte weiterhin als reines Bild — deshalb
   hängen diese Regeln an `a.blatt` und nicht an `.blatt`.

   Die Spannen brauchen `display: block`: Als Inline-Elemente ignorierten sie
   Breite und Höhe, und die Blattfläche fiele auf null zusammen.            */
a.blatt { display: block; color: inherit; }
a.blatt .blatt-licht,
a.blatt .blatt-flaeche { display: block; }

/* Der Name im Blatt. Er steht gegen die Drehung, sonst läge er quer.
   Bei bestückten Kategorien erscheint er erst bei Zeigefinger oder Fokus —
   im Ruhezustand bleibt die Blüte das Zeichen der Marke und kein Menü.     */
.blatt-kat {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  padding: 5px 12px;
  border-radius: var(--radius-pille);
  background: rgba(var(--grund-dunkel-rgb), .72);
  backdrop-filter: blur(6px);
  font-size: 12.5px;
  font-weight: var(--gewicht-halb);
  color: var(--gold-auf);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-schnell) var(--uebergang);
}
a.blatt:hover .blatt-kat,
a.blatt:focus-visible .blatt-kat { opacity: 1; }

/* Eine Kategorie ohne Bestand hat kein Foto. Dann ist der Name das Einzige,
   was im Blatt steht — und darf nicht erst auf Zuruf erscheinen.           */
a.blatt:not(:has(img)) .blatt-kat { opacity: 1; background: none; backdrop-filter: none; }

/* Gegendrehung wie beim Bild, damit der Name waagerecht steht.             */
.blatt:nth-child(1) .blatt-kat { transform: translate(-50%,-50%) rotate(0deg); }
.blatt:nth-child(2) .blatt-kat { transform: translate(-50%,-50%) rotate(-72deg); }
.blatt:nth-child(3) .blatt-kat { transform: translate(-50%,-50%) rotate(-144deg); }
.blatt:nth-child(4) .blatt-kat { transform: translate(-50%,-50%) rotate(-216deg); }
.blatt:nth-child(5) .blatt-kat { transform: translate(-50%,-50%) rotate(-288deg); }

/* Das Licht hinter dem Blatt wird kräftiger, das Blatt tritt hervor.       */
a.blatt:hover .blatt-licht,
a.blatt:focus-visible .blatt-licht { inset: -34px; filter: blur(26px); }
a.blatt:hover .blatt-flaeche { box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .55); }
/* Der Ring liegt an der Fläche, nicht am Blatt: Nur sie trägt die Blattform,
   und sie beschneidet zwar ihren Inhalt, nicht aber ihren eigenen Umriss. */
a.blatt:focus-visible { outline: none; }
a.blatt:focus-visible .blatt-flaeche { outline: var(--fokus); outline-offset: 3px; }

/* Die Bildmarke in der Mitte, auf einem weichen dunklen Kreis.             */
.bluete-marke {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bluete-marke::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--grund-dunkel-rgb), .94) 34%, rgba(var(--grund-dunkel-rgb), 0) 74%);
}
.bluete-marke::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  filter: blur(14px);
  background: radial-gradient(circle, rgba(var(--gold-rgb), .42) 0%, rgba(var(--gold-rgb), 0) 70%);
}
.bluete-marke img { position: relative; width: 106px; height: auto; }

.bluete-zaehler {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 9px;
  padding-top: 12px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-dunkel-rubrik);
  white-space: nowrap;
}
.bluete-zaehler .k {
  font-size: 22px;
  color: var(--gold-auf);
  letter-spacing: 0;
  text-transform: none;
}

/* Farbzuordnung — dieselbe wie Navigation, Fuß und Kacheln.               */
.licht-rose     { --licht: 212,127,145; }
.licht-pfirsich { --licht: 230,154,103; }
.licht-pflaume  { --licht: 137,108,145; }
.licht-petrol   { --licht: 111,158,171; }
.licht-gold     { --licht: 211,154,57;  }
.licht-salbei   { --licht: 143,169,138; }

/* ==========================================================================
   GOLDLINIE zwischen Nacht und Tag — 2 px, wandert in 18 s durch
   ========================================================================== */
.goldlinie {
  position: relative;
  height: 2px;
  background: linear-gradient(90deg,
              rgba(var(--gold-rgb), 0) 0%, rgba(var(--gold-rgb), .9) 20%,
              rgba(253,133,7,.95) 50%, rgba(var(--gold-rgb), .9) 80%,
              rgba(var(--gold-rgb), 0) 100%);
  background-size: 220% 100%;
  animation: schimmer var(--d-goldlinie) ease-in-out infinite;
}

/* ==========================================================================
   KATEGORIEBAND — vier Felder, randlos aneinander
   ========================================================================== */
/* SO VIELE SPALTEN, WIE ES KATEGORIEN GIBT — nicht vier.
   Bis zum 07.08.2026 stand hier `repeat(4, 1fr)`, obwohl der Kommentar im
   Markup schon „Fünf Felder, randlos aneinander" sagte: Beim Kategorienumbau
   kam „Nach Maß" dazu, und die Regel blieb stehen. Die fünfte Kachel fiel in
   eine zweite Reihe und stand dort allein in einem Viertel, mit drei Vierteln
   Leere daneben.

   `auto-fit` statt einer festen Fünf, damit dieselbe Falle nicht wiederkommt:
   Die Zahl der Kategorien steht in daten.php und darf sich ändern, ohne dass
   jemand daran denkt, hier nachzuzählen. Unter 200px je Feld bricht die Reihe
   von selbst um — und dann sind es zwei gleich breite statt einer vollen und
   einer halben.                                                            */
.kat-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kat-feld {
  padding: 30px 26px 28px;
  color: var(--text-hell);
  display: block;
}

/* DIE ÄUSSEREN ZWEI FELDER RÜCKEN AUF DEN SEITENRAND EIN.
   Die Farbflächen bleiben randlos — daran ändert sich nichts, sie sind das
   Ordnungssystem. Nur der TEXT darin stand aus der Reihe: 26px vom Rand,
   während alles darüber und darunter auf --seitenrand (52px) sitzt. Im
   Browser gemessen stand „Wohnen & Deko" bei 38,5px und die Augenbraue
   „AUSGEWÄHLT" direkt darunter bei 64,5px — ein sichtbarer Versatz von 26px,
   und zwar an beiden Seiten.

   ERST AB 1001px, und das ist kein gerundeter Wert: Bis dahin bricht
   `auto-fit` die Reihe auf 4+1 um (nachgemessen — bei 1000px fünf Spalten,
   bei 950px vier). Nach einem Umbruch ist das letzte Feld nicht mehr der
   rechte Rand, sondern steht links in der zweiten Reihe; die Einrückung
   säße dann auf der falschen Seite. In diesem schmalen Fenster bleibt es
   deshalb bei den 26px — symmetrisch, nur enger.

   Am Handy ist ohnehin nichts zu tun: Dort stehen 20px am Feld und
   --seitenrand-handy ist ebenfalls 20px, das passt bereits. */
@media (min-width: 1001px) {
  .kat-feld:first-child { padding-left: var(--seitenrand); }
  .kat-feld:last-child  { padding-right: var(--seitenrand); }
}

.kat-ziffer {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 44px;
  line-height: 1;
}
.kat-name { font-size: 18px; font-weight: var(--gewicht-halb); margin-top: 12px; }
.kat-text { font-size: 13px; line-height: 1.65; margin-top: 8px; }

.kat-rose     { background: var(--kat-rose-flaeche); }
.kat-rose     .kat-ziffer { color: var(--kat-rose-ziffer); }
.kat-rose     .kat-text   { color: var(--kat-rose-text); }
.kat-pfirsich { background: var(--kat-pfirsich-flaeche); }
.kat-pfirsich .kat-ziffer { color: var(--kat-pfirsich-ziffer); }
.kat-pfirsich .kat-text   { color: var(--kat-pfirsich-text); }
.kat-pflaume  { background: var(--kat-pflaume-flaeche); }
.kat-pflaume  .kat-ziffer { color: var(--kat-pflaume-ziffer); }
.kat-pflaume  .kat-text   { color: var(--kat-pflaume-text); }
.kat-petrol   { background: var(--kat-petrol-flaeche); }
.kat-petrol   .kat-ziffer { color: var(--kat-petrol-ziffer); }
.kat-petrol   .kat-text   { color: var(--kat-petrol-text); }
.kat-gold     { background: var(--kat-gold-flaeche); }
.kat-gold     .kat-ziffer { color: var(--kat-gold-ziffer); }
.kat-gold     .kat-text   { color: var(--kat-gold-text); }
.kat-salbei   { background: var(--kat-salbei-flaeche); }
.kat-salbei   .kat-ziffer { color: var(--kat-salbei-ziffer); }
.kat-salbei   .kat-text   { color: var(--kat-salbei-text); }

a.kat-feld:hover .kat-name { text-decoration: underline; }

/* ==========================================================================
   ABSCHNITTSKOPF — Augenbraue, Überschrift, Weiterlink
   ========================================================================== */
.abschnitt-kopf {
  padding: 66px var(--seitenrand) 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.augenbraue {
  font-size: var(--t-mikro);
  font-weight: var(--gewicht-halb);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 14px;
}
.abschnitt-kopf h2 {
  margin: 0;
  font-size: 38px;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.weiterlink {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 21px;
  color: var(--bronze);
  border-bottom: 1px solid var(--bluete-rose);
  padding-bottom: 4px;
  white-space: nowrap;
  flex: none;
}
.weiterlink:hover { color: var(--handlung); border-bottom-color: var(--handlung); }

/* ==========================================================================
   BLATTKACHEL — die Produktkachel der ganzen Seite
   Zwei Ecken rund, zwei spitz; jede zweite gespiegelt. Keine rechteckige
   Marke darauf (AUFTRAG Falle 7).
   ========================================================================== */
.kachel-raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 26px var(--seitenrand) 64px;
}
.kachel {
  position: relative;
  color: inherit;
  display: block;
  animation: blattAtem var(--d-kachel-1) ease-in-out infinite;
}
.kachel:nth-child(4n+1) { animation-duration: var(--d-kachel-1); animation-delay: 0s; }
.kachel:nth-child(4n+2) { animation-duration: var(--d-kachel-3); animation-delay: .8s; }
.kachel:nth-child(4n+3) { animation-duration: var(--d-kachel-2); animation-delay: .4s; }
.kachel:nth-child(4n+4) { animation-duration: var(--d-kachel-4); animation-delay: 1.2s; }

.kachel-licht {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  filter: blur(22px);
  background: radial-gradient(circle, rgba(var(--licht), .42) 0%, rgba(var(--licht), 0) 68%);
}
.kachel-bild {
  position: relative;
  aspect-ratio: var(--blatt-seitenverhaeltnis);
  border-radius: var(--blatt);
  overflow: hidden;
  background: var(--grund-platte);
  box-shadow: 0 0 0 1px var(--linie), 0 22px 44px -30px rgba(40,44,53,.6);
}
/* Jede zweite Kachel spiegelt die Blattform — sonst entsteht ein Muster,
   das wie ein Druckfehler aussieht.                                        */
.kachel:nth-child(even) .kachel-bild { border-radius: var(--blatt-gespiegelt); }

.kachel-bild img { width: 100%; height: 100%; }

/* ══ Die angedeutete Blattform (Entwurf 11c/12a, 29.08.2026) ═════════════════
   Die Kritik am Blatt war, dass es das Produktfoto so stark beschneidet, dass
   das gedruckte Stück nicht mehr zu erkennen ist. Die neue Fassung zeigt das
   VOLLE Bild in einer fast rechteckigen Box und legt das Blatt nur noch
   darüber: Die Ecken laufen weich in den Seitengrund, die Blattlinie bleibt
   als feine Goldkontur.

   ENTSCHIEDEN AM 06.09.2026: Der Laden zeigt nur noch das volle Bild, der
   Vergleichsschalter ist ausgebaut, `blatt-neu` steht fest am `<body>`. Die
   alte Blattform ist noch der Rumpf und wird hier überschrieben — wer sie
   ganz loswerden will, zieht die Regeln unten in den Rumpf hinein und
   entfernt das Präfix. Bis dahin: `.blatt-neu` nirgends abschneiden.

   DER SCHLEIER STEHT IMMER IM MARKUP und ist hier ausgeblendet — ein zweiter
   Markup-Zweig wäre eine zweite Stelle für denselben Fehler.

   `--grund-hell` UND NICHT `#FBF7F1`: Der Entwurf nennt seinen eigenen
   Cremeton; im Haus heisst der Seitengrund anders. Struktur aus dem Blatt,
   Farben des Hauses. Der Verlauf selbst steht in `blattschleier_defs()`. */

.blattschleier-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.blattschleier { display: none; }

.blatt-neu .blattschleier {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.blatt-neu .blattschleier-linie { stroke: var(--gold); stroke-opacity: .5; transition: stroke-opacity .2s ease; }
.blatt-neu .kachel:hover .blattschleier-linie { stroke-opacity: .8; }

/* DIE ECKE UNTEN LINKS BLEIBT RUND — sie ist der Rest der Blattspitze und das
   einzige, was die Form in der Silhouette noch verrät. Ohne sie wäre es eine
   gewöhnliche Bildkachel wie in jedem Laden. */
/* VIER GLEICHE ECKEN (Tristan, 29.08.2026). Der Entwurf lässt unten links eine
   grosse Rundung von 64 px stehen — den Rest der Blattspitze. In der Reihe
   nebeneinander sah sie aus wie ein Fehler in einer Kachel, nicht wie ein
   Merkmal aller. Die Form ist jetzt ein gewöhnliches Rechteck; was vom Blatt
   bleibt, ist die Goldlinie darüber. */
.blatt-neu .kachel-bild,
.blatt-neu .kachel:nth-child(even) .kachel-bild {
  border-radius: 10px;
  aspect-ratio: 1 / 1.06;
}
.blatt-neu .produkt-blatt {
  border-radius: 10px;
  aspect-ratio: 1 / 1.06;
}
/* Freisteller brauchen im vollen Rechteck weniger Luft als in der Blattform —
   dort schnitt die Rundung ohnehin ein Fünftel weg. */
.blatt-neu .kachel-bild .frei    { padding: 8% 10%; }
.blatt-neu .produkt-blatt .frei  { padding: 6% 8%; }

/* Das Bild wächst beim Überfahren minimal — der Schleier NICHT: Er ist die
   Form, und eine Form, die mitatmet, sieht nach Versehen aus. */
.blatt-neu .kachel-bild img { transition: transform .3s ease; }
.blatt-neu .kachel:hover .kachel-bild img { transform: scale(1.02); }

/* Eckband, Siegel und KI-Marke liegen ÜBER dem Schleier. Sonst verblasst
   gerade das, was gelesen werden muss — und die KI-Kennzeichnung ist eine
   Pflichtangabe, keine Verzierung. */
.blatt-neu .eckband,
.blatt-neu .aktionssiegel,
.blatt-neu .ki-marke,
.blatt-neu .satz-schild,
.blatt-neu .blatt-lupe .nur-vorlesen { z-index: 2; }

/* ── Der Satz in der neuen Bildform: aus dem zweiten Blatt wird ein Kreis ────
   Der Entwurf 12a setzt unten links einen runden **Modell-Einsatz** — genau er
   soll die Frage „was ist das gedruckte Stück?" beantworten. In der alten Form
   liegt an dieser Stelle ein zweites Blatt rechts unten; das sah in der neuen
   Fassung aus wie ein Rest der Form, die gerade weggenommen wurde.

   WIR NEHMEN DAS ZWEITBILD DES SATZES. Der Entwurf verlangt dafür ein eigenes,
   FREIGESTELLTES Foto des Modells — das gibt es je Artikel noch nicht (siehe
   `elas3dstudio-bildform` im Vault). Bis dahin steht im Kreis, was schon da
   ist: das zweite Bild des Satzes. Ein leerer Kreis wäre schlimmer als ein
   gefüllter mit dem falschen Bildausschnitt.

   `contain` UND `cover` BLEIBEN GETRENNT: Ein Freisteller steht frei im Kreis,
   ein Stimmungsbild füllt ihn. Beide über einen Kamm zu scheren hiesse, das
   eine zu beschneiden oder das andere in ein Briefkastenformat zu legen. */
.blatt-neu .satz-blatt {
  right: auto;
  left: 5%;
  bottom: 5%;
  width: 27%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--grund-platte);
  box-shadow: 0 0 0 3px var(--grund-hell), 0 10px 24px -10px rgba(40, 44, 53, .55);
  z-index: 2;
}
.blatt-neu .kachel:nth-child(even) .satz-blatt { border-radius: 50%; }
.blatt-neu .satz-blatt .frei { padding: 12%; }

/* ── Die vier Ecken der neuen Kachel ────────────────────────────────────────
   In der neuen Form ist die Bildfläche fast rechteckig, also gibt es vier
   gleichwertige Ecken — und vier Dinge, die hineinwollen. Jedes bekommt eine,
   sonst liegen zwei übereinander:

       oben links   Herz            (vorher rechts, unter dem NEU-Band)
       oben rechts  NEU / Aktion
       unten links  Modell-Kreis
       unten rechts Set-Schild

   In der alten Blattform blieb das, wie es war: Dort läuft die Fläche in zwei
   Spitzen aus, und die Ecken sind nicht gleichwertig. */
.blatt-neu .kachel-huelle .herz-formular { left: 12px; right: auto; }

/* ── Der Goldrahmen des Satzes liegt AUF dem Bild, nicht daneben ────────────
   In der Blattform ist die Kontur absichtlich VERSETZT: sechs Pixel nach oben
   links, in derselben Blattrundung (`--blatt`). Zwei Blätter übereinander,
   leicht verschoben — das ist die Gestalt der alten Satzkachel.

   In der neuen Form geht das nicht auf. Die Bildfläche ist rechteckig, die
   Kontur blieb ein Blatt und stand oben links über das Bild hinaus: eine
   goldene Kurve neben einer geraden Kante. Tristan am 29.08.2026: „das
   Blütenblatt beim Set nicht ausserhalb vom goldenen Rand."

   Also `padding: 0` am Feld und `inset: 0` an der Kontur — sie deckt sich dann
   genau mit dem Bild und wird zu dem, was der Entwurf 12a „Bildrahmen mit
   Gold-Kante" nennt. */
.blatt-neu .satz-feld { padding: 0; }
.blatt-neu .satz-kontur,
.blatt-neu .kachel:nth-child(even) .satz-kontur {
  inset: 0;
  border-radius: 10px;
}
/* NUR EINE GOLDLINIE. Die gewöhnliche Satzkachel trägt zusätzlich einen 2 px
   starken Goldring als Schatten; neben der Kontur wären das zwei Linien
   nebeneinander, und die dickere gewänne. Der Schlagschatten bleibt. */
.blatt-neu .kachel-satz .kachel-bild {
  box-shadow: 0 18px 36px -24px rgba(40, 44, 53, .55);
}

.blatt-neu .satz-schild {
  left: auto;
  right: 10px;
  bottom: 10px;
  top: auto;
  transform: none;
}

/* Freisteller stehen frei im Blatt, Stimmungsbilder füllen es randlos.     */
.kachel-bild .frei      { object-fit: contain; padding: 12% 15%; box-sizing: border-box; }
.kachel-bild .stimmung  { object-fit: cover; }

.kachel-zeile {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--linie);
}
.kachel-name  { font-size: 15.5px; font-weight: var(--gewicht-halb); }
/* Der Preis darf nie umbrechen und nie schrumpfen (AUFTRAG Falle 5).      */
.kachel-preis {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 20px;
  color: var(--text-hell);
  white-space: nowrap;
  flex: none;
}
.kachel-kurz { font-size: 12.5px; color: var(--text-hell-meta); margin-top: 5px; }
.kachel:hover .kachel-name { text-decoration: underline; }

/* --------------------------------------------------------------------------
   DER SATZ IN DER RASTERREIHE — Entwurf „Set-Karte im Produktraster" 8a
   (15.08.2026), gewählte Richtung: zweites Blatt und Goldschild.

   Ein Satz ist keine Kachel mit einem Zusatz, sondern eine Kachel, die anders
   aussieht: Goldrahmen mit versetzter zweiter Kontur, ein schräges Schild an
   der Bildspitze, ein zweites kleineres Blatt mit dem anderen Bestandteil.
   Zusammen sagen sie „hier sind mehrere Stücke" schon aus drei Metern
   Entfernung — die Pille „2 Teile" nennt dann die Zahl.

   DAS FELD IST 6 PX GRÖSSER ALS DAS BILD und schiebt es damit ein Stück nach
   rechts unten. Genau so steht es im Entwurf: Der Platz links oben trägt die
   zweite Kontur, der unten rechts das kleine Blatt, das über den Rand
   hinausragen darf. Ohne diesen Rand schnitte die Kachel beides ab.
   -------------------------------------------------------------------------- */
.satz-feld {
  position: relative;
  padding: 6px 0 8px 6px;
}
.satz-kontur {
  position: absolute;
  top: 0; left: 0; right: 6px; bottom: 2px;
  border-radius: var(--blatt);
  border: 1px solid rgba(var(--gold-rgb), .55);
  pointer-events: none;
}
.kachel:nth-child(even) .satz-kontur { border-radius: var(--blatt-gespiegelt); }

/* Der Goldrahmen ersetzt die graue Kante der gewöhnlichen Kachel — er steht
   an ihrer Stelle, nicht daneben, sonst lägen zwei Linien übereinander.     */
.kachel-satz .kachel-bild {
  box-shadow: 0 0 0 2px var(--gold), 0 18px 36px -24px rgba(40, 44, 53, .55);
}

/* UNTEN UND NICHT OBEN — Abweichung vom Entwurf, mit Grund (15.08.2026).
   Der Entwurf setzt das Schild 22 px unter die Oberkante. Dort steht im
   Entwurf auch das Blatt, denn seine Kachel ist im Verhaeltnis 5:4 breit. Die
   Blattform dieser Seite ist hochkant: Oben links ist an derselben Stelle
   nichts als Luft, und das Schild schwebte neben dem Blatt statt an ihm.
   Unten links laeuft die Form dagegen aus — dort sitzt es auf der Kante auf,
   wie im Entwurf gemeint. */
.satz-schild {
  position: absolute;
  left: -10px;
  bottom: 40px;
  z-index: 2;
  background: var(--gold);
  color: var(--grund-hell);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 3px;
  transform: rotate(-9deg);
  box-shadow: 0 6px 14px -6px rgba(40, 44, 53, .5);
}

/* 45 % der Kachelbreite, unten rechts überlappend. Der creme Ring trennt es
   vom großen Blatt darunter — ohne ihn verschwimmen zwei Fotos zu einem.    */
.satz-blatt {
  position: absolute;
  right: -2px;
  bottom: 0;
  z-index: 1;
  width: 45%;
  aspect-ratio: var(--blatt-seitenverhaeltnis);
  border-radius: var(--blatt);
  overflow: hidden;
  background: var(--grund-platte);
  box-shadow: 0 0 0 3px var(--grund-hell), 0 10px 22px -14px rgba(40, 44, 53, .55);
}
.kachel:nth-child(even) .satz-blatt { border-radius: var(--blatt-gespiegelt); }
.satz-blatt img          { width: 100%; height: 100%; }
.satz-blatt .frei        { object-fit: contain; padding: 11% 14%; box-sizing: border-box; }
.satz-blatt .stimmung    { object-fit: cover; }

/* Die Pille steht NEBEN dem Namen und darf nie mit ihm umbrechen oder
   schrumpfen — dieselbe Regel wie beim Preis (AUFTRAG Falle 5).             */
.satz-pille {
  display: inline-block;
  margin-left: 8px;
  flex: none;
  border: 1px solid var(--gold);
  color: #A97C2F;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 10px;
  font-weight: var(--gewicht-halb);
  white-space: nowrap;
  vertical-align: middle;
}
/* Die Pille ist `inline-block` und bekommt die Unterstreichung des Namens
   beim Überfahren deshalb gar nicht erst ab — sie wandert nicht in atomare
   Kästen. Kein `text-decoration: none` nötig.
   Höhere Spezifität als `.kachel-kat span:not(.punkt)` weiter unten, sonst
   gewönne die dortige Bronzefarbe.                                          */
.kachel-kat .kachel-kat-satz {
  letter-spacing: .1em;
  color: #B8862E;
  font-weight: 700;
}

/* „Neu" in der Einordnungszeile der Produktseite — das Gegenstueck zum
   Eckband auf der Kachel.

   GEFUELLT UND NICHT ALS TEXT. Zuerst stand hier nur „· Neu" in Bronze, wie
   „· 2-teiliges Set" auf der Kachel. Das war folgerichtig und trotzdem falsch:
   Auf der Kachel steht der Zusatz neben drei Woertern, hier neben einer
   Grossueberschrift und einem Preis. Derselbe Ton, der dort auffaellt, geht
   hier unter. **Auffaelligkeit ist keine Eigenschaft der Farbe, sondern des
   Verhaeltnisses zur Nachbarschaft.**

   Die Farben sind die des goldenen Eckbands (`--gold` auf `--grund-dunkel`,
   7,5:1) — dieselbe Marke wie auf der Kachel, nur in die Zeile gelegt. Kein
   neuer Ton, der irgendwo sonst nachgeprueft werden muesste.

   Kein Mittelpunkt davor: Ein Trennzeichen verbindet Gleichrangiges. Eine
   gefuellte Marke steht fuer sich.                                          */
.produkt-kat .produkt-kat-neu {
  display: inline-block;
  margin-left: 10px;
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--gold);
  color: var(--grund-dunkel);
  letter-spacing: .14em;
  font-weight: 700;
  line-height: 1.25;
  vertical-align: middle;
}

/* ==========================================================================
   ABSCHLUSSBAND — Zitat links, Bild rechts
   ========================================================================== */
.abschluss {
  position: relative;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  align-items: stretch;
  overflow: hidden;
  background: var(--grund-dunkel);
  color: var(--text-dunkel);
}
.abschluss::before {
  content: "";
  position: absolute;
  left: 30%;
  top: -40%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(50px);
  pointer-events: none;
  background: radial-gradient(circle, rgba(var(--bluete-pfirsich-rgb), .28) 0%, rgba(var(--bluete-pfirsich-rgb), 0) 66%);
  animation: schweben2 32s ease-in-out infinite;
}
.abschluss-text {
  position: relative;
  padding: 60px 44px 60px var(--seitenrand);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.abschluss-zitat {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 38px;
  line-height: 1.3;
  color: var(--text-dunkel-titel);
  margin: 0;
}
.abschluss-strich {
  width: 46px;
  height: 1px;
  background: linear-gradient(to right, var(--gold), rgba(var(--gold-rgb), 0));
  margin-top: 26px;
}
.abschluss-wer {
  font-size: var(--t-mikro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dunkel-rubrik);
  margin-top: 22px;
}
.abschluss-absatz {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.75;
  color: #A99C97;                 /* auf --grund-dunkel 7,0:1 */
  max-width: 36ch;
}
.abschluss-knopf { margin-top: 30px; }
.abschluss-bild { position: relative; min-height: 360px; overflow: hidden; }
.abschluss-bild img { width: 100%; height: 100%; object-fit: cover; }
/* Der Verlauf hält die linke Seite dunkel genug für die Schrift.          */
.abschluss-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--grund-dunkel-rgb), .96) 0%,
              rgba(var(--grund-dunkel-rgb), .15) 55%, rgba(var(--grund-dunkel-rgb), .5) 100%);
}

/* ==========================================================================
   MOBILES MENÜ — ohne JavaScript
   <details>/<summary> statt eines Schalters: Das Menü öffnet auch dann, wenn
   das Skript nicht lädt, ist von Haus aus mit der Tastatur bedienbar und
   braucht kein aria-expanded, das jemand pflegen müsste.
   ========================================================================== */
.menue { display: none; }              /* am Schreibtisch trägt .kopf-nav */

.menue-knopf {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--treffer);
  height: var(--treffer);
  margin-left: auto;
  border-radius: 50%;
  border: 1px solid rgba(var(--text-dunkel-rgb), .22);
  cursor: pointer;
}
.menue-knopf::-webkit-details-marker { display: none; }

/* Drei Striche, gezeichnet statt gesetzt — kein Schriftzeichen, das je nach
   System anders aussieht.                                                  */
.menue-strich, .menue-strich::before, .menue-strich::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--text-dunkel);
  border-radius: 2px;
}
.menue-strich { position: relative; }
.menue-strich::before, .menue-strich::after { content: ""; position: absolute; left: 0; }
.menue-strich::before { top: -5.5px; }
.menue-strich::after  { top:  5.5px; }

/* Offen: Der Knopf wird zum Schließen-Kreuz und liegt über dem Blatt.      */
.menue[open] .menue-knopf {
  position: fixed;
  right: var(--seitenrand-handy);
  top: 14px;
  z-index: 71;
  margin-left: 0;
}
.menue[open] .menue-strich { background: transparent; }
.menue[open] .menue-strich::before { top: 0; transform: rotate(45deg); }
.menue[open] .menue-strich::after  { top: 0; transform: rotate(-45deg); }

.menue-blatt {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--grund-dunkel);
  color: var(--text-dunkel);
  padding: 14px var(--seitenrand-handy) 190px;
}
/* Dieselben driftenden Lichter wie im Kopf — das Menü ist kein anderer Ort. */
.menue-blatt::before {
  content: "";
  position: absolute;
  left: -28%;
  top: -8%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  background: radial-gradient(circle, rgba(var(--bluete-rose-rgb), .40) 0%, rgba(var(--bluete-rose-rgb), 0) 66%);
  animation: schweben 28s ease-in-out infinite;
}
.menue-marke { position: relative; height: 44px; width: auto; margin-bottom: 18px; }

.menue-titel {
  position: relative;
  font-size: 10px;
  font-weight: var(--gewicht-halb);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-dunkel-rubrik);
  padding-bottom: 14px;
}

.menue-kat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(var(--text-dunkel-rgb), .13);
  color: inherit;
}
.menue-kat:last-of-type { border-bottom: 1px solid rgba(var(--text-dunkel-rgb), .13); }
.menue-blattbild {
  width: 44px;
  height: 60px;
  flex: none;
  border-radius: var(--blatt);
  overflow: hidden;
  background: var(--grund-platte);
}
.menue-kat:nth-of-type(even) .menue-blattbild { border-radius: var(--blatt-gespiegelt); }
.menue-blattbild img { width: 100%; height: 100%; }
.menue-blattbild .frei     { object-fit: contain; padding: 10% 12%; box-sizing: border-box; }
.menue-blattbild .stimmung { object-fit: cover; }

.menue-wort { flex: 1; }
.menue-name {
  display: block;
  font-size: 22px;
  font-weight: var(--gewicht-leicht);
  letter-spacing: -.02em;
  color: var(--text-dunkel-titel);
}
.menue-kurz {
  display: block;
  font-size: 12px;
  color: var(--text-dunkel-weich);
  margin-top: 3px;
}
.menue-zahl { display: flex; align-items: center; gap: 10px; flex: none; }
.menue-zahl .k { font-size: 19px; color: var(--text-dunkel-rubrik); }
.menue-zahl .punkt { width: 7px; height: 7px; }

.menue-rest { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 22px 0 0; }
.menue-rest a { font-size: 16px; color: var(--text-dunkel-nav); padding: 11px 0; }
.menue-rest a[aria-current="page"] { color: var(--text-dunkel); }

/* Der Fuß des Menüs klebt unten und bleibt beim Blättern erreichbar.       */
/* DER GRUND IST DECKEND, DER VERLAUF LIEGT DARÜBER.

   Vorher trug dieses Element den Verlauf selbst: unten deckend, ab 60 % nach
   oben durchsichtig. Das Menüblatt scrollt aber HINTER dem Fuß durch — und
   durch den durchsichtigen Teil liefen die letzten Einträge der Liste („Neu im
   Sortiment", „Angebote", „Das Studio") sichtbar durch den Knopf und die
   Kontaktzeile. Zwei Texte in denselben Pixeln, nicht unscharf, sondern
   übereinander lesbar.

   Jetzt ist der Fuß auf seiner ganzen Höhe deckend, und der weiche Übergang
   sitzt als ::before OBERHALB davon — dort, wo Inhalt hineinlaufen SOLL. Der
   Effekt bleibt, die Kollision ist weg. `pointer-events: none`, damit der
   Streifen nichts abfängt, was darunter bedienbar ist.                     */
.menue-fuss {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 72;
  padding: 20px var(--seitenrand-handy) calc(24px + env(safe-area-inset-bottom, 0px));
  background: rgba(var(--grund-dunkel-rgb), .98);
}
.menue-fuss::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 34px;
  background: linear-gradient(to top, rgba(var(--grund-dunkel-rgb), .98), rgba(var(--grund-dunkel-rgb), 0));
  pointer-events: none;
}
.menue-fuss .knopf-gold { display: flex; justify-content: center; width: 100%; box-sizing: border-box; padding: 14px 0; }
.menue-erreichbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--text-dunkel-weich);
  margin-top: 14px;
}
.menue-erreichbar a { color: var(--text-dunkel-weich); }

/* ==========================================================================
   HANDY — 390 px, Werte aus mobil.html
   ========================================================================== */
@media (max-width: 900px) {
  .kopf-innen { flex-wrap: nowrap; gap: 12px; padding: 10px var(--seitenrand-handy) 12px; }
  .kopf-nav, .kopf-kontakt { display: none; }
  .menue { display: block; margin-left: auto; }
  .kopf-marke img { height: 38px; }

  /* Am Handy steht die Blüte ZWISCHEN Überschrift und Knopf, so wie in
     mobil.html. display:contents löst die linke Spalte auf, damit sich ihre
     Kinder einzeln einsortieren lassen — der Faden ist hier ohnehin aus.   */
  .hero-start {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px var(--seitenrand-handy) 26px;
  }
  .hero-start .hero-spalte   { display: contents; }
  .hero-start .kicker        { order: 1; }
  .hero-start h1             { order: 2; }
  .hero-start .bluete-spalte { order: 3; }
  .hero-start .hero-knoepfe  { order: 4; }
  .hero-start h1 { font-size: 38px; line-height: 1.06; letter-spacing: -.04em; }
  .hero-wort     { font-size: 42px; }
  .kicker        { margin-bottom: 14px; font-size: 10px; letter-spacing: .2em; }
  /* Der Faden braucht Breite (AUFTRAG, Abschnitt Handy).                   */
  .hero-faden    { display: none; }
  .hero-text     { display: none; }
  .hero-knoepfe  { margin-top: 6px; }
  /* DER KNOPF SOLL AM HANDY DIE VOLLE BREITE NEHMEN — dafuer stand hier
     `width: 100%` samt `padding: 14px 0`, denn wer die ganze Zeile fuellt,
     braucht keinen waagerechten Innenabstand.

     NUR GAB DER ELTERNTEIL DIE BREITE NIE HER. `.hero-knoepfe` ist eine
     Flex-Zeile ohne eigene Breite und schrumpfte auf ihren Inhalt: 163px.
     `width: 100%` waren damit 100% von 163 — und der Text fuellte den Knopf
     bis auf EIN Pixel links und rechts. Gemessen am 18.08.2026 bei 375px:
     Knopf 163 breit, Text 161.

     Deshalb bekommt die Zeile die Breite, statt dem Knopf den Abstand zu
     nehmen: So wird er, was er sein sollte. Der Nebensatz darunter
     ("...oder erst einmal schauen") bleibt in seiner eigenen Zeile, weil die
     Zeile auf `wrap` steht. */
  .hero-knoepfe { width: 100%; flex-wrap: wrap; }
  .hero-knoepfe .knopf-gold { width: 100%; justify-content: center; box-sizing: border-box; padding: 14px 0; }
  .hero-nebensatz { display: none; }

  .hero-schmal { grid-template-columns: 1fr; gap: 18px; padding: 16px var(--seitenrand-handy) 26px; }
  .hero-schmal h1 { font-size: var(--t-h1-handy); line-height: 1.1; }
  .hero-schmal h1 em { font-size: 34px; }
  .hero-schmal-text p { font-size: var(--t-text-handy); }

  /* Bildfassung am Handy: Das Foto rutscht unter den Text und wird zum
     flachen Streifen. Der Zeilenumbruch aus der Überschrift muss weg — bei
     34 px steht „Das Teil, das es" ohnehin nicht mehr in einer Zeile.      */
  .hero-mitbild { grid-template-columns: 1fr; }
  .hero-mitbild h1 { font-size: var(--t-h1-handy); }
  .hero-mitbild h1 em { font-size: 34px; }
  .hero-mitbild h1 br { display: none; }
  .hero-lead { font-size: var(--t-text-handy); margin-top: 16px; }
  .hero-mitbild .hero-knoepfe { margin-top: 20px; }
  .hero-bild {
    margin: 6px calc(-1 * var(--seitenrand-handy)) -26px;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
  .hero-bild::after {
    background: linear-gradient(180deg,
                rgba(var(--grund-dunkel-rgb), .55) 0%, rgba(var(--grund-dunkel-rgb), .06) 46%, rgba(var(--grund-dunkel-rgb), .5) 100%);
  }
  .hero-bild-marke { left: 12px; bottom: 12px; font-size: 10.5px; padding: 6px 12px; }
  /* Die KI-Marke behält ihre Maße — sie ist am Handy ohnehin dauerhaft
     ausgeklappt und darf dabei nicht kleiner werden als anderswo.         */

  /* Die Handy-Regeln des Artenbands stehen weiter unten, gleich hinter der
     Grundregel — hier oben hätten sie nichts bewirkt.                      */

  .bluete        { height: 320px; margin-top: 4px; }
  .bluete-ring   { width: 270px; height: 270px; margin: -135px 0 0 -135px; }
  .blatt         { width: 86px; height: 126px; }
  .blatt-licht   { inset: -16px; filter: blur(14px); }
  .bluete-marke  { width: 116px; height: 116px; margin: -58px 0 0 -58px; }
  .bluete-marke::after { inset: 10px; filter: blur(11px); }
  .bluete-marke img { width: 72px; }
  .bluete-zaehler { padding-top: 8px; font-size: 9px; gap: 8px; }
  .bluete-zaehler .k { font-size: 18px; }

  .kat-band { grid-template-columns: 1fr 1fr; }
  .kat-feld { padding: 18px 20px; }
  .kat-ziffer { font-size: 30px; }
  .kat-name { font-size: 15px; margin-top: 6px; }
  /* Am Handy trägt die Kachel nur Zahl und Name — der Satz darunter macht
     aus vier ruhigen Feldern vier Textblöcke.                              */
  .kat-text { display: none; }

  .abschnitt-kopf { padding: 26px var(--seitenrand-handy) 0; align-items: baseline; gap: 14px; }
  .abschnitt-kopf h2 { font-size: 24px; }
  .augenbraue { display: none; }
  .weiterlink { font-size: 16px; border-bottom: 0; }

  .kachel-raster { grid-template-columns: 1fr 1fr; gap: 18px; padding: 20px var(--seitenrand-handy) 26px; }
  .kachel-licht  { inset: -14px; filter: blur(16px); }
  .kachel-bild   { box-shadow: 0 0 0 1px var(--linie); }
  .kachel-zeile  { margin-top: 12px; padding-top: 9px; gap: 8px; }
  .kachel-name   { font-size: 14px; }
  .kachel-preis  { font-size: 18px; }
  .kachel-kurz   { display: none; }

  .abschluss { grid-template-columns: 1fr; }
  .abschluss-text  { padding: 26px var(--seitenrand-handy) 28px; }
  .abschluss-zitat { font-size: 27px; }
  .abschluss-strich { margin-top: 18px; width: 40px; }
  .abschluss-wer   { margin-top: 16px; font-size: 10px; }
  .abschluss-absatz { font-size: var(--t-text-handy); }
  .abschluss-bild  { min-height: 220px; }
}

/* Sehr schmal: die Kacheln stehen untereinander, sonst wird das Blatt zu
   klein, um noch als Form erkennbar zu sein.                               */
@media (max-width: 430px) {
  .kat-band      { grid-template-columns: 1fr 1fr; }
  .kachel-raster { gap: 16px; }
}

/* ==========================================================================
   STUFE 4 — SHOP
   Quelle: claude/elas3dstudio.de/shop.html (Z. 94–195)
   ========================================================================== */

/* --- Filterreihe: eine Pille je Familie, die aktive gefüllt -------------- */
.filterreihe {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 26px var(--seitenrand) 0;
  flex-wrap: wrap;
}
.pille {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--linie);
  color: var(--text-hell);
  border-radius: var(--radius-pille);
  padding: 10px 18px;
  font-size: 13.5px;
  white-space: nowrap;
}
.pille:hover { border-color: var(--feld-rand); color: var(--text-hell); }
.pille .punkt { width: 7px; height: 7px; }
.pille .k     { font-size: 16px; color: var(--bronze); }

.pille-aktiv {
  background: var(--text-hell);
  color: var(--grund-hell);
  border-color: var(--text-hell);
  font-weight: var(--gewicht-halb);
}
.pille-aktiv .k { color: var(--gold-weich); }   /* auf #242933 8,7:1 */

/* --- Zweite Filterreihe: die Typen innerhalb einer Kategorie ------------
   Kleiner und ohne Farbpunkt — die Farbe gehört der Kategorie, nicht dem Typ.
   Sonst stünden zwei Reihen gleichrangig nebeneinander, und niemand sähe,
   welche die übergeordnete ist.                                            */
.filterreihe-fein { padding-top: 10px; }
.filterreihe-fein .pille { font-size: 13px; padding-block: 8px; }

/* --- Leere Kategorie -----------------------------------------------------
   Drei der fünf Kategorien sind auf Zuwachs angelegt und haben noch keinen
   Bestand. Sie sollen absichtlich leer aussehen, nicht kaputt.             */
.leerer-raum { padding: 8px var(--seitenrand) 0; }

/* Abschnittskopf ohne eigenen Seitenrand — steht schon in einem Block, der
   seinen mitbringt.                                                        */
.abschnitt-hell { padding-top: 48px; }

/* --- Sortierung ----------------------------------------------------------
   Ein <details>, kein Auswahlfeld: ohne Skript bliebe ein <select> ohne
   Absendeknopf wirkungslos, und ein sichtbarer Knopf daneben steht nicht im
   Entwurf. Die Einträge sind Verweise — sie funktionieren immer.

   EIGENE ZEILE, LINKE KANTE. Vorher schob `margin-left: auto` das Feld ans
   rechte Ende der Filterreihe — als einziges rechtsbündiges Element der
   Seite. Alles andere beginnt links; ihm fehlte schlicht der Partner, an dem
   es sich hätte ausrichten können. Der Seitenrand ist derselbe wie bei den
   Pillen darüber und den Kacheln darunter, damit alle drei eine Kante teilen.
   Begründung ausführlich in shop.php.                                      */
/* Seit dem 24.08.2026 stehen hier zwei Dinge nebeneinander: die Artikelzahl
   (aus der Überschrift hierher gewandert) und das Sortieren. Beide an
   derselben linken Kante wie Überschrift, Pillen und Kacheln — deshalb kein
   `space-between`, das die Sortierung wieder nach rechts risse. */
.sortierzeile { padding: 24px var(--seitenrand) 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sortierzeile .zaehlzeile { margin: 0; font-size: 14px; color: var(--text-hell-meta); font-variant-numeric: tabular-nums; }
.sortierzeile + .kachel-raster.drei { padding-top: 20px; }
.sortieren {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-hell-meta);
}
.sortieren-knopf {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--feld-rand);
  padding: 0 2px 4px;
  color: var(--text-hell);
  font-weight: var(--gewicht-halb);
  cursor: pointer;
  white-space: nowrap;
}
.sortieren-knopf::-webkit-details-marker { display: none; }
.sortieren-knopf::after { content: "▾"; font-size: 11px; color: var(--bronze); }
.sortieren-liste {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 30;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  background: var(--grund-weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  box-shadow: 0 18px 40px -24px rgba(40,44,53,.55);
  padding: 6px;
}
.sortieren-liste a {
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--text-hell);
  border-radius: var(--radius-klein);
}
.sortieren-liste a:hover { background: var(--grund-platte); color: var(--text-hell); }
.sortieren-liste a[aria-current="true"] { font-weight: var(--gewicht-halb); color: var(--handlung); }

/* --- Kachelraster in drei Spalten ---------------------------------------- */
.kachel-raster.drei {
  grid-template-columns: repeat(3, 1fr);
  gap: 38px 34px;
  padding: 38px var(--seitenrand) 8px;
}
.kachel-raster.drei .kachel-licht { inset: -16px; }
/* Bei drei Spalten spiegelt jede zweite Kachel — bei vier ebenfalls. Die
   Regel hängt an der Kachel, nicht an der Spaltenzahl.                     */

.kachel-kat {
  display: flex;
  align-items: center;
  gap: 4px 8px;
  margin-top: 16px;
  /* UMBRECHEN STATT ÜBERLAUFEN. Beim Satz steht hinter dem Familiennamen noch
     „· 2-teiliges Set", und auf dem Telefon ist eine Kachel keine 160 Pixel
     breit — ohne Umbruch schob die Zeile über den Kachelrand hinaus. */
  flex-wrap: wrap;
}
.kachel-kat .punkt { width: 6px; height: 6px; }
/* `:not(.punkt)` und nicht `:last-child`: Beim Satz steht hinter dem
   Familiennamen noch „· 2-teiliges Set", und der Name war damit auf einen
   Schlag nicht mehr das letzte Kind — er verlor seine ganze Auszeichnung. */
.kachel-kat span:not(.punkt) {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: var(--gewicht-halb);
}
.kachel-kat + .kachel-zeile { margin-top: 8px; padding-top: 10px; }
.kachel-raster.drei .kachel-name  { font-size: 16.5px; }
.kachel-raster.drei .kachel-kurz  { font-size: 13px; line-height: 1.65; margin-top: 6px; }
.kachel-meta { font-size: 12px; color: var(--text-hell-meta); margin-top: 8px; }
/* Die Artikelnummer — eine Stufe leiser als die Ausführungszeile darüber.
   Sie ist eine Angabe zum Nachschlagen, keine Eigenschaft des Stücks: Wer
   die Kachel liest, soll sie finden, wenn er sie sucht, und sonst über sie
   hinweglesen. Tabellenziffern, damit die Nummern untereinander bündig
   stehen, wenn mehrere Kacheln nebeneinanderliegen. */
.kachel-nummer {
  font-size: 11px;
  color: var(--text-hell-meta);
  opacity: .65;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* WOHER DER ENTWURF STAMMT — dieselbe stille Zeile wie die Artikelnummer,
   nur ohne Ziffernstellung: Hier steht ein Name, keine Kennung.            */
.kachel-lizenz {
  font-size: 11px;
  color: var(--text-hell-meta);
  opacity: .7;
  margin-top: 3px;
  letter-spacing: .02em;
}

/* --- Merkmalstreifen unter dem Raster ------------------------------------ */
/* --- Neustart-Hinweis -----------------------------------------------------
   Ein ruhiger Abschnitt, kein Warnkasten. Er steht als erster Text unter der
   Blüte und soll wie ein Teil der Seite aussehen — deshalb dieselbe Umrandung
   und derselbe Grund wie bei den Karten, kein farbiges Band.
   Räumt sich über NEUSTART_BIS selbst weg, siehe config.php.             */
.neustart { padding: 56px var(--seitenrand) 0; }
.neustart-kasten {
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  align-items: stretch;
  border: 1px solid var(--linie);
  background: var(--feld-grund);
}
/* Solange kein Bild da ist, nimmt der Text den ganzen Kasten ein. */
.neustart-ohne-bild { grid-template-columns: 1fr; }

.neustart-bild {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  background: var(--grund-platte);
}
.neustart-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 55%; }
/* Ein Faden Gold auf der Nahtstelle — er nimmt der harten Kante zwischen
   Foto und Text die Härte, ohne eine Linie zu ziehen.                     */
.neustart-kante {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
              rgba(var(--gold-rgb), 0), rgba(var(--gold-rgb), .5), rgba(var(--gold-rgb), 0));
}

.neustart-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 52px 46px;
}
.neustart-marke {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 20px;
  font-size: 11px;
  font-weight: var(--gewicht-halb);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bronze);
}
.neustart-strich { width: 26px; height: 1px; background: var(--bluete-rose); }
.neustart-text h2 {
  margin: 0 0 22px;
  font-size: 38px;
  font-weight: var(--gewicht-leicht);
  letter-spacing: -.034em;
  line-height: 1.1;
}
.neustart-text h2 em {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 43px;
  color: var(--handlung);
}
.neustart-text > p {
  margin: 0 0 16px;
  max-width: 50ch;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--text-hell-weich);
}
.neustart-gruss {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 19px;
  color: var(--bronze);
}

.neustart-punkte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--linie);
  padding-top: 22px;
  margin: 14px 0 30px;
}
.neustart-punkte > div { padding: 0 20px; border-left: 1px solid var(--linie); }
.neustart-punkte > div:first-child { padding-left: 0; border-left: 0; }
.neustart-punkte > div:last-child  { padding-right: 0; }
.neustart-punkt-name { margin: 0; font-size: 14.5px; font-weight: var(--gewicht-halb); }
.neustart-punkt-text { margin: 5px 0 0; font-size: 13px; line-height: 1.65; color: var(--text-hell-meta); }

/* `max-width: none` muss sein: Die Zeile ist ein <p> und erbt sonst die
   50 ch der Fließtexte darüber — dann bricht sie zwischen Knopf und
   Einladung um, obwohl beide nebeneinander Platz hätten.

   Und der Elternteil im Selektor muss mit: `.neustart-text > p` wiegt um ein
   Element mehr als `.neustart-wege` allein und hätte das `none` still
   überschrieben. Dritte Spezifitätsfalle an einem Tag.                    */
.neustart-text > .neustart-wege {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0;
  max-width: none;
  font-size: 13.5px;
  color: var(--text-hell-meta);
}
.neustart-melden { color: var(--text-hell-meta); }
.neustart-sagen { color: var(--handlung); border-bottom: 1px solid currentColor; }

/* --- Vier Arten (Nach Maß) ------------------------------------------------
   Steht randlos direkt unter dem dunklen Band und gehört noch zum Einstieg —
   deshalb getönte Felder statt der Hairline-Tabelle von .merkmale weiter
   unten. Zwei Sachen auf einer Seite, die gleich aussehen, liest niemand als
   zwei Sachen.

   Die Trennlinien sind eine 2-px-Lücke auf getöntem Grund: vier gerahmte
   Kästen nebeneinander wären vier Linien zu viel. Erstes und letztes Feld
   holen den Seitenrand nach innen, damit die Schrift auf derselben Kante
   sitzt wie die Überschrift darüber.                                       */
.artenband {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--linie);
  border-bottom: 1px solid var(--linie);
}
.art {
  background: var(--grund-platte);
  padding: 26px 24px 28px;
}
/* Die vier Kacheln tragen die pastelligen Blütenfarben — dieselben Flächen
   wie das Kategorieband der Startseite, nicht neu gemischt. Vier verschiedene
   Dinge sehen dadurch auch wie vier verschiedene Dinge aus, und die Farben
   sind im Haus schon bekannt.

   Der Strich nimmt den dunklen Partner derselben Farbe: Er ist auf der hellen
   Fläche geprüft lesbar, der Blütenton selbst wäre es nicht.              */
.art-rose     { background: var(--kat-rose-flaeche); }
.art-pfirsich { background: var(--kat-pfirsich-flaeche); }
.art-pflaume  { background: var(--kat-pflaume-flaeche); }
.art-petrol   { background: var(--kat-petrol-flaeche); }
.art-rose     .art-strich { background: var(--kat-rose-ziffer); }
.art-pfirsich .art-strich { background: var(--kat-pfirsich-ziffer); }
.art-pflaume  .art-strich { background: var(--kat-pflaume-ziffer); }
.art-petrol   .art-strich { background: var(--kat-petrol-ziffer); }
.art:first-child { padding-left:  var(--seitenrand); }
.art:last-child  { padding-right: var(--seitenrand); }
.art-strich {
  display: block;
  width: 24px;
  height: 1px;
  margin-bottom: 16px;
  background: var(--bronze);
}
.art-name { margin: 0; font-size: 16px; font-weight: var(--gewicht-halb); letter-spacing: -.012em; }
.art-text { margin: 8px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--text-hell-weich); }

/* --- Ablauf und Grenzen (Nach Maß) ---------------------------------------- */
/* ZWEI ABSTAENDE STIESSEN HIER ANEINANDER: `.formularseite` endet mit 64 px,
   `.ablaufseite` beginnt mit 64 px — zusammen 128 px, und darin verlor sich
   der Knopf „Weiter zur Anfrage". Am 03.08.2026 gemeldet. Beide Bloecke
   behalten ihren eigenen Abstand; nur wo sie unmittelbar aufeinanderfolgen,
   zaehlt einer davon weniger.

   NACHGEMESSEN AM 27.08.2026: 64 + 16 = 80px waren immer noch zu viel — der
   Absendeknopf und die Zeile „So läuft es ab" standen wie zwei Fremde
   nebeneinander. Jetzt zaehlt nur noch der Abstand der Formularseite (64px),
   und das ist der übliche Abschnittsabstand des Hauses. */
.formularseite + .ablaufseite { padding-top: 0; }

.ablaufseite {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 60px;
  padding: 64px var(--seitenrand) 0;
  align-items: start;
}

/* UNTEN STAND GAR NICHTS. `.ablaufseite` endet mit 0 — richtig unter „Nach
   Maß", wo die Grenzen folgen und ihren eigenen Abstand mitbringen. Auf der
   Ideenseite ist der Ablauf der LETZTE Block: Dort stiess „Drucken und
   prüfen" ohne eine Handbreit Luft an die dunkle Fläche des Fusses (am
   27.08.2026 gemeldet).

   DIE KLASSE STEHT IM MARKUP, weil die Seite es weiss und der Stil nicht.
   `:has(+ .fuss)` war der erste Versuch und griff nicht: Zwischen dem Ablauf
   und dem Fuss steht das <script> mit den Tarifen, und `+` meint den
   NÄCHSTEN Elementgeschwister — Skripte zählen mit. `~ .fuss` hätte auch
   unter „Nach Maß" gegriffen, wo der Abstand falsch wäre.

   UND SIE STEHT HINTER `.ablaufseite`, nicht davor. Der erste Anlauf sass
   zwei Zeilen zu hoch: Die Kurzschreibweise `padding: 64px … 0` darunter
   setzt die Unterkante wieder auf null, und bei gleichem Gewicht gewinnt
   die spätere Regel. Die Seite sah danach aus wie zuvor. */
.ablauf-zuletzt { padding-bottom: 64px; }

.ablaufseite h2 {
  margin: 0 0 26px;
  font-size: 34px;
  font-weight: var(--gewicht-leicht);
  letter-spacing: -.03em;
  line-height: 1.16;
}

/* Die vier Schritte hängen an einer Linie, die oben und unten ausläuft — sie
   beginnt nicht mit dem ersten Punkt und endet nicht mit dem letzten, weil
   der Vorgang selbst weder scharf anfängt noch scharf aufhört. Der letzte
   Punkt ist gefüllt: dort ist etwas fertig.                                */
.ablaufliste {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
}
.ablaufliste::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom,
              rgba(var(--bronze-rgb), 0), var(--bronze) 14%, var(--bronze) 86%, rgba(var(--bronze-rgb), 0));
}
.ablaufliste li { position: relative; padding-bottom: 26px; }
.ablaufliste li:last-child { padding-bottom: 0; }
.ablaufliste li::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 6px;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid var(--bronze);
  background: var(--grund-hell);
}
/* `li.` muss sein: `.ablaufliste li::before` ist um ein Element schwerer und
   hätte die Füllung sonst still zurückgesetzt.                             */
.ablaufliste li.ablauf-letzt::before { background: var(--bronze); }
.ablauf-name { margin: 0; font-size: 17px; font-weight: var(--gewicht-halb); }
.ablauf-text { margin: 5px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--text-hell-weich); }

/* Zusagen und Absagen auf EINER Liste, nicht zwei. Getrennt gelesen wirkt
   das Kleingedruckte wie ein Nachtrag; zusammen ist es eine Auskunft.      */
.grenzliste {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--linie);
  background: var(--feld-grund);
}
.grenzliste li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  align-items: start;
  padding: 16px 20px;
  border-bottom: 1px solid var(--linie-zart);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-hell-weich);
}
.grenzliste li:last-child { border-bottom: 0; }
.grenzliste strong { font-weight: var(--gewicht-halb); color: var(--text-hell); }
.grenz-zeichen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  border-radius: 50%;
  font-size: 11px;
  font-weight: var(--gewicht-halb);
}
.geht .grenz-zeichen       { background: #EFF3EE; color: var(--zustand-gut); }
.geht-nicht .grenz-zeichen { background: #F7EDEA; color: #8E4E38; font-size: 12px; }

.grenz-nachsatz {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-hell-meta);
}
.grenz-und {
  flex: none;
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 19px;
  color: #8E4E38;
}

/* --- Dunkler Abschluss (Nach Maß) ----------------------------------------- */
.anfrageband {
  position: relative;
  overflow: hidden;
  margin-top: 64px;
  background: var(--grund-dunkel);
  color: var(--text-dunkel);
}
.anfrageband-schein {
  position: absolute;
  left: 16%;
  top: -56%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(52px);
  background: radial-gradient(circle, rgba(var(--bronze-rgb), .30) 0%, rgba(var(--bronze-rgb), 0) 66%);
}
.anfrageband-innen { position: relative; padding: 56px var(--seitenrand); }
.anfrageband h2 {
  margin: 0 0 14px;
  font-size: 32px;
  font-weight: var(--gewicht-leicht);
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--text-dunkel-titel);
}
.anfrageband-text {
  margin: 0 0 22px;
  max-width: 46ch;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-dunkel-lead);
}
.anfrageband .kicker { margin-bottom: 14px; }
.anfrageband-ruf {
  color: var(--text-dunkel-nav);
  font-size: 15px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(207,194,188,.3);
}
.anfrageband-ruf:hover { color: var(--gold-auf); border-bottom-color: var(--gold); }

/* Die Karte neben dem Formular: erst die Liste, dann zwei Zusagen als Zeilen. */
.hilfsliste { list-style: none; margin: 0 0 20px; padding: 0; }
.hilfsliste li {
  position: relative;
  padding-left: 17px;
  margin-top: 11px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-hell-weich);
}
.hilfsliste li:first-child { margin-top: 0; }
.hilfsliste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bronze);
}
.karte-zeile {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
  padding-top: 10px;
  font-size: 13.5px;
  color: var(--text-hell-meta);
}
.karte-zeile:first-of-type { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--linie-zart); }
.karte-zeile span:last-child { color: var(--text-hell); white-space: nowrap; flex: none; }

@media (max-width: 900px) {
  .ablaufseite { grid-template-columns: 1fr; gap: 44px; padding: 44px var(--seitenrand-handy) 0; }
  /* Muss hier noch einmal stehen: Die Zeile darüber ist eine Kurzschreibweise,
     sie setzt die Unterkante auf 0, und sie steht später im Blatt als die
     Grundregel. Am Handy darf der Abstand kleiner sein — der Fuss beginnt
     dort ohnehin nach einem schmaleren Bild. */
  .ablauf-zuletzt { padding-bottom: 44px; }
  .ablaufseite h2 { font-size: 27px; margin-bottom: 22px; }
  .anfrageband-innen { padding: 40px var(--seitenrand-handy); }
  .anfrageband h2 { font-size: 26px; }
  .anfrageband .hero-knoepfe { flex-wrap: wrap; gap: 16px; }
  .grenzliste li { padding: 14px 16px; font-size: 14px; }
}

/* Am Handy zwei mal zwei. Diese Regeln stehen ABSICHTLICH hier und nicht im
   großen Handy-Block weiter oben: Der liegt vor der Grundregel, und
   `repeat(4, 1fr)` hätte sie danach wieder überschrieben. Vier Spalten auf
   390 px sind nicht schmal, sondern kaputt — `1fr` kann nicht unter die
   Breite des längsten Wortes, das Band lief seitlich aus dem Bild.        */
@media (max-width: 900px) {
/* Am Handy: Bild oben, Text darunter, die drei Punkte untereinander. Der
   lange Nebensatz im zweiten Weg entfaellt — dort steht nur noch das Nötige. */
@media (max-width: 900px) {
  .neustart { padding: 36px var(--seitenrand-handy) 0; }
  .neustart-kasten,
  .neustart-punkte { grid-template-columns: 1fr; }
  .neustart-bild { min-height: 0; aspect-ratio: 16 / 9; }
  .neustart-kante { display: none; }
  .neustart-text { padding: 26px 22px 28px; }
  .neustart-text h2 { font-size: 27px; }
  .neustart-text h2 em { font-size: 30px; }
  .neustart-text h2 br { display: none; }
  .neustart-text > p { font-size: 15px; line-height: 1.75; }
  .neustart-punkte { gap: 12px; margin-bottom: 24px; }
  .neustart-punkte > div { padding: 0; border-left: 0; }
  .neustart-punkt-name { display: inline; }
  .neustart-punkt-text { display: inline; margin: 0; }
  .neustart-punkt-name::after { content: " — "; font-weight: var(--gewicht-normal); }
  /* Der lange Nebensatz entfaellt — am Handy steht nur die Einladung. */
  .neustart-frage { display: none; }
}

  .artenband { grid-template-columns: 1fr 1fr; }
  .art { padding: 20px 18px 22px; }
  .art:nth-child(odd)  { padding-left:  var(--seitenrand-handy); }
  .art:nth-child(even) { padding-right: var(--seitenrand-handy); }
}

.merkmale {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 56px var(--seitenrand) 64px;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.merkmal { padding: 26px 28px; border-left: 1px solid var(--linie); }
.merkmal:first-child { padding-left: 0; border-left: 0; }
.merkmal:last-child  { padding-right: 0; }
.merkmal-titel { font-size: 15px; font-weight: var(--gewicht-halb); }
.merkmal-text  { font-size: 13.5px; color: var(--text-hell-weich); line-height: 1.7; margin-top: 6px; }

/* Abstand zum Fuß, wo kein dunkles Band mehr folgt.                        */
.luft-unten { padding-bottom: 64px; }

/* ==========================================================================
   SHOP — Warenkorb im Kopf, Korbseite, Mengenwahl
   Erst seit dem Bestellvorgang. Alles hier erscheint nur, wenn shop_bereit()
   wahr ist — die Regeln greifen also nie ins Leere.
   ========================================================================== */
.kopf-korb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(var(--text-dunkel-rgb), .22);
  color: var(--text-dunkel);
  flex: none;
  transition: border-color var(--d-schnell) var(--uebergang);
}
.kopf-korb:hover { border-color: rgba(var(--gold-rgb), .75); color: var(--gold-auf); }
.kopf-korb-voll  { border-color: rgba(var(--gold-rgb), .55); }
.kopf-korb-bild {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Die Ziffer sitzt auf dem Rand, nicht daneben — daneben wandert sie bei
   jedem Wechsel der Stellenzahl und schiebt die Navigation. */
.kopf-korb-zahl {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--gold);
  color: var(--grund-dunkel);
  font-size: 11px;
  font-weight: var(--gewicht-halb);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   WUNSCHZETTEL — das Herz am Kopf, an der Kachel und auf der Artikelseite

   Das Herz erbt Maße und Verhalten vom Korb daneben; die beiden sollen wie
   ein Paar aussehen und nicht wie zwei Einfälle. Unterschied ist allein die
   Füllung: leer = nicht vorgemerkt, gefüllt = vorgemerkt. Nur an der Farbe
   hinge sonst die ganze Auskunft, und wer Rot und Grau nicht unterscheidet,
   sähe zweimal dasselbe Herz — deshalb steht der Zustand zusätzlich im
   Vorlesetext („Von meinem Wunschzettel nehmen").
   ========================================================================== */
.kopf-wunsch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(var(--text-dunkel-rgb), .22);
  color: var(--text-dunkel);
  flex: none;
  transition: border-color var(--d-schnell) var(--uebergang);
}
.kopf-wunsch:hover { border-color: rgba(var(--gold-rgb), .75); color: var(--gold-auf); }
.kopf-wunsch-voll  { border-color: rgba(var(--gold-rgb), .55); }
.kopf-wunsch-bild {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kopf-wunsch-zahl {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--gold);
  color: var(--grund-dunkel);
  font-size: 11px;
  font-weight: var(--gewicht-halb);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Die Hülle trägt Kachel und Herz nebeneinander — im Markup, nicht im Bild:
   Ein <form> darf nicht in einem <a> stehen. `position: relative` macht sie
   zum Bezugspunkt, damit das Herz in der Bildecke sitzen kann.            */
.kachel-huelle { position: relative; display: flex; }
.kachel-huelle > .kachel { flex: 1; }
.kachel-huelle .herz-formular {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;                    /* über dem Lichtschein der Kachel */
}

.herz-formular { margin: 0; line-height: 0; }

.herz {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--text-dunkel-rgb), .22);
  /* Eigener Grund, nicht durchsichtig: Auf einem hellen Produktfoto wäre die
     Kontur sonst nicht zu sehen.                                          */
  background: rgba(var(--grund-dunkel-rgb), .62);
  color: var(--text-dunkel);
  cursor: pointer;
  transition: border-color var(--d-schnell) var(--uebergang),
              color var(--d-schnell) var(--uebergang);
}
.herz:hover,
.herz:focus-visible { border-color: rgba(var(--gold-rgb), .75); color: var(--gold-auf); }
.herz-voll { border-color: rgba(var(--gold-rgb), .55); color: #E8B4B8; }

.herz-bild {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.herz-gross { width: 44px; height: 44px; }
.herz-gross .herz-bild { width: 21px; height: 21px; }

/* --- Aktionspreise ---------------------------------------------------------
   Entwurf „Preisdarstellung" 1a (Siegel und Streichpreis) mit dem Abendband
   aus 1b. Drei Teile: das dunkle Band, das runde Siegel, die Preiszeile.

   GOLD IST LINIE UND KANTE, NICHT FLAECHE (tokens.css:123). Das Band traegt
   Gold auf Tinte — das ist der dunkle Grund der Website, nicht eine goldene
   Flaeche. Das Siegel ist goldgerahmt, nicht goldgefuellt.                  */

.aktionsband {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 8px 0; padding: 5px 11px; border-radius: 8px;
  background: var(--grund-dunkel); color: var(--gold);
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: var(--gewicht-halb);
}
.aktionsband-frist { opacity: .82; }
.aktionsband-wert  { font-variant-numeric: tabular-nums; white-space: nowrap; }

.aktionsband + .produkt-preiszeile { margin-top: 10px; }

/* RUND, NICHT RECHTECKIG. Die Kachel ist ein Blatt: zwei Ecken laufen spitz
   zu, und eine aufgesetzte Marke schnitte sie ab (Falle 7). Deshalb dieselbe
   Form wie das Herz daneben, nur auf der anderen Seite.                     */
.aktionssiegel {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--grund-dunkel); color: var(--gold);
  border: 1px solid var(--gold);
  font-size: 12px; font-weight: var(--gewicht-halb);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* Der neue Preis vorn und gross, der alte klein und durchgestrichen dahinter.
   Umgekehrt lese sich die Zeile wie „24,90 EUR" mit einer Fussnote.         */
.kachel-preiszeile {
  display: inline-flex; align-items: baseline; gap: 7px;
  flex: none; white-space: nowrap;
}
.preis-alt {
  font-size: .78em; color: var(--text-hell-meta);
  text-decoration-thickness: 1px; text-decoration-color: var(--text-hell-meta);
}
.preis-neu { color: var(--bluete-rose); }

.produkt-preiszeile .preis-alt { font-size: 16px; }

.preis-30-tage {
  margin: 4px 0 0; font-size: 11.5px; line-height: 1.45;
  color: var(--text-hell-meta);
}
/* Auf der Kachel steht sie klein — sie muss dort stehen (§ 11 PAngV verlangt
   sie bei JEDER Bekanntgabe einer Ermaessigung), darf aber nicht die
   Namenszeile ueberwiegen.                                                  */
.preis-30-tage-klein { font-size: 10.5px; margin-top: 3px; }

@media (max-width: 640px) {
  .aktionsband { font-size: 10px; padding: 4px 9px; }
  .aktionssiegel { width: 34px; height: 34px; font-size: 11px; }
}

/* --- Sterne ---------------------------------------------------------------
   Der Anteil steckt in KLASSEN, nicht in einer Breite am Element: Die CSP
   erlaubt nur style-src 'self', ein style="width:87%" im Markup waere
   wirkungslos. Deshalb rundet sterne_bild() auf halbe Sterne und vergibt
   stern-voll | stern-halb | stern-leer. Die genaue Zahl steht daneben.

   Ein `span` mit display:flex statt eines Absatzes — derselbe Block steht im
   Suchtreffer, und der ist innen aus `span` gebaut.                         */
.sterne {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-hell-meta); line-height: 1;
}
.sterne-reihe { display: inline-flex; gap: 1px; color: var(--gold); }
.sterne-zahl  { font-weight: var(--gewicht-halb); color: var(--text-hell); }
.sterne-anzahl { color: var(--text-hell-meta); }

.stern { display: inline-block; width: 13px; height: 13px; }
.stern-bild { display: block; width: 100%; height: 100%; }
.stern-leer { color: rgba(var(--gold-rgb), .28); }

/* Der halbe Stern: derselbe Pfad zweimal uebereinander, die obere Haelfte
   beschnitten. KEIN clipPath mit ID — im Shop stehen zwanzig Kacheln auf einer
   Seite, und zwanzig gleiche IDs liessen den ersten Stern alle anderen
   fuellen.                                                                  */
.stern-halb { position: relative; color: rgba(var(--gold-rgb), .28); }
.stern-halb .stern-fuellung {
  position: absolute; inset: 0; width: 50%;
  color: var(--gold); overflow: hidden;
}
.stern-halb .stern-fuellung svg,
.stern-halb .stern-fuellung { object-fit: cover; object-position: left; }

.sterne-gross { font-size: 14px; gap: 8px; }
.sterne-gross .stern { width: 17px; height: 17px; }

.kachel .sterne { margin-top: 6px; }
.such-mitte .sterne { margin-top: 3px; }

/* Auf der Artikelseite tragen die Sterne den Pflichtsatz nach § 5b Abs. 3 UWG
   mit sich — wer Bewertungen zeigt, muss sagen, ob und wie er ihre Echtheit
   sicherstellt. Er steht klein, aber er steht da, wo die Sterne stehen.

   SEIT 24.08.2026 UNTER DEM PREIS. Der Abstand nach oben ist deshalb groesser
   als der nach unten: Er trennt die Sterne von der Preiszeile, an die sie
   nicht gehoeren, und laesst sie mit dem Pflichtsatz eine Einheit bilden.   */
.produkt-sterne { margin: 14px 0 16px; }

/* Ohne Bewertungen: dieselbe Reihe, nur ungefuellt, und ein Satz statt einer
   Zahl. Er steht in der gedaempften Schrift und nicht in der dunklen der
   `sterne-zahl` — er ist eine Auskunft, keine Note.                         */
.sterne-keine { color: var(--text-hell-meta); }
.produkt-sterne-hinweis {
  margin: 6px 0 0; max-width: 46ch;
  font-size: 11.5px; line-height: 1.5; color: var(--text-hell-meta);
}

/* --- Das Sternfeld zum Anklicken ------------------------------------------
   Fuenf Radios, kein Skript. Die Reihenfolge im Markup ist umgedreht
   (row-reverse), damit `~` von rechts nach links faerben kann: Ein
   angeklickter Stern faerbt sich und alles, was im Markup NACH ihm kommt —
   und das ist, dank row-reverse, alles links davon.                         */
.bewertung-feld { border: 0; margin: 0; padding: 0; }
.bewertung-feld > legend { padding: 0; font-size: 12.5px; color: var(--text-hell-meta); }

.bewertung-wahl { display: inline-flex; flex-direction: row-reverse; gap: 2px; margin-top: 4px; }
.bewertung-wahl input {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.bewertung-wahl label {
  cursor: pointer; padding: 3px; line-height: 0;
  color: rgba(var(--gold-rgb), .28);
  transition: color var(--d-schnell, .18s) ease;
}
.bewertung-wahl label svg { display: block; width: 22px; height: 22px; }

.bewertung-wahl input:checked ~ label,
.bewertung-wahl label:hover,
.bewertung-wahl label:hover ~ label { color: var(--gold); }

/* Die Tastatur muss sehen, wo sie steht — ohne diesen Ring waere das Feld
   ohne Maus unbedienbar.                                                    */
.bewertung-wahl input:focus-visible + label {
  outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px;
}

.bewertung-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 12px 0; border-top: 1px solid rgba(255,255,255,.07);
}
.bewertung-zeile-name { flex: 1 1 12rem; font-size: 13.5px; }
.bewertung-zurueck {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--text-hell-meta);
  text-decoration: underline;
}
.bewertung-zurueck:hover { color: var(--text-hell); }

/* Auf der Artikelseite steht das Herz mit einem Satz daneben — ein nacktes
   Symbol unter dem Kaufknopf ließe offen, was es tut.                     */
.wunsch-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}
.wunsch-zeile-text { font-size: 13.5px; color: var(--text-dunkel-weich); }

.wunsch-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 900px) { .wunsch-liste { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wunsch-liste { grid-template-columns: 1fr; } }

.wunsch-fuss {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(var(--text-dunkel-rgb), .10);
}
.wunsch-hinweis {
  margin: 0;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-dunkel-weich);
}
/* `--text-dunkel-weich` ist die Marke fuer DUNKLE Gruende (dort 5,9:1);
   hier steht sie auf der hellen Seite und kam auf 3,02:1. `--text-hell-meta`
   ist dieselbe Rolle fuer helle Gruende. Farbpruefung 03.08.2026. */
.leerer-korb-hinweis { font-size: 13.5px; color: var(--text-hell-meta); }

/* ==========================================================================
   SUCHE — nach `Elas3DStudio Suche.dc.html`

   DER AUFBAU IST DER DES ENTWURFS, DIE FARBEN SIND ES NICHT — und das ist
   kein Abweichen, sondern die Übersetzung. Der Entwurf zeichnet eine dunkle
   Überlagerung (#15121A) über der Seite. Diese Liste liegt im hellen
   Inhaltsbereich; dieselben Werte dort ergäben einen schwarzen Kasten mitten
   auf cremefarbenem Grund. Übernommen ist also die Anordnung: Feld mit
   Goldkante und Trefferzahl darin, Zeilen aus Blattminiatur, Kategoriepunkt,
   Name, Fundstelle und Preis rechts.
   ========================================================================== */
.kopf-lupe {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(var(--text-dunkel-rgb), .22);
  color: var(--text-dunkel);
  flex: none;
  transition: border-color var(--d-schnell) var(--uebergang);
}
.kopf-lupe:hover { border-color: rgba(var(--gold-rgb), .75); color: var(--gold-auf); }
.kopf-lupe-bild {
  width: 19px; height: 19px;
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round;
}

/* Das Feld. Keine Kastenform, sondern eine Linie darunter — so steht es im
   Entwurf, und es hält die Zeile leicht.                                   */
.suchleiste {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--gold);
}
/* DIE LUPE STEHT AUF ZWEI GRUENDEN, und darum bleibt hier Bronze stehen:
   auf der hellen Seite /suche (4,7:1) und in der dunklen Ueberlagerung. Nur
   dort ist Bronze zu dunkel (3,8:1) — die Ueberschreibung steht deshalb im
   Suchkasten, nicht hier. Beim ersten Versuch habe ich global auf #C9A98C
   gestellt und damit /suche auf 2,12:1 heruntergezogen: derselbe Fehler,
   nur in die andere Richtung. */
.suchleiste-lupe { flex: none; display: flex; color: var(--bronze); }
.suchleiste-lupe svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round;
}
.suchleiste input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 4px 0;
  font-size: 26px;
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--text-hell);
  -webkit-appearance: none;
  appearance: none;
}
.suchleiste input[type="search"]::-webkit-search-cancel-button { display: none; }
/* FOKUS: DER RING LIEGT AN DER ZEILE, NICHT AM FELD.

   Hier stand `:focus { outline: none }` ohne jeden Ersatz. Die globale Regel
   (`:where(a,button,input,…):focus-visible`) hat Spezifität 0-1-0 und wurde
   von diesem Selektor mit 0-3-1 geschlagen — wer mit der Tabulatortaste in die
   Suche sprang, sah nirgends, dass er drin war. Das ist ein Verstoß gegen
   WCAG 2.4.7 an der zentralen Eingabe der Seite.

   Warum das `outline: none` überhaupt dastand, ist nachvollziehbar: Die
   Suchleiste ist ein LINIENFELD — eine Flex-Zeile mit `border-bottom` in Gold,
   kein Kasten. Ein Rechteck um das nackte Eingabefeld hätte diese Form
   zerschnitten. Also bekommt die Zeile den Ring, nicht das Feld: Sie IST das
   Bedienelement, die Lupe daneben gehört dazu.

   Zwei Regeln, damit immer genau EIN Ring zu sehen ist. Wo `:has` unterstützt
   wird, ringt die Zeile und das Feld schweigt; wo nicht, ringt das Feld selbst.
   Ein Fokus-Indikator darf nicht davon abhängen, wie neu der Browser ist.   */
.suchleiste input[type="search"]:focus-visible {
  outline: var(--fokus);
  outline-offset: 4px;
  border-radius: var(--radius-klein);
}
.suchleiste:has(input[type="search"]:focus-visible) {
  outline: var(--fokus);
  outline-offset: 6px;
  border-radius: var(--radius-klein);
}
.suchleiste:has(input[type="search"]:focus-visible) input[type="search"] { outline: none; }
.suchleiste input::placeholder { color: var(--text-hell-meta); }
.suchleiste-zahl {
  flex: none;
  font-size: 13px;
  color: var(--text-hell-meta);
  white-space: nowrap;
}
.suchleiste-weg {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  color: var(--text-hell-weich);
  font-size: 16px;
  text-decoration: none;
}
.suchleiste-weg:hover { border-color: var(--gold); color: var(--handlung); }

/* --- 01 Nichts getippt: die Familien und die gepflegten Begriffe -------- */
.such-familien {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--linie);              /* die Fugen — wie im Entwurf */
  border: 1px solid var(--linie);
  margin-bottom: 30px;
}
@media (max-width: 900px) { .such-familien { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .such-familien { grid-template-columns: 1fr; } }

.such-familie {
  background: var(--grund-weiss);
  padding: 20px 22px 22px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: background var(--d-schnell) var(--uebergang);
}
.such-familie:hover { background: var(--grund-platte); color: inherit; }
/* Leere Familien treten zurueck — sichtbar, aber ohne Versprechen. */
.such-familie-leer .such-familie-name { color: var(--text-hell-weich); }
.such-familie-leer .such-familie-strich { opacity: .45; }
/* Der Farbstrich je Familie — dieselben Blütentöne wie die Punkte in der
   Navigation, damit eine Kategorie überall dieselbe Farbe trägt. Eigene
   Klassen statt `.punkt`, weil das hier ein Strich ist und kein Punkt.   */
.such-familie-strich { display: block; width: 22px; height: 1px; margin-bottom: 16px; }
.ton-rose     { background: var(--bluete-rose); }
.ton-pfirsich { background: var(--bluete-pfirsich); }
.ton-pflaume  { background: var(--bluete-pflaume); }
.ton-petrol   { background: var(--bluete-petrol); }
.ton-gold     { background: var(--gold); }
.ton-salbei   { background: var(--bluete-salbei); }
.such-familie-name { display: block; font-size: 15.5px; font-weight: var(--gewicht-halb); }
.such-familie-zahl { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-hell-meta); }

.such-oft {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.such-oft-titel {
  flex: none;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: var(--gewicht-halb);
  color: var(--bronze);
}

/* --- 02 Treffer --------------------------------------------------------- */
.such-gruppe {
  margin: 34px 0 14px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: var(--gewicht-halb);
  color: var(--bronze);
}
.such-gruppe:first-of-type { margin-top: 0; }

.such-liste { display: flex; flex-direction: column; gap: 2px; }

/* Eine Zeile, kein Kästchen: Untereinander liest man eine Ergebnisliste
   schneller als über ein Raster hinweg — und der Entwurf zeichnet es so.  */
.such-zeile {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 12px;
  text-decoration: none;
  color: inherit;
  border-radius: 3px;
  transition: background var(--d-schnell) var(--uebergang);
}
.such-zeile:hover,
.such-zeile:focus-visible { background: var(--grund-platte); color: inherit; }

/* Die Miniatur trägt dieselbe Blattform wie die Kacheln — und spiegelt sich
   im Wechsel, sonst entsteht ein Muster, das wie ein Druckfehler aussieht. */
.such-blatt {
  aspect-ratio: 3 / 4;
  border-radius: var(--blatt);
  overflow: hidden;
  background: var(--grund-platte);
  box-shadow: 0 0 0 1px var(--linie);
  display: flex;
  align-items: center;
  justify-content: center;
}
.such-zeile:nth-child(even) .such-blatt { border-radius: var(--blatt-gespiegelt); }
.such-blatt img { width: 100%; height: 100%; }
.such-blatt .frei     { object-fit: contain; padding: 11% 13%; box-sizing: border-box; }
.such-blatt .stimmung { object-fit: cover; }

/* Seitentreffer haben kein Bild, sondern ein Blatt Papier. Ohne etwas an
   dieser Stelle rutschte der Text nach links und die beiden Listen ständen
   nicht mehr in einer Flucht.                                             */
.such-blatt-seite { background: var(--grund-weiss); color: var(--bronze); }
.such-blatt-seite svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
}

.such-mitte { min-width: 0; display: block; }
.such-kat {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 5px;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: var(--gewicht-halb);
  color: var(--bronze);
}
.such-name {
  display: block;
  font-size: 15.5px;
  font-weight: var(--gewicht-halb);
  color: var(--text-hell);
}
.such-fund {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-hell-weich);
}
.such-pfad {
  font-size: 12px;
  color: var(--text-hell-meta);
  white-space: nowrap;
}

/* Der Preis darf nie umbrechen und nie schrumpfen — dieselbe Falle wie an
   der Kachel.                                                             */
.such-preis {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 20px;
  color: var(--text-hell);
  white-space: nowrap;
  flex: none;
}

/* Die Fundstelle. Sie beantwortet, WARUM ein Treffer in der Liste steht —
   bei „gold" trägt die Aurelia Vase das Wort nicht im Namen, sondern in der
   Farbe. Getönt, nicht knallgelb: Es ist eine Auszeichnung im Fließtext,
   keine Warnung.                                                          */
.such-fund mark,
.such-name mark {
  background: rgba(var(--gold-rgb), .26);
  color: inherit;
  padding: 0 3px;
  border-radius: 2px;
}

.such-alle { margin-top: 20px; font-size: 14px; }

/* --- 03 Nichts gefunden ------------------------------------------------- */
/* „Die wichtigste Ansicht" (Entwurf). Eine leere Liste ist eine verlorene
   Anfrage — hier führt sie zu einer Antwort.                              */
.such-leer {
  border: 1px solid var(--linie);
  background: var(--grund-weiss);
  padding: 30px 32px 32px;
}
.such-leer-titel {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--text-hell);
}
.such-leer-titel em {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 24px;
  color: var(--handlung);
}
.such-leer-text {
  margin: 0 0 22px;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-hell-weich);
}
.such-leer-knoepfe {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 24px;
}
.such-leer-vielleicht {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--linie);
}

/* --- Mengenwahl neben dem Kaufknopf -------------------------------------- */
.mengenwahl { flex: none; }
.mengenwahl input {
  width: 72px;
  box-sizing: border-box;
  padding: 15px 10px;
  border: 1px solid var(--feld-rand);
  border-radius: var(--radius-pille);
  background: var(--grund-weiss);
  font: inherit;
  font-size: 15px;
  text-align: center;
  color: var(--text-hell);
}
.mengenwahl input:focus-visible { outline: var(--fokus); outline-offset: 2px; border-color: var(--gold); }

/* --- Die Korbseite ------------------------------------------------------- */
.korbseite {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 56px;
  padding: 48px var(--seitenrand) 64px;
  align-items: start;
}

.korb-liste { list-style: none; margin: 0; padding: 0; }
.korb-zeile {
  display: grid;
  grid-template-columns: 92px 1fr auto auto auto;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--linie);
}
.korb-zeile:last-child { border-bottom: 1px solid var(--linie); }

.korb-bild {
  position: relative;
  display: block;
  width: 92px;
  aspect-ratio: var(--blatt-seitenverhaeltnis);
  border-radius: var(--blatt);
  overflow: hidden;
  background: var(--grund-platte);
  box-shadow: 0 0 0 1px var(--linie);
  flex: none;
}
.korb-bild img { width: 100%; height: 100%; object-fit: cover; }

.korb-name { font-size: 16px; font-weight: var(--gewicht-halb); color: var(--text-hell); }
.korb-name:hover { color: var(--handlung); }
.korb-merkmale { margin: 5px 0 0; font-size: 13px; color: var(--text-hell-meta); }
.korb-einzel   { margin: 3px 0 0; font-size: 12.5px; color: var(--text-hell-meta); }

.korb-menge { display: flex; align-items: center; gap: 8px; }
.korb-menge input {
  width: 62px;
  box-sizing: border-box;
  padding: 9px 8px;
  border: 1px solid var(--feld-rand);
  border-radius: var(--radius-klein);
  background: var(--grund-weiss);
  font: inherit;
  font-size: 14px;
  text-align: center;
  color: var(--text-hell);
}
.korb-menge input:focus-visible { outline: var(--fokus); outline-offset: 2px; border-color: var(--gold); }
.knopf-klein { padding: 8px 14px; font-size: 13px; }


.korb-summe {
  margin: 0;
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 21px;
  color: var(--text-hell);
  white-space: nowrap;
  min-width: 5.5rem;
  text-align: right;
}

/* Entfernen und Leeren sind Textknöpfe, keine Flächen: Sie sollen bedienbar
   sein, aber nicht neben dem Kaufknopf um Aufmerksamkeit ringen.           */
.korb-weg button,
.korb-leeren button {
  border: 0;
  background: none;
  padding: 4px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text-hell-meta);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.korb-weg button:hover,
.korb-leeren button:hover { color: var(--zustand-fehler); }
.korb-weg button:focus-visible,
.korb-leeren button:focus-visible { outline: var(--fokus); outline-offset: 2px; }
.korb-leeren { margin-top: 18px; }

.karte-reihen-erst { border-top: 0; padding-top: 0; margin-top: 0; }

.korb-gesamt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--linie-zart);
  font-size: 15px;
  font-weight: var(--gewicht-halb);
}
.korb-gesamt-zahl {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 30px;
  font-weight: var(--gewicht-normal);
  white-space: nowrap;
}
.korb-ust { margin: 4px 0 0; font-size: 12.5px; color: var(--text-hell-meta); }

.korb-weiter { margin-top: 20px; }
/* Ein Verweis, der wie der Kaufknopf aussieht — er führt fort, er verändert
   nichts, also ist er richtigerweise ein <a> und kein <button>.            */
.knopf-verweis {
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  color: var(--handlung-auf);
}
.knopf-verweis:hover { color: var(--handlung-auf); }
.korb-weiterstoebern { margin: 14px 0 0; font-size: 13.5px; text-align: center; }

/* --- Kasse, Prüfung, Bestellseite ---------------------------------------- */
.feldgruppe { border: 0; margin: 0; padding: 28px 0 0; }
.feldgruppe legend {
  padding: 0;
  font-size: var(--t-mikro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: var(--gewicht-halb);
}
.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.feldpaar-plz { grid-template-columns: 140px 1fr; }
.feld-schmal input,
.feld-schmal select { max-width: 200px; }
.feld input[readonly] { background: #F6F1EC; color: var(--text-hell-meta); }
.lieferfelder {
  border-left: 2px solid var(--linie);
  padding-left: 20px;
  margin-top: 6px;
}
/* .knopfzeile-still steht weiter unten, direkt bei .knopfzeile — warum, ist
   dort vermerkt. Hier stand sie vorher und hat stumm nichts bewirkt.      */

/* Die Zahlartwahl: ganze Fläche klickbar, nicht nur der Punkt.            */
.zahlwahl { margin-top: 12px; }
.zahlwahl input { position: absolute; opacity: 0; pointer-events: none; }
.zahlwahl label {
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-areas: "strich name" "strich text";
  gap: 4px 14px;
  align-items: start;
  border: 1px solid var(--feld-rand);
  border-radius: var(--radius-klein);
  padding: 16px 18px;
  cursor: pointer;
  background: var(--grund-weiss);
  transition: border-color var(--d-schnell) var(--uebergang);
}
.zahlwahl label:hover { border-color: var(--text-hell); }
.zahlwahl input:checked + label { border-color: var(--text-hell); box-shadow: inset 0 0 0 1px var(--text-hell); }
.zahlwahl input:focus-visible + label { outline: var(--fokus); outline-offset: 2px; }
.zahlwahl-strich { grid-area: strich; width: 26px; height: 1px; margin-top: 10px; }
.zahlwahl-name { grid-area: name; font-size: 15.5px; font-weight: var(--gewicht-halb); }
.zahlwahl-text { grid-area: text; font-size: 13.5px; line-height: 1.6; color: var(--text-hell-weich); }

/* Die Übersicht vor dem Kaufknopf. § 312j Abs. 2 BGB verlangt sie
   „klar und verständlich in hervorgehobener Weise" — deshalb eine Tabelle
   mit Kopfzeilen und keine Aufzählung.                                    */
.pruefliste { width: 100%; border-collapse: collapse; margin: 18px 0 0; font-size: 14.5px; }
.pruefliste th, .pruefliste td { padding: 12px 10px; text-align: left; vertical-align: top; }
.pruefliste thead th {
  font-size: var(--t-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: var(--gewicht-halb);
  border-bottom: 1px solid var(--linie);
}
.pruefliste tbody td { border-bottom: 1px solid var(--linie-zart); }
.pruefliste .rechts { text-align: right; white-space: nowrap; }
.pruefliste-merkmal { display: block; font-size: 12.5px; color: var(--text-hell-meta); margin-top: 3px; }
.pruefliste tfoot th, .pruefliste tfoot td { padding-top: 10px; padding-bottom: 4px; font-weight: var(--gewicht-normal); }
.pruefliste tfoot th { text-align: right; color: var(--text-hell-weich); }
.pruefliste-gesamt th, .pruefliste-gesamt td {
  border-top: 1px solid var(--linie);
  padding-top: 14px;
  font-weight: var(--gewicht-halb);
  font-size: 17px;
  color: var(--text-hell);
}

.pruefspalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 34px; }
.pruefspalten h3 { font-size: var(--t-mikro); letter-spacing: .14em; text-transform: uppercase;
                   color: var(--bronze); font-weight: var(--gewicht-halb); margin: 0 0 10px; }
.anschriftblock { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--text-hell-weich); }

/* Der Abschluss. Der Knopf ist der einzige auf der Seite in dieser Größe —
   er soll nicht mit „Angaben ändern" verwechselt werden können.           */
.bestellform { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linie); }
.bestellabschluss { margin-top: 24px; }
.bestellabschluss .knopf-bestellen { width: 100%; padding: 20px 0; font-size: 17px; }
.bestellabschluss-satz {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-hell-weich);
  text-align: center;
}

.bestellzustand { display: flex; align-items: center; gap: 12px; margin: 0 0 26px;
                  font-size: 14.5px; color: var(--text-hell-weich); }
.bankkasten { border: 1px solid var(--linie); background: var(--feld-grund); padding: 22px 26px; margin-top: 16px; }
.bankkasten .iban { font-variant-numeric: tabular-nums; letter-spacing: .03em; }

/* --- Kasse und Prüfung am Handy ------------------------------------------ */
@media (max-width: 900px) {
  .feldpaar, .feldpaar-plz, .pruefspalten { grid-template-columns: 1fr; gap: 0; }
  .pruefspalten { gap: 24px; }
  .pruefliste { font-size: 13.5px; }
  .pruefliste th, .pruefliste td { padding: 10px 6px; }
  .kasse-liste li { font-size: 13.5px; }
}

/* --- Zusammenfassung in der Seitenspalte der Kasse ----------------------- */
.kasse-liste { list-style: none; margin: 0 0 18px; padding: 0; font-size: 14px; }
.kasse-liste li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linie-zart);
}
.kasse-liste li:last-child { border-bottom: 0; }
.kasse-menge { color: var(--text-hell-meta); white-space: nowrap; }
.kasse-preis { white-space: nowrap; font-weight: var(--gewicht-halb); }
/* --- Adminbereich: ENTFERNT AM 27.08.2026 -------------------------------
   Hier standen 49 Regeln fuer die eigene Verwaltung des Ladens — Zahlenkacheln,
   Bestellliste, Statuszeile, Verlauf, Gutschein-Kartonzettel, Codeschild,
   dazu ein eigener Handy-Block.

   DIE VERWALTUNG IST AM 08.08.2026 NACH ELASPRINTFLOW GEZOGEN. `public/admin.php`
   gibt es seither nicht mehr; Bestellungen, Gutscheine und Aktionscodes werden
   in der Werkbank bedient und ueber `schnittstelle.php` geholt. Die Regeln
   faerbten seither nichts mehr — nachgewiesen am 27.08.2026: keine ihrer 33
   Klassen kommt in irgendeiner der 104 Quelldateien unter `public/` vor.

   Fuenf Klassennamen darin sind anderswo lebendig (`formular`, `formular-fuss`,
   `k`, `merkzettel-zeichen`, `punkt`) — sie standen hier aber ausschliesslich
   als Nachfahren einer Admin-Klasse (`.meldung-anliegen .merkzettel-zeichen`
   und so fort) und gehen mit ihren Eltern.

   Wer die Verwaltung je zurueckholt, holt sie aus dem Verlauf: Commit vor
   diesem, Zeilen 3494–3626.                                              */

/* ==========================================================================
   STUFE 4 — PRODUKTSEITE
   Quelle: „Elas3DStudio Produkt.dc.html" (Projektwurzel, Stand 01.08.2026),
   Handy: „Elas3DStudio Handy.dc.html" Z. 97–129.
   Die ältere Vorlage claude/elas3dstudio.de/produkt-mona-lisa.html ist überholt.
   ========================================================================== */
.brotkrume {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 20px var(--seitenrand) 0;
  font-size: 12.5px;
  color: var(--text-hell-meta);
  margin: 0;
}
.brotkrume a { color: var(--text-hell-meta); }
.brotkrume a:hover { color: var(--handlung); }
.brotkrume [aria-current="page"] { color: var(--text-hell); }
.brotkrume-strich { color: #C9B3A3; }

.produkt {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 56px;
  padding: 26px var(--seitenrand) 0;
  align-items: start;
}

/* --- Bühne: ein großes Blatt, fast quadratisch --------------------------- */
.produkt-buehne { position: relative; animation: blattAtem 14s ease-in-out infinite; }
.produkt-buehne .kachel-licht { inset: -22px; filter: blur(26px); }
.produkt-blatt {
  position: relative;
  aspect-ratio: 1 / 1.14;
  border-radius: var(--blatt);
  overflow: hidden;
  background: var(--grund-platte);
  box-shadow: 0 0 0 1px var(--linie), 0 26px 50px -34px rgba(40,44,53,.6);
}
.produkt-blatt img { width: 100%; height: 100%; }
.produkt-blatt .frei     { object-fit: contain; padding: 9% 12%; box-sizing: border-box; }
.produkt-blatt .stimmung { object-fit: cover; }

/* --- Galerie: sechs kleine Blätter, abwechselnd gespiegelt --------------- */
/* Die Reihe trägt die Pfeile; sie liegen AUSSERHALB des rollenden Bereichs,
   sonst rollten sie mit und wären genau dann fort, wenn man sie braucht.    */
.galerie-reihe {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

/* SECHS SICHTBAR, ALLE ERREICHBAR (18.08.2026).

   Vorher ein Raster aus genau sechs Spalten; das siebte Bild gab es nur als
   „+1" ohne Weg dorthin. Jetzt eine rollende Reihe, in der weiterhin sechs
   Felder stehen — die Breite je Feld rechnet die Lücken heraus, damit die
   Größe dieselbe bleibt wie zuvor.

   KEIN `scroll-snap-type: mandatory`. Am 18.08.2026 gemessen: Bei sieben
   Blättern ist die Reihe 620 breit, sichtbar sind 530 — es bleiben 90 Pixel
   Rollweg. Die Fangpunkte liegen bei 0, 90, 180 … also grösstenteils
   ausserhalb dessen, was erreichbar ist, und der Browser zog jedes
   `scrollLeft = 90` wieder auf 0. Die Leiste stand fest, obwohl die Pfeile
   richtig rechneten.

   `proximity` fängt nur, wenn ein Fangpunkt nah genug liegt, und lässt jede
   andere Stellung stehen. **Ein Fangpunkt, der ausserhalb des Rollwegs liegt,
   ist keine Hilfe, sondern eine Sperre.**                                   */
.produkt-galerie {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  /* KEIN `scroll-behavior: smooth` HIER. Am 18.08.2026 gemessen: Mit der
     Regel blieb jedes `scrollLeft = 97` auf 0 stehen — die Leiste rührte sich
     nicht, obwohl die Pfeile richtig rechneten. Ohne sie rollt sie sofort,
     auch mit Snapping. Die Weichheit fordert `site.js` je Klick an
     (`behavior: 'smooth'`); wo der Browser sie nicht liefert, springt die
     Reihe eben — das ist die bessere Hälfte des Tauschs.

     Merksatz: Eine Regel, die nur das Wie betrifft, darf das Ob nicht
     verhindern. */
  /* Die Rollleiste bleibt aus: Sie säße unter den Blättern und zerschnitte
     die Reihe. Gerollt wird mit Finger, Trackpad, Pfeil oder Tastatur. */
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.produkt-galerie::-webkit-scrollbar { display: none; }
/* ALLE FELDER GLEICH GROSS, IMMER — 26.08.2026.

   `min-width: 0` ist der ganze Punkt. Ein Flex-Feld darf von sich aus nicht
   unter seinen Inhalt schrumpfen (`min-width: auto`), und der Platzhalter
   „Foto folgt" trug einen Innenrand in Prozent. Prozente am Innenrand rechnen
   gegen die BREITE DES ELTERNTEILS, nicht gegen das Feld: 22 Prozent von der
   Galeriebreite ergaben links und rechts zusammen mehr, als ein Sechstel breit
   ist. Die leeren Plaetze blaehten sich auf ihre Mindestbreite auf und
   drueckten die Felder mit Bild schmal — je weniger Fotos ein Artikel hatte,
   desto unfoermiger die Reihe. Genau anders herum, als es aussehen soll.

   Mit `min-width: 0` gilt die Vorgabe aus `flex-basis` fuer jedes Feld, ob es
   ein Bild traegt oder den Hinweis. Der Innenrand des Platzhalters steht jetzt
   bei `.galerie-leer` und rechnet nicht mehr in Prozent.                     */
.produkt-galerie > * {
  flex: 0 0 calc((100% - 5 * 10px) / 6);
  min-width: 0;
  scroll-snap-align: start;
}
/* Tastatur: Die Reihe ist fokussierbar, also braucht sie einen sichtbaren
   Fokus — sonst rollte sie unter jemandem, der nicht sieht, wo er ist. */
.produkt-galerie:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.galerie-pfeil {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--grund);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--d-schnell) var(--uebergang);
}
.galerie-pfeil:hover { border-color: var(--gold); }
/* EIN VERBORGENER PFEIL BEHAELT SEINEN PLATZ (26.08.2026). Mit `display: none`
   wurde die Reihe um zwei Knoepfe breiter, sobald nichts zu rollen war — und
   damit auch jedes Blatt darin. Dieselbe Leiste sah auf zwei Artikeln
   verschieden gross aus, je nachdem, wie viele Fotos vorlagen. `visibility`
   nimmt den Knopf aus Bild, Griff und Vorlesetext und laesst die Spur stehen. */
.galerie-pfeil[hidden] { display: grid; visibility: hidden; }
/* Blattform und Rahmen gelten für Bild UND Platzhalter — deshalb `> *` und
   nicht `a`. Ein leerer Platz soll dieselbe Form haben, sonst bricht die
   Reihe genau dort, wo etwas fehlt.                                        */
.produkt-galerie > * {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--blatt);
  overflow: hidden;
  background: var(--grund-platte);
  box-shadow: 0 0 0 1px var(--linie);
}
.produkt-galerie > :nth-child(even) { border-radius: var(--blatt-gespiegelt); }
.produkt-galerie a[aria-current="true"] { box-shadow: 0 0 0 1.5px var(--gold); }
.produkt-galerie img { width: 100%; height: 100%; object-fit: cover; }
.produkt-galerie a { transition: box-shadow var(--d-schnell) var(--uebergang); }
.produkt-galerie a:hover { box-shadow: 0 0 0 1.5px var(--gold); }

/* Ein Platz, der noch kein Foto hat. Er sagt das auch — schraffiert und
   ohne Rahmenfarbe, damit ihn niemand für eine Kachel hält, die nicht
   geladen hat.                                                            */
.galerie-leer {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-align: center;
  background:
    repeating-linear-gradient(135deg, #F4EBE3 0 6px, var(--grund-platte) 6px 12px);
}
/* Reichlich Rand, weil die Blattform zwei Ecken wegschneidet: Der Text muss in
   den mittleren Bereich, sonst kappt die Rundung den ersten Buchstaben. Die
   Breite steht am Wort und nicht als Innenrand am Feld — ein Innenrand in
   Prozent haette das Feld wieder aufgeblaeht (siehe `.produkt-galerie > *`). */
.galerie-leer span {
  max-width: 56%;
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--text-hell-meta);
}

/* --- Lichtkasten ---------------------------------------------------------
   Öffnet über `:target`, also über die Adresse. Ohne Skript vollständig
   bedienbar; site.js legt nur Escape und die Pfeiltasten obendrauf.
   Begründung ausführlich in produkt.php.

   Die Bühne trägt die Lupe: Das große Blatt ist selbst ein Verweis, weil
   „aufs Bild klicken" die Erwartung ist, die niemand erklärt bekommt.     */
.blatt-lupe { display: block; width: 100%; height: 100%; }
.blatt-lupe img { transition: transform var(--d-blende) var(--uebergang); }
.blatt-lupe:hover img { transform: scale(1.03); }

.lichtkasten { display: none; }
.lichtkasten:target {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 5vw, 60px);
}
.lichtkasten-grund {
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 28, .86);
}
.lichtkasten-rahmen {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: min(980px, 100%);
}
.lichtkasten-rahmen img {
  max-width: 100%;
  /* Höhe gegen den Bildschirm gedeckelt, damit Bildunterschrift und
     Schließen immer sichtbar bleiben — auch quer am Handy.                */
  max-height: min(72vh, 760px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-klein);
  box-shadow: 0 40px 90px -46px #000;
}
.lichtkasten-rahmen figcaption {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.lichtkasten-name { color: var(--text-dunkel); font-weight: var(--gewicht-halb); font-size: 15px; }
.lichtkasten-zaehler { color: rgba(var(--text-dunkel-rgb), .62); font-size: 13px; }

.lichtkasten-zu {
  position: absolute;
  top: clamp(14px, 3vw, 26px);
  right: clamp(14px, 3vw, 26px);
  padding: 9px 18px;
  border: 1px solid rgba(var(--text-dunkel-rgb), .32);
  border-radius: var(--radius-pille);
  background: rgba(20,22,28,.5);
  color: var(--text-dunkel);
  font-size: 13px;
}
.lichtkasten-zu:hover { border-color: var(--gold); color: var(--gold-auf); }

.lichtkasten-weg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(var(--text-dunkel-rgb), .28);
  background: rgba(20,22,28,.5);
  color: var(--text-dunkel);
  font-size: 24px;
  line-height: 1;
}
.lichtkasten-weg:hover { border-color: var(--gold); color: var(--gold-auf); }
.lichtkasten-vor  { left:  clamp(8px, 2vw, 24px); }
.lichtkasten-nach { right: clamp(8px, 2vw, 24px); }
.lichtkasten a:focus-visible { outline: var(--fokus); outline-offset: 3px; }
/* Das letzte Feld zählt, was nicht mehr hineinpasst.                       */
/* `.galerie-mehr` ist am 18.08.2026 entfallen — es gibt kein „+N"-Feld mehr,
   seit die Reihe alle Ansichten trägt und zwei Pfeile hindurchführen. Das war
   eine Sackgasse: Der Hinweis nannte ein weiteres Bild und bot keinen Weg
   dorthin. Die Regeln sind mitsamt der Auszeichnung weg. */

/* --- Rechte Spalte -------------------------------------------------------- */
.produkt-spalte { padding-top: 6px; }
.produkt-kat {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  font-size: var(--t-mikro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: var(--gewicht-halb);
}
.produkt-kat .punkt { width: 7px; height: 7px; }

.produkt-spalte h1 {
  margin: 0;
  font-size: 44px;
  letter-spacing: -.035em;
  line-height: 1.1;
}
.produkt-spalte h1 em {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 50px;
}

.produkt-preiszeile { display: flex; align-items: baseline; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.produkt-preis {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 34px;
  color: var(--text-hell);
  white-space: nowrap;
}
/* MwSt. und Versand stehen unmittelbar am Preis — das verlangt die
   Preisangabenverordnung, und es ist auch einfach fair.                    */
.produkt-preis-zusatz { font-size: 12.5px; color: var(--text-hell-meta); }

.produkt-text {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-hell-weich);
  max-width: 46ch;
}
/* Die Strukturpunkte aus ElasPrintFlow. Sie hingen bis zum 04.08.2026 als
   Fließtext hinter der Beschreibung -- ein Absatz, in dem die Gedankenstriche
   mitten im Satz standen.                                                   */
.produkt-punkte {
  margin: 14px 0 0;
  padding: 0 0 0 20px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-hell-weich);
  max-width: 46ch;
}
.produkt-punkte li { margin-top: 4px; }
.produkt-punkte li::marker { color: var(--gold); }

/* ── Die eingeklappte Beschreibung ────────────────────────────────────────
   Die Texte aus ElasPrintFlow sind manchmal fünf Absätze lang und schieben
   Masse, Material und Zubehör aus dem Bild.

   BEIDE KLASSEN SETZT DAS SKRIPT — ohne es steht der Text offen da. Er ist
   immer VOLLSTAENDIG im Dokument; beschnitten wird nur, was man sieht.

   `max-height` UND KEIN `line-clamp`: Der Block enthält Absätze und
   Aufzählungen, und `-webkit-line-clamp` zählt Zeilen nur innerhalb EINES
   Elements. Bei einer Liste darunter schnitte es gar nichts. */
.produkt-beschreibung.ist-gekuerzt {
  max-height: 300px;
  overflow: hidden;
  position: relative;
}
/* Der weiche Auslauf sagt „hier geht es weiter" — eine harte Kante sähe aus
   wie ein Textende. Er liegt ÜBER dem Text und darf keine Klicks fangen. */
.produkt-beschreibung.ist-gekuerzt::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 90px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 250, 246, 0), var(--grund-hell));
}
.produkt-mehr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: var(--gewicht-halb);
  color: var(--bluete-petrol);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.produkt-mehr[hidden] { display: none; }
.produkt-mehr:hover { color: var(--gold-schrift-hell); }
.produkt-mehr:focus-visible { outline: var(--fokus); outline-offset: 3px; border-radius: 4px; }
/* Der Pfeil dreht sich mit dem Zustand — er sagt die Richtung, in die es
   geht, und braucht dafür kein zweites Wort. */
.produkt-mehr::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.produkt-mehr[aria-expanded="true"]::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.produkt-text + .produkt-punkte { margin-top: 18px; }

.produkt-schluss {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 19px;
  color: var(--bronze);
  margin: 14px 0 0;
}

/* --- Auswahl: echte Formularfelder, keine Attrappen ---------------------- */
.wahlblock { margin-top: 26px; }
.wahlblock-erst { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--linie); }
.wahl-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.wahl-titel {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: var(--gewicht-halb);
}
.wahl-neben { font-size: 13px; color: var(--text-hell-meta); }

/* Der gewählte Farbname rechts in der Kopfzeile. Im Markup stehen alle Namen,
   sichtbar ist nur der zur angehakten Probe — ohne Skript, weil die Seite
   keines braucht und die CSP keine Inline-Stile zulässt.

   Der Aufbau trägt das: In .farb-reihe wechseln sich input und label ab, die
   i-te Probe ist also `input:nth-child(2i-1)`, und der i-te Name darunter ist
   `span:nth-child(i)`. Die Paare unten koppeln beide über die Dokumentordnung,
   nicht über Namen oder Kennungen — wer eine Farbe einfügt, muss hier nichts
   nachziehen. Zehn Paare reichen für alle Farben aus FARBPROBEN.

   Ohne :has() (sehr alte Browser) bleibt der erste Name stehen. Das ist die
   Vorauswahl und damit richtig, bis jemand eine andere Probe anhakt.        */
.farb-gewaehlt { font-size: 13px; color: var(--text-hell); font-weight: var(--gewicht-halb); }
.farb-gewaehlt > span { display: none; }
.farb-gewaehlt > span:first-child { display: inline; }
.wahlblock:has(.farb-reihe > input:not(:nth-child(1)):checked) .farb-gewaehlt > span:first-child {
  display: none;
}
.wahlblock:has(.farb-reihe > input:nth-child(1):checked)  .farb-gewaehlt > span:nth-child(1),
.wahlblock:has(.farb-reihe > input:nth-child(3):checked)  .farb-gewaehlt > span:nth-child(2),
.wahlblock:has(.farb-reihe > input:nth-child(5):checked)  .farb-gewaehlt > span:nth-child(3),
.wahlblock:has(.farb-reihe > input:nth-child(7):checked)  .farb-gewaehlt > span:nth-child(4),
.wahlblock:has(.farb-reihe > input:nth-child(9):checked)  .farb-gewaehlt > span:nth-child(5),
.wahlblock:has(.farb-reihe > input:nth-child(11):checked) .farb-gewaehlt > span:nth-child(6),
.wahlblock:has(.farb-reihe > input:nth-child(13):checked) .farb-gewaehlt > span:nth-child(7),
.wahlblock:has(.farb-reihe > input:nth-child(15):checked) .farb-gewaehlt > span:nth-child(8),
.wahlblock:has(.farb-reihe > input:nth-child(17):checked) .farb-gewaehlt > span:nth-child(9),
.wahlblock:has(.farb-reihe > input:nth-child(19):checked) .farb-gewaehlt > span:nth-child(10) {
  display: inline;
}

.wahl-reihe { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
/* Der Knopf IST das Eingabefeld — das Häkchen liegt darunter, damit der
   Fokusring die sichtbare Fläche trifft.                                   */
.wahl-reihe input { position: absolute; opacity: 0; pointer-events: none; }
.wahl-reihe label {
  flex: 1;
  min-width: 84px;
  border: 1px solid var(--feld-rand);
  border-radius: var(--radius-klein);
  padding: 13px 0;
  text-align: center;
  font-size: 15px;
  cursor: pointer;
  transition: border-color var(--d-schnell) var(--uebergang);
}
.wahl-reihe label:hover { border-color: var(--text-hell); }
/* Der Betrag je Größe, zweite Zeile auf dem Knopf. Gedämpft wird er über die
   Deckkraft und nicht über eine eigene Farbe — der angehakte Knopf dreht Vorder-
   und Hintergrund um, eine feste Farbe wäre dort blind.                     */
.wahl-preis { display: block; margin-top: 3px; font-size: 13px; opacity: .72; }
.wahl-reihe input:checked + label {
  border-color: var(--text-hell);
  background: var(--text-hell);
  color: var(--grund-hell);
  font-weight: var(--gewicht-halb);
}
.wahl-reihe input:focus-visible + label { outline: var(--fokus); outline-offset: var(--fokus-abstand); }

/* Farbproben: der Ring markiert die Auswahl, der Name steht daneben — auf
   Farbe allein darf sich niemand verlassen müssen.                        */
.farb-reihe { display: flex; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.farb-reihe input { position: absolute; opacity: 0; pointer-events: none; }
.farb-reihe label {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  /* Die Trefferfläche ist größer als die Probe. 34px sehen richtig aus — als
     Bedienelement sind sie zu klein, und --treffer sagt „nirgends darunter".
     Statt die Probe aufzublasen, legt ::after einen unsichtbaren Kreis von
     44px darüber: Das Aussehen bleibt, der Daumen trifft. Bei gap:14px in
     .farb-reihe bleiben zwischen zwei Flächen noch 4px, sie überlappen also
     nicht. Hier wird eine Farbe gewählt, die nach der Bestellung gedruckt
     wird — ein Fehlgriff kostet einen echten Artikel.                      */
  position: relative;
  box-shadow: 0 0 0 1px var(--linie);
  /* Grundton, falls zu einem Farbnamen keine Probe hinterlegt ist — das
     fällt dann sofort auf. Die echten Töne stehen weiter unten und tragen
     denselben Selektor-Aufbau, sonst gewinnen sie nicht.                   */
  background: var(--linie);
}
.farb-reihe label::after {
  content: "";
  position: absolute;
  inset: -5px;                 /* 34px + 2x5px = 44px, siehe --treffer */
  border-radius: 50%;
}
.farb-reihe input:checked + label,
.farb-reihe input:checked + label.probe-weiss,
.farb-reihe input:checked + label.probe-weiss-matt,
.farb-reihe input:checked + label.probe-weiss-seidig {
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 4px var(--grund-hell), 0 0 0 5.5px var(--gold);
}
.farb-reihe input:focus-visible + label { outline: var(--fokus); outline-offset: 6px; }
.farb-namen { font-size: 12.5px; color: var(--text-hell-meta); margin: 12px 0 0; }
/* Der Trennpunkt steht als ::before und nicht als Text zwischen den Namen:
   Einzelne Namen werden je Größe ausgeblendet, ein fest gesetztes „ · " bliebe
   sonst als verwaister Punkt stehen. Welcher Name in einer Größe der erste
   sichtbare ist, sagt produkt-stil.php.                                    */
.farb-namen span::before { content: "· "; }
.farb-namen span:first-child::before { content: none; }

.bestellzeile { display: flex; gap: 12px; margin-top: 30px; align-items: center; }

/* Die mitlaufende Kaufleiste gibt es NUR am Telefon und NUR mit Skript. Hier
   steht sie deshalb grundsätzlich auf `none`: Am Schreibtisch ist der Kaufknopf
   ohne Scrollen erreichbar, und ohne Skript bleibt zusätzlich das
   hidden-Attribut stehen. Sichtbar wird sie allein durch die Regel im
   900px-Umbruch weiter unten. */
.kaufleiste { display: none; }
.knopf-voll {
  flex: 1;
  background: var(--handlung);
  color: var(--handlung-auf);
  border: 0;
  border-radius: var(--radius-pille);
  padding: 16px 0;
  text-align: center;
  font: inherit;
  font-size: 15.5px;
  font-weight: var(--gewicht-halb);
  cursor: pointer;
  transition: background var(--d-schnell) var(--uebergang);
}
.knopf-voll:hover { background: var(--handlung-hover); color: var(--handlung-auf); }

/* Der Knopf, der eine liegengebliebene Zahlung noch einmal anstoesst.

   DIESE REGEL MUSS NACH .knopf-voll STEHEN -- dieselbe Lehre wie bei
   .knopfzeile-still weiter unten. Beide Selektoren haben eine Klasse, also
   dieselbe Spezifitaet, und dann gewinnt die spaetere. Stand der Block weiter
   oben, setzte `.knopf-voll { padding: 16px 0 }` den waagerechten Abstand
   wieder auf null, und der Text klebte an den Kanten -- genau so gesehen am
   07.08.2026, nach dem ersten Anlauf.
   EIGENE GROESSE, WEIL .knopf-voll FUER FLEX-ZEILEN GEBAUT IST: Dort traegt
   `flex: 1` die Breite, und deshalb hat die Regel gar keinen waagerechten
   Innenabstand. Steht der Knopf allein, klebt der Text an den Kanten -- genau
   das war am 07.08.2026 zu sehen. Hier also Innenabstand von Hand, dazu etwas
   mehr Groesse: Er ist auf dieser Seite der einzige Handgriff, und wer ihn
   sucht, hat gerade eine abgebrochene Zahlung hinter sich. */
.knopf-zahlen {
  display: inline-block;
  flex: none;
  padding: 17px 34px;
  font-size: 17px;
}
@media (max-width: 640px) {
  /* Auf dem Handy ueber die volle Breite -- daneben steht nichts, und ein
     mittiger Knopf mit Rand links und rechts sieht dort verloren aus. */
  .knopf-zahlen { display: block; width: 100%; padding: 17px 20px; }
}

/* Warmer Hinweis — überall dort, wo etwas noch nicht so läuft, wie man es
   erwarten würde.                                                          */
.hinweis-warm {
  position: relative;
  margin: 14px 0 0;
  padding: 14px 16px 14px 32px;
  background: #FCF3ED;
  border-radius: var(--radius-klein);
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-hell-weich);
}
/* Der Punkt liegt absolut. Als Flex-Element würde jeder Verweis im Text zu
   einer eigenen Spalte, und der Satz bräche mitten im Wort um.            */
.hinweis-warm::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 21px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.zweispalt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 26px;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.zweispalt > div { padding: 16px 20px; border-left: 1px solid var(--linie); }
.zweispalt > div:first-child { padding-left: 0; border-left: 0; }
.zweispalt > div:last-child  { padding-right: 0; }
.zweispalt-titel { font-size: 14px; font-weight: var(--gewicht-halb); }
.zweispalt-text  { font-size: 12.5px; color: var(--text-hell-meta); margin-top: 3px; }

/* --- Maße und „Gut zu wissen" -------------------------------------------- */
/* .produkt-unten gibt es nicht mehr: Maßkasten und „Gut zu wissen" stehen
   seit dem 04.08.2026 in ihrer jeweiligen Spalte, nicht in einem zweiten
   Raster darunter. Dessen erste Zeile war so hoch wie die HÖHERE der beiden
   Spalten — unter den Bildern klaffte dadurch eine Lücke von mehreren hundert
   Pixeln, und sie wuchs mit jeder Zeile, die der Kaufblock dazubekam.        */
.produkt-block { margin-top: 56px; }
.block-titel {
  font-size: var(--t-mikro);
  font-weight: var(--gewicht-halb);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0 0 14px;
}
.masse-kasten {
  border: 1px solid var(--linie);
  padding: 26px 30px;
  background: var(--feld-grund);
}
.masse-liste { display: flex; flex-direction: column; gap: 12px; font-size: 14px; margin: 0; }
.masse-zeile {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--linie-zart);
  padding-bottom: 10px;
}
.masse-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.masse-zeile dt { color: var(--text-hell-weich); }
.masse-zeile dd { margin: 0; font-weight: var(--gewicht-halb); text-align: right; }
/* Eine fehlende Angabe darf nicht wie eine vorhandene aussehen.            */
.masse-offen { color: var(--handlung); }

/* --- „Design by" ---------------------------------------------------------
   Nur an Stuecken aus eigenem Entwurf, und nur im Herstellerkasten: rechts
   neben der Anschrift, in der Flaeche, die dort vorher leer war.

   Das Zeichen ist LEER beschriftet (alt=""): Der Name steht als Text
   daneben, eine Wiederholung im Vorlesetext waere nur Rauschen.           */
.hersteller-kopf { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }

.design-marke {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-hell-weich);
  flex-shrink: 0;
}
.design-marke img { width: auto; height: 44px; }

/* DER FREMDE ENTWURF IN DERSELBEN FLAECHE (18.08.2026).
   Gleiche Bauart, gleiche Hoehe des Zeichens — nur der Name traegt Gewicht,
   weil er hier die Auskunft IST und nicht wie bei „Design by" eine
   Wiederholung der Marke, die zwei Zeilen weiter links ohnehin steht.

   `max-width` haelt lange Namen davon ab, der Anschrift die Breite zu nehmen:
   Ein Urhebername kann alles zwischen „Ela" und einer halben Zeile sein.     */
.design-fremd { max-width: 200px; }
.design-fremd strong { font-weight: var(--gewicht-halb); }
.design-plattform { opacity: .7; font-size: 11px; }

/* ── Entwurf & Lizenz ──────────────────────────────────────────────────────
   Der Kasten uebernimmt die Huelle des Herstellerkastens (.masse-kasten) und
   setzt nur, was in ihm anders liegt. Ein eigener Rahmen daneben haette zwei
   Kaesten mit verschiedenen Kanten untereinander ergeben.                    */
.lizenz-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.lizenz-logo { width: auto; height: 34px; flex-shrink: 0; }
.lizenz-name {
  margin: 0;
  font-size: 15px;
  font-weight: var(--gewicht-halb);
}
.lizenz-kurz {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
}
/* Der vorgegebene Wortlaut steht als Zitat da — eingerueckt und mit einer
   Kante davor, wie der Einschub im Rechtstext. Er ist nicht unser Satz,
   sondern die Bedingung, und das soll man sehen, ohne es zu lesen.          */
.lizenz-hinweis {
  margin: 0 0 12px;
  padding-left: 14px;
  border-left: 2px solid #EADFD7;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-hell-weich);
}
.lizenz-wege {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.8;
}
.lizenz-eigenes {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid #F0E6DE;
  font-size: 12px;
  line-height: 1.65;
  color: var(--text-hell-weich);
}

/* Auf dem Handy stapeln sich Zeichen und Name, wie im Herstellerkasten.     */
@media (max-width: 560px) {
  .lizenz-kopf { flex-wrap: wrap; }
}

/* Auf dem Handy steht das Zeichen unter der Anschrift statt daneben --
   nebeneinander bliebe fuer die Adresse zu wenig Breite.                  */
@media (max-width: 560px) {
  .hersteller-kopf { flex-direction: column; }
  .design-marke { flex-direction: row; align-self: flex-start; text-align: left; }
}

/* Und eine geschätzte nicht wie eine gemessene. Kleiner als die Zahl, aber
   nicht so blass, dass man darüber hinwegliest — die Angabe steht auch im
   Pflichtblock nach Art. 19 VO (EU) 2023/988.                              */
/* Der eingerückte Block in einem Rechtstext — im Mustertext der
   Widerrufsbelehrung die Anschrift, an die der Widerruf zu richten ist. Sie
   ist dort ein Einschub und keine Fortsetzung des Satzes; die Einrückung sagt
   das, ohne ein Wort dafür zu brauchen.                                     */
.rechtstext-block {
  margin-left: 24px;
  font-style: normal;
}

/* Die Aufzählung im Hinweiskasten des Adminbereichs.                       */
.testwert-liste { margin: 10px 0 12px; padding-left: 20px; }
.testwert-liste li { margin-bottom: 4px; }

.masse-geschaetzt {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid var(--handlung);
  border-radius: 999px;
  font-size: .74rem;
  font-weight: var(--gewicht-halb);
  color: var(--handlung);
  white-space: nowrap;
  vertical-align: 1px;
}

.wissen { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.wissen-zeile {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  font-size: 14px;
  line-height: 1.65;
}
.wissen-zeile dt { font-weight: var(--gewicht-halb); }
.wissen-zeile dd { margin: 0; color: var(--text-hell-weich); }

/* --- Produktsicherheit ---------------------------------------------------
   Übernimmt bewusst Raster, Kasten und Titelzeile von „Maße" darüber: Die
   Pflichtangaben sollen nicht wie ein aufgeklebtes Rechtsschild wirken,
   sondern wie der nächste Abschnitt derselben Seite.                       */
/* KEIN EIGENER SEITENRAND MEHR. Die Sektion war bis zum 04.08.2026 eine
   Vollbreite unter der Seite und trug deren Ränder (56px var(--seitenrand) 0).
   Seit Hersteller und Sicherheitshinweise in ihrer Spalte stehen, schmälerte
   dieses Polster den Herstellerkasten gegenüber dem Maßkasten darüber — und
   die 56px oben kamen zum Abstand von .produkt-block noch dazu.
   .produktsicherheit-innen ist mit dem alten Raster entfallen.              */
.produktsicherheit { padding: 0; }
.hersteller-anschrift {
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--linie-zart);
  font-size: 14px;
  line-height: 1.7;
}
.sicherheitsliste {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-hell-weich);
}
.sicherheit-mehr { margin: 18px 0 0; font-size: 14px; }

/* --- Stimmungsband: ein breites Bild mit Text darauf --------------------- */
.stimmungsband { position: relative; margin-top: 64px; overflow: hidden; }
.stimmungsband > img { width: 100%; height: 440px; object-fit: cover; }
.stimmungsband::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--grund-dunkel-rgb), .92) 0%,
              rgba(var(--grund-dunkel-rgb), .60) 40%, rgba(var(--grund-dunkel-rgb), .05) 78%);
}
.stimmungsband-text {
  position: absolute;
  left: var(--seitenrand);
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 40ch;
}
.stimmungsband-text .kicker { margin-bottom: 16px; }
.stimmungsband-text h2 {
  margin: 0 0 16px;
  font-size: 34px;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--text-dunkel-titel);
}
.stimmungsband-text p { margin: 0; font-size: 15.5px; line-height: 1.78; color: var(--text-dunkel-lead); max-width: 38ch; }

/* --- Dunkles Schlussband mit Aufforderung -------------------------------- */
.aufruf {
  position: relative;
  margin-top: 70px;
  background: var(--grund-dunkel);
  color: var(--text-dunkel);
  overflow: hidden;
}
/* Folgt das Band unmittelbar auf ein Stimmungsband, entfällt der Abstand:
   beide sind dunkel, dazwischen stünde sonst ein heller Streifen quer über
   die Seite. Zwei dunkle Flächen gehen ohne Fuge ineinander über.          */
.stimmungsband + .aufruf { margin-top: 0; }
.aufruf::before {
  content: "";
  position: absolute;
  left: 24%;
  top: -60%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(52px);
  pointer-events: none;
  background: radial-gradient(circle, rgba(var(--bluete-pfirsich-rgb), .24) 0%, rgba(var(--bluete-pfirsich-rgb), 0) 66%);
  animation: schweben2 32s ease-in-out infinite;
}
.aufruf-innen {
  position: relative;
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 56px;
  padding: 52px var(--seitenrand);
  /* Mittig ist hier der Normalfall: Auf der Produktseite steht rechts nur
     eine Knopfreihe, die neben dem Textblock schweben soll.                */
  align-items: center;
}
/* Steht rechts dagegen eine Karte mit eigenem Rahmen, beginnen beide Spalten
   oben. Sonst hängt die Karte über dem Text und die Oberkanten zeigen
   nirgendwohin. `:has()` statt einer zweiten Klasse im Markup — Browser ohne
   Unterstützung bleiben bei der mittigen Fassung, die nicht falsch ist.    */
.aufruf-innen:has(.aufruf-karte) { align-items: start; }

.aufruf h2 {
  margin: 0 0 12px;
  font-size: 30px;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--text-dunkel-titel);
}
/* 30 px unter dem Absatz: Der Knopf stand vorher direkt an der letzten Zeile
   und sah aus, als gehöre er noch zum Satz.                                 */
.aufruf p { margin: 0 0 30px; font-size: 15.5px; line-height: 1.75; color: var(--text-dunkel-lead); max-width: 44ch; }
.aufruf-knoepfe { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.aufruf-tel {
  color: var(--text-dunkel-nav);
  font-size: 15px;
  border-bottom: 1px solid rgba(207,194,188,.35);
  padding-bottom: 3px;
}
.aufruf-tel:hover { color: var(--text-dunkel); }

/* --- Passt dazu ----------------------------------------------------------- */
.passt-dazu { padding: 64px var(--seitenrand) 0; }
.passt-dazu .abschnitt-kopf { padding: 0 0 32px; }
.passt-dazu .kachel-raster { padding: 0; gap: 34px; grid-template-columns: repeat(3, 1fr); }

/* --- DAZU PASSEND — das Zubehör zu diesem Stück -------------------------
   Bewusst KEINE Blattkacheln wie bei „Passt dazu" darunter. Das sind
   Empfehlungen und dürfen sich ins Sortiment einreihen; hier steht etwas, das
   zu DIESEM Stück gehört und in einem Zug mitgekauft wird. Eine Zeile mit
   Bild, Preis und Knopf liest sich als Zusatz, ein Kachelraster als
   „schau dich weiter um".                                                 */
.dazu-passend { padding: 64px var(--seitenrand) 0; }
.dazu-passend .abschnitt-kopf { padding: 0 0 24px; }

.zubehoer-reihe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.zubehoer-stueck {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 14px 18px;
  background: var(--grund-platte);
  border-radius: var(--radius-klein);
}
/* Die Blattform, wie überall — das Bild ist das einzige Element hier, das
   sie tragen kann, ohne dass die Zeile unruhig wird.                      */
.zubehoer-bild {
  display: block;
  width: 96px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--blatt);
  background: rgba(var(--licht, 143,169,138), .16);
}
.zubehoer-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zubehoer-text { min-width: 0; }
.zubehoer-name {
  display: block;
  font-size: 17px;
  font-weight: var(--gewicht-halb);
  color: var(--text-hell);
  text-decoration: none;
}
.zubehoer-name:hover { text-decoration: underline; }
.zubehoer-kurz {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-hell-weich);
}
/* Cormorant kursiv trägt Zahlen und Preise — dieselbe Regel wie an der
   Kachel und auf der Produktseite.                                        */
.zubehoer-preis {
  margin: 6px 0 0;
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 20px;
  color: var(--text-hell);
}
.zubehoer-kauf { margin: 0; }

@media (max-width: 900px) {
  .dazu-passend { padding: 44px var(--seitenrand-handy) 0; }
  /* Der Knopf rutscht unter den Text und über die volle Breite: Nebeneinander
     bliebe für den Namen keine Zeile mehr übrig.                           */
  .zubehoer-stueck { grid-template-columns: 72px 1fr; gap: 14px; }
  .zubehoer-bild { width: 72px; }
  .zubehoer-kauf { grid-column: 1 / -1; }
  .zubehoer-kauf .knopf-gold { display: block; width: 100%; text-align: center; }
}

/* ==========================================================================
   HANDY — Shop und Produkt
   ========================================================================== */
@media (max-width: 900px) {
  .filterreihe { padding: 18px var(--seitenrand-handy) 0; gap: 8px; }
  /* Die beiden Ausnahmen für die Sortierung sind entfallen: Sie stand hier
     schon immer links, jetzt tut sie das überall.                          */
  .sortierzeile { padding: 18px var(--seitenrand-handy) 0; }
  .sortierzeile + .kachel-raster.drei { padding-top: 14px; }

  .kachel-raster.drei { grid-template-columns: 1fr 1fr; gap: 24px 18px; padding: 22px var(--seitenrand-handy) 8px; }
  .kachel-raster.drei .kachel-name { font-size: 14px; }
  /* Auf schmalen Geraeten faellt die Ausfuehrungszeile weg -- die Nummer
     geht mit ihr. Sie allein stehen zu lassen waere die unwichtigere
     Haelfte an der einzigen Stelle, an der der Platz knapp ist. */
  .kachel-meta, .kachel-nummer { display: none; }

  .merkmale { grid-template-columns: 1fr; margin: 34px var(--seitenrand-handy); }
  .merkmal  { padding: 20px 0; border-left: 0; border-top: 1px solid var(--linie); }
  .merkmal:first-child { border-top: 0; }

  .brotkrume { padding: 14px var(--seitenrand-handy) 0; }
  .produkt { grid-template-columns: 1fr; gap: 28px; padding: 18px var(--seitenrand-handy) 0; }

  /* DIE KAUFENTSCHEIDUNG ZUERST, DIE PFLICHTANGABEN DANACH.

     Im Markup steht links ein Wrapper (`.produkt-medien`) mit Bühne, Galerie,
     Maßtabelle und Herstellerblock, rechts `.produkt-spalte` mit Titel, Preis,
     Ausführung und Kaufknopf. Am Schreibtisch stehen beide nebeneinander und
     die Reihenfolge fällt nicht auf. Einspaltig lief der ganze linke Stapel
     zuerst durch — gemessen am 15.08.2026: Überschrift bei 1542px, Preis bei
     1595px, „In den Warenkorb" bei 2707px. Das sind über drei Bildschirme,
     und dazwischen liegt die vollständige Postanschrift des Herstellers.

     `display: contents` löst den Wrapper auf, ohne ihn zu entfernen: Seine
     Kinder werden selbst zu Rasterfeldern und lassen sich einzeln sortieren.
     Der Wrapper ist ein reines <div> ohne eigene Bedeutung, deshalb ist das
     hier unbedenklich — bei einem <section> mit Überschrift wäre es das
     nicht, denn `contents` nimmt dem Element seine Rolle.

     Die Maße bleiben bewusst VOR dem Herstellerblock: Sie helfen beim Kauf,
     die Anschrift erfüllt eine Pflicht (GPSR) und gehört ans Ende. */
  .produkt-medien { display: contents; }
  .produkt .produkt-buehne  { order: 1; }
  .produkt .produkt-galerie { order: 2; }
  .produkt .produkt-spalte  { order: 3; }
  .produkt .produkt-block   { order: 4; }
  .produkt .produktsicherheit { order: 5; }

  /* Der Abstand kommt ab jetzt vom Raster. Solange die Blöcke im Wrapper
     lagen, trennte sie `.produkt-block { margin-top: 28px }` (Zeile darunter)
     — als eigene Rasterfelder bekommen sie zusätzlich den `gap: 28px` von
     `.produkt` und stünden mit 56px doppelt so weit auseinander. */
  .produkt .produkt-block { margin-top: 0; }

  /* Die mitlaufende Kaufleiste. Sie erscheint erst, wenn site.js das
     hidden-Attribut nimmt — also nachdem die eigentliche Bestellzeile nach
     oben aus dem Bild gescrollt ist. Vorher wäre sie eine Dublette dessen,
     was ohnehin dasteht.

     `env(safe-area-inset-bottom)` hält sie auf iPhones über dem Balken der
     Gestensteuerung; ohne das läge der Knopf halb darunter. */
  .kaufleiste:not([hidden]) {
    display: flex;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 10px var(--seitenrand-handy);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--grund-hell);
    border-top: 1px solid var(--linie);
    box-shadow: 0 -6px 24px rgba(36, 41, 51, .09);
  }
  .kaufleiste-preis { font-size: 17px; font-weight: var(--gewicht-halb); white-space: nowrap; }
  .kaufleiste .knopf-voll { flex: 1; }

  /* Platz am Seitenende, damit die Leiste nichts verdeckt — sonst läge der
     letzte Absatz der Sicherheitshinweise dauerhaft darunter. */
  body:has(.kaufleiste:not([hidden])) { padding-bottom: 72px; }
  /* Auf dem Telefon steht ohnehin alles untereinander -- 56px waeren dort ein Loch. */
  .produkt-block { margin-top: 28px; }
  .produktsicherheit { padding: 18px var(--seitenrand-handy) 0; }
  /* Das Licht hinter der Bühne ragte mit -22px zwei Pixel über den rechten
     Seitenrand hinaus und machte die Seite querscrollbar. Es bleibt jetzt
     innerhalb des Seitenrands von 20px.                                    */
  .produkt-buehne .kachel-licht { inset: -14px; filter: blur(18px); }
  .produkt-spalte h1    { font-size: var(--t-h1-handy); }
  .produkt-spalte h1 em { font-size: 34px; }
  .produkt-preis        { font-size: 28px; }
  /* Die Korbzeile bricht am Handy in zwei Reihen: Bild und Text oben,
     Menge, Summe und Entfernen darunter.                                   */
  .korbseite { grid-template-columns: 1fr; gap: 28px; padding: 26px var(--seitenrand-handy) 40px; }
  .korb-zeile {
    grid-template-columns: 72px 1fr auto;
    grid-template-areas: "bild wort summe" "menge menge weg";
    gap: 12px 16px;
  }
  .korb-bild  { grid-area: bild; width: 72px; }
  .korb-wort  { grid-area: wort; }
  .korb-summe { grid-area: summe; font-size: 19px; min-width: 0; }
  .korb-menge { grid-area: menge; }
  .korb-weg   { grid-area: weg; justify-self: end; }

  /* VIER FELDER, DIE DIE BREITE FÜLLEN — 26.08.2026.

     Hier stand `grid-template-columns: repeat(4, 1fr)`. Die Reihe ist seit
     dem 18.08.2026 ein Flex-Container; eine Rasterangabe tut darin nichts.
     Wirksam war nur die Zeile darunter, die ab dem fünften Feld abschneidet
     — die Breite je Feld blieb bei einem Sechstel und damit zu schmal.

     Am Handy wird nicht gerollt: Was über dem vierten Feld liegt, ist
     ausgeblendet, also gibt es auch nichts zu schieben. Deshalb fallen die
     Pfeile hier ganz weg statt nur ihren Platz zu behalten.               */
  .produkt-galerie > * { flex: 0 0 calc((100% - 3 * 10px) / 4); }
  /* `> *`, nicht `a`: Seit es leere Plätze gibt, sind nicht mehr alle
     Felder Verweise — sonst blieben die Platzhalter als fünfte Spalte in
     einem vierspaltigen Raster stehen.                                    */
  .produkt-galerie > :nth-child(n+5) { display: none; }
  .galerie-pfeil,
  .galerie-pfeil[hidden] { display: none; }

  /* Auf dem Handy steht über der Größenreihe nur „Größe“ — die Handyfassung
     des Entwurfs lässt den Zusatz rechts weg. Der gewählte Farbname bleibt,
     den zeigt sie ausdrücklich.                                             */
  .wahl-neben { display: none; }

  .stimmungsband { margin-top: 34px; }
  .stimmungsband > img { height: 320px; }
  .stimmungsband-text  { left: var(--seitenrand-handy); right: var(--seitenrand-handy); max-width: none; }
  .stimmungsband-text h2 { font-size: 24px; }

  .aufruf { margin-top: 40px; }
  .aufruf-innen { grid-template-columns: 1fr; gap: 24px; padding: 34px var(--seitenrand-handy); }
  .aufruf h2 { font-size: 24px; }

  .passt-dazu { padding: 34px var(--seitenrand-handy) 0; }
  .passt-dazu .kachel-raster { grid-template-columns: 1fr 1fr; gap: 18px; }

  .luft-unten { padding-bottom: 34px; }
}

/* ==========================================================================
   FARBPROBEN — Anzeige zur Farbauswahl
   Annäherung, keine Farbverbindlichkeit: Der Name steht immer daneben, und
   PRODUKT_GEMEINSAM['Farbtreue'] sagt es auf jeder Produktseite.
   Die Klassennamen erzeugt farbklasse() aus dem Farbnamen in daten.php.
   Wer dort eine Farbe ergänzt, ergänzt hier eine Zeile — sonst bleibt die
   Probe grau, und das fällt sofort auf.
   ========================================================================== */
.farb-reihe .probe-rot            { background: #9B2226; }
.farb-reihe .probe-silber         { background: linear-gradient(135deg,#D8D8DC,#A8A9AE); }
.farb-reihe .probe-champagnergold { background: linear-gradient(135deg,#E8CE9A,#C9A45C); }
.farb-reihe .probe-ember          { background: linear-gradient(135deg,#C4713F,#8E4B26); }
.farb-reihe .probe-mocca          { background: #6B4B3A; }
.farb-reihe .probe-weiss-matt     { background: #F4F1EC; }
.farb-reihe .probe-weiss-seidig   { background: linear-gradient(135deg,#FFFDF8,#EFE7DC); }
.farb-reihe .probe-weiss          { background: #F4F1EC; }
.farb-reihe .probe-gold           { background: linear-gradient(135deg,#DFBE72,#B08A34); }
.farb-reihe .probe-violett        { background: var(--bluete-pflaume); }

/* Sehr helle Proben brauchen eine kräftigere Kante, sonst verschwinden sie
   auf dem Seitengrund.                                                     */
.farb-reihe .probe-weiss,
.farb-reihe .probe-weiss-matt,
.farb-reihe .probe-weiss-seidig { box-shadow: 0 0 0 1px var(--feld-rand); }

/* Die gewählte Probe trägt den Goldring — auch die hellen, deren eigene
   Kante sonst gewönne (gleiche Spezifität, aber weiter unten).            */
.farb-reihe input:checked + label.probe-weiss,
.farb-reihe input:checked + label.probe-weiss-matt,
.farb-reihe input:checked + label.probe-weiss-seidig {
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 4px var(--grund-hell), 0 0 0 5.5px var(--gold);
}

/* ==========================================================================
   NUR FÜR VORLESESOFTWARE
   Sichtbar für Screenreader, unsichtbar am Bildschirm. Nicht display:none —
   das nähme den Text auch der Vorlesesoftware.
   ========================================================================== */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   SICHTBARER PRÜFHINWEIS — offene fachliche Klärung
   Er soll auffallen. Wer ihn übersieht, veröffentlicht eine Halbwahrheit.
   ========================================================================== */
/* Hinweiskasten: Zeichen links, Titelzeile und Text rechts. Die Spalte für
   das Zeichen ist `auto` breit — dadurch bleibt der Text bündig, egal ob dort
   ein „!“ oder ein „i“ steht.                                               */
.hinweis {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--linie);
  background: var(--grund-hell);
  padding: 16px 20px;
  margin-bottom: 34px;
}
.hinweis-zeichen {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #C9B3A3;
  color: #8A7B6E;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--gewicht-halb);
  margin-top: 2px;
  flex: none;
}
.hinweis-titel {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: var(--gewicht-halb);
}
.hinweis-text { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text-hell-weich); }
/* Was vor dem Livegang erledigt werden muss, trägt Gold und einen warmen
   Grund — es soll beim Überfliegen auffallen.                              */
.hinweis-warnend {
  border: 0;
  border-left: 2px solid var(--gold);
  background: var(--handlung-zart);
}
/* Im warnenden Kasten ist der Grund --handlung-zart (#F7EDF0), nicht die
   Seite — dort kommt --bronze nur auf 4,25:1. Eine Spur dunkler genuegt und
   haelt den Farbton. Auf dem schlichten Hinweis bleibt es bei --bronze, dort
   sind es 4,7:1. Farbpruefung 03.08.2026. */
.hinweis-warnend .hinweis-titel { color: #7B5A3E; }   /* auf #F7EDF0 5,4:1 */
.hinweis-warnend .hinweis-zeichen { border-color: var(--gold); color: var(--bronze); font-size: 12px; }

/* ==========================================================================
   STUFE 5 — INHALTSSEITEN
   Quellen: service.html, rechtstexte.html, faq.html, kontakt.html,
            widerruf.html, ueber-uns.html, neu-und-angebote.html, 404.html
   ========================================================================== */

/* --- Zweispalter mit klebendem Verzeichnis ------------------------------- */
.inhaltsseite {
  display: grid;
  grid-template-columns: var(--inhaltsspalte) 1fr;
  gap: 56px;
  padding: 48px var(--seitenrand) 64px;
  align-items: start;
}
/* Ohne Verzeichnis fällt die schmale erste Spalte weg — sonst quetschte sich
   der Lesetext in die 220 Pixel, die für das Verzeichnis gedacht waren.     */
.inhaltsseite-schmal { grid-template-columns: 1fr; }
.verzeichnis-fussnote {
  border-top: 1px solid var(--linie);
  margin: 24px 0 0;
  padding-top: 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-hell-meta);
}

/* Abschluss der Rechtsseiten: Frage links, Verweise rechts, darüber eine
   Linie. Bei wenig Platz rutschen die Verweise unter die Frage.            */
/* Unten 48 px, nicht null: Die Zeile saß sonst direkt auf der Kante zum
   dunklen Fuß und wirkte, als wäre sie hineingerutscht. Sie gehört zur
   Rechtsseite, nicht zum Fuß — der Abstand sagt das.                      */
.rechts-abschluss { padding: 56px var(--seitenrand) 48px; }
.rechts-abschluss-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--linie);
  padding-top: 26px;
  flex-wrap: wrap;
}
.rechts-abschluss-frage { margin: 0; font-size: 14px; color: var(--text-hell-weich); }
.rechts-abschluss-wege { display: flex; gap: 22px; font-size: 13.5px; margin: 0; flex-wrap: wrap; }
.seitenverzeichnis { position: sticky; top: 32px; }
.seitenverzeichnis .block-titel { margin-bottom: 16px; }
.verzeichnis-liste { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.verzeichnis-liste a {
  display: block;
  padding: 7px 0 7px 14px;
  border-left: 1px solid var(--linie);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-hell-weich);
}
.verzeichnis-liste a:hover {
  border-left-color: var(--handlung);
  color: var(--handlung);
}
/* Zweite Fassung für Verzeichnisse mit Farbpunkt und Anzahl — die FAQ nutzt
   sie, die Rechts- und Serviceseiten bleiben beim schlichten Strich. Der
   Punkt entscheidet, nicht die Seite.                                       */
.verzeichnis-liste a:has(.punkt) {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0;
  border-left: 0;
}
.verzeichnis-liste a:has(.punkt):hover { color: var(--handlung); }
.verzeichnis-liste li:has(.punkt) + li:has(.punkt) { margin-top: 12px; }
.verzeichnis-liste .punkt { width: 7px; height: 7px; }
/* `margin-left: auto` schiebt die Zahl an den rechten Rand der Spalte, ohne
   dass die Titel dafür alle gleich lang sein müssten.                       */
.verzeichnis-zahl {
  margin-left: auto;
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 15px;
  color: var(--bronze);
}

/* --- Fließtext ------------------------------------------------------------
   Die Lesespalte ist begrenzt: über 64 Zeichen findet das Auge den
   Zeilenanfang nicht mehr zuverlässig.                                     */
.fliess { max-width: var(--lesespalte); }

/* --- Seiten, die kein Fließtext sind ------------------------------------
   Bestellansicht, Bestätigung und Verwaltung tragen Kästen, Tabellen und
   mehrspaltige Blöcke. In der Lesespalte (64 Zeichen ≈ 670 px) blieb davon
   die Hälfte des Platzes ungenutzt — `.pruefspalten` bekam 202 px je Spalte
   statt 392 px, und rechts war die Seite leer. Am 03.08.2026 gemeldet.

   DER MECHANISMUS IST UMGEDREHT, NICHT ABGESCHALTET: Die Begrenzung wandert
   vom Behälter auf den Fließtext darin. Absätze, Überschriften und Listen
   lesen sich weiter über 64 Zeichen — was ein Kasten, eine Tabelle oder ein
   Raster ist, nimmt den Platz, für den es gebaut wurde.

   `> ` ist Absicht: Ein Absatz INNERHALB einer Karte gehört zur Karte und
   bekommt seine Breite von ihr, nicht von hier. */
.fliess-weit { max-width: none; }
.fliess-weit > p,
.fliess-weit > h2,
.fliess-weit > h3,
.fliess-weit > ul,
.fliess-weit > ol,
.fliess-weit > .meldung,
.fliess-weit > .hinweis { max-width: var(--lesespalte); }
.fliess h2 {
  font-size: var(--t-h2);
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 44px 0 0;
  scroll-margin-top: 24px;
}
.fliess h2:first-child { margin-top: 0; }
.fliess h3 { font-size: var(--t-h3); font-weight: var(--gewicht-halb); margin: 28px 0 0; }
.fliess p  { margin: 14px 0 0; color: var(--text-hell-weich); }
.fliess ul, .fliess ol { margin: 14px 0 0; padding-left: 20px; color: var(--text-hell-weich); }
.fliess li { margin-top: 7px; }
.fliess a  { text-decoration: underline; text-underline-offset: .18em; }
.fliess strong { color: var(--text-hell); font-weight: var(--gewicht-halb); }
.fliess dl { margin: 14px 0 0; }
.fliess dt { font-weight: var(--gewicht-halb); margin-top: 14px; }
.fliess dd { margin: 4px 0 0; color: var(--text-hell-weich); }

/* --- Merkzettel: vier Töne, eine Form -------------------------------------
   Auf allen vier Flächen tragen nur --text-hell und --text-hell-weich; die
   gedämpften Töne fallen auf Rosé unter AA. Deshalb stehen sie hier fest.  */
.merkzettel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px 20px;
  margin: 24px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-hell-weich);
  border-left: 2px solid var(--gold);
  background: #FDF6EC;
}
.merkzettel strong { display: block; color: var(--text-hell); font-weight: var(--gewicht-halb); }
.merkzettel-zeichen { font-size: 15px; line-height: 1.5; color: var(--text-hell); }
.merkzettel-rose   { border-left-color: var(--handlung);      background: #FAECEF; }
.merkzettel-petrol { border-left-color: var(--bluete-petrol); background: #EDF3F5; }
.merkzettel-still  { border: 1px solid var(--linie); border-left-width: 1px; background: var(--feld-grund); }

/* --- Faktenstreifen: drei Kacheln, durch eine Haarlinie getrennt --------- */
.fakten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linie);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
}
.fakt {
  background: var(--feld-grund);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
}
.fakt-titel { font-size: 15px; font-weight: var(--gewicht-halb); }
.fakt-text  { font-size: 13.5px; line-height: 1.7; color: var(--text-hell-weich); }
.fakt-wert  { font-family: var(--schrift-kursiv); font-style: italic; font-size: 24px; }
a.fakt:hover .fakt-titel { text-decoration: underline; }

/* --- Häufige Fragen: aufklappbar, ohne Skript ---------------------------- */
.frage {
  border-bottom: 1px solid var(--linie);
}
.frage summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
  font-size: 16px;
  font-weight: var(--gewicht-halb);
  cursor: pointer;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+";
  flex: none;
  font-size: 19px;
  font-weight: var(--gewicht-leicht);
  color: var(--bronze);
  line-height: 1;
}
.frage[open] summary::after { content: "–"; }
.frage[open] summary { color: var(--handlung); }
.frage-antwort { padding: 0 0 20px; margin: 0; color: var(--text-hell-weich); font-size: 15px; }
.frage-antwort + .frage-antwort { padding-top: 0; margin-top: -8px; }

/* --- Formulare ------------------------------------------------------------
   Ein Feld, ein Etikett, ein Hinweis. Pflichtfelder stehen dran, nicht als
   Sternchen — ein Sternchen muss man erst irgendwo nachschlagen.
   ========================================================================== */
.formular { max-width: 46rem; }
.feld { margin-top: 22px; }
.feld-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.feld-kopf label { font-size: 14px; font-weight: var(--gewicht-halb); }
.feld-pflicht {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--handlung);
  font-weight: var(--gewicht-halb);
}
.feld-frei { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-hell-meta); }
.feld input,
.feld textarea,
.feld select {
  width: 100%;
  box-sizing: border-box;
  margin-top: 9px;
  padding: 13px 16px;
  border: 1px solid var(--feld-rand);
  border-radius: var(--radius-klein);
  background: var(--grund-weiss);
  font: inherit;
  font-size: 15px;
  color: var(--text-hell);
}
.feld textarea { min-height: 160px; resize: vertical; line-height: 1.7; }
.feld input:focus-visible,
.feld textarea:focus-visible,
.feld select:focus-visible { outline: var(--fokus); outline-offset: 2px; border-color: var(--gold); }
.feld-hinweis { font-size: 12.5px; color: var(--text-hell-meta); margin: 7px 0 0; }
/* Derselbe Platz, andere Farbe: Steht dort eine Fehlermeldung statt des
   Hinweises, springt nichts um — die Zeile war schon da.                   */
.feld-fehler { color: var(--zustand-fehler); }
/* Ein fehlerhaftes Feld muss man SEHEN. Vorher wechselte nur die Farbe eines
   1-Pixel-Rahmens — auf hellem Grund und mit dem Sammelhinweis weit oben war
   das zu wenig, um das Feld zu finden. Jetzt trägt der Rahmen zwei Pixel und
   das Feld einen sehr blassen Grund.                                        */
.feld [aria-invalid="true"] {
  border-color: var(--zustand-fehler);
  border-width: 2px;
  background: color-mix(in srgb, var(--zustand-fehler) 5%, transparent);
}

/* Die Aufzählung im Sammelhinweis über dem Formular: Was fehlt, und wo.     */
.fehlerliste { margin: 6px 0 0; padding-left: 20px; }
.fehlerliste li { margin-bottom: 4px; }
.fehlerliste a { font-weight: var(--gewicht-halb); }
/* Die Datenschutzzeile gehört nicht zu einem einzelnen Feld und braucht
   deshalb den Abstand eines eigenen Blocks.                                */
.feld-datenschutz { margin-top: 22px; line-height: 1.7; max-width: 56ch; }

.feld-haken { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin-top: 22px; }
.feld-haken input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--handlung); }
.feld-haken label { font-size: 13.5px; line-height: 1.65; color: var(--text-hell-weich); }

.formular-fuss { display: flex; align-items: center; gap: 20px; margin-top: 28px; flex-wrap: wrap; }
.formular-fuss .knopf-voll { flex: none; padding-inline: 34px; }

/* Rückmeldung nach dem Absenden.                                           */
.meldung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 22px;
  margin: 0 0 28px;
  border-left: 2px solid var(--zustand-gut);
  background: #ECF3EF;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-hell-weich);
}
.meldung strong { display: block; color: var(--text-hell); }
.meldung-fehler { border-left-color: var(--zustand-fehler); background: #FAECEF; }

/* --- Schrittanzeige (Widerruf) -------------------------------------------
   Zwei Reihen in einem Raster: oben Kreise und Verbindungslinien, darunter
   die Beschriftungen. Als Flex-Zeile stünden die Wörter neben den Kreisen und
   schöben sie auseinander — im Entwurf stehen sie darunter.
   ------------------------------------------------------------------------- */
.schritte {
  display: grid;
  /* Feste 26 px für die Kreise: bei `auto` zieht die Beschriftung aus der
     zweiten Reihe die Spalte auf ihre eigene Breite auf.                    */
  grid-template-columns: 26px 1fr 26px 1fr 26px 1fr;
  gap: 0 14px;
  align-items: center;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}
.schritt-zahl {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--feld-rand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #8A7B6E;                 /* auf --grund-hell 4,9:1 */
  flex: none;
}
.schritt-linie { height: 1px; background: var(--feld-rand); }
/* Jedes Wort steht unter seinem Kreis UND der folgenden Linie — sonst zieht
   es die schmale Kreisspalte auf seine eigene Breite auf.                   */
.schritt-wort  {
  grid-column: span 2;
  font-size: 12.5px;
  color: var(--text-hell-meta);
  padding-top: 9px;
}

/* Erledigt: dunkel gefüllt. Jetzt: in der Handlungsfarbe. Offen: nur Rand. */
.schritt-fertig .schritt-zahl { background: var(--text-hell); border-color: var(--text-hell); color: var(--grund-hell); }
.schritt-fertig + .schritt-linie { background: var(--text-hell); }
.schritt-jetzt  .schritt-zahl { background: var(--handlung); border-color: var(--handlung); color: var(--handlung-auf); }
.schritt-wort-jetzt { color: var(--text-hell); font-weight: var(--gewicht-halb); }

/* --- Formularseite mit Seitenspalte -------------------------------------- */
.formularseite {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 56px;
  padding: 48px var(--seitenrand) 64px;
  align-items: start;
}
.formularseite .formular { max-width: none; }
.seitenspalte { display: flex; flex-direction: column; gap: 22px; }

.karte { border: 1px solid var(--linie); background: var(--feld-grund); padding: 26px 28px; }
.karte-warm { background: #FCF3ED; padding: 24px 28px; }
.karte-titel {
  font-size: var(--t-mikro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bronze);           /* auf #FFFDFB 4,8:1, auf #FCF3ED 4,6:1 */
  font-weight: var(--gewicht-halb);
  margin: 0 0 16px;
}
.karte p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.72; color: var(--text-hell-weich); }
.karte p:last-child { margin-bottom: 0; }
/* Der Schlusssatz einer Karte, abgesetzt durch eine Linie.
   ABSTAND OBERHALB DER LINIE, nicht nur darunter: Ohne ihn saß die Linie
   unmittelbar am Element davor — in der Kasse am Gutschein-Eingabefeld und
   am Knopf „Einlösen", als gehörte sie dazu. Die Trennlinien der
   Bestellübersicht darüber (Zwischensumme, Gesamt) haben Luft auf beiden
   Seiten; hier fehlte sie auf einer.                                       */
/* `p.karte-nachsatz` UND NICHT `.karte-nachsatz`: Zwei Zeilen höher steht
   `.karte p { margin: 0 0 14px; }`. Das ist eine Klasse PLUS ein Element und
   wiegt damit schwerer als eine Klasse allein — sein `margin-top: 0` schlug
   den Abstand hier wortlos tot, obwohl die Datei längst ausgeliefert war.
   Mit dem `p` davor stehen beide gleich schwer, und die spätere Regel
   gewinnt.                                                                  */
p.karte-nachsatz {
  border-top: 1px solid var(--linie-zart);
  margin-top: 22px;
  padding-top: 14px;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--text-hell-weich);
}
.karte-daten { font-size: 14.5px; line-height: 1.9; margin: 0; }
/* Überschrift einer Karte, wenn sie keine Rubrik ist, sondern eine Sache
   benennt („Geschenkgutschein"). Deshalb gemischte Schreibung statt der
   gesperrten Versalien von .karte-titel.                                    */
.karte-name {
  font-size: 18px;
  font-weight: var(--gewicht-halb);
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
/* Begriff links, Wert rechts, durch eine Haarlinie vom Block darüber
   getrennt: Telefon und E-Mail, darunter die Öffnungszeiten.               */
.karte-reihen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--linie-zart);
  padding-top: 16px;
  margin: 18px 0 0;
  font-size: 14.5px;
}
.karte-reihen > div { display: flex; justify-content: space-between; gap: 16px; }
.karte-reihen dt { color: var(--text-hell-meta); }
.karte-reihen dd { margin: 0; font-weight: var(--gewicht-halb); white-space: nowrap; flex: none; }
.karte-reihen dd a { font-weight: var(--gewicht-normal); }
/* „geschlossen" ist eine Angabe, keine Auszeichnung — sie tritt zurück.    */
.karte-reihen dd.still { color: #8A7B6E; font-weight: var(--gewicht-normal); }

/* Die Frist als große Ziffer — sie ist die eine Zahl, die zählt.           */
.frist { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.frist-zahl {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 38px;
  line-height: 1;
  color: var(--text-hell);
}
.frist-text { font-size: 14px; color: var(--text-hell-weich); line-height: 1.6; }

.seitenlinks { display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; padding-left: 2px; }

/* Absendezeile: Knopf und der Satz daneben, der erklärt, was gleich passiert. */
.absenden { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 6px; margin-top: 28px; }
.absenden .knopf-voll { flex: none; padding-inline: 32px; }
.absenden-satz { font-size: 13px; color: var(--text-hell-meta); max-width: 36ch; line-height: 1.6; }

/* --- Eingangsbestätigung nach dem Absenden -------------------------------- */
.eingang-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.eingang-haken {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bluete-petrol);
  color: var(--feld-grund);
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.eingang-titel { font-size: 22px; font-weight: var(--gewicht-leicht); letter-spacing: -.02em; }
.vorgang-liste {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid var(--linie-zart);
  padding-top: 16px;
  margin: 0;
  font-size: 14px;
}
.vorgang-liste > div { display: flex; justify-content: space-between; gap: 16px; }
.vorgang-liste dt { color: var(--text-hell-meta); }
.vorgang-liste dd { margin: 0; font-weight: var(--gewicht-halb); font-variant-numeric: tabular-nums; }

/* --- Studio: Doppelblatt und Zahlenband --------------------------------- */
.doppelblatt { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: center; }
.doppelblatt figure { margin: 0; position: relative; }
.doppelblatt .blattbild {
  position: relative;
  aspect-ratio: var(--blatt-seitenverhaeltnis);
  border-radius: var(--blatt);
  overflow: hidden;
  background: var(--grund-platte);
  box-shadow: 0 0 0 1px rgba(var(--text-dunkel-rgb), .18);
}
.doppelblatt figure:nth-child(even) .blattbild { border-radius: var(--blatt-gespiegelt); }
.doppelblatt .blattbild img { width: 100%; height: 100%; object-fit: cover; }
.doppelblatt figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dunkel-rubrik);
  text-align: center;
}

/* Drei Kennzahlen unter der Goldlinie. Zahl und Erklärung stehen nicht
   übereinander, sondern nebeneinander auf gemeinsamer Grundlinie — dadurch
   liest sich „1–2 Werktage Bearbeitung" als ein Satz und nicht als Kachel. */
.zahlenband {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--linie);
  background: var(--grund-hell);
}
.zahlenband > div {
  padding: 26px 28px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.zahlenband > div + div { border-left: 1px solid var(--linie); }
.zahlenband > div:first-child { padding-left: var(--seitenrand); }
.zahlenband > div:last-child  { padding-right: var(--seitenrand); }
.zahlenband .k {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: var(--text-hell);
  flex: none;
  white-space: nowrap;
}
.zahlenband-text { font-size: 13.5px; line-height: 1.6; color: var(--text-hell-weich); }

/* --- Zahlkarten (Zahlungsmethoden) -------------------------------------- */
/* Umrandeter Knopf auf hellem Grund — für Wege, die im Fließtext angeboten
   werden, aber nicht die Hauptsache der Seite sind. Der gefüllte Knopf wäre
   dafür zu laut.                                                            */
.knopfzeile { margin: 0 0 38px; }

/* Eine Zeile aus mehreren stillen Knöpfen — und der Ort einer Lehre.
   Diese Regel MUSS NACH .knopfzeile stehen. Deren Kurzform `margin: 0 0 38px`
   setzt auch margin-top auf null; weiter oben im Blatt wurde der Abstand hier
   wortlos überschrieben, und in der Kasse klebte „Auswahl übernehmen" am Feld
   darüber. Der Fehler war unsichtbar, weil beide Regeln für sich richtig
   aussehen — dieselbe Falle wie eine Regel für eine umbenannte Klasse.
   Aus demselben Grund fehlte display:flex: align-items, gap und flex-wrap
   standen da, ohne dass sie etwas zu tun hatten.                          */
.knopfzeile-still {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}
.knopfzeile-still .feld-hinweis { margin: 0; }

.knopf-schlicht {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--feld-rand);
  color: var(--text-hell);
  border-radius: var(--radius-pille);
  padding: 13px 24px;
  font-size: 15px;
  font-weight: var(--gewicht-halb);
  text-decoration: none;
}
.knopf-schlicht:hover { border-color: var(--gold); color: var(--handlung); }

.zahlkarten-rahmen { padding: 48px var(--seitenrand) 0; }
.zahlkarten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--linie);
  border: 1px solid var(--linie);
  margin-bottom: 48px;
}
.zahlkarte { background: var(--grund-hell); padding: 30px 30px 32px; display: flex; flex-direction: column; }
.zahlkarte-strich { width: 26px; height: 1px; margin-bottom: 20px; }
/* Das Plättchen trägt entweder ein Fremdlogo oder — wo es keines gibt — ein
   kurzes Wort. Beide sind gleich hoch, damit die Titel darunter fluchten.  */
.zahlkarte-marke {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 38px;
  padding: 0 11px;
  background: #FFFFFF;
  border: 1px solid var(--linie);
  border-radius: 4px;
  align-self: flex-start;
  margin-bottom: 16px;
}
.zahlkarte-marke img { height: 18px; width: auto; }
.zahlkarte-marke-wort {
  background: none;
  padding: 0 14px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bronze);
  font-weight: var(--gewicht-halb);
  white-space: nowrap;
}
.zahlkarte-titel { font-size: 19px; font-weight: var(--gewicht-halb); letter-spacing: -.01em; }
.zahlkarte-text  { font-size: 14.5px; color: var(--text-hell-weich); line-height: 1.7; margin-top: 10px; }

/* --- WhatsApp (Kontakt) --------------------------------------------------
   Die Kanalkacheln (.kanaele/.kanal) standen bis zum 01.08.2026 hier. Die
   Kontaktseite nutzt jetzt die Wegereihe des Entwurfs (.wege-hell), also ist
   die Regel mit dem Markup gegangen statt liegenzubleiben.

   Wichtig an diesem Abschnitt: Er lädt nichts von WhatsApp. Kein Skript, kein
   Bild, kein eingebettetes Fenster — der Knopf ist ein Verweis auf wa.me, das
   Chatfenster daneben ist eine gezeichnete Abbildung. Genau das behauptet der
   Text auf der Seite, und es muss wahr bleiben.
   ========================================================================== */
.wa {
  position: relative;
  margin-top: 72px;
  background: var(--grund-dunkel);
  color: var(--text-dunkel);
  overflow: hidden;
}
.wa::before {
  content: "";
  position: absolute;
  left: 26%;
  top: -70%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--bluete-petrol-rgb), .26) 0%, rgba(var(--bluete-petrol-rgb), 0) 66%);
  filter: blur(52px);
  animation: schweben 34s ease-in-out infinite;
  pointer-events: none;
}
.wa-innen {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 64px;
  padding: 56px var(--seitenrand);
  align-items: center;
}
.wa h2 {
  margin: 0 0 16px;
  font-size: 36px;
  letter-spacing: -.032em;
  line-height: 1.15;
  color: var(--text-dunkel-titel);
}
.wa-text { margin: 0 0 16px; font-size: 16px; line-height: 1.78; color: var(--text-dunkel-lead); max-width: 44ch; }
.wa-text-still { font-size: 14.5px; line-height: 1.75; color: var(--text-dunkel-weich); margin-bottom: 30px; }
.wa-knoepfe { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.wa-oder { font-size: 14px; color: var(--text-dunkel-weich); }
.wa-oder a { color: var(--text-dunkel-nav); border-bottom: 1px solid rgba(207,194,188,.35); padding-bottom: 2px; }
/* Der Punkt am Knopf leuchtet, der im Kopf des Fensters nicht — dort ist er
   nur die Angabe „antwortet", keine Handlung.                              */
.wa-punkt {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bluete-petrol);
  box-shadow: 0 0 10px 2px rgba(var(--bluete-petrol-rgb), .8);
  flex: none;
}

/* --- Die Abbildung des Chatfensters -------------------------------------- */
.wa-fenster {
  width: 330px;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid rgba(var(--text-dunkel-rgb), .16);
  border-radius: 20px;
  background: rgba(var(--text-dunkel-rgb), .04);
  overflow: hidden;
}
.wa-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(var(--text-dunkel-rgb), .12);
}
.wa-bild {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--text-hell);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
}
.wa-name    { display: block; font-size: 14.5px; font-weight: var(--gewicht-halb); color: var(--text-dunkel-titel); }
.wa-zustand { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-dunkel-weich); margin-top: 2px; }
.wa-zustand .wa-punkt { width: 5px; height: 5px; box-shadow: none; }

.wa-verlauf { display: flex; flex-direction: column; gap: 12px; padding: 20px 18px 22px; }
.wa-blase { max-width: 82%; padding: 11px 14px; font-size: 14px; line-height: 1.55; }
.wa-blase-wir {
  align-self: flex-end;
  max-width: 80%;
  background: #2A3540;
  border-radius: 14px 14px 4px 14px;
  color: #EFE7E1;
}
.wa-blase-sie {
  align-self: flex-start;
  background: rgba(var(--text-dunkel-rgb), .08);
  border-radius: 14px 14px 14px 4px;
  color: var(--text-dunkel-nav);
}
.wa-marke { align-self: flex-end; font-size: 10.5px; color: var(--text-dunkel-grenze); padding-right: 4px; }
.wa-fuss {
  border-top: 1px solid rgba(var(--text-dunkel-rgb), .12);
  padding: 12px 18px;
  font-size: 12.5px;
  color: var(--text-dunkel-grenze);
}


/* --- 404: dunkel, mit drei Wegen weiter --------------------------------- */
.vierhundertvier {
  position: relative;
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 56px;
  padding: 64px var(--seitenrand) 76px;
  align-items: center;
}
.vierhundertvier h1 { font-size: 56px; line-height: 1.05; letter-spacing: -.042em; color: var(--text-dunkel-titel); }
.vierhundertvier h1 em { font-family: var(--schrift-kursiv); font-style: italic; font-size: 62px; }
.vierhundertvier p { font-size: 17px; line-height: 1.78; color: var(--text-dunkel-lead); max-width: 44ch; margin: 26px 0 0; }

/* Die Blüte, der ein Blatt fehlt — das Bild zur Fehlermeldung. Fünf Blätter
   im 72-Grad-Abstand, das dritte nur als gestrichelter Umriss. Reine
   CSS-Formen: eine Grafikdatei für fünf Rechtecke wäre Verschwendung.      */
.fehlbluete { position: relative; display: flex; align-items: center; justify-content: center; height: 380px; }
.fehlbluete-innen { position: relative; width: 300px; height: 300px; }
.fehlbluete-innen > span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 112px;
  margin-top: -112px;
  transform-origin: 0 100%;
  border-radius: 100% 0 100% 0 / 100% 0 100% 0;
}
.fehlbluete-innen > span:nth-child(1) { transform: rotate(0deg);   background: rgba(var(--bluete-rose-rgb), .30); box-shadow: 0 0 30px -4px rgba(var(--bluete-rose-rgb), .5); }
.fehlbluete-innen > span:nth-child(2) { transform: rotate(72deg);  background: rgba(var(--bluete-pfirsich-rgb), .28); box-shadow: 0 0 30px -4px rgba(var(--bluete-pfirsich-rgb), .45); }
.fehlbluete-innen > span:nth-child(3) { transform: rotate(144deg); box-sizing: border-box; border: 1px dashed rgba(var(--text-dunkel-rgb), .42); animation: suchen 4.6s ease-in-out infinite; }
.fehlbluete-innen > span:nth-child(4) { transform: rotate(216deg); background: rgba(var(--bluete-pflaume-rgb), .30); box-shadow: 0 0 30px -4px rgba(var(--bluete-pflaume-rgb), .5); }
.fehlbluete-innen > span:nth-child(5) { transform: rotate(288deg); background: rgba(var(--bluete-petrol-rgb), .28); box-shadow: 0 0 30px -4px rgba(var(--bluete-petrol-rgb), .45); }
.fehlbluete-mitte {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  border-radius: 50%;
  background: rgba(var(--grund-dunkel-rgb), .86);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .4), 0 0 34px -6px rgba(var(--gold-rgb), .5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 23px;
  color: var(--gold-auf);
}
@keyframes suchen { 0%, 100% { opacity: .28; } 50% { opacity: .75; } }

/* auto-fit statt fester Dreiteilung: Fällt eine Karte weg — auf der
   Kontaktseite hängt die mittlere an FUNKTIONEN['whatsapp'] —, teilen sich die
   übrigen die Breite, statt eine Lücke stehen zu lassen.                    */
.wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px; background: rgba(var(--text-dunkel-rgb), .10); }
.weg {
  background: var(--grund-dunkel);
  padding: 34px 34px 36px;
  color: inherit;
  display: flex;
  flex-direction: column;
}
/* Die äußeren Karten tragen den Seitenrand mit, damit ihr Text mit dem
   übrigen Seiteninhalt fluchtet statt an der Kante zu kleben.              */
.weg:first-child { padding-left: var(--seitenrand); }
.weg:last-child  { padding-right: var(--seitenrand); }
.weg-strich { width: 26px; height: 1px; margin-bottom: 20px; }
.weg-titel { font-size: 21px; font-weight: var(--gewicht-leicht); letter-spacing: -.02em; color: var(--text-dunkel-titel); }
.weg-text  { font-size: 14px; line-height: 1.7; color: var(--text-dunkel-weich); margin-top: 10px; }
/* `margin-top: auto` drückt die Handlungszeile auf die Unterkante — so
   stehen die drei Zeilen auf einer Linie, auch wenn die Texte darüber
   verschieden lang sind.                                                   */
.weg-aktion { margin-top: auto; padding-top: 22px; font-size: 13px; color: var(--gold-weich); }
a.weg:hover .weg-titel { color: var(--gold-auf); text-decoration: underline; }

/* Helle Fassung derselben Reihe (Kontakt). Dort führen die drei Karten nicht
   fort von der Seite, sondern an die Stelle, an der der Weg beginnt — sie
   stehen deshalb unter dem Hero auf hellem Grund und tragen keine
   Handlungszeile.                                                           */
.wege-hell { background: var(--linie); border-bottom: 1px solid var(--linie); }
.wege-hell .weg { background: var(--feld-grund); padding: 26px 30px 28px; }
.wege-hell .weg:first-child { padding-left: var(--seitenrand); }
.wege-hell .weg:last-child  { padding-right: var(--seitenrand); }
.wege-hell .weg-strich { margin-bottom: 18px; }
.wege-hell .weg-titel {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: var(--gewicht-halb);
  letter-spacing: -.01em;
  color: var(--text-hell);
}
.wege-hell .weg-text { font-size: 13.5px; color: var(--text-hell-weich); margin-top: 8px; }
.wege-hell a.weg:hover .weg-titel { color: var(--handlung); }
/* Das „Neu" neben WhatsApp — in der Farbe des Strichs darüber.             */
.weg-pille {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* War #3F6975 und kam auf --grund-dunkel auf 3,08:1 — ein dunkles Petrol
     auf fast schwarzem Grund. `--bluete-petrol` ist genau das, was der Satz
     oben meint („in der Farbe des Strichs darueber"), und liest sich mit
     6,31:1. Gefunden bei der Farbpruefung am 03.08.2026. */
  color: var(--bluete-petrol);   /* auf --grund-dunkel 6,3:1 */
  font-weight: var(--gewicht-halb);
  border: 1px solid #CBDDE2;
  border-radius: var(--radius-pille);
  padding: 3px 9px;
  flex: none;
}

/* --- Neu und Angebote: leerer Zustand ----------------------------------- */
.leerer-zustand {
  border: 1px solid var(--linie);
  background: var(--feld-grund);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  padding: 26px;
  align-items: center;
  margin-top: 38px;
}
.leerer-zustand .blattbild {
  position: relative;
  width: 132px;
  aspect-ratio: var(--blatt-seitenverhaeltnis);
  border-radius: var(--blatt);
  overflow: hidden;
  background: var(--grund-platte);
  box-shadow: 0 0 0 1px var(--linie);
  flex: none;
}
/* Die KI-Marke wandert hier nach unten LINKS. Die Blattform schneidet die
   Ecken oben links und unten rechts weg — an ihrem üblichen Platz wäre die
   Marke halb abgeschnitten. Die Regel hängt an der Blattform, nicht an
   dieser Seite: Wo ein Bild in ein Blatt gesetzt wird, gilt sie wieder.   */
.leerer-zustand .blattbild .ki-marke { right: auto; left: 8px; bottom: 8px; }
.leerer-zustand .blattbild img { width: 100%; height: 100%; object-fit: cover; }
.leerer-zustand h3 { font-size: var(--t-h3); font-weight: var(--gewicht-halb); margin: 0; }
.leerer-zustand p  { font-size: 14px; line-height: 1.7; color: var(--text-hell-weich); margin: 8px 0 0; }

/* --- Abschnitt auf hellem Grund ----------------------------------------- */
.heller-abschnitt { padding: 48px var(--seitenrand) 0; }
.heller-abschnitt:last-of-type { padding-bottom: 64px; }
.abschnitt-titel { font-size: var(--t-h2); letter-spacing: -.02em; margin: 0 0 8px; }
.abschnitt-lead  { font-size: 15.5px; line-height: 1.75; color: var(--text-hell-weich); margin: 0 0 24px; max-width: 60ch; }

/* ==========================================================================
   HANDY — Inhaltsseiten
   ========================================================================== */
@media (max-width: 900px) {
  .inhaltsseite { grid-template-columns: 1fr; gap: 28px; padding: 26px var(--seitenrand-handy) 40px; }
  /* Das Verzeichnis klebt am Handy nicht — es stünde sonst dauerhaft im Weg. */
  .seitenverzeichnis { position: static; }
  .fliess h2 { font-size: 22px; margin-top: 32px; }

  .fakten, .wege, .zahlenband, .zahlkarten { grid-template-columns: 1fr; }
  /* Untereinander tragen alle Karten denselben Seitenrand, nicht nur die
     erste und die letzte.                                                  */
  .wege-hell .weg { padding: 22px var(--seitenrand-handy) 24px; }

  .wa { margin-top: 40px; }
  .wa-innen { grid-template-columns: 1fr; gap: 30px; padding: 34px var(--seitenrand-handy); }
  .wa h2 { font-size: 26px; }
  /* Untereinander trennt eine Linie oben statt links.                      */
  .zahlenband > div + div { border-left: 0; border-top: 1px solid var(--linie); }
  .zahlenband > div:first-child { padding-left: var(--seitenrand-handy); }
  .zahlenband > div:last-child  { padding-right: var(--seitenrand-handy); }
  .doppelblatt { gap: 16px; }
  .leerer-zustand { grid-template-columns: 1fr; gap: 16px; }
  .leerer-zustand .blattbild { width: 96px; }

  .vierhundertvier { grid-template-columns: 1fr; gap: 28px; padding: 34px var(--seitenrand-handy) 40px; }
  .vierhundertvier h1 { font-size: var(--t-h1-handy); }
  .vierhundertvier h1 em { font-size: 34px; }

  .heller-abschnitt { padding: 32px var(--seitenrand-handy) 0; }
  .heller-abschnitt:last-of-type { padding-bottom: 40px; }
  .abschnitt-titel { font-size: 22px; }

  .formular-fuss .knopf-voll { flex: 1; }
}

/* ==========================================================================
   KNAPPER HERO — Service- und Rechtsseiten
   Quelle: service.html / rechtstexte.html. Eine Spalte, darunter eine Reihe
   Pillen zu den Geschwisterseiten: Wer im Impressum landet, will meist die
   AGB und findet sie hier, ohne in den Fuß zu scrollen.
   ========================================================================== */
.hero-knapp { position: relative; padding: 36px var(--seitenrand) 42px; }
.hero-knapp .kicker { margin-bottom: 16px; }
/* Nur wenn ein Einleitungssatz gesetzt ist, wird der Kopf zweispaltig — die
   Rechts- und Serviceseiten kommen ohne aus und bleiben einspaltig.
   `align-items: end` setzt den Satz auf die Grundlinie der Überschrift. */
.hero-knapp:has(.hero-knapp-text) {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: end;
  padding: 40px var(--seitenrand) 48px;
}
.hero-knapp-text {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-dunkel-lead);
  max-width: 40ch;
}
.hero-knapp-text a { color: var(--gold-weich); border-bottom: 1px solid rgba(231,201,160,.4); }
.hero-knapp-text a:hover { color: var(--gold-auf); }
/* Der kursive Nachsatz unter der Überschrift — Zahlung und Pflege tragen ihn.
   Er ist kein Fließtext, sondern gehört noch zur Überschrift; deshalb die
   Kursive und das warme Gold statt des grauen Lesetons.                     */
.hero-knapp-lead {
  margin: 18px 0 0;
  max-width: 48ch;
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 23px;
  line-height: 1.55;
  color: var(--gold-weich);
}
.hero-knapp-lead + .geschwister { margin-top: 26px; }
.hero-knapp-marke {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 21px;
  color: var(--gold-weich);
}
.hero-knapp-marke-strich { width: 26px; height: 1px; background: rgba(var(--gold-rgb), .7); flex: none; }
.hero-knapp-marke + .geschwister { margin-top: 26px; }
/* Die Pillenreihe zieht über beide Spalten, sonst stünde sie eingeklemmt
   unter der Überschrift.                                                   */
.hero-knapp .geschwister { grid-column: 1 / -1; }
.hero-knapp h1 {
  margin: 0;
  font-size: 48px;
  letter-spacing: -.038em;
  line-height: 1.06;
  color: var(--text-dunkel-titel);
}
.geschwister { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.geschwister a {
  border: 1px solid rgba(var(--text-dunkel-rgb), .2);
  color: var(--text-dunkel-nav);
  border-radius: var(--radius-pille);
  padding: 8px 18px;
  font-size: 13px;
  white-space: nowrap;
}
.geschwister a:hover { color: var(--text-dunkel); border-color: rgba(var(--text-dunkel-rgb), .4); }
.geschwister a[aria-current="page"] {
  border-color: rgba(var(--gold-rgb), .8);
  color: var(--gold-auf);
  font-weight: var(--gewicht-halb);
}

@media (max-width: 900px) {
  .hero-knapp,
  .hero-knapp:has(.hero-knapp-text) { grid-template-columns: 1fr; gap: 16px; padding: 22px var(--seitenrand-handy) 26px; }
  .hero-knapp h1 { font-size: var(--t-h1-handy); }
  .geschwister { margin-top: 18px; gap: 8px; }
}

/* Derselbe Knopf als Verweis — er steht dann nicht in einer Zeile mit einem
   Mengenwähler, sondern für sich.                                          */
a.knopf-voll { display: inline-block; flex: none; padding-inline: 34px; text-decoration: none; }

/* Die Schrittanzeige ist eine Liste — die Linien dazwischen sind Dekoration
   und tragen deshalb kein Zeichen.                                         */
.schritte li.schritt-linie { list-style: none; }

/* --- Hero der Studioseite: Text links, zwei Blätter rechts --------------- */
.hero-studio {
  position: relative;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 48px;
  padding: 56px var(--seitenrand) 70px;
  align-items: center;
}
.hero-studio h1 {
  margin: 0;
  font-size: 62px;
  line-height: 1.03;
  letter-spacing: -.042em;
  color: var(--text-dunkel-titel);
}
/* Das kursive Wort steht 8 px über der Zeile — Cormorant baut kleiner als
   Manrope, bei gleicher Größe wirkte es geschrumpft. Der Haken hier hieß bis
   eben `.hero-wort`; die Seite trägt aber `.hero-wort-gold`, die Regel lief
   also ins Leere und das Wort blieb auf den 62 px der Überschrift.          */
.hero-studio .hero-wort-gold { font-size: 70px; }

@media (max-width: 900px) {
  .hero-studio { grid-template-columns: 1fr; gap: 28px; padding: 20px var(--seitenrand-handy) 30px; }
  .hero-studio h1 { font-size: var(--t-h1-handy); }
  .hero-studio .hero-wort-gold { font-size: 34px; }
  .hero-studio .hero-text { display: block; }
}

/* ==========================================================================
   STUFE 6 — BAUTEILE MIT BEDINGUNG
   Quelle: claude/elas3dstudio.de/banner-und-laden.html

   Sie erscheinen NUR, wenn es etwas zu zeigen gibt. Ein Eckband ohne Neuheit
   und ein Ankündigungsband ohne Ankündigung wären Attrappen — und die
   verbietet AUFTRAG.md.
   ========================================================================== */

/* --- Eckband: diagonal über die Ecke der Blattkachel ---------------------
   Diagonal, nicht rechteckig: Zwei Ecken des Blattes laufen spitz zu, ein
   aufgesetztes Rechteck würde sie abschneiden (AUFTRAG Falle 7).           */
.eckband {
  position: absolute;
  top: 24px;
  right: -34px;
  width: 140px;
  transform: rotate(45deg);
  background: var(--handlung);
  color: var(--handlung-auf);      /* 5,3:1 */
  text-align: center;
  padding: 6px 0;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  z-index: 1;
  pointer-events: none;
}
.eckband-gold { background: var(--gold); color: var(--grund-dunkel); }  /* 7,5:1 */

/* DAS BAND MUSS MITSPIEGELN, sonst verschwindet es auf jeder zweiten Kachel.

   `--blatt` ist `100% 0 100% 0` — die Ecken der Reihe nach oben-links,
   oben-rechts, unten-rechts, unten-links. Oben rechts steht also die SPITZE,
   und genau dort sitzt das Band. `--blatt-gespiegelt` dreht das um: Dann ist
   oben rechts die volle Rundung, und `overflow: hidden` an `.kachel-bild`
   schneidet das Band restlos weg.

   Gemerkt am 18.08.2026 unter /neu, wo zwei Sätze nebeneinander standen: Der
   erste trug „Neu", der zweite nicht. Es lag nie am Artikel — dieselbe Kachel
   zeigte das Band auf /shop und verlor es auf /neu, weil sie dort an zweiter
   Stelle stand. Ein Fehler, der von der POSITION in der Reihe abhing und
   nicht von den Daten; deshalb sah jede Prüfung am Artikel richtig aus.

   Die Spiegelung ist dieselbe Bewegung wie bei `.satz-kontur` und
   `.satz-blatt` gleich darüber — wer eine vierte Sache in die Blattecke legt,
   braucht sie auch.                                                        */
.kachel:nth-child(even) .eckband {
  right: auto;
  left: -34px;
  transform: rotate(-45deg);
}

/* --- Zustandspille: steht UNTER dem Blatt, nicht darauf ------------------ */
.zustandspille {
  display: inline-flex;
  align-items: center;
  background: var(--feld-grund);
  border: 1px solid var(--feld-rand);
  border-radius: var(--radius-pille);
  padding: 5px 12px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: var(--gewicht-halb);
  color: var(--bronze);            /* auf #FFFDFB 4,8:1 */
  flex: none;
  white-space: nowrap;
  margin-top: 12px;
}

/* --- Ankündigungsband über dem Kopf -------------------------------------- */
/* --- Das Neustart-Band ----------------------------------------------------
   Tonlage Neuigkeit, nicht Warnung: die pastellige Rose der Blüte, kein Gelb
   und kein Ausrufezeichen. Eine Zeile, 44 px — wird der Satz länger, bricht
   er um und das Band wächst; verstecken tut es nichts.                     */
.neuband {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
  min-height: 44px;
  padding: 8px calc(var(--seitenrand) + 26px) 8px var(--seitenrand);
  box-sizing: border-box;
  background: var(--kat-rose-flaeche);
  border-bottom: 1px solid #F0DCE1;
  color: var(--text-hell);
  font-size: 13.5px;
}
.neuband-punkt {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--bluete-rose);
}
.neuband-text { color: var(--text-hell-weich); }
.neuband-text strong { color: var(--text-hell); font-weight: var(--gewicht-halb); }
.neuband-mehr {
  color: var(--handlung);
  text-decoration: underline;
  text-underline-offset: .2em;
}
/* Das Kreuz sitzt am Rand, nicht am Textende — sonst wandert es mit der
   Satzlänge und ist nie dort, wo man es sucht.                            */
.neuband-zu {
  position: absolute;
  right: calc(var(--seitenrand) - 8px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* Auf dem rosa Band (#F9E9ED) kommt --text-hell-meta nur auf 4,34:1 —
     die Marke ist fuer Seite und Platte gemessen, nicht fuer dieses Band.
     --text-hell-weich gibt 5,45:1. Farbpruefung 03.08.2026. */
  color: var(--text-hell-weich);
  font-size: 15px;
  line-height: 1;
}
.neuband-zu:hover { background: rgba(var(--bluete-rose-rgb), .16); color: var(--text-hell); }

/* Stehen beide Bänder (seit 15.08.2026 möglich), stößt die helle Trennlinie
   des Neustart-Bands direkt auf das dunkle Ankündigungsband und liest sich
   dort als heller Spalt. Dann trennt schon der Farbwechsel — die Linie kann
   weg. Kennt ein Browser `:has` nicht, bleibt es beim Haarstrich; das ist
   nicht schön, aber auch nicht kaputt.                                     */
.neuband:has(+ .ankuendigung) { border-bottom: 0; }

@media (max-width: 900px) {
  .neuband {
    padding: 9px calc(var(--seitenrand-handy) + 24px) 9px var(--seitenrand-handy);
    gap: 6px 10px;
    font-size: 12.5px;
    /* Am Handy stehen seit 15.08.2026 zwei Bänder übereinander. Die Zeilenhöhe
       der Seite (1,8) ist für Fließtext gedacht; in einem vierzeiligen Band
       kostet sie allein 40 px, ohne ein Wort mehr zu zeigen.              */
    line-height: 1.4;
  }
  /* Der Punkt gehört neben den Satz, nicht auf eine eigene Zeile: Als starres
     Flex-Kind drängte er den Text komplett unter sich und machte aus drei
     Zeilen vier. `min-width: 0` erlaubt dem Satz, im Rest der Zeile zu
     brechen, statt seine eigene zu verlangen.                             */
  .neuband-text { flex: 1 1 0; min-width: 0; }
  /* Der Verweis bleibt auf eigener Zeile. Neben dem Satz würde er ihm ein
     Drittel der Breite nehmen — der Satz bräuchte dann vier schmale Zeilen
     statt zwei, und gewonnen wäre nichts.                                 */
  .neuband-mehr { flex: 0 0 100%; }
  .neuband-zu { right: calc(var(--seitenrand-handy) - 8px); }
}

.ankuendigung {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
  padding: 11px var(--seitenrand);
  background: var(--grund-fuss);
  color: var(--gold-weich);                  /* auf --grund-fuss 12,1:1 */
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid rgba(var(--gold-rgb), .22);
}
.ankuendigung a { color: var(--gold-auf); text-decoration: underline; text-underline-offset: .2em; }
.ankuendigung a:hover { color: var(--text-dunkel); }

@media (max-width: 900px) {
  .ankuendigung {
    padding-inline: var(--seitenrand-handy);
    font-size: 12.5px;
    line-height: 1.4;              /* siehe .neuband: zwei Bänder, wenig Höhe */
  }
}

/* ==========================================================================
   BAUSTELLENSEITE UND ZUGANG
   Dieselbe Nacht, dieselbe Blüte, dieselben Schriften wie die fertige Seite —
   wer hier landet, soll sehen, dass etwas Neues entsteht.
   ========================================================================== */
.baustelle-innen {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 48px var(--seitenrand) 60px;
  align-items: center;
}
.baustelle-innen h1 {
  margin: 0;
  font-size: var(--t-hero);
  line-height: var(--t-hero-hoehe);
  letter-spacing: var(--t-hero-sperrung);
  color: var(--text-dunkel-titel);
}

.baustelle-kontakt {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.baustelle-mail {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 20px;
  color: var(--text-dunkel-rubrik);                 /* auf --grund-dunkel 8,4:1 */
}
.baustelle-mail:hover { color: var(--text-dunkel); }

.baustelle-zeiten {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 28px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(var(--text-dunkel-rgb), .10);
  max-width: 34ch;
  font-size: 13px;
}
.baustelle-zeiten > div { display: flex; justify-content: space-between; gap: 14px; }
.baustelle-zeiten dt { color: var(--text-dunkel-weich); }
.baustelle-zeiten dd { margin: 0; color: var(--text-dunkel); white-space: nowrap; }
.baustelle-zeiten dd.zu { color: var(--text-dunkel-grenze); }

/* Die Bildmarke ist hier ein Knopf — fünf Klicks holen die Anmeldung. Sie
   soll aber nicht wie ein Knopf aussehen.                                   */
button.bluete-marke {
  background: none;
  border: 0;
  padding: 0;
  cursor: default;
  -webkit-appearance: none;
  appearance: none;
}

.baustelle-neu { padding: 52px var(--seitenrand) 56px; }
.baustelle-neu .augenbraue { margin-bottom: 12px; }
.baustelle-neu .abschnitt-titel { margin-bottom: 28px; }

.baustelle-rechtliches {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin: 34px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--linie);
  font-size: 13.5px;
}
.baustelle-rechtliches a { color: var(--text-hell-weich); }
.baustelle-rechtliches a:hover { color: var(--handlung); }

/* --- Der Schleier über der Anmeldung ------------------------------------- */
.zugang-schleier {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--seitenrand-handy);
  background: rgba(16,14,20,.88);
  backdrop-filter: blur(6px);
}
.zugang-schleier[hidden] { display: none; }
.zugang-kasten {
  width: min(420px, 100%);
  background: var(--grund-hell);
  border-radius: var(--radius-klein);
  padding: 28px 30px 26px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8);
}
.zugang-titel {
  margin: 0;
  font-size: var(--t-mikro);
  font-weight: var(--gewicht-halb);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze);
}
.zugang-kasten .feld { margin-top: 16px; }
.zugang-abbruch {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-hell-meta);
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.zugang-abbruch:hover { color: var(--handlung); }

/* --- Die eigenständige Zugangsseite -------------------------------------- */
.zugang-innen {
  position: relative;
  max-width: 480px;
  margin-inline: auto;
  padding: 64px var(--seitenrand) 72px;
  text-align: left;
}
.zugang-marke { width: 84px; height: auto; margin-bottom: 26px; }
.zugang-innen h1 {
  margin: 0 0 12px;
  font-size: 34px;
  letter-spacing: -.03em;
  color: var(--text-dunkel-titel);
}
.zugang-text { margin: 0 0 24px; font-size: 15.5px; line-height: 1.75; color: var(--text-dunkel-lead); }
/* Auf der Nacht steht das Formular hell — die Etiketten müssen mit.         */
.zugang-innen .feld-kopf label { color: var(--text-dunkel); }
.zugang-innen .feld-hinweis    { color: var(--text-dunkel-weich); }
.zugang-innen .feld-pflicht    { color: var(--text-dunkel-rubrik); }
.zugang-innen .meldung {
  background: rgba(163,43,43,.16);
  border-left-color: #E88;
  color: #F0DCDC;                 /* auf dem abgedunkelten Rot 9,3:1 */
}
.zugang-innen .meldung strong { color: var(--text-dunkel-titel); }
.zugang-fuss { margin: 26px 0 0; font-size: 13.5px; }
.zugang-fuss a { color: var(--text-dunkel-weich); }
.zugang-fuss a:hover { color: var(--text-dunkel); }

@media (max-width: 900px) {
  .baustelle-innen {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 16px var(--seitenrand-handy) 30px;
  }
  .baustelle-innen .hero-spalte  { display: contents; }
  .baustelle-innen .kicker       { order: 1; }
  .baustelle-innen h1            { order: 2; font-size: 34px; line-height: 1.08; }
  .baustelle-innen .hero-wort    { font-size: 38px; }
  .baustelle-innen .bluete-spalte{ order: 3; }
  .baustelle-innen .hero-text    { order: 4; display: block; margin-top: 20px; }
  .baustelle-kontakt             { order: 5; margin-top: 22px; }
  .baustelle-kontakt .knopf-gold { width: 100%; justify-content: center; box-sizing: border-box; }
  .baustelle-zeiten              { order: 6; max-width: none; }

  .baustelle-neu { padding: 32px var(--seitenrand-handy) 36px; }
  .zugang-innen  { padding: 40px var(--seitenrand-handy) 48px; }
  .zugang-innen h1 { font-size: 26px; }
}

/* Die Wortmarke steht auf der Baustellenseite für sich — es gibt keine
   Navigation, in die sie gehören könnte.                                    */
.baustelle-kopf { position: relative; padding: 22px var(--seitenrand) 0; }
.baustelle-kopf img {
  height: 48px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .94;
}
@media (max-width: 900px) {
  .baustelle-kopf { padding: 16px var(--seitenrand-handy) 0; }
  .baustelle-kopf img { height: 38px; }
}

/* ==========================================================================
   STUDIOSEITE
   Quelle: „Elas3DStudio Ueber-uns.dc.html" (31.07.2026). Sie ersetzt den
   älteren ueber-uns.html-Entwurf und bringt vier Bausteine mit, die es dort
   noch nicht gab: die Kennzahlen im Hero, die zwei Rollenfelder, die
   Zeitleiste und das große Zitat.
   ========================================================================== */

/* --- Kennzahlen unter dem Hero-Text -------------------------------------- */
.studio-zahlen {
  display: flex;
  gap: 34px;
  margin: 38px 0 0;
  padding-top: 26px;
  border-top: 1px solid rgba(var(--text-dunkel-rgb), .14);
  flex-wrap: wrap;
}
.studio-zahlen > div + div { padding-left: 34px; border-left: 1px solid rgba(var(--text-dunkel-rgb), .14); }
.studio-zahl {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 34px;
  line-height: 1;
  color: var(--gold-auf);                 /* auf --grund-dunkel 14,1:1 */
}
.studio-zahl-text { font-size: 12.5px; color: var(--text-dunkel-weich); margin-top: 6px; }

/* Das kursive Hero-Wort steht auf dieser Seite ruhig in Gold — der
   Farbverlauf gehört der Startseite allein.                                 */
.hero-wort-gold {
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-weight: var(--gewicht-leicht);
  color: var(--gold-weich);                 /* auf --grund-dunkel 11,8:1 */
}

/* --- Die zwei Personenblätter -------------------------------------------- */
/* Das zweite Blatt sitzt tiefer — zwei gleich hohe Blätter nebeneinander
   sähen aus wie ein Formular, nicht wie eine Blüte.                         */
.doppelblatt figure:nth-child(2) { margin-top: 62px; }
.doppelblatt .blattbild { animation: blattAtem var(--d-kachel-2) ease-in-out infinite; }
.doppelblatt figure:nth-child(2) .blattbild { animation-duration: var(--d-kachel-4); animation-delay: .9s; }
.doppelblatt figcaption { margin-top: 16px; text-align: center; letter-spacing: normal; text-transform: none; }
.blatt-name { display: block; font-size: 17px; font-weight: var(--gewicht-halb); color: var(--text-dunkel-titel); }
.blatt-rolle {
  display: block;
  font-size: var(--t-mikro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dunkel-rubrik);
  margin-top: 7px;
}

/* --- Zwei Rollenfelder, randlos nebeneinander ---------------------------- */
.rollen { display: grid; grid-template-columns: 1fr 1fr; }
.rolle { padding: 40px 44px 44px; }
.rolle-marke { display: flex; align-items: center; gap: 10px; }
.rolle-marke .punkt { width: 8px; height: 8px; }
.rolle-marke span:last-child {
  font-size: var(--t-mikro);
  font-weight: var(--gewicht-halb);
  letter-spacing: .18em;
  text-transform: uppercase;
}
/* Doppelt geschrieben, und das mit Absicht: `.rolle p` weiter unten hat mit
   (0,1,1) die höhere Spezifität als ein einzelner Klassenhaken. Der
   Leitsatz stand deshalb in Fließtextgröße und in der Textfarbe des
   Absatzes. Derselbe Stolperstein wie bei den Farbproben.                  */
.rolle .rolle-satz {
  font-size: 25px;
  font-weight: var(--gewicht-leicht);
  letter-spacing: -.022em;
  margin-top: 16px;
  color: var(--text-hell);
}
/* `:not(.rolle-satz)` ist kein Zierat: Der Leitsatz ist selbst ein Absatz.
   Ohne die Ausnahme fiele er in Fließtextgröße und Fließtextfarbe zurück,
   weil diese Regeln die höhere Spezifität haben.                           */
.rolle p:not(.rolle-satz) { margin: 14px 0 0; font-size: 15px; line-height: 1.75; max-width: 44ch; }

.rolle-ela    { background: var(--kat-rose-flaeche); }
.rolle-ela    .rolle-marke span:last-child { color: var(--kat-rose-ziffer); }
.rolle-ela    p:not(.rolle-satz) { color: var(--kat-rose-text); }
.rolle-tristan{ background: var(--kat-petrol-flaeche); }
.rolle-tristan .rolle-marke span:last-child { color: var(--kat-petrol-ziffer); }
.rolle-tristan p:not(.rolle-satz) { color: var(--kat-petrol-text); }

/* --- Zeitleiste ---------------------------------------------------------- */
/* Die 7 px sind gemessen, nicht geschätzt: Links steht „Wie alles anfing" in
   11 px Versalien, rechts „Der erste Drucker" in 17 px. Bei gleicher
   Kastenoberkante beginnt der größere Text sichtbar höher, weil über seinen
   Großbuchstaben mehr Oberlänge liegt. Der Versatz bringt die beiden
   Buchstabenoberkanten auf eine Linie.                                     */
/* DER EINZUG STEHT AN EINER STELLE, weil zwei Werte von ihm abhaengen.

   Die Punkte sitzen per `left: calc(var(--einzug) * -1)` auf der Linie: Sie
   liegen im li, das um genau diesen Einzug eingerueckt ist, und muessen
   dieselbe Strecke zurueck. Stand das Mass zweimal da, verschob eine
   Aenderung nur eines von beiden — und die Punkte rutschten neben die Linie.

   GENAU DAS WAR AM 18.08.2026 DER FALL: Der Handy-Umbruch verkleinerte den
   Einzug auf 26px, das `left: -30px` der Punkte blieb stehen. Ergebnis auf
   Handy und Tablet-Hochformat: Linienmitte bei 5,5px, Punktmitte bei 1,5px,
   vier Pixel daneben. Am Schreibtisch stimmte es, deshalb fiel es dort nie
   auf.                                                                      */
.zeitleiste {
  --einzug: 30px;
  position: relative;
  padding-left: var(--einzug);
  margin: 7px 0 0;
  list-style: none;
}
.zeitleiste::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom, rgba(var(--gold-rgb), 0), rgba(var(--gold-rgb), .55) 12%,
              rgba(var(--gold-rgb), .55) 88%, rgba(var(--gold-rgb), 0));
}
.zeitleiste li { position: relative; padding-bottom: 30px; }
.zeitleiste li:last-child { padding-bottom: 0; }
.zeitleiste li::before {
  content: "";
  position: absolute;
  left: calc(var(--einzug) * -1);
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--grund-hell);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .6);
}
/* Die letzte Station ist die Gegenwart — sie ist gefüllt.                   */
.zeitleiste li:last-child::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .22); }
.zeit-titel { font-size: 17px; font-weight: var(--gewicht-halb); }
.zeit-text  { font-size: 14.5px; line-height: 1.7; color: var(--text-hell-weich); margin-top: 5px; }

/* --- Das große Zitat ----------------------------------------------------- */
.grosseszitat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 34px;
  align-items: center;
  margin: 60px var(--seitenrand) 0;
  padding-top: 44px;
  border-top: 1px solid var(--linie);
}
.grosseszitat img { width: 78px; height: auto; opacity: .9; }
.grosseszitat blockquote {
  margin: 0;
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 34px;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--text-hell);
  /* Vier Wörter über die volle Seitenbreite wären keine Aussage mehr,
     sondern eine Zeile. 26 Zeichen zwingen den Umbruch.                    */
  max-width: 26ch;
}

/* --- Erreichbarkeitskarte im dunklen Schlussband ------------------------- */
.aufruf-karte {
  border: 1px solid rgba(var(--text-dunkel-rgb), .14);
  border-radius: var(--radius-klein);
  padding: 30px 32px;
  background: rgba(var(--text-dunkel-rgb), .03);
}
/* Die Größe muss hier stehen: Die Überschrift der Karte ist ein Absatz, und
   `.aufruf p` hat mit (0,1,1) mehr Gewicht als `.fuss-titel`. Sie kam
   deshalb in 15,5 px statt in den 10 px, die eine Kopfzeile haben soll.    */
.aufruf-karte .fuss-titel { margin-bottom: 16px; font-size: 10px; }
.aufruf-karte address { font-style: normal; font-size: 15px; line-height: 1.9; color: var(--text-dunkel-nav); }
.aufruf-karte .kontaktdaten { font-size: 15px; line-height: 1.9; margin: 16px 0 0; }
.aufruf-karte .kontaktdaten a { color: var(--gold-weich); }
.aufruf-karte .kontaktdaten a:hover { color: var(--gold-auf); }
.aufruf-zeiten { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(var(--text-dunkel-rgb), .12); font-size: 14px; }
.aufruf-zeiten > div { display: flex; justify-content: space-between; gap: 14px; color: var(--text-dunkel-weich); }
.aufruf-zeiten > div + div { margin-top: 8px; }
.aufruf-zeiten .offen { color: var(--gold-weich); }

@media (max-width: 900px) {
  /* Drei Spalten statt Umbruch: Am Handy passten nur zwei Zahlen nebeneinander,
     die dritte rutschte allein in eine zweite Zeile — mitsamt ihrem
     Trennstrich, der dort ins Leere zeigte.                                 */
  .studio-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
  .studio-zahlen > div + div { padding-left: 14px; }
  .studio-zahl { font-size: 26px; }

  .doppelblatt figure:nth-child(2) { margin-top: 0; }
  .rollen { grid-template-columns: 1fr; }
  .rolle  { padding: 26px var(--seitenrand-handy) 28px; }
  /* Muss den Haken der Grundregel mitführen, sonst gewinnt dort `.rolle p`
     — Medienabfragen ändern nichts an der Spezifität.                       */
  .rolle .rolle-satz { font-size: 20px; }

  .grosseszitat {
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 32px var(--seitenrand-handy) 0;
    padding-top: 28px;
  }
  .grosseszitat blockquote { font-size: 24px; }
  /* Nur der Einzug — die Punkte folgen ihm von selbst. */
  .zeitleiste { --einzug: 26px; }
}

/* Das Werkstattband der Studioseite ist höher als das auf der Produktseite
   und lässt rechts mehr Bild stehen.                                        */
.stimmungsband-hoch > img { height: 520px; }
.stimmungsband-hoch::after {
  background: linear-gradient(90deg, rgba(var(--grund-dunkel-rgb), .94) 0%,
              rgba(var(--grund-dunkel-rgb), .70) 34%, rgba(var(--grund-dunkel-rgb), .10) 78%);
}
.stimmungsband-hoch .stimmungsband-text { max-width: 46ch; }
.stimmungsband-hoch .stimmungsband-text h2 { font-size: 36px; line-height: 1.18; margin-bottom: 18px; }
.stimmungsband-hoch .stimmungsband-text p  { font-size: 16px; max-width: 40ch; }

/* Auf der Studioseite trägt das linke Feld des Zweispalters Fließtext statt
   einer Kastenliste — die Lesespalte darf hier die volle Breite nutzen.     */
#geschichte .fliess { max-width: 50ch; }
#geschichte .abschnitt-titel { font-size: 38px; line-height: 1.15; margin-bottom: 28px; }

@media (max-width: 900px) {
  .stimmungsband-hoch > img { height: 340px; }
  .stimmungsband-hoch .stimmungsband-text h2 { font-size: 24px; }
  #geschichte .abschnitt-titel { font-size: 22px; margin-bottom: 18px; }
}

@media (max-width: 900px) {
  .formularseite { grid-template-columns: 1fr; gap: 28px; padding: 26px var(--seitenrand-handy) 40px; }
  .schritte { gap: 0 8px; }
  .schritt-wort { font-size: 11px; }
  .absenden .knopf-voll { flex: 1; }
}

/* ==========================================================================
   COOKIE-HINWEIS — Streifen unten, Einstellungen im selben Streifen
   ==========================================================================
   Steht ganz am Ende des Blattes und bringt seine eigene Handy-Fassung
   gleich mit. Das ist kein Zufall: In dieser Datei haben schon mehrere
   Bauteile verloren, weil eine spätere Regel mit demselben Namen oder eine
   Medienabfrage VOR der Grundregel stand. Ein Bauteil, das an einem Stück
   am Ende steht, kann von nichts mehr überschrieben werden.

   Keine Vollbildsperre, kein Abdunkeln der Seite: Der Streifen liegt auf,
   der Rest bleibt lesbar und bedienbar.                                    */
.cookiestreifen {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;                     /* über der Nach-oben-Pille (40) */
  background: var(--grund-dunkel);
  color: var(--text-dunkel);
  border-top: 2px solid rgba(var(--gold-rgb), .8);
  box-shadow: 0 -18px 40px -22px rgba(0,0,0,.6);
  max-height: 82vh;
  overflow-y: auto;
}

/* Die Nach-oben-Pille sitzt unten rechts und läge sonst darunter.

   HIER STAND EIN FESTER WERT (172px), UND DER KONNTE NICHT STIMMEN. Wie hoch
   der Streifen ist, weiß nur der Browser: Der Text bricht je nach Fensterbreite
   anders um. Gemessen am 04.08.2026 auf /shop:

       1440 px → 177 px hoch      901 px → 226 px hoch

   Bei 172 px saß die Pille also überall im Streifen — am breiten Fenster
   5 px tief, am schmalen 54 px. Aufgefallen ist es erst jetzt, weil der
   Streifen bis zum 04.08.2026 nie erschien: eine Regel, die niemand ansehen
   konnte, und deshalb eine, die niemand prüfen konnte.

   `--streifen-hoehe` setzt site.js aus der wirklichen Höhe, bei jeder
   Größenänderung neu. 26px ist derselbe Abstand, den die Pille sonst zum
   unteren Rand hält (siehe .nachoben).

   OHNE SKRIPT greift der Rückfallwert. Er ist der GRÖSSTE gemessene, nicht
   der häufigste: Zu hoch heißt, die Pille schwebt am breiten Fenster ein
   Stück zu weit oben — zu niedrig hieße, sie verschwindet im Streifen.
   Von zwei Ungenauigkeiten ist das die harmlose.

   DAS `min()` FÄNGT DEN AUFGEKLAPPTEN ZUSTAND. Die Einstellungen machen aus
   dem Streifen eine lange Liste — bis zu 82vh, dann scrollt er in sich. Die
   Pille säße darüber und schöbe sich bei einem flachen Fenster über die
   Oberkante hinaus. 96px vom oberen Rand ist die Grenze; weiter hinauf geht
   sie nicht, und lieber steht sie einmal auf dem Streifen als gar nicht da.

   Unter 900px erübrigt sich alles: Dort ist die Pille ausgeblendet, solange
   der Streifen steht (siehe die Regel weiter unten).                        */
.seite:has(.cookiestreifen) .nachoben {
  bottom: min(calc(var(--streifen-hoehe, 226px) + 26px), calc(100vh - 96px));
}

.cookieprobe {
  margin: 0;
  padding: 8px var(--seitenrand);
  background: rgba(var(--gold-rgb), .12);
  border-bottom: 1px solid rgba(var(--gold-rgb), .28);
  font-size: 12.5px;
  color: var(--gold-weich);
}
.cookieprobe a { color: var(--gold-weich); border-bottom: 1px solid rgba(231,201,160,.4); }

/* --- Zustand 1: der Hinweis ---------------------------------------------- */
.cookieinhalt {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 44px;
  align-items: center;
  padding: 26px var(--seitenrand);
}
.cookietitel {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: var(--gewicht-halb);
  letter-spacing: -.012em;
  color: var(--text-dunkel-titel);
}
.cookietext p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-dunkel-lead);
  max-width: 66ch;
}
.cookietext a {
  color: var(--gold-weich);
  border-bottom: 1px solid rgba(231,201,160,.4);
}
.cookietext a:hover { color: var(--gold-auf); }

.cookieknoepfe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: none;
}
.cookiereihe { display: flex; gap: 10px; }

/* BEIDE KNÖPFE GLEICH. Kein gefüllter „Alles erlauben“ neben einem blassen
   „Nur das Nötigste“ — das ist der Punkt, an dem eine Einwilligung kippt.  */
.cookieknopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 172px;
  height: 46px;
  padding: 0 22px;
  border: 1px solid rgba(var(--gold-rgb), .8);
  border-radius: var(--radius-pille);
  background: transparent;
  color: var(--gold-auf);
  font: inherit;
  font-size: 14.5px;
  font-weight: var(--gewicht-halb);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--d-schnell) var(--uebergang),
              color var(--d-schnell) var(--uebergang);
}
.cookieknopf:hover { background: rgba(var(--gold-rgb), .16); color: var(--text-dunkel-titel); }

.cookiemehr {
  align-self: center;
  padding-bottom: 3px;
  font-size: 13.5px;
  color: var(--text-dunkel-nav);
  border-bottom: 1px solid rgba(207,194,188,.3);
}
.cookiemehr:hover { color: var(--text-dunkel); }

/* --- Zustand 2: die Einstellungen ---------------------------------------- */
.cookiewahl { padding: 30px var(--seitenrand) 26px; }
.cookiewahl-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.cookiewahl-kopf .cookietitel { margin: 0; }
/* `align-self: center` an .cookiemehr meint die Knopfspalte im Hinweis, wo es
   das Wort unter zwei Knöpfen mittig setzt. In dieser Kopfzeile — und am
   Handy erst recht, wo sie eine Spalte wird — schöbe es den Verweis in die
   Mitte statt an den Rand. Im Spaltenfluss wirkt `baseline` wie flex-start,
   die eine Zeile deckt also beide Breiten ab.                              */
.cookiewahl-kopf .cookiemehr { align-self: baseline; }

.cookieliste { border-top: 1px solid rgba(var(--text-dunkel-rgb), .12); }
.cookiezeile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid rgba(var(--text-dunkel-rgb), .12);
}
.cookiezeile-still .cookiename,
.cookiezeile-still .cookieerklaerung { color: var(--text-dunkel-grenze); }

.cookiename {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
  font-size: 15.5px;
  font-weight: var(--gewicht-halb);
  color: var(--text-dunkel);
}
.cookiemarke {
  padding: 3px 9px;
  border: 1px solid rgba(var(--text-dunkel-rgb), .18);
  border-radius: var(--radius-pille);
  font-size: 10px;
  font-weight: var(--gewicht-normal);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dunkel-grenze);
  white-space: nowrap;
}
.cookieerklaerung {
  margin: 5px 0 0;
  max-width: 70ch;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-dunkel-weich);
}

/* --- Die Schalter --------------------------------------------------------
   Das Kästchen selbst bleibt im Markup und bedienbar, es steht nur nicht im
   Bild — `display:none` nähme ihm den Tastaturfokus, und dann wäre die
   Einstellung ohne Maus nicht mehr erreichbar.                             */
.cookieschalter-feld,
.cookieschalter-fest {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  cursor: pointer;
}
.cookieschalter-fest { cursor: default; }
.cookiewort {
  font-size: 12px;
  color: var(--text-dunkel-grenze);
  white-space: nowrap;
}
.cookieschalter-feld input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cookieschalter {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 46px;
  height: 26px;
  padding: 0 3px;
  border: 1px solid rgba(var(--text-dunkel-rgb), .2);
  border-radius: var(--radius-pille);
  background: rgba(var(--text-dunkel-rgb), .08);
  transition: background var(--d-schnell) var(--uebergang),
              border-color var(--d-schnell) var(--uebergang);
}
.cookieschalter::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #6D655F;
  transition: transform var(--d-schnell) var(--uebergang),
              background var(--d-schnell) var(--uebergang);
}
.cookieschalter-feld input:checked + .cookieschalter,
.cookieschalter-an {
  background: rgba(var(--gold-rgb), .28);
  border-color: rgba(var(--gold-rgb), .45);
}
.cookieschalter-feld input:checked + .cookieschalter::before,
.cookieschalter-an::before {
  transform: translateX(20px);
  background: var(--gold);
}
/* Der Fokusring gehört an den sichtbaren Schalter, nicht an das versteckte
   Kästchen — sonst zeichnet der Browser ihn auf einen Punkt.               */
.cookieschalter-feld input:focus-visible + .cookieschalter {
  outline: var(--fokus);
  outline-offset: var(--fokus-abstand);
}
/* Nicht eingesetzte Gruppe: der Schalter ist ein Bild, kein Angebot.       */
.cookiezeile-still .cookieschalter { opacity: .5; }
.cookieschalter-fest .cookieschalter-an { opacity: .6; }

.cookiewahl-fuss {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.cookiedauer {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-dunkel-grenze);
}

@media (prefers-reduced-motion: reduce) {
  .cookieschalter,
  .cookieschalter::before { transition: none; }
}

/* --- Am Handy -------------------------------------------------------------
   Die Knöpfe untereinander und über die volle Breite. Nebeneinander wären
   sie unter 390 px zu schmal — `min-width: 172px` zweimal plus Abstand
   passt dort nicht mehr, und die Reihe liefe aus dem Bild.                 */
@media (max-width: 900px) {
  .cookieprobe { padding: 8px var(--seitenrand-handy); }

  .cookieinhalt {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px var(--seitenrand-handy) 24px;
  }
  .cookietitel { font-size: 16px; }
  .cookietext p { font-size: 13.5px; }

  .cookiereihe { flex-direction: column; }
  .cookieknopf { width: 100%; min-width: 0; height: 48px; font-size: 15px; }
  .cookiemehr { padding-top: 6px; }

  .cookiewahl { padding: 22px var(--seitenrand-handy) 24px; }
  .cookiewahl-kopf { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cookiezeile { grid-template-columns: 1fr; gap: 12px; }
  .cookieschalter-feld,
  .cookieschalter-fest { justify-content: flex-start; }
  .cookiewahl-fuss { flex-direction: column; align-items: stretch; gap: 14px; }
  .cookiewahl-fuss .cookiereihe { width: 100%; }

  .seite:has(.cookiestreifen) .nachoben { display: none; }
}

/* Ein einziges Kind für `.inhaltsseite`.
   `.inhaltsseite` ist ein Grid mit `gap: 56px`. Jedes DIREKTE Kind wird
   damit zu einer eigenen Rasterzeile, und zwischen Überschrift und Liste
   klaffen 56 Pixel, die niemand angeordnet hat. Wer dort ohne `inhalt_start()`
   baut, braucht deshalb genau eine Hülle — dann gilt wieder der normale
   Fluss aus Rändern.                                                       */
.einspalter { min-width: 0; }

/* ==========================================================================
   SUCHÜBERLAGERUNG — Zustand 02 aus `Elas3DStudio Suche.dc.html`

   HIER GELTEN DIE FARBEN DES ENTWURFS UNVERÄNDERT. Auf der Seite /suche
   mussten sie übersetzt werden, weil dort heller Inhaltsgrund liegt; die
   Überlagerung ist genau der dunkle Kasten, den der Entwurf zeichnet.

   Sie erscheint NUR mit JavaScript — ohne bleibt sie `hidden`, und die Lupe
   führt auf /suche.
   ========================================================================== */
.suchschleier {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(14,12,18,.72);
  /* Nicht mittig: Ein Suchfeld gehört nach oben, dorthin, wo die Lupe war —
     sonst springt der Blick beim Öffnen quer über den Schirm.             */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 76px 24px 24px;
  overflow-y: auto;
}
.suchschleier[hidden] { display: none; }

/* Der Hintergrund bleibt stehen und scrollt nicht weg — so der Entwurf.   */
html.suche-offen { overflow: hidden; }

.suchkasten {
  width: 100%;
  max-width: 860px;
  background: var(--grund-dunkel);
  border: 1px solid rgba(var(--text-dunkel-rgb), .12);
  color: var(--text-dunkel);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 100px);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.75);
}

.suchkasten-kopf {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
  margin: 0 30px;
  padding: 22px 0 14px;
  border-bottom: 1px solid rgba(var(--gold-rgb), .55);
}
.suchkasten-lupe { flex: none; display: flex; color: var(--text-dunkel-rubrik); }
.suchkasten-lupe svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round;
}
.suchkasten-kopf input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 2px 0;
  font: inherit;
  font-size: 26px;
  font-weight: 300;
  letter-spacing: -.02em;
  color: var(--text-dunkel-titel);
  -webkit-appearance: none;
  appearance: none;
}
/* Derselbe Fall wie in .suchleiste, hier in der dunklen Suchüberlagerung:
   Linienfeld mit goldenem Unterstrich, `:focus { outline: none }` ohne Ersatz.
   Der Ring geht an die Zeile, Begründung siehe dort. Auf dem Nachtgrund hat
   Gold reichlich Kontrast — anders als auf den hellen Formularfeldern.     */
.suchkasten-kopf input[type="search"]:focus-visible {
  outline: var(--fokus);
  outline-offset: 4px;
  border-radius: var(--radius-klein);
}
.suchkasten-kopf:has(input[type="search"]:focus-visible) {
  outline: var(--fokus);
  outline-offset: 6px;
  border-radius: var(--radius-klein);
}
.suchkasten-kopf:has(input[type="search"]:focus-visible) input[type="search"] { outline: none; }
.suchkasten-kopf input::placeholder { color: var(--text-dunkel-weich); }
.suchkasten-kopf input[type="search"]::-webkit-search-cancel-button { display: none; }

.suchkasten-zahl {
  flex: none;
  font-size: 13px;
  color: var(--text-dunkel-grenze);
  white-space: nowrap;
}
.suchkasten-zu {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--text-dunkel-rgb), .22);
  background: none;
  color: var(--text-dunkel-nav);
  font-size: 16px;
  cursor: pointer;
}
.suchkasten-zu:hover { border-color: rgba(var(--gold-rgb), .75); color: var(--gold-auf); }

.suchkasten-leib {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 30px 26px;
}

.suchkasten-fuss {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 30px 16px;
  border-top: 1px solid rgba(var(--text-dunkel-rgb), .10);
  font-size: 13px;
  color: var(--text-dunkel-grenze);
}
/* Die Tastaturzeile nur dort, wo es eine Tastatur gibt. Entschieden über
   `hover: hover` und nicht über die Breite: Ein Fenster kann schmal sein und
   trotzdem an einem Rechner hängen.                                        */
.suchkasten-tasten { display: none; }
@media (hover: hover) and (pointer: fine) { .suchkasten-tasten { display: inline; } }
.suchkasten-alle { color: var(--gold-weich); white-space: nowrap; margin-left: auto; }

/* --- Die Zeilen im Dunkeln ---------------------------------------------- */
.suchkasten .suchleiste-lupe { color: var(--text-dunkel-rubrik); }   /* auf --grund-dunkel 8,4:1 */
.suchkasten .such-gruppe { color: var(--text-dunkel-rubrik); margin-top: 22px; }
.suchkasten .such-gruppe:first-child { margin-top: 0; }
.suchkasten .such-zeile { border-radius: 0; }
.suchkasten .such-zeile:hover,
.suchkasten .such-zeile-wahl { background: rgba(var(--text-dunkel-rgb), .06); }
.suchkasten .such-name  { color: var(--text-dunkel); }
.suchkasten .such-fund  { color: var(--text-dunkel-weich); }
.suchkasten .such-pfad  { color: var(--text-dunkel-grenze); }
.suchkasten .such-preis { color: var(--text-dunkel); }
.suchkasten .such-kat   { color: var(--text-dunkel-rubrik); }
.suchkasten .such-blatt { box-shadow: none; }
.suchkasten .such-blatt-seite {
  background: rgba(var(--text-dunkel-rgb), .06);
  color: var(--text-dunkel-rubrik);
}
.suchkasten .such-fund mark,
.suchkasten .such-name mark { background: rgba(var(--gold-rgb), .28); color: var(--gold-auf); }

.suchkasten .such-familien { background: rgba(var(--text-dunkel-rgb), .1); border-color: rgba(var(--text-dunkel-rgb), .1); }
.suchkasten .such-familie  { background: var(--grund-dunkel); }
.suchkasten .such-familie:hover { background: rgba(var(--text-dunkel-rgb), .05); }
.suchkasten .such-familie-name { color: var(--text-dunkel); }
.suchkasten .such-familie-zahl { color: var(--text-dunkel-grenze); }
.suchkasten .such-familie-leer .such-familie-name { color: var(--text-dunkel-weich); }
.suchkasten .such-oft-titel { color: var(--text-dunkel-rubrik); }

.pille-dunkel {
  border-color: rgba(var(--text-dunkel-rgb), .2);
  color: var(--text-dunkel-nav);
  background: none;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.pille-dunkel:hover { border-color: rgba(var(--gold-rgb), .75); color: var(--gold-auf); }

.such-nichts { padding: 6px 0 4px; }
.suchkasten .such-leer-titel { color: var(--text-dunkel-titel); }
.suchkasten .such-leer-titel em { color: var(--gold-weich); }
.suchkasten .such-leer-text  { color: var(--text-dunkel-weich); }

/* --- Am Handy vollflächig ------------------------------------------------
   „Bei 390 px ist alles andere Gefummel" (Entwurf).                       */
@media (max-width: 620px) {
  .suchschleier { padding: 0; background: var(--grund-dunkel); }
  .suchkasten {
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: 0;
    box-shadow: none;
  }
  .suchkasten-kopf  { margin: 0 16px; padding-top: 14px; }
  .suchkasten-kopf input[type="search"] { font-size: 19px; }
  .suchkasten-leib  { padding: 18px 12px 22px; }
  .suchkasten-fuss  { padding: 12px 18px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .suchkasten .such-familien { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   GESCHENKGUTSCHEIN — nach `claude/gutschein/geschenkgutschein.html`

   DIE KARTE IST HTML UND KEIN BILD. Das ist die tragende Entscheidung des
   Entwurfs: Ein Bild ließe sich nicht beim Tippen ändern, wäre auf jedem
   Schirm anders scharf und müsste fürs PDF noch einmal gebaut werden. Als
   Markup ist sie eine Vorlage, die dreimal dasselbe liefert.

   Sie ist der einzige dunkle Fleck auf einer hellen Seite — deshalb stehen
   hier die Farbwerte des Entwurfs unverändert.
   ========================================================================== */
/* DER ENTWURF IST UEBERPACKT — nachgemessen am 03.08.2026: Bei 452 px
   Breite fasst die Karte 279 px Hoehe, ihr Inhalt braucht 301. Die Widmung
   stiess deshalb durch den Goldrahmen, und im Entwurf selbst waren "Gueltig
   bis" und die zweite Widmungszeile abgeschnitten.

   NICHT das Verhaeltnis 1,62 : 1 wurde geaendert — das ist der Goldene
   Schnitt, es steht so im Auftrag und das PDF haengt daran. Stattdessen ist
   das ganze Innenleben um den Faktor 0,92 verkleinert. Damit bleibt JEDES
   Groessenverhaeltnis des Entwurfs erhalten, es passt nur hinein.

   Alle Masse stehen in `cqw` — Prozent der Kartenbreite. Dadurch skaliert
   der Inhalt mit der Karte: Was einmal passt, passt in jeder Groesse. Genau
   das braucht auch das PDF, das laut Auftrag dieselbe Vorlage rendern soll
   statt einer zweiten.                                                     */
.gutschein-karte {
  position: relative;
  /* Bezugsrahmen fuer die cqw-Werte darin — siehe Block unten. */
  container-type: inline-size;
  width: 100%;
  max-width: 452px;
  aspect-ratio: 1.62 / 1;
  background: linear-gradient(152deg, #1D1822 0%, var(--grund-dunkel) 54%, #191521 100%);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .42), 0 30px 60px -30px rgba(0,0,0,.85);
  overflow: hidden;
  color: var(--text-dunkel);
}
/* Im Hero liegt sie leicht schief — wie ein Stück Papier, das jemand
   hingelegt hat. In der Vorschau nicht: Dort wird geprüft, nicht dekoriert. */
.gk-gekippt { transform: rotate(-1.4deg); }

.gk-linien {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
              rgba(var(--text-dunkel-rgb), .035) 0 1px, transparent 1px 9px);
}
.gk-wolke {
  position: absolute; left: -70px; top: -90px;
  width: 250px; height: 250px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--gold-rgb), .30) 0%, rgba(var(--gold-rgb), 0) 68%);
  filter: blur(22px); pointer-events: none;
}
.gk-rahmen { position: absolute; inset: 2.9cqw; border: 1px solid rgba(var(--gold-rgb), .30); pointer-events: none; }
.gk-oberkante {
  position: absolute; left: 2.9cqw; right: 2.9cqw; top: 2.9cqw; height: 1px;
  background: linear-gradient(to right, rgba(var(--gold-rgb), 0), rgba(var(--gold-rgb), .9), rgba(var(--gold-rgb), 0));
}

/* 24 statt 30 Pixel senkrecht — auch das gegen den Ueberlauf des Entwurfs.
     Bei 30 lief der Inhalt selbst mit gedeckelter Bildmarke noch 16 px ueber,
     und was ueberlaeuft, ist die Widmung: genau der Teil, den jemand selbst
     geschrieben hat. Waagerecht bleiben die 34 des Entwurfs. */
.gk-inhalt {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  padding: 5.06cqw 6.9cqw;
  display: flex;
  flex-direction: column;
}
.gk-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 3.22cqw; }
.gk-titel {
  font-size: 1.93cqw; font-weight: var(--gewicht-halb);
  letter-spacing: .28em; text-transform: uppercase; color: var(--text-dunkel-rubrik);
}
.gk-marke {
  font-family: var(--schrift-kursiv); font-style: italic;
  font-size: 3.86cqw; color: var(--gold-weich); margin-top: 1.38cqw;
}
/* Die Bildmarke in Gold. Kein zweites Bild dafür — dieselbe Datei, umgefärbt;
   sonst laufen zwei Marken auseinander, sobald eine getauscht wird.

   BEGRENZT WIRD DIE HÖHE, NICHT DIE BREITE — Abweichung vom Entwurf, und
   zwar eine notwendige. Dort steht `width:44px`, aber `logo-marke.png` ist
   hochkant (433 × 635): 44 px breit sind 66 px hoch. Damit wurde der Kopf so
   hoch, dass der Inhalt aus der Karte lief — im Entwurf um 29 px
   nachgemessen, die Widmung und „Gültig bis" waren dort abgeschnitten. Bei
   44 px Höhe passt alles, und die Marke sieht in der Ecke gleich groß aus.  */
.gk-zeichen {
  height: 8.92cqw; width: auto; opacity: .9; flex: none;
  filter: brightness(0) invert(1) sepia(1) saturate(1.6) hue-rotate(-12deg);
}

.gk-mini {
  font-size: 1.93cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dunkel-grenze);
}
.gk-wert { margin-top: auto; }
.gk-wert .gk-mini { margin-bottom: .368cqw; }
.gk-betragzeile { display: flex; align-items: baseline; gap: 8px; }
/* Zahlen in Flex-Zeilen nie schrumpfen lassen (AUFTRAG, Falle 5).          */
/* 13,0 statt 13,7 cqw (62 px bei 452): Der Entwurf hat die Karte zu voll
   gepackt — mit zweizeiliger Widmung stiess die letzte Zeile durch den
   Goldrahmen. Der Betrag ist der einzige Posten mit Spielraum; drei Pixel
   weniger sieht niemand, eine abgeschnittene Widmung schon. */
.gk-betrag {
  font-family: var(--schrift-kursiv); font-size: 11.96cqw; line-height: .96;
  color: var(--text-dunkel-titel); white-space: nowrap; flex: none;
}
.gk-euro {
  font-family: var(--schrift-kursiv); font-size: 6.9cqw; color: var(--gold-weich);
  white-space: nowrap; flex: none;
}

.gk-fuss {
  margin-top: 2.39cqw; padding-top: 2.39cqw;
  border-top: 1px solid rgba(var(--text-dunkel-rgb), .14);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 3.68cqw;
}
.gk-fuer { min-width: 0; }
.gk-empfaenger {
  font-size: 2.85cqw; color: var(--text-dunkel); margin-top: .828cqw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Zwei Zeilen passen sicher, der Rest wird abgeschnitten — der Entwurf legt
   die Grenze auf 90 Zeichen, `max-height` fängt den Rest ab.               */
.gk-gruss {
  font-family: var(--schrift-kursiv); font-style: italic; font-size: 3.04cqw;
  color: var(--text-dunkel-rubrik); margin-top: 1.2cqw; line-height: 1.45;
  max-height: 8.83cqw; overflow: hidden;
}
.gk-code { text-align: right; flex: none; }
.gk-codewert {
  font-size: 2.58cqw; font-weight: var(--gewicht-halb); letter-spacing: .14em;
  color: var(--gold-weich); margin-top: .828cqw; white-space: nowrap;
}
.gk-gueltig { font-size: 2.02cqw; color: var(--text-dunkel-grenze); margin-top: 1.01cqw; white-space: nowrap; }

/* --- Der Hero: die Karte steht IM dunklen Band --------------------------
   Zuerst lag sie darunter auf hellem Grund. Falsch: Eine dunkle Karte auf
   dunklem Grund ist ein Gegenstand, dieselbe Karte auf Creme ist ein Bild
   von einem Gegenstand. Der Entwurf setzt sie deshalb neben die
   Ueberschrift, zwei gleiche Spalten, senkrecht mittig.                    */
.hero-gutschein {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
  padding: 52px var(--seitenrand) 62px;
}
.hero-gutschein-faden { z-index: 0; }
/* Text und Karte ueber den Faden — sonst laeuft die Linie durch die
   Schrift. */
.hero-gutschein-text, .hero-gutschein-karte { position: relative; z-index: 1; }
.hero-gutschein-text { min-width: 0; }
.hero-gutschein-kicker { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
/* Der glimmende Punkt. Er pulst ueber dieselbe Regel wie die Funken im Hero
   der Startseite und steht still, sobald jemand weniger Bewegung wuenscht. */
.hero-gutschein-funke {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--gold); box-shadow: 0 0 14px 3px rgba(var(--gold-rgb), .65);
  animation: funke 3.4s ease-in-out infinite;
}
@keyframes funke {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.25); }
}
.hero-gutschein-titel {
  margin: 0;
  font-size: 52px; font-weight: 300; letter-spacing: -.04em; line-height: 1.06;
  color: var(--text-dunkel-titel);
}
.hero-gutschein-titel em {
  font-family: var(--schrift-kursiv); font-style: italic;
  font-size: 58px; color: var(--gold-weich);
}
.hero-gutschein-text-lead {
  margin: 22px 0 0; max-width: 54ch;
  font-size: 16px; line-height: 1.75; color: var(--text-dunkel-weich);
}
.hero-gutschein-knoepfe {
  display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; align-items: center;
}
.hero-gutschein-haupt {
  display: inline-flex; align-items: center; box-sizing: border-box; height: 48px;
  border: 1px solid rgba(var(--gold-rgb), .8); color: var(--gold-auf);
  border-radius: var(--radius-pille); padding: 0 26px;
  font-size: 15px; font-weight: var(--gewicht-halb);
  box-shadow: 0 0 30px -8px rgba(var(--gold-rgb), .55);
}
.hero-gutschein-haupt:hover { background: rgba(var(--gold-rgb), .14); color: var(--gold-auf); }
.hero-gutschein-neben {
  display: inline-flex; align-items: center; box-sizing: border-box; height: 48px;
  color: var(--text-dunkel-nav); font-size: 15px; padding: 0 4px;
  border-bottom: 1px solid rgba(207,194,188,.3);
}
.hero-gutschein-neben:hover { color: var(--text-dunkel); border-bottom-color: var(--gold); }
.hero-gutschein-karte { display: flex; justify-content: flex-end; }

@media (max-width: 900px) {
  .hero-gutschein { grid-template-columns: 1fr; gap: 34px; padding-bottom: 44px; }
  .hero-gutschein-titel { font-size: 38px; }
  .hero-gutschein-titel em { font-size: 42px; }
  .hero-gutschein-karte { justify-content: flex-start; }
}
@media (max-width: 560px) {
  .hero-gutschein { padding-inline: var(--seitenrand-handy); }
  .hero-gutschein-titel { font-size: 32px; }
  .hero-gutschein-titel em { font-size: 35px; }
}

/* Kein eigener Abstand nach unten: Der naechste Abschnittskopf bringt seinen
   mit. Zusammen waren es 122 px — eine Luecke, in der die Seite auseinander
   faellt.                                                                  */
.gutschein-vorteile {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--linie); border: 1px solid var(--linie);
}

/* Abschnittskopf INNERHALB der Inhaltsspalte.
   `.abschnitt-kopf` ist fuer Baender ueber die ganze Seitenbreite gebaut und
   bringt `padding: 66px var(--seitenrand) 24px` mit. Steht er in `.einspalter`,
   zaehlt der Seitenrand ein zweites Mal — die Ueberschrift ruecke gegenueber
   allem darueber nach rechts ein — und 66 px oben sind dort zu viel, weil
   kein Bandwechsel dazukommt.                                              */
.abschnitt-kopf-innen { padding: 40px 0 20px; }
.gutschein-vorteil { background: var(--grund-weiss); padding: 22px 24px 24px; }
.gutschein-vorteil-strich { display: block; width: 22px; height: 1px; margin-bottom: 16px; }
.gutschein-vorteil-titel { font-size: 15.5px; font-weight: var(--gewicht-halb); }
.gutschein-vorteil-text {
  margin-top: 7px; font-size: 13.5px; line-height: 1.7; color: var(--text-hell-weich);
}

/* --- Zusammenstellen ----------------------------------------------------- */
.gutschein-bau {
  display: grid; grid-template-columns: 1.04fr .96fr; gap: 40px;
  align-items: start; margin-bottom: 56px;
}
.gutschein-felder { border: 1px solid var(--linie); background: var(--grund-weiss); padding: 24px 26px 28px; }

.gutschein-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.gutschein-marke {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bronze); font-weight: var(--gewicht-halb);
}
.gutschein-gegen { font-size: 13px; color: var(--text-hell-meta); white-space: nowrap; flex: none; }

.gutschein-stufen { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gutschein-stufe {
  border: 1px solid var(--feld-rand); border-radius: var(--radius-pille);
  background: var(--grund-weiss); color: var(--text-hell);
  box-sizing: border-box; height: 48px; min-width: 82px;
  font: inherit; font-size: 15px; font-weight: var(--gewicht-halb);
  padding: 0 20px; cursor: pointer; white-space: nowrap;
  transition: border-color var(--d-schnell) var(--uebergang),
              background var(--d-schnell) var(--uebergang);
}
.gutschein-stufe:hover { border-color: var(--gold); }
/* Die gewählte Stufe wird GEFÜLLT, nicht eingefärbt: `#242933` ist der
   Textton der Seite, nicht die Handlungsfarbe. So steht es in der lebenden
   Fassung des Entwurfs (`chip()`), und es ist auch richtig: Rosé ist hier
   für den Kaufknopf reserviert, und zwei rosa Flächen untereinander lassen
   offen, welche davon der Abschluss ist.                                   */
.gutschein-stufe-an {
  background: var(--text-hell); border-color: var(--text-hell); color: var(--grund-hell);
}

.gutschein-eigen { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.gutschein-eigen-wort { font-size: 13.5px; color: var(--text-hell-weich); flex: none; }
.gutschein-eurofeld {
  display: flex; align-items: center; flex: none;
  border: 1px solid var(--feld-rand); border-radius: 3px; background: var(--feld-grund); overflow: hidden;
}
.gutschein-eurofeld input {
  width: 88px; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 15px; font-weight: var(--gewicht-halb);
  color: var(--text-hell); padding: 12px 0 12px 14px;
}
.gutschein-eurozeichen {
  font-family: var(--schrift-kursiv); font-size: 19px; color: var(--bronze);
  padding: 0 14px 0 6px;
}
.gutschein-eigen-hinweis { font-size: 12.5px; color: var(--text-hell-meta); line-height: 1.6; }
/* Ungültige Eingabe: kein Fehlerdialog, nur ein Ton — auf der Karte steht
   dann „––" und die Summe fällt auf 0. So verlangt es der Entwurf.         */
.gutschein-eigen-hinweis.schief { color: var(--handlung); }

.gutschein-block { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--linie); }
.gutschein-feld {
  width: 100%; box-sizing: border-box; margin-top: 12px;
  border: 1px solid var(--feld-rand); border-radius: 3px; background: var(--feld-grund);
  font: inherit; font-size: 15px; color: var(--text-hell); padding: 13px 14px; outline: none;
}
/* EIN RANDWECHSEL ALLEIN REICHT NICHT. Vorher zeigte der Fokus sich nur daran,
   dass der 1px-Rand von #DCCBBF auf Gold sprang. Gold auf dem Feldgrund
   #FFFDFB erreicht 2,45:1 — WCAG 2.2 SC 1.4.11 verlangt 3:1 für
   Bedienelement-Umrisse. Der Fokus war da und trotzdem kaum zu sehen, und das
   an einem Feld im Bezahlweg. Der Rand darf bleiben, er ist hübsch; tragen
   muss ihn der Ring.                                                       */
.gutschein-feld:focus-visible {
  border-color: var(--gold);
  outline: var(--fokus);
  outline-offset: 2px;
}
.gutschein-widmung { line-height: 1.6; height: 78px; resize: none; }
.gutschein-untertext {
  margin: 8px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--text-hell-meta);
}

.gutschein-wege { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.gutschein-weg {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  border: 1px solid var(--feld-rand); border-radius: 3px; background: var(--grund-weiss);
  color: var(--text-hell); font: inherit; padding: 14px 16px; cursor: pointer;
  transition: border-color var(--d-schnell) var(--uebergang);
}
.gutschein-weg:hover { border-color: var(--gold); }
.gutschein-weg-titel { font-size: 15px; font-weight: var(--gewicht-halb); }
.gutschein-weg-text { font-size: 12.5px; line-height: 1.6; opacity: .82; }
/* Dieselbe Fuellung wie die Stufe — `kachel()` im Entwurf ist bis auf Form
   und Innenabstand identisch mit `chip()`.                                 */
.gutschein-weg-an {
  background: var(--text-hell); border-color: var(--text-hell); color: var(--grund-hell);
}

/* --- Vorschau und Rechnung ----------------------------------------------- */
.gutschein-buehne {
  position: relative; background: var(--grund-dunkel); padding: 26px;
  overflow: hidden; margin-top: 14px;
}
.gutschein-rechnung {
  border: 1px solid var(--linie); border-top: 0; background: var(--feld-grund); padding: 22px 24px 24px;
}
.gutschein-posten {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 14.5px; padding: 11px 0; border-bottom: 1px solid var(--linie-zart);
}
.gutschein-posten:first-child { padding-top: 0; }
.gutschein-zahl { font-weight: var(--gewicht-halb); white-space: nowrap; flex: none; }
.gutschein-summe {
  display: flex; justify-content: space-between; gap: 16px;
  align-items: baseline; padding-top: 14px;
  font-size: 15px; font-weight: var(--gewicht-halb);
}
.gutschein-summezahl {
  font-family: var(--schrift-kursiv); font-size: 28px; font-weight: 400;
  white-space: nowrap; flex: none;
}
.gutschein-ust { margin: 6px 0 0; font-size: 12px; color: var(--text-hell-meta); line-height: 1.6; }
.gutschein-kaufen { width: 100%; box-sizing: border-box; margin-top: 18px; text-align: center; }
/* Der Knopf steht da, ist aber aus, solange es keine Kasse gibt. Sichtbar
   statt versteckt: Der Kasten darunter erklärt, warum.                     */
.gutschein-kaufen[disabled] { opacity: .5; cursor: not-allowed; }
.gutschein-hinweis { margin-top: 14px; }

/* --- Ablauf und Bedingungen ---------------------------------------------- */
.gutschein-ablauf {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px;
  align-items: start; margin-bottom: 46px;
}
.gutschein-schritte {
  position: relative; list-style: none; margin: 0; padding: 0 0 0 30px;
}
.gutschein-schritte::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(to bottom, rgba(var(--gold-rgb), 0), var(--gold) 14%,
              var(--gold) 86%, rgba(var(--gold-rgb), 0));
}
.gutschein-schritte li { position: relative; padding-bottom: 26px; }
.gutschein-schritte li:last-child { padding-bottom: 0; }
.gutschein-schritte li::before {
  content: ""; position: absolute; left: -30px; top: 4px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--grund-hell, var(--grund-hell)); box-shadow: 0 0 0 1.5px var(--gold);
}
/* Der letzte Punkt leuchtet — das Einlösen ist das Ziel der ganzen Kette. */
.gutschein-schritt-ziel::before {
  background: var(--gold) !important;
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 16px 2px rgba(var(--gold-rgb), .5) !important;
}
.gutschein-schritt-titel { font-size: 17px; font-weight: var(--gewicht-halb); }
.gutschein-schritt-text {
  font-size: 14.5px; line-height: 1.7; color: var(--text-hell-weich); margin-top: 5px;
}

.gutschein-bedingungen { border: 1px solid var(--linie); background: var(--grund-weiss); padding: 24px 26px 26px; }
.gutschein-bedingungen h3 { margin: 6px 0 18px; font-size: 22px; font-weight: 300; letter-spacing: -.02em; }
.gutschein-liste { list-style: none; margin: 0; padding: 0; }
.gutschein-liste li {
  position: relative; padding-left: 26px; margin-bottom: 12px;
  font-size: 14px; line-height: 1.7; color: var(--text-hell-weich);
}
/* Zeichen statt Farbe allein: Wer Rot und Grün nicht unterscheidet, sieht
   sonst fünf gleiche Zeilen.                                               */
.gutschein-liste li::before {
  position: absolute; left: 0; top: 0; font-weight: var(--gewicht-halb);
}
.gutschein-liste li.ja::before   { content: "✓"; color: var(--bluete-petrol); }
.gutschein-liste li.nein::before { content: "—"; color: var(--text-hell-meta); }
.gutschein-liste strong { color: var(--text-hell); font-weight: var(--gewicht-halb); }

.gutschein-alternative {
  border-top: 1px solid var(--linie); padding-top: 30px; margin-top: 40px;
}
.gutschein-alternative h3 { margin: 6px 0 12px; font-size: 22px; font-weight: 300; letter-spacing: -.02em; }
.gutschein-alternative p { max-width: 64ch; font-size: 14.5px; line-height: 1.75; color: var(--text-hell-weich); }

@media (max-width: 900px) {
  .gutschein-bau     { grid-template-columns: 1fr; gap: 30px; }
  .gutschein-ablauf  { grid-template-columns: 1fr; gap: 34px; }
  .gutschein-vorteile { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gutschein-wege { grid-template-columns: 1fr; }
  .gutschein-buehne { padding: 16px; }
}

/* --- Gutscheinfeld an der Kasse ------------------------------------------ */
.kasse-gutschein { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--linie); }
.kasse-gutschein label {
  display: block; margin-bottom: 8px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bronze); font-weight: var(--gewicht-halb);
}
.kasse-gutschein-zeile { display: flex; gap: 8px; }
.kasse-gutschein-zeile input {
  flex: 1; min-width: 0; box-sizing: border-box;
  border: 1px solid var(--feld-rand); border-radius: 3px; background: var(--feld-grund);
  font: inherit; font-size: 15px; letter-spacing: .06em;
  color: var(--text-hell); padding: 11px 13px; outline: none;
}
/* Wie .gutschein-feld: Randwechsel auf Gold ergibt 2,45:1 gegen #FFFDFB und
   bleibt unter den 3:1 aus SC 1.4.11. Das hier ist das Gutscheinfeld IN DER
   KASSE — die Stelle, an der ein unsichtbarer Fokus am teuersten ist.      */
.kasse-gutschein-zeile input:focus-visible {
  border-color: var(--gold);
  outline: var(--fokus);
  outline-offset: 2px;
}
.kasse-gutschein-zeile .knopf-schlicht { flex: none; }
.kasse-gutschein-liegt { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }
.kasse-gutschein .meldung { margin: 0 0 12px; }

/* Die Versionsangabe im Fuss. Wie der Adminlink daneben: dezent durch Groesse
   und Platz, NICHT durch weniger Kontrast — `.fuss-schluss` sitzt mit 5,1:1
   schon auf der Untergrenze. Sie erbt die Farbe der Zeile.                  */
.fuss-version { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Das Zahlungslogo in der Kassenauswahl. Es steht NEBEN dem Namen, nicht an
   seiner Stelle — siehe die Begründung in kasse.php. `vertical-align` richtet
   es an der Schrift aus statt an der Grundlinie des Kastens, sonst sitzt es
   sichtbar zu tief.                                                          */
.zahlwahl-logo {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  vertical-align: middle;
}
.zahlwahl-logo img { display: block; }

/* --- Starthinweis auf der Startseite ---------------------------------------
   Ein schmales Band über dem Neustart-Abschnitt. Zurückhaltend gehalten: Es
   soll gelesen und dann vergessen werden, nicht mit dem Inhalt darunter um
   Aufmerksamkeit ringen. Deshalb kein Rot, kein Ausrufezeichen — nur der
   Goldton der Marke als linke Kante.                                         */
.starthinweis {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  max-width: var(--breite-inhalt, 1160px);
  margin: 24px auto 0;
  padding: 14px 18px;
  border-left: 3px solid var(--gold, var(--gold));
  border-radius: 4px;
  background: rgba(var(--gold-rgb), .07);
}
.starthinweis-text {
  flex: 1;
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}
/* Die erste Zeile traegt die Aussage, der Rest erklaert sie — deshalb etwas
   groesser. Am 06.08.2026 nachgezogen: In der ersten Fassung stand alles auf
   15 px und war auf einem hellen Band schlicht zu klein zum Lesen. */
.starthinweis-text strong {
  display: block;
  margin-bottom: 2px;
  font-size: 18px;
  font-weight: var(--gewicht-halb, 600);
}

/* Der Schließknopf braucht 44 px Antippfläche (WCAG 2.5.8), sieht aber
   kleiner aus — deshalb die Fläche über padding statt über die Schriftgröße. */
.starthinweis-zu {
  flex: none;
  width: 44px;
  height: 44px;
  margin: -10px -8px 0 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .55;
}
.starthinweis-zu:hover, .starthinweis-zu:focus-visible { opacity: 1; }

@media (max-width: 640px) {
  .starthinweis { margin-inline: 16px; gap: 8px; }
  .starthinweis-text { font-size: 16px; }
  .starthinweis-text strong { font-size: 17px; }
}

/* Der Platz der Artikelkacheln, solange es keine gibt. Kein Kasten mit
   Ausrufezeichen — er steht mitten auf der Startseite und soll aussehen wie
   ein Teil der Seite, nicht wie eine Störung.                               */
.kachel-leer {
  padding: 36px 28px;
  border: 1px dashed rgba(var(--gold-rgb), .38);
  border-radius: 10px;
  background: rgba(var(--gold-rgb), .04);
  text-align: center;
}
.kachel-leer p { margin: 0 auto; max-width: 46ch; font-size: 16.5px; line-height: 1.6; }
.kachel-leer p + p { margin-top: 14px; }

/* --- Die Geschichte auf „Über uns" ---------------------------------------
   Text links, Zeitleiste rechts. Bis zum 06.08.2026 trug dieser Abschnitt
   .produkt-unten — eine Klasse, die beim Umbau der Produktseite am 04.08. aus
   diesem Stylesheet verschwand. Der Abschnitt hatte danach kein Raster mehr:
   Der Text stand in seiner Lesespalte, die Zeitleiste rutschte darunter, und
   rechts blieb die halbe Seite leer.

   Eigene Klasse statt der geliehenen — damit der nächste Umbau der
   Produktseite diese Seite nicht wieder mitnimmt.                           */
.geschichte-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 56px;
  /* Dieselben 44 px wie .rolle darüber. Ohne sie stand die Überschrift „Wie
     alles anfing" 44 px weiter links als „Ela · Gestaltung" im Block darüber —
     ein Versatz, den man nicht benennen kann, aber sofort sieht. Ändert sich
     der Wert bei .rolle, gehört er hier mit geändert. */
  padding-inline: 44px;
}

/* Die Lesespalte gilt hier nicht: Sie ist für Text über die ganze Breite
   gedacht. In einer halben Spalte schnürt sie ihn ein zweites Mal ein. */
.geschichte-raster .fliess { max-width: none; }

/* Die Zeitleiste beginnt auf Höhe des ersten Absatzes, nicht der Augenbraue —
   sonst steht ihr erster Punkt neben einer Zeile in Versalien und sieht aus,
   als gehörte er dazu. */
.geschichte-raster .zeitleiste { margin-top: 62px; }

@media (max-width: 900px) {
  .geschichte-raster {
    grid-template-columns: 1fr;
    gap: 34px;
    margin-top: 40px;
    padding-inline: 22px;
  }
  .geschichte-raster .zeitleiste { margin-top: 0; }
}

/* „2 auf Lager" hebt sich ab — es ist die Ausnahme, nicht der Normalfall, und
   der Kunde soll sie auf einen Blick erkennen. Grün wäre die naheliegende
   Farbe und wäre falsch: Die Seite kennt kein Grün, und ein Signalton mitten
   in einer Palette aus Gold und Rosé sähe aus wie ein fremdes Element.       */
.lager-titel { color: var(--gold, var(--gold)); }

/* ==========================================================================
   EIGENSCHAFTEN UNSERER 3D-GEDRUCKTEN PRODUKTE — /eigenschaften
   Gestaltung 1:1 aus „Elas3DStudio Eigenschaften.dc.html" (16.08.2026).

   Die Seite sagt vor dem Kauf, was der FDM-Druck kann und was nicht. Sie ist
   deshalb bewusst NICHT die schmale Textspalte der übrigen Serviceseiten
   (`inhalt_start()`), sondern redaktionell gesetzt: Fotos tragen hier so viel
   wie die Sätze, weil eine Schichtlinie sich schwerer beschreiben als zeigen
   lässt.
   ========================================================================== */

/* Alle Abschnitte teilen Breite und Seitenrand des übrigen Shops.            */
.eig-intro, .eig-merkmale, .eig-hinweise, .eig-glas, .eig-pla,
.eig-vergleich, .eig-quellen {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--seitenrand);
}
/* `.eig-studio` steht bewusst NICHT in der Reihe darüber: Bühne und
   Pastellband laufen randlos über die volle Breite, nur die
   Detailkomposition darunter rückt wieder ein.                             */

/* Auf hellem Grund trägt das Kicker-Label Bronze statt des hellen Tons, den
   `.kicker` für die dunklen Bänder mitbringt (dort 8,4:1 — hier wäre er
   1,6:1 und schlicht nicht lesbar).                                         */
.eig-intro .kicker, .eig-kopf .kicker, .eig-glas-text .kicker {
  color: var(--bronze);
  margin-bottom: 14px;
}

.eig-kopf { max-width: 62ch; margin: 0 0 34px; }
.eig-kopf h2 {
  font-size: var(--t-h2);
  font-weight: var(--gewicht-leicht);
  letter-spacing: -.03em;
  margin: 0;
}
.eig-kopf-text {
  margin: 12px 0 0;
  color: var(--text-hell-weich);
  line-height: var(--zeile-text);
}

/* --- Einleitung ----------------------------------------------------------- */
.eig-intro {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 52px;
  align-items: start;
  padding-top: 64px;
}
.eig-intro-text p { line-height: var(--zeile-text); color: var(--text-hell-weich); }
.eig-intro-text > p + p { margin-top: 18px; }

/* Der Hinweiskasten sagt, was KEIN Druckmerkmal ist. Kein Blattbogen, sondern
   ein ruhiger Kasten mit einer Goldkante links — er widerspricht dem übrigen
   Abschnitt, und das soll man sehen.                                        */
.eig-kasten {
  margin-top: 30px;
  padding: 22px 26px;
  background: #F3EDE6;
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-plaettchen);
}
.eig-kasten-titel {
  margin: 0 0 8px;
  font-size: var(--t-mikro);
  font-weight: var(--gewicht-halb);
  letter-spacing: var(--sperrung-mikro);
  text-transform: uppercase;
  color: var(--bronze);
}
.eig-kasten p:last-child { margin: 0; color: var(--text-hell); }

/* DIE GESPIEGELTE BLATTFORM, wie im Entwurf (`0 100% 0 100%`): Die spitze
   Kante zeigt nach innen, zum Text hin. Mit der Grundform zeigte sie nach
   außen und das Blatt kehrte der Spalte den Rücken.                        */
.eig-intro-bild {
  aspect-ratio: 3 / 4;
  border-radius: var(--blatt-gespiegelt);
  overflow: hidden;
  background: var(--grund-platte);
  box-shadow: 0 0 0 1px var(--linie), 0 26px 50px -30px rgba(40,44,53,.5);
}
.eig-intro-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Die sechs Merkmale --------------------------------------------------- */
.eig-merkmale, .eig-hinweise, .eig-glas, .eig-pla, .eig-vergleich, .eig-quellen {
  padding-top: 88px;
}
.eig-karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.eig-karte h3 {
  margin: 16px 0 0;
  font-size: var(--t-h3);
  font-weight: var(--gewicht-halb);
}
.eig-karte p {
  margin: 8px 0 0;
  font-size: var(--t-klein);
  line-height: 1.75;
  color: var(--text-hell-weich);
}
.eig-karte-quelle { color: var(--text-hell-meta) !important; font-size: 12.5px !important; }
.eig-karte-bild {
  aspect-ratio: 4 / 3;
  border-radius: var(--blatt);
  overflow: hidden;
  background: var(--grund-platte);
  box-shadow: 0 0 0 1px var(--linie), 0 24px 46px -28px rgba(40,44,53,.5);
}
/* Jede zweite Karte spiegelt die Blattform — dieselbe Regel wie im Raster.  */
.eig-karte:nth-child(even) .eig-karte-bild { border-radius: var(--blatt-gespiegelt); }
.eig-karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eig-karte-leer {
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px var(--linie);
}
.eig-karte-leer span {
  font-size: var(--t-mikro);
  letter-spacing: var(--sperrung-mikro);
  text-transform: uppercase;
  color: var(--text-hell-meta);
}

/* --- Bevor du es nutzt ---------------------------------------------------- */
.eig-liste { margin: 0; }
.eig-liste-zeile {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 30px;
  padding: 20px 0;
  border-top: 1px solid var(--linie);
}
.eig-liste-zeile:last-child { border-bottom: 1px solid var(--linie); }
.eig-liste dt { font-weight: var(--gewicht-halb); font-size: var(--t-text); }
.eig-liste dd {
  margin: 0;
  color: var(--text-hell-weich);
  line-height: var(--zeile-text);
  font-size: var(--t-klein);
}

/* --- Glaszylinder mit Video ----------------------------------------------- */
/* GEOMETRIE AUS DEM ENTWURF. Zwei Spalten `.95fr 1.05fr`, 56 px Abstand und
   `align-items: center` — die Medienspalte wird dadurch am Text ausgerichtet
   und hängt nicht mehr unter ihm heraus. Foto und Video stehen in EINER
   Spalte untereinander, 18 px auseinander.                                 */
.eig-glas {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 56px;
  align-items: center;
}
.eig-glas-medien { display: flex; flex-direction: column; gap: 18px; }
.eig-glas-foto {
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  overflow: hidden;
  background: var(--grund-platte);
  box-shadow: 0 0 0 1px var(--linie), 0 30px 60px -34px rgba(40,44,53,.5);
}
.eig-glas-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* DER LIEGENDE RAHMEN IST DER DES ENTWURFS (16:10, dunkel, 10 px Ecken). Das
   Video selbst ist hochkant aufgenommen und steht darin mittig — `contain`,
   damit nichts beschnitten wird. Der dunkle Grund ist deshalb kein Notbehelf,
   sondern die Fläche, die der Entwurf dort vorsieht.                       */
.eig-video { margin: 0; }
.eig-video-bild {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  border-radius: 10px;
  background: var(--grund-dunkel);
  object-fit: contain;
  box-shadow: 0 0 0 1px var(--linie), 0 18px 32px -20px rgba(40,44,53,.6);
}
.eig-video figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-hell-meta);
}

.eig-glas-text h2 {
  margin: 0;
  font-size: var(--t-h2);
  font-weight: var(--gewicht-leicht);
  letter-spacing: -.03em;
}
.eig-glas-text p {
  margin: 18px 0 0;
  line-height: var(--zeile-text);
  color: var(--text-hell-weich);
}

/* --- PLA einordnen -------------------------------------------------------- */
.eig-pla-spalten {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 52px;
  align-items: start;
}
.eig-pla-text p { margin: 0 0 18px; line-height: var(--zeile-text); color: var(--text-hell-weich); }
.eig-zitat {
  margin: 0;
  padding: 24px 26px;
  background: #F3EDE6;
  border-radius: var(--radius-plaettchen);
}
.eig-zitat p { margin: 0; color: var(--text-hell); }
.eig-zitat footer {
  margin-top: 12px;
  font-size: var(--t-klein);
  font-family: var(--schrift-kursiv);
  font-style: italic;
  color: var(--text-hell-meta);
}
.eig-pla-liste-titel {
  margin: 0 0 14px;
  font-weight: var(--gewicht-halb);
}
.eig-pla-liste ul { margin: 0; padding: 0; list-style: none; }
.eig-pla-liste li {
  position: relative;
  padding: 11px 0 11px 24px;
  border-top: 1px solid var(--linie);
  font-size: var(--t-klein);
  line-height: 1.65;
  color: var(--text-hell-weich);
}
/* Ein Strich, kein Häkchen: Die sechs Zeilen sagen, was man NICHT tun soll —
   ein Haken davor läse sich wie eine Empfehlung.                            */
.eig-pla-liste li::before {
  content: "–";
  position: absolute;
  left: 4px;
  color: var(--gold);
}

/* --- Vergleichstabelle ---------------------------------------------------- */
.eig-tabelle-huelle { overflow-x: auto; }
.eig-tabelle {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--t-klein);
}
.eig-tabelle th, .eig-tabelle td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linie);
  line-height: 1.6;
}
.eig-tabelle thead th {
  font-size: var(--t-mikro);
  letter-spacing: var(--sperrung-mikro);
  text-transform: uppercase;
  color: var(--bronze);
  border-bottom-color: var(--gold);
}
.eig-tabelle tbody th { font-weight: var(--gewicht-halb); white-space: nowrap; }
.eig-tabelle td { color: var(--text-hell-weich); }
.eig-vergleich-schluss {
  margin: 26px 0 0;
  max-width: 68ch;
  line-height: var(--zeile-text);
  color: var(--text-hell-weich);
}

/* --- Hinter den Kulissen -------------------------------------------------- */
.eig-studio { margin-top: 88px; }

.eig-studio-buehne { position: relative; overflow: hidden; }
.eig-studio-buehne > img {
  display: block;
  width: 100%;
  height: 620px;
  object-fit: cover;
  /* Etwas oberhalb der Mitte: Dort stehen Lampe und Stativ, unten nur Boden. */
  object-position: 50% 35%;
}
/* WAAGERECHT UND NICHT VON UNTEN. Der Text steht links; nur dort muss der
   Grund dunkel genug sein, damit er lesbar bleibt. Nach rechts läuft der
   Verlauf aus — so kommt das Foto ins Bild, statt hinter einem Schleier zu
   liegen. Werte 1:1 aus dem Entwurf.                                       */
.eig-studio-schleier {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(var(--grund-dunkel-rgb), .92) 0%, rgba(var(--grund-dunkel-rgb), .66) 36%, rgba(var(--grund-dunkel-rgb), .10) 74%);
}
.eig-studio-text {
  position: absolute;
  left: var(--seitenrand);
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 44ch;
}
.eig-studio-text .kicker { color: var(--text-dunkel-rubrik); margin-bottom: 16px; }
.eig-studio-text h2 {
  margin: 0 0 18px;
  font-size: 36px;
  font-weight: var(--gewicht-leicht);
  letter-spacing: -.03em;
  line-height: 1.18;
  color: var(--text-dunkel-titel);
}
.eig-studio-text p {
  margin: 0;
  max-width: 40ch;
  color: var(--text-dunkel-lead);
  line-height: 1.78;
}

/* RANDLOS UND OHNE RUNDE ECKEN — die beiden Felder stoßen aneinander und an
   die Seitenkanten. Ein Kasten mit Rand machte daraus eine Karte auf der
   Seite; so sind sie ein Band, das die Seite durchschneidet.               */
.eig-band { display: grid; grid-template-columns: 1fr 1fr; }
.eig-band-teil { padding: 40px 44px 44px; }
.eig-band-rose   { background: var(--kat-rose-flaeche);   color: var(--kat-rose-text); }
.eig-band-petrol { background: var(--kat-petrol-flaeche); color: var(--kat-petrol-text); }
.eig-band-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: var(--t-mikro);
  font-weight: var(--gewicht-halb);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.eig-band-kicker .punkt { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.eig-band-rose   .eig-band-kicker { color: var(--kat-rose-ziffer); }
.eig-band-rose   .eig-band-kicker .punkt { background: var(--bluete-rose); }
.eig-band-petrol .eig-band-kicker { color: var(--kat-petrol-ziffer); }
.eig-band-petrol .eig-band-kicker .punkt { background: var(--bluete-petrol); }
.eig-band-satz {
  margin: 16px 0 0;
  font-size: 25px;
  font-weight: var(--gewicht-leicht);
  letter-spacing: -.022em;
  color: var(--text-hell);
}
.eig-band-teil p:last-child {
  margin: 14px 0 0;
  max-width: 44ch;
  line-height: 1.75;
  font-size: 15px;
}

/* Die Detailkomposition rückt wieder in den Container ein.                 */
.eig-detail {
  max-width: var(--container);
  margin: 0 auto;
  padding: 44px var(--seitenrand) 0;
  display: grid;
  grid-template-columns: .6fr .4fr;
  gap: 52px;
  align-items: center;
}
/* Der Rand rechts und unten ist der Platz, in den die kleine Karte ragt.   */
.eig-detail-bilder { position: relative; padding: 0 64px 44px 0; }
.eig-detail-gross {
  aspect-ratio: 16 / 11;
  border-radius: var(--blatt-gespiegelt);
  overflow: hidden;
  background: var(--grund-platte);
  box-shadow: 0 0 0 1px var(--linie), 0 24px 46px -28px rgba(40,44,53,.5);
}
.eig-detail-gross img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eig-detail-klein {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background: var(--grund-platte);
  box-shadow: 0 0 0 4px var(--grund-hell), 0 18px 32px -16px rgba(40,44,53,.55);
}
.eig-detail-klein img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
  box-sizing: border-box;
}
.eig-detail-marke {
  margin: 0 0 16px;
  font-size: var(--t-mikro);
  font-weight: var(--gewicht-halb);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bronze);
}
.eig-detail-satz {
  margin: 0 0 12px;
  font-size: var(--t-klein);
  line-height: 1.7;
  color: var(--text-hell-weich);
}

/* --- Quellen -------------------------------------------------------------- */
.eig-quellen-titel {
  margin: 0 0 20px;
  font-size: var(--t-h3);
  font-weight: var(--gewicht-halb);
}
.eig-quellen ul {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 52px;
}
.eig-quellen li {
  break-inside: avoid;
  padding: 10px 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-hell-meta);
}
.eig-quellen li strong { color: var(--text-hell-weich); font-weight: var(--gewicht-halb); }

/* --- Schluss auf dunklem Grund -------------------------------------------- */
.eig-schluss {
  margin-top: 88px;
  padding: 72px var(--seitenrand);
  background: var(--grund-dunkel);
  text-align: center;
}
.eig-schluss .kicker { margin-bottom: 16px; }
.eig-schluss h2 {
  margin: 0 auto;
  max-width: 22ch;
  font-size: var(--t-h2);
  font-weight: var(--gewicht-leicht);
  letter-spacing: -.03em;
  color: var(--text-dunkel-titel);
}
.eig-schluss > p {
  margin: 16px auto 0;
  max-width: 54ch;
  color: var(--text-dunkel-lead);
  line-height: var(--zeile-text);
}
.eig-schluss-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.eig-schluss-zweit { color: var(--text-dunkel-nav); font-size: 15px; text-decoration: underline; }
.eig-schluss-zweit:hover { color: var(--text-dunkel); }

/* --- Am Telefon ----------------------------------------------------------- */
@media (max-width: 900px) {
  .eig-intro, .eig-pla-spalten { grid-template-columns: 1fr; gap: 34px; }
  .eig-glas { grid-template-columns: 1fr; gap: 34px; }
  .eig-karten { grid-template-columns: 1fr 1fr; gap: 22px; }
  .eig-quellen ul { columns: 1; }
  .eig-detail { grid-template-columns: 1fr; gap: 34px; }
  .eig-studio-buehne > img { height: 480px; }
}
@media (max-width: 700px) {
  .eig-intro, .eig-merkmale, .eig-hinweise, .eig-glas, .eig-pla,
  .eig-vergleich, .eig-studio, .eig-quellen {
    padding-left: var(--seitenrand-handy);
    padding-right: var(--seitenrand-handy);
    padding-top: 52px;
  }
  .eig-karten { grid-template-columns: 1fr; }
  .eig-liste-zeile { grid-template-columns: 1fr; gap: 6px; }
  .eig-band { grid-template-columns: 1fr; }
  .eig-band-teil { padding: 30px var(--seitenrand-handy) 34px; }
  /* Am Telefon ist links kein Platz für einen dunklen Streifen neben dem
     Foto — hier verläuft der Schleier wieder von unten, und der Text sitzt
     darauf.                                                                */
  .eig-studio-buehne > img { height: 420px; }
  .eig-studio-schleier {
    background: linear-gradient(to top,
      rgba(var(--grund-dunkel-rgb), .94) 0%, rgba(var(--grund-dunkel-rgb), .72) 52%, rgba(var(--grund-dunkel-rgb), .15) 100%);
  }
  .eig-studio-text {
    left: var(--seitenrand-handy);
    right: var(--seitenrand-handy);
    justify-content: flex-end;
    padding-bottom: 28px;
  }
  .eig-studio-text h2 { font-size: var(--t-h2-handy); }
  .eig-detail { padding: 34px var(--seitenrand-handy) 0; }
  /* Die kleine Karte tritt aus der Überlappung heraus: Bei 46 % von 320 px
     wären es 147 px, und darauf ist das Schild nicht mehr zu lesen.         */
  .eig-detail-bilder { padding: 0; }
  .eig-detail-klein { position: static; width: 100%; margin-top: 20px; }
  .eig-schluss { padding: 52px var(--seitenrand-handy); margin-top: 52px; }
}

/* --- Der FDM-Hinweis auf jeder Produktseite -------------------------------
   Er gehört zur Rubrik /eigenschaften, steht aber am Produkt: § 476 Abs. 1
   Satz 2 BGB verlangt die Angabe dort, wo gekauft wird. Deshalb hervorgehoben
   und nicht als weiterer Absatz im Fließtext — ein Hinweis, den man überliest,
   ist keiner.                                                                */
.produkt-fdm {
  margin: 26px 0 0;
  padding: 18px 22px;
  background: #F3EDE6;
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-plaettchen);
}
.produkt-fdm-titel {
  margin: 0 0 6px;
  font-size: var(--t-mikro);
  font-weight: var(--gewicht-halb);
  letter-spacing: var(--sperrung-mikro);
  text-transform: uppercase;
  color: var(--bronze);
}
.produkt-fdm p:last-child {
  margin: 0;
  font-size: var(--t-klein);
  line-height: 1.7;
  color: var(--text-hell);
}

/* Der Verweis im Abschlussband der FAQ — auf dunklem Grund.                 */
.aufruf-hinweis {
  margin-top: 14px;
  font-size: var(--t-klein);
  color: var(--text-dunkel-lead);
}
.aufruf-hinweis a { color: var(--gold-weich); text-decoration: underline; }
.aufruf-hinweis a:hover { color: var(--gold-auf); }


/* ── DER FLIESSTEXT UNTER DEN KACHELN (25.08.2026) ──────────────────────────
   Er steht am Ende der Kategorieseite, ueber den drei Merkmalen. Schmal
   gesetzt, weil eine Textspalte ueber die volle Breite niemand liest: 68
   Zeichen sind die Zeile, die das Auge ohne Sprung zurueckfindet. */
.kategorietext {
  /* MARGIN STATT PADDING — wie `.merkmale` daneben. Mit `padding` plus einer
     `max-width` schrumpfte der Block auf 40 px zusammen: Die Breite gilt fuer
     den Inhalt, das Polster kommt obendrauf, und in einem engen Elternteil
     bleibt dann nichts uebrig. Das Muster der Seite ist `margin: … var(--seitenrand)`. */
  margin: 40px var(--seitenrand) 0;
  /* 68 Zeichen sind die Zeile, die das Auge ohne Sprung zurueckfindet. */
  max-width: 68ch;
}
.kategorietext h2 { margin: 0 0 14px; }
.kategorietext p { margin: 0 0 12px; line-height: 1.75; color: var(--text-hell-weich); }
.kategorietext p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .kategorietext { margin: 28px var(--seitenrand-handy) 0; }
}

/* ══ IDEENSEITE (/idee) ════════════════════════════════════════════════════
   Neu am 26.08.2026. Sie benutzt fast durchweg, was schon dasteht —
   .formularseite, .formular, .feld, .karte, .seitenspalte, .knopf-voll.
   Hier steht nur, was es wirklich noch nicht gab: die Farbproben aus dem
   Regal, der Höhenschieber und der Kasten mit der Spanne.

   TON: petrol, die Farbe der Rubrik „Anlässe". Keine neue Farbe, keine
   Ausnahme — der Kasten mit der Spanne ist die auffälligste Stelle der
   Seite und darf trotzdem nicht schreien.                                  */

/* ── Die Farbproben ────────────────────────────────────────────────────────
   ES SIND ECHTE AUSWAHLKNÖPFE, nur anders gezeichnet: Das <input> bleibt
   im Baum und bedienbar, es liegt nur unsichtbar unter dem Feld. Ein
   nachgebautes Steuerelement aus <div>s wäre mit der Tastatur nicht zu
   erreichen und für einen Screenreader gar nichts.                         */
.idee-farbfeld { border: 0; padding: 0; margin-top: 22px; }
.idee-farbfeld legend { padding: 0; }
.idee-farben {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.idee-farbe {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--feld-rand);
  border-radius: var(--radius-klein);
  background: var(--grund-weiss);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.idee-farbe:hover { border-color: var(--bluete-petrol); }
.idee-farbe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.idee-farbe:has(input:checked) {
  border-color: var(--bluete-petrol);
  border-width: 2px;
  padding: 9px 11px;   /* die zwei Pixel Rahmen wieder hereinholen */
  background: var(--kat-petrol-flaeche);
}
/* Der Fokus muss zu SEHEN sein, auch wenn das Feld selbst unsichtbar ist —
   sonst tastet sich niemand mit der Tastatur durch die Farben.             */
.idee-farbe:has(input:focus-visible) { outline: var(--fokus); outline-offset: 2px; }
.idee-farbtupfer {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  /* Ein Rand, weil Weiß auf Weiß sonst verschwindet. */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .16);
  /* DER RÜCKFALL, wenn `idee-stil.php` für diese Farbe keine Regel liefert —
     etwa weil der Farbwert nicht `^#[0-9a-f]{3,8}$` erfüllt. Grau ist sichtbar
     und ehrlich; eine erfundene Farbe wäre schlimmer. Die eigentlichen Werte
     stehen NICHT hier: Sie kommen aus dem Filamentlager und wechseln, dieses
     Stylesheet nicht. */
  background: #d9d3cc;
}
/* Die Probe MIT BILD — für Verlaufsfilamente, die kein einzelner Farbwert
   beschreibt. Dieselbe Grösse und derselbe Rand wie der Punkt, damit beide
   Sorten in einer Reihe stehen können, ohne dass es aussieht wie ein Versehen.
   `object-fit: cover` schneidet mittig zu: Das Foto zeigt eine Rolle, gebraucht
   wird ein Stück Faden. */
img.idee-farbtupfer { object-fit: cover; display: block; }

.idee-farbname { font-size: 14px; line-height: 1.35; }
.idee-farbname small { color: var(--text-hell-meta); font-size: 12px; }

/* ── Eine Farbe, die für DIESES Stück nicht reicht ─────────────────────────
   Gesetzt vom Skript (`farbenPruefen` in site.js), sobald ein Vorlagentyp und
   eine Höhe stehen: Gerechnetes Gewicht plus Zuschlag gegen den Bestand, der
   beim letzten Abgleich aus dem Filamentlager kam.

   AUSGEGRAUT, NICHT GESPERRT. Die Farbe bleibt wählbar — der Bestand ist ein
   Stand von gestern, und eine Sperre wäre eine Gewissheit, die es nicht gibt.
   Also: gedämpft, der Name durchgestrichen, „wird nachbestellt" darunter. Der
   ganze Satz mit der längeren Lieferzeit steht unter dem Raster und erscheint
   erst, wenn jemand die knappe Farbe wirklich wählt.

   `opacity` NICHT AM GANZEN KNOPF: Bei `:has(input:checked)` säße sonst auch
   der Rahmen im Nebel, und die gewählte Farbe wäre nicht mehr als gewählt zu
   erkennen. Gedämpft wird die Beschriftung, der Punkt bleibt kräftig — er ist
   ja die Farbe, um die es geht. */
.idee-farbe.ist-knapp .idee-farbname { color: var(--text-hell-meta); }
.idee-farbe.ist-knapp .idee-farbwort { text-decoration: line-through; }
.idee-farbe.ist-knapp .idee-farbtupfer { opacity: .55; }
/* `.idee-farbname small` OBEN IST SPEZIFISCHER (Klasse + Element schlägt eine
   Klasse allein) — ein blosses `.idee-farbe-nach` verlöre gegen dessen
   `color`, obwohl es später steht. Deshalb hier dieselbe Klasse plus Element.
   Dieselbe Sorte Falle wie die Regel vor der `padding`-Kurzform. */
.idee-farbname small.idee-farbe-nach {
  display: block;
  color: var(--bluete-pflaume);
  font-weight: var(--gewicht-halb);
}
.idee-farbname small.idee-farbe-nach[hidden] { display: none; }

/* Der Satz unter dem Raster. Ruhig, nicht rot: Es ist keine Fehleingabe,
   sondern eine Auskunft über die Lieferzeit. */
.idee-farbe-warnung {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-hell-meta);
  padding-left: 12px;
  border-left: 2px solid var(--bluete-pflaume);
}
.idee-farbe-warnung[hidden] { display: none; }

/* ── Der Höhenschieber ────────────────────────────────────────────────────
   Er ist eine ZUGABE zum Zahlenfeld darüber, kein Ersatz: Ohne JavaScript
   bleibt der Rahmen versteckt (das `hidden` im Markup), und das Zahlenfeld
   trägt allein.

   NEU GEZEICHNET am 27.08.2026. Vorher stand hier eine einzige Zeile mit
   `accent-color` — die färbt den Systemschieber ein und überlässt alles
   Übrige dem Browser: unter Windows ein dünner grauer Strich mit eckigem
   Griff, unter macOS ein anderer, auf dem Handy ein dritter. Neben den von
   Hand gezeichneten Farbproben zehn Zeilen weiter oben war er das einzige
   Stück Fremdgestaltung auf der Seite.

   DER GEFÜLLTE TEIL kommt aus `--fuellung`, das site.js beim Ziehen setzt.
   Das ist erlaubt, obwohl `style-src 'self'` gilt: Die Sperre trifft das
   `style`-ATTRIBUT IM DOKUMENT, nicht das Setzen über das Objektmodell —
   dieselbe Stelle wie `--streifen-hoehe` ganz oben in site.js. Ohne
   JavaScript ist der Schieber ohnehin nicht zu sehen.

   VIER SELEKTOREN, ZWEIMAL DASSELBE. WebKit und Firefox nennen Bahn und
   Griff verschieden, und ein Browser verwirft die GANZE Regel, sobald ein
   Selektor in ihrer Liste ihm unbekannt ist. Sie dürfen deshalb nicht
   zusammengefasst werden, so doppelt das auch aussieht.                    */
.idee-schieber { max-width: 340px; margin-top: 14px; }
.idee-schieber[hidden] { display: none; }
/* Die zwei Freitextfelder („Sonstiges"). Ausdrücklich, obwohl `.feld` heute
   kein `display` setzt: Bekäme es je eines, wäre `hidden` still wirkungslos
   und beide Felder stünden immer offen da. */
.feld[hidden] { display: none; }

#hoehe-schieber {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  /* `.feld-schmal input` deckelt auf 200px — das gilt für den Schieber mit,
     denn er ist auch ein <input>. Hier ausdrücklich zurückgenommen. */
  max-width: none;
  /* Die Bahn misst 6px, die Trefferfläche `--treffer` (44px). Der Rest ist
     durchsichtig und trägt den Finger — unter 44px geht im Haus nichts. */
  height: var(--treffer);
  margin: 0;
  padding: 0;
  background: transparent;
  /* Das Formular gibt jedem <input> Rahmen und Radius. Am Schieber stünde
     davon ein 340 × 44 grosser Kasten um die Bahn — gemessen am 27.08.2026,
     ehe es jemand sah. */
  border: 0;
  border-radius: 0;
  cursor: pointer;
  /* KEIN eigenes `--fuellung` hier. Es kommt vom Rahmen, und eine eigene
     Angabe an dieser Stelle schlüge die geerbte — die Bahn bliebe für immer
     leer, so oft site.js oben auch schriebe. Der Rückfall steht deshalb im
     Verlauf selbst: `var(--fuellung, 0%)`. */
}
#hoehe-schieber:focus { outline: none; }   /* den Fokus trägt der Griff */

#hoehe-schieber::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-pille);
  background: linear-gradient(to right,
    var(--bluete-petrol) 0 var(--fuellung, 0%),
    var(--kat-petrol-flaeche) var(--fuellung, 0%) 100%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .10);
}
#hoehe-schieber::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-pille);
  background: linear-gradient(to right,
    var(--bluete-petrol) 0 var(--fuellung, 0%),
    var(--kat-petrol-flaeche) var(--fuellung, 0%) 100%);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .10);
}

#hoehe-schieber::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--grund-weiss);
  border: 2px solid var(--bluete-petrol);
  box-shadow: 0 1px 3px rgb(0 0 0 / .18);
  /* WebKit setzt den Griff an den OBEREN Rand der Bahn, Firefox mittet ihn
     von selbst. (6 − 24) / 2 = −9 */
  margin-top: -9px;
  transition: transform .12s ease;
}
#hoehe-schieber::-moz-range-thumb {
  width: 24px; height: 24px;
  border: 2px solid var(--bluete-petrol);
  border-radius: 50%;
  background: var(--grund-weiss);
  box-shadow: 0 1px 3px rgb(0 0 0 / .18);
  transition: transform .12s ease;
}
#hoehe-schieber:active::-webkit-slider-thumb { transform: scale(1.14); }
#hoehe-schieber:active::-moz-range-thumb     { transform: scale(1.14); }
#hoehe-schieber:focus-visible::-webkit-slider-thumb { outline: var(--fokus); outline-offset: 3px; }
#hoehe-schieber:focus-visible::-moz-range-thumb     { outline: var(--fokus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  #hoehe-schieber::-webkit-slider-thumb { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  #hoehe-schieber::-moz-range-thumb { transition: none; }
}

/* Die eingestellte Zahl, über dem Griff.

   SIE FÄHRT MIT: `--anteil` (0 bis 1) setzt site.js am Rahmen. Der Weg des
   Griffmittelpunktes ist nicht die volle Breite, sondern sie MINUS einem
   Griff — links und rechts bleibt je ein Radius stehen. Daher die 12px
   (24px Griff ÷ 2) in der Rechnung; ohne sie liefe die Zahl an den Enden
   um einen halben Griff aus dem Ruder.                                     */
.idee-schieber-anzeige {
  position: relative;
  height: 22px;
}
.idee-schieber-wert {
  position: absolute;
  /* UND SIE STÖSST NIRGENDS AN. Über dem Griff gemittet (`-50%`) hinge sie am
     linken Anschlag um ihre halbe Breite aus dem Feld — gemessen am
     27.08.2026: „60 mm" stand 25px links vom Rand. Also darf die Zahl nur
     zwischen zwei Marken laufen; dazwischen — also fast überall — steht sie
     GENAU über dem Griff.

     Die halbe Breite muss dafür beziffert werden, und das ist der einzige
     geschätzte Wert an dieser Stelle. AUF DER SEITE GEMESSEN am 27.08.2026,
     nicht geraten: „60 mm" ist 46px breit, „140 mm" und „400 mm" (die höchste
     Grenze, Tarif „Schild") je 52. Halbe Breite also 23 bis 26 — daraus 28
     mit etwas Luft. Ein erster Versuch mit 36 sass 24px zu früh: Die Zahl
     stand an den Enden sichtbar neben ihrem Griff. Zu gross ist das
     harmlosere von beidem, aber harmlos ist es nicht.

     Ein Ausweg ohne Zahl wäre `translateX(-100% × Anteil)` — der wandert von
     selbst. Er mittet aber nur in der Mitte: bei 180 von 60–220 stand die
     Zahl 37px neben ihrem Griff, und das sieht man. */
  --wert-halb: 28px;
  left: clamp(
    var(--wert-halb),
    calc(12px + (100% - 24px) * var(--anteil, .5)),
    calc(100% - var(--wert-halb)));
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: 19px;
  line-height: 1;
  color: var(--kat-petrol-ziffer);
}

/* Die Skala: die beiden Enden des gewählten Vorlagentyps, damit der Schieber
   sagt, worüber er überhaupt geht.                                         */
.idee-schieber-skala {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  /* Die Trefferfläche des Schiebers ragt unter der Bahn weit ins Leere —
     die Skala rückt wieder heran. */
  margin-top: -8px;
  font-size: 12px;
  color: var(--text-hell-meta);
}

/* Der Satz, wenn im Zahlenfeld mehr steht, als der Tarif hergibt. */
.idee-hoehe-warnung { display: block; margin-top: 4px; color: var(--zustand-achtung); }
.idee-hoehe-warnung[hidden] { display: none; }

/* ── Der Kasten mit der Spanne ────────────────────────────────────────────
   ZWEI ZAHLEN, NIE EINE — und der Satz darunter gehört dazu, nicht in eine
   Fußnote. Deshalb steht er im selben Kasten und nicht kleiner als nötig. */
.idee-schaetzung {
  margin-top: 28px;
  padding: 22px 26px;
  border-radius: var(--radius-klein);
  background: var(--kat-petrol-flaeche);
  border-left: 3px solid var(--bluete-petrol);
}
.idee-schaetzung-zahl {
  margin: 0;
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.2;
  color: var(--kat-petrol-ziffer);
}
.idee-schaetzung-satz { margin: 10px 0 0; font-size: 14px; line-height: 1.7; max-width: 60ch; }
.idee-spanne-gross {
  margin: 10px 0 0;
  font-family: var(--schrift-kursiv);
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 32px);
  color: var(--kat-petrol-ziffer);
}

/* ══ PERSONALISIERUNG AUF DER PRODUKTSEITE ═════════════════════════════════
   Nach dem Entwurf „3a — Kombinierte Lösung" vom 27.08.2026: dunkles Band
   über dem Preis, zweite Variantenkarte mit Empfehlung, goldener zweiter Weg
   unter dem Warenkorb.

   STRUKTUR AUS DEM BLATT, FARBEN AUS DEM HAUS. Der Entwurf nennt eigene
   Hexwerte (#2A2530, #B98A2E, #FDF6E9 …) — sie sind an der Live-Seite
   abgemessen und liegen nah an unseren, sind aber nicht dieselben. Ein
   zweiter Satz Farben neben den Tokens hiesse: Beim nächsten Feinschliff am
   Gold zieht diese Stelle nicht mit. Also `--grund-dunkel` statt #2A2530 und
   `--gold` statt #B98A2E.

   KEINE INLINE-STILE. Der Entwurf trägt alles im `style`-Attribut — das ist
   für einen Prototyp richtig und im Laden wirkungslos: `style-src 'self'`
   verwirft es schweigend. Siehe Kopf von `idee-stil.php`.               */

/* ── Bildpunkte auf dem Titelbild („Shop the look", 27.08.2026) ────────────
   JEDER PUNKT IST EIN VERWEIS, kein `div` mit Klickhorcher — tastaturbedienbar,
   vorlesbar, ohne JavaScript brauchbar. Die Karte ist reine Gestaltung; alles,
   was sie sagt, steht auch im `aria-label` des Verweises.

   DIE LAGE STEHT IN `produkt-stil.php`, nicht hier: Sie ist je Artikel anders,
   und ein `style`-Attribut verwirft die Content-Security-Policy.             */
.bildpunkte {
  position: absolute;
  inset: 0;
  /* Der Kasten selbst fängt keine Klicks — sonst liesse sich das Bild darunter
     nicht mehr vergrössern. Nur die Punkte nehmen welche an. */
  pointer-events: none;
  z-index: 3;
}
.bildpunkt {
  position: absolute;
  /* 44 × 44 ist die Trefferfläche des Hauses (`--treffer`); sichtbar ist nur
     die Marke in der Mitte. Am Finger ist das der Unterschied zwischen einem
     Treffer und drei Versuchen. */
  width: var(--treffer);
  height: var(--treffer);
  margin: calc(var(--treffer) / -2) 0 0 calc(var(--treffer) / -2);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  text-decoration: none;
}
.bildpunkt-marke {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--grund-weiss);
  box-shadow: 0 1px 6px rgb(0 0 0 / .35), inset 0 0 0 2px var(--gold);
  transition: transform .15s ease;
}
.bildpunkt:hover .bildpunkt-marke,
.bildpunkt:focus-visible .bildpunkt-marke { transform: scale(1.25); }
.bildpunkt:focus-visible { outline: var(--fokus); outline-offset: 2px; border-radius: 50%; }

/* Die Karte. Sie erscheint erst bei Aufmerksamkeit — dauerhaft sichtbar wären
   drei Karten auf einem Bild und das Bild darunter weg.

   SIE STEHT ÜBER DEM PUNKT und darf das, weil die Punktebene NEBEN dem Blatt
   liegt und nicht darin — die Begründung steht im Markup von produkt.php. Läge
   sie im Blatt, schnitte `overflow: hidden` sie an der Blattrundung ab; bei
   einem Punkt auf 30 % / 42 % fehlte am 27.08.2026 das erste Wort. */
.bildpunkt-karte {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 4px);
  transform: translateX(-50%) translateY(4px);
  min-width: 120px;
  max-width: 220px;
  width: max-content;
  padding: 8px 11px;
  border-radius: var(--radius-klein);
  background: var(--grund-dunkel);
  color: var(--text-dunkel);
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.bildpunkt:hover .bildpunkt-karte,
.bildpunkt:focus-visible .bildpunkt-karte {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.bildpunkt-name  { display: block; }
.bildpunkt-preis { display: block; margin-top: 2px; color: var(--gold); font-weight: var(--gewicht-halb); }

@media (prefers-reduced-motion: reduce) {
  .bildpunkt-marke { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bildpunkt-karte { transition: none; }
}

/* ── Der Name am Artikel (Stufe 4, 27.08.2026) ─────────────────────────────
   Das Feld benutzt `.feld`, `.feld-kopf`, `.feld-hinweis` aus dem Formularsatz
   — dieselben Bausteine wie Kontakt und Ideenseite. Hier steht nur, was der
   ORT verlangt: Es sitzt in einer Produktspalte, nicht auf einer Formularseite,
   und braucht deshalb seinen eigenen Abstand nach oben und unten. */
.artikeltext-feld { margin: 0 0 18px; max-width: 420px; }
.artikeltext-feld input[type="text"] { max-width: 320px; }

/* Der Hinweis nach Art. 246a § 1 Abs. 3 Nr. 1 EGBGB.

   ER MUSS GELESEN WERDEN, also darf er nicht aussehen wie eine Fussnote —
   aber er darf auch nicht schreien: Er steht über dem Kaufen-Knopf und soll
   niemanden vom Kauf abhalten, sondern ihn richtig informieren. Deshalb die
   ruhige Goldfläche des Hauses statt eines roten Kastens.

   `--gold-schrift-hell` und nicht `--gold`: Gold auf hellem Grund misst
   2,3:1 und ist als Text nicht lesbar — dieselbe Stelle wie am 27.08.2026
   beim Band der Personalisierung. */
.widerruf-hinweis {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 18px;
  padding: 12px 14px;
  max-width: 480px;
  border-radius: 8px;
  background: var(--kat-gold-flaeche);
  border-left: 3px solid var(--gold);
  color: var(--kat-gold-text);
  font-size: 13.5px;
  line-height: 1.6;
}

/* Im Warenkorb und in der Bestellübersicht steht der Text als eigene Zeile
   unter dem Artikelnamen — wie die Zusammenstellung eines Satzes. */
.korb-text {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--text-hell-weich);
}
.korb-text strong { font-weight: var(--gewicht-halb); color: var(--text-hell); }
/* Die Vorlage im Korb — klein, quadratisch beschnitten, mit demselben
   Rand wie die Artikelbilder. Sie soll wiedererkennbar sein, nicht gross. */
.korb-vorlage {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: var(--radius-klein);
  border: 1px solid var(--linie);
  vertical-align: middle; margin-left: 6px;
}

/* ── Das Band über dem Preis ───────────────────────────────────────────── */
.pers-band {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 22px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--grund-dunkel);
  color: var(--gold-auf);
  font-size: 13.5px;
  line-height: 1.5;
}
.pers-band strong { color: var(--gold); font-weight: var(--gewicht-halb); }
.pers-stern { flex: none; color: var(--gold); font-size: 15px; line-height: 1.4; }

/* ── Die Variantenkarten ───────────────────────────────────────────────── */
/* Dieselbe Beschriftung wie FARBE und GRÖSSE darüber — die Reihe soll als
   eine gelesen werden, auch wenn die dritte Zeile keine Wahl ist.        */
.pers-marke {
  margin: 26px 0 14px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}
.pers-karten { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }

.pers-karte {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--feld-rand);
  border-radius: 12px;
  background: var(--grund-weiss);
  color: var(--text-hell);
  text-decoration: none;
}
.pers-karte > span { display: block; }
.pers-karte-name  { display: block; font-size: 14.5px; font-weight: var(--gewicht-halb); }
.pers-karte-unter { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-hell-meta); }
.pers-karte-preis { flex: none; font-size: 15px; font-weight: var(--gewicht-halb); white-space: nowrap; }

/* Die zweite Karte ist die Empfehlung. Sie trägt zwei Pixel Rand statt einem
   — der Unterschied muss auch ohne Farbe zu sehen sein.                   */
.pers-karte-gold {
  position: relative;
  display: block;
  border: 2px solid var(--gold);
  padding: 18px;
  background: rgba(var(--gold-rgb), .07);
  box-shadow: 0 8px 22px -12px rgba(var(--gold-rgb), .5);
  transition: box-shadow .18s ease;
}
.pers-karte-gold:hover { box-shadow: 0 10px 26px -12px rgba(var(--gold-rgb), .65); }
.pers-karte-gold:focus-visible { outline: var(--fokus); outline-offset: 3px; }
.pers-badge {
  position: absolute;
  top: -10px; right: 16px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--grund-dunkel);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pers-karte-gold .pers-karte-name { font-weight: 700; margin-bottom: 4px; }
.pers-karte-text {
  display: block;
  margin-bottom: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-hell);
}
/* Der Textverweis. Er ist KEIN eigener Verweis — die ganze Karte ist einer;
   ein <a> im <a> wäre ungültig. Er sieht nur aus wie einer, weil er die
   Stelle ist, auf die das Auge zielt.                                     */
.pers-karte-weg {
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1.5px solid var(--gold);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-dunkel);
}

/* ── Der zweite Weg unter dem Warenkorb ────────────────────────────────── */
/* Er muss anders aussehen als der Kaufknopf: Umriss statt Fläche, Gold statt
   der Handlungsfarbe. Wer ihn für den Kauf hält, klickt an der Bestellung
   vorbei.                                                                 */
.knopf-pers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 52px;
  margin-top: 12px;
  border: 2px solid var(--gold);
  border-radius: 999px;
  background: rgba(var(--gold-rgb), .07);
  color: var(--gold-dunkel);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background .18s ease;
}
.knopf-pers:hover { background: rgba(var(--gold-rgb), .14); }
.knopf-pers:focus-visible { outline: var(--fokus); outline-offset: 3px; }
.pers-fuss { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--text-hell-meta); }

/* Am Telefon läuft alles über die volle Breite; die Reihenfolge bleibt. */
@media (max-width: 560px) {
  .pers-karte { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pers-karte-preis { align-self: flex-start; }
}

/* ══ Das Saisonband (Entwurf 1a, 31.08.2026) ═════════════════════════════════
   Über dem Ankündigungsband, auf jeder Seite, nur im Zeitfenster. Dunkel wie
   die Nacht darunter, damit die Seite von hell nach dunkel in den Kopf läuft
   und nicht springt.

   `overflow: hidden` IST NICHT SCHMUCK: Die Figur ist höher als das Band und
   ragt absichtlich oben und unten heraus. Ohne den Beschnitt schöbe sie die
   ganze Seite auseinander. */
.saisonband {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 78px;
  padding: 0 40px;
  /* DER DUNKLE GRUND DES HAUSES, nicht der des Entwurfs. Das Blatt nennt
     `#15110F`; der Laden hat für Dunkles seit jeher `--grund-dunkel`, und das
     Band schliesst direkt an die Nacht darunter an — zwei Schwarztöne
     aneinander sieht man sofort. Struktur aus dem Blatt, Farben des Hauses. */
  background: var(--grund-dunkel);
  color: var(--text-dunkel);
}
/* Der Schein von unten links und die auslaufende Linie oben — beide aus dem
   Entwurf, beide ohne eigenes Element: Pseudoelemente fangen keine Klicks und
   kosten kein Markup. */
.saisonband::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 220% at 14% 120%,
              rgba(224,169,74,.30) 0%, rgba(176,87,112,.12) 42%, transparent 72%);
}
.saisonband::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to right, transparent,
              rgba(211,154,57,.7) 34%, rgba(176,87,112,.5) 66%, transparent);
}
.saisonband > * { position: relative; }

.saisonband-figur {
  flex: none;
  height: 112px;
  width: auto;
  margin: -14px 0 -20px;
  filter: drop-shadow(0 0 16px rgba(224,169,74,.5));
}
.saisonband-wort { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.saisonband-kicker {
  font-size: 11px;
  font-weight: var(--gewicht-halb);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #E0A94A;
}
.saisonband-titel { font-size: 16px; font-weight: 300; letter-spacing: -.01em; color: #F6ECE1; }
.saisonband-frist { margin-left: auto; flex: none; font-size: 12px; color: #9A8B7C; }
.saisonband-knopf {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(224,169,74,.55);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: var(--gewicht-halb);
  color: #E0A94A;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.saisonband-knopf:hover,
.saisonband-knopf:focus-visible { background: var(--gold); color: #191310; border-color: var(--gold); }
.saisonband-knopf:focus-visible { outline: var(--fokus); outline-offset: 2px; }

/* Auf dem Handy fällt die Frist weg und die Figur schrumpft — sonst bleibt für
   den Satz, um den es geht, keine Zeile mehr übrig. */
@media (max-width: 760px) {
  .saisonband { gap: 14px; padding: 10px 18px; flex-wrap: wrap; }
  .saisonband-figur { height: 76px; margin: -8px 0 -12px; }
  .saisonband-frist { display: none; }
  .saisonband-titel { font-size: 14.5px; }
  .saisonband-knopf { margin-left: auto; padding: 7px 15px; font-size: 12px; }
}

/* ══ Die Saisonblöcke der Startseite (Entwurf 31.08.2026) ════════════════════
   Zwei von Hand gestaltete Bausteine, kein Baukasten: die helle
   Herbst-Einleitung und der dunkle Hinweisstreifen. Dazu eine ruhige
   Rückfallvorlage für Saisons, für die es noch keinen Entwurf gibt.

   MASSE UND STRUKTUR AUS DEM BLATT, FARBEN AUS DEM HAUS — dieselbe Regel wie
   beim Band im Kopf. */

/* ── Herbst-Einleitung ──────────────────────────────────────────────────── */
/* DUNKLER GRUND (31.08.2026, Tristan). Der Block stand auf dem hellen
   Seitengrund und trug nur zwei Haarlinien; das Kerzenfoto leuchtete dagegen
   an und der Abschnitt las sich wie ein Einschub, nicht wie eine Saison.
   Dunkel ist er das, was er sein soll — ein eigener Raum auf der Seite, im
   selben Ton wie Streifen und Band. */
/* Die Linienstruktur des Hero, nach aussen ausmaskiert. Sie gehört über das
   Foto und darf keine Klicks fangen. */
/* Die Zeilenlänge des Entwurfs — rund 50 Zeichen. Ein Fliesstext über die
   ganze Spaltenbreite liest sich schlecht, egal wie schön er gesetzt ist. */

/* ── Hinweisstreifen (1c) ───────────────────────────────────────────────── */

/* DIE FIGUR LÄUFT UNTEN HERAUS — das ist der Kern des Entwurfs 1c. Der
   negative Abstand ist deshalb kein Schönheitsfehler; wer ihn wegnimmt, nimmt
   dem Streifen seine Form. */

/* ── Rückfallvorlage ────────────────────────────────────────────────────── */
.saison-schlicht {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: center;
  margin: 56px 0;
  padding: 28px;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  background: var(--grund-weiss);
}
.saison-schlicht-bild {
  width: 100%; height: auto; border-radius: var(--radius-klein);
  aspect-ratio: 4 / 3; object-fit: cover;
}
.saison-schlicht-titel { margin: 6px 0 10px; font-size: 26px; font-weight: 300; letter-spacing: -.02em; }

@media (max-width: 860px) {
  /* Auf dem Handy steht die Figur MITTIG unter dem Text und läuft weiter
     unten heraus — nebeneinander bliebe für keines von beiden Platz. */
  .saison-schlicht { grid-template-columns: 1fr; }
}

/* ══ Die Saisonkachel im Raster (Entwurf 1b) ═════════════════════════════════
   Sie steht zwischen Produktkacheln und muss sich wie eine verhalten: dieselbe
   Fusszeile, dieselbe Breite. Anders ist nur das Bildfeld — dunkel statt hell,
   und statt eines Produktfotos die Figur auf einem Schein.

   `aspect-ratio` DES ENTWURFS (4/5), NICHT DAS DER BLATTKACHEL: Sie hat kein
   Blatt, also auch nicht dessen Seitenverhaeltnis; im Raster stehen beide auf
   derselben Zeilenhoehe, weil das Raster sie streckt. */
.saison-kachel { text-decoration: none; color: inherit; }
.saison-kachel-bild {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-klein);
  background: var(--grund-dunkel);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .35), 0 22px 44px -30px rgba(40,44,53,.6);
}
/* Der Schein liegt UNTER der Figur und glimmt. Er ist der einzige bewegte
   Teil — bei `prefers-reduced-motion` steht er still (ganz unten). */
.saison-kachel-schein {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 100%,
              rgba(224,169,74,.42) 0%, rgba(176,87,112,.16) 46%, transparent 76%);
  animation: saison-glimmen 4.6s ease-in-out infinite;
}
/* DIE FIGUR SITZT AUF 86 % DER HOEHE, wie im Entwurf: Sie steht nicht mittig,
   sondern wie auf einem Boden — sonst schwebt sie ohne Grund im Feld. */
.saison-kachel-bild img {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  height: 86%;
  width: auto;
  filter: drop-shadow(0 0 22px rgba(224,169,74,.4));
}
.saison-kachel-marke {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 10.5px;
  font-weight: var(--gewicht-halb);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #E0A94A;
}
.saison-kachel-titel {
  position: absolute;
  inset: auto 16px 16px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--text-dunkel);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.saison-kachel-weg {
  font-size: 13px;
  font-weight: var(--gewicht-halb);
  color: var(--gold-schrift-hell);
  white-space: nowrap;
}
.saison-kachel:hover .saison-kachel-weg { text-decoration: underline; text-underline-offset: 3px; }

@keyframes saison-glimmen { 0%, 100% { opacity: .55 } 50% { opacity: .9 } }

/* WER WENIGER BEWEGUNG WILL, BEKOMMT KEINE. Der Entwurf verlangt das
   ausdruecklich, und es ist die einzige Animation im ganzen Saisonteil. */
@media (prefers-reduced-motion: reduce) {
  .saison-kachel-schein { animation: none; }
}

/* ══ Der Rubrik-Einleiter (Entwurf „halloween-teaser") ═══════════════════════
   Volle Breite, dunkel, zweispaltig — links das Wort mit dem Countdown, rechts
   die Figur, die oben UND unten aus dem Raster ragt. Dafuer die negativen
   Aussenabstaende der Spalte; wer sie wegnimmt, nimmt dem Einleiter seine
   Form. */
.saison-teaser {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 76px;
  align-items: center;
  margin: 0 0 40px;
  padding: 64px 44px 56px;
  border-radius: var(--radius-klein);
  background: var(--grund-dunkel);
  color: var(--text-dunkel);
}
.saison-teaser::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(75% 130% at 12% 110%,
              rgba(224,169,74,.34) 0%, rgba(176,87,112,.13) 44%, transparent 74%);
}
/* Die auslaufende Gold-Bordo-Linie oben — dasselbe Muster wie am Band im Kopf,
   damit beide erkennbar zur selben Saison gehoeren. */
.saison-teaser::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(to right, transparent,
              rgba(211,154,57,.7) 30%, rgba(176,87,112,.55) 62%, transparent);
}
.saison-teaser > * { position: relative; }
.saison-teaser-kicker {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: var(--gewicht-halb);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #E0A94A;
}
.saison-teaser-text { max-width: 46ch; font-size: 16px; line-height: 1.75; color: #BDAE9F; }

/* ── Der Countdown ──────────────────────────────────────────────────────────
   Vier Spalten mit Haarlinie oben und unten. `tabular-nums` IST NICHT KOSMETIK:
   Ohne sie springen die Zahlen im Sekundentakt in der Breite, und der ganze
   Kasten zuckt. */
.saison-countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 28px;
  border-top: 1px solid rgba(211,154,57,.28);
  border-bottom: 1px solid rgba(211,154,57,.18);
}
.saison-countdown-feld { padding: 14px 0; text-align: left; }
.saison-countdown-feld + .saison-countdown-feld { padding-left: 20px; }
.saison-countdown-zahl {
  display: block;
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-dunkel);
}
.saison-countdown-wort {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9A8B7C;
}
/* Die letzte Spalte in Gold — sie traegt die Frist, auf die alles zulaeuft. */
.saison-countdown-feld:last-child .saison-countdown-zahl { color: #E0A94A; }

.saison-teaser-figur { position: relative; justify-self: center; margin: -56px 0 -96px; }
.saison-teaser-figur img {
  display: block;
  height: 480px;
  width: auto;
  position: relative;
  animation: saison-schweben 9s ease-in-out infinite;
}
.saison-teaser-schein {
  position: absolute;
  inset: auto 50% 40px;
  translate: 50% 0;
  width: 320px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(224,169,74,.4), transparent);
  filter: blur(22px);
  animation: saison-glimmen 5s ease-in-out infinite;
}
@keyframes saison-schweben { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }

@media (prefers-reduced-motion: reduce) {
  .saison-teaser-figur img,
  .saison-teaser-schein { animation: none; }
}

@media (max-width: 860px) {
  .saison-teaser { grid-template-columns: 1fr; gap: 20px; padding: 40px 24px 0; }
  .saison-teaser-figur { margin: 0 0 -60px; }
  .saison-teaser-figur img { height: 300px; }
  .saison-countdown-zahl { font-size: 26px; }
  .saison-countdown-feld + .saison-countdown-feld { padding-left: 12px; }
}

/* ── Der Rubrik-Kopf einer Saison (Entwurf „halloween-header", 31.08.2026) ──
   EIN Block statt zwei. Er ersetzt fuer diese eine Seite den schmalen Hero;
   der frueher darunter stehende Einleiter mit Countdown ist darin aufgegangen.

   ALLES IN DIESER DATEI UND NICHTS ALS style=. Der Laden faehrt
   `style-src 'self'`; ein Inline-Stil wird stillschweigend verworfen, und man
   sucht den Fehler dann im Layout statt im Kopf der Antwort.

   DIE FIGUR IST FREIGESTELLT (Alphakanal), deshalb KEIN `mix-blend-mode:
   screen`. Der Entwurf braucht den Kniff, weil seine Vorlage einen schwarzen
   Hintergrund hat; unsere PNG hat einen echten Alphakanal, und `screen` wuerde
   die dunklen Stellen der Figur zusaetzlich aufhellen. */
.hw-kopf {
  position: relative;
  overflow: hidden;
  background: #15110F;
  color: #EFE3D6;
  max-width: 1240px;
  margin: 0 auto;
  padding: 76px 40px 68px;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 56px;
  align-items: center;
}
.hw-schleier, .hw-raster, .hw-kurve {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hw-schleier {
  background: radial-gradient(78% 120% at 74% 62%,
    rgba(224,169,74,.22) 0%, rgba(176,87,112,.12) 40%, transparent 72%);
}
.hw-raster {
  background: repeating-linear-gradient(to bottom,
    rgba(211,154,57,.13) 0 1px, transparent 1px 11px);
  -webkit-mask-image: radial-gradient(80% 90% at 62% 45%, #000 10%, transparent 76%);
          mask-image: radial-gradient(80% 90% at 62% 45%, #000 10%, transparent 76%);
  opacity: .6;
}
.hw-kurve { width: 100%; height: 100%; }

.hw-spalte { position: relative; }
.hw-kopf h1 {
  margin: 0;
  font-size: 60px;
  line-height: 1.04;
  font-weight: 300;
  letter-spacing: -.035em;
  color: #F6ECE1;
}
.hw-kopf h1 .kicker {
  display: block;
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #C98F3C;
}
.hw-kopf h1 em {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  color: #E0A94A;
}
.hw-text {
  margin: 24px 0 0;
  max-width: 48ch;
  font-size: 17px;
  line-height: 1.7;
  color: #BDAE9F;
}
.hw-frist {
  margin: 36px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9A8B7C;
}
.hw-uhr {
  display: flex;
  margin-top: 12px;
  padding: 20px 0;
  max-width: 560px;
  border-top: 1px solid rgba(211,154,57,.3);
  border-bottom: 1px solid rgba(211,154,57,.3);
}
.hw-uhr-feld { flex: 1; }
.hw-uhr-feld + .hw-uhr-feld {
  border-left: 1px solid rgba(211,154,57,.22);
  padding-left: 24px;
}
.hw-uhr-zahl {
  display: block;
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -.03em;
  color: #F6ECE1;
  /* OHNE `tabular-nums` springt die Spaltenbreite im Sekundentakt. */
  font-variant-numeric: tabular-nums;
}
.hw-uhr-feld:last-child .hw-uhr-zahl { color: #E0A94A; }
.hw-uhr-wort {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9A8B7C;
}
.hw-knoepfe {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 30px 0 0;
}
.hw-notiz { font-size: 12px; color: #8C7E70; }

.hw-figur {
  position: relative;
  height: 520px;
  display: grid;
  place-items: center;
  margin: -24px 0 -40px;
}
.hw-figur img {
  position: relative;
  height: 500px;
  width: auto;
  animation: hw-schweben 9s ease-in-out infinite;
}
.hw-schein, .hw-kegel { position: absolute; pointer-events: none; }
.hw-schein {
  left: 50%; top: 50%;
  width: 118%; height: 96%;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(224,169,74,.38) 0%, rgba(176,87,112,.14) 44%, transparent 72%);
  filter: blur(30px);
  animation: hw-kerze 5.2s ease-in-out infinite;
}
.hw-kegel {
  left: 50%; bottom: 26px;
  width: 74%; height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(224,169,74,.3) 0%, transparent 68%);
  filter: blur(20px);
  animation: hw-glimmen 4.4s ease-in-out infinite;
}
.hw-siegel {
  position: absolute;
  right: 2px; top: 6px;
  width: 98px; height: 98px;
  border-radius: 999px;
  background: #8E4257;
  border: 1px solid rgba(240,200,140,.35);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.9);
  display: grid;
  place-content: center;
  text-align: center;
}
.hw-siegel-tag {
  display: block;
  font-size: 23px; font-weight: 300; line-height: 1;
  letter-spacing: -.02em; color: #FBEFE2;
}
.hw-siegel-monat {
  display: block;
  margin-top: 5px;
  font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #EBC9B8;
}

@keyframes hw-kerze {
  0%, 100% { opacity: .92; transform: translate(-50%, -50%) scale(1); }
  18%      { opacity: .74; transform: translate(-50%, -50%) scale(.985); }
  34%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.015); }
  52%      { opacity: .82; transform: translate(-50%, -50%) scale(.995); }
  71%      { opacity: .97; transform: translate(-50%, -50%) scale(1.008); }
}
@keyframes hw-glimmen { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
@keyframes hw-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (prefers-reduced-motion: reduce) {
  .hw-figur img, .hw-schein, .hw-kegel { animation: none; }
}

@media (max-width: 1099px) {
  .hw-kopf { grid-template-columns: 1fr; gap: 32px; padding: 56px 28px 48px; }
  .hw-kopf h1 { font-size: 44px; }
  .hw-figur { height: 380px; margin: 0; }
  .hw-figur img { height: 360px; }
}
@media (max-width: 767px) {
  .hw-kopf { padding: 44px 20px 40px; }
  .hw-kopf h1 { font-size: 34px; }
  .hw-figur { height: 300px; }
  .hw-figur img { height: 280px; }
  .hw-uhr-zahl { font-size: 28px; }
  .hw-uhr-wort { font-size: 10px; letter-spacing: .1em; }
  .hw-uhr-feld + .hw-uhr-feld { padding-left: 12px; }
  .hw-siegel { width: 76px; height: 76px; }
}

/* OHNE FIGUR KEINE LEERE SPALTE. Solange kein Saisonbild hinterlegt ist,
   stuende rechts eine 486 px breite Luecke — und niemand saehe, dass dort
   etwas FEHLT statt frei zu sein. */
.hw-kopf.hw-allein { grid-template-columns: 1fr; }

/* Bildunterschrift unter der Figur — Name und Preis des ersten Artikels. */
.hw-bu {
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  text-align: center;
  font-size: 12px;
  color: #8C7E70;
}

/* Auf dunklem Grund braucht der Text die hellen Toene — sonst steht er in
   Anthrazit auf Anthrazit. Der Kicker behaelt sein Gold. */
/* `.augenbraue` ist fuer hellen Grund gemacht und kaeme hier fast schwarz
   heraus. Gold ist der Ton, den Band und Streifen an derselben Stelle
   tragen. */

@media (max-width: 767px) {
}

/* ══ Die Herbst-Einleitung ══════════════════════════════════════════════════
   Entwurf „Elas3DStudio Herbst-Einleitung dunkel" (01.09.2026), 1:1 in Masse
   und Ton. Dunkler Grund, links das Stimmungsbild mit Kerzenschein und
   Plakette, rechts Kicker, Überschrift, Text, Farbreihe und zwei Knöpfe;
   darunter die Fusszeile auf die nächste Saison.

   ALLES HIER UND NICHTS ALS style="". Der Laden fährt `style-src 'self'`;
   ein Inline-Stil wird stillschweigend verworfen, und man sucht den Fehler
   dann im Layout statt im Kopf der Antwort. */
.saison-herbst {
  position: relative;
  overflow: hidden;
  margin: 64px 0;
  background: #15110F;
  color: #EFE3D6;
  border-radius: var(--radius-klein);
}
/* Die gefärbte Haarlinie am oberen Rand — der Übergang aus dem Hellen. */
.saison-herbst::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent,
    rgba(211,154,57,.6) 32%, rgba(176,87,112,.42) 68%, transparent);
}
.saison-herbst-schein {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(64% 78% at 24% 54%,
    rgba(224,169,74,.2) 0%, rgba(176,87,112,.08) 44%, transparent 74%);
}
.saison-herbst-innen {
  position: relative;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 72px;
  align-items: center;
  padding: 92px 40px 40px;
}

.saison-herbst-bild { position: relative; }
/* Der Kerzenschein hinter dem Bild. Er flackert, weil eine Kerze das tut —
   und steht still, wenn der Rechner darum gebeten wird. */
.saison-herbst-kerze {
  position: absolute;
  left: 50%; top: 52%;
  width: 118%; height: 96%;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(224,169,74,.3) 0%, transparent 70%);
  filter: blur(30px);
  animation: saison-glimmen 5.2s ease-in-out infinite;
  pointer-events: none;
}
.saison-herbst-rahmen {
  position: relative;
  aspect-ratio: 4 / 4.7;
  overflow: hidden;
  background: #1D1714;
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.9);
}
.saison-herbst-rahmen img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Nach unten dunkler — darauf sitzt die Plakette und bleibt lesbar. */
.saison-herbst-verlauf {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(21,17,15,.5) 0%, transparent 44%);
}
/* Die Linienstruktur des Hero, nach aussen ausmaskiert. */
.saison-herbst-struktur {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(211,154,57,.16) 0 1px, transparent 1px 10px);
  -webkit-mask-image: radial-gradient(78% 62% at 50% 50%, transparent 26%, #000 88%);
          mask-image: radial-gradient(78% 62% at 50% 50%, transparent 26%, #000 88%);
}
.saison-herbst-rahmen::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(224,169,74,.75), transparent);
}
.saison-herbst-marke {
  position: absolute;
  left: 20px; bottom: 18px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(211,154,57,.34);
  background: rgba(21,17,15,.66);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #D8C7B4;
}
.saison-herbst-punkt {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #E0A94A;
  animation: saison-glimmen 4.2s ease-in-out infinite;
}

.saison-herbst .augenbraue {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #C98F3C;
  margin: 0;
}
.saison-herbst-titel {
  margin: 20px 0 0;
  font-size: 52px;
  line-height: 1.08;
  font-weight: 300;
  letter-spacing: -.035em;
  color: #F6ECE1;
}
.saison-herbst-text {
  margin: 26px 0 0;
  max-width: 50ch;
  font-size: 17px;
  line-height: 1.7;
  color: #BDAE9F;
}

/* Die Farbreihe. `auto-fit` statt einer festen Dreiteilung: Wer zwei Töne
   pflegt, bekommt zwei gleich breite Spalten, wer vier pflegt, vier. */
.saison-herbst-toene {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(211,154,57,.3);
  border-bottom: 1px solid rgba(211,154,57,.3);
}
.saison-herbst-toene li { padding: 20px 22px; }
.saison-herbst-toene li:first-child { padding-left: 0; }
.saison-herbst-toene li:last-child { padding-right: 0; }
.saison-herbst-toene li + li { border-left: 1px solid rgba(211,154,57,.22); }
.saison-ton-kopf { display: flex; align-items: center; gap: 9px; }
.saison-ton-probe { flex: none; }
.saison-ton-name { font-size: 13px; font-weight: 600; color: #F0E5D9; }
.saison-ton-notiz {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.6;
  color: #9A8B7C;
}

.saison-herbst-knoepfe {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 34px 0 0;
}

/* ── Die Fusszeile auf die nächste Saison ───────────────────────────────── */
.saison-herbst-fuss {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 40px;
  padding: 22px 0 0;
  border-top: 1px solid rgba(211,154,57,.3);
}
.saison-herbst-innen + .saison-herbst-fuss { padding-bottom: 40px; }
.saison-herbst-figur {
  height: 88px;
  width: auto;
  margin: -14px 0;
}
.saison-herbst-fusstext {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #BDAE9F;
}
.saison-herbst-fusstext strong { font-weight: 600; color: #F6ECE1; }
.saison-herbst-fussweg {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: #E0A94A;
  border-bottom: 1px solid rgba(224,169,74,.6);
  padding-bottom: 3px;
}
.saison-herbst-fussweg:hover { color: #F0C36E; border-bottom-color: #F0C36E; }

@keyframes saison-glimmen { 0%, 100% { opacity: .5; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) {
  .saison-herbst-kerze, .saison-herbst-punkt { animation: none; }
}

@media (max-width: 1099px) {
  .saison-herbst-innen { grid-template-columns: 1fr; gap: 40px; padding: 56px 28px 32px; }
  .saison-herbst-titel { font-size: 40px; }
  .saison-herbst-fuss { margin: 0 28px; }
}
@media (max-width: 767px) {
  .saison-herbst-innen { padding: 40px 20px 24px; gap: 28px; }
  .saison-herbst-titel { font-size: 30px; }
  .saison-herbst-toene { grid-template-columns: 1fr; }
  .saison-herbst-toene li { padding: 16px 0; }
  .saison-herbst-toene li + li {
    border-left: 0;
    border-top: 1px solid rgba(211,154,57,.22);
  }
  .saison-herbst-fuss { margin: 0 20px; }
  .saison-herbst-figur { height: 64px; }
  .saison-herbst-fussweg { margin-left: 0; }
}

/* ══ Der Halloween-Banner (Entwurf „Elas3DStudio Halloween-Banner") ═════════
   Vorlage `streifen`, 01.09.2026. Randlos dunkel, links das Wort, rechts die
   Figur, die unten aus dem Streifen laeuft, dazwischen das Siegel mit dem
   letzten Tag.

   RANDLOS UND OHNE RUNDUNG: Der Entwurf setzt den Streifen zwischen zwei
   helle Flaechen von je 76 px. Die Trennung macht der Wechsel der Farbe, kein
   Rahmen — deshalb `border-radius: 0` und Aussenabstand statt Innenabstand. */
/* Die gefaerbte Haarlinie am oberen Rand. */
/* Schein und Linienraster — zwei Ebenen unter dem Inhalt. */
.saison-streifen > * { position: relative; z-index: 1; }
.saison-streifen-wort { padding: 44px 0; }
.saison-streifen-knopf:hover { background: #E9B858; color: #191310; }
.saison-streifen-knopf:focus-visible { outline: var(--fokus); outline-offset: 3px; }

.saison-streifen-figur { position: relative; align-self: stretch; }
/* DIE FIGUR IST FREIGESTELLT (Alphakanal), deshalb kein `mix-blend-mode:
   screen`. Der Entwurf braucht den Kniff, weil seine Vorlage einen schwarzen
   Hintergrund hat; bei uns wuerde er die dunklen Stellen aufhellen. */
.saison-siegel-tag {
  display: block;
  font-size: 23px; font-weight: 300; line-height: 1;
  letter-spacing: -.02em; color: #FBEFE2;
}
.saison-siegel-monat {
  display: block;
  margin-top: 5px;
  font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #EBC9B8;
}

@keyframes saison-schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .saison-streifen-figur img, .saison-streifen-schein { animation: none; }
}

@media (max-width: 1099px) {
  .saison-streifen { grid-template-columns: 1fr 300px; gap: 24px; padding: 0 28px; }
  .saison-streifen-figur img { height: 280px; }
  .saison-streifen-siegel { width: 76px; height: 76px; left: 0; }
}
@media (max-width: 767px) {
  /* EINSPALTIG UND DIE FIGUR DARUNTER. Auf 320 px nebeneinander waere die
     Ueberschrift vier Woerter breit und die Figur ein Streifen. */
  .saison-streifen-wort { padding: 36px 0 8px; }
  .saison-streifen-titel { font-size: 26px; }
  .saison-streifen-figur { height: 200px; }
  .saison-streifen-figur img { height: 220px; right: 8px; bottom: -12px; }
  .saison-streifen-siegel { left: 8px; top: 40px; transform: none; }
}

/* ══ Der Halloween-Banner, zweite Fassung ═══════════════════════════════════
   Entwurf „Elas3DStudio Halloween-Banner" (01.09.2026, überarbeitet).
   Dreiteilig: links das Wort, in der Mitte das Datum gross, rechts die Figur.

   RANDLOS UND OHNE RUNDUNG: Der Entwurf setzt den Streifen zwischen zwei
   helle Flaechen von je 76 px. Die Trennung macht der Wechsel der Farbe.

   DIE FIGUR IST FREIGESTELLT (Alphakanal), deshalb kein `mix-blend-mode:
   screen` — der Kniff des Entwurfs hellt bei uns die dunklen Stellen auf. */
.saison-streifen {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 560px;
  gap: 32px;
  align-items: center;
  min-height: 420px;
  margin: 76px 0;
  padding: 0 40px;
  background: #15110F;
  color: #EFE3D6;
}
.saison-streifen::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  z-index: 1;
  background: linear-gradient(to right, transparent,
    rgba(211,154,57,.6) 38%, rgba(176,87,112,.42) 72%, transparent);
}
.saison-streifen::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 150% at 78% 116%,
    rgba(224,169,74,.3) 0%, rgba(176,87,112,.13) 40%, transparent 72%);
}
.saison-streifen > * { position: relative; z-index: 1; }
.saison-streifen-wort { padding: 52px 0; }

/* Die Pille oben — der Kicker in seiner neuen Gestalt. */
.saison-streifen-pille {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid rgba(224,169,74,.5);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #E0A94A;
}
.saison-streifen-punkt {
  width: 5px; height: 5px;
  border-radius: 999px;
  background: #E0A94A;
  animation: saison-glimmen 4s ease-in-out infinite;
}
.saison-streifen-titel {
  margin: 18px 0 0;
  font-size: 44px;
  font-weight: 300;
  letter-spacing: -.035em;
  line-height: 1.1;
  color: #F6ECE1;
}
.saison-streifen-text {
  margin: 16px 0 0;
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.7;
  color: #BDAE9F;
}
.saison-streifen-zeile {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  margin: 28px 0 0;
}
.saison-streifen-knopf {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  background: #D39A39;
  color: #191310;
  font-size: 15px;
  font-weight: 600;
}
.saison-streifen-knopf:hover { background: #E9B858; color: #191310; }
.saison-streifen-knopf:focus-visible { outline: var(--fokus); outline-offset: 3px; }
.saison-streifen-notiz {
  font-size: 12px;
  line-height: 1.5;
  color: #8C7E70;
  max-width: 18ch;
}

/* Die rechte Haelfte: Datum und Figur teilen sich eine Buehne. */
.saison-streifen-buehne { position: relative; align-self: stretch; }
.saison-streifen-schein {
  position: absolute;
  right: 40px; bottom: 0;
  width: 340px; height: 92%;
  background: radial-gradient(50% 50% at 50% 60%, rgba(224,169,74,.34) 0%, transparent 68%);
  filter: blur(24px);
  animation: saison-glimmen 5s ease-in-out infinite;
  pointer-events: none;
}
.saison-streifen-datum {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  margin: 0;
  text-align: left;
  pointer-events: none;
}
.saison-datum-name {
  display: block;
  padding-left: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #C98F3C;
}
.saison-datum-zahl {
  display: flex;
  align-items: baseline;
  margin-top: 2px;
  /* `tabular-nums` haelt die Breite stabil, wenn aus dem 1. der 11. wird. */
  font-variant-numeric: tabular-nums;
  font-size: 126px;
  font-weight: 200;
  letter-spacing: -.06em;
  line-height: .86;
}
.saison-datum-tag { color: #F6ECE1; }
.saison-datum-monat { color: #8E4257; }
.saison-datum-fuss {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-left: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #9A8B7C;
}
.saison-datum-strich { display: block; width: 34px; height: 1px; background: #D39A39; }

.saison-streifen-figur {
  position: absolute;
  right: -8px; bottom: -26px;
  height: 432px;
  width: auto;
  animation: saison-schweben 9s ease-in-out infinite;
}

@keyframes saison-schweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@media (prefers-reduced-motion: reduce) {
  .saison-streifen-figur, .saison-streifen-schein, .saison-streifen-punkt { animation: none; }
}

@media (max-width: 1199px) {
  .saison-streifen { grid-template-columns: 1fr 400px; padding: 0 28px; min-height: 360px; }
  .saison-streifen-titel { font-size: 36px; }
  .saison-datum-zahl { font-size: 88px; }
  .saison-streifen-figur { height: 340px; }
  .saison-streifen-schein { right: 20px; width: 260px; }
}
@media (max-width: 899px) {
  /* EINSPALTIG UND DIE BUEHNE DARUNTER. Nebeneinander waere die Ueberschrift
     vier Woerter breit und das Datum ein Strich. */
  .saison-streifen {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
    padding: 0 20px 240px;
  }
  .saison-streifen-wort { padding: 40px 0 8px; }
  .saison-streifen-titel { font-size: 28px; }
  .saison-streifen-notiz { max-width: none; }
  .saison-streifen-buehne { height: 240px; }
  .saison-streifen-datum { top: 30px; transform: none; }
  .saison-datum-zahl { font-size: 64px; }
  .saison-streifen-figur { height: 260px; right: 0; bottom: -18px; }
  .saison-streifen-schein { right: 0; width: 200px; }
}


/* ── VIDEOS AM ARTIKEL (10.09.2026) ─────────────────────────────────────────
 *
 * KEIN INLINE-STIL: Der Laden laeuft mit `style-src 'self'`, ein `style="..."`
 * am Element wuerde stillschweigend verworfen. Deshalb stehen die Regeln hier.
 *
 * `aspect-ratio: 16 / 9` HAELT DEN PLATZ FREI, bevor die Kopfdaten da sind —
 * ohne das springt die Seite, sobald der Browser die echten Masse kennt. Ein
 * Video im Hochformat fuellt den Rahmen nicht ganz; `object-fit: contain`
 * setzt es hinein, statt es zu beschneiden.
 */
.produkt-videos {
  margin: 2.5rem 0 0;
}

/* DIESELBE FORM WIE `.produkt-fdm-titel` — die kleine Bronze-Überschrift, mit
   der die Produktseite ihre Abschnitte trennt. Eine eigene Schriftgrösse hier
   hiesse, einen zweiten Ton in eine Seite zu setzen, die schon einen hat. */
.produkt-videos-titel {
  margin: 0 0 10px;
  font-size: var(--t-mikro);
  font-weight: var(--gewicht-halb);
  letter-spacing: var(--sperrung-mikro);
  text-transform: uppercase;
  color: var(--bronze);
}

.produkt-video {
  display: block;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 14px;
  background: #14110f;
  margin-bottom: 1rem;
}

.produkt-video:last-child {
  margin-bottom: 0;
}