/* ========================
   0. Fonts (self-hosted)
======================== */
/* Barlow Condensed — Headlines (statische Schnitte) */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed-700.woff2') format('woff2');
}

/* IBM Plex Sans — Fließtext (Variable Font, wght-Achse 100–700) */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-sans-var.woff2') format('woff2');
}

/* IBM Plex Mono — Mikro-Labels, Zahlen (statische Schnitte) */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-600.woff2') format('woff2');
}

/* ========================
   1. Variables
======================== */
:root {
  /* Farb-Tokens — alle über /ui.php editierbar (Quelle: colors.json) */
  --ink:            #0E1013;   /* Grundfläche — Seite, Header, Footer */
  --panel:          #171A1F;   /* Abgesetzte Fläche — Inputs, Boxen, Dropdown */
  --line:           #2A2F37;   /* Haarlinie — alle Trenner und Rahmen */
  --chalk:          #E8E6E1;   /* Text hell — Fließtext, Headlines */
  --muted:          #868D96;   /* Text gedämpft — Labels, Feinschrift */
  --signal:         #FF5C1A;   /* Signalorange — einzige Buntfarbe */
  --signal-ink:     #0E1013;   /* Text auf Signalflächen */
  --white:          #FFFFFF;   /* Reinweiß — Hover auf Signalorange */
  --red:            #FF4438;   /* Fehler, Pflichtfeld */
  --photo-tile:     #E8E6E1;   /* Lichttisch-Kachel hinter Artikelfotos */
  --shadow-soft:    rgba(0,0,0,0.45);   /* Such-Dropdown */
  --shadow-medium:  rgba(0,0,0,0.60);   /* Hover-Vorschau */
  --overlay-modal:  rgba(0,0,0,0.85);   /* Upload-Modal */

  --font-heading:  'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:     'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-code:     'IBM Plex Mono', ui-monospace, monospace;

  /* Native Formularelemente (Checkbox, Date-Picker, Select, Scrollbar)
     im Dunkelmodus rendern lassen — sonst leuchten sie weiss. */
  color-scheme: dark;

  --radius:        2px;
  /* Lichttisch-Kacheln der Produktfotos — leicht gerundet, nicht weich.
     …-sm für die kleinen Thumbs, damit die Rundung proportional bleibt. */
  --radius-photo:    6px;
  --radius-photo-sm: 4px;
  --max-width:     1400px;
  /* Zentrale Textspalte — alle Inhaltssektionen teilen diese Breite und
     sind mittig gesetzt. */
  --content-width: 900px;
  --gutter:        clamp(20px, 4vw, 56px);
  --gutter-mobile: clamp(16px, 6vw, 40px);
}

/* ========================
   2. Reset & Base
======================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--chalk);
  background: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.18em;
  transition: color 0.15s, text-decoration-color 0.15s;
}

a:hover {
  color: var(--signal);
  text-decoration-color: var(--signal);
  opacity: 1;
}

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

::selection {
  background: var(--signal);
  color: var(--signal-ink);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ========================
   3. Typography
======================== */
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: 0.005em;
}

h2 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  line-height: 0.98;
  margin-bottom: 0.6em;
}

/* <em> hebt ein Wort in Signalfarbe hervor — nicht kursiv */
h1 em, h2 em, h3 em {
  font-style: normal;
  color: var(--signal);
}

h4 {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2em;
  margin-bottom: 0.4em;
}

h4:first-child {
  margin-top: 0;
}

.equip-category h4 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

p {
  margin-bottom: 1em;
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: 600;
}

.text-large {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.6;
  color: var(--chalk);
}

.text-center {
  text-align: center;
}

/* ── Gestaltungs-Primitive ──────────────────────────────────────────────
   Global (nicht gescoped), damit Hero, Rundum-Schutz-Block und weitere
   Sektionen dieselbe Bildsprache teilen. */

/* Mono-Eyebrow mit vorangestelltem Signal-Quadrat */
.fx-eyebrow {
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fx-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--signal);
  flex: none;
}

/* Versal-Headline, eng gesetzt; <em> hebt in Signal hervor */
.fx-head {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.375rem, 8cqi, 5.125rem);
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0 0 18px;
  max-width: 15ch;
}

.fx-head em {
  font-style: normal;
  color: var(--signal);
}

/* Bodenabstand orientiert sich am Abstand zwischen den Segmenten
   "Versichert" / "Nicht versichert" (.fx-cols gap + Listen-Bodenabstand). */
.fx-lede {
  font-size: clamp(1rem, 1.6cqi, 1.1875rem);
  color: var(--chalk);
  margin: 0 0 clamp(36px, 5cqi, 52px);
}

.fx-lede strong {
  font-weight: 600;
}

/* Mono-Mikrolabel über Blöcken */
.fx-blockhead {
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 12px;
}

/* Feinschrift-Fußnote */
.fx-foot {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted);
}

/* Textlink-CTA in Mono */
.fx-cta {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-code);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.18s ease;
}

.fx-cta:hover,
.fx-cta:focus-visible {
  border-bottom-color: var(--signal);
  color: var(--signal);
}

/* ========================
   4. Hero — typografischer Claim
======================== */
#hero {
  padding: calc(var(--gutter) * 1.8) var(--gutter) calc(var(--gutter) * 1.4);
  container-type: inline-size;
}

#hero .container {
  max-width: var(--content-width);
  margin: 0 auto;
}

.hero-claim {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.75rem, 9cqi, 6rem);
  line-height: 0.9;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  margin: 0 0 22px;
  max-width: 22ch;
}

.hero-claim em {
  font-style: normal;
  color: var(--signal);
}

.hero-lede {
  font-size: clamp(1rem, 1.7cqi, 1.25rem);
  line-height: 1.5;
  color: var(--chalk);
  max-width: 46ch;
  margin: 0 0 32px;
}

/* ========================
   5. Rundum-Schutz (Startseiten-Sektion)
======================== */
#schutz .container {
  max-width: var(--content-width);
  margin: 0 auto;
}

.fx6-schutz {
  container-type: inline-size;
}

.fx6-schutz p {
  margin: 0 0 14px;
}

.fx6-schutz p:last-child {
  margin-bottom: 0;
}

/* Muss nach .fx6-schutz p stehen und dieselbe Spezifität haben — sonst
   gewinnt der 14px-Absatzabstand und die Lede klebt an "VERSICHERT".
   Zielwert = Abstand zwischen den Segmenten "Versichert"/"Nicht versichert". */
.fx6-schutz .fx-lede {
  margin: 0 0 clamp(36px, 5.2cqi, 56px);
}

/* Signature: Selbstbehalt-Skala */
/* Nur oben eine Linie — die untere Trennung liefert der border-top von
   .fx-blocks, sonst laufen zwei Linien dicht nebeneinander. */
.fx-scale {
  border-top: 1px solid var(--line);
  padding: 22px 0 0;
  margin: 36px 0 0;
}

.fx-scale-label {
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}

.fx-scale-copy {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

/* Versichert / Nicht versichert — bewusst untereinander statt nebeneinander */
.fx-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4cqi, 44px);
}

.fx-colhead {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

/* Listen: Unterscheidung über Marker und Textfarbe,
   bewusst nicht über Ampel-Grün/Rot. */
.fx-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fx-list li {
  position: relative;
  padding: 0 0 0 22px;
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.fx-list li b {
  font-weight: 600;
  color: var(--chalk);
}

.fx-list li span {
  color: var(--muted);
}

.fx-list--yes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 10px;
  height: 2px;
  background: var(--signal);
}

.fx-list--no li {
  color: var(--muted);
}

.fx-list--no li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 10px;
  height: 10px;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: skewX(-20deg);
}

/* Untere Infoblöcke */
.fx-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4cqi, 44px);
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.fx-blocks p {
  font-size: 0.9rem;
  color: var(--muted);
}

.fx-blocks p b {
  color: var(--chalk);
  font-weight: 600;
}

/* Nummerierte Schritte mit Mono-Ziffer */
.fx-steps {
  list-style: none;
  counter-reset: fxstep;
  margin: 0;
  padding: 0;
}

.fx-steps li {
  counter-increment: fxstep;
  position: relative;
  padding-left: 30px;
  margin: 0 0 10px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
}

.fx-steps li::before {
  content: counter(fxstep);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-code);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--signal);
}

.fx-steps li b {
  color: var(--chalk);
  font-weight: 600;
}

@container (max-width: 700px) {
  .fx-head { max-width: none; }
}

