/* Holzkunst Dost – Theme
   Moderne, ruhige Umsetzung ("Warm Editorial") auf Basis der bestehenden
   Farben (Tannengrün/Gold) und Hintergrundbilder – nur die Gestaltung
   (Typografie, Abstände, Karten, Schatten) wurde überarbeitet. */

:root {
  --color-bg: #0e3320;
  --color-bg-dark: #0a2417;
  --color-bg-darker: #071a10;
  --color-accent: #c9a227;
  --color-accent-light: #e0bc48;
  --color-text: #ffffff;
  --color-text-muted: #cfe0d5;
  --font-heading: 'Quicksand', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Quicksand', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --radius: 10px;
  --radius-lg: 20px;
  --border-subtle: rgba(255, 255, 255, 0.12);
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  --shadow-soft: 0 20px 44px -20px rgba(0, 0, 0, 0.45);
  --shadow-strong: 0 30px 60px -18px rgba(0, 0, 0, 0.55);
  --max-width: 1180px;

  
  --fs-heading: 2.75rem;
  --fs-sub: 1.5rem;
  --fs-text: 1rem;
  --fs-subtext: 0.875rem;
  --fs-nav: 1rem;
  
  --btn-font-size: 0.8125rem;
  --fs-shop-title: 1.0625rem;
  --fs-shop-price: 1.5rem;
  --fs-shop-text: 1rem;
  --fs-shop-meta: 0.875rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg) url('/assets/images/background.jpg') repeat top center;
  color: var(--color-text);
  line-height: 1.65;
  /* rem statt px, damit die Textgrößen-Steuerung (siehe main.js) über
     die Skalierung von html{font-size} auch den Fließtext mit skaliert */
  font-size: var(--fs-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
}

h1 { font-weight: 800; font-size: var(--fs-heading); }
h2 { color: var(--color-accent-light); font-weight: 700; font-size: var(--fs-sub); letter-spacing: -0.005em; }
h3 { font-size: 1.05rem; }

@media (max-width: 640px) {
  h1 { font-size: calc(var(--fs-heading) * 0.727); }
  h2 { font-size: calc(var(--fs-sub) * 0.867); }
}

p { margin: 0 0 1em; }

