/* ============================================================
   Stempelgigant Berater — Design-System "Clean Modern"
   Abgestimmt auf Startseite & Artikelseite des Shops.
   Farbwelt: Rot #c8102e, Tinte #1f2328, Grauton #63696f,
              Hintergrund #fff / #f7f8f9, Linie #e8eaec, Radius 6px.
   Typografie: Roboto (Headlines + Fließtext).
   ============================================================ */

/* Schriften lokal statt von fonts.googleapis.com (siehe assets/vendor/README.md):
   Ein Google-Fonts-Aufruf überträgt die IP jedes Besuchers an Google, bevor er
   irgendetwas bestätigen konnte – auf JEDER Seite des Shops. */
@import url('/assets/vendor/fonts/roboto.css');


:root {
  --rot: #c8102e;
  --rot-dunkel: #a10c25;
  --rot-tint: #fdecee;
  --tinte: #1f2328;
  --tinte-70: #63696f;
  --tinte-45: #9aa0a6;
  --tinte-46: #000000;
  --papier: #f7f8f9;
  --papier-karte: #ffffff;
  --papier-rand: #e8eaec;
  --schatten: 0 14px 30px rgba(20, 20, 30, .08);
  --schatten-klein: 0 1px 3px rgba(20, 20, 30, .03);
  --radius: 6px;
  --radius-klein: 6px;
  --max: 1400px;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}

/* overflow-x:hidden bewusst zusätzlich auf body (nicht nur html): einige
   mobile Browser (u. a. ältere iOS-Safari-Versionen) behandeln body statt
   html als eigentliches Scroll-Element. Ohne diese Zeile reicht das
   overflow-x:hidden oben allein nicht aus, um zu verhindern, dass
   position:fixed-Elemente MIT transform (siehe nav.hauptnav im mobilen
   Off-Canvas-Menü unten, @media max-width:1200px: "transform:
   translateX(100%)" im geschlossenen Zustand) die scrollbare Breite der
   Seite aufblähen – ein bekannter CSS-Sonderfall: sobald ein fixiertes
   Element ein transform bekommt, zählt seine (ggf. außerhalb des
   Sichtbereichs liegende) tatsächliche Position mit zur Scroll-Fläche des
   Dokuments, obwohl es optisch unsichtbar ist. */
body {
  margin: 0;
  background: var(--papier-karte);
  color: var(--tinte);
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /*overflow-x: hidden;*/
}

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

a {
  color: inherit;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

/* Schmalere Seiten: Rechtstexte und Infoseiten (wrap-text), Formularseiten
   wie Kontakt und Widerruf (wrap-formular).

   Die Werte standen bisher als style="max-width:760px" direkt im Markup
   der Templates. Als Klasse kann ein Theme sie überschreiben – der Betrieb
   wollte die Seiten in seinem Shop so breit wie den Rest, und dafür hätte
   sonst jedes dieser Templates ins Theme kopiert werden müssen. Die Zahlen
   sind unverändert, für alle Themes ohne eigene Angabe bleibt alles gleich. */
/* Feld "Ihre Referenz" einer Warenkorbzeile (Migration 172, Baustein
   themes/standard/partials/warenkorb-referenz.php). Hier und nicht in den
   Themes: Es gibt zehn davon, und das Feld soll überall benutzbar sein,
   auch wenn ein Theme nichts dazu sagt. Wer es anders will, überschreibt
   .wk-referenz in seinem theme.css. */
.wk-referenz {
  margin-top: 10px;
}

.wk-referenz label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 3px;
}

.wk-referenz-zeile {
  display: flex;
  gap: 6px;
  align-items: center;
  max-width: 340px;
}

.wk-referenz input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  font-size: 13px;
}

.wk-referenz button {
  flex: 0 0 auto;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.wrap-text {
  max-width: 760px;
}

.wrap-formular {
  max-width: 700px;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  color: var(--tinte);
}

h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
}

h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
}

h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 1em;
  color: var(--tinte-70);
}

.eyebrow {
  font-size: .8rem;
  font-weight: 700;
  color: var(--rot);
  display: block;
  margin-bottom: .6em;
}

/* ---------- Kopfzeile ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--papier-rand);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}

.logo {
  display: flex;
  align-items: center;
  gap: .65em;
  font-weight: 800;
  font-size: 1.2rem;
  text-decoration: none;
  color: var(--tinte);
}

.logo img {
  width: auto;
  max-width: 220px;
  max-height: 48px;
  display: block;
}

.admin-sidebar .logo img {
  height: 34px;
  max-width: 190px;
  background: #fff;
  padding: 4px 8px;
  border-radius: var(--radius);
}

.logo .stempelmarke {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1.5px solid var(--rot);
  background: var(--rot-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rot);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .01em;
}

nav.hauptnav {
  display: flex;
  gap: 2.1em;
}

nav.hauptnav a {
  text-decoration: none;
  font-weight: 700;
  font-size: .92rem;
  color: var(--tinte-70);
  padding: .3em 0;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}

nav.hauptnav a:hover,
nav.hauptnav a.aktiv {
  color: var(--rot);
  border-color: var(--rot);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--tinte);
  margin: 5px 0;
  transition: transform .2s ease, opacity .15s ease;
}

/* Kundenwunsch: Hamburger morpht beim Öffnen zu einem X als klares
   Schließen-Signal, statt unverändert stehen zu bleiben (siehe shop.js,
   das die Klasse "offen" hier zusammen mit #hauptnav setzt). */
.nav-toggle.offen span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.offen span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.offen span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Kundenwunsch: kein abgedunkelter Hintergrund (mehr) hinter dem
   geöffneten mobilen Menü – unsichtbare Klickfläche bleibt aber bestehen,
   damit Klick-außerhalb-des-Menüs weiterhin schließt (siehe shop.js für
   den Klick-Handler). Nur mobil relevant, da #navBackdrop nur dort
   sichtbar/anklickbar wird (siehe .offen unten, die selbst nur im
   @media max-width:1200px-Block etwas bewirkt, weil .nav-toggle dort
   erst überhaupt anklickbar/display:block ist). */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  visibility: hidden;
  transition: visibility .2s;
}

.nav-backdrop.offen {
  visibility: visible;
}

/* Kundenwunsch: Seite dahinter nicht mehr scrollbar, solange das mobile
   Menü offen ist (Klasse wird von shop.js auf <body> gesetzt) – verhindert,
   dass der Inhalt hinter dem Menü verwirrend weiterscrollt.
   Bewusst NICHT nur overflow:hidden (Bugfix 1): das allein bricht
   position:sticky bei .site-header – der Browser bestimmt den "nächsten
   scrollenden Vorfahren" für die Sticky-Berechnung dadurch neu, der Header
   sprang auf seine normale Dokument-Position (weit oben) zurück, sobald
   bereits heruntergescrollt war, während der Rest der Seite optisch an der
   gescrollten Position hängen blieb. position:fixed mit negativem "top"
   (siehe shop.js) friert die Seite stattdessen komplett an der aktuellen
   Scroll-Position ein – für normal fließende Inhalte reicht das bereits. */
body.nav-offen-sperre {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
}

/* Bugfix 2, direkte Folge von Bugfix 1 oben: position:sticky selbst
   reagiert auf das Einfrieren NICHT wie normal fließender Inhalt. Sobald
   <body> per position:fixed nichts mehr zu scrollen hat, sieht die
   Sticky-Berechnung des Headers keinen Scroll-Offset mehr und fällt auf
   seine normale (nicht angeheftete) Position zurück – zusammen mit dem nach
   oben verschobenen <body> (negatives "top") landete der Header dadurch
   erneut oberhalb des sichtbaren Bereichs. Fix: den Header, solange die
   Sperre aktiv ist, explizit auf position:fixed umschalten. Ein
   position:fixed-Vorfahre (hier <body>) bricht bei einem eigenen
   position:fixed-Element NICHT dessen Bezug zum echten Viewport (das tun
   nur transform/filter/perspective/will-change auf dem Vorfahren) – der
   Header bleibt dadurch zuverlässig oben, unabhängig vom eingefrorenen
   <body>-Offset. */
body.nav-offen-sperre .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* ---------- Kopf-Suche ---------- */
/* Eigener Fix (Kundenwunsch): auf dem Desktop standardmäßig VERBORGEN und
   nur über das Lupensymbol (#kopfSucheBtn, neben dem Login-Icon in
   .kopf-aktionen) einblendbar – klappt dann als eigene, volle Zeile UNTER
   der gesamten Kopfzeile (Logo/Kategorien/Icons) auf. position:absolute
   relativ zu .site-header (position:sticky = containing block), damit die
   restliche Kopfzeile beim Auf-/Zuklappen nicht "springt". Auf
   Mobilgeräten bleibt es dagegen unverändert immer sichtbar und Teil des
   normalen Grid-Layouts, siehe @media weiter unten, das display/position
   dafür wieder zurücksetzt. */
.kopf-suche {
  display: none;
  align-items: center;
  position: absolute;
  top: 100%;
  left: clamp(20px, 5vw, 64px);
  right: clamp(20px, 5vw, 64px);
  margin: 10px 0;
  border: 1px solid var(--papier-rand);
  border-radius: 24px;
  overflow: hidden;
  background: var(--papier);
  box-shadow: 0 16px 30px -10px rgba(20, 20, 30, .15);
  z-index: 40;
  width: 80%;
  margin-left: 5%;
}

.kopf-suche.offen {
  display: flex;
}

.kopf-suche input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 12px 6px 12px 20px;
  font-size: .94rem;
  font-family: inherit;
  color: var(--tinte);
}

.kopf-suche input:focus {
  outline: none;
}

.kopf-suche input::placeholder {
  color: var(--tinte-45);
}

.kopf-suche button {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--tinte-70);
  padding: 8px 12px;
  display: flex;
  align-items: center;
}

.kopf-suche button:hover {
  color: var(--rot);
}

.kopf-suche svg {
  width: 17px;
  height: 17px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: .92rem;
  padding: .85em 1.5em;
  border-radius: var(--radius);
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--rot);
  color: #fff;
  box-shadow: 0 6px 14px rgba(200, 16, 46, .2);
}

.btn-primary:hover {
  background: var(--rot-dunkel);
}

/* ===================================================================
   "Online gestalten" – in JEDEM Theme rot
   ===================================================================
   Kundenwunsch: Der Weg in den Gestalter ist in allen Shops derselbe
   Knopf und soll überall gleich aussehen – nicht in der jeweiligen
   Shopfarbe. Die Themes färben ihre Knöpfe sonst mit ihrem eigenen
   Akzent (.btn-primary, .td-btn, .ul-btn-ac, .sf-btn-ak,
   .btn-aktion.gestalten).

   HIER in style.css und nicht in den Themes, weil style.css von jedem
   Theme geladen wird (siehe partials/kopf.php) – auch von künftigen.

   Die Klasse steht am Knopf selbst (seiten/artikel.php der Themes),
   NICHT an .js-gestalten-inline: Die tragen auch "Datei hochladen" und
   "Vorlage wählen", und die behalten ihre Themefarbe.

   Klasse DOPPELT genannt statt !important: style.css wird VOR der
   theme.css geladen, und manche Themes färben mit zwei Klassen
   (.btn-aktion.gestalten:hover). Die doppelte Nennung hebt das Gewicht
   gerade so weit an, dass diese Regel gewinnt. */
:root {
  --sg-gestalten: #e72d34;
  --sg-gestalten-dunkel: #c4232a;
}

a.sg-gestalten-knopf.sg-gestalten-knopf {
  background: var(--sg-gestalten);
  border-color: var(--sg-gestalten);
  color: #fff;
}

a.sg-gestalten-knopf.sg-gestalten-knopf:hover,
a.sg-gestalten-knopf.sg-gestalten-knopf:focus-visible {
  background: var(--sg-gestalten-dunkel);
  border-color: var(--sg-gestalten-dunkel);
  color: #fff;
}

/* Manche Themes setzen die Zweitzeile im Knopf eigens ein (z. B.
   .btn-aktion.gestalten span in themes/stempel-partner) – die würde
   sonst in der alten Akzentfarbe stehen bleiben. */
a.sg-gestalten-knopf.sg-gestalten-knopf span {
  color: inherit;
}

.btn-ghost {
  background: #fff;
  border-color: var(--papier-rand);
  color: var(--tinte);
}

.btn-ghost:hover {
  border-color: var(--tinte);
}

.btn-outline {
  background: #fff;
  color: var(--tinte);
  border-color: var(--papier-rand);
}

.btn-outline:hover {
  border-color: var(--tinte);
}

.btn-outline-hell {
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
}

.btn-outline-hell:hover {
  background: #fff;
  color: var(--tinte);
}

.btn-klein {
  padding: .55em 1.1em;
  font-size: .85rem;
}

/* Für die Cookie-Ablehnung: optisch GLEICHWERTIG zu btn-primary (gleiche
   Größe/Gewicht, nur andere Füllfarbe) statt eines unauffälligen
   btn-ghost/btn-outline – eine Einwilligung gilt nur dann als freiwillig,
   wenn Ablehnen genauso leicht fällt wie Zustimmen (siehe EuGH "Planet49"
   sowie die Praxis der Landesdatenschutzbehörden zu Cookie-Bannern). */
.btn-dunkel {
  background: var(--tinte);
  color: #fff;
  box-shadow: 0 6px 14px rgba(31, 35, 40, .2);
}

.btn-dunkel:hover {
  background: #000;
}

.btn-block {
  width: 100%;
}

.icon-box {
  width: 16px;
  height: 16px;
  flex: none;
}