/* ========================
   6. Sections — shared
======================== */
/* Ein durchgehend dunkler Grund; Sektionen werden über Haarlinien
   getrennt, nicht mehr über wechselnde Flächenfarben. */
.section {
  padding: calc(var(--gutter) * 1.6) var(--gutter);
}

.section--bright,
.section--light {
  background: var(--ink);
  color: var(--chalk);
}

#rental,
#equipment,
#schutz,
#hinweise,
#kontakt {
  border-top: 1px solid var(--line);
}

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

.content-narrow {
  max-width: 860px;
  margin: 0 auto;
}

/* ========================
   6a. Intro / Services
======================== */
#rental .container {
  max-width: var(--content-width);
  margin: 0 auto;
}

#rental .text-large {
  margin-bottom: 1.25em;
}

#rental .text-large:last-of-type {
  margin-bottom: 0.5em;
}

#rental a {
  font-family: var(--font-code);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--signal);
}

#rental a:hover {
  text-decoration: underline;
  text-decoration-color: var(--signal);
}

.rental-service {
  margin-top: 2.5em;
  padding-top: 1.75em;
  border-top: 1px solid var(--line);
}

/* ========================
   7. Equipment
======================== */
#equipment .container {
  max-width: var(--content-width);
  margin: 0 auto;
}

.pricing-note {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 2.5em;
}

/* Such-Box im Equipment-Bereich */
.equip-search {
  position: relative;
  margin: 0 0 2.5em;
  max-width: 620px;
}

.equip-search-input {
  width: 100%;
  padding: 0.75em 0.95em;
  font-family: var(--font-code);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--chalk);
  outline: none;
  border-radius: 0;
  transition: border-color 0.15s;
}

.equip-search-input::placeholder {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8125rem;
}

.equip-search-input:focus {
  border-color: var(--signal);
}

.equip-search-input::-webkit-search-cancel-button {
  cursor: pointer;
}

.equip-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: -1px 0 0;
  padding: 0;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  max-height: 22em;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 8px 20px var(--shadow-soft);
}

.equip-search-result {
  border-bottom: 1px solid var(--line);
}

.equip-search-result:last-child {
  border-bottom: none;
}

.equip-search-result-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  padding: 0.6em 0.95em;
  text-decoration: none;
  color: var(--chalk);
  transition: background 0.1s, color 0.1s;
}

.equip-search-result-link:hover,
.equip-search-result.is-active .equip-search-result-link {
  background: var(--ink);
  color: var(--chalk);
}

.equip-search-result-name {
  font-size: 0.9rem;
  flex: 1 1 auto;
  min-width: 0;
}

.equip-search-result-name mark {
  background: transparent;
  color: var(--signal);
  font-weight: 600;
}

.equip-search-result-cat {
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
  white-space: nowrap;
}

.equip-search-empty {
  padding: 0.75em 0.95em;
  font-family: var(--font-code);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.equip-category {
  margin-bottom: 0;
  /* Sprungziel der Kategorie-Kurz-URLs (/weitere-technik, /#weitere-technik).
     Ohne den Abstand schoebe der fixierte 48-px-Header die Ueberschrift ab. */
  scroll-margin-top: 64px;
}

/* Item-Liste: aus <p> + <br> wird eine haarlinien-getrennte Zeilenliste.
   Die <br>-Trenner aus main.js werden ausgeblendet — kein JS-Eingriff nötig. */
.equip-items {
  display: flex;
  flex-direction: column;
  white-space: normal;
  margin: 0;
}

.equip-items > br {
  display: none;
}

.equip-item {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}

/* Bild-Link ist die Lichttisch-Kachel; isolation kapselt den Blend-Modus */
.equip-item > a {
  flex-shrink: 0;
  display: block;
  line-height: 0;
  background: var(--photo-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-photo-sm);
  padding: 3px;
  isolation: isolate;
}

.equip-thumb {
  width: 56px;
  height: 56px;
  object-fit: contain;
  mix-blend-mode: multiply;
  margin-right: 0;
  display: block;
}

.equip-note {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

.equip-subhead {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  transition: color 0.15s;
}

/* Einrückungsmarke: kurze Haarlinie vor dem Subkategorie-Titel */
.equip-subtoggle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.9em;
  height: 1px;
  background: var(--line);
}

.equip-subtoggle {
  position: relative;
}

.equip-subtoggle:hover .equip-subhead,
.equip-subtoggle[aria-expanded="true"] .equip-subhead {
  color: var(--chalk);
}

/* ========================
   8. Important Notices
======================== */
#hinweise .container {
  max-width: var(--content-width);
  margin: 0 auto;
}

.hinweise-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 44px);
}

.hinweise-grid p {
  font-size: 0.9rem;
  color: var(--muted);
}

.hinweise-grid p b,
.hinweise-grid p strong {
  color: var(--chalk);
  font-weight: 600;
}

.hinweise-fineprint {
  margin-top: 2.25em;
  padding-top: 1.25em;
  border-top: 1px solid var(--line);
  font-family: var(--font-code);
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.hinweise-fineprint a {
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.hinweise-fineprint a:hover {
  border-bottom-color: var(--signal);
}

/* ========================
   9. Contact Form
======================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px;
}

.contact-map {
  position: relative;
  border-right: 1px solid var(--line);
}

.contact-map a.map-link {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.contact-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  /* Gedämpft, damit die helle Karte nicht als Leuchtfläche heraussticht */
  filter: grayscale(85%) brightness(0.72) contrast(1.08);
  transition: filter 0.3s;
}

.contact-map a.map-link:hover img {
  filter: grayscale(0%) brightness(0.95) contrast(1);
}

.contact-right {
  padding: calc(var(--gutter) * 1.6) var(--gutter);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  margin-bottom: 1.35em;
}

.form-group label {
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.form-group label .required {
  color: var(--signal);
  margin-left: 4px;
  letter-spacing: 0.1em;
}

.name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
}

.address-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 0.5em;
  margin-top: 0.5em;
}

/* :not([type="checkbox"]) ist Pflicht — sonst zieht die Regel auch die
   AGB-Checkbox auf 100 % Breite und sprengt die Consent-Zeile. */
.form-group input:not([type="checkbox"]),
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.7em 0.8em;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--chalk);
  border-radius: 0;
  outline: none;
  transition: border-color 0.15s;
}

.form-group select option {
  background: var(--panel);
  color: var(--chalk);
}

.form-group input:not([type="checkbox"])::placeholder,
.form-group textarea::placeholder {
  color: var(--muted);
}

.form-group input:not([type="checkbox"]):focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--signal);
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

.form-hint {
  margin: 0.6em 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
}

.honeypot {
  display: none;
}

/* Primär-Button: Signalfläche, kein Radius */
.form-submit-btn {
  font-family: var(--font-code);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.95em 2.25em;
  background: var(--signal);
  color: var(--signal-ink);
  border: 1px solid var(--signal);
  border-radius: 0;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s, color 0.15s;
}

.form-submit-btn:hover:not(:disabled) {
  background: transparent;
  color: var(--signal);
}

.form-submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#form-success {
  margin-top: 1.25em;
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
}

#form-error {
  margin-top: 1.25em;
  color: var(--red);
  font-size: 0.875rem;
}

.contact-info {
  margin-top: 2.75em;
  padding-top: 1.75em;
  border-top: 1px solid var(--line);
}

.contact-info p {
  margin-bottom: 1em;
  font-size: 0.875rem;
  color: var(--muted);
}

.contact-info .notice-red {
  color: var(--signal);
  font-weight: 700;
}

.contact-info strong {
  color: var(--chalk);
  font-weight: 600;
}

/* ========================
   10. Footer
======================== */
#footer {
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding: calc(var(--gutter) * 1.2) var(--gutter);
}

#footer .container {
  max-width: var(--max-width);
}

#footer .container {
  max-width: var(--content-width);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  gap: 5vw;
  align-items: start;
}

.footer-col h4 {
  margin-top: 0;
  margin-bottom: 0.9em;
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
}

.footer-col p,
.footer-col a {
  font-size: 0.875rem;
  line-height: 1.7;
  text-decoration: none;
  display: block;
  color: var(--muted);
}

.footer-col a:hover {
  color: var(--chalk);
  text-decoration: none;
}

.footer-inline {
  display: block;
  font-size: 0.875rem;
  line-height: 1.7;
}

.footer-inline a {
  display: inline;
  font-size: inherit;
}

/* Die Deckkraft sitzt bewusst auf den Links, nicht auf dem Block —
   sonst hellt der Hover auch die Trennlinie darüber mit auf. */