a { color: var(--color-accent-light); text-decoration: none; }
a:hover { color: var(--color-accent); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.site-header {
  background: var(--color-bg-dark) url('/assets/images/background_light.jpg') repeat top center;
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid rgba(201, 162, 39, 0.22);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-branding {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--color-text);
  min-width: 0;
}
.site-branding:hover { color: var(--color-text); }

.site-branding__logo {
  flex: 0 0 auto;
  height: 60px;
  width: 60px;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.site-branding__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
}

.site-branding__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-branding__claim {
  font-size: 1rem;
  line-height: 1.15;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Auf schmalen Handys ist neben Logo + Menü-Button nicht viel Platz –
   Titel/Untertitel etwas verkleinern, damit beides sicher einzeilig bleibt. */
@media (max-width: 400px) {
  .site-branding__logo { height: 48px; width: 48px; }
  .site-branding__title { font-size: 1.2rem; }
  .site-branding__claim { font-size: 0.8rem; }
}

/* Ab Tablet/Desktop: größeres Logo mit 10px Luft oben/unten im Header und 10px
   Abstand über dem Header (Header-Höhe bleibt gleich: 80 + 2×10). Auf Handys bleibt
   es beim kleinen Logo, sonst würde der Titel abgeschnitten. */
@media (min-width: 641px) {
  .site-header { padding: 10px 0; margin-top: 10px; }
  .site-branding__logo { height: 80px; width: 80px; }
}

/* Navigation */
.site-header__nav {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.main-nav__toggle {
  display: none;
  background: transparent;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
  color: var(--color-text);
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
  cursor: pointer;
  flex-shrink: 0;
}

.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  color: var(--color-text);
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.cart-link:hover { color: var(--color-accent-light); }

.cart-link__badge {
  position: absolute;
  top: -2px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #241a00;
  /* Fester px-Wert statt rem – gleicher Grund wie beim Textgrößen-Bedienelement
     oben: soll bei aktivierter Textvergrößerung nicht aus dem runden Badge
     herauswachsen. */
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.main-nav__list {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.main-nav__list a {
  position: relative;
  display: inline-block;
  padding: 8px 16px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-nav);
  transition: color 0.2s ease;
}

.main-nav__list a::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 2px;
  height: 2px;
  background: var(--color-accent-light);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.main-nav__list a:hover,
.main-nav__list a[aria-current="page"] {
  color: var(--color-accent-light);
}

.main-nav__list a:hover::after,
.main-nav__list a[aria-current="page"]::after {
  transform: scaleX(1);
}

@media (max-width: 780px) {
  .main-nav__toggle { display: inline-flex; align-items: center; justify-content: center; }

  .main-nav__list {
    display: none;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--color-bg-dark);
    padding: 6px 0;
    gap: 0;
    box-shadow: var(--shadow);
  }

  .main-nav__list.is-open { display: flex; }

  .main-nav__list li {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .main-nav__list li:first-child {
    border-top: none;
  }

  .main-nav__list a {
    display: block;
    padding: 15px 24px;
    font-weight: 500;
    border-left: 3px solid transparent;
  }

  .main-nav__list a::after { display: none; }

  .main-nav__list a:hover,
  .main-nav__list a[aria-current="page"] {
    background: rgba(201, 162, 39, 0.14);
    color: var(--color-accent-light);
    font-weight: 700;
    border-left-color: var(--color-accent);
  }
}

/* Buttons
   Wichtig: .btn wird sowohl auf <a> (Link-Button) als auch auf <button
   type="submit"> (z. B. Kontaktformular) verwendet. <a> erbt Schriftart/-größe
   automatisch von der Seite, ein <button> aber NICHT (Browser-Standard nutzt
   dort die System-Schrift in einer anderen Größe) – dadurch sahen z. B.
   "Download" (Link) und "Nachricht senden" (Button) trotz gleicher Klasse
   unterschiedlich aus. Deshalb hier Schriftart/-größe fest auf .btn selbst
   setzen, damit jeder Button unabhängig vom HTML-Element exakt gleich aussieht. */
.btn {
  display: inline-block;
  /* Größe zentral über --btn-font-size steuerbar (siehe /admin/typografie.php,
     Feld "Button-Größe") – Innenabstand skaliert proportional mit, damit sich
     der ganze Button stimmig vergrößert/verkleinert, nicht nur die Schrift.
     Die Verhältniszahlen (0.47 / 1.1) sind Runde 8 bewusst so gewählt, dass
     ein Button beim Standardwert von --btn-font-size (0.8rem) exakt so
     kompakt wird wie das zuvor auf der Shop-Karte geprüfte "Hinzufügen". */
  padding: calc(var(--btn-font-size) * 0.47) calc(var(--btn-font-size) * 1.1);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
  color: #241a00;
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  line-height: 1.2;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  /* Schatten proportional zur jetzt kompakteren Standardgröße verkleinert
     (vorher 12px/26px – bei einem kleineren Button wirkte das zu wuchtig). */
  box-shadow: 0 6px 14px -6px rgba(201, 162, 39, 0.5);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.btn:hover {
  color: #241a00;
  transform: translateY(-2px);
  box-shadow: 0 9px 18px -6px rgba(201, 162, 39, 0.6);
}

/* Hero / content sections
   Wichtig: NICHT die padding-Kurzschreibweise verwenden (z. B. "72px 0 48px") –
   die würde das horizontale Padding von .container (auf demselben Element)
   mit 0 überschreiben und den Inhalt links/rechts bündig an den Rand
   kleben lassen. Deshalb hier nur padding-top/-bottom setzen. */
.hero {
  padding-top: 72px;
  padding-bottom: 48px;
}

.hero__text {
  max-width: 640px;
  margin: 0 auto;
}

.hero__text p {
  color: var(--color-text-muted);
  font-size: 1.06rem;
  line-height: 1.75;
}

.section {
  /* Gleicher Grund wie bei .hero: kein padding-Shorthand hier. */
  padding-top: 44px;
  padding-bottom: 44px;
}

.info-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 34px 38px;
  box-shadow: var(--shadow-soft);
}

.info-box h2 { margin-bottom: 0.5em; }
.info-box p { color: var(--color-text-muted); }

/* Footer */
.site-footer {
  background: var(--color-bg-darker) url('/assets/images/background.jpg') repeat top center;
  padding: 30px 0;
  margin-top: 70px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  align-items: center;
}

.site-footer a { color: var(--color-text-muted); }
.site-footer a:hover { color: var(--color-accent-light); }

/* Hero-Bild (freigestelltes Produktfoto) */
.hero__image {
  display: block;
  max-width: 400px;
  width: 100%;
  margin: 42px auto 0;
  border-radius: var(--radius-lg);
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.45));
}

/* Zurück-nach-oben-Button.
   Erscheint erst nach etwas Scroll (Klasse .is-visible, siehe main.js) und
   weicht der Fußzeile aus: main.js misst per IntersectionObserver, wie weit
   die Fußzeile schon im Bild ist, und schiebt den Button per --dock-offset
   entsprechend nach oben, damit er nie "Impressum · Datenschutz" verdeckt. */
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: calc(20px + var(--dock-offset, 0px));
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  text-decoration: none;
  z-index: 40;
  transition: transform 0.15s ease, opacity 0.2s ease, bottom 0.15s ease;
}
.back-to-top.is-visible { opacity: 0.92; visibility: visible; }
.back-to-top:hover { opacity: 1; transform: translateY(-2px); }
.back-to-top img { width: 18px; height: 18px; }

/* Kontaktseite */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 40px;
}
@media (max-width: 780px) {
  .contact-grid { grid-template-columns: 1fr; }
}
.contact-grid iframe {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: var(--radius-lg);
  margin-top: 20px;
  box-shadow: var(--shadow-soft);
}
.contact-form label {
  display: block;
  font-weight: 600;
  margin: 14px 0 6px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
/* Größe/Optik kommen jetzt aus dem einheitlichen, seitenweiten Feld-System
   weiter oben – hier nur noch das Kontaktformular-spezifische Layout
   (volle Breite, Mindesthöhe der Nachricht, versteckter Honeypot). */
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.contact-form textarea { min-height: 120px; }
.contact-form .honeypot { position: absolute; left: -9999px; }

/* Impressum/Datenschutz: lange Textseiten etwas schmaler und lesbarer */
.legal-page { max-width: 820px; }
.legal-page h2 { margin-top: 1.8em; }
.legal-page h3 { color: var(--color-text); font-size: 1.05rem; margin: 1.4em 0 0.4em; }

/* Utility */
.text-center { text-align: center; }
.mt-lg { margin-top: 2.5rem; }
/* Für den Editor: Textbaustein auf die "Sub-Text"-Größe aus dem Textgrößen-
   System setzen (z. B. für Bildunterschriften, Hinweise, Fußnoten im Text). */
.text-sub { font-size: var(--fs-subtext); }

/* Webshop (Katalog, Warenkorb, Kasse) ---------------------------------- */

.shop-intro { max-width: 640px; margin-bottom: 30px; }
.shop-intro p { color: var(--color-text-muted); }

.shop-breadcrumb {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.shop-breadcrumb a { color: var(--color-text-muted); text-decoration: underline; }
.shop-breadcrumb a:hover { color: var(--color-accent-light); }

.shop-search-count { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 6px; }

input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
  box-sizing: border-box;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #ffffff;
  color: #1c2129;
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1.3;
  color-scheme: light;
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23555f56'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23555f56' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 11px;
  cursor: pointer;
}
input[type="text"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.28);
}