.icon-box svg {
  width: 100%;
  height: 100%;
}

.upload-wrap {
  position: relative;
}

.upload-wrap input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.upload-filename {
  font-size: .78rem;
  color: var(--tinte-70);
  margin-top: 8px;
}

.upload-filename.has-file {
  color: #1fa15a;
  font-weight: 600;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 56px 0 72px;
  background: #fff;
}

.hero .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero p.lead {
  font-size: 1.05rem;
  max-width: 46ch;
  margin: 18px 0 30px;
}

.hero-cta {
  display: flex;
  gap: 14px;
  margin-top: 1.8em;
  flex-wrap: wrap;
}

.hero-visual {
  position: relative;
}

.hero-visual .ph {
  aspect-ratio: 6/5;
  border-radius: 8px;
  background: var(--papier);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.hero-visual .ph img {
  max-width: 70%;
  max-height: 70%;
  margin: 0 auto;
}

.hero-stat-bar {
  display: flex;
  border: 1px solid var(--papier-rand);
  border-top: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

.hero-stat {
  flex: 1;
  padding: 14px 16px;
  font-size: .82rem;
}

.hero-stat+.hero-stat {
  border-left: 1px solid var(--papier-rand);
}

.hero-stat strong {
  display: block;
  font-size: 1.05rem;
  color: var(--tinte);
}

.hero-stat span {
  color: var(--tinte-70);
}

.hero-badges {
  display: flex;
  gap: 28px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--papier-rand);
  flex-wrap: wrap;
}

.hero-badge {
  font-size: .86rem;
  color: var(--tinte-70);
}

.hero-badge b {
  color: var(--tinte);
  font-weight: 700;
}

/* ---------- Sektionen allgemein ---------- */
/*
section {
  padding: 64px 0;
}*/

section.hell-grau {
  background: var(--papier);
}

.section-kopf {
  max-width: 620px;
  margin-bottom: 2.4em;
}

.section-kopf.mitte {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- Karten: 3 Einstiege (Berater / Lexikon / Entstehung) ---------- */
.einstieg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.einstieg-karte {
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius);
  padding: 28px;
  text-decoration: none;
  color: var(--tinte);
  box-shadow: var(--schatten-klein);
  transition: transform .15s ease, box-shadow .15s ease;
  display: flex;
  flex-direction: column;
  gap: .9em;
}

.einstieg-karte:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten);
}

.einstieg-ikon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--papier-rand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rot);
  flex-shrink: 0;
}

.einstieg-karte .pfeil {
  margin-top: auto;
  font-size: .85rem;
  color: var(--rot);
  font-weight: 700;
}

/* Eigener Fix (Kundenwunsch): alternative, kompakte Listen-Darstellung der
   Unterkategorien auf public/kategorie.php – je Kategorie über
   admin/kategorie_form.php ("Darstellung der eigenen Unterkategorien")
   wählbar, siehe .einstieg-grid oben für die Kachel-Variante. */
.unterkat-liste {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 2.4em;
}

.unterkat-zeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  text-decoration: none;
  color: var(--tinte);
  font-weight: 700;
  background: #fff;
  border-bottom: 1px solid var(--papier-rand);
  transition: background .12s, color .12s;
}

.unterkat-zeile:last-child {
  border-bottom: none;
}

.unterkat-zeile:hover {
  background: var(--papier);
  color: var(--rot);
}

.unterkat-zeile svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---------- Berater-Wizard ---------- */
.berater-buehne {
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: 10px;
  box-shadow: var(--schatten);
  padding: clamp(24px, 5vw, 48px);
  max-width: 720px;
  margin: 0 auto;
}

.fortschritt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2.2em;
}

.fortschritt .strich {
  height: 4px;
  border-radius: 2px;
  background: var(--papier-rand);
  flex: 1;
  overflow: hidden;
}

.fortschritt .strich span {
  display: block;
  height: 100%;
  background: var(--rot);
}

.fortschritt .strich.erledigt span {
  width: 100%;
}

.fortschritt .strich.aktiv span {
  width: 100%;
}

.fortschritt .strich.offen span {
  width: 0;
}

.fortschritt-label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--tinte-45);
  white-space: nowrap;
}

.frage-titel {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  margin-bottom: .3em;
}

.frage-unter {
  color: var(--tinte-70);
  margin-bottom: 2em;
}

.antwort-liste {
  display: grid;
  gap: 12px;
}

.antwort-karte {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--tinte);
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
}

.antwort-karte:hover {
  border-color: var(--rot);
  box-shadow: 0 4px 14px rgba(200, 16, 46, .1);
}

.antwort-ikon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--papier-rand);
  background: var(--rot-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--rot);
  font-weight: 700;
}

.antwort-text {
  font-weight: 700;
  font-size: .96rem;
}

.antwort-chevron {
  margin-left: auto;
  color: var(--tinte-45);
}

.berater-fuss {
  margin-top: 2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.link-zurueck {
  font-size: .88rem;
  color: var(--tinte-45);
  text-decoration: none;
  font-weight: 700;
}

.link-zurueck:hover {
  color: var(--rot);
}

/* Ergebnisseite */
.ergebnis-kopf {
  text-align: center;
  margin-bottom: 2.4em;
}

.ergebnis-stempelmarke {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  border: 1.5px solid var(--rot);
  background: var(--rot-tint);
  color: var(--rot);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.1em;
  font-weight: 700;
  font-size: 1.4rem;
}

.artikel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 2em;
}

.artikel-karte {
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten-klein);
  display: flex;
  flex-direction: column;
  transition: transform .15s ease, box-shadow .15s ease;
}

.artikel-karte:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten);
}

.artikel-bild {
  aspect-ratio: 1/1;
  background: var(--papier);
  overflow: hidden;
}

.artikel-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artikel-inhalt {
  padding: 16px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: .35em;
  flex: 1;
}

.artikel-kategorie {
  font-size: .72rem;
  color: var(--rot);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
}

.artikel-preis {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--rot);
  margin-top: .2em;
}

.artikel-inhalt .btn {
  margin-top: 1em;
}

/* ---------- Lexikon ---------- */
.lexikon-suche {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius);
  padding: .5em .5em .5em 1.1em;
  max-width: 460px;
  margin-bottom: 2.4em;
}

.lexikon-suche input {
  border: none;
  outline: none;
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
  flex: 1;
  background: transparent;
}

.lexikon-buchstabe {
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--rot);
  margin: 1.6em 0 .8em;
  padding-top: .3em;
  border-top: 1px solid var(--papier-rand);
}

.lexikon-buchstabe:first-of-type {
  border-top: none;
  margin-top: 0;
}

.lexikon-eintrag {
  border-bottom: 1px solid var(--papier-rand);
  padding: 1.1em 0;
}

.lexikon-eintrag summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}

.lexikon-eintrag summary::-webkit-details-marker {
  display: none;
}

.lexikon-eintrag summary::after {
  content: "+";
  color: var(--rot);
  font-size: 1.3rem;
  font-weight: 400;
  flex-shrink: 0;
}

.lexikon-eintrag[open] summary::after {
  content: "–";
}

.lexikon-eintrag .lexikon-body {
  display: flex;
  gap: 1.4em;
  margin-top: 1em;
  align-items: flex-start;
}

.lexikon-eintrag .lexikon-body img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: var(--radius-klein);
  flex-shrink: 0;
  background: var(--papier);
}

.lexikon-eintrag .lexikon-kategorie {
  font-size: .72rem;
  color: var(--tinte-45);
  text-transform: uppercase;
  font-weight: 700;
}

/* ---------- Entstehung / Prozess ---------- */
.prozess-liste {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 2.6em;
}

.prozess-schritt {
  display: grid;
  grid-template-columns: 70px 1fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 2.2em 0;
  border-top: 1px solid var(--papier-rand);
}

.prozess-schritt:last-child {
  border-bottom: 1px solid var(--papier-rand);
}

.prozess-nummer {
  font-size: 2rem;
  font-weight: 800;
  color: var(--papier-rand);
}

.prozess-bild {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten-klein);
  background: var(--papier);
}

.prozess-schritt:nth-child(even) .prozess-bild {
  order: 3;
}

.prozess-schritt:nth-child(even) .prozess-text {
  order: 2;
}

/* ---------- Fußzeile ---------- */
.site-footer {
  background: var(--tinte);
  color: rgba(255, 255, 255, .75);
  padding: 52px 0 30px;
  margin-top: 50px;
}

.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

.site-footer a {
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
}

.site-footer a:hover {
  color: #fff;
}

.footer-spalte h4 {
  color: #fff;
  font-size: .98rem;
  margin-bottom: .9em;
}

.footer-spalte ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .6em;
  font-size: .9rem;
}

.footer-unten {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8rem;
  text-align: center;
  color: rgba(255, 255, 255, .45);
}

/* ---------- Widerrufsbutton (gesetzliche Pflicht seit 19.06.2026) ---------- */
.footer-widerruf-leiste {
  margin-top: 36px;
  padding: 18px 0;
  background: rgba(255, 255, 255, .06);
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.footer-widerruf-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  text-align: center;
}

.footer-widerruf-text {
  color: rgba(255, 255, 255, .75);
  font-size: .9rem;
}

.footer-widerruf-btn {
  display: inline-block;
  background: var(--rot);
  color: #fff !important;
  font-weight: 700;
  font-size: .88rem;
  padding: 10px 22px;
  border-radius: 99px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .12s ease, transform .12s ease;
}

.footer-widerruf-btn:hover {
  background: var(--rot-dunkel);
  transform: translateY(-1px);
}

/* ---------- Backend / Admin ---------- */
body.admin {
  background: var(--papier);
}

.admin-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Eigener Fix (Kundenwunsch): Hauptmenü als Dropdown-Leiste oben statt
   Seitenleiste, siehe includes/admin_header.php ($adminMenu) und
   assets/js/admin_nav.js für das Auf-/Zuklappen der Untermenüs. */
.admin-navbar {
  background: var(--tinte);
  color: rgba(255, 255, 255, .82);
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-navbar-inner {
  display: flex;
  align-items: center;
  gap: 1.4em;
  padding: 10px 24px;
  flex-wrap: wrap;
}

.admin-navbar-logo {
  color: #fff;
  flex-shrink: 0;
  text-decoration: none;
  font-weight: 800;
}

.admin-navbar-logo.aktiv {
  color: var(--rot);
}

.admin-navgruppen {
  display: flex;
  align-items: center;
  gap: .3em;
  flex-wrap: wrap;
  flex: 1;
}

.admin-navgruppe {
  position: relative;
}

.admin-navgruppe-btn {
  display: flex;
  align-items: center;
  gap: .4em;
  padding: .65em .9em;
  border-radius: var(--radius);
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .82);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}


.admin-navgruppe-btn:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.admin-navgruppe-btn.aktiv {
  background: var(--rot);
  color: #fff;
}

.admin-navgruppe-pfeil {
  font-size: .7em;
  opacity: .8;
}

.admin-navgruppe-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  background: #fff;
  color: var(--tinte);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten-klein, 0 10px 30px -10px rgba(20, 20, 30, .35));
  min-width: 210px;
  padding: 6px;
  z-index: 110;
}

.admin-navgruppe-panel.offen {
  display: block;
}

.admin-navgruppe-panel a {
  display: block;
  padding: .6em .8em;
  border-radius: var(--radius-klein);
  text-decoration: none;
  color: var(--tinte);
  font-weight: 600;
  font-size: .88rem;
}

.admin-navgruppe-panel a:hover {
  background: var(--papier);
}

.admin-navgruppe-panel a.aktiv {
  background: var(--rot);
  color: #fff;
}

.admin-navbar-rechts {
  display: flex;
  align-items: center;
  gap: 1em;
  flex-shrink: 0;
}

.admin-navbar-linkklein {
  color: rgba(255, 255, 255, .72);
  font-size: .85rem;
  text-decoration: none;
  font-weight: 600;
}

.admin-navbar-linkklein:hover {
  color: #fff;
}

.admin-navtoggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
}

.admin-navtoggle span {
  width: 22px;
  height: 2px;
  background: #fff;
  display: block;
}

.admin-main {
  flex: 1;
  padding: 32px 36px;
}

.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.8em;
}

.admin-karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-bottom: 2.2em;
}

.admin-kachel {
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius-klein);
  padding: 1.3em 1.4em;
}

.admin-kachel .zahl {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--rot);
}

.admin-kachel .label {
  font-size: .83rem;
  color: var(--tinte-70);
}

.card {
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius-klein);
  padding: 1.7em;
  margin-bottom: 1.5em;
  box-shadow: var(--schatten-klein);
  display: inline-block;
  width: 100%;
}

.card h3 {
  margin-bottom: 1em;
}

table.admin-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

table.admin-tabelle th {
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinte-45);
  padding: 10px 12px;
  border-bottom: 2px solid var(--papier-rand);
}

table.admin-tabelle td {
  padding: 12px;
  border-bottom: 1px solid var(--papier-rand);
  vertical-align: middle;
}

table.admin-tabelle tr:hover td {
  background: var(--papier);
}

.tabelle-bild {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--papier);
  border: 1px solid var(--papier-rand);
}

.tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  padding: .25em .7em;
  border-radius: 4px;
  background: var(--papier);
  color: var(--tinte-70);
}

.tag.rot {
  background: var(--rot-tint);
  color: var(--rot-dunkel);
}

.aktionen {
  display: flex;
  gap: 8px;
}

.aktionen a,
.aktionen button {
  font-size: .82rem;
}