.footer-admin {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  text-align: right;
  font-family: var(--font-code);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.footer-admin a {
  color: inherit;
  text-decoration: none;
  opacity: 0.4;
  transition: opacity 0.2s, color 0.15s;
}

.footer-admin a:hover {
  opacity: 1;
  color: var(--signal);
}

/* ========================
   11. Collapsible Equipment
======================== */

/* Einrueckungsstufe der Liste. Bewusst in rem: mit em haenge der Wert an der
   Schriftgroesse des jeweiligen Elements — die kleiner gesetzte .equip-note
   wuerde dann schmaler einruecken als die Artikelzeilen daneben. */
#equipment-list {
  --equip-indent: 1.6rem;
}

/* Toggle-Buttons (Kategorie & Subkategorie) */
.equip-toggle,
.equip-subtoggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6em;
  width: 100%;
  background: transparent;
  border: none;
  border-top: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  padding: 0.85em 0;
  font: inherit;
  color: var(--chalk);
  transition: color 0.15s;
}

.equip-toggle:hover,
.equip-subtoggle:hover {
  color: var(--signal);
}

/* Hauptkategorien bündig mit der zentrierten Contentspalte — der frühere
   Full-Bleed passte nur zum linksbündigen Layout. */
.equip-toggle {
  padding-left: 0;
  padding-right: 0;
}

/* Subkategorien: eingerückt und visuell der Hauptkategorie untergeordnet */
.equip-subtoggle {
  padding-left: var(--equip-indent, 1.6rem);
  padding-right: 0;
}

.equip-toggle h4,
.equip-subtoggle .equip-subhead {
  margin: 0;
}

/* Indikator rechts: Signal-Plus, das beim Öffnen zum Minus rotiert */
.equip-arrow {
  display: block;
  font-size: 0;          /* blendet das ▶-Zeichen aus main.js aus */
  color: var(--signal);
  transition: transform 0.2s ease;
  margin-left: 0.75em;
  flex-shrink: 0;
  line-height: 1;
  position: relative;
  width: 11px;
  height: 11px;
}

.equip-arrow::before,
.equip-arrow::after {
  content: "";
  position: absolute;
  background: var(--signal);
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  margin-top: -0.5px;
}

.equip-arrow::after {
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

.equip-toggle[aria-expanded="true"] .equip-arrow,
.equip-subtoggle[aria-expanded="true"] .equip-arrow,
.section-toggle[aria-expanded="true"] .equip-arrow {
  transform: none;
}

.equip-toggle[aria-expanded="true"] .equip-arrow::after,
.equip-subtoggle[aria-expanded="true"] .equip-arrow::after,
.section-toggle[aria-expanded="true"] .equip-arrow::after {
  transform: rotate(0deg);
}

/* Smooth Grid-Animation für collapse/expand */
.equip-body-wrapper,
.equip-subbody-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

.equip-body-wrapper.is-open,
.equip-subbody-wrapper.is-open {
  grid-template-rows: 1fr;
}

.equip-body-wrapper > .equip-body,
.equip-subbody-wrapper > .equip-subbody {
  overflow: hidden;
  min-height: 0; /* Pflicht für grid 0fr → Kollaps auf exakt 0 */
}

/* WICHTIG: kein vertikales Padding auf den geclippten Elementen.
   Der Collapse laeuft ueber grid-template-rows: 0fr — die Zeilenhoehe wird 0,
   eigenes Padding des Kindes bliebe aber stehen und wuerde Inhalte
   (Notiztexte, Bildkacheln) durchscheinen lassen. Abstaende deshalb ueber
   Margins der Kinder, die vom overflow: hidden mitgeclippt werden. */
.equip-body {
  padding: 0;
}

/* Subkategorie-Verschachtelung */
.equip-subcategory {
  margin-top: 0;
}

.equip-subbody {
  /* nur horizontal — vertikales Padding wuerde beim Collapse lecken */
  padding: 0 0 0 var(--equip-indent, 1.6rem);
}

/* Nur die Hauptkategorie steht ganz links. Alles darunter — Subkategorien,
   Kategorie-Notizen und die Artikel selbst — ruecken um dieselbe Stufe ein.
   Bei Artikeln innerhalb einer Subkategorie liefert das padding-left von
   .equip-subbody die Einrueckung bereits, daher dort kein zusaetzlicher Rand. */
.equip-body > .equip-note {
  margin: 0.9em 0 1.1em var(--equip-indent, 1.6rem);
}

.equip-body > .equip-items,
.equip-subbody > .equip-items {
  margin: 0.35em 0 1.4em;
}

.equip-body > .equip-items {
  margin-left: var(--equip-indent, 1.6rem);
}

/* Item-Links */
.equip-item a {
  text-decoration: none;
  color: inherit;
}

.equip-item > span > a:hover {
  color: var(--signal);
  text-decoration: none;
}

.equip-item a:hover {
  opacity: 1;
}

/* ========================
   12. Artikelseiten
======================== */
.artikel-page {
  background: var(--ink);
  min-height: 100vh;
}

.artikel-content {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: calc(var(--gutter) * 0.75) var(--gutter) calc(var(--gutter) * 2);
}

/* Desktop: doppeltes Top-Padding (section + content) auflösen. */
@media (min-width: 768px) {
  .artikel-page .section--light {
    padding-top: 0;
  }
  .artikel-content {
    padding-top: calc(var(--gutter) * 1.1);
  }
}

/* Artikel-Such-Box unter .artikel-actions — nur Desktop sichtbar */
.artikel-search {
  margin-top: 1.75em;
  max-width: 420px;
}

.artikel-search .equip-search {
  margin: 0;
}

/* Breadcrumb über dem Artikel-Hero — nur Desktop sichtbar. */
.artikel-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4em 0.5em;
  margin: 0 0 1.75em;
  padding-bottom: 1.25em;
  border-bottom: 1px solid var(--line);
}

@media (max-width: 767px) {
  .artikel-breadcrumb { display: none; }
}

.breadcrumb-select {
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--chalk);
  padding: 0.45em 1.9em 0.45em 0.7em;
  cursor: pointer;
  border-radius: 0;
  outline: none;
  max-width: 16em;
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--panel);
  background-image: linear-gradient(45deg, transparent 50%, var(--signal) 50%),
                    linear-gradient(135deg, var(--signal) 50%, transparent 50%);
  background-position: right 0.9em center, right 0.6em center;
  background-size: 0.32em 0.32em, 0.32em 0.32em;
  background-repeat: no-repeat;
  transition: border-color 0.15s;
}

.breadcrumb-select:hover,
.breadcrumb-select:focus {
  border-color: var(--signal);
}

.breadcrumb-select option {
  background: var(--panel);
  color: var(--chalk);
}

.breadcrumb-sep {
  color: var(--muted);
  font-size: 0.75rem;
  user-select: none;
}

/* Hero: Bild links, Titel rechts */
.artikel-hero {
  display: grid;
  grid-template-columns: 4fr 5fr;
  gap: calc(var(--gutter) * 1.5);
  align-items: start;
  margin-bottom: 2.5em;
}

/* Lichttisch-Kachel — isolation kapselt den Multiply-Blend der Bilder */
.artikel-image-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--photo-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-photo);
  padding: 6px;
  isolation: isolate;
}

.artikel-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  mix-blend-mode: multiply;
}

.artikel-title h1 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin: 0;
}

.artikel-title h1 + .artikel-detail-block {
  margin-top: 1.75em;
}

/* Galerie */
.artikel-gallery {
  margin-top: 0;
  position: relative;
}

.artikel-gallery-main {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--photo-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-photo);
  padding: 6px;
  isolation: isolate;
}

.artikel-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  mix-blend-mode: multiply;
}

.gallery-nav {
  position: absolute;
  bottom: 0;
  background: var(--ink);
  color: var(--chalk);
  border: none;
  cursor: pointer;
  width: 2.25em;
  height: 2.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  opacity: 0.85;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
  z-index: 1;
}

.gallery-nav:hover {
  opacity: 1;
  background: var(--signal);
  color: var(--signal-ink);
}

.gallery-nav--prev { left: 0; }
.gallery-nav--next { right: 0; }

.artikel-gallery-thumbs {
  display: flex;
  justify-content: center;
  gap: 0.5em;
  margin-top: 0.6em;
}