.shop-search-form {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin-bottom: 26px;
}
.shop-search-form input[type="search"] { flex: 1; min-width: 0; }

/* Shop-Auflistung: Filter-Seitenleiste + Artikel-Grid nebeneinander
   (siehe shop-listing.php / shop-sidebar.php). */
.shop-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  margin-top: 16px;
}

.shop-sidebar {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: sticky;
  top: 20px;
}
.shop-sidebar__group { margin-bottom: 18px; }
.shop-sidebar__group:last-of-type { margin-bottom: 16px; }
.shop-sidebar__search { width: 100%; }
.shop-sidebar__heading {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  color: var(--color-text);
  margin: 0 0 10px;
}
/* Klappbare Abschnitts-Überschrift (Kategorie + jede Attribut-Gruppe),
   siehe shop-sidebar.php / shop-listing.js data-sidebar-toggle. */
.shop-sidebar__heading--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0 0 10px;
  cursor: pointer;
  font-family: var(--font-heading);
}
.shop-sidebar__chevron {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  margin-left: 8px;
}
/* [hidden] ist eine UA-Stylesheet-Regel und wird von einer eigenen
   display:flex-Regel gleicher Spezifität sonst überschrieben – deshalb hier
   explizit mit höherer Spezifität erzwungen (siehe data-sidebar-toggle in
   shop-listing.js). */
