/* Fritzmobile GmbH — eigenes Stylesheet.
   Keine externen Fonts/CDNs: die CSP erlaubt nur 'self', der Type-Stack faellt
   also auf die UI-Schrift des Systems zurueck.

   Aufbau: Tokens -> Grundlagen -> Header -> Buttons -> Hero -> Sektionen ->
   Bausteine (Karten, Shop/Anfragekorb, Galerie, FAQ, Kontakt, CTA) -> Footer
   -> Responsive. Basis ist clients/fhb/website/site/styles.css (Layout-
   Primitive), die Shop-/Anfragekorb-Klassen kommen aus clients/ack/website
   (dort ausfuehrlich begruendet), Farben und Tokens sind eigene. */

:root {
  /* Aus dem Kundenlogo gemessen (media/img/logo.webp): das kraeftige Gruen
     der Marke und das mittlere Grau der "mobile"-Haelfte. */
  --accent: #5a9a1f;
  --accent-deep: #4c8419;
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --section: clamp(56px, 8vw, 104px);
  --shadow: 0 1px 2px rgba(14, 18, 12, .05), 0 12px 32px -20px rgba(14, 18, 12, .28);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Hell ist die Voreinstellung (siehe theme.js); nur wer sein System auf
   dunkel gestellt hat, bekommt den Dunkelmodus. */
:root,
:root[data-theme="light"] {
  --bg: #f6f8f4;
  --bg-2: #eef1ea;      /* getoente Sektion */
  --surface: #ffffff;
  --line: #dde3d6;
  --line-strong: #c3ccb8;
  --text: #171a14;
  --text-dim: #545e4c;
  --text-faint: #7c8672;
  --img-bg: #eceee7;
  --accent: #4c8419;    /* auf Weiss braucht das Gruen Tiefe (Kontrast >= 4.5:1) */
  --accent-deep: #3f6f15;
}

:root[data-theme="dark"] {
  --bg: #12140f;
  --bg-2: #191c14;
  --surface: #1d2117;
  --line: #2f3527;
  --line-strong: #424a36;
  --text: #edf1e6;
  --text-dim: #b6bfab;
  --text-faint: #8b9480;
  --img-bg: #191c14;
  --accent: #8fd151;
  --accent-deep: #5a9a1f;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0 0 .6em;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(1.85rem, 4.6vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.18rem; line-height: 1.3; }

p { margin: 0 0 1em; }

.lead { font-size: clamp(1.06rem, 1.5vw, 1.2rem); color: var(--text-dim); max-width: 56ch; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.kicker {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent-deep);
  color: #fff;
  padding: 12px 18px;
  z-index: 999;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
}
.skip:focus { left: 0; }

:where(a, button, summary, input, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------------------------------------------ header */

.top {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.top-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 70px;
}

/* Das Kundenlogo ist ein JPG mit weissem Grund (keine Transparenz) — liegt
   deshalb in beiden Farbschemata auf einer eigenen weissen Karte, statt eine
   zweite, aufgehellte Bilddatei zu brauchen. */
.brand {
  display: flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  border: 1px solid var(--line);
}
.brand img { height: 32px; width: auto; flex: none; display: block; }

.nav { display: flex; align-items: center; gap: 2px; }

.nav a {
  position: relative;
  text-decoration: none;
  color: var(--text-dim);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a[aria-current] { color: var(--text); }
.nav a[aria-current]::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.nav a.nav-cta {
  background: var(--accent-deep);
  color: #fff;
  padding: 10px 16px;
}
.nav a.nav-cta:hover { color: #fff; }
.nav a.nav-cta[aria-current]::after { display: none; }

.top-actions { display: flex; align-items: center; gap: 8px; }

.icon-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-dim);
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); }
.icon-btn svg { width: 19px; height: 19px; }

:root[data-theme="dark"] .i-moon { display: none; }
:root:not([data-theme="dark"]) .i-sun { display: none; }

.nav-toggle { display: none; }

.cart-btn { position: relative; }
.cart-btn[hidden] { display: none; }
.cart-count {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 19px; height: 19px;
  border-radius: 999px;
  background: var(--accent-deep);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  padding: 0 4px;
}

/* ------------------------------------------------------------------ buttons */

.btn {
  --btn-bg: var(--accent-deep);
  --btn-fg: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--ease), box-shadow .18s var(--ease),
              border-color .18s var(--ease), color .18s var(--ease), transform .1s var(--ease);
}
.btn:hover { box-shadow: 0 8px 22px -12px rgba(63, 111, 21, .8); }
.btn:active { transform: scale(.96); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(2px); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover { box-shadow: none; border-color: var(--accent); color: var(--accent); }

.btn-sm { padding: 9px 15px; font-size: .9rem; border-radius: 9px; }

/* ------------------------------------------------------------------ motion
   Zwei Muster: (1) Hero/Seitenkopf blenden per @keyframes beim Laden ein --
   braucht kein JS, laeuft also auch ohne app.js. (2) Weiter unten liegende
   Bloecke (.reveal/.reveal-stagger) blenden erst beim Scrollen ein, das
   uebernimmt ein IntersectionObserver in app.js. Ohne JS (noscript, Fehler,
   IntersectionObserver fehlt) bleiben sie sonst unsichtbar -- siehe die
   <noscript>-Regel in head() und den Fallback in app.js. prefers-reduced-motion
   ist bereits global auf .01ms Dauer gestellt (siehe oben), Inhalte springen
   dort also sofort in den Endzustand statt zu animieren. */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.hero .eyebrow, .hero h1, .hero .lead, .hero-cta,
.page-hero .kicker, .page-hero h1, .page-hero .lead, .page-hero-cta {
  animation: rise-in .7s var(--ease) both;
}
.hero h1, .page-hero h1 { animation-delay: .06s; }
.hero .lead, .page-hero .lead { animation-delay: .13s; }
.hero-cta, .page-hero-cta { animation-delay: .2s; }

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.in-view { opacity: 1; transform: none; }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.reveal-stagger.in-view > * { opacity: 1; transform: none; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: .05s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: .1s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: .15s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: .2s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: .25s; }
.reveal-stagger.in-view > *:nth-child(n+7) { transition-delay: .3s; }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 11vw, 132px) 0 clamp(56px, 9vw, 112px);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero::before {
  background: url("img/werkstatt.webp") center 55% / cover no-repeat;
}
.hero::after {
  background:
    linear-gradient(96deg, rgba(11, 14, 8, .86) 0%, rgba(11, 14, 8, .78) 26%,
                    rgba(11, 14, 8, .62) 48%, rgba(11, 14, 8, .44) 68%,
                    rgba(11, 14, 8, .3) 85%, rgba(11, 14, 8, .26) 100%),
    linear-gradient(180deg, rgba(11, 14, 8, .3) 0%, rgba(11, 14, 8, .08) 40%,
                    rgba(11, 14, 8, .4) 100%);
}

.hero-inner { max-width: 720px; }
.hero h1 { color: #fff; max-width: 20ch; text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
.hero .lead {
  color: #eef3e8;
  max-width: 50ch;
  margin-bottom: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding: 7px 15px;
  border-radius: 999px;
  color: #d7f2ba;
  background: rgba(9, 12, 6, .55);
  border: 1px solid rgba(215, 242, 186, .38);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #8fd151;
  box-shadow: 0 0 0 4px rgba(143, 209, 81, .25);
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero .btn-ghost,
.page-hero.has-img .btn-ghost {
  --btn-fg: #ffffff;
  --btn-bg: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .5);
  backdrop-filter: blur(4px);
}
.hero .btn-ghost:hover,
.page-hero.has-img .btn-ghost:hover {
  --btn-bg: rgba(255, 255, 255, .2);
  border-color: #fff;
  color: #fff;
}

.factbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px clamp(18px, 3vw, 34px);
}
.stat { min-width: 0; padding: clamp(20px, 3vw, 30px) 0; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: clamp(18px, 3vw, 34px); }
.stat b {
  display: block;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  letter-spacing: -.02em;
  color: var(--text);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums; /* Ziffern beim Hochzaehlen (app.js) wackeln sonst in der Breite */
}
.stat span { font-size: .88rem; color: var(--text-dim); }

/* ------------------------------------------------------------------ sections */

section { padding: var(--section) 0; }
.section-alt { background: var(--bg-2); }

.head { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 44px); }
.head p { color: var(--text-dim); margin-bottom: 0; }
.head h2 { margin-bottom: .35em; }