/* Thumb-Kachel (von artikel.js um jedes <img.gallery-thumb> gelegt) */
.gallery-thumb-tile {
  display: block;
  width: 3.75em;
  height: 3.75em;
  padding: 3px;
  background: var(--photo-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-photo-sm);
  cursor: pointer;
  isolation: isolate;
  transition: border-color 0.15s;
  flex-shrink: 0;
}

.gallery-thumb-tile:hover {
  border-color: var(--muted);
}

.gallery-thumb-tile:has(.gallery-thumb.active) {
  border-color: var(--signal);
}

.gallery-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
  cursor: pointer;
}

/* Detail-Blöcke */
.artikel-detail-block {
  margin-bottom: 2.25em;
  padding-top: 1.25em;
  border-top: 1px solid var(--line);
}

.artikel-title .artikel-detail-block:first-of-type {
  border-top: none;
  padding-top: 0;
}

.artikel-detail-label {
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 0.7em;
}

.artikel-detail-value {
  font-size: 0.9375rem;
  line-height: 1.65;
  white-space: pre-wrap;
  color: var(--chalk);
}

.artikel-price-note {
  margin-top: 0.4em;
  margin-bottom: 0;
  font-family: var(--font-code);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.artikel-detail-value--price {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}

/* Admin: Inline-editierbare Felder */
.artikel-detail-value--editable {
  cursor: text;
  border: 1px dashed transparent;
  padding: 0.3em 0.5em;
  margin: -0.3em -0.5em;
  border-radius: var(--radius);
  transition: border-color 120ms ease, background-color 120ms ease;
}

.artikel-detail-value--editable:hover {
  border-color: var(--line);
}

.artikel-detail-value--editing {
  border-color: var(--signal);
  background: var(--panel);
  outline: none;
}

.artikel-detail-value--editable:not(.artikel-detail-value--editing):empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  font-style: italic;
  opacity: 0.7;
}

/* Aktions-Bar (Zurück + Mietkorb) */
.artikel-actions {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 3em;
  padding-top: 1.75em;
  border-top: 1px solid var(--line);
  gap: 1em;
}

.btn-back,
.btn-merkliste {
  font-family: var(--font-code);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.95em 1.9em;
  border: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-decoration: none;
  display: inline-block;
}

.btn-back {
  background: transparent;
  color: var(--muted);
}

.btn-back:hover {
  color: var(--chalk);
  border-color: var(--chalk);
  text-decoration: none;
}

.btn-merkliste {
  background: var(--signal);
  color: var(--signal-ink);
  border-color: var(--signal);
}

.btn-merkliste:hover {
  background: transparent;
  color: var(--signal);
  text-decoration: none;
}

/* ========================
   13. Responsive
======================== */
@media (max-width: 768px) {
  :root {
    --gutter: var(--gutter-mobile);
  }

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

  .contact-map {
    min-height: 260px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .contact-map img {
    min-height: 260px;
  }

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

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    justify-content: unset;
    gap: 6vw;
  }
}

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

@media (max-width: 600px) {
  .artikel-hero {
    grid-template-columns: 1fr;
  }

  .artikel-image-wrap {
    max-width: 280px;
  }

  .artikel-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-back,
  .btn-merkliste {
    text-align: center;
  }

  .merkliste-right-group .menge-outer {
    order: 1;
  }
}

/* ========================
   14. Site Header
======================== */
body {
  padding-top: 48px;
}

#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 48px;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
}

.header-logo {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chalk);
  text-decoration: none;
  opacity: 1;
  line-height: 1;
}

.header-logo:hover {
  color: var(--signal);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.header-nav a {
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  opacity: 1;
  transition: color 0.15s;
}

.header-nav a:hover {
  color: var(--signal);
}

.header-merkliste-link {
  display: inline-flex;
  align-items: center;
}

/* Badge: Signal-Quadrat statt rotem Kreis — Rot bleibt Fehlern vorbehalten */
.merkliste-badge {
  display: inline-block;
  background: var(--signal);
  color: var(--signal-ink);
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: 600;
  border-radius: 0;
  min-width: 17px;
  height: 17px;
  line-height: 17px;
  text-align: center;
  padding: 0 4px;
  margin-left: 7px;
  letter-spacing: 0;
  box-sizing: border-box;
}

/* Author-Regeln schlagen die UA-Regel für [hidden] — ohne das bliebe die
   Badge bei leerem Mietkorb als „0" stehen. */
.merkliste-badge[hidden] {
  display: none;
}

/* Hamburger button (mobile only) */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2em 0.3em;
  color: var(--chalk);
  font-size: 1.15rem;
  line-height: 1;
  transition: color 0.15s;
}

.hamburger-btn:hover {
  color: var(--signal);
}

/* Hamburger dropdown */
.hamburger-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: none;
  padding: 1em 1.5em;
  flex-direction: column;
  gap: 0.9em;
  min-width: 170px;
}

.hamburger-menu.is-open {
  display: flex;
}

.hamburger-menu a {
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}

.hamburger-menu a:hover {
  color: var(--signal);
  text-decoration: none;
}

/* ========================
   15. Merkliste-Seite
======================== */
.merkliste-page {
  background: var(--ink);
  min-height: 100vh;
}

.merkliste-page .section--light {
  padding-top: 0;
}

.merkliste-container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1.75em var(--gutter) calc(var(--gutter) * 2);
}

.merkliste-heading {
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  line-height: 0.95;
  margin-top: 0;
  margin-bottom: 1em;
}

.merkliste-items {
  list-style: none;
  margin: 0 0 2.5em;
  padding: 0;
  border-top: 1px solid var(--line);
}

.merkliste-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1.1em 0;
  border-bottom: 1px solid var(--line);
}

.merkliste-item-info {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  min-width: 0;
}

.merkliste-item-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--chalk);
  line-height: 1.1;
  transition: color 0.15s;
}

.merkliste-item-name:hover {
  color: var(--signal);
  text-decoration: none;
  opacity: 1;
}

.merkliste-item-price {
  font-family: var(--font-code);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.merkliste-item-price--dark {
  color: var(--chalk);
  font-weight: 600;
}

.btn-remove {
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.6em 1em;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}

.btn-remove:hover {
  color: var(--red);
  border-color: var(--red);
  opacity: 1;
}

.merkliste-empty {
  padding: 2em 0;
  color: var(--muted);
}

.merkliste-empty p {
  margin-bottom: 1em;
}

.merkliste-back-link {
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--signal);
}

.merkliste-back-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--signal);
  opacity: 1;
}

.merkliste-form-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0.5em;
}

.merkliste-form-intro {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 1.75em;
}

/* Mietkorb-Button aktiv-Zustand */
.btn-merkliste--active {
  background: transparent;
  color: var(--signal);
  border-color: var(--signal);
}

.btn-merkliste--active:hover {
  background: var(--signal);
  color: var(--signal-ink);
}

/* Wrapper für Mietkorb-Button + Mengensteuerung */
.merkliste-right-group {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn-zur-merkliste-row {
  flex-basis: 100%;
  display: flex;
  justify-content: flex-end;
}

/* ========================
   16. Mengensteuerung (Artikel-Seite + Merkliste)
======================== */
.menge-controls {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--line);
}

.menge-btn {
  font-family: var(--font-code);
  font-size: 0.875rem;
  font-weight: 600;
  width: 2.1em;
  height: 2.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--chalk);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.menge-btn:hover:not(:disabled) {
  background: var(--signal);
  color: var(--signal-ink);
}

.menge-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.menge-display {
  font-family: var(--font-code);
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 3.5em;
  text-align: center;
  padding: 0 0.4em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menge-controls--small .menge-btn {
  font-size: 0.75rem;
  width: 1.9em;
  height: 1.9em;
}

.menge-controls--small .menge-display {
  font-size: 0.6875rem;
  min-width: 2.6em;
}

/* --small deckt auch die Zusatzoptionen ab (Artikel-Grid und Mietkorb) — sie
   sollen so groß sein wie der Mengen-Stepper der Artikelposition darunter. */

/* Outer wrapper: Mengensteuerung + Label */
.menge-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
}

.menge-outer[hidden],
.menge-controls[hidden] {
  display: none;
}

.menge-label {
  font-family: var(--font-code);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  margin: 0;
  white-space: nowrap;
}

/* ========================
   17. Merkliste-Seite: Steuerung + Gesamt + Rechner
======================== */
.merkliste-item-controls {
  display: flex;
  align-items: center;
  gap: 0.7em;
  flex-shrink: 0;
}

.merkliste-total-section {
  margin: 1.5em 0 0;
  padding: 1.25em 0;
  border-top: 1px solid var(--line);
}