.shop-sidebar__section { display: flex; flex-direction: column; }
.shop-sidebar__section[hidden] { display: none; }
.shop-sidebar__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding: 3px 0;
  cursor: pointer;
}
.shop-sidebar__checkbox input { flex-shrink: 0; }
.shop-sidebar__checkbox--child { padding-left: 26px; font-size: 0.86rem; }

.shop-sidebar__cat-count { color: var(--color-text-faint, var(--color-text-muted)); font-size: 0.82em; }

/* Kategorie-Baum: Elternkategorie (Anhaken klappt automatisch die
   eingerückten Unterkategorien auf, siehe shop-listing.js data-cat-*). */
.shop-sidebar__cat-children { display: flex; flex-direction: column; }
.shop-sidebar__cat-children[hidden] { display: none; }
.shop-sidebar__show-all {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-accent);
  font-size: 0.85rem;
  text-decoration: underline;
  padding: 4px 0 0;
  text-align: left;
}
.shop-sidebar__show-all:hover { color: var(--color-accent-light); }

.shop-sidebar__reset {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: underline;
}
.shop-sidebar__reset:hover { color: var(--color-accent-light); }

.shop-listing { min-width: 0; }

@media (max-width: 860px) {
  .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar { position: static; }
}

/* Informationsbereich: Seitenleiste + Inhalt nebeneinander, strukturell
   identisch zu .shop-layout/.shop-sidebar oben (siehe
   templates/info-sidebar.php), nur als einfache Link-Liste statt Filter. */
.info-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  margin-top: 16px;
}

.info-sidebar {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: sticky;
  top: 20px;
}
.info-sidebar__heading {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  color: var(--color-text);
  margin: 0 0 10px;
}
.info-sidebar__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.info-sidebar__link {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-decoration: none;
}
.info-sidebar__link:hover { background: rgba(255, 255, 255, 0.06); color: var(--color-text); }
.info-sidebar__link.is-active {
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 600;
}
.info-sidebar__link.is-active:hover { background: var(--color-accent-light); color: var(--color-bg); }

.info-content { min-width: 0; }
/* content_html bringt sein eigenes ".container.section" (bzw. zusätzlich
   ".legal-page") als äußersten Wrapper mit (siehe sql/seed-content.sql,
   sql/2026-09-14-seiten-information-bereich.sql) – hier innerhalb der
   Inhaltsspalte neutralisiert, damit Innenabstand/Breite nicht doppelt
   greifen (die äußere .container.section kommt schon von .info-layout /
   public/index.php). .legal-page bleibt bewusst aktiv (schmalere Lesebreite). */
.info-content > .container { max-width: none; margin: 0; padding: 0; }
.info-content > .section { padding-top: 0; padding-bottom: 0; }