/* ------------------------------------------------------------------ cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.card:hover { border-color: var(--accent); box-shadow: 0 14px 34px -22px rgba(14, 18, 12, .5); }

.card-media { aspect-ratio: 4 / 3; background: var(--img-bg); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }

.card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.card-body h3 { margin-bottom: .4em; font-size: 1.05rem; }
.card-body p { color: var(--text-dim); font-size: .95rem; margin-bottom: 16px; }

.card-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: .93rem;
  color: var(--accent);
}
.card-more svg { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.card:hover .card-more svg { transform: translateX(4px); }

.cards-note {
  max-width: 62ch;
  margin: clamp(22px, 3vw, 32px) 0 0;
  color: var(--text-dim);
  font-size: .98rem;
}
.cards-note a { color: var(--accent); font-weight: 600; }

/* Pfeil-Icon in Fliesstext-Links (z.B. .cards-note) -- ohne diese Regel
   rendert das unsized inline-<svg> in Browser-Standardgroesse (riesig). */
.inline-arrow svg { width: 15px; height: 15px; vertical-align: -2px; flex: none; }

/* Kompakte Alternative zu .cards fuer Kategorien mit vielen Geschwistern
   (aktuell nur "zubehoer", 18 Unterkategorien) -- kleines Foto statt grosser
   Bildkarte, damit viele Eintraege als Liste scannbar bleiben statt als
   Bildwand, aber keine Kachel ohne jedes Bild wirkt. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 10px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 14px 34px -22px rgba(14, 18, 12, .5); }
.tile-media {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: calc(var(--radius-sm) - 4px);
  background: var(--img-bg);
  overflow: hidden;
}
.tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.tile:hover .tile-media img { transform: scale(1.08); }
.tile-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tile b { font-size: .95rem; color: var(--text); }
.tile span { font-size: .82rem; color: var(--text-faint); }

/* ------------------------------------------------------------------ about */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.split img { border-radius: var(--radius); }
.split p { color: var(--text-dim); }