/* Eigener Fix (Kundenwunsch): einheitliche Werkzeugleiste am Kopf von
   Listenseiten (aktuell admin/bestellungen.php) – Titel links, Filter/
   Aktionen rechts, sauber umbrechend statt loser Inline-Styles. */
.admin-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--papier-rand);
}

.admin-toolbar-titel {
  margin: 0;
}

.admin-toolbar-aktionen {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-toolbar-form {
  margin: 0;
}

/* Select-Felder innerhalb einer Werkzeugleiste: eigener, pillenförmiger
   Stil statt der Standard-Formularfelder (.feld/input,select), damit sie
   optisch zu den Status-Pillen und Buttons daneben passen. */
select.select-toolbar {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: auto;
  padding: .6em 2.3em .6em 1.1em;
  border-radius: 99px;
  border: 1px solid var(--papier-rand);
  background-color: #fff;
  color: var(--tinte);
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2363696f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 10px 6px;
}

select.select-toolbar:hover {
  border-color: var(--tinte-45);
}

select.select-toolbar:focus {
  outline: none;
  border-color: var(--rot);
}

/* Status-Filterleiste in admin/bestellungen.php – farbig unterlegte
   Pillen (Farben stammen aus admin/bestellstatus.php) statt eines
   Dropdowns, in einer leicht abgesetzten Ablage gruppiert. */
.status-filterleiste {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
  background: var(--papier);
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius);
  padding: 10px;
  margin: 0 0 20px;
}

.status-pille-filter {
  display: inline-flex;
  align-items: center;
  padding: .5em 1.15em;
  border-radius: 99px;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
  box-shadow: 0 1px 2px rgba(20, 20, 30, .06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.status-pille-filter:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(20, 20, 30, .12);
}

.status-pille-filter.aktiv {
  border-color: currentColor;
  box-shadow: 0 4px 12px rgba(20, 20, 30, .16);
}

.status-pille-alle {
  background: #fff;
  color: var(--tinte-70);
  border-color: var(--papier-rand);
}

.status-pille-verwalten {
  background: #fff;
  color: var(--tinte-45);
  border-style: dashed;
  border-color: var(--papier-rand);
  box-shadow: none;
}

.status-pille-verwalten:hover {
  color: var(--tinte);
  border-color: var(--tinte-45);
  box-shadow: none;
  transform: none;
}

form.formular {
  display: grid;
  gap: 16px;
  max-width: 640px;
}

form.formular.breit {
  max-width: 100%;
}

form.formular .zeile {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.feld label {
  display: block;
  font-weight: 700;
  font-size: .85rem;
  margin-bottom: .4em;
}

.feld .hinweis {
  font-size: .78rem;
  color: var(--tinte-45);
  margin-top: .35em;
}

input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=url],
textarea,
select {
  width: 100%;
  padding: .7em .9em;
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius);
  font-family: 'Roboto', sans-serif;
  font-size: .92rem;
  background: #fff;
  color: var(--tinte);
}

input[type=checkbox] {
  width: 20px;
  height: 20px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--tinte);
}

textarea {
  resize: vertical;
  min-height: 90px;
}

.form-aktionen {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* ---------- Rich-Text-Editor (Quill – Artikel: Kurzbeschreibung, Beschreibung, Technische Daten, Versand & Lieferung) ---------- */
.richtext-editor-huelle {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
}

.richtext-editor-huelle .ql-toolbar.ql-snow {
  border: 1px solid var(--papier-rand);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--papier);
  font-family: 'Roboto', sans-serif;
}

.richtext-editor-huelle .ql-container.ql-snow {
  border: 1px solid var(--papier-rand);
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: 'Roboto', sans-serif;
  font-size: .92rem;
  min-height: 90px;
}

.richtext-editor-huelle .ql-editor {
  min-height: 90px;
  color: var(--tinte);
}

.richtext-editor-huelle .ql-editor.ql-blank::before {
  color: var(--tinte-45);
  font-style: normal;
}

.richtext-editor-huelle:focus-within .ql-toolbar.ql-snow,
.richtext-editor-huelle:focus-within .ql-container.ql-snow {
  border-color: var(--tinte);
}

.richtext-editor-huelle .ql-snow.ql-toolbar button:hover,
.richtext-editor-huelle .ql-snow.ql-toolbar button.ql-active,
.richtext-editor-huelle .ql-snow .ql-picker-label:hover {
  color: var(--rot);
}

.richtext-editor-huelle .ql-snow.ql-toolbar button:hover .ql-stroke,
.richtext-editor-huelle .ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--rot);
}

.richtext-editor-huelle .ql-snow.ql-toolbar button:hover .ql-fill,
.richtext-editor-huelle .ql-snow.ql-toolbar button.ql-active .ql-fill {
  fill: var(--rot);
}

.meldung {
  padding: 1em 1.2em;
  border-radius: var(--radius);
  margin-bottom: 1.5em;
  font-size: .9rem;
  font-weight: 700;
}

.meldung.erfolg {
  background: #e5f3e5;
  color: #1f6b2e;
}

/* Dritter Ton neben erfolg/fehler: etwas ist noch offen, aber nichts ist
   schiefgegangen - z. B. eine Newsletter-Anmeldung, die noch auf ihre
   Bestätigung wartet (siehe includes/kunde_newsletter_block.php). */
.meldung.hinweis {
  background: #fdf6e3;
  color: #7a5b12;
}

.meldung.fehler {
  background: var(--rot-tint);
  color: var(--rot-dunkel);
}

.login-buehne {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--papier);
  padding: 24px;
}

.login-karte {
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: 10px;
  box-shadow: var(--schatten);
  padding: 2.4em;
  width: 100%;
  max-width: 380px;
}

/* Fragen-Baum im Backend */
.frage-block {
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius-klein);
  margin-bottom: 16px;
  overflow: hidden;
}

.frage-block-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--papier);
}

.frage-block-body {
  padding: 16px 18px;
}

.antwort-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--papier-rand);
}

.antwort-zeile:first-of-type {
  border-top: none;
}

/* Baumübersicht (Kategoriebaum-Ansicht des Fragenbaums) */
.baumwurzel {
  list-style: none;
  margin: 0;
  padding: 0;
}

.baum-liste {
  list-style: none;
  margin: 10px 0 0 6px;
  padding: 0 0 4px 20px;
  border-left: 1px dashed var(--papier-rand);
}

.baum-frage {
  margin-bottom: 4px;
}

.baum-antwort-zweig {
  margin: 12px 0;
}

.baum-knoten {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius);
  padding: 8px 14px;
}

.baum-knoten a.baum-frage-link {
  font-weight: 700;
  color: var(--tinte);
  text-decoration: none;
  font-size: .92rem;
}

.baum-knoten a.baum-frage-link:hover {
  color: var(--rot);
}

.baum-antwort-label {
  font-size: .74rem;
  color: var(--tinte-70);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 6px;
}

.baum-ergebnis a {
  display: inline-block;
  background: var(--rot-tint);
  color: var(--rot-dunkel);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
}

.baum-ergebnis a:hover {
  text-decoration: underline;
}

.baum-warnung {
  display: inline-block;
  font-size: .8rem;
  color: var(--rot-dunkel);
  background: var(--rot-tint);
  padding: 4px 10px;
  border-radius: var(--radius);
}

/* ---------- Über uns / Image-Seite (Full-Width) ---------- */
.ueberuns-hero {
  background: var(--tinte);
  color: #fff;
  padding: clamp(64px, 10vw, 110px) 24px;
  text-align: center;
}

.ueberuns-hero .eyebrow {
  color: rgba(255, 255, 255, .75);
  justify-content: center;
  display: flex;
}

.ueberuns-hero h1 {
  color: #fff;
}

.ueberuns-hero p {
  color: rgba(255, 255, 255, .72);
  max-width: 620px;
  margin: 16px auto 0;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 420px;
}

.split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px clamp(24px, 6vw, 80px);
}

.split-text p:last-child {
  margin-bottom: 0;
}

.split-bild {
  background: var(--papier);
  min-height: 280px;
}

.split-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stats-band {
  background: var(--rot);
  color: #fff;
  padding: 52px 24px;
}

.stats-band .stats-wrap {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}

.stats-band strong {
  display: block;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
}

.stats-band span {
  opacity: .85;
  font-size: .88rem;
}