@media (max-width: 860px) {
  .info-layout { grid-template-columns: 1fr; }
  .info-sidebar { position: static; }
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
  margin-top: 10px;
}

.shop-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.shop-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-strong);
}

/* Bild-Bereich der Karte: eigenständig klickbar, öffnet nur ein
   vergrößertes Bild (siehe shop-lightbox-modal.php / shop-listing.js) – kein
   Link mehr auf eine Produktseite (die eigenständige Artikelseite wurde in
   Runde 10 entfernt, Menge/Variante/Warenkorb liegen direkt auf der Karte). */
.shop-card__image-wrap {
  position: relative;
  cursor: zoom-in;
}
.shop-card__image-wrap:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.shop-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  /* "contain" statt "cover": schneidet keine Produktbilder mehr an, die
     nicht quadratisch sind (z. B. der sternförmige Anhänger) – der Hintergrund
     füllt den Rand stattdessen mit der dunklen Kartenfarbe auf. Etwas
     Innenabstand (Runde 10), damit das Motiv nicht bis an den Kartenrand
     reicht (fiel bei hochformatigen Fotos wie den Schwibbögen auf, wo die
     Kerzenspitze sonst genau am oberen Rand anstieß). */
  object-fit: contain;
  background: var(--color-bg-dark);
  display: block;
  padding: 10px;
  box-sizing: border-box;
}

.shop-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-card__image-wrap--gallery {
  position: relative;
}

.shop-card__gallery {
  display: flex;
  align-items: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.shop-card__gallery::-webkit-scrollbar {
  display: none;
}

.shop-card__gallery-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  cursor: zoom-in;
}
.shop-card__gallery-slide:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.shop-card__gallery-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.shop-card__gallery-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.shop-card__gallery-dot.is-active {
  background: var(--color-accent);
  transform: scale(1.25);
}

/* Pfeil-Buttons für die Bildergalerie (Runde 10): ohne Touch-Wischgeste
   (z. B. Maus am PC) ließ sich die Galerie bisher gar nicht weiterschalten –
   nur der Lupen-Klick zum Vergrößern war erreichbar. Per Default dezent
   sichtbar, damit die Bedienung nicht erst durch Zufall entdeckt wird. */
.shop-card__gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(20, 30, 20, 0.55);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.shop-card__gallery-nav:hover { background: rgba(20, 30, 20, 0.8); }
.shop-card__gallery-nav:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.shop-card__gallery-nav--prev { left: 8px; }
.shop-card__gallery-nav--next { right: 8px; }

.shop-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px 20px;
  /* füllt die Restkarte (Karten einer Reihe sind gleich hoch), damit die Fußzeile unten sitzt */
  flex: 1;
}

/* Fußzeile: Verfügbarkeit, Preis, Variante/Menge/Warenkorb – immer am unteren Kartenrand,
   dadurch in jeder Kartenreihe auf einer Linie, egal wie lang Titel/Beschreibung sind. */
.shop-card__footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
}

.shop-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-shop-title);
  color: var(--color-text);
}

.shop-card__desc-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.shop-card__desc {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-shop-meta);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.shop-card__desc--expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.shop-card__info-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1;
  cursor: pointer;
}
.shop-card__info-btn:hover { color: var(--color-text); border-color: var(--color-accent); }

.shop-card__meta { color: var(--color-text-muted); font-size: var(--fs-shop-meta); }