.merkliste-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  font-family: var(--font-code);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.merkliste-total-value {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--chalk);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.merkliste-total-note {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.5em;
  margin-bottom: 0;
}

.merkliste-subheading {
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 0.9em;
  margin-top: 0;
}

.merkliste-calculator {
  margin-top: 2em;
  padding: 1.5em 1.6em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal);
}

.calc-input-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 1em;
  flex-wrap: wrap;
}

.calc-input-row label {
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.calc-tage-input {
  width: 5em;
  padding: 0.45em 0.6em;
  font-family: var(--font-code);
  font-size: 0.9375rem;
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--chalk);
  outline: none;
  text-align: center;
}

.calc-tage-input:focus {
  border-color: var(--signal);
}

.calc-result {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}

.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  font-size: 0.875rem;
  color: var(--chalk);
}

.calc-row--discount {
  color: var(--muted);
  font-size: 0.8125rem;
}

.calc-row--final {
  font-weight: 600;
  font-size: 0.9375rem;
  border-top: 1px solid var(--line);
  padding-top: 0.5em;
  margin-top: 0.15em;
}

.calc-value {
  white-space: nowrap;
  font-family: var(--font-code);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.calc-note {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.75em;
  margin-bottom: 0;
}

.merkliste-rabatt-section {
  margin-top: 1.75em;
}

.merkliste-rabatt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: none;
  border: none;
  padding: 0.25em 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.merkliste-rabatt-toggle:hover .merkliste-rabatt-heading {
  color: var(--chalk);
}

.merkliste-rabatt-caret {
  font-size: 0.75rem;
  color: var(--signal);
  display: inline-block;
  transition: transform 0.15s ease;
}

.merkliste-rabatt-heading {
  margin: 0 !important;
}

.merkliste-rabatt-body {
  margin-top: 0.75em;
  overflow: hidden;
  transition: max-height 0.2s ease;
}

.merkliste-rabatt-section.is-collapsed .merkliste-rabatt-body {
  display: none;
}

.rabatt-table {
  border-collapse: collapse;
  font-family: var(--font-code);
  font-size: 0.8125rem;
  width: auto;
  font-variant-numeric: tabular-nums;
}

.rabatt-table th,
.rabatt-table td {
  padding: 0.45em 1.75em 0.45em 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.rabatt-table th {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.merkliste-legal-note {
  margin-top: 2em;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.6;
  padding-top: 1.25em;
  border-top: 1px solid var(--line);
}

.merkliste-legal-note--highlight,
.wording-highlight {
  color: var(--chalk);
  font-weight: 600;
}

.merkliste-legal-note .wording-highlight {
  display: inline;
  margin-top: 0.3em;
}

#merkliste-form-section {
  margin-top: 3.5em;
  padding-top: 2.5em;
  border-top: 1px solid var(--line);
}

.merkliste-single-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
}

.merkliste-right-group--single {
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5em;
}

/* ========================
   18. Mietkorb: Tasche, Mietzeitraum, Hinweise, Calc-Zeilen, Rabatt-Toggle
======================== */
/* Tasche-Checkbox als letztes li in der Item-Liste */
.merkliste-item--tasche {
  border-bottom: none;
  padding: 1em 0;
}

.merkliste-item-info--tasche {
  flex-direction: row;
  align-items: center;
  gap: 0.6em;
}

.tasche-cb {
  width: 1.05em;
  height: 1.05em;
  accent-color: var(--signal);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.tasche-label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--chalk);
  cursor: pointer;
  user-select: none;
}

.mietzeitraum-box {
  margin-top: 2em;
  padding: 1.5em 1.6em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal);
}

.mietzeitraum-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  margin-bottom: 0.6em;
}

.mietzeitraum-group {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  flex: 1 1 12em;
  min-width: 0;
}

.mietzeitraum-group label {
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.mietzeitraum-input {
  width: 100%;
  padding: 0.6em 0.7em;
  font-family: var(--font-code);
  font-size: 0.9375rem;
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--chalk);
  outline: none;
  border-radius: 0;
  transition: border-color 0.15s;
}

.mietzeitraum-input:focus {
  border-color: var(--signal);
}

/* Kalender-Icon: Farbe kommt ueber color-scheme: dark, kein Invert noetig */
.mietzeitraum-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

.mietzeitraum-tage {
  margin: 0.5em 0 0;
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
  min-height: 1.3em;
}

.mietzeitraum-hint {
  margin: 0.6em 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
}

.mietzeitraum-hint strong {
  color: var(--chalk);
}

.hinweise-box {
  margin-top: 1.5em;
}

.hinweise-textarea {
  width: 100%;
  padding: 0.7em 0.8em;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.45;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--chalk);
  outline: none;
  border-radius: 0;
  resize: none;
  height: calc(2 * 1.45em + 1.4em);
  overflow-y: auto;
  transition: border-color 0.15s;
}

.hinweise-textarea::placeholder {
  color: var(--muted);
}

.hinweise-textarea:focus {
  border-color: var(--signal);
}

.hinweise-hint {
  margin: 0.6em 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--muted);
}

.hinweise-hint strong {
  color: var(--chalk);
}

/* Pflichtfeld-Fehler-State */
.field-error .mietzeitraum-input,
.field-error .hinweise-textarea {
  border-color: var(--red);
}

.field-error .merkliste-subheading {
  color: var(--red);
}

/* AGB-Zustimmung im Anfrageformular.
   Das Element trägt .form-group UND .form-consent — die Zeilenrichtung und
   das Label-Styling von .form-group müssen hier explizit zurückgenommen
   werden, sonst steht die Checkbox über dem Text und der Fließtext erbt das
   Mono-Versal-Styling der Feld-Labels. */
.form-consent {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6em;
}

.form-consent .tasche-cb {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  padding: 0;
  margin-top: 0.3em;
}

.form-consent .tasche-label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chalk);
  line-height: 1.6;
}

.form-consent .tasche-label a {
  color: var(--signal);
  text-decoration-color: var(--signal);
  text-underline-offset: 3px;
}

.form-consent.field-error .tasche-label {
  color: var(--red);
}

/* Erweiterte Kalkulator-Zeilen */
.calc-row--versicherung {
  color: var(--muted);
  font-size: 0.875rem;
}

.calc-row--endsumme {
  font-family: var(--font-code);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk);
  align-items: center;
  border-top: 1px solid var(--signal);
  padding-top: 0.75em;
  margin-top: 0.4em;
}

.calc-row--endsumme .calc-value {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--signal);
}

/* Bestätigungs-Ansicht nach erfolgreichem Submit */
.mietkorb-confirmation {
  padding: 0.5em 0 2em;
}

.mietkorb-confirmation-intro {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  color: var(--chalk);
  margin: 0 0 0.6em;
}

.mietkorb-confirmation-details {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 2em;
}

.mietkorb-confirmation-summary-heading {
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 0.9em;
}

.mietkorb-confirmation-summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.5em;
  row-gap: 0.6em;
  margin: 0 0 2em;
  padding: 1.4em 1.6em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal);
}

.mietkorb-confirmation-summary dt {
  font-family: var(--font-code);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: baseline;
}

.mietkorb-confirmation-summary dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--chalk);
  align-self: baseline;
}

.mietkorb-confirmation-back {
  display: inline-block;
  font-family: var(--font-code);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.95em 2.25em;
  background: var(--signal);
  color: var(--signal-ink);
  border: 1px solid var(--signal);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.mietkorb-confirmation-back:hover {
  background: transparent;
  color: var(--signal);
  text-decoration: none;
}

@media (max-width: 480px) {
  .mietkorb-confirmation-summary {
    grid-template-columns: 1fr;
    row-gap: 0.15em;
  }
  .mietkorb-confirmation-summary dt {
    margin-top: 0.6em;
  }
}

@media (max-width: 540px) {
  .nav-desktop {
    display: none;
  }

  .hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .header-nav {
    gap: 1rem;
  }

  .merkliste-item {
    flex-wrap: wrap;
  }

  .merkliste-item-controls {
    flex-wrap: wrap;
  }

  .merkliste-calculator {
    padding: 1.15em;
  }
}

/* ========================
   19. Zusatzoptionen
======================== */

/* Visitor-Grid auf Artikelseite */
/* Wie beim „Vielleicht auch interessant"-Grid inhaltsgetrieben statt fester
   Spaltenzahl: sonst quetschen sich lange Optionsnamen bei mittleren
   Fensterbreiten in dreispaltige Zeilen und brechen um.
   240px = längster Optionsname (214px inkl. Checkbox) plus Luft; auf der
   vollen Contentbreite bleiben damit weiterhin drei Spalten.
   Preis und Mengen-Stepper kommen im selben Grid-Item dazu — die 240px bleiben
   bewusst stehen, damit die Dreispaltigkeit erhalten bleibt; stattdessen darf
   der Optionsname umbrechen (betrifft nur angehakte Mehrfach-Optionen). */
.artikel-zusatz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0.6em 1.5em;
  margin-top: 0.75em;
}