.cta-band {
  background: var(--papier);
  padding: clamp(56px, 8vw, 88px) 24px;
  text-align: center;
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .split-bild {
    min-height: 220px;
    order: -1;
  }

  .stats-band .stats-wrap {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---------- Utilities ---------- */
.zentriert {
  text-align: center;
}

.mt-0 {
  margin-top: 0;
}

.text-klein {
  font-size: .70rem;
  color: var(--tinte-46);
}

.text-mittel {
  font-size: .90rem;
  color: var(--tinte-70);
}

.hinweis-link {
  text-decoration: none;
  color: var(--rot);
  font-size: .90rem;
  font-weight: 600;
}

.leerzustand {
  text-align: center;
  padding: 4em 2em;
  color: var(--tinte-45);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero .wrap {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    order: -1;
  }

  /* !important nötig: includes/startseiten/standard.php und
     public/kategorie.php setzen grid-template-columns direkt als
     Inline-style="..." (dynamische Spaltenzahl je nach Anzahl der
     Unterkategorien) – ein Inline-style hat immer Vorrang vor jeder
     Regel aus einem <link>-Stylesheet, unabhängig von Media Queries.
     Ohne !important bleibt die Karten-Reihe deshalb mobil bei z. B. 4
     Spalten stehen und sprengt die Seitenbreite (seitliches Scrollen). */
  .einstieg-grid {
    grid-template-columns: 1fr !important;
  }

  .prozess-schritt {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .prozess-schritt .prozess-bild {
    order: 1 !important;
  }

  .prozess-schritt .prozess-text {
    order: 2 !important;
  }

  .prozess-nummer {
    order: 0;
  }

  .admin-main {
    padding: 24px 18px;
  }
}

/* Kopfzeile/Navigation wechseln schon ab 1200px ins mobile Off-Canvas-Menü
   (Kundenwunsch: eigene, breitere Schwelle nur für den Header) – bei den
   üblichen Tablet-Breiten (z. B. 820px, 1024px) reichte der Platz für
   Logo + volle Kategorie-Navigation + Suche + Konto/Warenkorb im
   Desktop-Nav NICHT aus: Konto-/Warenkorb-Icons wurden dabei bis zu 350px
   nach rechts aus dem sichtbaren Bereich gedrängt, nur per seitlichem
   Scrollen erreichbar. Der Rest der Seite (Formulare, Karten-Raster usw.)
   bleibt bei der allgemeinen 760px-Schwelle weiter unten – hier geht es
   ausschließlich um die Kopfzeile, siehe auch die drei weiteren
   @media(max-width:1200px)/(min-width:1201px)-Stellen bei .nav-flyout,
   .nav-item und .nav-flyout-bild/.nav-flyout-chevron. */
@media (max-width: 1200px) {

  .site-header .wrap {
    display: grid;
    grid-template-columns: 36px 1fr;
    /* Toggle-Button bekommt feste 36px, Suchfeld nutzt den gesamten restlichen Platz (1fr) */
    grid-template-areas:
      "logo aktionen"
      "toggle suche";
    height: auto;
    row-gap: 12px;
    column-gap: 8px;
    /* Etwas kompakter, damit die Suche noch mehr Breite bekommt */
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .logo {
    grid-area: logo;
  }

  /* Das Logo steht in der 36px-Spalte – die Breite gilt dem Umschalt-Knopf
     DARUNTER – und ragt deshalb absichtlich in die Nachbarzelle hinein.
     Unbegrenzt durfte es das aber nicht: Auf einem schmalen Telefon lief
     der Schriftzug unter die Symbolreihe, das Konto-Symbol saß mitten im
     Logo (gemessen bei 375px: Logo bis 240px, Konto-Symbol ab 225px).

     Statt einer festen Zahl der tatsächlich freie Platz: Fensterbreite
     minus Innenabstand links und rechts, minus Symbolreihe, minus
     Spaltenabstand – das sind die 190px. Ist mehr Platz da, bleibt es bei
     den 220px aus .logo img weiter oben. */
  .logo img {
    max-width: min(220px, calc(100vw - 190px));
  }

  .kopf-aktionen {
    grid-area: aktionen;
    justify-self: end;
  }

  .nav-toggle {
    grid-area: toggle;
    display: block;
    align-self: center;
    justify-self: center;
    /* Zentriert das Icon in seiner schmalen 36px-Spalte */
  }

  .kopf-suche {
    grid-area: suche;
    position: static;
    display: flex;
    margin: 0;
    left: auto;
    right: auto;
    box-shadow: none;
    width: 100%;
  }

  .kopf-suche-toggle {
    display: none !important;
  }

  /* Kundenwunsch/Bugfix: position:fixed statt position:absolute. Die
     Kopfzeile ist position:sticky – ein absolut positioniertes Kind wie
     dieses Menü wird von Browsern dabei relativ zur DOKUMENT-Position der
     Kopfzeile berechnet, nicht zu ihrer sichtbaren, angehefteten Position
     (bekannte CSS-Falle bei sticky+absolute). Ist die Seite beim Öffnen
     bereits heruntergescrollt, landete das Menü dadurch oberhalb des
     sichtbaren Bereichs – nur der abgedunkelte Hintergrund war zu sehen.
     position:fixed ist immer relativ zum Viewport und dadurch unabhängig
     vom Scroll-Stand. "top" ist die tatsächlich gemessene Höhe der
     mobilen Kopfzeile (2-zeiliges Grid, siehe .site-header .wrap oben) +
     etwas Puffer – bei Änderung der Kopfzeile hier mit anpassen (gleiches
     Vorgehen wie bei "top:75px" bei .nav-flyout weiter unten für Desktop).
     bottom:0 + overflow-y:auto: das Menü selbst scrollt jetzt unabhängig
     von der (während es offen ist gesperrten, siehe body.nav-offen-sperre)
     Seite – sonst wären untere Einträge bei ausgeklappten Unterkategorien
     nicht mehr erreichbar gewesen. */
  nav.hauptnav {
    position: fixed;
    /* 128px ist die gemessene Hoehe der mobilen Kopfzeile - und zwar
       unabhaengig vom Urlaubsstreifen: Solange das Menue offen ist,
       haengt die Kopfzeile per position:fixed mit top:0 am Fensterrand
       (siehe body.nav-offen-sperre weiter oben) und verdeckt den
       Streifen. Ihre Unterkante liegt dann immer bei genau diesen
       128px. Ein Aufschlag fuer den Streifen waere hier also falsch. */
    top: 128px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background-color: #fff;
    opacity: 1;
    box-shadow: 0 16px 30px -10px rgba(20, 20, 30, .2);
    flex-direction: column;
    padding: 30px 24px;
    gap: 6px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 60;
  }

  nav.hauptnav.offen {
    transform: translateX(0);
  }

  nav.hauptnav a {
    padding: .9em 0;
    border-bottom: 1px solid var(--papier-rand);
    font-size: 1.05rem;
  }

  .kopf-link-text {
    display: none;
  }
}

@media (max-width: 760px) {

  section {
    padding: 48px 0;
  }

  form.formular .zeile {
    grid-template-columns: 1fr;
  }

  .admin-navtoggle {
    display: flex;
  }

  .admin-navgruppen {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    order: 3;
    gap: 0;
  }

  .admin-navgruppen.offen {
    display: flex;
  }

  .admin-navgruppe {
    width: 100%;
  }

  .admin-navgruppe-btn {
    width: 100%;
    justify-content: space-between;
  }

  .admin-navgruppe-panel {
    position: static;
    box-shadow: none;
    background: rgba(255, 255, 255, .04);
    margin-top: 0;
  }

  .admin-navgruppe-panel a {
    color: rgba(255, 255, 255, .82);
  }

  .admin-navgruppe-panel a:hover {
    background: rgba(255, 255, 255, .08);
  }

  .lexikon-eintrag .lexikon-body {
    flex-direction: column;
  }

  .lexikon-eintrag .lexikon-body img {
    width: 100%;
    height: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ============================================================
   Shop-Erweiterungen: Kopf-Aktionen, Produktraster, Galerie,
   Warenkorb, Checkout, Konto-Bereich
   ============================================================ */

/* ---------- Kopf-Aktionen (Konto / Warenkorb) ---------- */
.kopf-aktionen {
  display: flex;
  align-items: center;
  gap: 20px;
}

.kopf-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: var(--tinte-70);
  font-size: .68rem;
  font-weight: 700;
  position: relative;
}

.kopf-link:hover {
  color: var(--rot);
}

.kopf-link svg {
  width: 22px;
  height: 22px;
}

.kopf-suche-toggle[aria-expanded="true"] {
  color: var(--rot);
}

.kopf-link-text {
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.warenkorb-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  background: var(--rot);
  color: #fff;
  font-size: .66rem;
  font-weight: 800;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  font-size: .82rem;
  color: var(--tinte-70);
  margin: 22px 0;
}

.breadcrumb a {
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--tinte);
}

.breadcrumb span {
  margin: 0 6px;
  color: var(--papier-rand);
}

/* ---------- Kategorieseite: Kopf & Toolbar ---------- */
.cat-page {
  padding: clamp(24px, 4vw, 40px) 0 clamp(48px, 6vw, 88px);
}

.cat-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.cat-count {
  color: var(--tinte-70);
  font-size: .9rem;
}

.cat-desc {
  color: var(--tinte-70);
  font-size: .95rem;
  max-width: 680px;
  margin: 0 0 26px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--papier-rand);
  border-bottom: 1px solid var(--papier-rand);
  margin-bottom: 28px;
}

.sort-select {
  width: auto;
  padding: 10px 14px;
  border: 1px solid var(--papier-rand);
  border-radius: 6px;
  font-size: .86rem;
  color: var(--tinte);
  background: #fff;
  font-family: inherit;
}

.view-switch {
  display: flex;
  gap: 6px;
}

.view-btn {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid var(--papier-rand);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tinte-70);
}

.view-btn svg {
  width: 17px;
  height: 17px;
}

.view-btn:hover {
  border-color: var(--tinte);
  color: var(--tinte);
}

.view-btn.active {
  border-color: var(--tinte);
  background: var(--tinte);
  color: #fff;
}

/* ---------- Produkt-Grid ---------- */
.prod-grid {
  display: grid;
  gap: 20px;
}

.prod-grid[data-view="4"] {
  grid-template-columns: repeat(4, 1fr);
}

.prod-grid[data-view="3"] {
  grid-template-columns: repeat(3, 1fr);
}

.prod-grid[data-view="2"] {
  grid-template-columns: repeat(2, 1fr);
}

.prod-grid[data-view="list"] {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--papier-rand);
}

.prod-grid[data-view="6"] {
  grid-template-columns: repeat(6, 1fr);
}

.prod-grid[data-view="5"] {
  grid-template-columns: repeat(5, 1fr);
}

.prod-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius);
  transition: box-shadow .12s ease, transform .12s ease;
  position: relative;
  text-decoration: none;
  color: var(--tinte);
}

.prod-grid:not([data-view="list"]) .prod-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--schatten);
}

.prod-item .prod-bild {
  aspect-ratio: 1/1;
  background: var(--papier);
  overflow: hidden;
}

.prod-item .prod-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prod-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fff;
  color: var(--rot);
  font-size: .66rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid var(--papier-rand);
  z-index: 2;
}

.prod-body {
  padding: 14px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.prod-kategorie {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--tinte-45);
  margin-bottom: 2px;
}

.prod-body strong {
  font-size: .9rem;
  display: block;
  margin-bottom: 2px;
}

.prod-meta {
  color: var(--tinte-70);
  font-size: .8rem;
}

.prod-price-row {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.price {
  font-size: .92rem;
  color: var(--rot);
  font-weight: 800;
}

.price-old {
  font-size: .8rem;
  color: var(--tinte-70);
  text-decoration: line-through;
  font-weight: 500;
  margin-right: 6px;
}

.prod-grid[data-view="list"] .prod-item {
  flex-direction: row;
  align-items: center;
  border-left: none;
  border-right: none;
  border-top: none;
  border-radius: 0;
  box-shadow: none !important;
  transform: none !important;
  gap: 20px;
  padding: 14px 4px;
}

.prod-grid[data-view="list"] .prod-item .prod-bild {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 6px;
}

.prod-grid[data-view="list"] .prod-body {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.prod-grid[data-view="list"] .prod-price-row {
  margin-top: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.prod-grid[data-view="list"] .prod-badge {
  display: none;
}

.pager {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.pager a {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid var(--papier-rand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .86rem;
  color: var(--tinte-70);
  text-decoration: none;
}

.pager a.active {
  border-color: var(--tinte);
  background: var(--tinte);
  color: #fff;
  font-weight: 700;
}

.pager a:hover:not(.active) {
  border-color: var(--tinte);
  color: var(--tinte);
}

/* ---------- Produktdetailseite (PDP) ---------- */
.pdp-grid {
  display: grid;
  grid-template-columns: minmax(340px, 560px) 1fr;
  gap: 56px;
  align-items: flex-start;
}

.gallery-main-wrap {
  max-width: 520px;
}

.gallery-main {
  aspect-ratio: 1/1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--papier);
}

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  color: var(--tinte-70);
  margin-bottom: 14px;
}

.pdp-rating .stars {
  color: #f0a324;
}

.pdp-lead {
  color: var(--tinte-70);
  font-size: .96rem;
  max-width: 520px;
  margin: 0 0 22px;
}

.pdp-price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 26px;
}

.pdp-price-row .price {
  font-size: 1.5rem;
}

.pdp-price-note {
  color: var(--tinte-70);
  font-size: .82rem;
}

.pdp-qty-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.pdp-qty-row .qty-control {
  flex: none;
}

.pdp-lager {
  font-size: .84rem;
  font-weight: 700;
  color: #1fa15a;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pdp-lager.knapp {
  color: var(--rot);
}

.pdp-trust {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 20px;
  margin-top: 22px;
  border-top: 1px solid var(--papier-rand);
  font-size: .84rem;
  color: var(--tinte-70);
}

.pdp-trust span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdp-trust svg {
  width: 16px;
  height: 16px;
  color: var(--tinte);
  flex: none;
}

.pdp-tabs {
  margin-top: 56px;
}

.tab-nav {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--papier-rand);
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.tab-btn {
  padding-bottom: 14px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--tinte-70);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.tab-btn.active {
  color: var(--rot);
  border-bottom-color: var(--rot);
}

.tab-panel {
  display: none;
  width: 100%;
  color: var(--tinte-70);
  font-size: .94rem;
}

.tab-panel.active {
  display: block;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.spec-table td {
  padding: 11px 0;
  border-bottom: 1px solid var(--papier-rand);
}

.spec-table td:first-child {
  color: var(--tinte-70);
  width: 45%;
}

.spec-table td:last-child {
  font-weight: 600;
  color: var(--tinte);
}

/* Verwandte Artikel auf PDP */
.verwandt-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 2em;
}

/* ---------- Warenkorb / Checkout: Schritt-Anzeige ---------- */
.steps {
  display: flex;
  align-items: center;
  margin-bottom: 34px;
  flex-wrap: wrap;
}

.step-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .82rem;
  font-weight: 700;
  flex: none;
}

.step-item.current .step-num {
  background: var(--rot);
  color: #fff;
}

.step-item.fertig .step-num {
  background: #1fa15a;
  color: #fff;
}

.step-item.current span.step-label {
  color: var(--tinte);
  font-weight: 700;
}

.step-item:not(.current) .step-num {
  border: 1.5px solid var(--papier-rand);
  color: var(--tinte-70);
}

.step-item:not(.current) span.step-label {
  color: var(--tinte-70);
}

.step-label {
  font-size: .94rem;
}

.step-line {
  flex: 1;
  height: 1px;
  background: var(--papier-rand);
  margin: 0 18px;
  min-width: 20px;
}

/* ---------- Warenkorb-Tabelle ---------- */
.cart-card {
  overflow: hidden;
  margin-bottom: 20px;
  width: 100%;
}

.cart-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 26px;
  border-bottom: 1px solid var(--papier-rand);
}

.cart-card-head h2 {
  font-size: 1.15rem;
  margin: 0;
}

.cart-card-head span {
  color: var(--tinte-70);
  font-size: .85rem;
}

.cart-table-head {
  display: grid;
  grid-template-columns: 1fr 140px 120px 130px 40px;
  gap: 16px;
  padding: 16px 26px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--tinte-70);
  text-transform: uppercase;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--papier-rand);
}

.cart-row {
  display: grid;
  grid-template-columns: 1fr 140px 120px 130px 40px;
  gap: 16px;
  align-items: center;
  padding: 20px 26px;
  border-bottom: 1px solid var(--papier-rand);
}

.cart-row-prod {
  display: flex;
  gap: 14px;
  align-items: center;
}

.cart-row-prod .prod-bild {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  flex: none;
  background: var(--papier);
  overflow: hidden;
}

.cart-row-prod .prod-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vorschaubild einer individuellen Stempel-Gestaltung deutlich größer und
   mit Rahmen abgesetzt, damit die eigene Gestaltung im Warenkorb tatsächlich
   erkennbar ist (siehe includes/cart.php, .drawer-bild-gestaltung analog
   für das Warenkorb-Flyout). */
.cart-row-prod .prod-bild-gestaltung {
  width: 104px;
  height: 104px;
  border: 1px solid var(--papier-rand);
  background: #fff;
}

.cart-row-prod .prod-bild-gestaltung img {
  object-fit: contain;
}

.cart-row-prod strong {
  display: block;
  font-size: .92rem;
}

.cart-row-prod span {
  color: var(--tinte-70);
  font-size: .82rem;
}

.cart-unit-price {
  font-size: .88rem;
  color: var(--tinte-70);
}

.qty-control {
  display: flex;
  align-items: center;
  border: 1px solid var(--papier-rand);
  border-radius: 6px;
  overflow: hidden;
  width: fit-content;
}

.qty-btn {
  width: 30px;
  height: 34px;
  border: none;
  background: #fff;
  color: var(--tinte);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qty-btn:hover {
  background: var(--papier);
}

.qty-input {
  width: 38px;
  height: 34px;
  border: none;
  border-left: 1px solid var(--papier-rand);
  border-right: 1px solid var(--papier-rand);
  text-align: center;
  font-size: .88rem;
  font-family: inherit;
}

.qty-input:focus {
  outline: none;
}

.cart-subtotal {
  font-size: .94rem;
  font-weight: 800;
  color: var(--tinte);
}

.remove-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--papier-rand);
  background: #fff;
  color: var(--tinte-70);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.remove-btn:hover {
  border-color: var(--rot);
  color: var(--rot);
}

.remove-btn svg {
  width: 15px;
  height: 15px;
}

.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 26px;
  flex-wrap: wrap;
  gap: 16px;
}

.cart-total {
  text-align: right;
}