.shop-card__availability {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-shop-meta);
  color: var(--color-text-muted);
}
.shop-card__avail-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.shop-card__avail-dot--ok { background: #7fd99a; }
.shop-card__avail-dot--limited { background: #f0b955; }
.shop-card__avail-dot--out { background: #e08a7a; }

.shop-card__price {
  color: var(--color-accent-light);
  font-weight: 700;
  font-size: var(--fs-shop-price);
  margin-top: 2px;
}

.shop-card__add-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.shop-card__add-form select { width: 100%; }
.shop-card__add-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shop-card__add-row input[type="number"] { width: 52px; flex-shrink: 0; }
/* Größe von Eingabefeld/Dropdown/Button kommt jetzt aus dem einheitlichen,
   seitenweiten Feld-/Button-System (siehe weiter oben) – hier nur noch das
   Karten-spezifische Layout (Button füllt die Zeile). */
.shop-card__add-row .btn { flex: 1; text-align: center; }

.shop-badge {
  display: inline-block;
  align-self: flex-start;
  margin-top: 2px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.shop-badge--sold-out {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-text-muted);
}

/* Warenkorb */
.shop-cart-table {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.shop-cart-row {
  display: grid;
  grid-template-columns: 64px 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}

.shop-cart-row__image img,
.shop-cart-row__image .shop-card__image--placeholder {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.shop-cart-row__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shop-cart-row__name { color: var(--color-text); font-weight: 600; font-size: var(--fs-shop-title); }
.shop-cart-row__variant { color: var(--color-text-muted); font-size: var(--fs-shop-meta); }
.shop-cart-row__unit-price { color: var(--color-text-muted); font-size: var(--fs-shop-meta); }

.shop-cart-row__qty { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shop-cart-row__qty input[type="number"] { width: 64px; }
/* Variantenauswahl (z. B. "Anschluss") direkt im Menge-Formular, seit
   Runde 13 auch im Warenkorb/in der Bestellübersicht änderbar, nicht nur
   beim ersten Hinzufügen. */
.shop-cart-row__option { width: auto; min-width: 150px; }

/* Schritt 4 "Bestellung abschließen": reine Lese-Ansicht der Artikel, ohne
   Bedienelemente (Bearbeiten bleibt Schritt 3 vorbehalten) – schlankeres
   Spaltenraster als die normale Warenkorb-/Bestellübersicht-Zeile. */
.shop-cart-row--recap { grid-template-columns: 56px 1fr auto; }
.shop-checkout-recap-heading { margin-top: 1.6em; margin-bottom: 0; font-size: 1rem; }
.shop-cart-table--recap { margin-top: 12px; }

.shop-cart-row__total { font-weight: 700; color: var(--color-accent-light); white-space: nowrap; }

.shop-remove-link {
  background: none;
  border: none;
  color: var(--color-text-muted);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0;
}
.shop-remove-link:hover { color: #e08a7a; }

.shop-cart-summary {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  align-items: baseline;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  font-size: 1.15rem;
}

.shop-cart-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 24px;
}

@media (max-width: 640px) {
  .shop-cart-row {
    grid-template-columns: 56px 1fr;
    grid-template-areas: "img info" "qty qty" "total remove";
  }
  .shop-cart-row__image { grid-area: img; }
  .shop-cart-row__info { grid-area: info; }
  .shop-cart-row__qty { grid-area: qty; }
  .shop-cart-row__total { grid-area: total; }
  .shop-cart-row__remove { grid-area: remove; justify-self: end; }
  /* Zusammenfassung (Kasse Schritt 4): keine Menge/Entfernen – Preis bleibt
     rechts in der Zeile, bündig mit den Beträgen der Summenbox. */
  .shop-cart-row--recap {
    grid-template-columns: 56px 1fr auto;
    grid-template-areas: "img info total";
  }
}

.shop-stepper-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}
.shop-stepper-nav__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--color-text-muted);
  cursor: default;
}
.shop-stepper-nav__item.is-done { cursor: pointer; }
.shop-stepper-nav__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}
.shop-stepper-nav__item.is-active { color: var(--color-text); font-weight: 700; }
.shop-stepper-nav__item.is-active .shop-stepper-nav__num,
.shop-stepper-nav__item.is-done .shop-stepper-nav__num {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.shop-stepper__step h2:first-child { margin-top: 0; }
.shop-stepper__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}
.shop-stepper__grid--address { grid-template-columns: 2fr 1fr; }
/* Kasse Schritt 1: Straße | Hausnummer | PLZ | Ort in EINER Zeile, Schritt insgesamt
   schmaler (die Felder sind nicht mehr über die volle Seitenbreite gezogen). */
.shop-stepper__step[data-step="1"] { max-width: 860px; }
.shop-stepper__grid--street-row { grid-template-columns: minmax(0, 3fr) minmax(0, 1.3fr) minmax(0, 1.1fr) minmax(0, 2fr); }
@media (max-width: 700px) {
  .shop-stepper__grid--street-row { grid-template-columns: 1fr 1fr; }
  .shop-stepper__grid--street-row > :first-child { grid-column: 1 / -1; }
  .shop-stepper__grid--street-row > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .shop-stepper__grid, .shop-stepper__grid--address { grid-template-columns: 1fr; }
  .shop-stepper__grid--street-row { grid-template-columns: 1fr 1fr; }
}
.shop-stepper__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}

.shop-checkout-recap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 20px;
}
.shop-checkout-recap__block { font-size: 0.92rem; line-height: 1.5; }
.shop-checkout-recap__block strong { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); margin-bottom: 4px; }