/* Grid-Item: Label + Stepper. Der Stepper liegt neben dem <label>, nicht darin
   — ein Button im Label würde beim Klick die Checkbox mit umschalten. */
.artikel-zusatz-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
}

/* flex: 0 1 auto statt 1: das Label belegt nur seine Textbreite, damit der
   Stepper direkt hinter dem Preis steht und nicht am Spaltenrand klebt. Bei
   langen Namen schrumpft das Label und der Name bricht um. */
.artikel-zusatz-label {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--chalk);
  flex: 0 1 auto;
  min-width: 0;
}

.artikel-zusatz-cb {
  flex-shrink: 0;
  margin-top: 0.2em;
  accent-color: var(--signal);
  cursor: pointer;
}

/* Preis einer Zusatzoption — nur bei preis > 0 im Markup. Liegt inline im
   Namens-Span, damit die kleinere Monoschrift auf derselben Baseline sitzt wie
   der Optionsname; der Abstand kommt daher aus margin-left statt aus dem
   Flex-gap des Labels. */
.artikel-zusatz-preis {
  font-family: var(--font-code);
  font-size: 0.75rem;
  color: var(--signal);
  white-space: nowrap;
  margin-left: 0.5em;
}

/* Admin-Grid auf Artikelseite */
.artikel-zusatz-admin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6em 1.5em;
}

.artikel-zusatz-admin-row {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.artikel-zusatz-admin-slot {
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
  min-width: 1.4em;
}

.artikel-zusatz-select {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--chalk);
  padding: 0.3em 0.4em;
  border-radius: 0;
}

.artikel-zusatz-select option {
  background: var(--panel);
  color: var(--chalk);
}

.artikel-zusatz-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 0.9em;
}

.artikel-zusatz-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.artikel-zusatz-toggle-label input {
  accent-color: var(--signal);
  cursor: pointer;
}

/* Admin: Lieferumfang-Editor */
.artikel-lief-admin-row {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: 0.35em;
}

.artikel-lief-input {
  font-family: var(--font-body);
  font-size: 0.875rem;
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--chalk);
  padding: 0.3em 0.45em;
  border-radius: 0;
  outline: none;
}

.artikel-lief-input:focus {
  border-color: var(--signal);
}

.artikel-lief-save-btn {
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35em 0.6em;
  border: 1px solid var(--line);
  background: none;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.artikel-lief-save-btn:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--signal-ink);
}

.artikel-zusatz-new-row {
  margin-top: 1em;
  padding-top: 0.9em;
  border-top: 1px solid var(--line);
}

/* Preis- und Stückzahl-Feld der Anlege-Zeile — schmal, damit das Namensfeld
   den Platz behält. Optik wie .artikel-lief-input. */
.artikel-zusatz-num {
  font-family: var(--font-code);
  font-size: 0.8125rem;
  color: var(--chalk);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 0.45em 0.5em;
  width: 4.5em;
  flex-shrink: 0;
  outline: none;
  transition: border-color 0.15s;
}

.artikel-zusatz-num:focus {
  border-color: var(--signal);
}

@media (max-width: 500px) {
  .artikel-zusatz-admin-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================
   20. Vielleicht auch interessant
======================== */

/* Visitor-Grid: Spaltenzahl ergibt sich aus der Content-Breite, nicht aus
   Breakpoints — die Spalten klappen genau dann weg, wenn ein Name sonst
   umbrechen würde.
   Die 340px sind gemessen, nicht geschätzt: der längste der 93 Artikelnamen
   braucht 331px (Text + Strich + Abstand, IBM Plex Sans 15px). Bei den
   früheren 220px brachen 15 von 93 Namen schon auf dem Desktop um.
   min(100%, …) verhindert Überlauf, sobald die Spalte selbst schmaler als der
   Mindestwert wird — deshalb braucht es keine Mobil-Sonderregel mehr. */
.artikel-interessant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  /* Ohne Trennlinien zwischen den Einträgen trägt der Abstand die Gliederung:
     Zeilenabstand knapp, Spaltenabstand deutlich. */
  gap: 0.15em 2em;
  margin-top: 0.5em;
}

.artikel-interessant-link {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.4;
  padding: 0.35em 0;
  color: var(--chalk);
  text-decoration: none;
  transition: color 0.15s;
}

.artikel-interessant-link::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 2px;
  background: var(--signal);
  vertical-align: middle;
  margin-right: 10px;
}

.artikel-interessant-link:hover {
  color: var(--signal);
  text-decoration: none;
}

/* Hover-Vorschau: fest am Cursor, am <body> verankert (position: fixed).
   Geteiltes Primitiv (FX6.attachHoverPreview in js/utils.js) — benutzt von
   „Vielleicht auch interessant", den Zusatzoptionen auf der Artikelseite und den
   Bild-Thumbnails im Admin-Panel. z-index liegt über dem Panel-Modal (200). */
.fx6-preview {
  position: fixed;
  width: 140px;
  height: 140px;
  background: var(--photo-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-photo);
  box-shadow: 0 4px 12px var(--shadow-medium);
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
  padding: 4px;
  box-sizing: border-box;
  isolation: isolate;
}

.fx6-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}

.fx6-preview[hidden] {
  display: none;
}

/* Safety-Net: auf Touch-only-Geräten nie anzeigen */
@media (hover: none), (pointer: coarse) {
  .fx6-preview {
    display: none !important;
  }
}

/* Admin-Grid: einspaltig — das Combobox-Dropdown braucht volle Breite. */
.artikel-interessant-admin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4em;
  max-width: 560px;
}

.artikel-interessant-admin-row {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.artikel-interessant-search-host {
  flex: 1;
  min-width: 0;
}

/* Kompakte Variante der Equipment-Suche für inline Admin-Felder */
.equip-search--compact {
  margin: 0;
  max-width: none;
}

.equip-search--compact .equip-search-input {
  padding: 0.35em 0.55em;
  font-size: 0.8125rem;
}

.equip-search--compact .equip-search-result-link {
  padding: 0.45em 0.7em;
}

.equip-search--compact .equip-search-result-name {
  font-size: 0.8125rem;
}

.artikel-interessant-clear {
  font-family: var(--font-code);
  font-size: 0.9375rem;
  line-height: 1;
  width: 1.9em;
  height: 1.9em;
  padding: 0;
  border: 1px solid var(--line);
  background: none;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.artikel-interessant-clear:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--chalk);
}

/* Mietkorb: Zusatzoptionen-Zeilen */
/* baseline statt center: Name und Preis haben unterschiedliche Schriftgrößen
   und müssen auf einer Linie sitzen. Stepper und Entfernen-× sind Kästen ohne
   sinnvolle Baseline und werden einzeln zentriert. */
.merkliste-item-zusatz-row {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  flex-wrap: wrap;
}

.merkliste-item-zusatz-row .menge-controls,
.merkliste-item-zusatz-row .btn-remove-zusatz {
  align-self: center;
}

/* Preis einer Zusatzoption im Mietkorb — preis × menge */
.merkliste-item-zusatz-preis {
  font-family: var(--font-code);
  font-size: 0.8125rem;
  color: var(--signal);
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-remove-zusatz {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--signal);
  font-size: 0.9375rem;
  line-height: 1;
  padding: 0 0.1em;
  flex-shrink: 0;
  transition: color 0.15s;
}

.btn-remove-zusatz:hover {
  color: var(--white);
}

/* ========================
   21. Admin Bild-Upload
======================== */
.artikel-image-host {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.artikel-image-wrap--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border-style: dashed;
}