/* ------------------------------------------------------------------- shop */

.pfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: flex-end;
  justify-content: space-between;
  margin: 30px 0 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.chip-btn {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: .88rem;
  font-weight: 600;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.chip-btn span { opacity: .6; font-family: var(--mono); font-size: .85em; }
.chip-btn:hover { border-color: var(--line-strong); color: var(--text); }
.chip-btn.is-on { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.chip-btn.is-on span { opacity: .8; }

.psearch { display: grid; gap: 7px; min-width: 280px; flex: 1 1 280px; max-width: 420px; }
.psearch label { font-size: .86rem; font-weight: 700; color: var(--text-dim); }
.psearch input {
  font: inherit;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 11px 14px;
}
.psearch input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.tcount { font-size: .82rem; color: var(--text-faint); margin: 0; }

.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(266px, 100%), 1fr));
  gap: clamp(16px, 2vw, 22px);
}
.pcard {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.pcard:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -22px rgba(14, 18, 12, .45);
}
.pcard[hidden] { display: none; }
/* Produktfotos sind freigestellte Katalogbilder auf weissem Grund: ein
   grosszuegiges Passepartout (padding statt volle Flaeche) und eine dezente
   Grundflaeche lassen sie wie Ware in einem hellen Regal wirken, nicht wie
   zugeschnittene Thumbnails. Das Bild wird beim Hover minimal groesser —
   das allein gibt der Karte Bewegung, ohne dass Text mitwackelt. */
.pcard-media {
  appearance: none;
  border: 0;
  padding: 18px;
  background:
    radial-gradient(120% 120% at 50% 8%, color-mix(in srgb, var(--accent) 6%, var(--img-bg)) 0%, var(--img-bg) 62%);
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.pcard-media img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .35s var(--ease);
}
.pcard:hover .pcard-media img { transform: scale(1.045); }
.pcard-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  border-top: 1px solid var(--line);
}
.pcard-cat {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 7px;
}
.pcard h3 { font-size: .98rem; line-height: 1.32; margin-bottom: 4px; min-height: 2.6em; }
.pcard-sku { font-size: .76rem; color: var(--text-faint); margin: 0 0 9px; font-family: var(--mono); }
.pcard-desc-full { margin-top: 10px; font-size: .88rem; color: var(--text-dim); }
.pcard-desc-full p { margin-bottom: .8em; }
.pcard-desc-full p:last-child { margin-bottom: 0; }
.pcard-more {
  display: inline-block;
  margin-top: 10px;
  font-size: .84rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.pcard-more:hover { text-decoration: underline; }
.pcard-foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.price-pill {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: -.01em;
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 8px;
  padding: 5px 11px;
  white-space: nowrap;
}
:root[data-theme="dark"] .price-pill { color: var(--accent); }
.add-item.is-added { background: transparent; color: var(--accent); border-color: var(--accent); }
.pempty { margin-top: 26px; color: var(--text-dim); }

.pcard-details { margin-top: 12px; font-size: .86rem; }
.pcard-details summary {
  cursor: pointer;
  color: var(--text-dim);
  font-weight: 700;
  list-style: none;
}
.pcard-details summary::-webkit-details-marker { display: none; }
.pcard-details summary::before { content: "+ "; color: var(--accent); }
.pcard-details[open] summary::before { content: "\2212 "; }
.pcard-details dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 10px 0 0;
}
.pcard-details dt { color: var(--text-faint); }
.pcard-details dd { margin: 0; color: var(--text-dim); }

