/* Rettungslicht-Verlag – Shop-Design
   Farben aus dem Logo (Tinte und Orange), Lora für Gottes Wort und Titel, Inter für alles Bedienbare.
   Sechs Designs über data-theme am <html>: leuchtfeuer (Standard), morgenlicht, bibeldruck, nachtwache, plakat, stille. */

@font-face { font-family: 'Lora'; src: url('../fonts/lora.woff') format('woff'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('../fonts/lora-italic.woff') format('woff'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-medium.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-semibold.woff') format('woff'); font-weight: 600 700; font-display: swap; }

:root {
  /* Grundfarben aus dem Logo: Tinte #1D1D1C, Orange #EB760E */
  --nacht: #1D1D1C;          /* Tinte: Überschriften, Knöpfe, aktive Elemente */
  --nacht-2: #3B3B38;        /* Links, Hover */
  --nacht-3: #111110;        /* Kopfleiste */
  --licht: #EB760E;          /* Logo-Orange als Fläche */
  --licht-hover: #D4660A;
  --licht-text: #A9520B;     /* Orange für kleine Schrift auf Hell (Kontrast 5:1) */
  --licht-hell: #FDEEDF;
  --papier: #F6F6F4;
  --weiss: #FFFFFF;
  --nebel: #EEEEEA;
  --linie: #DCDCD6;
  --feld: #BDBDB6;
  --tinte: #1D1D1C;
  --schiefer: #5E5E58;
  --fehler: #A8261C;
  --gut: #2B6E47;
  --focus-ring: rgba(235, 118, 14, .4);
  --flaeche: #FFFFFF;        /* Kästen, Karten, Eingabefelder */
  --knopf: var(--nacht); --knopf-hover: var(--nacht-2); --auf-knopf: #FFFFFF;
  --auf-licht: #1D1D1C;      /* Schrift auf Akzentfarbe */
  --bild-grund: #FFFFFF;     /* Hintergrund hinter Produktbildern */
  --top-bg: var(--nacht-3); --top-fg: #D6D6D0;
  --hero-bg: #1D1D1C; --hero-fg: #F4F4F1; --hero-muted: #CFCFC9;
  --foot-bg: #1D1D1C; --foot-fg: #CFCFC9; --foot-muted: #9C9C95; --foot-head: #FFFFFF;
  --serif: 'Lora', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1240px;
  --r-s: 6px; --r-m: 10px; --r-l: 16px; --r-btn: 6px; --r-pill: 999px;
  /* Typografische Skala 1,25 */
  --t-xs: .8rem; --t-s: .9rem; --t-m: 1rem; --t-l: 1.25rem; --t-xl: 1.563rem; --t-2xl: 1.953rem; --t-3xl: 2.441rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 106.25%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); font-size: var(--t-m); line-height: 1.55; color: var(--tinte); background: var(--papier); font-feature-settings: 'kern', 'calt'; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--nacht-2); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--nacht); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--licht); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; color: var(--nacht); margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: calc(clamp(var(--t-2xl), 3vw, var(--t-3xl)) * var(--sz-head, 1)); }
h2 { font-size: calc(var(--t-xl) * var(--sz-head, 1)); }
h3 { font-size: calc(var(--t-l) * var(--sz-head, 1)); }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
.narrow { max-width: 860px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--licht); color: var(--auf-licht); padding: .6rem 1rem; border-radius: var(--r-s); z-index: 50; font-weight: 600; }
.skip:focus { top: 1rem; }
.muted { color: var(--schiefer); }
.small { font-size: var(--t-s); }
.hp { position: absolute; left: -9999px; }
[hidden] { display: none !important; }

/* ---------- Kopf ---------- */
.topbar { background: var(--top-bg); color: var(--top-fg); font-size: var(--t-xs); }
.topbar .wrap { display: flex; justify-content: space-between; gap: 1rem; padding-top: .45rem; padding-bottom: .45rem; }
.topbar a { color: var(--top-fg); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar-contact { display: flex; gap: 1.25rem; }
.site-header { background: var(--weiss); border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 30; }
.header-row { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding-top: .9rem; padding-bottom: .9rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--nacht); flex-shrink: 0; }
.brand .mark { height: calc(52px * var(--sz-logo, 1)); width: auto; }
.brand-light .mark { height: 46px; }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wm-main { font-family: var(--serif); font-weight: 600; font-size: calc(1.32rem * var(--sz-logo, 1)); letter-spacing: -.005em; color: var(--nacht); }
.wm-sub { font-size: var(--t-s); color: var(--licht-text); font-weight: 500; margin-top: .3rem; }
.brand-light .wm-sub { color: var(--licht); }
.logo-img { max-height: 54px; width: auto; }
.search { flex: 1; display: flex; max-width: 560px; position: relative; }
.search input { width: 100%; font: inherit; font-size: var(--t-s); padding: .72rem 3rem .72rem 1rem; border: 1px solid var(--linie); border-radius: var(--r-pill); background: var(--papier); color: var(--tinte); }
.search input:focus { background: var(--flaeche); border-color: var(--nacht-2); outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.search button { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--nacht); padding: .45rem .6rem; cursor: pointer; border-radius: var(--r-pill); }
.cart-btn { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--nacht); font-weight: 500; position: relative; padding: .5rem .75rem; border-radius: var(--r-m); }
.cart-btn:hover { background: var(--nebel); }
.badge { background: var(--licht); color: var(--auf-licht); font-size: .72rem; font-weight: 700; min-width: 1.4rem; height: 1.4rem; display: inline-grid; place-items: center; border-radius: var(--r-pill); padding: 0 .35rem; }
.icon-btn { border: 0; background: transparent; color: var(--nacht); padding: .4rem; cursor: pointer; border-radius: var(--r-s); }
.nav-toggle { display: none; }

.mainnav { border-top: 1px solid var(--nebel); }
.mainnav > ul { list-style: none; display: flex; gap: .25rem; margin: 0 auto; padding-top: 0; padding-bottom: 0; }
.mainnav li { position: relative; display: flex; align-items: center; }
.mainnav > ul > li > a { display: block; padding: .75rem .9rem; text-decoration: none; color: var(--tinte); font-weight: 500; font-size: calc(var(--t-s) * var(--sz-nav, 1)); border-bottom: 3px solid transparent; }
.mainnav > ul > li > a:hover, .mainnav > ul > li.active > a { color: var(--nacht); border-bottom-color: var(--licht); }
.mainnav .nav-extra { margin-left: auto; }
.mainnav .nav-extra + .nav-extra { margin-left: 0; }
.sub-toggle { border: 0; background: none; padding: .3rem; margin-left: -.6rem; color: var(--schiefer); cursor: pointer; }
.sub { list-style: none; margin: 0; padding: .5rem; position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .3); display: none; z-index: 40; }
.sub a { display: block; padding: .5rem .75rem; text-decoration: none; color: var(--tinte); border-radius: var(--r-s); font-size: var(--t-s); }
.sub a:hover { background: var(--nebel); color: var(--nacht); }
.has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub.open > .sub { display: block; }