/* Kasse */
.shop-checkout-summary {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  margin: 20px 0 32px;
}
/* Kasse: Artikelzeilen, Angaben-Box und Summenbox mit gleichem seitlichem
   Innenabstand (22px), damit Preise/Beträge rechts auf einer Linie stehen. */
.shop-stepper .shop-cart-row { padding-left: 22px; padding-right: 22px; }
.shop-checkout-summary h2 { margin-top: 0; }
.shop-checkout-summary__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  color: var(--color-text-muted);
}
.shop-checkout-summary__row--total {
  border-top: 1px solid var(--border-subtle);
  margin-top: 8px;
  padding-top: 14px;
  color: var(--color-text);
  font-weight: 700;
  font-size: 1.1rem;
}

/* Bugfix Runde 13: hieß bisher ".shop-checkout-form", diese Klasse steht
   aber an KEINEM Element im Markup (der Stepper trägt ".shop-stepper
   contact-form") – die Regel griff dadurch nie, wodurch "Lieferadresse"/
   "Zahlungsart" in Schritt 1/2 ohne jeden Abstand zum Feld darüber standen
   (h1–h4 haben global nur einen UNTEREN Rand, siehe oben). */
.shop-stepper h2 { margin-top: 1.4em; }
.shop-stepper textarea { min-height: 90px; }

.shop-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  cursor: pointer;
  margin: 18px 0 4px;
}
.shop-checkbox-row input[type="checkbox"] { flex-shrink: 0; width: 17px; height: 17px; }

.shop-stepper__delivery-address { margin-top: 6px; }
.shop-stepper__delivery-address[hidden] { display: none; }

.shop-stepper__delivery-address h2:first-child { margin-top: 1.4em; }

.shop-method-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.shop-method-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.shop-method-option input[type="radio"] { flex-shrink: 0; }

.shop-method-option span:not(.shop-method-option__price) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.shop-method-option small { color: var(--color-text-muted); font-size: 0.8rem; }
.shop-method-option__price { font-weight: 700; color: var(--color-accent-light); white-space: nowrap; }

.shop-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Bild-Lightbox (siehe templates/shop-lightbox-modal.php +
   assets/js/shop-listing.js) – ersetzt die Runde-3-Schnellansicht mit
   Warenkorb-Formular; zeigt nur ein vergrößertes Bild. */