.shop-note {
  max-width: 74ch;
  font-size: .92rem;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 14px 18px;
  margin: 26px 0 0;
}
.shop-note strong { color: var(--text); }

/* ------------------------------------------------------- Anfragekorb */

.cart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}
.cart-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.cart-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
}
.cart-list strong { display: block; font-size: .93rem; font-weight: 600; }
.cart-price { font-family: var(--mono); font-size: .85rem; color: var(--accent); }
.cart-del {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-dim);
  width: 30px; height: 30px;
  border-radius: 8px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.cart-del:hover { color: #d1483a; border-color: #d1483a; }
.cart-empty { color: var(--text-faint); font-size: .93rem; }

/* ------------------------------------------------------------------ gallery */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 12px;
}
.gallery button {
  appearance: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--img-bg);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
  transition: border-color .2s var(--ease);
}
.gallery button:hover { border-color: var(--accent); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }

/* lightbox */
.lb[hidden] { display: none; }
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 10, 6, .94);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 18px;
}
.lb-stage { display: grid; place-items: center; min-height: 0; }
.lb-stage img {
  max-width: min(1100px, 100%);
  max-height: 100%;
  width: auto;
  border-radius: var(--radius-sm);
  background: #fff;
}
.lb-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 14px;
  color: #dbe3d3;
  font-size: .9rem;
  font-family: var(--mono);
}
.lb-btn {
  appearance: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lb-btn:hover { background: rgba(255, 255, 255, .16); }
.lb-btn svg { width: 20px; height: 20px; }
.lb-close { position: absolute; top: 16px; right: 16px; }

/* ------------------------------------------------------------------ faq */

.faq { max-width: 70ch; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 4px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.04rem;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  margin-left: auto;
  flex: none;
  width: 9px; height: 9px;
  border-right: 2.2px solid var(--accent);
  border-bottom: 2.2px solid var(--accent);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq-body { padding: 0 4px 20px; max-width: 66ch; }
.faq-body p { color: var(--text-dim); margin: 0; }
.faq-body a { color: var(--accent); }

/* ------------------------------------------------------------------ contact */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.info-card + .info-card { margin-top: 16px; }
.info-card h3 { font-size: 1.05rem; }

.addr { font-style: normal; color: var(--text-dim); }
.addr strong { color: var(--text); }

.hours { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; font-size: .95rem; color: var(--text-dim); }
.hours li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; }
.hours strong { color: var(--text); }

.social-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.social-row a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-dim);
  text-decoration: none;
}
.social-row a:hover { border-color: var(--accent); color: var(--accent); }

.geo-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
}
.geo-line .coords { font-family: var(--mono); font-size: .8rem; color: var(--text-faint); }