.cart-total-label {
  font-size: .82rem;
  color: var(--tinte-70);
}

.cart-total-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--tinte);
}

.cart-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 26px 26px;
}

.xsell-head {
  margin: 44px 0 20px;
}

.xsell-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ---------- Kontoauswahl / Checkout-Auswahl ---------- */
.choice-page {
  padding: clamp(32px, 5vw, 56px) 0;
}

.choice-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(28px, 4vw, 40px);
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto;
}

.choice-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
}

.choice-card h2 {
  font-size: 1.1rem;
}

.choice-card>p {
  color: var(--tinte-70);
  font-size: .9rem;
  margin: 0 0 20px;
  flex: 1;
}

.choice-card .btn {
  margin-top: auto;
}

.choice-ikon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--papier-rand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--rot);
  margin-bottom: 16px;
}

.mini-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.mini-list li {
  display: flex;
  gap: 8px;
  font-size: .86rem;
  color: var(--tinte-70);
}

.mini-list li b {
  color: #1fa15a;
  flex: none;
}

.pw-wrap {
  position: relative;
}

.pw-wrap input {
  padding-right: 38px;
}

.pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tinte-70);
  padding: 4px;
}

.pw-toggle svg {
  width: 17px;
  height: 17px;
  display: block;
}

.forgot-link {
  display: block;
  font-size: .82rem;
  color: var(--rot);
  font-weight: 600;
  margin: -4px 0 20px;
  text-decoration: none;
}

/* ---------- Registrierung ---------- */
.reg-page {
  padding: clamp(40px, 7vw, 80px) 0;
}

.reg-card {
  display: grid;
  grid-template-columns: 340px 1fr;
  overflow: hidden;
}

.reg-side {
  background: var(--tinte);
  color: #fff;
  padding: clamp(28px, 4vw, 40px);
}

.reg-side .eyebrow {
  color: #ff8a7a;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.reg-side h2 {
  color: #fff;
  font-size: 1.35rem;
  line-height: 1.3;
}

.reg-benefits {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reg-benefits li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: .88rem;
  color: #d7dade;
}

.reg-benefits .choice-ikon {
  color: #ff8a7a;
  margin-top: 2px;
  margin-bottom: 0;
  width: 16px;
  height: 16px;
  border: none;
}

.reg-form {
  padding: clamp(28px, 4vw, 40px);
}

.reg-form h1 {
  font-size: 1.5rem;
}

.reg-form>p {
  color: var(--tinte-70);
  font-size: .92rem;
  margin: 0 0 22px;
}

.type-switch {
  display: flex;
  border: 1px solid var(--papier-rand);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 24px;
}

.type-btn {
  flex: 1;
  text-align: center;
  padding: 9px;
  border-radius: 6px;
  font-size: .86rem;
  font-weight: 700;
  color: var(--tinte-70);
  cursor: pointer;
  background: none;
  border: none;
}

.type-btn.active {
  background: var(--tinte);
  color: #fff;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field-company {
  overflow: hidden;
  max-height: 0;
  transition: max-height .2s ease;
}

.field-company.open {
  max-height: 100px;
}

.pw-hint {
  font-size: .76rem;
  color: var(--tinte-70);
  margin-top: 6px;
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .84rem;
  color: var(--tinte-70);
  margin-bottom: 12px;
}

.check-row input {
  margin-top: 3px;
  flex: none;
}

.check-row a {
  color: var(--rot);
  font-weight: 600;
}

.reg-login {
  text-align: center;
  margin-top: 20px;
  font-size: .88rem;
  color: var(--tinte-70);
}

.reg-login a {
  color: var(--rot);
  font-weight: 700;
}

/* ---------- Checkout-Adresse ---------- */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}

.summary-card {
  position: sticky;
  top: 96px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
  padding: 8px 0;
  color: var(--tinte-70);
}

.summary-row.gesamt {
  border-top: 1px solid var(--papier-rand);
  margin-top: 8px;
  padding-top: 14px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--tinte);
}

.summary-produkt {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .86rem;
  padding: 6px 0;
  color: var(--tinte);
}

.zahlarten {
  display: grid;
  gap: 10px;
}

.zahlart-karte {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--papier-rand);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
}

.zahlart-karte:has(input:checked) {
  border-color: var(--rot);
  background: var(--rot-tint);
}

.zahlart-karte input {
  width: auto;
}

.zahlart-karte strong {
  font-size: .92rem;
  display: block;
}

.zahlart-karte span {
  font-size: .8rem;
  color: var(--tinte-70);
}

/* ---------- Bestellbestätigung ---------- */
.confirm-box {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(40px, 6vw, 64px) 0;
}

.confirm-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #e5f3e5;
  color: #1f6b2e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.confirm-icon svg {
  width: 34px;
  height: 34px;
}

.confirm-nr {
  display: inline-block;
  background: var(--papier);
  border: 1px solid var(--papier-rand);
  border-radius: 6px;
  padding: 10px 18px;
  font-weight: 800;
  font-size: 1.1rem;
  margin: 14px 0 28px;
}

/* ---------- Mein Konto ---------- */
.konto-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  align-items: start;
}

.konto-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius);
  padding: 8px;
}

.konto-nav a {
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--tinte-70);
  font-weight: 700;
  font-size: .9rem;
}

.konto-nav a:hover {
  background: var(--papier);
  color: var(--tinte);
}

.konto-nav a.aktiv {
  background: var(--rot-tint);
  color: var(--rot-dunkel);
}

/* ---------- Rechnungen im Kundenkonto ----------
   Markup in includes/kunde_rechnungen_block.php, das alle Themes mit
   eigener Bestelldetail-Seite einbinden. Deshalb stehen die Regeln hier in
   der gemeinsamen style.css und nicht in einer theme.css: Sonst sähe der
   Block je nach Shop anders (oder gar nicht) aus. */
.konto-rechnung {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--papier-rand);
}

.konto-rechnung:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.konto-rechnung-titel {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
}

.konto-rechnung-nr {
  font-family: 'Courier New', monospace;
  font-size: .88rem;
  color: var(--tinte-70);
}

.konto-rechnung-knoepfe {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

/* Die maschinenlesbaren Fassungen gruppiert und mit eigener Beschriftung:
   ohne sie stünden drei gleich aussehende Knöpfe nebeneinander, und der
   Kunde müsste raten, welcher „seine" Rechnung ist. */
.konto-rechnung-erechnung {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 14px;
  border-left: 1px solid var(--papier-rand);
}

.konto-rechnung-knoepfe .btn {
  gap: .45em;
}

@media (max-width: 640px) {

  /* Auf dem Telefon untereinander statt gequetscht nebeneinander – und die
     Trennlinie der E-Rechnungen wandert nach oben, weil links davon nichts
     mehr steht. */
  .konto-rechnung-knoepfe {
    width: 100%;
  }

  .konto-rechnung-knoepfe>.btn {
    flex: 1 1 100%;
    justify-content: center;
  }

  .konto-rechnung-erechnung {
    width: 100%;
    padding-left: 0;
    padding-top: 10px;
    border-left: none;
    border-top: 1px solid var(--papier-rand);
  }

  .konto-rechnung-erechnung .btn {
    flex: 1;
    justify-content: center;
  }
}

.bestellungen-liste {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bestellung-zeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
}

.status-pill {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: .3em .8em;
  border-radius: 99px;
  background: var(--papier);
  color: var(--tinte-70);
}

.status-pill.neu {
  background: #fff4dd;
  color: #8a5a00;
}

.status-pill.in_bearbeitung {
  background: #e3edff;
  color: #1d4ed8;
}

.status-pill.versendet {
  background: #e5f3e5;
  color: #1f6b2e;
}

.status-pill.storniert {
  background: var(--rot-tint);
  color: var(--rot-dunkel);
}

@media (max-width: 1000px) {
  .pdp-grid {
    grid-template-columns: 1fr;
  }

  .prod-grid[data-view="6"],
  .prod-grid[data-view="5"],
  .prod-grid[data-view="4"],
  .prod-grid[data-view="3"] {
    grid-template-columns: repeat(2, 1fr);
  }

  .checkout-grid {
    grid-template-columns: 1fr;
  }

  .summary-card {
    position: static;
  }

  .verwandt-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:900px) {
  .choice-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
  }

  .reg-card {
    grid-template-columns: 1fr;
  }

  .reg-side {
    order: 2;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .konto-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width:760px) {
  .cart-table-head {
    display: none;
  }

  .cart-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cart-row>div:not(.cart-row-prod) {
    display: flex;
    justify-content: space-between;
  }

  .xsell-grid {
    grid-template-columns: 1fr;
  }

  .verwandt-grid {
    grid-template-columns: 1fr 1fr;
  }

  .steps {
    flex-wrap: wrap;
  }

  .step-line {
    display: none;
  }
}

@media (max-width:560px) {

  .prod-grid[data-view="6"],
  .prod-grid[data-view="5"],
  .prod-grid[data-view="4"],
  .prod-grid[data-view="3"],
  .prod-grid[data-view="2"] {
    grid-template-columns: 1fr;
  }

  .choice-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Erweiterungen v2: Produktgalerie, Eigenschaften, Flyout-Nav,
   Warenkorb-Drawer, Konto-Flyout
   ============================================================ */

/* ---------- Produktgalerie mit Miniaturansichten ---------- */
.gallery {
  display: flex;
  gap: 16px;
  max-width: 560px;
}

.gallery-thumb-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.gallery-arrow {
  width: 32px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--papier-rand);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--tinte-70);
  flex: none;
}

.gallery-arrow:hover {
  border-color: var(--tinte);
  color: var(--tinte);
}

.gallery-arrow svg {
  width: 13px;
  height: 13px;
}

.gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: none;
}

.gallery-thumbs::-webkit-scrollbar {
  display: none;
}

.gallery-thumbs .thumb {
  width: 68px;
  height: 68px;
  border-radius: 6px;
  cursor: pointer;
  border: 1.5px solid var(--papier-rand);
  flex: none;
  overflow: hidden;
  background: var(--papier);
}

.gallery-thumbs .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumbs .thumb.active {
  border-color: var(--tinte);
}

/* ---------- Produkteigenschaften (Varianten mit eigenem Lagerbestand) ---------- */
.eigenschaft-feld {
  margin-bottom: 14px;
}

.eigenschaft-feld label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--tinte-70);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.eigenschaft-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--papier-rand);
  border-radius: 6px;
  font-size: .92rem;
  color: var(--tinte);
  background: #fff;
  font-family: inherit;
}

.eigenschaft-select:focus {
  outline: none;
  border-color: var(--tinte);
}

/* ---------- Flyout-Hauptnavigation mit Unterkategorien & Bild ---------- */
/* WICHTIG: position:relative für nav.hauptnav nur ab 1201px (Desktop mit
   sichtbarer Flyout-Navigation, siehe .nav-flyout unten, die als
   position:absolute relativ zu nav.hauptnav/.nav-item positioniert wird –
   bis 1200px greift stattdessen das mobile Off-Canvas-Menü, siehe
   Kundenwunsch-Kommentar bei .site-header .wrap weiter oben).
   Diese Regel stand bislang OHNE eigene Media Query hier – da sie im
   Quellcode NACH der mobilen @media(max-width:1200px)-Regel steht, die
   nav.hauptnav dort auf position:fixed setzt (fürs Off-Canvas-Menü), hat
   sie bei gleicher Selektor-Spezifität die Kaskade gewonnen und
   position:fixed auf Mobilgeräten unbemerkt wieder auf position:relative
   zurückgesetzt. Dadurch blieb nav.hauptnav Teil des normalen Flex-Layouts
   der Kopfzeile (.site-header .wrap) und hat dort ca. 300px Breite belegt
   – wodurch Konto-/Warenkorb-Buttons und der Menü-Button (.nav-toggle)
   rechts aus dem sichtbaren Bereich gedrängt wurden (nicht erreichbar,
   da wir zusätzlich seitliches Scrollen unterbunden haben). Mit der
   Media-Query hier greift auf Mobilgeräten wieder ausschließlich die
   position:fixed-Regel aus dem Off-Canvas-Menü. */
@media (min-width:1201px) {
  nav.hauptnav {
    /* STATIC, nicht relative: Das Flyout soll sich an der KOPFZEILE
       ausrichten, nicht an der Navigation oder am einzelnen Eintrag.
       Nur so klebt es an der Leiste und bleibt zugleich zur Seite
       zentriert - siehe .nav-flyout weiter unten. */
    position: static;
    align-self: stretch;
  }

}

.nav-item {
  position: relative;
}

/* Nur Desktop: macht den Link so hoch wie die ganze Kopfzeile, damit beim
   Runterfahren zum Flyout keine Hover-Lücke entsteht (siehe .nav-item>a
   unten). Ohne diese Einschränkung zwingt das mobile Off-Canvas-Menü <a>
   und .nav-flyout (dort position:static, siehe @media max-width:1200px
   weiter unten) als Flex-Row nebeneinander statt das Flyout unter den Link
   fallen zu lassen – genau das hatte das mobile Menü zerschossen. */
@media (min-width:1201px) {
  .nav-item {
    display: flex;
    align-items: stretch;
    /* STATIC hebt die Grundregel position:relative weiter oben auf -
       und zwar hier, NACH ihr: Bei gleicher Spezifitaet gewinnt die
       spaetere Regel, eine Media Query allein zaehlt dafuer nicht.

       Zweck: Der naechste positionierte Vorfahr des Flyouts soll die
       Kopfzeile sein, nicht der einzelne Menueeintrag. Sonst haengt es
       am Eintrag und landet links aus dem Bild. */
    position: static;
  }
}