.flash { padding: .85rem 1.1rem; border-radius: var(--r-m); margin: 1rem 0; border-left: 4px solid; background: var(--flaeche); }
.flash-success { border-color: var(--gut); }
.flash-error { border-color: var(--fehler); color: var(--fehler); }
.flash-info { border-color: var(--nacht-2); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: inherit; font-weight: 600; font-size: calc(var(--t-s) * var(--sz-btn, 1)); padding: calc(.8rem * var(--sz-btn, 1)) calc(1.4rem * var(--sz-btn, 1)); border-radius: var(--r-btn); border: 2px solid var(--knopf); background: var(--knopf); color: var(--auf-knopf); text-decoration: none; cursor: pointer; line-height: 1.2; transition: background .15s, border-color .15s, color .15s; }
.btn:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); color: var(--auf-knopf); text-decoration: none; }
.btn-primary { background: var(--licht); border-color: var(--licht); color: var(--auf-licht); }
.btn-primary:hover { background: var(--licht-hover); border-color: var(--licht-hover); color: var(--auf-licht); }
.btn-quiet { background: transparent; color: var(--nacht); border-color: var(--linie); }
.btn-quiet:hover { background: var(--nebel); color: var(--nacht); border-color: var(--nacht-2); }
.btn-light { background: var(--licht); border-color: var(--licht); color: var(--auf-licht); }
.btn-light:hover { background: var(--licht-hover); border-color: var(--licht-hover); color: var(--auf-licht); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.btn-small { padding: .5rem .9rem; }
.btn-wide { width: 100%; padding-top: 1rem; padding-bottom: 1rem; font-size: var(--t-m); }
.link-btn { border: 0; background: none; color: var(--schiefer); text-decoration: underline; cursor: pointer; font: inherit; font-size: var(--t-s); padding: .25rem; }
.link-btn:hover { color: var(--fehler); }

/* ---------- Startseite: Leuchtfeuer ---------- */
.hero { position: relative; overflow: hidden; background: var(--hero-bg); color: var(--hero-fg); isolation: isolate; }
.beam { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.beam::before { /* Lichtkegel */
  content: ''; position: absolute; inset: -40% -10% -40% -10%;
  background: conic-gradient(from 74deg at 7% 50%, transparent 0deg, rgba(235, 118, 14, .30) 7deg, rgba(235, 118, 14, .11) 20deg, rgba(235, 118, 14, .03) 30deg, transparent 34deg, transparent 360deg);
  transform-origin: 7% 50%; animation: sweep 2.8s cubic-bezier(.2, .7, .2, 1) both;
}
.beam::after { /* Lichtquelle */
  content: ''; position: absolute; left: calc(7% - 140px); top: calc(50% - 140px); width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 205, .95) 0 6px, rgba(235, 118, 14, .6) 14px, rgba(235, 118, 14, .13) 60px, transparent 70%);
  animation: glow 2.8s ease-out both;
}
@keyframes sweep { from { opacity: 0; transform: rotate(-9deg); } to { opacity: 1; transform: rotate(0); } }
@keyframes glow { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.hero-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; padding-top: clamp(3.5rem, 8vw, 6.5rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); padding-left: max(calc(7% + 3rem), 2rem); }
.hero-verse { margin: 0; }
.hero-verse blockquote { margin: 0; }
.hero-verse .q { font: inherit; }
.hero-verse blockquote p { font-family: var(--serif); font-weight: 400; font-size: calc(clamp(1.65rem, 3.1vw, 2.6rem) * var(--sz-verse, 1)); line-height: 1.28; color: var(--hero-fg); margin: 0 0 1.4rem; max-width: 30ch; text-wrap: balance; hanging-punctuation: first; }
.hero-verse figcaption { font-weight: 600; color: var(--licht); font-size: calc(var(--t-m) * var(--sz-verse, 1)); display: flex; align-items: center; gap: .75rem; }
.hero-verse figcaption::before { content: ''; width: 2.5rem; height: 2px; background: var(--licht); }
.hero-text { font-size: calc(var(--t-l) * var(--sz-text, 1)); line-height: 1.5; color: var(--hero-muted); margin-bottom: 1.6rem; max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.section { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: .5rem; }
.section-title { font-size: calc(var(--t-2xl) * var(--sz-head, 1)); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-head .section-title { margin: 0; }
.section-head a { font-weight: 500; font-size: var(--t-s); }

/* Sortiment als Regal */
.shelves { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem 2.5rem; }
.shelf-lead { grid-row: span 10; }
.shelf-link { display: block; text-decoration: none; color: inherit; }
.shelf:not(.shelf-lead) { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0 1.25rem; align-items: center; padding-bottom: 1.25rem; border-bottom: 1px solid var(--linie); }
.shelf:not(.shelf-lead):last-child { border-bottom: 0; }
.shelf:not(.shelf-lead) .shelf-link { display: contents; }
.shelf-img { position: relative; display: block; aspect-ratio: 1; background: var(--nebel); border-radius: var(--r-l); overflow: hidden; isolation: isolate; }
.shelf:not(.shelf-lead) .shelf-img { grid-row: span 2; border-radius: var(--r-m); }
.shelf-lead .shelf-img { aspect-ratio: auto; height: clamp(300px, 34vw, 480px); }
/* Kategoriebilder tragen oft Schrift (z. B. „Missionsartikel“) – deshalb nie beschneiden:
   ganzes Bild mittig, dahinter eine weichgezeichnete Fassung als Füllung */
.shelf-img .shelf-bg { position: absolute; inset: -10%; width: 120%; height: 120%; max-width: none; object-fit: cover; filter: blur(28px) saturate(1.2); opacity: .45; z-index: -1; }
.shelf-img .shelf-fg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.shelf-link:hover .shelf-img .shelf-fg { transform: scale(1.02); }
.shelf-text { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-top: .75rem; }
.shelf:not(.shelf-lead) .shelf-text { flex-direction: column; gap: .1rem; margin: 0; align-self: end; }
.shelf-name { font-family: var(--serif); font-weight: 600; font-size: var(--t-xl); color: var(--nacht); }
.shelf-lead .shelf-name { font-size: var(--t-2xl); }
.shelf-link:hover .shelf-name { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--licht); text-underline-offset: .2em; }
.shelf-count { color: var(--schiefer); font-size: var(--t-s); white-space: nowrap; font-variant-numeric: tabular-nums; }
.shelf-subs { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: var(--t-s); align-self: start; }
.shelf-subs a { color: var(--schiefer); text-decoration: none; }
.shelf-subs a:hover { color: var(--nacht); text-decoration: underline; }

/* Sprachen */
.languages { margin-top: clamp(3rem, 7vw, 5rem); background: var(--weiss); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.languages .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.lang-intro h2 { font-size: var(--t-2xl); }
.lang-intro p { color: var(--schiefer); max-width: 32ch; }
.lang-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); }
.lang-list li { border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.lang-list a { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; text-decoration: none; height: 100%; }
.lang-list a:hover { background: var(--licht-hell); }
.native { font-family: var(--serif), 'Noto Naskh Arabic', 'Geeza Pro', 'Times New Roman', serif; font-size: var(--t-l); overflow-wrap: anywhere; color: var(--nacht); line-height: 1.25; }
.native[dir=rtl] { align-self: flex-start; }
.lang-list .de { font-size: var(--t-xs); color: var(--schiefer); font-weight: 500; }

/* Produktkarten */
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2rem 1.25rem; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card a { display: block; text-decoration: none; color: inherit; }
.card-img { position: relative; display: block; aspect-ratio: 1; background: var(--bild-grund); border: 1px solid var(--linie); border-radius: var(--r-m); overflow: hidden; }
.card-img img { position: absolute; top: 7%; left: 7%; width: 86%; height: 86%; object-fit: contain; }
.card-img .noimg { position: absolute; top: 27%; left: 27%; }
.noimg { display: block; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--licht-hell), var(--nebel) 70%); }
.card-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--serif); font-weight: 500; font-size: calc(1.02rem * var(--sz-card, 1)); line-height: 1.35; color: var(--tinte); margin-top: .7rem; }
.card a:hover .card-title { color: var(--nacht); text-decoration: underline; text-decoration-color: var(--licht); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.card-meta { display: flex; align-items: baseline; gap: .6rem; margin-top: .35rem; }
.price { font-weight: 600; color: var(--nacht); font-variant-numeric: tabular-nums; }
.price .from { font-weight: 400; color: var(--schiefer); }
.price del { color: var(--schiefer); font-weight: 400; margin-right: .25rem; }
.price-donation { color: var(--gut); font-weight: 600; }
.stock-out { font-size: var(--t-xs); color: var(--fehler); }

/* Traktate-Band */
.bulk { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.bulk-text h2 { font-size: var(--t-2xl); max-width: 22ch; }
.bulk-text p { font-size: var(--t-l); color: var(--schiefer); max-width: 46ch; line-height: 1.55; }
.bulk-facts { margin: 0; display: grid; gap: 0; border-left: 3px solid var(--licht); }
.bulk-facts div { padding: .9rem 0 .9rem 1.5rem; }
.bulk-facts div + div { border-top: 1px solid var(--linie); }
.bulk-facts dt { font-family: var(--serif); font-size: var(--t-xl); font-weight: 600; color: var(--nacht); }
.bulk-facts dd { margin: 0; color: var(--schiefer); }

/* Spenden */
.donate { background: var(--nebel); padding: clamp(2.5rem, 6vw, 4rem) 0; }
.donate-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.donate p { max-width: 50ch; }
.muted-light { color: var(--schiefer); font-size: var(--t-s); }
.bank { margin: 0; background: var(--flaeche); border-radius: var(--r-l); padding: 1.25rem 1.5rem; display: grid; gap: .6rem; }
.bank div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
.bank dt { color: var(--schiefer); font-size: var(--t-s); }
.bank dd { margin: 0; font-weight: 500; }
.iban { font-variant-numeric: tabular-nums; letter-spacing: .03em; }

/* ---------- Listen ---------- */
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: 1.4rem 0 1rem; font-size: var(--t-s); color: var(--schiefer); }
.crumbs li + li::before { content: '/'; margin-right: .3rem; color: var(--linie); }
.crumbs a { color: var(--schiefer); text-decoration: none; }
.crumbs a:hover { color: var(--nacht); text-decoration: underline; }
.list-head { margin-bottom: 1.25rem; }
.list-head h1 { margin-bottom: .3rem; }
.lead { font-size: var(--t-l); color: var(--schiefer); max-width: 60ch; }
.chips ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 1.5rem; }
.chips a { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem; border: 1px solid var(--linie); background: var(--flaeche); border-radius: var(--r-pill); text-decoration: none; color: var(--tinte); font-size: var(--t-s); font-weight: 500; }
.chips a:hover { border-color: var(--nacht-2); color: var(--nacht); }
.chips a[aria-current] { background: var(--knopf); border-color: var(--knopf); color: var(--auf-knopf); }
.chips .n { color: var(--schiefer); font-weight: 400; font-variant-numeric: tabular-nums; }
.chips a[aria-current] .n { color: rgba(255, 255, 255, .7); }
.list-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 0; margin-bottom: 1.5rem; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.count { margin: 0; color: var(--schiefer); font-size: var(--t-s); }
.sort { display: flex; align-items: center; gap: .5rem; font-size: var(--t-s); }
select, input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], textarea { font: inherit; color: var(--tinte); }
.sort select { padding: .45rem 2rem .45rem .7rem; border: 1px solid var(--linie); border-radius: var(--r-s); background: var(--flaeche); }
.pager { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem; margin: 3rem 0 1rem; }
.pager a, .pager span { min-width: 2.6rem; padding: .55rem .8rem; text-align: center; border-radius: var(--r-s); text-decoration: none; border: 1px solid var(--linie); background: var(--flaeche); }
.pager [aria-current] { background: var(--knopf); color: var(--auf-knopf); border-color: var(--knopf); }
.pager .gap { border: 0; background: none; }
.empty { text-align: center; padding: 3rem 1rem; background: var(--flaeche); border: 1px dashed var(--linie); border-radius: var(--r-l); }
.empty-big { margin: 3rem 0; }
.search-inline { margin: 1.5rem auto 0; max-width: 420px; gap: .5rem; }
.search-inline input { padding-right: 1rem; }