.artikel-image-wrap--empty::before {
  content: 'Kein Bild';
  color: var(--muted);
  font-family: var(--font-code);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.artikel-admin-upload-row {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
  flex-wrap: wrap;
}

.artikel-admin-upload-btn,
.artikel-admin-edit-btn,
.artikel-upload-tool,
.artikel-upload-filebtn,
.artikel-upload-cancel {
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55em 0.9em;
  border: 1px solid var(--line);
  background: none;
  color: var(--muted);
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.artikel-admin-upload-btn:hover:not(:disabled),
.artikel-admin-edit-btn:hover:not(:disabled),
.artikel-upload-tool:hover,
.artikel-upload-filebtn:hover,
.artikel-upload-cancel:hover:not(:disabled) {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--signal-ink);
}

.artikel-admin-upload-btn:disabled,
.artikel-admin-edit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.artikel-admin-delete-btn {
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55em 0.9em;
  border: 1px solid var(--red);
  background: none;
  color: var(--red);
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s, color 0.15s;
}

.artikel-admin-delete-btn:hover:not(:disabled) {
  background: var(--red);
  color: var(--chalk);
}

.artikel-admin-delete-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.artikel-upload-tools {
  display: flex;
  gap: 0.5em;
}

/* Upload Modal */
.artikel-upload-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-modal);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
}

.artikel-upload-modal {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.6em;
  width: 100%;
  max-width: 560px;
  max-height: 95vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.artikel-upload-title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--chalk);
  margin: 0;
}

.artikel-upload-filebtn {
  display: inline-block;
  align-self: flex-start;
}

.artikel-upload-filebtn input[type="file"] {
  display: none;
}

.artikel-upload-source {
  display: flex;
  align-items: center;
  gap: 0.75em;
  flex-wrap: wrap;
}

.artikel-upload-pastehint,
.artikel-upload-hint,
.artikel-upload-status {
  font-family: var(--font-code);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}

.artikel-upload-status {
  min-height: 1.2em;
  color: var(--signal);
}

.artikel-upload-cropper {
  width: 100%;
  max-height: 60vh;
  background: var(--ink);
  border: 1px solid var(--line);
}

.artikel-upload-cropper img {
  display: block;
  max-width: 100%;
}

/* Cropper zeigt hinter dem Bild ab Werk ein Transparenz-Schachbrett. Statt
   dessen steht hier genau das Weiß, mit dem der Export die freien Flächen
   auffüllt (fillColor in js/bildeditor.js) — der Ausschnitt sieht im Editor
   also aus wie später auf der Seite. Gilt für alle Uploads, weil alle denselben
   Editor benutzen. cropper.min.css bleibt unangetastet (Vendor).

   Zwei Ebenen, weil Cropper so aufgebaut ist:
   .cropper-view-box ist das 1:1-Innere und liegt über .cropper-drag-box, die
   bei modal: true das 50 % Schwarz trägt. Ohne eigenen Hintergrund scheint das
   Schwarz durch und das Weiß wird grau — deshalb bekommt die View-Box das
   reine Weiß. Die Wrap-Box darunter deckt den Überhang außerhalb des
   Ausschnitts ab und bleibt bewusst abgedunkelt. */
.artikel-upload-cropper .cropper-view-box {
  background-color: var(--white);
}

.artikel-upload-cropper .cropper-bg {
  background-image: none;
  background-color: var(--white);
}

.artikel-upload-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
}

.artikel-upload-save {
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55em 1.2em;
  background: var(--signal);
  color: var(--signal-ink);
  border: 1px solid var(--signal);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.artikel-upload-save:hover:not(:disabled) {
  background: transparent;
  color: var(--signal);
}

.artikel-upload-save:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ========================
   22. Info-Seiten (.dse-*)
   Gemeinsame Basis für agb-und-versicherung.html, impressum.html und
   datenschutzerklaerung.html. Diese Regeln lagen früher dreifach inline
   in den Seiten — jetzt an einer Stelle.
======================== */
.dse-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 3rem var(--gutter) 5rem;
}

.dse-back {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 3.5rem;
  transition: color 0.15s;
}

.dse-back:hover {
  color: var(--signal);
  text-decoration: none;
}

.dse-back::before {
  content: '\2190';
  font-size: 0.9em;
}

.dse-page-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--chalk);
  margin: 0 0 0.5rem;
  line-height: 0.92;
  letter-spacing: -0.005em;
}

.dse-meta {
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.dse-divider {
  width: 2.5rem;
  height: 2px;
  background: var(--signal);
  margin-bottom: 3.5rem;
}

.dse-section {
  margin-bottom: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line);
}

.dse-section:last-child {
  border-bottom: none;
}

.dse-h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.5vw, 2.125rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--chalk);
  margin: 0 0 1.75rem;
}

.dse-h3 {
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 2.25rem 0 0.85rem;
}

.dse-h3:first-child {
  margin-top: 0;
}

.dse-h4 {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--chalk);
  margin: 1.75rem 0 0.5rem;
}

.dse-p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--muted);
  margin: 0 0 1rem;
}

.dse-p strong {
  color: var(--chalk);
  font-weight: 600;
}

.dse-p a,
.dse-highlight a {
  color: var(--signal);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}

.dse-p a:hover,
.dse-highlight a:hover {
  text-decoration-color: var(--signal);
  opacity: 1;
}

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

.dse-ul {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--muted);
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

.dse-ul li {
  margin-bottom: 0.4rem;
}

.dse-ul strong {
  color: var(--chalk);
  font-weight: 600;
}

.dse-address {
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--muted);
  margin: 0.75rem 0 1rem;
}

.dse-caps {
  font-family: var(--font-code);
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 0 0 1rem;
}

.dse-fine {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 1rem;
}

.dse-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dse-footer a {
  color: inherit;
  text-decoration: none;
}

.dse-footer a:hover {
  color: var(--signal);
}

/* Hervorgehobene Blöcke */
.dse-notice,
.dse-highlight {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--signal);
  padding: 1.2em 1.4em;
  font-family: var(--font-body);
  line-height: 1.7;
  color: var(--chalk);
}

.dse-notice {
  margin-bottom: 3rem;
  font-size: 0.9375rem;
}

.dse-highlight {
  margin: 1rem 0 1.25rem;
  font-size: 0.9rem;
}

.dse-notice strong,
.dse-highlight strong {
  color: var(--chalk);
  font-weight: 600;
}

/* Inhaltsverzeichnis */
.dse-toc {
  margin-bottom: 3.5rem;
}

.dse-toc-label {
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 0.9rem;
}

.dse-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
  border-top: 1px solid var(--line);
}

.dse-toc li {
  counter-increment: toc;
  margin: 0;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.dse-toc li::before {
  content: counter(toc, upper-roman) '.';
  display: inline-block;
  min-width: 3.4em;   /* Platz auch für "VIII." in Mono */
  padding-right: 0.5em;
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--signal);
}

.dse-toc a {
  color: var(--chalk);
  text-decoration: none;
}

.dse-toc a:hover {
  color: var(--signal);
}

/* Nummerierte Ziffern in Abschnitt I */
.agb-clause {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}

.agb-clause:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.agb-head {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--chalk);
  margin: 0 0 0.7rem;
  line-height: 1.15;
}

.agb-num {
  display: inline-block;
  min-width: 2.2em;
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--signal);
  vertical-align: baseline;
}

.agb-body {
  padding-left: 2.2em;
}

/* Nummerierte Unterabschnitte in II / III */
.dse-sub {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--chalk);
  margin: 2.5rem 0 0.9rem;
  line-height: 1.15;
}

.dse-sub:first-of-type {
  margin-top: 0;
}

/* Tabellen (Selbstbehalt, Nutzungsausfall) */
.dse-table-wrap {
  overflow-x: auto;
  margin: 0 0 1rem;
}

.dse-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
}

.dse-table th {
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0 0 0.6rem;
  border-bottom: 1px solid var(--signal);
}

.dse-table td {
  padding: 0.9rem 1rem 0.9rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.dse-table td:last-child {
  padding-right: 0;
  width: 34%;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.dse-table th:last-child {
  width: 34%;
}

.dse-table .dse-table-key {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--chalk);
  margin-bottom: 0.35rem;
}

/* Beschriftete Blöcke (Abgedeckt / Nicht abgedeckt / Begriffe / Obliegenheiten) */
.dse-box {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 1.3em 1.5em 1.4em;
  margin: 0 0 1.25rem;
}

.dse-box-label {
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 1rem;
}

.dse-box .dse-p,
.dse-box .dse-ul {
  color: var(--chalk);
}

.dse-box .dse-p:last-child,
.dse-box .dse-ul:last-child {
  margin-bottom: 0;
}

.dse-box .dse-ul {
  list-style: none;
  padding-left: 0;
  font-size: 0.9rem;
}

.dse-box .dse-ul li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.55rem;
}

.dse-box .dse-ul li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.dse-box .dse-ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 10px;
  height: 2px;
  background: var(--signal);
}