.nav-item>a {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ---------- Mega-Menü-Flyout (Desktop): mehrspaltig, zur Seite zentriert ----------
   Umbau auf Wunsch: statt eines schmalen, links am Nav-Punkt ausgerichteten
   Flyouts jetzt ein breites (60-70vw), zum Viewport zentriertes Mega-Menü.
   position:fixed statt absolute, weil .nav-flyout sonst (bei position:absolute)
   relativ zum jeweiligen .nav-item positioniert wäre – je nachdem, welcher
   Hauptnav-Punkt gehovert wird, säße das Menü dann an unterschiedlichen
   x-Positionen statt zentriert zur Seite. "top:75px" entspricht der Höhe der
   Kopfzeile (.site-header .wrap: height:74px + 1px Rahmen unten, siehe oben)
   – bei Änderung der Kopfzeilenhöhe hier mit anpassen. Die Kopfzeile ist
   position:sticky mit top:0 und liegt praktisch immer ganz oben, daher ist
   Dieser Wert unabhängig vom Scroll-Stand zuverlässig. */
.nav-flyout {
  /* ABSOLUT, BEZOGEN AUF DIE KOPFZEILE (.site-header ist position:sticky
     und damit der naechste positionierte Vorfahr, seit nav.hauptnav und
     .nav-item auf dem Desktop static sind).

     Damit klebt das Flyout an der Leiste: top:100% ist deren Unterkante,
     bei jedem Scroll-Stand und mit oder ohne Urlaubsstreifen darueber.

     Vorher stand hier position:fixed mit top:75px. Das stimmte nur,
     solange nichts ueber der Kopfzeile sass. Mit dem Urlaubsstreifen
     rutschte die Leiste nach unten, das Flyout blieb stehen - und sobald
     man ein Stueck scrollte, klaffte zwischen Eintrag und Flyout eine
     Luecke, in der die Maus den Kontakt verlor.

     Die fruehere Sorge, ein absolut positioniertes Flyout wuerde je
     Menueeintrag an anderer x-Position landen, trifft hier nicht zu:
     Bezugspunkt ist die seitenbreite Kopfzeile, nicht der Eintrag -
     nachgemessen, alle Eintraege liefern dieselbe Position. */
  position: absolute;
  top: 100%;
  left: 50%;
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: 0 0 14px 14px;
  box-shadow: var(--schatten);
  display: flex;
  width: 80vw;
  /*max-width: 1200px;*/
  min-width: 600px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 70;
}

.nav-item.offen .nav-flyout,
.nav-item:hover .nav-flyout,
.nav-item:focus-within .nav-flyout {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Textbereich links: mehrspaltig (CSS-Multicol, max. 3 Spalten, je min.
   200px breit – der Browser reduziert die Spaltenzahl automatisch, wenn
   nicht genug Platz ist, z. B. bei schmaleren Desktop-/Tablet-Breiten). */
.nav-flyout-liste {
  flex: 1 1 auto;
  padding: 28px 32px;
  columns: 3 200px;
  column-gap: 34px;
}

.nav-flyout-liste a {
  text-decoration: none;
  color: var(--tinte);
}

.nav-flyout-liste a.aktiv-hover {
  background: var(--papier);
  color: var(--rot);
}

/* Jede erste Unterkategorie-Ebene = fette Spaltenüberschrift (siehe
   render_nav_unterebene() in includes/functions.php – die Struktur
   im Markup bleibt gleich, nur die Optik ändert sich hier). break-inside:
   avoid-column verhindert, dass eine Überschrift von ihrer eigenen Liste
   getrennt in die nächste Spalte rutscht. */
.nav-flyout-liste>.nav-flyout-item {
  break-inside: avoid-column;
  margin-bottom: 22px;
}

.nav-flyout-liste>.nav-flyout-item>a {
  display: block;
  padding: 2px 0 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--papier-rand);
  font-weight: 800;
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.nav-flyout-liste>.nav-flyout-item>a:hover {
  color: var(--rot);
}

/* Der abschließende "Alle X ansehen"-Link der gesamten Hauptkategorie
   (direktes Kind von .nav-flyout-liste, siehe Markup) bricht bewusst per
   column-span:all aus dem Spaltenlayout aus und bildet dadurch eine volle
   Fußzeile unter allen Spalten. */
.nav-flyout-liste>a.alle {
  column-span: all;
  display: block;
  text-align: right;
  color: var(--rot);
  font-weight: 700;
  font-size: .86rem;
  border-top: 1px solid var(--papier-rand);
  margin-top: 4px;
  padding-top: 14px;
}

/* aspect-ratio:1/1 + align-self:center statt (wie zuvor) auf die volle
   Höhe der Zeile gestreckt: .nav-flyout ist display:flex ohne eigenes
   align-items, Flex-Kinder werden also standardmäßig auf die Höhe des
   höchsten Geschwisterelements gestreckt (align-items:stretch) – hier also
   auf die Höhe von .nav-flyout-liste, die je nach Anzahl der Einträge in
   den 3 Spalten stark variiert. Das quadratische Kategoriebild wurde dadurch
   auf eine hohe, schmale Box gezwungen und per object-fit:cover nur noch
   mittig kaputt-zugeschnitten dargestellt ("zu groß und versetzt"). Mit
   aspect-ratio bestimmt stattdessen die eigene (26%-)Breite die Höhe, die
   Box bleibt also wirklich quadratisch, und align-self:center zentriert sie
   vertikal in der ggf. höheren Flyout-Zeile statt sie zu strecken. */
.nav-flyout-bild {
  flex: 0 0 26%;
  align-self: center;
  aspect-ratio: 1/1;
  margin: 24px 24px 24px 8px;
  background: var(--papier);
  border-radius: 12px;
  overflow: hidden;
  display: none;
}

.nav-flyout-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width:1201px) {
  .nav-flyout-bild {
    display: block;
  }
}

/* Verschachtelte Unterkategorie-Ebenen (2. Ebene und tiefer): auf dem
   Desktop jetzt IMMER sichtbar/eingerückt statt per Hover seitlich
   auszuklappen (früher position:absolute-Popout) – passend zum
   Mega-Menü-Look, bei dem alles auf einen Blick sichtbar sein soll.
   Jede weitere Ebene bekommt durch die Verschachtelung automatisch noch
   einmal padding-left addiert ("abgestuft"), ganz ohne dass PHP die Tiefe
   kennen müsste. */
.nav-flyout-item {
  position: relative;
}

.nav-flyout-item>a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Der Chevron (Aufklapp-Pfeil) ist nur auf Mobilgeräten sinnvoll, wo die
   Unterebenen weiterhin per Klick ein-/ausgeklappt werden (siehe
   @media max-width:1200px weiter unten) – im immer-sichtbaren
   Desktop-Mega-Menü blendet ihn diese Regel aus. */
@media (min-width:1201px) {
  .nav-flyout-chevron {
    display: none;
  }
}

.nav-flyout-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
  margin-top: 2px;
}

.nav-flyout-sub .nav-flyout-item>a {
  padding: 6px 8px;
  border-radius: 6px;
  font-weight: 500;
  font-size: .86rem;
}

.nav-flyout-sub .nav-flyout-item>a:hover {
  background: var(--papier);
  color: var(--rot);
}

.nav-flyout-sub a.alle {
  color: var(--rot);
  font-weight: 700;
  font-size: .8rem;
  border-top: 1px solid var(--papier-rand);
  margin-top: 6px;
  padding-top: 8px;
}

/* Kundenwunsch (Referenz-Screenshot, Theme "standard"): flache
   Spalten-Optik statt schwarzer/unterstrichener Überschrift mit
   eingerückten Unterebenen – Überschrift farbig, alle tieferen Ebenen ohne
   Einrückung als schlichte Liste auf gleicher Höhe, keine "Alle X
   ansehen"-Links je Zweig (nur noch der eine Gesamt-Link ganz unten bleibt,
   siehe .nav-flyout-liste>a.alle oben). Eigene Klasse ".flach" auf
   .nav-flyout-liste (siehe themes/standard/partials/kopf.php) statt die
   Basisregeln oben zu ändern – andere Themes, die dieselbe Basis nutzen,
   bleiben dadurch unverändert.
   Bewusst OHNE @media-Einschränkung: die flache Optik soll jetzt auch im
   mobilen Off-Canvas-Menü gelten (Kundenwunsch, zweite Runde) – nur das
   Auf-/Zuklappen selbst (Akkordeon, Pfeile, Animation, siehe @media
   max-width:1200px weiter unten) bleibt unverändert. ".flach" gewinnt dank
   höherer Selektor-Spezifität automatisch gegen die dort noch vorhandene
   ältere Regel (".nav-flyout-liste > .nav-flyout-item > a"), die weiterhin
   für die anderen Themes (ohne diese Klasse) die richtige ist. */
.nav-flyout-liste.flach>.nav-flyout-item>a {
  border-bottom: none;
  color: var(--rot);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  padding-bottom: 4px;
  margin-bottom: 6px;
}

.nav-flyout-liste.flach .nav-flyout-sub {
  padding-left: 0;
}

.nav-flyout-liste.flach .nav-flyout-sub .nav-flyout-item>a {
  padding: 3px 0;
  border-radius: 0;
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: normal;
}

.nav-flyout-liste.flach .nav-flyout-sub .nav-flyout-item>a:hover {
  background: none;
  text-decoration: underline;
}

.nav-flyout-liste.flach .nav-flyout-sub a.alle {
  display: none;
}

@media (max-width:1200px) {

  /* Ohne diese Regel bleibt .nav-flyout (min-width:420px, siehe oben)
     trotz opacity:0/visibility:hidden as Layout-Box im mobilen Off-Canvas-
     Menü bestehen und sprengt dadurch dessen (und damit der ganzen Seite)
     Breite – sichtbares Symptom: seitliches Scrollen auf der gesamten
     Seite. Analog zu .nav-flyout-sub direkt darunter auf position:static +
     max-height-Trick umgestellt, damit die Box im mobilen Menü keine
     Breite mehr vorgibt. */
  .nav-flyout {
    position: static;
    min-width: 0;
    width: auto;
    margin-top: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    opacity: 1;
    visibility: hidden;
    transform: none;
    transition: max-height .3s ease, visibility .3s;
    max-height: 0;
    overflow: hidden;
    display: block;
  }

  /* transform:none hier nötig (nicht nur oben bei .nav-flyout): die
     Desktop-Regel ".nav-item.offen .nav-flyout, .nav-item:hover
     .nav-flyout, ..." hat ZWEI Klassen im Selektor und damit höhere
     Spezifität als das transform:none im mobilen Basis-Block oben – sie
     gewinnt daher hier trotzdem, weil .nav-item.offen auf dem Handy
     genauso für das aufgeklappte Menü gesetzt wird wie auf dem Desktop
     fürs Hover. Ohne dieses Overwrite bleibt die Desktop-Zentrierung
     "translateX(-50%)" aktiv und verschiebt das Menü ca. um seine halbe
     eigene Breite nach links aus dem Bildschirm (transform wirkt, anders
     als "left", auch bei position:static). */
  /* Kundenwunsch: sauber nach unten aufklappen statt abrupt erscheinen –
     max-height animiert jetzt (siehe transition oben). Bewusst 1400px statt
     der früheren 3000px: Die max-height-Transition läuft über die GESAMTE
     erklärte Distanz, auch über den tatsächlichen Inhalt hinaus – bei
     3000px war der reale Inhalt (max. ca. 500-900px, ein Hauptpunkt mit
     allen Direktkindern plus einem aufgeklappten Unterzweig) meist schon
     nach einem Bruchteil der Zeit fertig gewachsen, der Rest der Animation
     "lief" unsichtbar weiter – wirkte dadurch fast wie kein Übergang. */
  .nav-item.offen .nav-flyout {
    visibility: visible;
    max-height: 1400px;
    transform: none;
  }

  /* columns:none nötig: die Desktop-Mega-Menü-Regel oben (.nav-flyout-liste)
     setzt ein mehrspaltiges Layout (columns:3 200px) – im schmalen mobilen
     Off-Canvas-Menü soll das weiterhin eine einfache, einspaltige Liste
     bleiben. Ebenso column-span/text-align beim abschließenden "Alle X
     ansehen"-Link zurücksetzen, der auf dem Desktop als rechtsbündige
     Fußzeile über alle Spalten läuft. */
  .nav-flyout-liste {
    min-width: 0;
    padding: 6px 0 6px 14px;
    columns: none;
  }

  .nav-flyout-liste>a.alle {
    column-span: none;
    text-align: left;
  }

  /* Die Desktop-Mega-Menü-Überschriften (siehe .nav-flyout-liste >
     .nav-flyout-item > a oben) sind bewusst klein/GROSSBUCHSTABEN/blass
     gehalten, damit sie im dichten Desktop-Menü als dezente Spalten-
     überschrift wirken. Mobil, wo jede Kategorie eine volle Listenzeile
     ist, wirkte das dadurch fast wie eine leere Zeile (Text kaum lesbar,
     nur die Trennlinie sichtbar) – hier wieder normalgroß/dunkel/ohne
     Versalien wie eine normale Listenzeile darstellen. */
  .nav-flyout-liste>.nav-flyout-item>a {
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--tinte);
    padding: 10px 0;
    border-bottom-color: var(--papier-rand);
  }

  .nav-flyout-sub {
    position: static;
    opacity: 1;
    visibility: hidden;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0 0 0 14px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, visibility .3s;
  }

  .nav-flyout-item.offen>.nav-flyout-sub {
    visibility: visible;
    max-height: 900px;
  }

  /* Kundenwunsch: Pfeil dreht sich beim Aufklappen, statt statisch in
     dieselbe Richtung zu zeigen – zeigt auf einen Blick, welche Zweige
     gerade offen sind. */
  .nav-item-chevron,
  .nav-flyout-chevron {
    transition: transform .2s ease;
  }

  .nav-item.offen>a>.nav-item-chevron {
    transform: rotate(180deg);
  }

  .nav-flyout-item.offen>a>.nav-flyout-chevron {
    transform: rotate(180deg);
  }

  /* Kundenwunsch: größere Schrift/Tippfläche für die flache Menü-Optik auf
     dem Handy – die Desktop-Werte (siehe .flach oben, ca. .82-.84rem) sind
     für ein dichtes Mega-Menü mit der Maus gedacht, auf dem Touchscreen
     aber zu klein zum bequemen Treffen. */
  .nav-flyout-liste.flach>.nav-flyout-item>a {
    font-size: 1.1rem;
    padding: 10px 0 8px;
  }

  .nav-flyout-liste.flach .nav-flyout-sub .nav-flyout-item>a {
    font-size: 1.05rem;
    padding: 11px 0;
  }
}