/* form */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .86rem; font-weight: 700; color: var(--text-dim); }
.field input,
.field textarea {
  font: inherit;
  font-size: .98rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 14px;
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .84rem; color: var(--text-faint); margin: 0; }
.form-msg { font-size: .94rem; font-weight: 600; margin: 0; min-height: 1.4em; }
.form-msg[data-state="ok"] { color: #1c7a4b; }
.form-msg[data-state="err"] { color: #b3261e; }
:root[data-theme="dark"] .form-msg[data-state="ok"] { color: #58cf90; }
:root[data-theme="dark"] .form-msg[data-state="err"] { color: #ff8a7a; }

/* ------------------------------------------------------------------ CTA band */

.cta-band { background: var(--bg-2); border-top: 1px solid var(--line); }
.cta-inner { padding: clamp(44px, 7vw, 80px) var(--gutter); text-align: center; }
.cta-inner > div:first-child { max-width: 58ch; margin-inline: auto; }
.cta-inner h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.cta-inner p { color: var(--text-dim); }
.cta-note { font-size: .92rem; color: var(--text-faint); margin-bottom: 0; }

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 26px;
}
.cta-alt { flex-basis: 100%; font-size: .9rem; color: var(--text-faint); margin: 4px 0 0; }
.cta-alt a { color: var(--accent); font-weight: 600; }

/* --------------------------------------------------------- weiter-Links */

.sib-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}
.sib-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: .96rem;
  color: var(--text-dim);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.sib-list a::before { content: "\203A"; color: var(--accent); font-weight: 800; }
.sib-list a:hover { border-color: var(--accent); color: var(--text); }

/* ------------------------------------------------------------------ footer */

.foot {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: clamp(40px, 6vw, 64px) 0 28px;
  font-size: .95rem;
}
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.foot h4 {
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot a { color: var(--text-dim); text-decoration: none; }
.foot a:hover { color: var(--accent); }

.foot .legal .credit { flex-basis: 100%; }
.foot .legal .credit a { display: inline; padding: 0; }
.foot-route { margin: 12px 0 0; }
.foot-route a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  color: var(--text-dim);
  text-decoration: none;
}
.foot-route a:hover { color: var(--accent); }
.foot-route svg { width: 15px; height: 15px; flex: none; }

.foot .legal {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  color: var(--text-faint);
  font-size: .86rem;
}

/* ------------------------------------------------------- crumbs + page hero */

.crumbs { border-bottom: 1px solid var(--line); font-size: .85rem; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  list-style: none;
  margin: 0;
  padding: 12px 0;
  color: var(--text-faint);
}
.crumbs li + li::before { content: "\203A"; margin-right: 10px; color: var(--line-strong); }
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs li[aria-current] { color: var(--text); font-weight: 600; }

.page-hero {
  padding: clamp(40px, 6vw, 76px) 0 clamp(32px, 4vw, 56px);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 { max-width: 30ch; margin-bottom: .4em; }
.page-hero .lead { margin: 0; max-width: 60ch; }
.page-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ------------------------------------------------------------------ prose */

.prose-narrow { max-width: 68ch; }
.wrap.prose-narrow,
.wrap.prose { max-width: var(--maxw); }
.wrap.prose-narrow > * { max-width: 68ch; }
.wrap.prose > * { max-width: 70ch; }
.prose-narrow h2,
.prose-narrow h3 {
  margin: 0 0 .5em;
  padding-top: 1.9em;
  border-top: 1px solid var(--line);
  font-size: clamp(1.18rem, 1.8vw, 1.42rem);
}
.prose-narrow > :is(h2, h3):first-child { padding-top: 0; border-top: 0; }
.prose-narrow p { color: var(--text-dim); margin-bottom: 1.4em; }
.prose-narrow p:last-child { margin-bottom: 0; }
.prose-narrow a { color: var(--accent); }

/* Lange Kategorie-Einleitungen: erster Absatz sichtbar, Rest eingeklappt --
   echtes, crawlbares HTML (kein display:none), siehe render_category(). */
.more summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: .93rem;
  color: var(--accent);
  list-style: none;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; font-weight: 800; }
.more[open] summary::before { content: "\2212"; }
.more[open] summary { margin-bottom: 14px; }

.page { padding: var(--section) 0; }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.9em; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.prose p, .prose li { color: var(--text-dim); }
.prose dl { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0 0 1.8em; }
.prose dt { font-weight: 700; color: var(--text); }
.prose dd { margin: 0; color: var(--text-dim); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .5em; }
.prose a { color: var(--accent); }

/* ------------------------------------------------------------------ responsive */

@media (max-width: 1000px) {
  .split, .contact-grid, .cart-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav-toggle { display: grid; }
  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px var(--gutter) 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 13px 8px; font-size: 1.02rem; }
  .nav a[aria-current]::after { left: 8px; right: auto; width: 18px; bottom: 6px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 18px 0; }
  .stat + .stat { border-left: 0; padding-left: 0; }
  .stat:nth-child(2n) { padding-left: clamp(18px, 4vw, 34px); border-left: 1px solid var(--line); }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  h1, h2, h3 { hyphens: auto; }
  .prose dl { grid-template-columns: 1fr; gap: 2px 0; }
  .prose dt { margin-top: 12px; }
  .brand img { height: 26px; }
  .foot-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .cards-4 { grid-template-columns: 1fr; }
  .hero-cta .btn,
  .page-hero-cta .btn,
  .cta-actions .btn { flex: 1 1 100%; }
  .pfilter { flex-direction: column; align-items: stretch; }
  .psearch { max-width: none; }
}

/* 320px-Foldable-Untergrenze, bewusst am Dateiende (ueberschreibt .psearch
   und .faq summary, die weiter oben stehen). */
@media (max-width: 340px) {
  .psearch { min-width: 0; flex: 1 1 auto; max-width: none; }
  .psearch input { width: 100%; min-width: 0; }
  h1, h2, h3 { overflow-wrap: anywhere; }
}

@media print {
  .top, .foot, .lb, .hero::before, .hero::after, .gallery, .form { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a { text-decoration: none; }
}