/* ---------- Produkt ---------- */
.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4.5rem); align-items: start; margin-bottom: 3rem; }
.gallery { position: sticky; top: 150px; }
.gallery-main { position: relative; background: var(--bild-grund); border: 1px solid var(--linie); border-radius: var(--r-l); display: flex; align-items: center; justify-content: center; padding: clamp(.75rem, 3%, 1.5rem); min-height: 280px; overflow: hidden; }
.gallery-main img { display: block; max-width: 100%; max-height: clamp(260px, calc(100vh - 300px), 760px); width: auto; height: auto; object-fit: contain; cursor: zoom-in; }
.gallery-main .zoom-hint { position: absolute; right: .75rem; bottom: .75rem; display: inline-flex; align-items: center; gap: .35rem; background: rgba(255, 255, 255, .92); color: #1D1D1C; font-size: var(--t-xs); font-weight: 600; padding: .35rem .7rem; border-radius: var(--r-pill); border: 1px solid var(--linie); pointer-events: none; }
.gallery-main .noimg { width: 40%; }
.thumbs { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: .8rem 0 0; }
.thumbs button { width: 76px; height: 76px; padding: 4px; display: grid; place-items: center; background: var(--bild-grund); border: 1px solid var(--linie); border-radius: var(--r-s); cursor: pointer; }
.thumbs button[aria-current="true"] { border: 2px solid var(--nacht); }
.thumbs img { max-width: 100%; max-height: 66px; width: auto; height: auto; object-fit: contain; }
.buybox h1 { font-size: clamp(var(--t-xl), 2.6vw, var(--t-2xl)); line-height: 1.25; margin-bottom: .4rem; }
.sku { color: var(--schiefer); font-size: var(--t-s); margin-bottom: 1rem; }
.prose { line-height: 1.65; max-width: 68ch; font-size: calc(1em * var(--sz-text, 1)); }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { font-size: var(--t-l); margin-top: 1.6em; }
.prose h3 { font-size: var(--t-m); margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .35em; }
.prose blockquote { margin: 1.2em 0; padding-left: 1.2rem; border-left: 3px solid var(--licht); font-family: var(--serif); font-style: italic; }
.short { font-family: var(--serif); font-size: 1.08rem; line-height: 1.6; color: var(--tinte); margin-bottom: 1.5rem; }
.variants { border: 0; padding: 0; margin: 0 0 1.25rem; }
.variants legend { font-weight: 600; font-size: var(--t-s); margin-bottom: .6rem; }
.variants { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.variants legend { grid-column: 1 / -1; }
.variant { position: relative; display: flex; flex-direction: column; padding: .7rem .85rem; border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--flaeche); cursor: pointer; }
.variant input { position: absolute; opacity: 0; pointer-events: none; }
.variant:hover { border-color: var(--nacht-2); }
.variant:has(input:checked) { border: 2px solid var(--nacht); padding: calc(.7rem - 1px) calc(.85rem - 1px); background: var(--licht-hell); }
.variant:has(input:focus-visible) { outline: 3px solid var(--licht); outline-offset: 2px; }
.variant.disabled { opacity: .45; cursor: not-allowed; }
.v-label { font-weight: 600; color: var(--nacht); font-variant-numeric: tabular-nums; }
.v-label small { font-weight: 400; color: var(--schiefer); }
.v-price { font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.v-unit { font-size: var(--t-xs); color: var(--schiefer); }
.price-row { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.big-price { font-size: calc(var(--t-2xl) * var(--sz-price, 1)); font-weight: 600; color: var(--nacht); margin: 0; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.price-note { font-size: var(--t-xs); color: var(--schiefer); margin: 0; }
.add-row { display: flex; gap: .75rem; align-items: stretch; }
.add-row .btn-wide { width: auto; flex: 1; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--linie); border-radius: var(--r-s); background: var(--flaeche); }
.qty button { width: 2.6rem; height: 100%; min-height: 2.8rem; border: 0; background: none; font-size: 1.2rem; cursor: pointer; color: var(--nacht); }
.qty button:hover { background: var(--nebel); }
.qty input { width: 3.4rem; text-align: center; border: 0; padding: .5rem 0; font-variant-numeric: tabular-nums; -moz-appearance: textfield; background: transparent; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.qty-small button { min-height: 2.3rem; width: 2.2rem; }
.qty-small input { width: 2.8rem; padding: .3rem 0; }
.ship-note { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linie); font-size: var(--t-s); color: var(--schiefer); }
.stock-out-box { padding: 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m); }
.description { max-width: 820px; padding: 2rem 0; border-top: 1px solid var(--linie); }
.added { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 60; background: var(--nacht); color: #fff; padding: 1rem 1.25rem; border-radius: var(--r-m); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5); display: flex; gap: 1rem; align-items: center; max-width: min(420px, calc(100vw - 2.5rem)); animation: pop .25s ease-out; }
.added a { color: var(--licht); font-weight: 600; white-space: nowrap; }
@keyframes pop { from { transform: translateY(10px); opacity: 0; } }

/* ---------- Warenkorb & Kasse ---------- */
.cart-layout, .checkout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; margin-bottom: 4rem; }
.cart-lines ul { list-style: none; margin: 0; padding: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); }
.line { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto 6.5rem auto; gap: 1rem; align-items: center; padding: 1rem 1.25rem; }
.line + .line { border-top: 1px solid var(--nebel); }
.line-img { width: 84px; height: 84px; border: 1px solid var(--nebel); border-radius: var(--r-s); display: flex; align-items: center; justify-content: center; padding: 4px; background: var(--bild-grund); overflow: hidden; }
.line-img img { max-width: 100%; max-height: 74px; width: auto; height: auto; object-fit: contain; }
.line-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.line-name { font-family: var(--serif); font-weight: 500; color: var(--tinte); text-decoration: none; }
.line-name:hover { text-decoration: underline; }
.line-var, .line-unit { font-size: var(--t-s); color: var(--schiefer); }
.line-total { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.js .js-hide { display: none; }
.cart-lines > .btn { margin-top: 1rem; }
.summary { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); padding: 1.5rem; }
.summary-sticky { position: sticky; top: 150px; }
.summary h2 { font-size: var(--t-l); }
.summary dl { margin: 0 0 1rem; }
.summary dl div, .totals div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; font-variant-numeric: tabular-nums; }
.summary dd, .totals dd { margin: 0; }
.summary .minor, .totals .minor { font-size: var(--t-s); color: var(--schiefer); }
.summary .total, .totals .total { border-top: 1px solid var(--linie); margin-top: .5rem; padding-top: .8rem; font-weight: 700; font-size: var(--t-l); color: var(--nacht); }
.summary .btn-wide { margin-top: 1rem; }
.mini-lines { list-style: none; margin: 0 0 1rem; padding: 0 0 .75rem; border-bottom: 1px solid var(--nebel); font-size: var(--t-s); }
.mini-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.mini-lines small { display: block; color: var(--schiefer); }
.mini-lines span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.box { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); padding: 1.25rem 1.5rem 1.5rem; margin: 0 0 1.25rem; }
fieldset.box legend { float: left; width: 100%; font-family: var(--serif); font-weight: 600; font-size: var(--t-l); color: var(--nacht); margin-bottom: .9rem; padding: 0; }
fieldset.box legend + * { clear: both; }
.opt { font-family: var(--sans); font-weight: 400; font-size: var(--t-s); color: var(--schiefer); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.row-zip { grid-template-columns: 8rem 1fr; }
.field { margin-bottom: .9rem; display: flex; flex-direction: column; gap: .3rem; }
.field label { font-weight: 500; font-size: var(--t-s); }
.field input, .box textarea, .contact-form textarea { width: 100%; padding: .75rem .85rem; border: 1px solid var(--feld); border-radius: var(--r-s); background: var(--flaeche); }
.field input:focus, textarea:focus { outline: none; border-color: var(--nacht-2); box-shadow: 0 0 0 3px var(--focus-ring); }
.field.invalid input { border-color: var(--fehler); }
.err { color: var(--fehler); font-size: var(--t-s); }
.hint { font-size: var(--t-s); color: var(--schiefer); margin: .25rem 0 0; }
.paymethods { display: grid; gap: .6rem; }
.paymethod { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; padding: .9rem 1rem; border: 1px solid var(--linie); border-radius: var(--r-m); cursor: pointer; }
.paymethod input { grid-row: span 2; margin-top: .25rem; width: 1.15rem; height: 1.15rem; accent-color: var(--nacht); }
.paymethod:has(input:checked) { border: 2px solid var(--nacht); padding: calc(.9rem - 1px) calc(1rem - 1px); background: var(--licht-hell); }
.pm-name { font-weight: 600; }
.pm-badge { font-size: var(--t-xs); font-weight: 500; background: var(--nebel); padding: .1rem .5rem; border-radius: var(--r-pill); margin-left: .3rem; }
.pm-desc { font-size: var(--t-s); color: var(--schiefer); }
.donation-picks { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 1rem; }
.pick { font: inherit; font-weight: 500; padding: .55rem 1rem; border: 1px solid var(--linie); background: var(--flaeche); border-radius: var(--r-pill); cursor: pointer; font-variant-numeric: tabular-nums; }
.pick:hover { border-color: var(--nacht-2); }
.pick[aria-pressed="true"] { background: var(--knopf); color: var(--auf-knopf); border-color: var(--knopf); }
.field-donation { max-width: 14rem; }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-s); margin: 1rem 0 .3rem; }
.check input { margin-top: .2rem; width: 1.15rem; height: 1.15rem; accent-color: var(--nacht); flex-shrink: 0; }
.check.invalid { color: var(--fehler); }
.confirm { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); padding: clamp(1.5rem, 4vw, 2.5rem); margin: 2rem 0 4rem; }
.confirm .lead { color: var(--tinte); }
.pay-box { background: var(--licht-hell); border-radius: var(--r-m); padding: 1.1rem 1.3rem; margin: 1.5rem 0; }
.pay-box h2 { font-size: var(--t-l); }
.pay-box pre { font-family: var(--sans); white-space: pre-wrap; margin: 0; line-height: 1.6; }
.retry { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1.25rem 0 2rem; }
.retry form { display: flex; gap: .5rem; align-items: center; }
.retry select { padding: .7rem; border: 1px solid var(--linie); border-radius: var(--r-s); }
.totals { margin: 0 0 1.5rem; }

/* ---------- Inhaltsseiten ---------- */
.page-content { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); padding: clamp(1.5rem, 4vw, 3rem); margin-bottom: 4rem; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 2.5rem; margin-bottom: 4rem; align-items: start; }
.contact-form .field textarea { width: 100%; }

/* ---------- Fuß ---------- */
.site-footer { background: var(--foot-bg); color: var(--foot-fg); padding-top: 3.5rem; font-size: calc(var(--t-s) * var(--sz-foot, 1)); }
.site-footer a { color: var(--foot-head); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: var(--licht); }
.site-footer h2 { color: var(--foot-head); font-family: var(--sans); font-size: var(--t-s); font-weight: 600; margin-bottom: .8rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1.2fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; }
.brand-light, .brand-light .wm-main { color: var(--foot-head); }
.footer-slogan { margin: .9rem 0; }
address { font-style: normal; line-height: 1.6; }
.site-footer .muted { color: var(--foot-muted); }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.footer-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.2rem; padding-bottom: 1.4rem; border-top: 1px solid var(--foot-line, rgba(255, 255, 255, .12)); color: var(--foot-muted); font-size: var(--t-xs); }


/* ======================================================================
   Design „Morgenlicht“ – hell und freundlich, runde Formen, aufgehende Sonne
   ====================================================================== */