/* ---------- Header-Buttons (Konto/Warenkorb) als Flyout-Trigger ---------- */
.kopf-link {
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
}

.kopf-aktionen {
  position: relative;
}

.flyout-wrap {
  position: relative;
}

.mini-flyout {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 40vw;
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: 10px;
  box-shadow: var(--schatten);
  padding: 20px;
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.mini-flyout.offen {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.05), 0 8px 15px 0 rgba(0, 0, 0, 0.26);
}

.mini-flyout h4 {
  font-size: .95rem;
  margin-bottom: 12px;
}

.mini-flyout .feld {
  margin-bottom: 12px;
}

.mini-flyout .feld label {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  color: var(--tinte-70);
  margin-bottom: 5px;
}

.mini-flyout .feld input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--papier-rand);
  border-radius: 6px;
  font-size: .88rem;
  font-family: inherit;
}

.konto-flyout-menu a {
  display: block;
  padding: 9px 4px;
  text-decoration: none;
  color: var(--tinte);
  font-weight: 600;
  font-size: .9rem;
  border-bottom: 1px solid var(--papier-rand);
}

.konto-flyout-menu a:last-child {
  border-bottom: none;
}

.konto-flyout-menu a:hover {
  color: var(--rot);
}

.mini-flyout-fehler {
  background: var(--rot-tint);
  color: var(--rot-dunkel);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

/* ---------- Warenkorb-Drawer (rechts einfahrend) ---------- */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 30, .4);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}

.drawer-overlay.offen {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(420px, 100vw);
  background: #fff;
  z-index: 95;
  /*box-shadow: -16px 0 40px rgba(20, 20, 30, .18);*/
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
}

.cart-drawer.offen {
  transform: translateX(0);
}

.drawer-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 22px;
  border-bottom: 1px solid var(--papier-rand);
  flex: none;
}

.drawer-kopf h3 {
  margin: 0;
  font-size: 1.1rem;
}

.drawer-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tinte-70);
  padding: 6px;
}

.drawer-close svg {
  width: 20px;
  height: 20px;
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px;
}

.drawer-fuss {
  flex: none;
  padding: 16px 22px 22px;
  border-top: 1px solid var(--papier-rand);
}

.drawer-leer {
  text-align: center;
  padding: 3em 1em;
  color: var(--tinte-70);
}

/* Dezenter Bestands-Hinweis (siehe warenkorb_bestand_hinweis_html() in
   includes/cart.php) – bewusst neutral/grau statt rot: kein Fehler, nur
   eine Mengenbegrenzung samt Link zur Artikelanfrage. */
.drawer-bestand-hinweis {
  margin: 16px 22px 0;
  padding: 10px 12px;
  background: var(--papier);
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius-klein);
  color: var(--tinte-70);
  font-size: .82rem;
  line-height: 1.5;
}

.drawer-bestand-hinweis a {
  color: var(--rot);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.drawer-bestand-hinweis a:hover {
  text-decoration: underline;
}

/* Hinweis am Mengenfeld, wenn die Bestandsgrenze erreicht ist (assets/js/shop.js). */
.menge-grenze-hinweis {
  flex-basis: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--papier, #f6f6f4);
  border: 1px solid var(--papier-rand, #e4e2dc);
  border-radius: var(--radius-klein, 6px);
  color: var(--tinte-70, #555);
  font-size: .82rem;
  line-height: 1.45;
}

.menge-grenze-hinweis a {
  color: var(--rot, #c0392b);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.menge-grenze-hinweis a:hover {
  text-decoration: underline;
}

.drawer-zeile {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--papier-rand);
  align-items: flex-start;
}

.drawer-bild {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--papier);
  flex: none;
}

.drawer-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drawer-bild-platzhalter {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tinte-45);
  font-size: .55rem;
  text-align: center;
  padding: 4px;
}

/* Vorschaubild einer individuellen Stempel-Gestaltung deutlich größer als das
   normale Produktbild und mit Rahmen abgesetzt, damit Kunden ihre eigene
   Gestaltung (Text/Layout) im Warenkorb tatsächlich erkennen können, statt
   nur eine winzige, kaum lesbare Miniatur zu sehen. */
.drawer-bild-gestaltung {
  width: 96px;
  height: 96px;
  border: 1px solid var(--papier-rand);
  background: #fff;
}

.drawer-bild-gestaltung img {
  object-fit: contain;
}

.drawer-info {
  flex: 1;
  min-width: 0;
}

.drawer-info strong {
  font-size: .86rem;
}

.drawer-info strong a {
  text-decoration: none;
  color: var(--tinte);
}

.drawer-variante {
  display: block;
  font-size: .76rem;
  color: var(--tinte-70);
  margin-top: 2px;
}

.drawer-gestaltung-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.drawer-gestaltung-bearbeiten {
  font-weight: 700;
  color: var(--rot);
  text-decoration: none;
  font-size: .74rem;
  border: 1px solid var(--rot);
  border-radius: 20px;
  padding: 2px 10px;
}

.drawer-gestaltung-bearbeiten:hover {
  background: var(--rot);
  color: #fff;
}

.drawer-zeile-fuss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.drawer-preis {
  font-weight: 800;
  font-size: .88rem;
  color: var(--tinte);
}

.qty-control-klein .qty-btn {
  width: 24px;
  height: 28px;
  font-size: .9rem;
}

.qty-control-klein .qty-input {
  width: 30px;
  height: 28px;
  font-size: .8rem;
}

/* ---------- Warenkorb-Badge, Header ---------- */
.site-header .wrap {
  gap: 16px;
}

@media (max-width:520px) {
  .cart-drawer {
    width: 100vw;
  }
}

/* Kundenwunsch: Login-/Konto-Mini-Flyout auf dem Smartphone nicht als
   kleines Dropdown unter dem Icon, sondern als großes, zentriertes Fenster
   (90vh/90vw) – ersetzt die vorherige, engere @media(max-width:520px)-Regel
   (width:260px) komplett, da diese sonst mit gleicher Spezifität nach
   dieser Regel im Dokument stünde und sie bei sehr schmalen Screens wieder
   überschreiben würde. */
@media (max-width:760px) {
  .mini-flyout {
    position: fixed;
    top: 52%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: 90vw;
    height: 90vh;
    overflow-y: auto;
  }

  .mini-flyout.offen {
    transform: translate(-50%, -50%);
  }
}

/* ---------- Gestalter-Overlay (eingebetteter Stempel-Gestalter, <iframe>) ----------
   EINE Bildlaufleiste, und zwar die äußere: Das Overlay ist die einzige
   Scrollfläche, der Gestalter im iframe scrollt nicht mehr selbst (siehe
   assets/designer/designer.css, "Kein Scrollen INNERHALB des Gestalters").
   Der iframe wird dafür genau so hoch gemacht, wie der Gestalter meldet
   (postMessage 'sg-gestalter-hoehe', siehe includes/gestalten_designer_view.php
   und das Skript in den Artikelseiten der Themes). Vorher lagen drei
   Bildlaufleisten ineinander – Fenster, abgedunkelter Hintergrund und
   Gestalter –, und es war Zufall, welche man erwischte. */
.sg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 30, .55);
  z-index: 120;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5vh 2vw;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}

.sg-overlay.offen {
  opacity: 1;
  visibility: visible;
}

.sg-overlay-schliessen {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(20, 20, 30, .55);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sg-overlay-schliessen:hover {
  background: rgba(20, 20, 30, .8);
}

/* Der iframe ist bewusst UNSICHTBAR: durchsichtig, ohne Rahmen, Radius oder
   Schatten. Sichtbar ist nur der Gestalter-Kasten darin (.sg-modal, siehe
   assets/designer/designer.css) auf dem abgedunkelten Overlay. Hätte der
   iframe eine eigene weiße Fläche, stünde ein zweiter Kasten um den
   Gestalter. Die Breite gibt der Gestalter selbst vor (1300 px am Desktop),
   deshalb hier volle Breite. */
.sg-overlay-frame {
  border: 0;
  flex: none;
  width: 100%;
  /* Startwert, bis der Gestalter seine tatsächliche Höhe meldet
     (postMessage 'sg-gestalter-hoehe'). Danach ist der iframe exakt so hoch
     wie sein Inhalt und braucht keine eigene Bildlaufleiste mehr. */
  height: 95vh;
  display: block;
  background: transparent;
  color-scheme: normal;
}

@media (max-width:768px) {
  .sg-overlay {
    padding: 0;
  }

  .sg-overlay-frame {
    width: 100%;
  }
}

/* ---------- Cookie-Consent (assets/js/cookie-consent.js) ---------- */

/* Fingerabdruck-Knopf unten links, über den sich die Datenschutz-
   Einstellungen jederzeit wieder öffnen lassen. Bewusst LINKS: Rechts unten
   sitzt in mehreren Themes das Chat-Fenster (siehe assets/css/chat.css).
   Der z-index bleibt unter dem des Banners (200), damit der Knopf nie über
   einem geöffneten Dialog liegt. */
.cookie-abzeichen {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 190;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--papier-rand, rgba(0, 0, 0, .12));
  border-radius: 50%;
  background: #fff;
  color: #1f2328;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(2, 6, 23, .16);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}

/* Ohne diese Zeile bliebe der Knopf sichtbar, sobald er per hidden-Attribut
   ausgeblendet wird: display:flex oben sticht die Voreinstellung von
   [hidden] aus. */
.cookie-abzeichen[hidden] {
  display: none;
}

.cookie-abzeichen svg {
  width: 24px;
  height: 24px;
}

.cookie-abzeichen:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(2, 6, 23, .22);
}

.cookie-abzeichen:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .cookie-abzeichen {
    width: 40px;
    height: 40px;
    left: 12px;
    bottom: 12px;
  }

  .cookie-abzeichen svg {
    width: 21px;
    height: 21px;
  }
}

.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  max-width: 920px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(2, 6, 23, .22);
  padding: 20px 22px;
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.cookie-banner-text {
  flex: 1;
  min-width: 240px;
}

.cookie-banner-text strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1rem;
}

.cookie-banner-text p {
  margin: 0;
  font-size: .86rem;
  color: var(--tinte-70);
}

.cookie-banner-text a {
  color: var(--rot);
}

.cookie-banner-aktionen {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: none;
}

.cookie-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(20, 20, 30, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cookie-dialog {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(2, 6, 23, .35);
  width: min(480px, 100%);
  padding: 26px;
  max-height: 90vh;
  overflow-y: auto;
}

.cookie-dialog h3 {
  margin: 0 0 14px;
}

.cookie-kategorie {
  padding: 14px 0;
  border-top: 1px solid var(--papier-rand);
}

.cookie-kategorie:first-of-type {
  border-top: none;
}

.cookie-kategorie-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: .92rem;
}

.cookie-kategorie p {
  margin: 6px 0 0;
  font-size: .84rem;
  color: var(--tinte-70);
}

.cookie-kategorie details {
  margin-top: 8px;
}

.cookie-kategorie summary {
  font-size: .8rem;
  color: var(--rot);
  cursor: pointer;
  user-select: none;
}

.cookie-details-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: .78rem;
}

.cookie-details-tabelle th,
.cookie-details-tabelle td {
  text-align: left;
  padding: 4px 6px 4px 0;
  border-bottom: 1px solid var(--papier-rand);
  color: var(--tinte-70);
  vertical-align: top;
}

.cookie-details-tabelle th {
  color: var(--tinte);
  font-weight: 700;
}

.cookie-dialog-aktionen {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--papier-rand);
}

body.cookie-dialog-offen {
  overflow: hidden;
}

/* Toggle-Switch (auch außerhalb des Gestalters nutzbar, z. B. im
   Cookie-Dialog oben) */
.sg-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex: none;
}

.sg-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.sg-slider {
  position: absolute;
  inset: 0;
  background: var(--papier-rand);
  border-radius: 22px;
  cursor: pointer;
  transition: background .15s ease;
}

.sg-slider:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.sg-switch input:checked+.sg-slider {
  background: var(--rot);
}

.sg-switch input:checked+.sg-slider:before {
  transform: translateX(16px);
}

.sg-switch input:disabled+.sg-slider {
  opacity: .6;
  cursor: not-allowed;
}

@media (max-width:600px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-banner-aktionen {
    justify-content: stretch;
  }

  .cookie-banner-aktionen .btn {
    flex: 1;
  }
}