.shop-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.shop-lightbox--open { display: flex; }
body.shop-lightbox-open-body { overflow: hidden; }
.shop-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 26, 16, 0.82);
}
.shop-lightbox__content {
  position: relative;
  z-index: 1;
  max-width: min(90vw, 780px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.shop-lightbox__image {
  max-width: 100%;
  max-height: calc(100vh - 120px);
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  background: var(--color-bg-dark);
}
.shop-lightbox__caption { color: var(--color-text); font-size: 0.95rem; margin: 0; text-align: center; }
.shop-lightbox__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(7, 26, 16, 0.85);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.shop-lightbox__close:hover { background: var(--color-accent); }

@media (max-width: 640px) {
  .shop-lightbox { padding: 12px; }
  .shop-lightbox__close { top: 6px; right: 6px; }
}

/* Kundenkonto (templates/konto-*.php) */
.account-link--active { color: var(--color-accent-light); }
.konto-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px;
  margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle);
}
.konto-nav a[aria-current="page"] { color: var(--color-accent-light); font-weight: 700; text-decoration: none; }
.konto-nav__logout { margin: 0 0 0 auto; }
.konto-linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--color-accent-light); font: inherit; text-decoration: underline;
}
.konto-form { max-width: 560px; }
.konto-form + .konto-form { margin-top: 28px; }
.konto-form--danger { border: 1px solid #c94227; }
.konto-links, .konto-alt { margin-top: 14px; }
.konto-flash { margin-bottom: 20px; }
.konto-flash--error { border-color: #c94227; }
.konto-flash--ok { border-color: var(--color-accent); }
.konto-checkout-hint { margin-bottom: 20px; }
.konto-muted { color: var(--color-text-muted); font-size: 0.9em; }
.konto-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.82rem;
  font-weight: 700; margin: 0 4px 4px 0; white-space: nowrap;
  background: rgba(255, 255, 255, 0.12); color: var(--color-text);
}
.konto-badge--ok { background: #1e6b3d; }
.konto-badge--wip { background: #7a5c0a; }
.konto-badge--off { background: #7b2a1c; }
.konto-table-wrap { overflow-x: auto; }
.konto-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.konto-table th, .konto-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.konto-table tfoot th { border-bottom: 0; text-align: right; }
.konto-table tfoot th:last-child { text-align: left; }
.konto-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 22px; margin: 16px 0 24px; }
.konto-dl dt { color: var(--color-text-muted); }
.konto-dl dd { margin: 0; }
@media (max-width: 640px) {
  .konto-table thead { display: none; }
  .konto-table, .konto-table tbody, .konto-table tr, .konto-table td { display: block; width: 100%; }
  .konto-table tr { border-bottom: 1px solid var(--border-subtle); padding: 8px 0; }
  .konto-table td { border: 0; padding: 4px 0; }
  .konto-table td::before { content: attr(data-label) ": "; color: var(--color-text-muted); font-weight: 600; }
  .konto-table tfoot tr, .konto-table tfoot th { display: block; text-align: left; }
  .konto-dl { grid-template-columns: 1fr; gap: 0; }
  .konto-dl dt { margin-top: 10px; }
}

/* Datenschutzerklärung (Generator-Struktur, siehe sql/2026-10-11-datenschutz-neu.sql):
   Inhaltsübersicht, Aufzählungen, Begriffsdefinitionen und Generator-Hinweis
   im Seitendesign – nur innerhalb von .legal-page. */
.legal-page ul { margin: 0 0 1.2em; padding-left: 1.25em; }
.legal-page li { margin: 0 0 0.45em; }
.legal-page li::marker { color: var(--color-accent); }
.legal-page h2[id] { scroll-margin-top: 120px; }
.legal-page__stand { color: var(--color-text-muted); font-size: var(--fs-subtext); }
.legal-page ul.index {
  list-style: none;
  margin: 0 0 1.6em;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  columns: 2 260px;
  column-gap: 28px;
}
.legal-page ul.index li { break-inside: avoid; margin: 0 0 0.35em; }
.legal-page .index-link { color: var(--color-text-muted); }
.legal-page .index-link:hover { color: var(--color-accent-light); }
.legal-page ul.m-elements,
.legal-page ul.glossary { color: var(--color-text-muted); }
.legal-page ul.m-elements strong,
.legal-page ul.glossary strong { color: var(--color-text); }
.legal-page p.seal {
  margin-top: 2.4em;
  padding-top: 1em;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-subtext);
}
.legal-page p.seal a { color: var(--color-text-muted); }
.legal-page p.seal a:hover { color: var(--color-accent-light); }