.dse-box .dse-ul li .dse-tag {
  display: inline-block;
  font-family: var(--font-code);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Obliegenheiten a) b) c) … */
.dse-duties {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--chalk);
}

.dse-duties li {
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}

.dse-duties li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.dse-duties strong {
  color: var(--chalk);
  font-weight: 600;
}

@media (max-width: 600px) {
  .dse-wrap { padding: 2rem var(--gutter) 4rem; }
  .agb-body { padding-left: 0; }
  .dse-table { min-width: 380px; }
}

/* ========================
   23. Aufklappbare Seitensektionen
   Genutzt von "Wichtige Hinweise" und "Rundum-Schutz" auf der Startseite.
   Gleiche Collapse-Mechanik wie die Equipment-Kategorien: grid-template-rows
   0fr → 1fr. Der geclippte Container darf deshalb KEIN vertikales Padding
   tragen — Abstände laufen über die Margins der Kinder.
======================== */
.section-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5em;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--chalk);
  text-align: left;
  cursor: pointer;
  transition: color 0.15s;
}

.section-toggle:hover {
  color: var(--signal);
}

.section-toggle-text {
  display: block;
  min-width: 0;
}

.section-toggle-title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 0.98;
  color: inherit;
  margin: 0;
}

/* Subline unter dem Titel — optisch identisch zum Eyebrow der übrigen
   Sektionen, nur eben unterhalb der Überschrift. */
.section-toggle-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-family: var(--font-code);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
}

.section-toggle-sub::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--signal);
  flex: none;
}

.section-toggle .equip-arrow {
  width: 18px;
  height: 18px;
}

.section-body-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.section-body-wrapper.is-open {
  grid-template-rows: 1fr;
}

.section-body-wrapper > .section-body {
  overflow: hidden;
  min-height: 0;
}

/* Abstand zum Toggle steckt im Kind, damit er im eingeklappten Zustand
   mitgeclippt wird. */
.section-body > *:first-child {
  margin-top: clamp(32px, 3vw, 48px);
}

/* ========================
   24. Artikel-Carousel (Startseite)
======================== */
/* Horizontal scrollbarer Streifen unter dem Hero. Inhalt und Reihenfolge
   kommen aus startseite.json (Verwaltung → Startseite), gerendert in
   js/main.js. Kein Auto-Advance: gescrollt wird per Wischen, Trackpad oder
   den beiden Pfeilen.

   Die Kartenbreite steuert --cards: der Wert ist die Anzahl gleichzeitig
   sichtbarer Karten, die Nachkommastelle das angeschnittene Exemplar, das
   unter dem rechten Verlauf verschwindet. */
#carousel {
  /* Der Hero liefert nach unten schon Abstand — hier oben keinen zweiten. */
  padding-top: 0;

  --cards:      3.4;
  --card-gap:   22px;
  /* Höhe von Name + Preis unter der Kachel — daran hängt die Unterkante der
     Pfeile, damit sie mittig auf der Bildfläche sitzen. js/main.js misst den
     Wert nach dem Rendern nach; der Startwert hier gilt, bis das passiert
     ist (12px + 2 × 1.3 × 0.9375rem + 6px + 1.4 × 0.8125rem). */
  --caption-h:  78px;
  --fade-width: clamp(70px, 12%, 130px);
}

#carousel .container {
  max-width: var(--content-width);
  margin: 0 auto;
}

.carousel-viewport {
  position: relative;
}

.carousel-track {
  display: flex;
  gap: var(--card-gap);
  margin: 0;
  /* 4px oben fangen den Hover-Lift der Karte ab, sonst clippt overflow-y. */
  padding: 4px 0 2px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-card {
  flex: 0 0 calc((100% - (var(--cards) - 1) * var(--card-gap)) / var(--cards));
  scroll-snap-align: start;
}

/* Sonst bliebe die letzte Karte bei mandatory-Snap unerreichbar, weil ihr
   Start-Punkt hinter dem maximalen Scroll-Offset liegt. */
.carousel-card:last-child {
  scroll-snap-align: end;
}

.carousel-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease;
}

/* Lichttisch-Kachel — identisches Rezept wie .artikel-image-wrap.
   Kein opacity hier: das zöge den Kachelgrund Richtung --ink und das
   Multiply der Fotos würde grau. Zustände laufen über die Rahmenfarbe. */
.carousel-tile {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--photo-tile);
  border: 1px solid var(--line);
  border-radius: var(--radius-photo);
  padding: 6px;
  isolation: isolate;
  transition: border-color 0.18s ease;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  mix-blend-mode: multiply;
}

/* Alle Namen bekommen gleich viel Platz, damit die Preise auf einer Linie
   sitzen — aber nur so viele Zeilen, wie der längste Name im Carousel
   wirklich braucht. --name-lines setzt js/main.js nach dem Messen; ohne JS
   bleibt es bei zwei. Zwei ist zugleich die harte Obergrenze (line-clamp). */
.carousel-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 12px;
  min-height: calc(var(--name-lines, 2) * 1.3em);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--chalk);
  transition: color 0.18s ease;
}

.carousel-price {
  display: block;
  margin-top: 6px;
  font-family: var(--font-code);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
}

.carousel-link:hover {
  transform: translateY(-2px);
}

.carousel-link:hover .carousel-tile,
.carousel-link:focus-visible .carousel-tile {
  border-color: var(--signal);
}

/* Der Preis ist bereits signalorange und bleibt es — beim Hover wandert nur
   der Name mit. */
.carousel-link:hover .carousel-name,
.carousel-link:focus-visible .carousel-name {
  color: var(--signal);
}

/* Verläufe an den Kanten — machen sichtbar, dass der Streifen weitergeht. */
.carousel-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--fade-width);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease;
  z-index: 1;
}

.carousel-fade--left {
  left: 0;
  background: linear-gradient(to right, var(--ink), transparent);
}

.carousel-fade--right {
  right: 0;
  background: linear-gradient(to left, var(--ink), transparent);
}

.carousel-viewport.is-at-start .carousel-fade--left,
.carousel-viewport.is-at-end .carousel-fade--right {
  opacity: 0;
}

/* Pfeile schweben über den Rändern und erscheinen bei Hover. Der bottom-Wert
   klammert sie auf die Bildfläche aus, damit sie nicht über dem Namen sitzen. */
.carousel-arrow {
  position: absolute;
  top: 0;
  bottom: var(--caption-h);
  width: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-heading);
  font-size: 2rem;
  line-height: 1;
  color: var(--chalk);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.18s ease;
  z-index: 2;
}

/* Die sichtbare Fläche ist ein Quadrat auf Ink-Grund mit Haarlinie — so bleibt
   der Pfeil auch über einer hellen Kachel lesbar. */
.carousel-arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  background: var(--ink);
  border: 1px solid var(--line);
  transition: border-color 0.18s ease;
  z-index: -1;
}

.carousel-arrow--prev { left: 0; }
.carousel-arrow--next { right: 0; }

#carousel:hover .carousel-arrow,
.carousel-arrow:focus-visible {
  opacity: 1;
}

.carousel-arrow:hover {
  color: var(--signal);
}

.carousel-arrow:hover::before {
  border-color: var(--signal);
}

/* #carousel mit im Selektor, damit diese Regel die Hover-Einblendung oben
   (die ebenfalls über die ID läuft) sicher schlägt. */
#carousel .carousel-viewport.is-at-start .carousel-arrow--prev,
#carousel .carousel-viewport.is-at-end .carousel-arrow--next {
  opacity: 0;
  pointer-events: none;
}

/* Auf Touch-Geräten zählt Wischen — Pfeile wären dort nur im Weg. */
@media (hover: none) {
  .carousel-arrow {
    display: none;
  }
}

@media (max-width: 600px) {
  #carousel {
    --cards:    2.4;
    --card-gap: 14px;
  }
}

/* Einblenden beim ersten Rendern, leicht versetzt. Die Animation sitzt auf
   der Karte, der Hover-Lift auf dem Link darin — sonst würde das
   animation-fill-mode des einen das transform des anderen überschreiben. */
@keyframes carousel-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.carousel-card {
  animation: carousel-in 0.5s ease both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

@media (prefers-reduced-motion: reduce) {
  .carousel-card {
    animation: none;
  }
  .carousel-link,
  .carousel-tile,
  .carousel-name,
  .carousel-fade,
  .carousel-arrow {
    transition: none;
  }
  .carousel-link:hover {
    transform: none;
  }
}