[data-theme="morgenlicht"] {
  --papier: #FFFFFF; --nebel: #FCF1E6; --linie: #EDE3D8; --feld: #CFC6BC;
  --licht-hell: #FDEBD9;
  --top-bg: #EB760E; --top-fg: #1D1D1C;
  --hero-bg: #FDF0E3; --hero-fg: #1D1D1C; --hero-muted: #4A4A45;
  --foot-bg: #2B2622; --foot-fg: #D9D2CA; --foot-muted: #A79E94; --foot-head: #FFFFFF;
  --r-s: 10px; --r-m: 16px; --r-l: 26px; --r-btn: 999px;
}
[data-theme="morgenlicht"] .site-header { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--linie); }
[data-theme="morgenlicht"] .beam::before { /* Sonne */
  inset: auto; right: -6%; bottom: -55%; left: auto; top: auto; width: min(62vw, 760px); aspect-ratio: 1; border-radius: 50%;
  background: #F9CFA2; transform: none; animation: rise 2.2s cubic-bezier(.2, .7, .2, 1) both;
}
[data-theme="morgenlicht"] .beam::after {
  left: auto; top: auto; right: calc(-6% + min(62vw, 760px) * .2); bottom: calc(-55% + min(62vw, 760px) * .2);
  width: calc(min(62vw, 760px) * .6); height: auto; aspect-ratio: 1; background: #F4A65C; animation: rise 2.6s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes rise { from { transform: translateY(18%); opacity: 0; } to { transform: none; opacity: 1; } }
[data-theme="morgenlicht"] .hero-inner { padding-left: clamp(1rem, 3vw, 2rem); align-items: center; }
[data-theme="morgenlicht"] .hero-verse blockquote p { color: var(--hero-fg); }
[data-theme="morgenlicht"] .hero-verse figcaption { color: var(--licht-text); }
[data-theme="morgenlicht"] .hero-side { background: rgba(255, 255, 255, .78); border-radius: var(--r-l); padding: 1.6rem 1.8rem; position: relative; }
[data-theme="morgenlicht"] .btn-ghost-light { color: var(--nacht); border-color: var(--nacht); }
[data-theme="morgenlicht"] .btn-ghost-light:hover { background: var(--nacht); color: #fff; }
[data-theme="morgenlicht"] .card-img { border-color: transparent; background: var(--nebel); }
[data-theme="morgenlicht"] .gallery-main, [data-theme="morgenlicht"] .line-img { background: var(--nebel); border-color: transparent; }
[data-theme="morgenlicht"] .languages { background: var(--nebel); border: 0; }
[data-theme="morgenlicht"] .lang-list { border: 0; gap: .6rem; }
[data-theme="morgenlicht"] .lang-list li { border: 0; }
[data-theme="morgenlicht"] .lang-list a { background: #fff; border-radius: var(--r-m); }
[data-theme="morgenlicht"] .lang-list a:hover { background: var(--licht-hell); }
[data-theme="morgenlicht"] .bulk-facts { border-left: 0; gap: .6rem; }
[data-theme="morgenlicht"] .bulk-facts div { background: var(--nebel); border-radius: var(--r-m); border: 0 !important; }
[data-theme="morgenlicht"] .donate { background: var(--licht-hell); }
[data-theme="morgenlicht"] .mainnav > ul > li > a:hover, [data-theme="morgenlicht"] .mainnav > ul > li.active > a { border-bottom-color: var(--licht); }
@media (max-width: 860px) {
  [data-theme="morgenlicht"] .beam::before { width: 120vw; right: -40vw; bottom: -40%; }
  [data-theme="morgenlicht"] .beam::after { width: 70vw; right: -15vw; bottom: calc(-40% + 25vw); }
}

/* ======================================================================
   Design „Bibeldruck“ – wie eine gedruckte Bibel: Tinte, Papierweiß,
   Orange als Rubrik-Farbe für Initialen und Bibelstellen
   ====================================================================== */
[data-theme="bibeldruck"] {
  --papier: #FFFFFF; --nebel: #F5F5F2; --linie: #D8D8D2; --feld: #A9A9A2;
  --nacht-2: #1D1D1C;
  --top-bg: #FFFFFF; --top-fg: #5E5E58;
  --hero-bg: #FFFFFF; --hero-fg: #1D1D1C; --hero-muted: #3B3B38;
  --foot-bg: #F5F5F2; --foot-fg: #3B3B38; --foot-muted: #5E5E58; --foot-head: #1D1D1C; --foot-line: #D8D8D2;
  --r-s: 0; --r-m: 0; --r-l: 0; --r-btn: 0; --r-pill: 0;
}
[data-theme="bibeldruck"] body { font-size: 1.02rem; }
[data-theme="bibeldruck"] a:not(.btn) { color: var(--nacht); text-decoration-color: var(--licht); }
[data-theme="bibeldruck"] .topbar { border-bottom: 1px solid var(--linie); }
[data-theme="bibeldruck"] .site-header { border-bottom: 3px double var(--nacht); }
[data-theme="bibeldruck"] .mainnav { border-top-color: var(--linie); }
[data-theme="bibeldruck"] .mainnav > ul > li > a { font-family: var(--serif); font-size: calc(1.02rem * var(--sz-nav, 1)); font-weight: 500; }
[data-theme="bibeldruck"] .search input { background: #fff; border-color: var(--feld); }
[data-theme="bibeldruck"] .beam { display: none; }
[data-theme="bibeldruck"] .hero { border-bottom: 1px solid var(--linie); }
[data-theme="bibeldruck"] .hero-inner { grid-template-columns: minmax(0, 1fr); max-width: 980px; padding-left: clamp(1rem, 3vw, 2rem); gap: 2rem; padding-top: clamp(3rem, 7vw, 5.5rem); }
[data-theme="bibeldruck"] .hero-verse blockquote p { color: var(--nacht); font-size: calc(clamp(1.55rem, 2.9vw, 2.35rem) * var(--sz-verse, 1)); max-width: none; line-height: 1.38; text-wrap: pretty; }
[data-theme="bibeldruck"] .hero-verse .q { display: none; }
[data-theme="bibeldruck"] .hero-verse .initial { float: left; font-size: 3.4em; line-height: .82; color: var(--licht); margin: .06em .06em 0 -.02em; font-weight: 500; }
[data-theme="bibeldruck"] .hero-verse figcaption { clear: both; font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--licht-text); font-size: var(--t-l); }
[data-theme="bibeldruck"] .hero-verse figcaption::before { display: none; }
[data-theme="bibeldruck"] .hero-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; border-top: 1px solid var(--linie); padding-top: 1.6rem; }
[data-theme="bibeldruck"] .hero-text { margin: 0; max-width: 52ch; }
[data-theme="bibeldruck"] .btn-ghost-light { color: var(--nacht); border-color: var(--nacht); }
[data-theme="bibeldruck"] .btn-ghost-light:hover { background: var(--nacht); color: #fff; }
[data-theme="bibeldruck"] .section-title, [data-theme="bibeldruck"] .bulk-text h2, [data-theme="bibeldruck"] .lang-intro h2 { font-weight: 500; }
[data-theme="bibeldruck"] .section-head, [data-theme="bibeldruck"] #sortiment > .section-title { border-bottom: 1px solid var(--nacht); padding-bottom: .5rem; }
[data-theme="bibeldruck"] .shelf-img, [data-theme="bibeldruck"] .card-img { background: #fff; border: 1px solid var(--linie); }
[data-theme="bibeldruck"] .card-title { font-weight: 400; }
[data-theme="bibeldruck"] .price { font-family: var(--serif); font-weight: 600; }
[data-theme="bibeldruck"] .languages { background: var(--nebel); }
[data-theme="bibeldruck"] .bulk-facts { border-left-color: var(--nacht); }
[data-theme="bibeldruck"] .bulk-facts dt { color: var(--licht-text); font-weight: 500; }
[data-theme="bibeldruck"] .donate { background: #fff; border-top: 3px double var(--nacht); }
[data-theme="bibeldruck"] .bank { border: 1px solid var(--linie); }
[data-theme="bibeldruck"] .chips a[aria-current], [data-theme="bibeldruck"] .pager [aria-current] { background: var(--nacht); }
[data-theme="bibeldruck"] .variant:has(input:checked), [data-theme="bibeldruck"] .paymethod:has(input:checked) { background: #fff; border-color: var(--licht); }
[data-theme="bibeldruck"] .big-price { font-family: var(--serif); }
[data-theme="bibeldruck"] .site-footer { border-top: 3px double var(--nacht); }
@media (max-width: 860px) { [data-theme="bibeldruck"] .hero-side { grid-template-columns: 1fr; } }

/* ======================================================================
   Design „Nachtwache“ – der ganze Shop dunkel, nur das Licht leuchtet.
   Produktbilder liegen auf hellen Tafeln, damit Umschläge echt wirken.
   ====================================================================== */
[data-theme="nachtwache"] {
  color-scheme: dark;
  --papier: #151514; --weiss: #1C1C1A; --flaeche: #21211F; --nebel: #2A2A27; --linie: #383834; --feld: #5A5A54;
  --tinte: #E9E7E1; --nacht: #F5F3EE; --nacht-2: #F6B26B; --schiefer: #A9A79F;
  --licht-text: #F39A4A; --licht-hell: #3A2816;
  --knopf: #EB760E; --knopf-hover: #F48A2C; --auf-knopf: #1D1D1C;
  --bild-grund: #F3F1EC;
  --fehler: #F08A7E; --gut: #74C796; --focus-ring: rgba(235, 118, 14, .55);
  --top-bg: #0D0D0C; --top-fg: #A9A79F;
  --hero-bg: #0D0D0C; --hero-fg: #F5F3EE; --hero-muted: #BDBBB3;
  --foot-bg: #0D0D0C; --foot-fg: #BDBBB3; --foot-muted: #85837C; --foot-head: #F5F3EE; --foot-line: #2A2A27;
}
[data-theme="nachtwache"] input, [data-theme="nachtwache"] select, [data-theme="nachtwache"] textarea { color: var(--tinte); }
[data-theme="nachtwache"] .site-header { border-bottom-color: var(--nebel); }
[data-theme="nachtwache"] .site-header .mark-dunkel { display: none; }
[data-theme="nachtwache"] .site-header .mark-hell { display: block; }
[data-theme="nachtwache"] .btn-primary, [data-theme="nachtwache"] .btn-light, [data-theme="nachtwache"] .btn-primary:hover, [data-theme="nachtwache"] .btn-light:hover,
[data-theme="nachtwache"] .slide-more, [data-theme="nachtwache"] .badge, [data-theme="nachtwache"] .skip { color: var(--auf-licht); }
[data-theme="nachtwache"] .added { background: var(--flaeche); color: var(--tinte); border: 1px solid var(--linie); }
[data-theme="nachtwache"] .card-img, [data-theme="nachtwache"] .gallery-main { border-color: transparent; }
[data-theme="nachtwache"] .shelf-img { background: var(--nebel); }
[data-theme="nachtwache"] .slide-copy { background: var(--flaeche); }
[data-theme="nachtwache"] .slide-arrow { background: rgba(33, 33, 31, .92); color: var(--nacht); }
/* Kopf: ein Lichtschein fällt von oben in die Nacht */
[data-theme="nachtwache"] .beam::before { inset: 0; transform: none; animation: dawn 3s ease-out both;
  background: radial-gradient(ellipse 38% 85% at 50% -12%, rgba(235, 118, 14, .34), rgba(235, 118, 14, .1) 55%, transparent 75%); }
[data-theme="nachtwache"] .beam::after { left: calc(50% - 4px); top: 0; width: 8px; height: 8px; border-radius: 50%;
  background: #FFE7CC; box-shadow: 0 0 22px 8px rgba(235, 118, 14, .55); animation: glow 3s ease-out both; }
@keyframes dawn { from { opacity: 0; } to { opacity: 1; } }
[data-theme="nachtwache"] .hero-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-left: clamp(1rem, 3vw, 2rem); padding-top: clamp(4.5rem, 10vw, 8rem); gap: 1.5rem; }
[data-theme="nachtwache"] .hero-verse blockquote p { margin-inline: auto; max-width: 26ch; }
[data-theme="nachtwache"] .hero-verse figcaption { justify-content: center; }
[data-theme="nachtwache"] .hero-verse figcaption::before { display: none; }
[data-theme="nachtwache"] .hero-text { margin-inline: auto; }
[data-theme="nachtwache"] .hero .actions { justify-content: center; }

/* ======================================================================
   Design „Plakat“ – wie ein Verteilblatt: orange Fläche, schwarze Schrift,
   kräftige Linien. Greift die orangen Kategorie-Banner der alten Seite auf.
   ====================================================================== */
[data-theme="plakat"] {
  --papier: #FFFFFF; --nebel: #F4F2EF; --linie: #1D1D1C; --feld: #1D1D1C;
  --licht-hell: #FDE3CB;
  --top-bg: #1D1D1C; --top-fg: #FFFFFF;
  --hero-bg: #EB760E; --hero-fg: #1D1D1C; --hero-muted: #1D1D1C;
  --foot-bg: #1D1D1C;
  --r-s: 0; --r-m: 0; --r-l: 0; --r-btn: 0; --r-pill: 0;
}
[data-theme="plakat"] h1, [data-theme="plakat"] h2, [data-theme="plakat"] h3, [data-theme="plakat"] .shelf-name, [data-theme="plakat"] .wm-main,
[data-theme="plakat"] .bulk-facts dt, [data-theme="plakat"] .card-title { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; }
[data-theme="plakat"] .card-title { font-weight: 600; letter-spacing: -.005em; }
[data-theme="plakat"] .site-header { border-bottom: 4px solid var(--nacht); }
[data-theme="plakat"] .mainnav { border-top-color: var(--nebel); }
[data-theme="plakat"] .mainnav > ul > li > a { font-weight: 600; }
[data-theme="plakat"] .search input { background: #fff; border: 2px solid var(--nacht); }
[data-theme="plakat"] .beam::before { inset: auto -5% -1px auto; width: 34%; height: 100%; transform: none; animation: none;
  background: var(--nacht); clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%); }
[data-theme="plakat"] .beam::after { display: none; }
[data-theme="plakat"] .hero-inner { padding-left: clamp(1rem, 3vw, 2rem); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
[data-theme="plakat"] .hero-intro { font-family: var(--sans); font-weight: 600; color: var(--nacht); }
[data-theme="plakat"] .hero-verse blockquote p { font-family: var(--sans); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; font-size: calc(clamp(1.9rem, 4vw, 3.4rem) * var(--sz-verse, 1)); max-width: 20ch; }
[data-theme="plakat"] .hero-verse figcaption { color: var(--nacht); font-size: var(--t-l); }
[data-theme="plakat"] .hero-verse figcaption::before { background: var(--nacht); height: 4px; }
[data-theme="plakat"] .hero-side { background: var(--nacht); color: #fff; padding: 1.6rem 1.8rem; position: relative; }
[data-theme="plakat"] .hero-side .hero-text { color: #fff; }
[data-theme="plakat"] .hero .btn-primary { background: var(--licht); border-color: var(--licht); color: var(--auf-licht); }
[data-theme="plakat"] .btn { border-width: 2px; }
[data-theme="plakat"] .btn-quiet { border-color: var(--nacht); }
[data-theme="plakat"] .card-img, [data-theme="plakat"] .gallery-main { border: 2px solid var(--nacht); }
[data-theme="plakat"] .card a:hover .card-img { box-shadow: 6px 6px 0 var(--licht); }
[data-theme="plakat"] .card-img { transition: box-shadow .15s; }
[data-theme="plakat"] .shelf-img { border: 2px solid var(--nacht); }
[data-theme="plakat"] .section-head, [data-theme="plakat"] #sortiment > .section-title { border-bottom: 4px solid var(--nacht); padding-bottom: .5rem; }
[data-theme="plakat"] .languages { background: var(--licht); border: 0; }
[data-theme="plakat"] .languages .lang-list a { background: #fff; }
[data-theme="plakat"] .languages .lang-list a:hover { background: var(--nacht); color: #fff; }
[data-theme="plakat"] .languages .lang-list a:hover .de { color: #D6D6D0; }
[data-theme="plakat"] .bulk-facts { border-left-width: 6px; }
[data-theme="plakat"] .donate { background: var(--nacht); color: #fff; }
[data-theme="plakat"] .donate h2, [data-theme="plakat"] .donate p { color: #fff; }
[data-theme="plakat"] .donate .bank { color: var(--tinte); }
[data-theme="plakat"] .slide-copy { border: 2px solid var(--nacht); box-shadow: 8px 8px 0 var(--licht); }
@media (max-width: 860px) { [data-theme="plakat"] .hero-inner { grid-template-columns: 1fr; } [data-theme="plakat"] .beam::before { width: 45%; height: 30%; } }

/* ======================================================================
   Design „Stille“ – ruhig und zurückgenommen: Steingrau, viel Raum,
   der Bibelvers steht mittig wie eine Inschrift, ein feiner Lichtfaden darüber.
   ====================================================================== */
[data-theme="stille"] {
  --papier: #FAFAF8; --nebel: #EFEFEC; --linie: #E2E2DD; --feld: #C4C4BD;
  --top-bg: #FAFAF8; --top-fg: #6B6B64;
  --hero-bg: #EFEFEC; --hero-fg: #1D1D1C; --hero-muted: #4B4B46;
  --foot-bg: #2C2C29; --foot-fg: #C9C9C2; --foot-muted: #96968E; --foot-head: #FFFFFF;
  --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-btn: 999px;
}
[data-theme="stille"] h1, [data-theme="stille"] h2, [data-theme="stille"] h3, [data-theme="stille"] .shelf-name { font-weight: 500; }
[data-theme="stille"] .topbar { border-bottom: 1px solid var(--linie); }
[data-theme="stille"] .site-header { border-bottom-color: var(--linie); }
[data-theme="stille"] .beam::before { left: 50%; top: 0; right: auto; bottom: auto; inset: 0 auto auto 50%; width: 1px; height: clamp(2.5rem, 7vw, 5rem); transform: none;
  background: linear-gradient(transparent, var(--licht)); animation: thread 1.8s cubic-bezier(.2, .7, .2, 1) both; transform-origin: top; }
[data-theme="stille"] .beam::after { left: calc(50% - 3px); top: calc(clamp(2.5rem, 7vw, 5rem) - 3px); width: 7px; height: 7px; background: var(--licht); border-radius: 50%; animation: dawn 1s 1.4s both; }
@keyframes thread { from { transform: scaleY(0); } to { transform: none; } }
[data-theme="stille"] .hero-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-left: clamp(1rem, 3vw, 2rem); padding-top: clamp(5rem, 11vw, 8.5rem); gap: 2rem; max-width: 900px; }
[data-theme="stille"] .hero-intro { font-style: italic; }
[data-theme="stille"] .hero-verse blockquote p { font-style: italic; font-weight: 400; color: var(--hero-fg); margin-inline: auto; max-width: 28ch; }
[data-theme="stille"] .hero-verse .q { color: var(--licht); }
[data-theme="stille"] .hero-verse figcaption { justify-content: center; color: var(--licht-text); font-weight: 500; letter-spacing: .01em; }
[data-theme="stille"] .hero-verse figcaption::before { display: none; }
[data-theme="stille"] .hero-text { margin-inline: auto; font-size: var(--t-m); }
[data-theme="stille"] .hero .actions { justify-content: center; }
[data-theme="stille"] .btn-ghost-light { color: var(--nacht); border-color: var(--feld); }
[data-theme="stille"] .btn-ghost-light:hover { background: #fff; border-color: var(--nacht); }
[data-theme="stille"] .card-img, [data-theme="stille"] .gallery-main { border-color: transparent; box-shadow: 0 1px 2px rgba(29, 29, 28, .06); }
[data-theme="stille"] .card a:hover .card-img { box-shadow: 0 14px 30px -18px rgba(29, 29, 28, .35); }
[data-theme="stille"] .card-img { transition: box-shadow .3s; }
[data-theme="stille"] .shelf:not(.shelf-lead) { border-bottom-color: var(--linie); }
[data-theme="stille"] .languages { background: var(--nebel); border: 0; }
[data-theme="stille"] .lang-list { border: 0; gap: 1px; background: var(--linie); }
[data-theme="stille"] .lang-list li { border: 0; background: var(--nebel); }
[data-theme="stille"] .bulk-facts { border-left-width: 1px; }
[data-theme="stille"] .bulk-facts dt { font-weight: 500; }
[data-theme="stille"] .mainnav > ul > li > a:hover, [data-theme="stille"] .mainnav > ul > li.active > a { border-bottom-width: 2px; }

/* Logo-Varianten: dunkle oder helle Fassung je nach Untergrund */
.mark-hell { display: none; }
.site-footer .mark-dunkel { display: none; }
.site-footer .mark-hell { display: block; }
[data-theme="bibeldruck"] .site-footer .mark-dunkel { display: block; }
[data-theme="bibeldruck"] .site-footer .mark-hell { display: none; }

/* Vorschau-Hinweis für Admins */
.preview-bar { background: var(--licht); color: var(--auf-licht); font-size: var(--t-s); }
.preview-bar .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; padding-top: .55rem; padding-bottom: .55rem; }
.preview-bar a, .preview-bar .link-btn { color: var(--auf-licht); font-weight: 600; font-size: var(--t-s); }
.preview-bar form { margin: 0; }

/* ---------- Slideshow ----------
   Volle Breite, das Folienbild schwebt mit Schatten vor einer weichgezeichneten Fassung seiner selbst.
   Laufbalken statt Punkte zeigen, wann die nächste Folie kommt. */
.hero-intro { font-family: var(--serif); font-size: calc(var(--t-l) * var(--sz-verse, 1)); color: var(--hero-muted); margin: 0 0 .6rem; }
.slideshow { --slide-base: #1D1D1C; --slide-blur-op: .55; --bar: rgba(255, 255, 255, .3); --bar-fg: #FFFFFF; --slide-h: clamp(340px, 42vw, 580px);
  position: relative; background: var(--slide-base); overflow: hidden; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slides:focus-visible { outline: 3px solid var(--licht); outline-offset: -3px; }
.slide { position: relative; flex: 0 0 100%; height: var(--slide-h); scroll-snap-align: start; isolation: isolate; overflow: hidden; }
.slide-bg { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(42px) saturate(1.25); opacity: var(--slide-blur-op); z-index: -1; pointer-events: none; }
.slide::after { content: ''; position: absolute; inset: auto 0 0 0; height: 5.5rem; background: linear-gradient(transparent, rgba(0, 0, 0, var(--slide-scrim, .28))); z-index: -1; pointer-events: none; }
.slide-stage { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding-top: clamp(1.25rem, 3vw, 2.25rem); padding-bottom: 3.6rem; }
.single .slide-stage { padding-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.slide-text .slide-stage { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.slide-img { position: relative; height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-decoration: none; }
.slide-fg { display: block; flex: 0 1 auto; min-height: min(62%, 300px); max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .35)) drop-shadow(0 2px 3px rgba(0, 0, 0, .12)); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
a.slide-img:hover .slide-fg { transform: translateY(-4px); }
.slide-more { flex: none; background: var(--licht); color: var(--auf-licht); font-weight: 600; font-size: var(--t-s); padding: .65rem 1.25rem; border-radius: var(--r-btn); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
a.slide-img:hover .slide-more, a.slide-img:focus-visible .slide-more { background: var(--licht-hover); }
.slide-copy { justify-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; max-width: 28rem; padding: clamp(1.4rem, 3vw, 2.4rem); background: var(--weiss); border-radius: var(--r-l); box-shadow: 0 28px 60px -30px rgba(0, 0, 0, .55); }
.slide-copy h2 { font-size: clamp(var(--t-xl), 2.4vw, var(--t-2xl)); margin: 0; line-height: 1.2; }
.slide-copy p { color: var(--schiefer); margin: 0 0 .4rem; }
.slide-arrow { position: absolute; top: calc(50% - 1.6rem - 24px); width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--nacht); cursor: pointer; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .25s, transform .25s; z-index: 2; }
.slide-prev { left: clamp(.75rem, 2vw, 1.75rem); transform: translateX(-6px); }
.slide-next { right: clamp(.75rem, 2vw, 1.75rem); transform: translateX(6px); }
.slideshow:hover .slide-arrow, .slide-arrow:focus-visible { opacity: 1; transform: none; }
.slide-arrow:hover { background: var(--flaeche); }
.slide-nav { position: absolute; left: 0; right: 0; bottom: 1.15rem; display: flex; justify-content: center; align-items: center; gap: .9rem; z-index: 2; }
.slide-bars { display: flex; gap: .45rem; }
.slide-bars button { width: clamp(1.6rem, 4vw, 2.8rem); height: 1.5rem; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.slide-bars span { position: relative; display: block; width: 100%; height: 3px; border-radius: 2px; background: var(--bar); overflow: hidden; }
.slide-bars span::after { content: ''; position: absolute; inset: 0; width: 0; background: var(--bar-fg); border-radius: 2px; }
.slide-bars button[aria-current] span::after { width: 100%; background: var(--licht); }
.slide-bars button:hover span { background: var(--bar-fg); }
.slideshow.playing .slide-bars button[aria-current] span::after { width: 0; animation: slidefill var(--slide-ms) linear forwards; }
.slideshow.hold .slide-bars button[aria-current] span::after, .slideshow.paused .slide-bars button[aria-current] span::after { animation-play-state: paused; }
@keyframes slidefill { to { width: 100%; } }
.slide-pause { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border: 1px solid var(--bar); border-radius: 50%; background: transparent; color: var(--bar-fg); cursor: pointer; }
.slide-pause:hover { border-color: var(--bar-fg); }
.slide-pause .i-play, .slideshow.paused .slide-pause .i-pause { display: none; }
.slideshow.paused .slide-pause .i-play { display: block; }
.slideshow:not(.js-ready) .slide-pause { display: none; }
[data-theme="morgenlicht"] .slideshow { --slide-base: #FDF0E3; --slide-blur-op: .5; --bar: rgba(29, 29, 28, .18); --bar-fg: #1D1D1C; --slide-scrim: 0; }
[data-theme="bibeldruck"] .slideshow { --slide-base: #F3F3F0; --slide-blur-op: .3; --bar: rgba(29, 29, 28, .2); --bar-fg: #1D1D1C; --slide-scrim: 0; border-bottom: 1px solid var(--linie); }
[data-theme="bibeldruck"] .slide-copy { border: 1px solid var(--linie); box-shadow: none; }
@media (hover: none) { .slide-arrow { display: none; } }
@media (max-width: 860px) {
  .slideshow { --slide-h: auto; }
  .slide { height: auto; }
  .slide-stage, .slide-text .slide-stage { grid-template-columns: 1fr; gap: 1rem; padding-top: 1.25rem; padding-bottom: 3.4rem; }
  .slide-img { height: clamp(220px, 64vw, 380px); }
  .slide-copy { max-width: none; width: 100%; padding: 1.2rem 1.3rem; }
}

/* ---------- Großansicht der Produktbilder ---------- */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(17, 17, 16, .94); color: #fff; }
.lightbox::backdrop { background: rgba(17, 17, 16, .94); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox img { max-width: calc(100vw - 7rem); max-height: calc(100vh - 6rem); width: auto; height: auto; object-fit: contain; background: transparent; }
.lb-btn { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; }
.lb-btn:hover { background: rgba(255, 255, 255, .26); }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: calc(50% - 24px); }
.lb-next { right: 1rem; top: calc(50% - 24px); }
.lb-count { position: absolute; bottom: 1.1rem; left: 0; right: 0; text-align: center; font-size: var(--t-s); color: #C9C9C4; }
@media (max-width: 600px) { .lightbox img { max-width: 100vw; max-height: calc(100vh - 8rem); border-radius: 0; } .lb-prev, .lb-next { top: auto; bottom: .6rem; } .lb-count { bottom: 1.6rem; } }

/* ---------- Kundenkonto ---------- */
.account-btn { margin-left: auto; }
.account-btn + .cart-btn { margin-left: 0; }
.auth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; max-width: 980px; margin-bottom: 4rem; align-items: start; }
.auth-box h1 { font-size: var(--t-2xl); }
.auth-side { background: var(--nebel); border-color: transparent; }
.account-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.account-head form { margin: 0; }
.account-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 2rem; align-items: start; margin-bottom: 4rem; }
.order-list { list-style: none; margin: 0; padding: 0; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-l); }
.order-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; padding: .9rem 1.2rem; }
.order-list li + li { border-top: 1px solid var(--nebel); }
.order-list a { display: flex; flex-direction: column; text-decoration: none; }
.o-num { font-weight: 600; color: var(--nacht); }
.order-list a:hover .o-num { text-decoration: underline; text-decoration-color: var(--licht); }
.o-date, .o-status { font-size: var(--t-s); color: var(--schiefer); }
.o-total { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.o-inv { display: block; font-weight: 500; font-size: var(--t-s); margin-top: .15rem; }
.account-note { background: var(--licht-hell); padding: .8rem 1.1rem; border-radius: var(--r-m); margin: 0 0 1.25rem; }
[data-hidden] { display: none; }
.danger-zone summary { cursor: pointer; font-weight: 600; color: var(--schiefer); }
.danger-zone[open] summary { margin-bottom: 1rem; }
.box > h2 { font-size: var(--t-l); }
input[readonly] { background: var(--nebel) !important; color: var(--schiefer); }
@media (max-width: 860px) { .auth-grid, .account-grid { grid-template-columns: 1fr; } .order-list li { grid-template-columns: 1fr auto; } .o-status { grid-column: 1; } }

/* ---------- Newsletter ---------- */
.footer-nl { display: flex; gap: .4rem; margin: .4rem 0 0; }
.footer-nl input { flex: 1; min-width: 0; font: inherit; font-size: var(--t-s); padding: .55rem .7rem; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: inherit; border-radius: var(--r-s); }
[data-theme="bibeldruck"] .footer-nl input { border-color: var(--feld); background: #fff; }
.site-footer h2.mt { margin-top: 1.6rem; }
.nl-page { margin: 2rem 0 4rem; }

/* ---------- Responsiv ---------- */
@media (max-width: 1020px) {
  .shelves { grid-template-columns: 1fr; }
  .shelf-lead { grid-row: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .languages .wrap, .bulk, .donate-inner { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .topbar-contact { display: none; }
  .header-row { flex-wrap: wrap; gap: .5rem .4rem; padding-top: .6rem; padding-bottom: .6rem; }
  .nav-toggle { display: inline-flex; }
  .brand .mark { height: calc(42px * min(var(--sz-logo, 1), 1.15)); }
  .wm-main { font-size: calc(1.1rem * min(var(--sz-logo, 1), 1.1)); }
  .wm-sub { font-size: var(--t-xs); }
  .search { order: 5; flex-basis: 100%; max-width: none; }
  .cart-btn { margin-left: 0; padding: .5rem; }
  .account-btn { margin-left: auto; }
  .cart-label { display: none; }
  .mainnav { display: none; border-top: 1px solid var(--linie); max-height: calc(100vh - 140px); overflow-y: auto; }
  .mainnav.open { display: block; }
  .mainnav > ul { flex-direction: column; gap: 0; padding-top: .5rem; padding-bottom: 1rem; }
  .mainnav li { flex-wrap: wrap; }
  .mainnav > ul > li > a { flex: 1; padding: .8rem 0; border-bottom: 0; font-size: calc(var(--t-m) * var(--sz-nav, 1)); }
  .mainnav .nav-extra { margin-left: 0; }
  .sub-toggle { margin: 0; padding: .8rem; }
  .sub { position: static; display: none; box-shadow: none; border: 0; border-left: 2px solid var(--licht); border-radius: 0; flex-basis: 100%; margin: 0 0 .5rem .2rem; padding: 0 0 0 .5rem; }
  .has-sub:hover > .sub, .has-sub:focus-within > .sub { display: none; }
  .has-sub.open > .sub { display: block; }
  .hero-inner { grid-template-columns: 1fr; padding-left: clamp(1rem, 3vw, 2rem); padding-top: 4.5rem; }
  .beam::before { transform-origin: 0 12%; background: conic-gradient(from 95deg at 0% 12%, transparent 0deg, rgba(235, 118, 14, .26) 8deg, rgba(235, 118, 14, .09) 22deg, transparent 32deg, transparent 360deg); }
  .beam::after { left: -140px; top: calc(12% - 140px); }
  .product, .cart-layout, .checkout, .contact-grid { grid-template-columns: 1fr; }
  .gallery, .summary-sticky { position: static; }
  .line { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: 'img info info' 'img qty total' 'img rm rm'; gap: .5rem .9rem; }
  .line-img { grid-area: img; width: 64px; height: 64px; }
  .line-img img { max-height: 54px; }
  .line-info { grid-area: info; } .line .qty { grid-area: qty; justify-self: start; } .line-total { grid-area: total; } .line .link-btn { grid-area: rm; justify-self: start; }
}
@media (max-width: 560px) {
  html { font-size: 100%; }
  .shelf-lead .shelf-img { height: 220px; }
  .shelf:not(.shelf-lead) { grid-template-columns: 96px minmax(0, 1fr); gap: 0 1rem; }
  .shelf:not(.shelf-lead) .shelf-subs { display: none; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .9rem; }
  .row, .row-zip { grid-template-columns: 1fr; }
  .row-zip { grid-template-columns: 6.5rem 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .list-bar { flex-direction: column; align-items: flex-start; }
  .bank div { grid-template-columns: 1fr; gap: 0; }
  .lang-list { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Transparente Bilder (PNG/WebP mit Alphakanal): kein weißer Kasten dahinter ---------- */
.card-img.has-alpha, .gallery-main.has-alpha, .line-img.has-alpha, .thumbs button.has-alpha { background: transparent; border-color: transparent; box-shadow: none; }
.card-img.has-alpha img, .gallery-main.has-alpha img { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .16)) drop-shadow(0 1px 2px rgba(0, 0, 0, .1)); }
.thumbs button.has-alpha { background: var(--nebel); }
.thumbs button.has-alpha[aria-current="true"] { border-color: var(--nacht); }
.shelf-img.has-alpha { background: transparent; }
.shelf-img.has-alpha .shelf-bg { display: none; }
.shelf-img.has-alpha .shelf-fg { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .16)); }
[data-theme] .card-img.has-alpha, [data-theme] .gallery-main.has-alpha, [data-theme] .shelf-img.has-alpha { background: transparent; border-color: transparent; }

/* ---------- Leseprobe: Knopf auf der Produktseite ---------- */
.reader-open { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; padding: .85rem 1.1rem; border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--flaeche); color: var(--tinte); text-decoration: none; transition: border-color .15s, background .15s; }
.reader-open:hover { border-color: var(--licht); background: var(--licht-hell); color: var(--nacht); }
.reader-icon { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--licht-hell); color: var(--licht-text); }
.reader-open:hover .reader-icon { background: var(--licht); color: var(--auf-licht); }
.reader-text { display: flex; flex-direction: column; line-height: 1.3; }
.reader-text strong { font-family: var(--serif); font-size: var(--t-l); font-weight: 600; color: var(--nacht); }
.reader-text span { font-size: var(--t-s); color: var(--schiefer); }
.reader-open.is-loading { cursor: progress; opacity: .7; }

/* ---------- Leseprobe: das aufgeschlagene Buch ---------- */
html.reader-open-now { overflow: hidden; }
.reader { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #262421; color: #EDEBE6; }
.reader::backdrop { background: #262421; }
.reader[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.rd-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: .7rem 1rem .7rem 1.4rem; }
.rd-title { margin: 0; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.rd-title strong { font-family: var(--serif); font-weight: 600; font-size: var(--t-l); }
.rd-title span { font-size: var(--t-s); color: #A9A69E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-count { margin: 0; font-size: var(--t-s); color: #CFCCC4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-btn { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; }
.rd-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .2); }
.rd-btn:disabled { opacity: .25; cursor: default; }
.rd-btn:focus-visible { outline: 3px solid var(--licht); outline-offset: 2px; }
.rd-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; touch-action: pan-y; }
.rd-nav { position: absolute; top: calc(50% - 24px); z-index: 3; }
.rd-prev { left: 1rem; } .rd-next { right: 1rem; }
.rd-status { position: absolute; inset: auto 0 45%; text-align: center; color: #CFCCC4; margin: 0; }
.rd-status a { color: #F6B26B; }
.rd-book { --pw: 300px; --ph: 420px; --shift: 0; position: relative; display: flex; height: var(--ph); perspective: 2600px; transform: translateX(calc(var(--shift) * var(--pw))); transition: transform .6s cubic-bezier(.45, .08, .3, 1); }
.rd-side { position: relative; width: var(--pw); height: var(--ph); cursor: pointer; }
.rd-book:not(.two-up) .rd-left { display: none; }
.rd-page { position: absolute; inset: 0; background: #FFFFFF; overflow: hidden; display: grid; place-items: center; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .06); }
.rd-page img { width: 100%; height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
.rd-page.loading::before { content: ''; width: 28px; height: 28px; border-radius: 50%; border: 3px solid #E4E2DC; border-top-color: var(--licht); animation: rd-spin .9s linear infinite; }
@keyframes rd-spin { to { transform: rotate(1turn); } }
/* Bundsteg: leichte Schatten zur Buchmitte hin */
.two-up .rd-left .rd-page::after, .two-up .rd-right .rd-page::after { content: ''; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; }
.two-up .rd-left .rd-page::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .16), transparent); }
.two-up .rd-right .rd-page::after { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .16), transparent); }
.rd-end { background: #FBFAF7; text-align: center; padding: 2rem; color: #1D1D1C; }
.rd-end-title { font-family: var(--serif); font-size: var(--t-xl); font-weight: 600; margin-bottom: .5rem; }
.rd-end-btn { margin-top: .75rem; font: inherit; font-weight: 600; padding: .7rem 1.2rem; border-radius: var(--r-btn); border: 0; background: var(--licht); color: var(--auf-licht); cursor: pointer; }
/* Das umschlagende Blatt */
.rd-leaf { position: absolute; top: 0; width: var(--pw); height: var(--ph); transform-style: preserve-3d; z-index: 2; pointer-events: none; }
.rd-leaf.on-right { left: var(--pw); transform-origin: left center; }
.two-up .rd-leaf.on-left { left: 0; transform-origin: right center; }
.rd-book:not(.two-up) .rd-leaf.on-right { left: 0; }
.rd-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rd-back { transform: rotateY(180deg); }
.rd-face.blank { background: #F4F2EC; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.rd-face::after { content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 1; }
.on-right .rd-front::after { background: linear-gradient(to left, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 55%); }
.on-right .rd-back::after, .on-left .rd-front::after { background: linear-gradient(to right, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 55%); }
.on-left .rd-back::after { background: linear-gradient(to left, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 55%); }
.rd-foot { padding: .4rem 1.4rem 1rem; display: flex; justify-content: center; }
.rd-scrub { width: min(560px, 100%); }
.rd-scrub input { width: 100%; accent-color: var(--licht); }
@media (max-width: 640px) { .rd-nav { top: auto; bottom: -3.4rem; } .rd-head { padding-left: 1rem; grid-template-columns: minmax(0, 1fr) auto; } .rd-count { grid-row: 2; grid-column: 1 / -1; } .rd-foot { padding-left: 4.5rem; padding-right: 4.5rem; } .rd-stage { margin-bottom: .2rem; } }
@media (prefers-reduced-motion: reduce) { .rd-book { transition: none; } }

/* ---------- Hörprobe ---------- */
.listen { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); }
.listen-title { font-size: var(--t-l); margin-bottom: .75rem; }
.player { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: center; padding: .8rem 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--r-m); }
.pl-play { width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--licht); color: var(--auf-licht); cursor: pointer; transition: transform .15s, background .15s; }
.pl-play:hover { background: var(--licht-hover); }
.pl-play:active { transform: scale(.95); }
.pl-main { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.pl-now { font-weight: 600; color: var(--nacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-bar { display: flex; align-items: center; gap: .75rem; }
.pl-bar input { --p: 0%; flex: 1; min-width: 0; height: 22px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.pl-bar input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--licht) var(--p), var(--linie) var(--p)); }
.pl-bar input::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--licht) var(--p), var(--linie) var(--p)); }
.pl-bar input::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--nacht); border: 0; }
.pl-bar input::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--nacht); border: 0; }
.pl-time { font-size: var(--t-xs); color: var(--schiefer); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tracks { list-style: none; margin: .5rem 0 0; padding: 0; max-height: 19rem; overflow-y: auto; }
.tracks li { border-bottom: 1px solid var(--nebel); }
.tracks li:last-child { border-bottom: 0; }
.tracks li audio { width: 100%; margin: .25rem 0 .6rem; }
.tracks li > .t-title { display: block; padding-top: .5rem; font-weight: 500; }
.t-btn { width: 100%; display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding: .6rem .4rem; border: 0; background: none; font: inherit; font-size: var(--t-s); color: var(--tinte); text-align: left; cursor: pointer; border-radius: var(--r-s); }
.t-btn:hover { background: var(--nebel); }
.t-btn[aria-current="true"] { font-weight: 600; color: var(--nacht); }
.t-num { color: var(--schiefer); font-variant-numeric: tabular-nums; text-align: right; }
.t-btn.playing .t-num { color: var(--licht-text); }
.t-dur { color: var(--schiefer); font-variant-numeric: tabular-nums; font-size: var(--t-xs); }

.contact-noform { grid-template-columns: minmax(0, 1fr); }

/* ---------- Handy: Feinschliff (nach allen anderen Regeln, damit sie greifen) ---------- */
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
@media (max-width: 860px) {
  /* iPhone zoomt bei Schrift unter 16 px ins Feld – deshalb mindestens 16 px */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select, textarea { font-size: max(16px, 1rem) !important; }
  .header-row { flex-wrap: wrap; }
  .brand { flex: 0 1 auto; min-width: 0; }
  .wordmark { min-width: 0; }
  .wm-main, .wm-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .nav-toggle, .account-btn, .cart-btn { flex: none; min-width: 44px; min-height: 44px; justify-content: center; }
  /* Tippflächen mindestens rund 40 px hoch */
  .crumbs a { display: inline-block; padding: .55rem 0; }
  .crumbs ol { margin-top: .6rem; margin-bottom: .4rem; align-items: center; }
  .site-footer .plain { gap: 0; }
  .site-footer .plain a { display: inline-block; padding: .5rem 0; }
  .shelf-subs a { display: inline-block; padding: .45rem 0; }
  .link-btn { min-height: 44px; padding: .5rem .25rem; }
  .slide-bars button { height: 44px; width: 2.6rem; }
  .slide-pause { width: 44px; height: 44px; }
  .slide-controls, .slide-nav { min-height: 44px; }
  .pl-bar input { height: 36px; }
  .t-btn { padding-top: .8rem; padding-bottom: .8rem; }
  .thumbs button { width: 64px; height: 64px; }
}
@media (max-width: 430px) {
  .header-row { gap: .4rem .25rem; }
  .brand { gap: .4rem; }
  .brand .mark { height: 36px; }
  .wm-main { font-size: 1rem; }
  .wm-sub { font-size: .7rem; margin-top: .2rem; }
  .account-btn, .cart-btn, .nav-toggle { padding: .35rem; }
  .add-row .qty { flex: none; }
  .add-row .qty input { width: 2.6rem; }
}
@media (max-width: 360px) { .wm-sub { display: none; } }
.footer-grid > *, .footer-nl > * { min-width: 0; }
@media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } .footer-nl { flex-wrap: wrap; } .footer-nl input { flex: 1 1 12rem; } }
/* Handy-Kopf als festes Raster: Menü · Logo · Konto · Warenkorb, darunter die Suche */
@media (max-width: 860px) {
  .header-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; column-gap: .25rem; row-gap: .5rem; }
  .header-row .search { grid-column: 1 / -1; order: 0; }
  .header-row .brand { justify-self: start; max-width: 100%; }
  .header-row .account-btn { margin-left: 0; }
}
@media (max-width: 860px) {
  .header-row .nav-toggle { grid-row: 1; grid-column: 1; }
  .header-row .brand { grid-row: 1; grid-column: 2; }
  .header-row .account-btn { grid-row: 1; grid-column: 3; }
  .header-row .cart-btn:not(.account-btn) { grid-row: 1; grid-column: 4; }
  .header-row .search { grid-row: 2; }
}
@media (max-width: 860px) {
  .header-row .cart-btn:not(.account-btn) .badge { position: absolute; top: 0; right: -2px; min-width: 1.15rem; height: 1.15rem; font-size: .66rem; padding: 0 .25rem; box-shadow: 0 0 0 2px var(--weiss); }
  .nav-toggle, .account-btn, .cart-btn { min-width: 40px; min-height: 44px; }
}
@media (max-width: 430px) {
  .wm-main { font-size: clamp(.85rem, 3.9vw, 1.1rem); }
  .header-row { column-gap: .15rem; }
}
@media (max-width: 340px) { .brand .mark { height: 30px; } .brand { gap: .3rem; } .wm-main { font-size: .8rem; } }
/* Leseprobe im Querformat am Handy: Kopf und Fuß flach halten, damit die Seiten groß bleiben */
@media (max-height: 500px) {
  .rd-head { padding: .25rem .6rem .25rem 1rem; }
  .rd-title strong { font-size: var(--t-m); }
  .rd-title span { display: none; }
  .rd-btn { width: 40px; height: 40px; }
  .rd-nav { top: calc(50% - 20px); bottom: auto; }
  .rd-prev { left: .4rem; } .rd-next { right: .4rem; }
  .rd-foot { padding: .15rem 1rem .35rem; }
}
/* Länderauswahl in Warenkorb und Kasse */
.field select, .ship-country select { width: 100%; padding: .75rem 2.4rem .75rem .85rem; border: 1px solid var(--feld); border-radius: var(--r-s); background: var(--flaeche) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235E5E58' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .9rem center; -webkit-appearance: none; appearance: none; color: var(--tinte); font: inherit; cursor: pointer; }
.field select:focus, .ship-country select:focus { outline: none; border-color: var(--nacht-2); box-shadow: 0 0 0 3px var(--focus-ring); }
.ship-country { display: grid; gap: .35rem; margin: 0 0 1rem; }
.ship-country label { font-size: var(--t-s); font-weight: 600; }
.ship-country select { padding-top: .6rem; padding-bottom: .6rem; }
/* Produktbilder einheitlich: kein Kasten mehr, Fotos und Freisteller stehen frei auf der Seite.
   Der Schatten folgt dem sichtbaren Bild (drop-shadow), nicht dem quadratischen Platz. */
[data-theme] .card-img, [data-theme] .gallery-main { background: transparent; border-color: transparent; box-shadow: none; }
.card-img img { top: 5%; left: 5%; width: 90%; height: 90%; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .14)) drop-shadow(0 10px 16px rgba(0, 0, 0, .13)); transition: transform .3s ease, filter .3s ease; }
.gallery-main img { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .12)) drop-shadow(0 18px 30px rgba(0, 0, 0, .16)); }
.card a:hover .card-img img { transform: translateY(-3px); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .14)) drop-shadow(0 16px 22px rgba(0, 0, 0, .18)); }
[data-theme="nachtwache"] .card-img img, [data-theme="nachtwache"] .gallery-main img { filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .55)); }
[data-theme="plakat"] .card-img img { filter: drop-shadow(4px 4px 0 var(--nacht)); }
[data-theme="plakat"] .card a:hover .card-img { box-shadow: none; }
[data-theme="plakat"] .card a:hover .card-img img { transform: translate(-2px, -2px); filter: drop-shadow(6px 6px 0 var(--licht)); }
[data-theme="stille"] .card a:hover .card-img { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .card a:hover .card-img img { transform: none; } }

/* Bilder aus dem Text-Editor */
.prose img { max-width: 100%; height: auto; border-radius: var(--r-s, 6px); display: block; margin: 1.2em 0; }
.prose img.img-klein { width: 33%; min-width: 140px; } .prose img.img-mittel { width: 60%; } .prose img.img-voll { width: 100%; }
.prose img.img-links { float: left; margin: .25em 1.4em .8em 0; } .prose img.img-rechts { float: right; margin: .25em 0 .8em 1.4em; }
.prose::after { content: ''; display: block; clear: both; }
@media (max-width: 640px) { .prose img.img-links, .prose img.img-rechts { float: none; margin: 1em 0; } .prose img.img-klein { width: 50%; } .prose img.img-mittel { width: 100%; } }

/* ---------- Slideshow: Ansichten und Größen (Verwaltung → Slideshow) ---------- */
.ss-h-klein { --slide-h: clamp(240px, 28vw, 380px); }
.ss-h-gross { --slide-h: clamp(420px, 56vw, 780px); }
.ss-h-bildschirm { --slide-h: max(420px, calc(100svh - 150px)); }
.ss-w-inhalt { max-width: calc(var(--wrap) - 2 * clamp(1rem, 3vw, 2rem)); margin: clamp(.75rem, 2vw, 1.5rem) auto 0; border-radius: var(--r-l, 14px); width: calc(100% - 2 * clamp(1rem, 3vw, 2rem)); }
.ss-bg-dunkel { --slide-base: #1D1D1C; }
.ss-bg-hell { --slide-base: #F1F0EC; --bar: rgba(29, 29, 28, .2); --bar-fg: #1D1D1C; --slide-scrim: 0; }
.ss-bg-dunkel .slide-bg, .ss-bg-hell .slide-bg, .ss-bg-farbe .slide-bg, .slide.own-bg .slide-bg { display: none; }
.slide.own-bg { background: var(--own-bg); }
.ss-tone-light { --bar: rgba(29, 29, 28, .2); --bar-fg: #1D1D1C; --slide-scrim: 0; }
/* Text links oder unten */
.slide-text.tp-links .slide-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.slide-text.tp-links .slide-copy { order: -1; justify-self: end; }
.slide-text.tp-unten .slide-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 1rem; }
.slide-text.tp-unten .slide-copy { justify-self: center; align-items: center; text-align: center; max-width: 40rem; }
/* Text ohne Karte */
.ss-t-frei .slide-copy { background: transparent; box-shadow: none; border: 0; padding: 0; color: #fff; }
.ss-t-frei .slide-copy h2 { color: inherit; font-size: clamp(var(--t-xl), 3.2vw, var(--t-3xl)); }
.ss-t-frei .slide-copy p { color: inherit; opacity: .88; font-size: var(--t-l); }
.ss-t-frei.ss-tone-light .slide-copy, .ss-t-frei .slide.tone-light .slide-copy { color: var(--nacht); }
.ss-t-frei .slide.tone-dark .slide-copy { color: #fff; }
/* Bild füllt die Fläche */
.slide.fit-fuellen .slide-img { position: absolute; inset: 0; height: auto; z-index: -1; }
.slide.fit-fuellen .slide-fg { width: 100%; height: 100%; max-height: none; min-height: 0; object-fit: cover; filter: none; transform: none !important; }
.slide.fit-fuellen .slide-stage { grid-template-columns: minmax(0, 1fr); }
.slide.fit-fuellen.slide-text .slide-copy { justify-self: end; }
.slide.fit-fuellen.slide-text.tp-links .slide-copy { justify-self: start; order: 0; }
.slide.fit-fuellen.slide-text.tp-unten .slide-copy { align-self: end; }
.slide.fit-fuellen a.slide-img .slide-more { position: absolute; bottom: 3.6rem; left: 50%; transform: translateX(-50%); }
.slide.fit-fuellen:not(.slide-text) .slide-stage { pointer-events: none; }
.slide.fit-fuellen:not(.slide-text) .slide-img { pointer-events: auto; z-index: 0; }
/* Ansicht „Großes Bild“: Bild als Fläche, Text darüber */
.ss-l-vollbild .slide::after { height: 60%; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.ss-l-vollbild .slide-text .slide-stage { grid-template-columns: minmax(0, 1fr); align-items: end; }
.ss-l-vollbild .slide-text .slide-img { position: absolute; inset: 0; height: auto; z-index: -1; }
.ss-l-vollbild .slide-text:not(.fit-fuellen) .slide-img { padding: 1.5rem 0 5rem; }
.ss-l-vollbild .slide-text .slide-copy { justify-self: start; order: 0; }
.ss-l-vollbild .slide-text.tp-rechts .slide-copy { justify-self: end; }
.ss-l-vollbild .slide-text.tp-unten .slide-copy { justify-self: center; }
.ss-l-vollbild.ss-t-frei .slide-copy { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
/* Ansicht „Bild und Text nebeneinander“ */
.ss-l-geteilt .slide-bg { display: none; }
.ss-l-geteilt .slide::after { display: none; }
.ss-l-geteilt .slide-text { background: var(--flaeche, #fff); }
.ss-l-geteilt .slide-text .slide-stage { max-width: none; padding: 0; gap: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ss-l-geteilt .slide-text .slide-img { position: relative; inset: auto; z-index: 0; height: 100%; background: var(--slide-base); padding: clamp(1rem, 3vw, 2.5rem); }
.ss-l-geteilt .slide-text.own-bg .slide-img { background: var(--own-bg); }
.ss-l-geteilt .slide-text.fit-fuellen .slide-img { padding: 0; }
.ss-l-geteilt .slide-text .slide-copy { justify-self: stretch; align-self: center; max-width: 34rem; margin: 0 auto; background: transparent; box-shadow: none; border: 0; padding: clamp(1.5rem, 4vw, 3.5rem); color: var(--tinte); text-shadow: none; }
.ss-l-geteilt .slide-text .slide-copy h2 { font-size: clamp(var(--t-xl), 3vw, var(--t-3xl)); color: var(--nacht); }
.ss-l-geteilt .slide-text.tp-links .slide-copy { order: -1; }
.ss-l-geteilt .slide-text.tp-unten .slide-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.ss-l-geteilt .slide-text.tp-unten .slide-copy { max-width: 44rem; padding: 1.2rem 1.5rem 3.6rem; text-align: center; align-items: center; }
.ss-l-geteilt .slide-text .slide-copy, .ss-l-geteilt .slide-text .slide-copy h2 { color: var(--nacht); }
.ss-l-geteilt .slide:not(.slide-text) .slide-img { padding-bottom: 0; }
/* Ansicht „Mehrere nebeneinander“: Karten */
.ss-l-reihe { --slide-h: auto; background: var(--slide-base); padding: clamp(1rem, 2.5vw, 2rem) 0 3.4rem; }
.ss-l-reihe .slides { gap: 1rem; padding: 0 clamp(1rem, 3vw, 2rem); scroll-padding-inline: clamp(1rem, 3vw, 2rem); }
.ss-l-reihe .slide { flex: 0 0 calc((100% - (var(--per-view) - 1) * 1rem) / var(--per-view)); height: auto; background: var(--flaeche, #fff); border-radius: var(--r-l, 14px); overflow: hidden; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .45); }
.ss-l-reihe.single .slide { flex-basis: min(100%, 26rem); margin: 0 auto; }
.ss-l-reihe .slide-bg, .ss-l-reihe .slide::after { display: none; }
.ss-l-reihe .slide-stage, .ss-l-reihe .slide-text .slide-stage { display: flex; flex-direction: column; height: 100%; padding: 0; gap: 0; max-width: none; }
.ss-l-reihe .slide-img, .ss-l-reihe .slide.fit-fuellen .slide-img { position: relative; inset: auto; z-index: 0; height: auto; aspect-ratio: 4 / 3; padding: 1rem; background: var(--bild-grund, #F4F3EF); }
.ss-l-reihe .slide.own-bg .slide-img { background: var(--own-bg); }
.ss-l-reihe .slide.fit-fuellen .slide-img { padding: 0; }
.ss-l-reihe .slide-fg { min-height: 0; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .22)); }
.ss-l-reihe .slide-copy, .ss-l-reihe .slide-text.tp-links .slide-copy { order: 0; justify-self: stretch; max-width: none; width: 100%; flex: 1; background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 1rem 1.1rem 1.2rem; color: var(--tinte); text-shadow: none; text-align: left; align-items: flex-start; }
.ss-l-reihe .slide-copy h2 { font-size: var(--t-l); color: var(--nacht); }
.ss-l-reihe .slide-copy p { color: var(--schiefer); font-size: var(--t-s); opacity: 1; }
.ss-l-reihe .slide-copy .btn { margin-top: auto; }
.ss-l-reihe .slide-more { position: static; transform: none; }
.ss-l-reihe .slide-arrow { top: calc(50% - 1.7rem - 24px); }
.ss-l-reihe .slide-nav { bottom: .9rem; }
/* Überblenden statt Schieben */
.ss-fx-blenden .slides { display: grid; overflow: hidden; scroll-snap-type: none; }
.ss-fx-blenden .slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.ss-fx-blenden .slide.is-on { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .ss-fx-blenden .slide, .ss-fx-blenden .slide.is-on { transition: none; } }
/* Bedienelemente ausblenden */
.no-arrows .slide-arrow { display: none; }
.no-bars .slide-bars { display: none; }
.no-bars .slide-stage { padding-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.no-bars.ss-l-reihe { padding-bottom: clamp(1rem, 2.5vw, 2rem); }
/* Dunkles Grunddesign */
[data-theme="nachtwache"] .ss-l-geteilt .slide-text .slide-copy, [data-theme="nachtwache"] .ss-l-geteilt .slide-text .slide-copy h2,
[data-theme="nachtwache"] .ss-l-reihe .slide-copy h2 { color: var(--nacht); }

@media (max-width: 860px) {
  .ss-h-klein, .ss-h-mittel, .ss-h-gross, .ss-h-bildschirm { --slide-h: auto; }
  .ss-w-inhalt { width: calc(100% - 2rem); }
  .slide-text.tp-links .slide-stage, .slide-text.tp-unten .slide-stage { grid-template-columns: 1fr; grid-template-rows: none; }
  .slide-text.tp-links .slide-copy { order: 0; }
  .slide.fit-fuellen { height: clamp(300px, 80vw, 480px); }
  .slide.fit-fuellen .slide-stage { padding-bottom: 3.4rem; align-items: end; }
  .slide.fit-fuellen.slide-text .slide-copy { justify-self: stretch; }
  .ss-l-vollbild .slide { height: clamp(340px, 100vw, 540px); }
  .ss-l-vollbild .slide-text .slide-img { height: auto; }
  .ss-l-vollbild .slide-text .slide-copy { justify-self: stretch; }
  .ss-l-geteilt .slide-text .slide-stage, .ss-l-geteilt .slide-text.tp-unten .slide-stage { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .ss-l-geteilt .slide-text .slide-img { height: clamp(220px, 64vw, 380px); }
  .ss-l-geteilt .slide-text .slide-copy { padding: 1.2rem 1.3rem 3.6rem; max-width: none; }
  .ss-l-geteilt .slide-text.tp-links .slide-copy { order: 0; }
  .ss-l-reihe .slide { flex-basis: min(82%, 22rem); }
  .ss-l-reihe .slide-stage { height: auto; }
}
@media (min-width: 861px) and (max-width: 1100px) { .ss-l-reihe .slide { flex-basis: calc((100% - 1rem) / min(2, var(--per-view))); } }
.ss-l-reihe .slide:not(.slide-text) .slide-img { flex: 1; aspect-ratio: auto; min-height: 15rem; }
.ss-l-geteilt { --bar: rgba(29, 29, 28, .2); --bar-fg: #1D1D1C; }
@media (min-width: 861px) { .ss-l-geteilt .slide-nav { left: 50%; } }
@media (max-width: 860px) {
  /* Großes Bild auf dem Handy: Text unter das Bild, damit er nicht über Schrift im Bild liegt */
  .ss-l-vollbild .slide.slide-text { height: auto; }
  .ss-l-vollbild .slide-text .slide-stage { display: block; padding: 0 0 3.4rem; max-width: none; }
  .ss-l-vollbild .slide-text .slide-img { position: relative; inset: auto; z-index: 0; height: clamp(240px, 70vw, 420px); padding: 0; }
  .ss-l-vollbild .slide-text:not(.fit-fuellen) .slide-img { padding: 1rem 0; }
  .ss-l-vollbild .slide-text .slide-copy { margin: 0; padding: 1.1rem clamp(1rem, 3vw, 2rem) 0; text-shadow: none; }
  .ss-l-vollbild .slide-text::after { display: none; }
}
.ss-l-geteilt .slide-text .slide-img { overflow: hidden; }

/* Bilder mit festem (meist weißem) Hintergrund, die noch nicht freigestellt sind:
   kein Schatten um das Rechteck, und Weiß verschmilzt mit dem hellen Untergrund */
.card-img:not(.has-alpha) img, .gallery-main:not(.has-alpha) img, .line-img:not(.has-alpha) img, .thumbs button:not(.has-alpha) img { filter: none; mix-blend-mode: multiply; }
.card a:hover .card-img:not(.has-alpha) img { filter: none; }
[data-theme="nachtwache"] .card-img:not(.has-alpha) img, [data-theme="nachtwache"] .gallery-main:not(.has-alpha) img,
[data-theme="nachtwache"] .line-img:not(.has-alpha) img, [data-theme="nachtwache"] .thumbs button:not(.has-alpha) img { mix-blend-mode: normal; }
/* Die Bildergalerie klebt beim Scrollen (eigene Ebene) – damit das Verschmelzen wirkt, braucht sie einen eigenen Untergrund */
.gallery-main:not(.has-alpha) { background-color: var(--papier); }