/* Kompakte Karten-Ansicht für Lager */
.lager-karte {
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  cursor: pointer;
}

.lager-karte:hover {
  border-color: var(--rot);
}

.lager-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lager-val {
  font-weight: 700;
  color: var(--tinte);
}

.lager-label {
  font-size: 0.75rem;
  color: var(--tinte-45);
  text-transform: uppercase;
}

/* Inline-Editor für Klick-Bearbeitung */
.edit-mode {
  background: #fff !important;
  border: 1px solid var(--rot) !important;
  padding: 4px !important;
}

/* ---------- Admin: generisches Modal/Popup (assets/js/admin_modal.js) ----------
   Wiederverwendbar für beliebige Bearbeiten-Popups im Backend, z. B. die
   Adress-Bearbeitung in admin/bestellung_bearbeiten.php. */
.adm-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 20, 30, .5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.adm-modal-overlay.offen {
  display: flex;
}

.adm-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(2, 6, 23, .35);
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
}

.adm-modal-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.adm-modal-kopf h3 {
  margin: 0;
}

.adm-modal-schliessen {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--tinte-45);
  padding: 2px 8px;
}

.adm-modal-schliessen:hover {
  color: var(--tinte);
}

body.adm-modal-offen {
  overflow: hidden;
}

/* ---------- Admin: Bestellung bearbeiten (admin/bestellung_bearbeiten.php) ---------- */
.bestellung-topkarte {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}

.bestellung-topkarte>div {
  flex: 1;
  min-width: 260px;
}

.bestellung-topkarte h4 {
  margin: 0 0 .7em;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinte-45);
}

.adresse-karte-kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 1em;
}

.adresse-karte-kopf h3 {
  margin: 0;
}

.adresse-text {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--tinte-70);
}

.adresse-text strong {
  color: var(--tinte);
  display: block;
  margin-bottom: 2px;
}

.adresse-text .text-klein {
  margin-top: .7em;
}

.positionen-kopf {
  display: grid;
  grid-template-columns: 1fr 110px 90px 130px 32px;
  gap: 14px;
  padding: 0 14px 10px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tinte-45);
  border-bottom: 2px solid var(--papier-rand);
}

.positionen-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.position-zeile {
  display: grid;
  grid-template-columns: 1fr 110px 90px 130px 32px;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--papier-rand);
  border-radius: 8px;
  background: #fff;
}

.position-zeile .position-name {
  font-weight: 700;
}

.position-zeile .position-details {
  font-size: .8rem;
  color: var(--tinte-70);
  margin-top: 3px;
  font-weight: 400;
}

.position-zeile input[type=text],
.position-zeile input[type=number] {
  padding: .5em .6em;
  font-size: .86rem;
}

.position-zeile .position-summe {
  font-weight: 800;
  text-align: right;
}

.position-zeile .position-entfernen {
  background: none;
  border: none;
  color: var(--rot);
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  justify-self: center;
}

.position-konfiguration {
  margin-top: 10px;
  padding: 10px;
  background: var(--papier);
  border-radius: 6px;
  font-size: .8rem;
}

/* ---------- Checkout (public/checkout.php): nummerierte Abschnitte ---------- */
.checkout-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1em;
}

.checkout-kopf h3 {
  margin: 0;
}

.checkout-nr {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--rot);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8rem;
}

/* Versand-/Zahlungsart als Kachel mit Bild statt Dropdown – je Shop
   umschaltbar (siehe admin/einstellungen.php, "checkout_radio_darstellung").
   Der native Radio-Button bleibt sichtbar (keine Custom-Radio-Optik): Ein
   nachgebauter Radio-Knopf bringt eigene Tastatur-/Screenreader-Fallstricke
   mit, die hier niemand extra lösen muss. */
.checkout-kacheln {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.checkout-kachel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1.5px solid var(--papier-rand);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}

.checkout-kachel:hover {
  border-color: var(--rot);
}

/* :has() ist reine Optik (Auswahl-Hervorhebung) – ohne Unterstützung bleibt
   die Kachel unverändert bedienbar, nur ohne den farbigen Rahmen. */
.checkout-kachel:has(input:checked) {
  border-color: var(--rot);
  background: var(--rot-tint);
}

.checkout-kachel input[type="radio"] {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--rot);
}

.checkout-kachel-bild {
  flex: none;
  width: 100px;
  height: 50px;
  object-fit: contain;
  border-radius: 4px;
  background: #fff;
  border: 1px solid var(--papier-rand);
  padding: 3px;
}

.checkout-kachel-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.checkout-kachel-text strong {
  font-size: .95rem;
}

.checkout-kachel-beschreibung {
  font-size: .8rem;
  color: var(--tinte-70);
}

.checkout-kachel-preis {
  flex: none;
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .checkout-kachel-preis {
    margin-left: auto;
  }
}

@media (max-width:900px) {
  .positionen-kopf {
    display: none;
  }

  .position-zeile {
    grid-template-columns: 1fr;
  }

  .position-zeile .position-summe {
    text-align: left;
  }
}
/* ---------- Merken-Herz auf Produktkacheln (assets/js/shop.js) ----------
   Sitzt in der oberen rechten Ecke der Kachel. Die Kacheln aller Themes
   tragen bereits ein positioniertes Abzeichen ("Neu", "Angebot"), sind also
   Positionierungs-Kontext – deshalb genügt hier position:absolute ohne
   Eingriff in die Kachel selbst.

   Die Ecke oben LINKS bleibt frei: dort sitzt in mehreren Themes das
   Abzeichen. */
.merk-herz {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #1f2328;
  box-shadow: 0 2px 8px rgba(2, 6, 23, .14);
  cursor: pointer;
  transition: transform .12s ease, color .12s ease, background .12s ease;
}

.merk-herz svg {
  width: 19px;
  height: 19px;
  pointer-events: none; /* Klicks immer am <span> auffangen, nie am Pfad */
}

.merk-herz:hover {
  transform: scale(1.08);
  background: #fff;
}

.merk-herz.ist-vorgemerkt {
  color: #c8102e;
}

.merk-herz:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* ---------- Die zwei Wege zum fertigen Stempel ----------
   Online gestalten und eigene Druckvorlage hochladen sind gleichwertig und
   stehen deshalb als zwei gleich grosse Knoepfe nebeneinander, getrennt
   durch ein "oder". Vorher war der Gestalter ein grosser Knopf und der
   Upload ein kleines Formular darunter - der Upload sah dadurch aus wie ein
   Nachgedanke, obwohl viele Kunden ihre Vorlage laengst fertig haben.

   Unter jedem Knopf steht ein aufklappbarer Hinweis, damit die Wahl ohne
   Seitenwechsel getroffen werden kann.

   Bewusst themeneutral: Geregelt wird hier nur die Anordnung. Die Knoepfe
   selbst behalten die Klassen ihres Themes, damit jeder Shop weiter seine
   eigenen Farben und Formen zeigt. */
.kaufwege {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 4px;
}

.kaufweg {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kaufweg > a,
.kaufweg > button {
  width: 100%;
  /* Enger als sonst: In der halben Spaltenbreite braeuchte "Eigene Vorlage
     hochladen" sonst zwei Zeilen. Die Themes geben ihren grossen Knoepfen
     rund 28px Innenabstand, was hier nicht mehr hineinpasst. */
  padding-left: 14px;
  padding-right: 14px;
  text-align: center;
}

/* Steht nur EIN Weg zur Verfuegung, soll der Knopf die volle Breite
   einnehmen und nicht auf halber Strecke enden. */
.kaufwege.einzel {
  display: block;
}

.kaufwege-oder {
  margin-top: 16px;
  font-size: .85rem;
  opacity: .6;
  white-space: nowrap;
}

.kaufweg-hinweis > summary {
  cursor: pointer;
  font-size: .82rem;
  opacity: .75;
  list-style: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kaufweg-hinweis > summary::-webkit-details-marker {
  display: none;
}

.kaufweg-hinweis > summary::before {
  content: "+ ";
  font-weight: 700;
  text-decoration: none;
}

.kaufweg-hinweis[open] > summary::before {
  content: "– ";
}

.kaufweg-hinweis p {
  margin: 6px 0 0;
  font-size: .82rem;
  line-height: 1.5;
  opacity: .85;
}

/* Auf schmalen Bildschirmen untereinander, das "oder" mittig dazwischen.
   Ohne diese Regel teilt sich der erste Knopf die Zeile mit dem "oder" und
   wird dadurch schmaler als der zweite - zwei gleichwertige Wege saehen dann
   ungleich aus. */
@media (max-width: 560px) {
  .kaufwege {
    flex-direction: column;
    align-items: stretch;
  }

  .kaufwege-oder {
    margin: 0;
    align-self: center;
  }
}


/* ---------- Ausführlicher Kategorietext (siehe includes/kategorie_infotext.php)
   Steht unter der Artikelliste. Bewusst zurückhaltend gesetzt: Er ist
   Nachschlagewerk, nicht Blickfang - wer hier ankommt, hat die Ware schon
   gesehen. Schmale Zeilenlaenge, weil laufender Text ueber die volle
   Seitenbreite schwer zu lesen ist. */
.kat-infotext {
  margin: 48px 0 8px;
}

/* Die Trennlinie sitzt am inneren Container, nicht am Abschnitt: So laeuft
   sie genau so weit wie Ueberschrift und Kacheln darueber und nicht bis zum
   Bildschirmrand. */
.kat-infotext > div {
  padding-top: 28px;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.kat-infotext-inhalt {
  font-size: .95rem;
  line-height: 1.65;
}

/* Auf breiten Bildschirmen zweispaltig statt einer 130 Zeichen langen Zeile:
   Die volle Breite wird genutzt, ohne dass das Auge beim Zeilenwechsel den
   Anschluss verliert. Ueberschriften und Aufzaehlungen bleiben dabei
   zusammen (break-inside), sonst risse eine Zwischenueberschrift am
   Spaltenende von ihrem Absatz ab. */
@media (min-width: 900px) {
  .kat-infotext-inhalt {
    columns: 2;
    column-gap: 48px;
  }

  .kat-infotext-inhalt > * {
    break-inside: avoid;
  }

  .kat-infotext-inhalt h3,
  .kat-infotext-inhalt h4,
  .kat-infotext-inhalt h5 {
    break-after: avoid;
  }
}

/* Kurztext unter der Ueberschrift - ueber die volle Breite des Inhalts, also
   buendig mit den Kacheln darunter.

   Die Klasse steht DOPPELT, und zwar mit Absicht: Mehrere Themes setzen
   ihren Einleitungsabsaetzen eine Lesebreite (etwa ".td-seitenkopf p {
   max-width: 70ch }"). Diese Regel ist gleich stark wie ein einfaches
   ".kat-kurztext", und da die Theme-Datei spaeter geladen wird, gewaenne
   sie. Die Wiederholung des Klassennamens hebt die Gewichtung gerade so
   weit an, dass die volle Breite gilt - ohne !important, das jede spaetere
   Anpassung im Theme blockieren wuerde. */
.kat-kurztext.kat-kurztext {
  max-width: none;
  margin: 10px 0 0;
  line-height: 1.55;
}

.kat-infotext-inhalt h3,
.kat-infotext-inhalt h4,
.kat-infotext-inhalt h5 {
  margin: 1.6em 0 .4em;
  font-size: 1.05rem;
  font-weight: 600;
}

.kat-infotext-inhalt h3:first-child,
.kat-infotext-inhalt h4:first-child,
.kat-infotext-inhalt h5:first-child {
  margin-top: 0;
}

.kat-infotext-inhalt p {
  margin: 0 0 .9em;
}

.kat-infotext-inhalt ul,
.kat-infotext-inhalt ol {
  margin: 0 0 .9em;
  padding-left: 1.3em;
}

.kat-infotext-inhalt li {
  margin-bottom: .3em;
}

.kat-infotext-inhalt a {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ---------- Haeufige Fragen am Ende der Kategorieseite
   (siehe includes/kategorie_faq.php). Das Akkordeon ist natives
   <details>/<summary> - kein Skript, mit der Tastatur bedienbar, Inhalt
   vollstaendig im HTML. */
.kat-faq {
  margin: 40px 0 8px;
}

.kat-faq > div {
  padding-top: 28px;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.kat-faq-titel {
  margin: 0 0 16px;
  font-size: 1.15rem;
  font-weight: 600;
}

.kat-faq-liste {
  max-width: 80ch;
}

.kat-faq-eintrag {
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.kat-faq-eintrag > summary {
  cursor: pointer;
  padding: 13px 34px 13px 0;
  position: relative;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.4;
  list-style: none;
}

/* Das Standarddreieck der Browser weg, dafuer ein eigenes Zeichen rechts -
   dort wird es erwartet und es springt beim Aufklappen nicht. */
.kat-faq-eintrag > summary::-webkit-details-marker { display: none; }

.kat-faq-eintrag > summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  opacity: .55;
}

.kat-faq-eintrag[open] > summary::after { content: "–"; }

.kat-faq-eintrag > summary:hover { opacity: .75; }

.kat-faq-eintrag > summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.kat-faq-antwort {
  padding: 0 34px 16px 0;
  font-size: .93rem;
  line-height: 1.65;
}

.kat-faq-antwort p { margin: 0 0 .8em; }
.kat-faq-antwort p:last-child { margin-bottom: 0; }
.kat-faq-antwort ul,
.kat-faq-antwort ol { margin: 0 0 .8em; padding-left: 1.3em; }
.kat-faq-antwort a { text-decoration: underline; text-underline-offset: 2px; }