@charset "UTF-8";
/* =====================================================================
   einfachhochzeit — Design System (v1)
   Neues Branding: modern-editorial, warm, ruhig.
   Fonts vorerst System-Stack (Mac-optimiert); später self-hosted
   Fraunces (Display-Serif) + Inter (Grotesk) in /assets/fonts.
   ===================================================================== */

:root {
  /* --- Farben --- */
  --bg:          #faf8f4;   /* warmes Papier */
  --bg-2:        #f2ede4;   /* Sektions-Wechsel */
  --surface:     #ffffff;
  --ink:         #22211d;   /* warmes Fast-Schwarz */
  --ink-soft:    #57524a;   /* Fließtext gedämpft */
  --muted:       #6e675c;   /* dezent - vorher #8d8579, Kontrast 3,1-3,6 zu 1;
                               jetzt 4,8-5,6 auf allen Flaechen (16.10.2026) */
  --line:        #e7e0d5;   /* Rahmen/Trenner */

  --accent:      #6f7d5c;   /* Salbei / Eukalyptus */
  --accent-deep: #515d3f;   /* CTA / Hover */
  --accent-soft: #edf0e6;   /* Flächen */
  --warm:        #bd8a67;   /* warmer Zweitakzent (sparsam) */

  --star:        #c8a24a;
  --whatsapp:    #25d366;

  /* --- Typografie --- */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino,
           "Book Antiqua", Georgia, serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
           Arial, sans-serif;

  /* --- Maße --- */
  --wrap: 1140px;
  --wrap-narrow: 760px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 4px 14px rgba(34, 33, 29, .06);
  --shadow:    0 12px 34px rgba(34, 33, 29, .10);
  --gap: clamp(16px, 3vw, 28px);
  --section-y: clamp(56px, 8vw, 112px);
}

/* --- Reset / Basis --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16px, 1.05vw + 12px, 18px);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  color: var(--ink);
}
h1 { font-size: clamp(2.3rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
p  { margin: 0 0 1rem; color: var(--ink-soft); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ink-soft); }

/* --- Layout-Helfer --- */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.narrow { width: min(100% - 40px, var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-2); }
.section--ink { background: var(--ink); color: #efeae1; }
.section--ink h2, .section--ink h3 { color: #fff; }
.section--ink p { color: #cfc8bb; }
.center { text-align: center; }
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  font-weight: 600;
  /* accent-deep statt accent (16.10.2026): Bei .78rem reichte das helle
     Salbei auf --bg-2 nur fuer 3,8 zu 1 Kontrast. */
  color: var(--accent-deep);
  margin: 0 0 .9rem;
}
.section--ink .eyebrow { color: #b9c4a3; }
.stack > * + * { margin-top: clamp(14px, 2vw, 22px); }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  padding: .85em 1.5em; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  line-height: 1; text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent-deep); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: #3f4a30; box-shadow: var(--shadow); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
/* Auf beigem Grund verschwindet der helle Rahmen - dort weiss gefuellt
   wie die Karten daneben (Noah, 13.10.2026). Eigene Gestaltungen weiter
   unten (.kontakt-band) gehen vor. */
.section--alt .btn--ghost { background: var(--surface); }
.btn--light { background: #fff; color: var(--ink); }
/* Hell mit grüner Schrift statt grüner Fläche: WhatsApp ist der Nebenweg.
   Als vollflächiger Knopf war er das farbigste Element der Kaufbox und zog
   die Aufmerksamkeit vom Buchen weg. */
/* Schrift und Logo in dunklerem WhatsApp-Gruen (16.10.2026): Das
   Markengruen auf Weiss hat nur 2,0 zu 1 Kontrast - als Rahmen genuegt es,
   als Schrift nicht. #168543 erreicht 4,7 zu 1. */
.btn--wa {
  background: #fff; color: #168543; border: 1px solid var(--whatsapp);
}
.btn--wa:hover { background: #f2fdf6; color: #168543; }
/* Das Logo kommt aus dem CSS, nicht aus dem HTML: So traegt es jeder
   WhatsApp-Knopf, auch die aus JavaScript und den erzeugten Plattformseiten,
   ohne dass eine davon angefasst werden muss. Als Maske nimmt es die
   Schriftfarbe an. */
.btn--wa::before {
  content: ""; flex: none; width: 1.15em; height: 1.15em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn--lg { padding: 1em 1.9em; font-size: 1.05rem; }
.btn--block { display: flex; width: 100%; }
.btn--sm { padding: .55em 1.1em; font-size: .86rem; }

/* --- Header / Nav --- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 248, 244, .82);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; }
.brand span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: .96rem; font-weight: 500; color: var(--ink-soft); transition: color .15s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 12px; }

/* --- Verleih-Dropdown (native <details>, klick-basiert, barrierefrei) --- */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown > summary {
  display: flex; align-items: center; gap: 5px; cursor: pointer; list-style: none;
  font-size: .96rem; font-weight: 500; color: var(--ink-soft); transition: color .15s;
}
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::after { content: "▾"; font-size: .65em; color: var(--muted); transition: transform .15s; }
.nav-dropdown:hover > summary,
.nav-dropdown[open] > summary { color: var(--ink); }
.nav-dropdown[open] > summary::after { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 14px); left: -14px; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 8px; min-width: 230px;
  display: grid; gap: 1px;
}
.nav-dropdown-menu a {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: .92rem; color: var(--ink-soft); white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--accent-soft); color: var(--accent-deep); }
.nav-dropdown-menu .nav-dropdown-all {
  font-weight: 600; color: var(--accent-deep); border-bottom: 1px solid var(--line);
  border-radius: 9px 9px 0 0; margin-bottom: 4px; padding-bottom: 11px;
}
/* Klick außerhalb schließt (nativer <details>-Fokusverlust reicht meist;
   zusätzlich schließen wir bei Klick auf einen Menüpunkt selbst nicht nötig,
   da Navigation die Seite ohnehin wechselt). */
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .2s; }

/* --- Hero --- */
.hero { position: relative; padding-block: clamp(48px, 7vw, 96px); overflow: hidden; }
.hero h1 { margin-bottom: .3em; }
.hero .lead { max-width: 34ch; }
/* In zentrierten Hero-Sektionen (.center) muss der schmalere Lead-Block
   selbst mittig sitzen, sonst zentriert nur der Text INNERHALB der Box,
   während die Box am linken Rand hängt. */
.hero.center .lead,
.hero .center .lead { max-width: 46ch; margin-inline: auto; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.6rem; }
.hero-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 1.8rem; font-size: .92rem; color: var(--muted); }
.stars { color: var(--star); letter-spacing: 2px; }

/* --- Verleih-Conversion: Preis-Badge, Vertrauens-Leiste, CTA-Zusätze --- */
/* Die Pille enthält nur noch den Betrag – vorher stand der Zusatztext mit
   darin, wodurch beides umbrach und die runde Form zerriss. */
/* Der Preis ist die wichtigste Zahl der Seite. Bis September 2026 stand er in
   einer grünen Pille — die rahmte ihn ein, statt ihn zu zeigen, und war ein
   Kasten mehr in einer Kaufbox, die selbst schon einer ist. Jetzt trägt ihn
   die Schriftgröße. */
/* Bleibt in Fraunces. Am 25.09.2026 probeweise auf Inter halbfett gestellt,
   weil die Serifenziffern verspielt wirkten - in Inter wirkte der Preis aber
   billig (Noah). */
.price-badge {
  display: inline-block; white-space: nowrap;
  font-family: var(--serif); font-size: clamp(1.7rem, 3.4vw, 2.15rem); line-height: 1.05;
  color: var(--ink); background: none; padding: 0;
}
.price-zeile {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  margin: 0 0 4px;
}
.price-zeile small { font-size: .86rem; font-weight: 500; color: var(--muted); }
.trust-bar { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 1.5rem; }
.trust-item { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; font-weight: 500; color: var(--ink-soft); }
.trust-item svg { flex: none; color: var(--accent); }
.cta-note { margin-top: 12px; font-size: .85rem; color: var(--muted); }
.hero-contact { display: inline-block; margin-top: 10px; font-size: .9rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.hero-contact:hover { color: var(--ink); }

.media-note {
  position: absolute; inset: auto 14px 14px; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
  padding: 7px 12px; border-radius: 999px; font-size: .78rem; color: var(--ink-soft);
  border: 1px solid var(--line);
}
/* --- Cinematic Hero (nur Startseite) --- */
.hero-cinema {
  position: relative; overflow: hidden;
  min-height: 88svh; min-height: 88vh;
  display: flex; align-items: center;
  background: var(--bg);
}
/* Heller, warmer Verlauf-Hintergrund (ersetzt das frühere Hintergrundvideo) */
.hero-cinema-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 65% at 82% 40%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 62%),
    linear-gradient(165deg, #fdfcf9 0%, var(--accent-soft) 100%);
}
/* Ehemaliges Hintergrundvideo als Foto – nach links (hinter dem Text) ausgeblendet, sonst deutlich sichtbar */
.hero-cinema-bg::after {
  content: ""; position: absolute; inset: 0;
  background: url("../img/home-hero-poster.webp") center/cover no-repeat;
  opacity: .5;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 38%, rgba(0,0,0,.92) 68%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.5) 38%, rgba(0,0,0,.92) 68%, #000 100%);
}
/* Schützender Verlauf oben, damit die Header-Navigation über dem Foto lesbar bleibt */
.hero-cinema-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(253,252,249,.7) 0%, rgba(253,252,249,0) 18%);
}
.hero-cinema-content {
  position: relative; z-index: 2; width: min(100% - 40px, var(--wrap));
  margin-inline: auto; padding-top: 116px; padding-bottom: clamp(48px, 8vh, 96px);
  display: grid; grid-template-columns: 1.02fr .98fr; align-items: center;
  gap: clamp(24px, 5vw, 60px);
}
.hero-cinema .eyebrow { color: var(--accent-deep); }
.hero-cinema h1 {
  color: var(--ink); max-width: 15ch;
  font-size: clamp(2.3rem, 4.6vw, 4rem);
}
.hero-cinema .lead { color: var(--ink-soft); max-width: 46ch; }
.hero-cinema .hero-trust { color: var(--muted); }

/* ---- Fliegende Produkt-Showcase (rechte Hero-Spalte) ---- */
/* overflow: hidden → Produkte tauchen am Spaltenrand auf, statt über den Text zu wandern */
.hero-showcase { position: relative; }
.hero-showcase-stage {
  position: relative; width: 100%; max-width: 440px;
  aspect-ratio: 4 / 5; margin-inline: auto;
  overflow: hidden;
}
.hero-showcase-item {
  position: absolute; inset: 0; margin: 0; z-index: 1;
  opacity: 0; visibility: hidden; will-change: transform, opacity;
}
/* Ganze Kachel klickbar → zur jeweiligen Produktseite */
.hero-showcase-link {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  text-decoration: none; color: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero-showcase-link:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 8px; border-radius: 50%; }
/* Weiche, leicht getönte Kreis-Fläche (Medaillon), damit auch helle Produkte klar hervortreten */
.hero-showcase-imgwrap {
  position: relative; flex: 0 0 auto; height: 62%; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, color-mix(in srgb, var(--accent) 22%, white) 100%);
  box-shadow: 0 34px 60px -24px rgba(74, 64, 48, .40),
              inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hero-showcase-link:hover .hero-showcase-imgwrap,
.hero-showcase-link:focus-visible .hero-showcase-imgwrap {
  transform: translateY(-5px);
  box-shadow: 0 40px 70px -24px rgba(74, 64, 48, .48),
              inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.hero-showcase-item img {
  max-width: 76%; max-height: 76%; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(74, 64, 48, .28));
}
/* Preis-Stempel oben rechts auf dem Kreisrand – volle Farbe, daher immer lesbar */
.hero-showcase-stamp {
  position: absolute; top: 3%; right: 1%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: clamp(80px, 35%, 132px); aspect-ratio: 1; border-radius: 50%;
  background: var(--accent-deep); color: #fff;
  transform: rotate(-8deg); text-align: center; line-height: 1;
  box-shadow: 0 12px 24px -6px rgba(74, 64, 48, .5),
              inset 0 0 0 2px rgba(255, 255, 255, .38);
}
.hero-showcase-stamp b {
  font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
}
.hero-showcase-stamp small { font-weight: 500; font-size: .62em; opacity: .85; margin-top: 3px; white-space: nowrap; }
.hero-showcase-item.is-active {
  visibility: visible;
  animation: productFly 4.6s cubic-bezier(.22,.61,.36,1) both;
}
.hero-showcase-item.is-active .hero-showcase-stamp { animation: stampIn 4.6s cubic-bezier(.2,.8,.3,1.2) both; }
@keyframes productFly {
  0%   { opacity: 0; transform: translateX(-100%) rotate(-7deg) scale(.92); }
  15%  { opacity: 1; transform: translateX(0)     rotate(0)    scale(1);   }
  77%  { opacity: 1; transform: translateX(0)     rotate(0)    scale(1);   }
  100% { opacity: 0; transform: translateX(100%)  rotate(6deg) scale(.92); }
}
/* „Aufstempeln": erst nach dem Einschweben des Produkts drauf, mit kleinem Aufprall */
@keyframes stampIn {
  0%, 15%  { opacity: 0; transform: rotate(-8deg) scale(1.8); }
  22%      { opacity: 1; transform: rotate(-8deg) scale(.9);  }
  27%      { opacity: 1; transform: rotate(-8deg) scale(1.06); }
  32%, 74% { opacity: 1; transform: rotate(-8deg) scale(1);   }
  84%,100% { opacity: 0; transform: rotate(-8deg) scale(1);   }
}
@media (prefers-reduced-motion: reduce) {
  .hero-showcase-item { visibility: visible; transition: opacity .8s ease; animation: none !important; }
  .hero-showcase-item.is-active { opacity: 1; }
  .hero-showcase-item.is-active .hero-showcase-stamp { opacity: 1; transform: rotate(-8deg); }
}
/* Scroll-Indikator */
.hero-scroll {
  position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: 26px; height: 42px; border: 1.5px solid rgba(255,255,255,.6); border-radius: 999px;
}
.hero-scroll::after {
  content: ""; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px;
  border-radius: 999px; background: rgba(255,255,255,.85); transform: translateX(-50%);
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue { 0%,100% { transform: translate(-50%, 0); opacity: 1; } 65% { transform: translate(-50%, 14px); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .hero-scroll::after { animation: none; } }
@media (max-width: 860px) {
  .hero-cinema { min-height: auto; }
  .hero-cinema-content {
    grid-template-columns: 1fr; gap: clamp(20px, 5vw, 32px);
    padding-top: 104px; padding-bottom: 48px;
  }
  .hero-cinema-text { order: 1; }
  .hero-showcase { order: 2; }
  .hero-showcase-stage { max-width: 300px; }
  .hero-cinema h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
}

/* Header über dem Cinematic Hero: transparent, beim Scrollen solide */
body.home .site-header {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent; border-bottom-color: transparent;
  backdrop-filter: none;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
body.home .site-header .brand,
body.home .site-header .nav-links a,
body.home .site-header .nav-dropdown > summary { color: var(--ink-soft); }
body.home .site-header .brand { color: var(--ink); }
body.home .site-header .brand span { color: var(--accent); }
body.home .site-header .nav-toggle span { background: var(--ink); }
body.home .site-header.hdr-solid {
  background: rgba(250, 248, 244, .86);
  border-bottom-color: var(--line);
  backdrop-filter: saturate(180%) blur(12px);
}
body.home .site-header.hdr-solid .brand,
body.home .site-header.hdr-solid .nav-links a,
body.home .site-header.hdr-solid .nav-dropdown > summary { color: var(--ink-soft); }
body.home .site-header.hdr-solid .brand { color: var(--ink); }
body.home .site-header.hdr-solid .brand span { color: var(--accent); }
body.home .site-header.hdr-solid .nav-toggle span { background: var(--ink); }
/* Mobiles Slide-down-Menü braucht immer lesbare Farben */
@media (max-width: 860px) {
  body.home .nav-links a, body.home .nav-links .nav-dropdown > summary { color: var(--ink-soft); }
}

/* --- Cards / Grids --- */
.grid { display: grid; gap: var(--gap); }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 820px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
/* Knopf unter dem Produkttext ("Weitere Artikel ansehen"): am Handy
   mittig, am Rechner links unter dem linksbuendigen Text (Noah, 13.10.2026). */
@media (max-width: 819px) { .wrap.grid-2 > div > .hero-actions { justify-content: center; } }

/* Verweiszeile am Fuss einer Karte: Sie macht sichtbar, dass die Karte
   irgendwohin fuehrt - ohne sie sieht eine anklickbare Karte aus wie eine
   Infokachel. */
.karte-verweis {
  margin: 10px 0 0; font-size: .92rem; font-weight: 600; color: var(--accent-deep);
}

/* WhatsApp-Karte auf der Kontaktseite: Am Rechner steht rechts ein QR-Code,
   denn dort oeffnet der Link nur WhatsApp Web - die meisten schreiben aber
   vom Handy. Auf dem Handy selbst waere der Code sinnlos und bleibt weg. */
.wa-karte { display: flex; align-items: center; gap: 20px; }
.wa-karte-text { flex: 1; min-width: 0; }
/* Code und Unterschrift als eigene Kachel neben dem Text (Noah, 03.10.2026):
   frei in der weissen Karte wirkte der Code verloren, und die Unterschrift
   war breiter als er und hing links und rechts ueber. Jetzt auf seine Breite
   begrenzt, sie bricht mittig in zwei Zeilen. */
.wa-qr { display: none; margin: 0; flex: none; text-align: center;
  padding: 12px; background: var(--bg-2); border-radius: 14px; }
.wa-qr svg { display: block; width: 110px; height: 110px; background: #fff;
  padding: 4px; border-radius: 6px; margin: 0 auto; }
.wa-qr figcaption { max-width: 118px; margin: 8px auto 0; font-size: .75rem;
  line-height: 1.3; color: var(--ink-soft); }
@media (min-width: 820px) { .wa-qr { display: block; } }

/* --- Korbsymbol im Kopf ---------------------------------------------------
   Wird von verleih-korbsymbol.js eingehaengt, steht also in keiner HTML-Datei.
   Anders als der CTA-Knopf bleibt es auf dem Handy sichtbar: dort ist es der
   einzige Weg zurueck in die Buchung, wenn die Leiste am unteren Rand gerade
   nicht zu sehen ist. */

.vl-korbsymbol {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-right: 4px;
  border-radius: 999px; color: var(--ink); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.vl-korbsymbol:hover { background: var(--bg-2); }
.vl-korbsymbol svg { width: 23px; height: 23px; display: block; }

.vl-korbsymbol-zahl {
  position: absolute; top: 2px; right: 1px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--accent-deep); color: #fff;
  font-size: .7rem; font-weight: 700; line-height: 1;
}

/* Panel am Korbsymbol -------------------------------------------------------
   Antippen zeigt, was im Korb liegt, statt sofort in die Kasse zu springen.
   Es haengt an .nav-cta und nicht am Kopf: So sitzt es zuverlaessig unter dem
   Symbol, auch wenn der Kopf seine Breite aendert. Die Breitenformel haelt es
   auf dem Handy 14 Pixel vom Rand entfernt und laesst es am Rechner bei
   340 Pixeln stehen.

   Keine Mengenregler, keine Zeilenpreise - beides steht in der Kasse. Das
   Panel beantwortet nur die Frage "was liegt drin und was kostet es". */
.nav-cta { position: relative; }

.vl-korbpanel {
  position: absolute; z-index: 60;
  top: calc(100% + 12px); right: 0;
  width: min(340px, calc(100vw - 28px));
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); padding: 14px;
}
.vl-korbpanel[hidden] { display: none; }
/* Das Panel gehoert dem Wischen nach oben (verleih-korbsymbol.js), nur die
   Liste darf selbst scrollen - und reicht das Scrollen an ihrem Ende nicht
   an die Seite weiter. */
.vl-korbpanel { touch-action: none; }
.vl-korbpanel-liste { touch-action: pan-y; overscroll-behavior: contain; }

.vl-korbpanel-titel {
  margin: 0 0 2px; font-family: var(--serif); font-size: 1rem; font-weight: 600;
}
/* Kopfzeile: Ueberschrift links, Zeitraum als Pille rechts (Noah,
   25.09.2026). Klein und nicht einnehmend - die Artikel darunter sind die
   Hauptsache. Ist die Zeile zu schmal, rutscht die Pille darunter. */
.vl-korbpanel-kopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 10px; margin: 0 0 10px;
}
.vl-korbpanel-kopf .vl-korbpanel-titel { margin: 0; }

.vl-korbpille {
  display: inline-flex; align-items: stretch; height: 28px; flex: none;
  border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
  font-size: .76rem; color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vl-korbpille > span { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; }
.vl-korbpille-datum { font-weight: 600; }
.vl-korbpille svg { width: 13px; height: 13px; flex: none; color: var(--accent); }
.vl-korbpille-tage {
  background: var(--accent-soft); color: var(--accent-deep); font-weight: 600;
  border-left: 1px solid var(--line);
}
.vl-korbpille:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.vl-korbpille:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vl-korbpille--offen .vl-korbpille-datum { color: var(--accent-deep); }

/* Sprung aus dem Panel: Der Terminwaehler soll unter dem festen Kopf
   auftauchen, nicht dahinter. */
#eh-verleih-zeitraum { scroll-margin-top: 96px; }

/* Bei drei Artikelarten - mehr hatte bisher keine Buchung - wird die Liste nie
   lang. Die Hoehengrenze faengt nur den Ausreisser ab, damit das Panel auf dem
   Handy nicht ueber den Bildschirm hinauswaechst. */
.vl-korbpanel-liste {
  list-style: none; margin: -5px -8px 0; padding: 0 0 7px;
  display: flex; flex-direction: column; gap: 0;
  max-height: 44vh; overflow-y: auto;
  /* Die 40-px-Trefferflaeche des Kreuzes ragt 4 px ueber den Rand - ohne
     diese Zeile macht overflow-y daraus eine waagrechte Scrollleiste. */
  overflow-x: hidden;
  /* Die Liste ragt links und rechts 8 px hinaus, damit die hervorgehobene
     Zeile Luft hat - Scrollflaechen schneiden alles ab, was ueber ihren Rand
     geht. Der Trenner bleibt deshalb auf Textbreite, statt als Rahmen mit
     hinauszuragen. */
  background: linear-gradient(var(--line), var(--line)) center bottom / calc(100% - 16px) 1px no-repeat;
}
/* Polster auf der Zeile, nicht auf dem Link: So steht auch eine Zeile ohne
   Link (Artikel ohne Produktseite) buendig mit den anderen. */
.vl-korbpanel-liste li { display: flex; align-items: center; gap: 10px; padding: 8px 8px; }

/* Dieselbe Kachel wie im Warenkorb: Die Produktfotos sind freigestellt und
   ueberwiegend weiss - ohne Hintergrund verschwinden Stuhl und Stehtisch. */
.vl-korbpanel-bild {
  flex: none; width: 36px; height: 36px; border-radius: 7px;
  background: var(--bg-2); overflow: hidden;
}
.vl-korbpanel-bild img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vl-korbpanel-name {
  flex: 1; min-width: 0; font-size: .86rem; font-weight: 500; line-height: 1.3; color: var(--ink);
}
/* Menge rechtsbuendig, Einheit klein darunter - Ziffern gleich breit, damit
   die Zahlen untereinander sauber stehen. */
.vl-korbpanel-menge {
  flex: none; text-align: right; white-space: nowrap;
  font-size: .84rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.vl-korbpanel-menge small {
  display: block; font-size: .66rem; font-weight: 500; color: var(--muted);
}
/* Feine Trennlinien zwischen den Zeilen, auf Textbreite wie der Trenner
   unter der Liste. */
.vl-korbpanel-liste li + li {
  background: linear-gradient(var(--line), var(--line)) center top / calc(100% - 16px) 1px no-repeat;
}

/* Zeile als Link zur Produktseite. Die ganze Zeile ist die Flaeche, damit
   sie auf dem Handy leicht zu treffen ist. Beim Darueberfahren hebt sie sich
   als Kachel ab statt unterstrichen zu werden - eine Unterstreichung liess
   die Liste wie Fliesstext mit Links aussehen. */
.vl-korbpanel-zeile {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  color: inherit; text-decoration: none;
  margin: -8px -8px; padding: 8px 8px; border-radius: 10px;
  transition: background .15s ease;
}
.vl-korbpanel-zeile:hover,
.vl-korbpanel-zeile:focus-visible { background: var(--bg); }
.vl-korbpanel-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Entfernen je Zeile (Noah, 30.09.2026). Neben dem Link, nicht darin - ein
   Tipp auf den Namen fuehrt weiter zum Produkt. 40 px Trefferflaeche, das
   Zeichen selbst bleibt klein und zurueckgenommen. */
.vl-korbpanel-weg {
  flex: none; position: relative; width: 24px; height: 24px; margin: 0 -4px 0 -6px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
/* Sichtbar 24 px, getroffen wird auf 40 px. */
.vl-korbpanel-weg::before { content: ""; position: absolute; inset: -8px; }
.vl-korbpanel-weg svg { width: 10px; height: 10px; display: block; }
.vl-korbpanel-weg:hover, .vl-korbpanel-weg:active { background: var(--bg-2); color: var(--ink); }
/* Am Rechner erst beim Darueberfahren oder per Tastatur (Noah, 30.09.2026),
   im Ruhezustand bleibt die Liste ruhig. */
@media (hover: hover) and (pointer: fine) {
  .vl-korbpanel-weg { opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease; }
  .vl-korbpanel-liste li:hover .vl-korbpanel-weg,
  .vl-korbpanel-weg:focus-visible { opacity: 1; }
}
/* Am Handy entfernt Wischen - das Kreuz ist unsichtbar, bleibt aber fuer
   Screenreader da, die das Wischen nicht nutzen koennen. */
@media not all and (hover: hover) and (pointer: fine) {
  .vl-korbpanel-weg, .vl-weg-knopf {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* --- Zeile nach links wischen (verleih-korbsymbol.js) --------------------
   Hinter der wandernden Zeile liegt "Entfernen". Die Zeile bekommt waehrend
   des Wischens eine eigene Flaeche, sonst schiene der Grund durch. */
.vl-korbpanel-liste, .vl-korb-liste { position: relative; }
.vl-wisch-grund {
  position: absolute; left: 0; right: 0; z-index: 0;
  display: flex; align-items: center; justify-content: flex-end; padding: 0 18px;
  background: var(--bg-2); color: var(--ink);
  font-size: .84rem; font-weight: 600;
}
.vl-wisch-zeile { position: relative; z-index: 1; background-color: var(--surface); }
.vl-korbpanel-weg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Platzhalter der entfernten Zeile - gleich hoch wie eine Artikelzeile,
   damit die Liste nicht springt. */
.vl-korbpanel-liste li.vl-korbpanel-entfernt {
  justify-content: space-between; min-height: 52px;
  font-size: .84rem; color: var(--ink-soft);
}
.vl-korbpanel-zurueck {
  flex: none; padding: 6px 10px; margin-right: -6px;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: inherit; font-size: .84rem; font-weight: 600; color: var(--accent-deep);
  text-decoration: underline; text-underline-offset: 3px;
}
.vl-korbpanel-zurueck:hover { background: var(--bg); }
.vl-korbpanel-zurueck:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.vl-korbpanel-liste + .vl-korbpanel-leer { margin-top: 10px; }

.vl-korbpanel-summe {
  display: flex; justify-content: space-between; gap: 12px;
  margin: 11px 0 12px; font-weight: 600;
}
.vl-korbpanel-summe span:last-child {
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.vl-korbpanel-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vl-korbpanel-knoepfe .btn {
  width: 100%; justify-content: center; text-align: center;
  padding-inline: 10px; font-size: .88rem;
}

.vl-korbpanel-leer { margin: 0 0 12px; font-size: .9rem; color: var(--ink-soft); }
/* Die Kurzfassung ohne Netz: nur die Anzahl, dafuer mit etwas Gewicht -
   sie ist dort die einzige Aussage ueber den Inhalt. */
.vl-korbpanel-knapp {
  margin: 0 0 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .95rem; font-weight: 600; color: var(--ink);
}
/* Ohne Inhalt gibt es nur einen Weg - dann darf der Knopf die ganze Breite. */
.vl-korbpanel-leer + .vl-korbpanel-knoepfe { grid-template-columns: 1fr; }

/* Kurzer Stups, sobald etwas ankommt - das Ende des Fluges. */
.vl-korbsymbol.ist-neu { animation: vl-korb-stups .42s ease; }
@keyframes vl-korb-stups {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22); }
  70%  { transform: scale(.94); }
  100% { transform: scale(1); }
}

/* Der fliegende Klon. Fix im Ansichtsfenster, damit ihn kein Elternelement
   mit overflow abschneidet, und ohne Zeigerereignisse - er ist reine Deko. */
.vl-flug {
  position: fixed; z-index: 1200; pointer-events: none;
  border-radius: 12px; overflow: hidden;
  transition: transform .62s cubic-bezier(.4, .05, .3, 1), opacity .62s ease-in;
  will-change: transform, opacity;
}
.vl-flug img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (prefers-reduced-motion: reduce) {
  .vl-korbsymbol.ist-neu { animation: none; }
}

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 30px); box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
/* Gleiche Kartenhöhe nur für Karten, die direkte Grid-Kinder sind
   (Grid streckt sie ohnehin); NICHT global height:100% -> sonst überlaufen
   gestapelte Karten in einem .stack ihre Spalte. */
.grid > .card { height: 100%; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.card h3 { margin-bottom: .35em; }
/* h2 im Aussehen von h3 (16.10.2026): Kartentitel direkt unter dem h1
   uebersprangen sonst eine Gliederungsebene. */
.als-h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
.card .als-h3 { margin-bottom: .35em; }
.card .icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-deep); margin-bottom: 16px; font-size: 1.3rem;
}

/* --- Produkt-Karten --- */
.product-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.product-media {
  aspect-ratio: 3 / 2; background:
    linear-gradient(150deg, #e9e2d6, #cdbfa9);
  position: relative; overflow: hidden;
}
/* Produktfoto (weißer Grund): vollständig zeigen, mittig auf Weiß */
.product-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #fff; display: block;
}
/* Szenen-/Stimmungsfoto in Produktkarte: füllend beschneiden */
.product-media img.cover { object-fit: cover; background: none; }
.product-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.product-body h3 { margin-bottom: .2em; }
.product-price { font-family: var(--serif); font-size: 1.35rem; color: var(--accent-deep); margin: 2px 0 4px; }
.product-price small { font-family: var(--sans); font-size: .82rem; color: var(--muted); font-weight: 500; }
.product-desc { font-size: .95rem; color: var(--ink-soft); flex: 1; }
.product-foot { margin-top: 16px; }
.badge {
  display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent-deep); background: var(--accent-soft);
  padding: 4px 10px; border-radius: 999px;
}

/* --- Plattform: Kategorie-Kacheln --- */
.category-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
@media (min-width: 640px) { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }
.category-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 28px); box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.category-card .icon { margin-bottom: 2px; }
.category-card .count { font-size: .82rem; color: var(--muted); }

/* --- Plattform: Suchleiste (Kategorie + Gebiet) --- */
.platform-search {
  display: grid; gap: 12px; grid-template-columns: 1fr; align-items: end;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(18px, 2.5vw, 26px); box-shadow: var(--shadow);
}
@media (min-width: 760px) { .platform-search { grid-template-columns: 1fr 1fr auto; } }
.platform-search label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.platform-search select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: .96rem; color: var(--ink); background: var(--bg);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238d8579' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* ==========================================================================
   Plattform: Filter-Sidebar + Ergebnisliste
   --------------------------------------------------------------------------
   Aufbau nach dem Muster von Booking.com und Check24: feste Filterspalte
   links, Ergebnisse rechts, Sortierung über der Liste. Auf dem Desktop ist
   die Standarddarstellung eine VERGLEICHSZEILE — gleiche Fakten stehen
   untereinander in derselben Spalte, das Auge vergleicht senkrecht. Das
   Kachelraster bleibt als Umschaltoption für visuelles Stöbern.
   Unter 900px wird die Sidebar zu einem Vollbild-Sheet.
   ========================================================================== */
.plattform-layout, #provider-app { display: block; }
@media (min-width: 900px) {
  #provider-app {
    display: grid; grid-template-columns: 280px minmax(0, 1fr);
    gap: clamp(24px, 3vw, 40px); align-items: start;
  }
  #provider-app.ist-leer { grid-template-columns: minmax(0, 1fr); }
}

/* --- Sidebar --- */
.filter-sidebar {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 4px 18px 18px;
}
@media (min-width: 900px) {
  .filter-sidebar { position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto; }
}
.filter-gruppe {
  border: 0; padding: 0; margin: 0; border-top: 1px solid var(--line); padding: 16px 0;
}
.filter-gruppe:first-of-type { border-top: 0; }
.filter-gruppe--beliebt { background: var(--accent-soft); margin: 0 -18px; padding: 16px 18px; border-top: 0; }
.filter-gruppe-titel {
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: 10px; padding: 0;
}

/* Trefferzahl an jeder Option: der wichtigste Baustein. Man sieht vor dem
   Klick, ob ein Filter etwas liefert — und landet nie in einer leeren Liste. */
.filter-option {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: .9rem; color: var(--ink-soft); padding: 5px 0; line-height: 1.35;
}
.filter-option:hover { color: var(--ink); }
.filter-option input { flex: none; accent-color: var(--accent-deep); width: 16px; height: 16px; }
.filter-option span:not(.filter-anzahl) { flex: 1; }
.filter-anzahl { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Leere Optionen bleiben sichtbar, rutschen aber nach unten — entfernen
   würde die Liste bei jedem Klick springen lassen. */
.filter-option.is-leer { opacity: .4; cursor: default; }
.filter-option.is-versteckt { display: none; }
.filter-option--schalter { font-weight: 500; }
.filter-mehr {
  background: none; border: 0; padding: 6px 0 0; cursor: pointer; font: inherit;
  font-size: .84rem; font-weight: 600; color: var(--accent-deep); text-decoration: underline;
}
.filter-hinweis { font-size: .76rem; color: var(--muted); margin: 8px 0 0; line-height: 1.45; }
.filter-bereich output {
  display: block; font-size: .92rem; font-weight: 600; color: var(--ink); margin-bottom: 8px;
}
.filter-bereich input[type="range"] { width: 100%; accent-color: var(--accent-deep); }
/* Umkreis: Wert über dem Regler wie beim Budget-Bereich, damit beide
   Schieberegler in der Sidebar gleich gelesen werden. */
.filter-umkreis-wert {
  display: block; font-size: .92rem; font-weight: 600; color: var(--ink); margin-bottom: 8px;
}
.filter-umkreis input[type="range"] { width: 100%; accent-color: var(--accent-deep); }
.filter-select {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: .9rem; color: var(--ink); background: var(--bg);
}

/* --- Mobil: Sidebar als Vollbild-Sheet --- */
.filter-open {
  display: block; width: 100%; margin-bottom: 16px; cursor: pointer; font: inherit;
  font-size: .95rem; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 11px 18px;
}
.filter-sidebar-kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.filter-close {
  background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer;
  color: var(--muted); padding: 0 4px;
}
.filter-sidebar-fuss { padding-top: 16px; border-top: 1px solid var(--line); margin-top: 8px; }
@media (max-width: 899px) {
  .filter-sidebar {
    position: fixed; inset: 0; z-index: 900; border-radius: 0; border: 0;
    overflow-y: auto; padding: 0 20px 20px; display: none;
  }
  .filter-sidebar.is-offen { display: block; }
  .filter-sidebar-kopf { position: sticky; top: 0; background: var(--surface); z-index: 1; }
  body.filter-offen { overflow: hidden; }
}
/* Muss NACH den Basisregeln stehen: gleiche Spezifität, die spätere gewinnt. */
@media (min-width: 900px) {
  .filter-open, .filter-sidebar-kopf, .filter-sidebar-fuss { display: none; }
}

/* --- Kopfzeile über der Liste --- */
.ergebnis-kopf {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline;
  justify-content: space-between; margin-bottom: 12px;
}
.ergebnis-anzahl { font-size: clamp(1.15rem, 1.6vw, 1.4rem); margin: 0; }
.ergebnis-steuerung { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.sort-feld select {
  padding: 8px 34px 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: .88rem; color: var(--ink); background: var(--surface);
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238d8579' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.ansicht-toggle {
  display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden;
  background: var(--surface);
}
.ansicht-toggle button {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: .84rem;
  padding: 8px 14px; color: var(--ink-soft);
}
.ansicht-toggle button.is-active { background: var(--accent-deep); color: #fff; }
@media (max-width: 560px) { .ansicht-toggle { display: none; } }

/* Aktive Filter als entfernbare Chips — man sieht immer, was gerade greift. */
.aktive-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.aktiv-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit;
  font-size: .84rem; color: var(--accent-deep); background: var(--accent-soft);
  border: 1px solid transparent; border-radius: 999px; padding: 5px 12px;
}
.aktiv-chip:hover { border-color: var(--accent); }
.aktiv-chip span { font-size: 1rem; line-height: 1; opacity: .7; }
.aktiv-reset {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: .84rem;
  color: var(--muted); text-decoration: underline; padding: 5px 4px;
}
.sortier-zeile { margin: 0 0 14px; }
.linkartig {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: .82rem; color: var(--muted); text-decoration: underline;
}
/* Offenlegung der Ranking-Kriterien. Bei bezahlten Platzierungen ist das
   nicht Höflichkeit, sondern § 5b Abs. 2 UWG. */
.sortier-hinweis {
  font-size: .84rem; color: var(--ink-soft); line-height: 1.6; margin: -6px 0 16px;
  background: var(--bg-2); border-radius: var(--radius); padding: 14px 16px;
}

/* --- Filterleiste (Altbestand: Profilseite nutzt .chip weiterhin) --- */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.profil-gebiet-text {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  color: var(--ink);
  line-height: 1.55;
}
.profil-gebiet-text .profil-icon { flex: 0 0 auto; margin-top: 2px; }
.filter-suche {
  width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 18px;
}
.filter-suche::placeholder { color: var(--muted); }
.filter-suche:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.chip {
  font-size: .86rem; font-weight: 500; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; transition: all .15s; line-height: 1.2;
}
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip.is-active { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
/* Statische Chips (Profil-Anzeige, z.B. Stil) – nicht klickbar. */
.chip--static { cursor: default; }
.chip--static:hover { border-color: var(--line); color: var(--ink-soft); }
.specs li.is-chips { flex-direction: column; align-items: flex-start; gap: 8px; }
.specs li.is-chips span:last-child { text-align: left; font-weight: 500; }

/* --- Plattform: Anbieter-Karten --- */
/* `display` aus einer Klasse schlägt die Browser-Regel `[hidden] {display:none}`.
   Ohne diese Zeile blieben ausgefilterte Karten sichtbar, obwohl `render()` in
   plattform.js `p._el.hidden = true` setzt — die Trefferzahl sagte „1 Verleiher",
   darunter standen zwei. Betraf jeden Filter, nicht nur die Suche. */
[hidden] { display: none !important; }

.provider-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; }
.provider-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease;
}
.provider-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.provider-card.is-featured { border-color: var(--accent); }
.provider-media {
  aspect-ratio: 3 / 2; position: relative; overflow: hidden; flex: none;
  background: linear-gradient(150deg, #e9e2d6, #cdbfa9);
}
.provider-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Platzhalter: feste Darstellungsgröße statt „füllt den Container".
   In der Listenansicht ist der Bildbereich so hoch wie die ganze Karte, und
   die richtet sich nach der Textlänge — ein Anbieter mit langer Beschreibung
   bekam dadurch ein sichtbar größeres Motiv als sein Nachbar. Begrenzt über
   die Spaltenbreite und einen festen Deckel ist dasselbe Symbol auf jeder
   Karte gleich groß. */
.provider-media.ist-platzhalter { background: var(--bg); }
.provider-media img.provider-media-platzhalter {
  inset: 0; margin: auto;
  width: 78%; height: auto;
  max-height: 150px;
  object-fit: contain;
}
/* "Anzeige" statt "Empfohlen": Wer für die Platzierung zahlt, muss als
   solcher erkennbar sein — genau wie Bookings "Hervorgehoben". */
.badge-featured {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: rgba(255,255,255,.94); padding: 4px 10px; border-radius: 999px;
}
.provider-body { padding: 18px 20px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.provider-body h3 { margin-bottom: .15em; font-size: 1.15rem; }
.provider-ort { font-size: .85rem; color: var(--muted); margin-bottom: 8px; }
.provider-desc { font-size: .93rem; color: var(--ink-soft); flex: 1; margin-bottom: 12px; }

/* Key-Facts: je Kategorie festgelegt und IMMER an derselben Stelle. Vorher
   war das eine Fliesszeile mit Trennpunkten — sie brach je nach Textlaenge
   anders um, und die Gaestezahl stand mal in Zeile eins, mal in Zeile zwei.
   Untereinander vergleichbar wird die Liste erst durch feste Spalten: Fehlt
   ein Wert, bleibt die Spalte als "–" stehen statt zu verrutschen. */
.provider-fakten {
  /* Schmale Karte (Kachelansicht, Mobil): gestapelt, Beschriftung links,
     Wert rechts. Vorher stand hier `auto-fit`, das je nach Kartenbreite mal
     drei, mal zwei Spalten erzeugte — die dritte rutschte dann allein in eine
     zweite Zeile und sah aus wie ein Fehler. Die Breite entscheidet jetzt der
     Breakpoint, nicht der Zufall. */
  display: grid; grid-template-columns: 1fr;
  gap: 6px 14px; margin: 4px 0 12px;
  border-block: 1px solid var(--line); padding-block: 8px;
}
/* Beide Zeilen sind Blockboxen, keine Flex-Kinder: Nur so bleibt die Zelle
   auf ihrer Rasterbreite und der Text endet mit "…" statt in die Nachbarspalte
   zu laufen. */
.provider-fakt {
  min-width: 0; display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px;
}
.provider-fakt .provider-fakt-wert { text-align: right; }
.provider-fakt-label {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
/* Der Wert darf auf zwei Zeilen. Einzeilig mit Ellipse verlor er zu viel:
   „Blumen-Tischdekoration +12" braucht 83 px mehr als die Spalte breit ist,
   und was danach kam, war die Zahl der weiteren Leistungen. Die Rasterzeile
   richtet alle drei Spalten trotzdem auf derselben Grundlinie aus. */
.provider-fakt-wert {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
  font-size: .88rem; line-height: 1.25; color: var(--ink); font-weight: 600;
}
/* Der Strich muss lesbar sein: Er sagt „dazu liegt uns nichts vor" und ist
   damit eine Antwort. In der Farbe einer Trennlinie sah die Zelle nur kaputt
   aus. */
.provider-fakt.ist-leer .provider-fakt-wert { color: var(--muted); font-weight: 500; }

/* Rechte Spalte: Preis, Vertrauenssignal, Handlung. */
.provider-aside {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px;
  border-top: 1px solid var(--line);
}
.provider-price { font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.provider-price.is-leer { font-size: .9rem; font-weight: 500; color: var(--muted); }
/* Ersatz für Sterne: Google-Bewertungen dürfen wir nicht speichern, also
   zeigen wir das, was wir selbst belegen können. */
.badge-geprueft {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-size: .76rem; font-weight: 600; color: var(--accent-deep);
  background: var(--accent-soft); padding: 4px 10px; border-radius: 999px;
}
.badge-geprueft.is-bestaetigt { color: #fff; background: var(--accent-deep); }
.merken-schalter {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: .86rem; color: var(--ink-soft);
}
.merken-schalter input { accent-color: var(--accent-deep); width: 16px; height: 16px; }
.provider-placeholder-note {
  font-size: .78rem; color: var(--warm); background: #f7ece3;
  padding: 6px 10px; border-radius: 8px;
}
.provider-empty {
  text-align: center; padding: clamp(32px, 5vw, 56px) 20px; color: var(--muted);
  border: 1.5px dashed var(--line); border-radius: var(--radius);
}

/* --- Vergleichszeile (Desktop-Standard) --- */
@media (min-width: 760px) {
  /* Nur Karten, die auch ein Bild tragen, bekommen das Drei-Spalten-Raster.
     Die Suchkarte hatte keins — ihr Text landete deshalb in der 240-px-Spalte
     und brach nach drei Woertern um. */
  .provider-grid.is-liste .provider-card:has(.provider-media) {
    display: grid; grid-template-columns: 210px minmax(0, 1fr) 208px;
    align-items: stretch;
  }
  .provider-grid.is-liste .provider-aside .btn { white-space: nowrap; padding-inline: 14px; }
  .provider-grid.is-liste .provider-card:hover { transform: none; box-shadow: var(--shadow); }
  .provider-grid.is-liste .provider-media { aspect-ratio: auto; height: 100%; min-height: 190px; }
  /* Das Geprueft-Siegel steht ganz oben rechts, der Handlungsknopf unten —
     dazwischen der Preis. Vorher war die Spalte vertikal zentriert, dadurch
     sass das Siegel je nach Textlaenge der Karte auf einer anderen Hoehe. */
  .provider-grid.is-liste .provider-aside {
    border-top: 0; border-left: 1px solid var(--line); justify-content: flex-start;
  }
  .provider-grid.is-liste .provider-aside .btn { margin-top: auto; }
  .provider-grid.is-liste .provider-desc {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Breite Karte: drei gleich breite Spalten, Beschriftung ueber dem Wert.
     Gleich breit heisst hier auch gleich breit — nur so stehen die Zahlen
     zweier Anbieter untereinander. */
  .provider-grid.is-liste .provider-fakten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .provider-grid.is-liste .provider-fakt { display: block; }
  .provider-grid.is-liste .provider-fakt .provider-fakt-wert { text-align: left; }
}
/* --- Kachelraster (Umschaltoption fürs Stöbern) --- */
@media (min-width: 640px) { .provider-grid.is-raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .provider-grid.is-raster { grid-template-columns: repeat(3, 1fr); } }
.provider-grid.is-raster .provider-empty { grid-column: 1 / -1; }

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

/* --- Plattform: Dienstleister-Bereich & Admin-Prüfseite --- */
.form-field { display: block; font-size: .9rem; font-weight: 600; color: var(--ink-soft); }
.form-field input, .form-field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: .96rem; color: var(--ink); background: var(--bg); margin-top: 6px;
}
.form-field textarea { resize: vertical; }

.form-status { font-size: .88rem; margin-top: 10px; min-height: 1.2em; }
.form-status.is-success, .form-status.is-approved { color: var(--accent-deep); }
.form-status.is-pending { color: var(--warm); }
.form-status.is-rejected, .form-status.is-error { color: #b3453b; }

.status-badge {
  display: inline-flex; align-items: center; font-size: .74rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.status-badge.is-pending { color: #8a5a1e; background: #f7ece3; }
.status-badge.is-approved { color: var(--accent-deep); background: var(--accent-soft); }
.status-badge.is-rejected { color: #b3453b; background: #f8e7e5; }

.claim-list { list-style: none; margin: 0; padding: 0; }
.claim-row, .search-result-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.claim-row:last-child, .search-result-row:last-child { border-bottom: none; }
.search-results { list-style: none; margin: 10px 0 0; padding: 0; }

.claim-card { margin-top: 20px; border-color: var(--accent); }

.dashboard-owned-card { margin-bottom: 20px; }

.review-card { margin-bottom: 18px; }
.review-meta { font-size: .9rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.review-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

.diff-table { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.diff-row {
  display: grid; grid-template-columns: 1fr; gap: 4px 12px;
  padding: 10px 12px; background: var(--bg-2); border-radius: 10px; font-size: .9rem;
}
@media (min-width: 640px) { .diff-row { grid-template-columns: 140px 1fr 1fr; align-items: start; } }
.diff-old { color: var(--muted); text-decoration: line-through; }
.diff-new { color: var(--accent-deep); font-weight: 600; }

/* --- Plattform: kategorieübergreifende Suche --- */
.suche-anzahl { color: var(--ink-soft); margin: 20px 0 8px; }
.suche-gruppe { margin-bottom: 32px; }
.suche-gruppe h2 {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
  font-size: 1.15rem; margin-bottom: 12px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.suche-gruppe-link { font-size: .85rem; font-weight: 400; color: var(--accent-deep); }
/* Die Fundstelle zeigt, WO das Suchwort steckt. Ohne sie wirkt ein Treffer
   willkürlich, wenn das Wort nur in einem Paketinhalt steht und auf der Karte
   nirgends auftaucht. */
.suche-fundstelle {
  font-size: .85rem; color: var(--muted); margin: 6px 0 0;
  padding: 8px 10px; background: var(--bg-2); border-radius: 8px;
}
.suche-fundstelle mark { background: var(--accent-soft, #fde68a); padding: 0 2px; border-radius: 3px; }
.chip.js-vorschlag { cursor: pointer; border: 1px solid var(--line); background: var(--surface); }
.chip.js-vorschlag:hover { border-color: var(--accent); color: var(--accent-deep); }

/* --- Plattform: Anbieter-Freigabe (Admin) --- */
.review-details {
  display: grid; grid-template-columns: 1fr; gap: 2px 12px;
  margin: 10px 0; padding: 10px 12px;
  background: var(--bg-2); border-radius: 10px; font-size: .9rem;
}
@media (min-width: 560px) { .review-details { grid-template-columns: 170px 1fr; } }
.review-details dt { color: var(--muted); }
.review-details dd { margin: 0 0 4px; }
/* Lücken, die einer Freigabe im Weg stehen — sichtbar, aber nicht alarmierend:
   sie sind der Normalfall bei automatisch angelegten Einträgen. */
.review-warnings {
  margin: 10px 0 0; padding: 10px 12px 10px 30px;
  list-style: disc; font-size: .9rem;
  color: var(--accent-deep); background: var(--bg-2); border-radius: 10px;
}
.review-warnings li { margin: 2px 0; }

/* --- Plattform: Checkbox-Zeile (AGB / Bildrechte) --- */
.checkbox-row {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .9rem; color: var(--ink-soft); font-weight: 400; line-height: 1.4;
}
.checkbox-row input[type="checkbox"] { margin-top: 3px; flex: none; }
.checkbox-row a { color: var(--accent-deep); }
.form-hint { font-size: .82rem; color: var(--muted); font-weight: 400; }

/* --- Plattform: Bild-Verwaltung im Dashboard --- */
.bilder-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.bilder-section h4 { margin-bottom: 12px; }
.bilder-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.bild-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--bg-2); }
.bild-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bild-del {
  position: absolute; top: 4px; right: 4px; width: 24px; height: 24px;
  border-radius: 50%; border: none; cursor: pointer; line-height: 1;
  background: rgba(20,19,16,.72); color: #fff; font-size: 1rem;
  display: grid; place-items: center;
}
.bild-del:hover { background: rgba(20,19,16,.9); }

/* --- Dienstleisterbereich: Bilder von der eigenen Website bestätigen ---
   Die Vorschau lädt per Hotlink vom Server des Anbieters. Solange nichts
   bestätigt ist, liegt kein Bild bei uns — die Galerie ist die Stelle, an der
   aus einem Fundstück eine Erlaubnis wird. */
.kandidaten-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.kandidaten-section h4 { margin-bottom: 6px; }
.kandidaten-titel {
  margin: 14px 0 8px; font-size: .82rem; font-weight: 600; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .05em;
}
.kandidaten-raster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px;
}
.kandidat {
  position: relative; display: block; cursor: pointer;
  border: 2px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-2);
}
.kandidat img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.kandidat input { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; accent-color: var(--accent-deep); }
.kandidat:has(input:checked) { border-color: var(--accent); }
.kandidat.is-bestaetigt { border-color: var(--accent-deep); opacity: .72; cursor: default; }
.kandidat-fuss {
  display: block; padding: 6px 8px; font-size: .72rem; line-height: 1.3; background: #fff;
}
.kandidat-angebot { display: block; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kandidat-angebot.is-frei { color: var(--muted); }
.kandidat-status { display: block; color: var(--accent-deep); font-weight: 600; }
.kandidaten-aktionen { display: flex; gap: 16px; margin: 12px 0 4px; }


/* --- Plattform: Stil-Chips auf Karte und Profil --- */
/* Der Stil steht neben dem Ort in einer Zeile. Als eigene Chip-Reihe sah er
   aus wie die Leistungs-Tags darunter, obwohl er etwas anderes bedeutet. */
.provider-meta {
  font-size: .85rem; color: var(--muted); margin-bottom: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.provider-stil { color: var(--accent-deep); }

/* --- Plattform: Bildergalerie auf der Profilseite --- */
.profil-galerie {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px; margin-top: clamp(20px, 3vw, 32px);
}
.profil-galerie img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line); display: block;
}
/* Foto-Anzahl-Hinweis am Hero + Klick-zum-Vergrößern (Lightbox) */
.foto-count {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; pointer-events: none;
  font-size: .8rem; font-weight: 600; color: #fff;
  background: rgba(20,19,16,.72); padding: 6px 12px; border-radius: 999px;
}
.js-lightbox { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center;
  background: rgba(20,19,16,.9); padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox-img {
  max-width: 92vw; max-height: 88vh; object-fit: contain;
  border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.lightbox-close, .lightbox-nav {
  position: absolute; background: rgba(255,255,255,.14); color: #fff;
  border: none; cursor: pointer; border-radius: 999px;
  display: grid; place-items: center; line-height: 1; transition: background .15s;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.28); }
.lightbox-close { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 1.3rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
@media (max-width: 640px) {
  .lightbox-nav { width: 42px; height: 42px; font-size: 1.6rem; }
}

/* --- Verleih: Produkt-Bildergalerie (einheitliches 4:3-Raster) --- */
.verleih-galerie {
  display: grid; gap: clamp(12px, 1.6vw, 18px);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .verleih-galerie { grid-template-columns: repeat(2, 1fr); } }
/* Dreispaltige Variante fuer die Startseiten-Referenzen */
@media (min-width: 900px) { .verleih-galerie--drei { grid-template-columns: repeat(3, 1fr); } }
.verleih-galerie figure { margin: 0; }
.verleih-galerie img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); display: block;
}

/* --- Ablauf / Steps --- */
.steps { counter-reset: step; }
.step { position: relative; padding-left: 58px; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.1rem;
  background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--line);
}

/* --- Buchungsblock: Rahmen um das eigene Verleih-Widget --- */
/* Die .booking-embed-Klasse war der gestrichelte Platzhalter und wird nicht
   mehr benutzt; die Gestaltung des Widgets steht in verleih.css. */
.booking {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow);
}
.booking-embed {
  border: 1.5px dashed var(--accent); border-radius: var(--radius);
  background: var(--accent-soft); padding: 28px; text-align: center; color: var(--accent-deep);
}
.booking-embed strong { display: block; font-family: var(--serif); font-size: 1.15rem; margin-bottom: 6px; }

/* --- Reviews --- */
.review { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.review p { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); font-style: italic; }
.review cite { display: block; margin-top: 12px; font-style: normal; font-size: .9rem; color: var(--muted); }

/* Bewertungs-Slider: das Wischen macht scroll-snap, nicht JavaScript. Ohne JS
   bleibt die Spur ein normaler Scrollbereich — alle Bewertungen bleiben also
   erreichbar, nur Pfeile und Punkte fehlen dann. */
.review-slider { position: relative; }
/* Flexbox statt Grid: Grid-Spalten mit Prozentmass schrumpfen im Scrollbereich
   auf die Inhaltsbreite zusammen, statt ueber den Rand hinauszulaufen. */
.review-track {
  /* overflow-y ausdruecklich hidden: Wer nur overflow-x setzt, bekommt fuer y
     automatisch "auto". Die Spur war 2 px hoeher als sichtbar, die Karten
     liessen sich dadurch beim Wischen auch nach oben und unten schieben
     (Noah, 12.10.2026). */
  display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  /* Kein scroll-behavior: smooth hier — das weiche Scrollen fordert der
     Pfeil-Klick selbst an. Beides zusammen bringt die Sprungziele durcheinander. */
  scroll-snap-type: x mandatory;
  /* Der Innenabstand gibt Fokusrahmen und Schatten Luft, das negative
     Aussenmass holt ihn optisch wieder heraus. */
  padding: 6px 6px 20px; margin: -6px -6px 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.review-track::-webkit-scrollbar { display: none; }
/* Gleich hohe Karten: das Zitat dehnt sich, der Name sitzt immer unten.
   flex-shrink 0, damit die Karten ihre Breite behalten und die Spur wirklich
   ueberlaeuft — sonst gaebe es nichts zu scrollen. */
.review-track > .review {
  /* blockquote bringt vom Browser 40px Rand je Seite mit — der verschiebt
     sonst jede Schnappposition der Spur. */
  margin: 0;
  flex: 0 0 86%; scroll-snap-align: start;
  display: flex; flex-direction: column;
}
@media (min-width: 720px) { .review-track > .review { flex-basis: 46%; } }
@media (min-width: 980px) { .review-track > .review { flex-basis: 31.5%; } }
.review-track > .review p { flex: 1 1 auto; margin: 0; }

.review-nav {
  display: none; position: absolute; top: calc(50% - 10px); transform: translateY(-50%);
  width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  box-shadow: var(--shadow-sm); align-items: center; justify-content: center;
  transition: background .18s ease, opacity .18s ease;
}
@media (min-width: 980px) { .review-nav { display: flex; } }
.review-nav:hover { background: var(--bg-2); }
.review-nav[disabled] { opacity: .35; cursor: default; }
/* -18 px, nicht weiter: Neben der Spur liegen nur 20 px Seitenrand. Bei -22 px
   stand der rechte Pfeil 2 px ueber den Bildschirm, und die ganze Seite liess
   sich bis etwa 1180 px Breite seitlich schieben (13.10.2026). */
.review-nav--prev { left: -18px; }
.review-nav--next { right: -18px; }
/* Der Abstand traegt die Tippflaeche mit: Die Punkte bleiben 9 Pixel klein,
   die unsichtbare Flaeche darum misst 24 - das Mindestmass fuer Tippziele.
   Bei 8 Pixel Abstand wuerden sich die Flaechen benachbarter Punkte
   ueberlappen und der Daumen traefe den falschen. */
.review-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; }
.review-dot {
  position: relative;
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: var(--line); cursor: pointer; transition: background .18s ease;
}
.review-dot::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 24px; height: 24px; transform: translate(-50%, -50%);
}
.review-dot.is-active { background: var(--accent-deep); }

/* --- CTA-Band --- */
.cta-band { text-align: center; }
.cta-band .btn { margin-top: 8px; }

/* --- Sticky Mobile-CTA (Conversion) --- */
/* Die Leiste erscheint erst, wenn der Kaufbereich aus dem Bild gescrollt ist,
   und verschwindet wieder beim Abschlussblock - dort stehen dieselben zwei
   Knöpfe. Solange die Kaufbox sichtbar ist, wäre sie nur ein zweiter Weg zum
   selben Ziel und nähme zehn Prozent des Bildschirms. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; gap: 10px; padding: 10px 14px; padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(100%); transition: transform .22s ease;
}
.sticky-cta.ist-sichtbar { transform: translateY(0); }
.sticky-cta .btn { flex: 1; }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }

/* --- Footer --- */
/* Absaetze ohne Klasse in der aelteren Fusszeile erbten die graue
   Fliesstextfarbe - auf --ink nur 2,1 zu 1 Kontrast (16.10.2026). */
.site-footer p:not([class]) { color: inherit; }
.site-footer { background: var(--ink); color: #cfc8bb; padding-block: clamp(48px, 6vw, 80px) 32px; }
.site-footer a { color: #cfc8bb; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer-brand { font-family: var(--serif); font-size: 1.5rem; color: #fff; }
.footer-brand span { color: var(--accent); }
/* h2 statt h4 (16.10.2026): Nach dem letzten h2 der Seite sprang die
   Gliederung sonst zwei Ebenen. h4 bleibt fuer die Plattformseiten. */
.footer-col h2, .footer-col h4 { color: #fff; font-family: var(--sans); font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 14px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 8px; font-size: .95rem; }
/* Auf dem Handy war die Fusszeile fast ein Drittel der Seite. */
@media (max-width: 600px) {
  .site-footer { padding-block: 32px 20px; }
  /* Die beiden Linklisten passen nebeneinander — untereinander waren sie
     allein 300 Pixel hoch. */
  .footer-grid { gap: 22px 18px; grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer-col h2, .footer-col h4 { margin-bottom: 8px; }
  .footer-col li { margin-bottom: 4px; font-size: .9rem; }
  .footer-bottom { margin-top: 22px; padding-top: 14px; gap: 6px; font-size: .8rem; }
}

.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; color: #9a9384; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; }

/* Schmaler Fuss fuer die Kasse ----------------------------------------------
   Der volle Seitenfuss misst auf dem Handy 656 Pixel und fuehrt mitten im
   Bezahlvorgang ins uebrige Angebot - Verleih, Ratgeber, Plattform. Wer hier
   steht, will buchen. Es bleiben die Links, die bleiben muessen: Impressum,
   Datenschutz, AGB, Widerruf und die Cookie-Einstellungen. */
.site-footer--schmal { padding-block: 28px 24px; }

/* Knapper Seitenkopf der Kasse: Die Ueberschrift ordnet ein, mehr soll sie
   nicht - vor ihr liegt ein Formular, kein Text zum Lesen. */
.hero--kasse { padding-block: 20px 8px; }
.hero--kasse h1 { font-size: clamp(1.5rem, 4.5vw, 2rem); margin: 0; }
.footer-recht {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: .88rem;
}
.site-footer--schmal .footer-bottom { margin-top: 20px; padding-top: 16px; }

/* --- Breadcrumb --- */
.crumb { font-size: .85rem; color: var(--muted); padding-top: 18px; }
.crumb a:hover { color: var(--ink); }

/* --- FAQ --- */
.faq details { border-bottom: 1px solid var(--line); padding: 6px 0; }
.faq summary { cursor: pointer; font-family: var(--serif); font-size: 1.1rem; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.4rem; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding-bottom: 16px; margin: 0; }

/* --- Spec-Liste --- */
.specs { list-style: none; margin: 0; padding: 0; }
.specs li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .96rem; }
.specs li span:first-child { color: var(--muted); }
.specs li span:last-child { color: var(--ink); font-weight: 500; text-align: right; }

/* --- Coming-soon Badge --- */
.soon { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; color: var(--warm); background: #f7ece3; padding: 5px 12px; border-radius: 999px; }

/* --- Scroll-Einblendungen (per JS aktiviert) --- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Laufband-Hinweis (dezent, bewegter Text) --- */
.ticker {
  overflow: hidden; background: var(--accent-soft);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ticker-track {
  display: inline-flex; white-space: nowrap; will-change: transform;
  animation: ticker 30s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span {
  padding: 9px 0; margin-right: 56px; font-size: .88rem; font-weight: 600;
  letter-spacing: .01em; color: var(--accent-deep); position: relative;
}
.ticker-track span::after {
  content: "✦"; position: absolute; right: -34px; color: var(--accent);
  font-size: .7rem; top: 50%; transform: translateY(-50%);
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* --- Platzhalter-Blöcke ("Blocker" für noch fehlenden Inhalt) --- */
.placeholder {
  border: 1.5px dashed var(--accent); background: var(--accent-soft);
  border-radius: 12px; padding: 16px 18px; color: var(--accent-deep);
  font-size: .95rem; line-height: 1.5; display: flex; gap: 10px; align-items: flex-start;
}
.placeholder::before { content: "✎"; font-size: 1.05rem; line-height: 1.4; }
.placeholder--lg { padding: 26px; font-size: 1rem; }

/* --- Klaro Cookie-Banner im Marken-Look --- */
.klaro {
  --green1: #515d3f;          /* Zustimmen-Button */
  --green2: #6f7d5c;
  --blue1: #6f7d5c;           /* Links/Schalter */
  --button-text-color: #fff;
  --font-family: var(--sans);
  font-family: var(--sans);
}
.klaro .cookie-notice { border-radius: 14px; box-shadow: var(--shadow); }
.klaro .cm-btn { border-radius: 999px; font-weight: 600; }

/* --- Rechtstexte / Prose --- */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-top: 2em; }
.prose h3 { font-size: 1.15rem; margin-top: 1.6em; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1rem; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--accent-deep); text-decoration: underline; }
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.prose th { color: var(--ink); font-weight: 600; }
.note-box { background: var(--accent-soft); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: .9rem; color: var(--accent-deep); margin: 1.4rem 0; }

/* --- Mobile Nav --- */
@media (max-width: 860px) {
  .nav-links {
    position: fixed; inset: 70px 0 auto 0; flex-direction: column; align-items: flex-start;
    gap: 4px; background: var(--bg); border-bottom: 1px solid var(--line);
    /* Aufdecken statt Hereinschieben: Mit translateY(-100%) kam das Menue
       von oberhalb und glitt sichtbar ueber Logo und Knoepfe im halb-
       transparenten Kopf - es sah aus wie ein Fehler (Noah, 05.10.2026).
       clip-path deckt es von der Unterkante des Kopfes nach unten auf; es
       liegt nie hoeher als dort, wo es am Ende steht. */
    padding: 16px 20px 24px; clip-path: inset(0 0 100% 0); transition:
      clip-path .25s ease, opacity .2s ease, visibility .25s;
    box-shadow: var(--shadow);
    /* Nur zu verschieben reicht nicht: Das Menue ist hoeher als der Abstand
       zum Seitenrand, sein unterer Teil blieb sichtbar und fing sogar Taps ab.
       Deshalb zusaetzlich ausblenden. */
    visibility: hidden; opacity: 0;
  }
  /* -40px unten: Platz fuer den Schatten, sonst schnitte ihn clip-path ab. */
  .nav-links.open { clip-path: inset(0 0 -40px 0); visibility: visible; opacity: 1; }
  /* display: block, sonst zaehlt das Polster nicht zur Zeilenhoehe: Die
     Links waren 29 Pixel hoch, "Verleih" darueber als Block 49 - die
     Abstaende im Menue sahen ungleich aus (05.10.2026). */
  .nav-links > li > a { display: block; padding: 10px 0; font-size: 1.05rem; width: 100%; }
  .nav-toggle { display: block; }
  /* Nur der Knopf, der unmittelbar im Kopf steht - "Verfuegbarkeit pruefen".
     Ohne das direkte Kind traf die Regel auch die beiden Knoepfe im
     Warenkorb-Panel, das seit September 2026 in derselben Gruppe haengt:
     Das Panel zeigte dann Positionen und Summe, aber keinen Weg hinaus. */
  .nav .nav-cta > .btn:not(.nav-toggle) { display: none; }
  .sticky-cta { display: flex; }

  /* Dropdown im mobilen Slide-down: inline statt abgesetztes Panel */
  .nav-dropdown { flex-direction: column; align-items: stretch; width: 100%; }
  .nav-dropdown > summary { padding: 10px 0; font-size: 1.05rem; width: 100%; }
  /* Nur eingerueckt, ohne Kasten und ohne Linie (Noah, 11.10.2026): Der
     weisse Hintergrund des Desktop-Panels und danach die Akzentlinie links
     wirkten beide, als sei das Menue oben und unten abgeschnitten. Gleiche
     Abstaende fuer alle Punkte, auch "Alle Artikel". */
  .nav-dropdown-menu {
    position: static; box-shadow: none; border: none; border-radius: 0;
    background: none; min-width: 0; padding: 0 0 6px 16px; margin: 0; gap: 0;
  }
  .nav-dropdown-menu a { padding: 9px 0; font-size: .98rem; }
  .nav-dropdown-menu .nav-dropdown-all { border-bottom: none; padding-bottom: 9px; margin-bottom: 0; }
}

/* =====================================================================
   Produktseite Verleih (PDP)
   Aufbau nach Amazon-Vorbild: Entscheidungsreihenfolge statt Erzählung.
   Mobil ist die DOM-Reihenfolge maßgeblich — Titel und Bewertung stehen
   VOR dem Bild, danach Preis, Rechner, CTA, Vertrauen. Kein order-Trick.
   Desktop klappt daraus zwei Spalten: links Galerie, rechts Kaufbox.
   ===================================================================== */
.pdp { padding-block: clamp(16px, 1.8vw, 24px) clamp(40px, 6vw, 76px); }
/* minmax(0,1fr) statt der impliziten auto-Spur: sonst zieht die
   Mindestbreite einzelner Inhalte (z. B. das Lieferzonen-Select mit seinen
   langen Optionen) die Spalte über die Viewportbreite hinaus. */
.pdp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3.2vw, 46px); align-items: start; }
/* DOM-Reihenfolge ist Kopf → Galerie → Kaufbox und damit die mobile
   Reihenfolge. Auf dem Desktop werden die drei Blöcke per expliziter
   Grid-Platzierung angeordnet — kein order-Trick, der die Lesereihenfolge
   von der Quellreihenfolge entkoppelt. */
@media (min-width: 900px) {
  /* auto 1fr (16.10.2026): Die Galerie reicht ueber beide Zeilen. Ohne
     feste Aufteilung verteilte der Browser ihre Hoehe auch auf die
     Kopfzeile - solange das Widget noch lud, stand die Kaufbox 190 px
     tiefer und rutschte dann hoch (PageSpeed: CLS 0,10 am Computer). */
  .pdp-grid { grid-template-columns: 1.02fr .98fr; grid-template-rows: auto 1fr; column-gap: clamp(28px, 3.2vw, 46px); row-gap: 18px; }
  .pdp-grid .pdp-media  { grid-column: 1; grid-row: 1 / span 2; }
  .pdp-grid .pdp-head   { grid-column: 2; grid-row: 1; }
  .pdp-grid .pdp-buybox { grid-column: 2; grid-row: 2; margin-top: 0; }
}
.pdp-head .eyebrow { margin-bottom: 4px; }
/* Eigene Größe statt der globalen H1-Skala: die ist auf einen Hero über die
   volle Breite ausgelegt und skaliert mit der Viewportbreite. In der halb so
   breiten Produktspalte ergibt das drei Zeilen und schiebt die Kaufbox samt
   Buttons unter die Falz. */
.pdp-head h1 { font-size: clamp(1.9rem, 2.5vw, 2.5rem); margin-bottom: .3em; }

.rating-inline {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  font-size: .95rem; color: var(--ink-soft); text-decoration: none;
}
.rating-inline .stars { font-size: 1.02rem; }
.rating-inline strong { color: var(--ink); }
.rating-inline .rating-count { white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.rating-inline:hover .rating-count { text-decoration-color: var(--accent); color: var(--ink); }

/* --- Galerie: Hauptbild + Thumbnails --- */
.pdp-stage {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(120% 90% at 70% 15%, #dfe4d3 0%, transparent 55%),
    linear-gradient(155deg, #e9e2d6 0%, #d8ccb9 45%, #b9a892 100%);
}
@media (min-width: 900px) { .pdp-stage { aspect-ratio: 4 / 3.4; } }
/* Mobil flacher und zusätzlich höhenbegrenzt: sonst schiebt allein das
   Produktbild die Kaufbox samt Buttons um ein halbes Display nach unten. */
@media (max-width: 899px) { .pdp-stage { aspect-ratio: 16 / 10; max-height: 38vh; } }
.pdp-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* minmax(0,1fr) statt 1fr: sonst erzwingt die Eigenbreite der Bilder
   ein Überlaufen der Reihe auf schmalen Displays. */
.pdp-thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.pdp-thumb {
  padding: 0; aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb:hover { border-color: var(--accent); }
.pdp-thumb.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.pdp-thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pdp-media-note { margin: 10px 0 0; font-size: .82rem; color: var(--muted); text-align: center; }
/* Auf dem Handy ist Antippen zum Vergrößern erwartbar – der Hinweis kostet
   dort nur Höhe oberhalb der Buttons. */
@media (max-width: 899px) { .pdp-media-note { display: none; } }

/* --- „Oft zusammen gemietet" ---
   Steht im HTML hinter der Kaufbox – das ist die mobile Reihenfolge: erst
   Preis, Rechner, Buttons und Vertrauen, dann die Kombinationen. Auf dem
   Desktop schiebt main.js den Block in die Galeriespalte, wo er den freien
   Raum neben der Kaufbox füllt. Ohne JS bleibt er unten in Spalte 1 stehen –
   inhaltlich weiterhin richtig einsortiert.
   Die große Cross-Selling-Sektion am Seitenende bleibt für alle Breiten. */
.pdp-bundle {
  margin-top: 16px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
/* In der Kaufbox (Handy, siehe main.js): keine Karte in der Karte, nur
   eine Trennlinie zu den Buchungsknoepfen darueber. */
.pdp-buybox > .pdp-bundle {
  margin: 18px 0 0; padding: 16px 0 0;
  background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0;
}
@media (min-width: 900px) {
  .pdp-grid > .pdp-bundle { grid-column: 1; }
}
.pdp-bundle-titel { margin: 0 0 4px; font-family: var(--serif); font-size: 1.05rem; color: var(--ink); }
/* Je Artikel ein Raster: Bild links, daneben oben Name und Preis, darunter
   die Einheit - dieselbe Anordnung wie die Artikelkarten der Startseite
   (.vl-karte-kopf, .vl-karte-einheit), Noah, 30.09.2026. */
.bundle-item {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; row-gap: 1px;
  align-items: center; padding: 10px 0; border-top: 1px solid var(--line);
}
.bundle-item:first-of-type { border-top: none; }
/* Dieselben freigestellten Produktbilder wie auf der Startseite und im
   Warenkorb (assets/img/showcase/), auf derselben hellen Kachel: Die Bilder
   sind ueberwiegend weiss, ohne Kachel verschwinden Stuhl und Stehtisch.
   Vorher standen hier Fotos (*-card.webp) - an zwei Stellen der Seite sah
   derselbe Artikel verschieden aus (Noah, 25.09.2026). */
.bundle-item img,
.bundle-item .bundle-platzhalter {
  width: 52px; height: 52px; flex: none; border-radius: 8px; object-fit: contain;
  background: var(--bg-2); padding: 3px; grid-row: 1 / span 3;
}
/* Wird es eng, rutscht der Preis unter den Namen - wie auf der Startseite. */
.bundle-kopf {
  grid-column: 2; align-self: end; display: flex; align-items: baseline;
  justify-content: space-between; flex-wrap: wrap; gap: 0 10px; min-width: 0;
}
.bundle-name { min-width: 0; font-size: .9rem; font-weight: 500; color: var(--ink); }
.bundle-preis {
  font-family: var(--serif); font-size: 1.02rem; color: var(--accent-deep); white-space: nowrap;
}
.bundle-einheit { grid-column: 2; align-self: start; font-size: .78rem; color: var(--muted); }
/* Zustand (verleih-widget.js): ausdruecklich Spalte 2, siehe verleih.css. */
.bundle-status {
  grid-area: auto; grid-column: 2; font-size: .78rem; color: var(--muted); line-height: 1.35;
}
.bundle-status.ist-drin { color: var(--accent-deep); font-weight: 600; }
@media (max-width: 480px) {
  .bundle-item { column-gap: 10px; }
}
.bundle-item:hover .bundle-name { color: var(--accent-deep); }
.pdp-bundle-hinweis {
  margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--muted);
}
/* Lieferschwelle als feiner Balken (verleih-widget.js). */
.pdp-schwelle { display: block; }
.pdp-schwelle-text {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin: 0 0 8px; font-size: .86rem; color: var(--ink-soft);
}
.pdp-schwelle-text b { color: var(--ink); font-weight: 600; }
.pdp-schwelle-text small { flex: none; font-size: .74rem; color: var(--muted); white-space: nowrap; }
.pdp-schwelle-bahn { display: block; height: 6px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.pdp-schwelle-bahn i {
  display: block; height: 100%; border-radius: 99px; background: var(--accent);
  transition: width .4s ease;
}
.pdp-schwelle-fuss { display: block; margin-top: 8px; font-size: .74rem; color: var(--muted); }
.pdp-schwelle--erreicht .pdp-schwelle-text,
.pdp-schwelle--erreicht .pdp-schwelle-text b { color: var(--accent-deep); }
.pdp-schwelle--erreicht .pdp-schwelle-bahn i { background: var(--accent-deep); }
/* Haken und Text mittig auf einer Hoehe: vorher per vertical-align
   verschoben, und der Haken sass tiefer als die Schrift (Noah, 25.09.2026). */
/* Nur im erreichten Zustand: Beim Satz "Noch 12,00 €, dann ..." machte
   inline-flex aus Wort, Betrag und Rest drei Spalten, die einzeln
   umbrachen (Noah, 05.10.2026). Fliesstext bleibt Fliesstext. */
.pdp-schwelle--erreicht .pdp-schwelle-text > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.pdp-schwelle-haken {
  display: inline-flex; flex: none; width: 16px; height: 16px;
  border-radius: 99px; background: var(--accent-deep); color: #fff;
  align-items: center; justify-content: center;
}
.pdp-schwelle-haken svg { width: 10px; height: 10px; }
@media (prefers-reduced-motion: reduce) { .pdp-schwelle-bahn i { transition: none; } }

/* --- Kaufbox --- */
.pdp-buybox {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: clamp(18px, 2.4vw, 28px); margin-top: 18px;
}
.pdp-buybox .specs { margin-top: 12px; }
/* Das Buchungs-Widget sitzt seit dem Umbau in der Kaufbox statt in einem
   eigenen Abschnitt weiter unten: Verfügbarkeit vor dem Klick, nicht danach. */
.pdp-widget { margin-top: 16px; }
.pdp-widget .vl-lade { min-height: 180px; }
/* Waehrend das Widget laedt, haelt die Kaufbox schon die Hoehe des fertigen
   Widgets frei (16.10.2026) - sonst rutschten WhatsApp-Knopf und
   Konditionen in zwei Stufen um bis zu 270 px nach unten. Gemessen ohne
   gewaehlten Zeitraum; Stuehle und Biertisch tragen zusaetzlich die
   Zubehoerzeile. Aendert sich der Aufbau des Widgets, hier nachmessen. */
.pdp-widget:empty, .pdp-widget:has(> .vl-lade) { min-height: 354px; }
.pdp-widget[data-artikel="stuehle"]:empty,
.pdp-widget[data-artikel="stuehle"]:has(> .vl-lade) { min-height: 434px; }
.pdp-widget[data-artikel="biertisch"]:empty,
.pdp-widget[data-artikel="biertisch"]:has(> .vl-lade) { min-height: 445px; }
@media (min-width: 900px) {
  .pdp-widget:empty, .pdp-widget:has(> .vl-lade) { min-height: 340px; }
  .pdp-widget[data-artikel="stuehle"]:empty,
  .pdp-widget[data-artikel="stuehle"]:has(> .vl-lade) { min-height: 420px; }
  .pdp-widget[data-artikel="biertisch"]:empty,
  .pdp-widget[data-artikel="biertisch"]:has(> .vl-lade) { min-height: 431px; }
}
.pdp-wa-hinweis { margin: 10px 0 0; font-size: .86rem; color: var(--muted); text-align: center; }
.pdp-buybox .hero-actions { margin-top: 18px; gap: 10px; }
/* In der schmalen Kaufbox-Spalte brechen „Verfügbarkeit prüfen" und
   „Frage per WhatsApp" sonst jeweils zweizeilig um. Beschriftung einzeilig
   halten und die Buttons stattdessen umbrechen lassen. */
.pdp-buybox .hero-actions .btn {
  flex: 1 1 auto; justify-content: center; white-space: nowrap;
  padding-inline: 1.2em; font-size: 1rem;
}

/* Das Select bricht auf schmalen Displays in die nächste Zeile, statt die
   Zeile zu sprengen — die Optionstexte sind absichtlich vollständig. */
.calc-row select { flex: 1 1 230px; min-width: 0; max-width: 100%; }
.calc-row input:focus-visible, .calc-row select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc-hinweis { margin: 0 0 10px; font-size: .85rem; color: var(--muted); }
.calc-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin: 0; padding-top: 10px; border-top: 1px solid var(--line);
}
.calc-total span { font-size: .92rem; color: var(--muted); }
.calc-total strong { font-family: var(--serif); font-size: clamp(1.2rem, 2.2vw, 1.5rem); color: var(--accent-deep); }

/* Verfügbarkeits-Zeile (ersetzt das frühere Laufband über dem Produkt) */
.pdp-verfuegbar {
  display: flex; align-items: center; gap: 9px; margin: 16px 0 0;
  font-size: .92rem; font-weight: 600; color: var(--accent-deep);
}
.pdp-verfuegbar::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

/* Vertrauens-Liste UNTER den Buttons */
.pdp-trust { margin-top: 20px; border-top: 1px solid var(--line); }
.pdp-trust li { font-size: .9rem; }
.pdp-trust li:last-child { border-bottom: none; padding-bottom: 0; }

/* --- Liefertabelle --- */
.liefertabelle { width: 100%; border-collapse: collapse; }
.liefertabelle th, .liefertabelle td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); font-size: .94rem; }
.liefertabelle th { color: var(--muted); font-weight: 600; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.liefertabelle td:nth-child(2) { font-weight: 600; color: var(--accent-deep); white-space: nowrap; }
.liefertabelle td:last-child { color: var(--muted); }
.liefertabelle tr:last-child td { border-bottom: none; }
@media (max-width: 560px) { .liefertabelle th:last-child, .liefertabelle td:last-child { display: none; } }

/* --- Kurz-Bullets "Das solltet ihr wissen" --- */
.pdp-bullets { list-style: none; margin: 0; padding: 0; }
.pdp-bullets li { position: relative; padding-left: 26px; margin-bottom: 12px; color: var(--ink-soft); }
.pdp-bullets li::before { content: ""; position: absolute; left: 4px; top: .58em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

/* Sobald die zwei Spalten dieser Sektion untereinander stehen, folgt die
   Datenkarte direkt auf den Knopf "Weitere Artikel ansehen". Die 16 Pixel
   Rasterabstand lesen sich dort wie ein Absatz, nicht wie der Wechsel in den
   naechsten Block. */
@media (max-width: 819px) {
  .wrap.grid-2:has(> div > .pdp-bullets) { row-gap: 34px; }
}

/* ==========================================================================
   Plattform: Merkliste & Direktvergleich
   --------------------------------------------------------------------------
   Der Schritt von "stöbern" zu "entscheiden". Die Leiste bleibt unten stehen,
   solange etwas gemerkt ist — sonst vergisst man die Auswahl beim Scrollen.
   ========================================================================== */
.merkliste-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
  background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px rgba(34,33,29,.10); padding: 12px 0;
}
.merkliste-inhalt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.merkliste-zahl { font-weight: 700; font-size: .95rem; white-space: nowrap; }
.merkliste-namen {
  flex: 1; min-width: 0; font-size: .88rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.merkliste-inhalt .btn { flex: none; }
.merkliste-inhalt .btn.is-inaktiv { opacity: .5; pointer-events: none; }
.merkliste-leeren {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: .85rem;
  color: var(--muted); text-decoration: underline; flex: none;
}
/* Platz schaffen, damit die Leiste nichts verdeckt. Die Höhe meldet das
   Skript, weil sie von der Zahl der Gruppen und vom Umbruch abhängt; der
   feste Wert greift nur, bis die erste Messung da ist. */
body.hat-merkliste { padding-bottom: calc(var(--merkliste-hoehe, 76px) + 8px); }
@media (max-width: 560px) {
  .merkliste-namen { display: none; }
}
.merkliste-meldung {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 88px; z-index: 900;
  max-width: min(92vw, 420px); margin: 0; font-size: .88rem; line-height: 1.5;
  color: #fff; background: var(--ink); padding: 12px 18px; border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.merken-schalter input:checked + span { color: var(--accent-deep); font-weight: 600; }

/* --- Vergleichstabelle --- */
.vergleich-zusammenfassung {
  font-size: .95rem; color: var(--ink-soft);
  background: var(--accent-soft); border-radius: var(--radius); padding: 14px 18px;
}
.vergleich-scroll { overflow-x: auto; margin-top: 20px; }
.vergleich-tabelle { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .92rem; }
.vergleich-tabelle th, .vergleich-tabelle td {
  text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.vergleich-tabelle thead th { border-bottom: 2px solid var(--line); }
.vergleich-tabelle thead th:first-child { border-bottom: 0; }
.vergleich-tabelle tbody th {
  font-weight: 600; color: var(--ink-soft); width: 26%; min-width: 130px;
  background: var(--bg); position: sticky; left: 0;
}
.vergleich-name { display: block; font-family: var(--serif); font-size: 1.08rem; margin-bottom: 8px; }
.vergleich-tabelle thead .btn { padding: 6px 14px; font-size: .82rem; }
.vergleich-entfernen {
  display: block; margin-top: 6px; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .8rem; color: var(--muted); text-decoration: underline;
}
/* Nur die Zeilen, in denen sich die Anbieter unterscheiden, sind interessant.
   Gleiches tritt bewusst zurück — sonst liest man die Tabelle wie vier Profile. */
.vergleich-tabelle tr.ist-abweichend td { background: var(--accent-soft); font-weight: 500; }
.vergleich-tabelle tr.ist-gleich td { color: var(--muted); }
.vergleich-leer { color: var(--line); }

/* ==========================================================================
   Plattform: Anbieterprofil
   --------------------------------------------------------------------------
   Aufbau nach Airbnb-Inseratsseite, Booking.com-Hotelseite und dem
   ImmoScout24-Exposé: Bild → Titel mit Key-Facts in einer Zeile →
   Highlights → Fließtext → Merkmalraster mit Icons → feste Kontaktbox.

   Die Kontaktbox bleibt beim Scrollen stehen. Beim ImmoScout24-Redesign war
   genau das die Änderung mit messbarem Effekt auf die Nachfrage.
   ========================================================================== */

/* --- Kopfbereich ------------------------------------------------------- */
/* Ohne Fotos ein gestaltetes Marken-Band statt leerer Bildkacheln: Ein
   Platzhalterraster verspricht Bilder, die es nicht gibt, und lässt jedes
   Profil nach Baustelle aussehen. */
.profil-band {
  position: relative; display: grid; place-items: center; gap: 10px;
  /* width: 100% ist Pflicht: Mit aspect-ratio UND min-height leitet der
     Browser sonst die BREITE aus der Höhe ab (120 px x 7 = 840 px) und
     sprengt auf dem Handy die Seite. */
  width: 100%; aspect-ratio: 7 / 1; min-height: 120px; max-height: 190px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-deep), var(--accent) 65%, #8a9a72);
  color: #fff; margin-bottom: clamp(20px, 3vw, 32px); overflow: hidden;
}
.profil-band-initialen {
  font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 500; letter-spacing: .04em; line-height: 1;
}
.profil-band-hinweis { font-size: .82rem; opacity: .8; }

.profil-mosaik {
  display: grid; gap: 8px; grid-template-columns: 1fr; position: relative;
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: clamp(20px, 3vw, 32px);
}
@media (min-width: 760px) {
  .profil-mosaik { grid-template-columns: 2fr 1fr; aspect-ratio: 2.4 / 1; width: 100%; }
  .profil-mosaik.ist-einzeln { grid-template-columns: 1fr; }
}
.profil-mosaik-klein { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
.profil-bild {
  position: relative; padding: 0; border: 0; cursor: zoom-in; overflow: hidden;
  background: linear-gradient(150deg, #e9e2d6, #cdbfa9); min-height: 90px;
}
.profil-bild--haupt { min-height: 220px; }
.profil-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profil-bild:hover img { opacity: .92; }
.profil-bild-zaehler {
  position: absolute; right: 14px; bottom: 14px; cursor: pointer; font: inherit;
  font-size: .84rem; font-weight: 600; color: var(--ink);
  background: rgba(255,255,255,.94); border: 1px solid var(--line);
  border-radius: 999px; padding: 8px 16px; box-shadow: var(--shadow-sm);
}

/* --- Zweispalter mit fester Kontaktbox ---------------------------------- */
.profil-layout { display: grid; gap: clamp(24px, 3vw, 44px); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .profil-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .profil-kontakt { position: sticky; top: 88px; }
}
.profil-haupt { min-width: 0; }
.profil-haupt h1 { margin: 2px 0 10px; }

/* Key-Facts als eine Zeile — Airbnbs "6 Gäste · 3 Schlafzimmer · 1 Bad" */
.profil-meta { font-size: 1.02rem; color: var(--ink-soft); margin: 0 0 14px; }
.profil-abzeichen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.profil-abzeichen .badge-geprueft { gap: 6px; }
.profil-icon { flex: none; }
.profil-icon--klein { width: 14px; height: 14px; }

/* --- Highlights (3, Icon + ein Satz) ------------------------------------ */
.profil-highlights {
  list-style: none; margin: clamp(20px, 3vw, 28px) 0 0; padding: 0;
  display: grid; gap: 4px;
}
.profil-highlights li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.profil-highlights li:last-child { border-bottom: 0; }
.profil-highlights svg { color: var(--accent-deep); margin-top: 2px; }
.profil-highlights strong { display: block; font-weight: 600; font-size: .98rem; }
.profil-highlights span { font-size: .88rem; color: var(--muted); line-height: 1.5; }

/* --- Abschnitte --------------------------------------------------------- */
.profil-abschnitt {
  border-top: 1px solid var(--line); padding-top: clamp(24px, 3vw, 34px);
  margin-top: clamp(24px, 3vw, 34px);
}
.profil-abschnitt h2 { font-size: clamp(1.25rem, 1.9vw, 1.5rem); margin-bottom: 14px; }
.profil-abschnitt-lead { color: var(--ink-soft); font-size: .94rem; margin: -8px 0 16px; }
.profil-hinweis { color: var(--muted); font-size: .92rem; line-height: 1.6; margin: 0; }

/* --- Merkmalraster mit Icons -------------------------------------------- */
/* Airbnb "Das bietet dir diese Unterkunft", Booking "Beliebteste
   Ausstattungen": Das Auge scannt Symbole, nicht Label-Wert-Zeilen. */
.profil-merkmale {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px 24px; grid-template-columns: 1fr;
}
@media (min-width: 560px) { .profil-merkmale { grid-template-columns: repeat(2, 1fr); } }
.profil-merkmale li { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.profil-merkmale li.is-versteckt { display: none; }
.profil-merkmale svg { color: var(--accent-deep); margin-top: 3px; }
.profil-merkmale span { display: block; font-size: .8rem; color: var(--muted); }
.profil-merkmale strong { font-weight: 500; font-size: .97rem; overflow-wrap: anywhere; }
#merkmale-mehr { margin-top: 18px; font-size: .9rem; color: var(--accent-deep); }

/* --- Pakete -------------------------------------------------------------- */
.profil-pakete { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .profil-pakete { grid-template-columns: repeat(2, 1fr); } }
.profil-paket {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px;
}
.profil-paket h3 { font-size: 1.02rem; margin-bottom: 4px; }
.paket-bilder { display: flex; gap: 8px; margin: 10px 0; }
.paket-bilder img {
  width: 92px; height: 92px; object-fit: cover; border-radius: 8px;
  background: var(--surface-2, #f4f2ee);
}
.profil-paket-untertitel { color: var(--muted); font-size: .9rem; margin: -4px 0 6px; }
.profil-paket-preis { font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.profil-paket-preis.is-leer { font-weight: 500; color: var(--muted); font-size: .9rem; }
.profil-paket ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.profil-paket li {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: .89rem; color: var(--ink-soft);
}
.profil-paket li svg { color: var(--accent); margin-top: 3px; }
.profil-paket--tabelle { grid-column: 1 / -1; }
.profil-paket--tabelle > ul { margin-bottom: 14px; }
.profil-preistabelle-wrap {
  width: 100%; overflow-x: auto; margin-top: 12px;
  border: 1px solid var(--line); border-radius: 6px;
}
.profil-preistabelle {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font-size: .88rem; color: var(--ink-soft);
}
.profil-preistabelle th,
.profil-preistabelle td { padding: 10px 12px; text-align: left; vertical-align: top; }
.profil-preistabelle th {
  background: var(--bg-2); color: var(--muted); font-size: .76rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0;
}
.profil-preistabelle th:last-child,
.profil-preistabelle td:last-child {
  width: 126px; text-align: right; white-space: nowrap; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.profil-preistabelle tbody tr + tr { border-top: 1px solid var(--line); }
.profil-preistabelle tr.is-versteckt { display: none; }
.profil-preistabelle td strong { display: block; font-weight: 500; color: var(--ink); }
.profil-preistabelle td small { display: block; margin-top: 3px; color: var(--muted); line-height: 1.35; }
.profil-artikel-link {
  display: inline-flex; width: 28px; height: 28px; margin: -5px 0 -5px 5px;
  align-items: center; justify-content: center; vertical-align: middle;
  color: var(--accent-deep); border-radius: 4px;
}
.profil-artikel-link:hover { background: var(--bg-2); }
.profil-artikel-link .profil-icon { width: 16px; height: 16px; }
.profil-paket--tabelle > .js-mehr { margin-top: 12px; }
@media (max-width: 480px) {
  .profil-paket--tabelle { padding: 16px 14px; }
  .profil-preistabelle { font-size: .82rem; }
  .profil-preistabelle th,
  .profil-preistabelle td { padding: 9px 8px; }
  .profil-preistabelle th:last-child,
  .profil-preistabelle td:last-child { width: 92px; }
}

/* --- Kontaktbox ---------------------------------------------------------- */
.profil-kontakt {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm);
  display: grid; gap: 12px; align-content: start;
}
.profil-preis { font-size: 1.6rem; font-weight: 700; margin: 0; line-height: 1.2; }
.profil-preis.is-leer { font-size: 1.05rem; font-weight: 500; color: var(--muted); }
.profil-preis-label { display: block; font-size: .82rem; font-weight: 500; color: var(--muted); }
.profil-kontakt-wege { display: grid; gap: 2px; }
.profil-kontakt-weg {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  font-size: .92rem; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.profil-kontakt-weg:last-child { border-bottom: 0; }
.profil-kontakt-weg:hover { color: var(--accent-deep); }
.profil-kontakt-weg svg { color: var(--muted); flex: none; }
.profil-kontakt-weg:hover svg { color: var(--accent-deep); }
/* Markenzeichen fremder Dienste bleiben schwarz und unveraendert — Metas
   Nutzungsbedingungen fuer das Instagram-Glyph erlauben kein Einfaerben. */
.profil-kontakt-weg .profil-icon--marke,
.profil-kontakt-weg:hover .profil-icon--marke { color: #000; }
.profil-stand { font-size: .76rem; color: var(--muted); line-height: 1.5; margin: 0; }

/* --- Anfrageformular ------------------------------------------------------ */
.profil-anfrage { display: grid; gap: 14px; max-width: 620px; }
.profil-anfrage-reihe { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .profil-anfrage-reihe { grid-template-columns: repeat(2, 1fr); } }
.profil-anfrage .btn { justify-self: start; }

/* Aufzählungen (Leistungen, Enthalten, Service …) als abgehakte Einzelzeilen
   statt als kommagetrennter Fließtext — Airbnbs Ausstattungsliste. */
.profil-liste { margin-top: 26px; }
.profil-liste:first-child { margin-top: 0; }
.profil-liste h3 {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
  margin-bottom: 12px;
}
.profil-liste h3 svg { color: var(--accent-deep); }
.profil-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
@media (min-width: 640px) { .profil-liste ul { grid-template-columns: repeat(2, 1fr); gap: 9px 24px; } }
.profil-liste li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .93rem; color: var(--ink); line-height: 1.5;
}
.profil-liste li.is-versteckt { display: none; }
.profil-liste li svg { color: var(--accent); margin-top: 4px; flex: none; }
.profil-liste .js-mehr { margin-top: 14px; font-size: .88rem; color: var(--accent-deep); }

/* ---------------------------------------------------------------------
   Plattform: Angebotsliste (angebote.html)
   Vergleich auf Angebotsebene statt Anbieterebene. Aufbau wie die
   Kategorieseiten — feste Filterspalte links, Ergebnisse rechts. Bewusst
   Zeilen und keine Kacheln: Verglichen wird entlang einer Spalte, Preis
   unter Preis, Gästezahl unter Gästezahl.
   --------------------------------------------------------------------- */
#angebote-app { display: block; }
@media (min-width: 900px) {
  #angebote-app {
    display: grid; grid-template-columns: 280px minmax(0, 1fr);
    gap: clamp(24px, 3vw, 40px); align-items: start;
  }
}

.angebot-liste { display: flex; flex-direction: column; gap: 12px; }
.angebot-gruppe-titel {
  margin: 20px 0 0; font-family: var(--sans); font-size: .84rem;
  line-height: 1.4; font-weight: 700; color: var(--ink-soft);
}
.angebot-gruppe-titel:first-child { margin-top: 0; }
.angebot-zeile {
  display: flex; gap: 0; justify-content: space-between; align-items: stretch;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  overflow: hidden;
}
.angebot-zeile:hover { border-color: var(--accent); }
.angebot-haupt { min-width: 0; padding: 16px 18px; flex: 1; }

/* Vorschaubild in der Angebotszeile — nur, wenn es eines gibt. Ein leerer
   Rahmen macht die Zeile hoeher, ohne etwas zu zeigen. */
.angebot-bild { flex: none; width: 132px; align-self: stretch; background: var(--surface-2, #f4f2ee); }
.angebot-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  /* Bild und Text nebeneinander, aber die Zeile darf dadurch nicht wachsen:
     Ohne Bild misst sie 223 px, mit unveraendertem Text waren es 316 —
     das haette die mobile Kompaktheit wieder aufgezehrt. Das Bild ersetzt
     deshalb die Aufzaehlung; es sagt dasselbe in weniger Platz. */
  .angebot-zeile.hat-bild { flex-direction: row; flex-wrap: wrap; }
  .angebot-bild { width: 84px; }
  .angebot-zeile.hat-bild .angebot-haupt { flex: 1 1 180px; padding: 12px 14px 8px; }
  .angebot-zeile.hat-bild .angebot-enthalten { display: none; }
  .angebot-zeile.hat-bild .angebot-preis-spalte { flex: 1 1 100%; }
}


.angebot-kopfzeile {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
}
.angebot-typ { color: var(--accent-deep); font-weight: 600; }
.angebot-art { color: var(--muted); }

/* --- Angebotsgruppe des Anbieters ----------------------------------------
   „Paket 50" ist erst mit seiner Gruppe eindeutig: kostBAR fuehrt den Namen
   zweimal, einmal unter Sektempfang (275 EUR), einmal unter Aperitif (350
   EUR). Auf dem Profil traegt das die Zwischenueberschrift, in den Listen
   dieses Label. */
.angebot-anbietergruppe { color: var(--muted); }
.angebot-anbietergruppe::before { content: "· "; }

/* Gliederung der Angebote auf der Profilseite */
.seite-gruppe {
  margin: clamp(22px, 2.5vw, 30px) 0 6px; font-size: 1rem; font-weight: 700;
  color: var(--accent-deep);
}
.seite-gruppe:first-of-type { margin-top: 14px; }
.seite-angebote + .seite-gruppe { margin-top: clamp(24px, 3vw, 34px); }
.seite-angebot-variante { margin: 3px 0 0; font-size: .85rem; color: var(--muted); }

/* Auswahlseite: dieselbe Unterscheidung in einer Zeile */
.auswahl-angebot-gruppe { color: var(--muted); }
.auswahl-angebot-gruppe::after { content: " – "; }
.auswahl-angebot-variante { color: var(--muted); font-size: .85rem; }

.angebot-zeile h3 { margin: 0 0 3px; font-size: 1.05rem; line-height: 1.3; }
.angebot-zeile h3 small { font-weight: 400; color: var(--muted); font-size: .85rem; }
.angebot-anbieter { margin: 0; font-size: .88rem; color: var(--muted); }
.angebot-anbieter a { color: var(--accent-deep); font-weight: 500; }
.angebot-ort::before { content: "· "; }

.angebot-merkmale { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.angebot-merkmal { font-size: .85rem; }
.angebot-merkmal > span { color: var(--muted); }

.angebot-enthalten { margin: 10px 0 0; padding-left: 18px; font-size: .86rem; color: var(--ink-soft); }
.angebot-enthalten li { margin-bottom: 2px; }
.angebot-enthalten .angebot-mehr { list-style: none; margin-left: -18px; color: var(--muted); }

/* Die Preisspalte ist die Vergleichsachse — sie steht abgesetzt und immer an
   derselben Stelle, damit das Auge sie über alle Zeilen hinweg findet. */
.angebot-preis-spalte {
  flex: none; width: 186px; padding: 16px 18px; text-align: right;
  border-left: 1px solid var(--line); background: var(--surface-2, #faf9f7);
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
}
.angebot-preis {
  margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.angebot-preis.is-leer { font-size: .95rem; font-weight: 500; color: var(--muted); }
.angebot-einheit { margin: 0; font-size: .8rem; color: var(--muted); }
.angebot-geprueft { margin: 2px 0 10px; font-size: .74rem; color: var(--muted); }
.angebot-preis-spalte .btn { margin-top: auto; }
.angebot-quelle {
  margin-top: 8px; font-size: .78rem; color: var(--muted); text-decoration: underline;
}
.angebot-mehr-zeile { margin-top: 20px; text-align: center; }
.angebot-mehr-zeile:empty { margin: 0; }

@media (max-width: 640px) {
  /* Die Zeile war 396 px hoch — zwei Angebote pro Bildschirm. Davon waren
     144 px Aufzaehlung und 133 px gestapelte Preisspalte; der eigentliche
     Kern aus Typ, Name und Anbieter misst 66 px. */
  .angebot-zeile { flex-direction: column; }
  .angebot-haupt { padding: 12px 14px; }

  /* Zwei Punkte statt drei, und jeder auf einer Zeile. Ungekürzt brach jeder
     Punkt auf zwei Zeilen um — 96 px allein dafür, mal 25 Zeilen. Der Anfang
     eines Punktes sagt, worum es geht; der Rest steht im Profil. */
  .angebot-enthalten { margin-top: 8px; }
  .angebot-enthalten li:nth-child(n+3):not(.angebot-mehr) { display: none; }
  .angebot-enthalten li {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Preis links, Handlungsknopf rechts — eine Zeile statt eines Stapels. */
  .angebot-preis-spalte {
    width: auto; text-align: left; border-left: 0; border-top: 1px solid var(--line);
    padding: 10px 14px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 0 12px;
  }
  .angebot-preis { grid-column: 1; grid-row: 1; font-size: 1.15rem; }
  .angebot-einheit { grid-column: 1; grid-row: 2; }
  .angebot-geprueft { grid-column: 1; grid-row: 3; margin: 2px 0 0; }
  .angebot-preis-spalte .btn { grid-column: 2; grid-row: 1 / 4; margin: 0; align-self: center; }
  /* Der Quellenlink ist auf dem Handy Beiwerk: Das Profil fuehrt dorthin,
     und jede Zeile kostet hier 20 px mal 25 Zeilen. */
  .angebot-quelle { display: none; }
  .angebot-merken { grid-column: 2; grid-row: 4; margin: 6px 0 0; }
}

/* ==========================================================================
   Plattform: Auswahl und Anfrage
   --------------------------------------------------------------------------
   Der Schritt nach dem Vergleichen. Angebote sammeln, dann anfragen — die
   Auswahlseite gruppiert nach Anbieter, weil man eine Nachricht schreibt und
   nicht drei.
   ========================================================================== */
.angebot-merken {
  margin-top: 8px; padding: 7px 10px; font: inherit; font-size: .82rem;
  line-height: 1.2; cursor: pointer; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  transition: border-color .15s, color .15s, background .15s;
}
.angebot-merken:hover { border-color: var(--accent); color: var(--accent-deep); }
.angebot-merken.is-gemerkt {
  border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent-deep); font-weight: 600;
}

/* Die Eckdaten stehen ueber allen Karten, weil sie in jeden Anfragetext
   fliessen. Ein Feld je Karte waere dieselbe Angabe fuenfmal. */
.auswahl-eckdaten {
  background: var(--accent-soft); border-radius: var(--radius);
  padding: 16px 18px; margin-top: clamp(20px, 3vw, 28px);
}
.auswahl-eckdaten-titel { margin: 0 0 10px; font-weight: 700; font-size: .95rem; }
.auswahl-eckdaten-felder {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.auswahl-eckdaten-felder label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: .82rem; color: var(--ink-soft);
}
.auswahl-eckdaten-felder input {
  font: inherit; font-size: .95rem; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--ink); min-width: 0;
}
.auswahl-eckdaten-felder input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.auswahl-eckdaten-hinweis { margin: 10px 0 0; font-size: .78rem; color: var(--muted); }

.auswahl-zahl { margin: 0 0 14px; font-weight: 700; }
.auswahl-karte {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px;
}
.auswahl-kopf h2 { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.auswahl-ort { margin: 2px 0 0; font-size: .85rem; color: var(--muted); }
.auswahl-kontakt { margin: 8px 0 0; font-size: .88rem; }
.auswahl-kontakt a { color: var(--accent-deep); }

.auswahl-angebote { list-style: none; margin: 14px 0 0; padding: 0; }
.auswahl-angebote li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: .92rem;
}
.auswahl-angebot-name { flex: 1; min-width: 140px; }
.auswahl-angebot-preis { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.auswahl-angebot-geprueft { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.auswahl-entfernen {
  flex: none; width: 26px; height: 26px; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 50%; background: none;
  color: var(--muted); font-size: 1rem; line-height: 1;
}
.auswahl-entfernen:hover { border-color: var(--warm); color: var(--warm); }

/* Der Text steht zugeklappt da: Wer ihn nur kopiert, braucht ihn nicht zu
   sehen — wer misstrauisch ist, muss ihn sehen koennen, bevor er ihn sendet. */
.auswahl-text { margin-top: 14px; }
.auswahl-text summary {
  cursor: pointer; font-size: .85rem; color: var(--accent-deep); font-weight: 600;
}
.auswahl-text pre {
  margin: 10px 0 0; padding: 14px 16px; white-space: pre-wrap; overflow-x: auto;
  font: inherit; font-size: .88rem; line-height: 1.55; color: var(--ink-soft);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
}
.auswahl-aktionen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.auswahl-fuss { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 8px; }

/* In der Leiste koennen beide Listen gleichzeitig stehen: gemerkte Anbieter
   der offenen Kategorie und die kategorieuebergreifende Auswahl. */
.merkliste-gruppe { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.merkliste-gruppe + .merkliste-gruppe { border-left: 1px solid var(--line); padding-left: 14px; }
@media (max-width: 760px) {
  .merkliste-gruppe + .merkliste-gruppe { border-left: 0; padding-left: 0; }
}

/* ---------------------------------------------------------------------
   Ergebnislisten auf dem Handy
   Gemeinsam fuer die Angebotsseite und die elf Kategorieseiten. Gemessen
   war der Zustand vorher: 847 px, bevor das erste Ergebnis sichtbar wurde,
   und 396 px je Zeile — knapp zwei Angebote pro Bildschirm.
   --------------------------------------------------------------------- */
@media (max-width: 899px) {
  /* Filter, Trefferzahl und Sortierung sind das Steuerpult der Liste. Sie
     muessen erreichbar bleiben, wenn man 9.000 px weit gescrollt ist —
     sonst gibt es keinen Weg zurueck ausser ganz nach oben. */
  .ergebnis-kopf {
    /* Genau unter der Kopfzeile: Sie ist 71 px hoch und selbst sticky. */
    position: sticky; top: 70px; z-index: 40;
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 10px; align-items: center;
    margin: 0 -16px 10px; padding: 8px 16px;
    background: var(--bg, #faf8f4); border-bottom: 1px solid var(--line);
  }
  .ergebnis-kopf .filter-open { margin: 0; grid-row: 1; }
  .ergebnis-kopf .ergebnis-steuerung { margin: 0; grid-row: 1; justify-content: flex-end; }
  .ergebnis-anzahl {
    grid-column: 1 / -1; grid-row: 2; font-size: .88rem; color: var(--ink-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ergebnis-anzahl strong { color: var(--ink); }
  .ergebnis-kopf .sort-feld select { width: 100%; }

  .filter-open {
    width: auto; padding: 10px 16px; white-space: nowrap;
  }
  .filter-open.is-aktiv {
    background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep);
    font-weight: 600;
  }

  /* Waagerecht scrollbare Schnellfilter direkt ueber der Liste. Auf dem
     Handy ist das der Weg zu den meistgenutzten Filtern, ohne erst ein
     Overlay zu oeffnen. */
  .schnellfilter {
    display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 12px; padding: 2px 16px 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .schnellfilter::-webkit-scrollbar { display: none; }
  .schnellfilter button {
    flex: none; cursor: pointer; font: inherit; font-size: .86rem;
    padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink-soft); white-space: nowrap;
  }
  .schnellfilter button span { color: var(--muted); font-variant-numeric: tabular-nums; }
  .schnellfilter button.is-aktiv {
    background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep);
    font-weight: 600;
  }
  .schnellfilter button.is-aktiv span { color: var(--accent-deep); }

  /* Mindestens 44 px Beruehrungsflaeche — vorher waren es 32. */
  .filter-option { min-height: 44px; padding: 8px 0; font-size: .95rem; }
  .filter-option input { width: 20px; height: 20px; }
}

@media (min-width: 900px) {
  .schnellfilter { display: none; }
}

/* Der Einstieg gehoert gekuerzt, wo eine Ergebnisliste folgt: Der Lead ist
   Werbetext und stand auf dem Handy zwischen dem Nutzer und dem, wofuer er
   gekommen ist. Auf der Startseite ist der Hero der Inhalt — deshalb genau
   auf Ergebnisseiten begrenzt. */
@media (max-width: 640px) {
  body:has(#angebote-app) .section--hero,
  body:has(#provider-app) .hero {
    padding-block: 20px 12px;
  }
  body:has(#angebote-app) .section--hero h1,
  body:has(#provider-app) .hero h1 { font-size: 1.6rem; margin-bottom: .2em; }
  body:has(#angebote-app) .section--hero .lead,
  body:has(#provider-app) .hero .lead { display: none; }

  #angebote-hinweis .provider-empty {
    padding: 10px 12px; font-size: .85rem; margin-bottom: 12px !important;
  }
}

.suche-bruecke {
  margin: 0 0 16px; padding: 12px 16px; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-deep); font-size: .93rem;
}
.suche-bruecke a { font-weight: 600; }

/* ==========================================================================
   Statische Verzeichnisseiten (seiten.py)
   --------------------------------------------------------------------------
   Profile, Kategorie-Ort- und Produkttypseiten. Diese Seiten kommen ohne
   JavaScript aus dem Generator und sind der Teil der Plattform, den Google
   sieht — deshalb tragen sie den Inhalt selbst und nicht nur ein Geruest.
   ========================================================================== */
.seite-profil {
  display: grid; gap: clamp(20px, 3vw, 36px); align-items: start;
  grid-template-columns: minmax(0, 1fr) 320px;
}
.seite-profil > div > h2 { margin: clamp(28px, 3vw, 40px) 0 12px; font-size: 1.3rem; }
.seite-fakten { margin: 6px 0 14px; color: var(--muted); font-size: .92rem; }
.seite-hinweis { margin: 0 0 10px; font-size: .88rem; color: var(--muted); }

/* Die Kontaktbox bleibt beim Scrollen stehen — beim ImmoScout-Redesign war
   genau das die Aenderung mit messbarem Effekt auf die Nachfrage. */
.seite-kontakt {
  position: sticky; top: 96px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
}
.seite-kontakt h2 { margin: 0 0 10px; font-size: 1.05rem; }
.seite-kontakt a { color: var(--accent-deep); font-weight: 600; }
/* Die Kontaktwege der statischen Profilseite tragen ihre eigene Optik aus
   `.profil-kontakt-weg` — die Regel darueber wuerde sie sonst gruen faerben. */
.seite-kontakt .profil-kontakt-weg { color: var(--ink); font-weight: 500; }
.seite-kontakt .profil-kontakt-weg:hover { color: var(--accent-deep); }
.seite-geprueft { margin: 12px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.5; }
.seite-claim {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .85rem; color: var(--ink-soft); line-height: 1.55;
}

.seite-angebote { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* Jedes Angebot eine eigene Flaeche. Vorher trennte sie nur eine Haarlinie —
   bei fuenfzehn Angeboten mit je zwei Listen darunter war nicht mehr zu sehen,
   wo eines aufhoert und das naechste anfaengt. */
.seite-angebot {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 16px 18px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface);
}
/* Der Textteil nimmt, was uebrig ist. Ohne `flex: 1` blieb er
   inhaltsbreit — bei den Albgut-Raeumen 470 statt 598 px, und die 128 px
   daneben standen leer, waehrend die Leistungsliste sich in die Laenge zog. */
.seite-angebot-kopf { flex: 1; min-width: 0; }
.seite-angebot h3 { margin: 2px 0 0; font-size: 1.02rem; line-height: 1.35; }
.seite-angebot-art {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
/* Eckdaten eines Angebots als Raster statt als Fliesszeile mit Trennpunkten.
   Dieselbe Regel wie auf den Ergebniskarten: Was an derselben Stelle steht,
   laesst sich zwischen zwei Raeumen vergleichen. Die Spaltenzahl setzt
   `seiten.py` inline — ein Raum traegt zwei Angaben, ein Mietartikel drei. */
.seite-angebot-fakten {
  display: grid; gap: 4px 14px; margin: 10px 0 12px; padding: 8px 0;
  border-block: 1px solid var(--line);
}
.seite-angebot-fakt { min-width: 0; }
.seite-angebot-fakt-label, .seite-angebot-fakt-wert {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.seite-angebot-fakt-label {
  font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}
.seite-angebot-fakt-wert { font-size: .88rem; font-weight: 600; color: var(--ink); }

/* Ueberschrift der beiden Bloecke. Ohne sie stand alles in einer Liste, und
   eine Auflage sah aus wie eine Zusage. */
.seite-angebot-block-titel {
  margin: 10px 0 4px; font-size: .7rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent-deep);
}
.seite-angebot-block-titel.ist-auflage { color: var(--warm); }

/* Zweispaltig, sobald Platz ist. Eine einspaltige Liste mit dreizehn
   Ausstattungspunkten schiebt den Preis weit nach oben weg; nebeneinander
   bleibt das Angebot als Ganzes im Blick. `break-inside` haelt einen Punkt
   zusammen, statt ihn zwischen den Spalten zu zerreissen. */
.seite-angebot-enthalten {
  margin: 0; padding-left: 18px; font-size: .85rem; color: var(--ink-soft);
  columns: 2; column-gap: 26px;
}
.seite-angebot-enthalten li { break-inside: avoid; margin-bottom: 3px; }
@media (max-width: 640px) {
  .seite-angebot-enthalten { columns: 1; }
}
/* Was der Anbieter VERLANGT. Belegt an der Festscheune des Hofguts Uhenfels:
   „Getraenke ausschliesslich ueber den Partner Grimm-Sommer GbR; eigene
   Getraenke sind nicht erwuenscht" stand unter denselben Haken wie
   „Individuelle Dekoration erlaubt". */
.seite-angebot-bedingungen {
  margin: 0; padding-left: 18px; font-size: .85rem; color: var(--ink-soft);
  list-style: none;
}
.seite-angebot-bedingungen li { position: relative; margin-bottom: 3px; }
.seite-angebot-bedingungen li::before {
  content: "!"; position: absolute; left: -14px; top: 0;
  font-weight: 700; color: var(--warm);
}

/* Was gebucht sein muss, damit ein Angebot ueberhaupt geht. Steht unter den
   Eckdaten, nicht in der Leistungsliste: Es ist keine Eigenschaft des
   Angebots, sondern die Bedingung, unter der es existiert. */
.seite-angebot-nur-mit {
  margin: 0 0 12px; padding: 7px 10px; font-size: .82rem;
  background: var(--accent-soft); border-radius: 8px; color: var(--ink-soft);
}
.seite-angebot-nur-mit-label {
  font-size: .7rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent-deep); margin-right: 6px;
}
.seite-angebot-nur-mit a { color: var(--accent-deep); font-weight: 600; }
.seite-angebot-nur-mit-quelle {
  display: block; margin-top: 2px; font-size: .78rem; color: var(--muted);
}

/* Angebotssuche: direkt unter dem Preis, weil genau der sonst falsch gelesen
   wird. Karlstals Bankettstuhl fuer 6,90 € stand neben frei mietbaren
   Stuehlen fuer 5,99 € — als waere er dasselbe Angebot. */
.angebot-nur-mit {
  margin: 4px 0 0; font-size: .76rem; line-height: 1.35; color: var(--warm);
}

/* Auswahlseite: die Luecke, bevor die Anfrage rausgeht. */
.auswahl-fehlt {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px;
  background: #f7ece3; border: 1px solid #eddcc9;
}
.auswahl-fehlt-text { margin: 0; font-size: .88rem; color: var(--ink); }
.auswahl-fehlt-text + .auswahl-fehlt-text { margin-top: 8px; }
.auswahl-fehlt-quelle { color: var(--muted); font-size: .82rem; }
.auswahl-fehlt-knoepfe {
  margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px;
}

/* Dieselben zwei Bloecke im dynamischen Zwilling. */
.profil-block-titel {
  margin: 10px 0 4px; font-size: .7rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent-deep);
}
.profil-block-titel.ist-auflage { color: var(--warm); }
.profil-bedingungen { list-style: none; padding-left: 18px; }
.profil-bedingungen li { position: relative; }
.profil-bedingungen li::before {
  content: "!"; position: absolute; left: -14px; top: 0;
  font-weight: 700; color: var(--warm);
}
/* Weitere Leistungen eines Angebots. Bis Anfang August wurden alle Eintraege
   ab dem fuenften stillschweigend weggelassen — bei OaseWeil endete die Liste
   dadurch genau vor der Saalausstattung. Jetzt klappen sie auf. */
/* Mehrere Gewerke in einem Profil. Kriesten Garden ist Location UND Verleih —
   wer ueber „Locations" kommt, sah bisher zuerst neun Mietartikel. Jetzt steht
   die Einstiegskategorie offen, die uebrigen klappen auf. */
.seite-gewerk { margin-top: clamp(16px, 2.5vw, 24px); }
.seite-gewerk-titel,
details.seite-gewerk > summary {
  margin: 0 0 8px; font-size: 1.05rem; font-weight: 600;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.seite-gewerk-titel span,
details.seite-gewerk > summary span { color: var(--muted); font-weight: 400; }
details.seite-gewerk > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 6px;
}
details.seite-gewerk > summary::-webkit-details-marker { display: none; }
details.seite-gewerk > summary::after {
  content: "+"; margin-left: auto; color: var(--accent-deep); font-weight: 600;
}
details.seite-gewerk[open] > summary::after { content: "\2212"; }
.seite-gewerk .seite-gruppe { font-size: .95rem; margin-top: 14px; }

/* Bedingungen neben dem Preis. Ohne sie liest sich ein Nettopreis wie ein
   Endpreis — bei der Villa Schwalbenhof rund ein Drittel zu niedrig. */
.angebot-preis-hinweis {
  margin: 2px 0 0; font-size: .78rem; line-height: 1.35; color: var(--muted);
}

.seite-angebot-preis {
  flex: none; width: 170px; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}

.seite-merkmale {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px;
  margin: 0; font-size: .93rem;
}
.seite-merkmale dt { color: var(--muted); }
/* Begruendete Luecke: Die Zeile bleibt stehen, damit zwei Profile dieselben
   Fragen beantworten — aber sie tritt zurueck. Ein „Keine Angabe" in derselben
   Staerke wie eine echte Zahl waere Rauschen statt Information. */
.seite-merkmale dd.ist-luecke,
.profil-merkmale li.ist-luecke strong { color: var(--muted); font-weight: 400; }
.seite-merkmale dd { margin: 0; }
.seite-orte { color: var(--ink-soft); }
.seite-links { margin: 0; padding-left: 18px; }
.seite-links a { color: var(--accent-deep); }

/* Trefferliste der Sammelseiten — bewusst dieselbe Zeilenform wie in den
   dynamischen Ergebnislisten, damit der Wechsel nicht auffaellt. */
.seite-treffer-liste { display: grid; gap: 12px; margin-top: clamp(20px, 3vw, 28px); }
.seite-treffer {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px;
}
.seite-treffer:hover { border-color: var(--accent); }
.seite-treffer h3 { margin: 0; font-size: 1.05rem; }
.seite-treffer-ort { margin: 3px 0 0; font-size: .85rem; color: var(--muted); }
.seite-treffer-text { margin: 8px 0 0; font-size: .92rem; color: var(--ink-soft); }
.seite-treffer-preis {
  margin: 8px 0 0; font-weight: 700; font-variant-numeric: tabular-nums;
}
.seite-weiter { margin: clamp(20px, 3vw, 28px) 0 0; }
.seite-weiter a { color: var(--accent-deep); font-weight: 600; }

@media (max-width: 900px) {
  .seite-profil { grid-template-columns: minmax(0, 1fr); }
  /* Auf dem Handy gehoert der Kontakt ans Ende: Erst wissen, worum es geht. */
  .seite-kontakt { position: static; order: 2; }
}
@media (max-width: 560px) {
  .seite-angebot { flex-direction: column; gap: 8px; }
  .seite-angebot-preis {
    width: auto; text-align: left; flex-direction: row;
    align-items: center; justify-content: space-between; width: 100%;
  }
}

/* Ortsliste unter der Ergebnisliste: der Einstieg in die Kombiseiten und
   zugleich ihre interne Verlinkung. */
.ortsblock-titel { font-size: 1.15rem; margin: 0 0 12px; }
.ortsblock { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ortsblock a {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 13px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-size: .9rem; color: var(--ink-soft);
}
.ortsblock a:hover { border-color: var(--accent); color: var(--accent-deep); }
.ortsblock span { font-size: .78rem; color: var(--muted); }

/* ==========================================================================
   Plattform-Marktplatz: Suchzeile, Kategorie-Chips, Bildkacheln
   --------------------------------------------------------------------------
   Nach dem Muster von Check24, an deren Startseite gemessen (375 px): Suche
   zuerst und auf jeder Seite, Kategorien als Chips zum Springen, danach erst
   die visuellen Kacheln. Wer sucht, soll nie in einer Sackgasse landen.
   ========================================================================== */
.plattform-suchzeile {
  background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 10px 0;
}
.plattform-suchzeile form { display: flex; gap: 8px; align-items: center; }
.plattform-suchzeile input {
  flex: 1; min-width: 0; font: inherit; font-size: .95rem; height: 44px;
  padding: 0 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink);
}
.plattform-suchzeile input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.plattform-suchzeile .btn { flex: none; height: 44px; padding: 0 18px; }

/* --- Startseite: grosse Suche --- */
.markt-kopf { padding-top: clamp(24px, 4vw, 44px); padding-bottom: clamp(20px, 3vw, 32px); }
.markt-suche {
  display: flex; gap: 8px; margin-top: clamp(18px, 2.5vw, 26px); text-align: left;
}
.markt-suche-feld { flex: 1 1 auto; min-width: 0; }
.markt-suche-ort { flex: 0 0 auto; }
.markt-suche input, .markt-suche select {
  width: 100%; font: inherit; font-size: 1rem; height: 52px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink);
}
.markt-suche .btn { flex: none; height: 52px; padding: 0 26px; }

/* --- Kategorie-Chips ---------------------------------------------------
   Masse von check24.de uebernommen: 32 px hoch, Radius 16 px, 14 px Schrift,
   6 px Abstand. Der Scrollbalken bleibt verborgen; dass es weitergeht, zeigt
   der angeschnittene letzte Chip — dieselbe Loesung wie dort, ohne Pfeile. */
.kat-chips {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  scroll-padding-inline: 4px; padding-bottom: 4px;
  margin-bottom: clamp(18px, 2.5vw, 26px);
}
.kat-chips::-webkit-scrollbar { display: none; }
.kat-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 5px 12px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: .875rem; color: var(--ink-soft); white-space: nowrap;
}
.kat-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.kat-chip span { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* --- Bildkacheln --------------------------------------------------------
   Zweispaltig auf dem Handy statt einer Scrollreihe: Check24 hat 114
   Kategorien und muss scrollen, wir haben elf — die passen alle ins Bild. */
.kat-kacheln { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kat-kachel {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  background: var(--bg-2); min-height: 44px;
}
.kat-kachel img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; transition: transform .3s ease;
}
.kat-kachel:hover img { transform: scale(1.04); }
.kat-kachel-text {
  position: absolute; inset: auto 0 0 0; padding: 26px 14px 12px; color: #fff;
  background: linear-gradient(to top, rgba(20,19,16,.78), rgba(20,19,16,0));
  display: block;
}
.kat-kachel-text strong { display: block; font-size: .98rem; line-height: 1.25; }
.kat-kachel-zahl { display: block; font-size: .8rem; opacity: .88; margin-top: 2px; }

/* --- Produkttypen und Uebersicht --- */
.typ-links {
  list-style: none; margin: clamp(16px, 2vw, 22px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.typ-links a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: .92rem; color: var(--ink-soft);
}
.typ-links a:hover { border-color: var(--accent); color: var(--accent-deep); }
.typ-links span { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.uebersicht-liste {
  list-style: none; margin: 0 0 clamp(24px, 3vw, 34px); padding: 0;
  display: grid; gap: 2px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.uebersicht-liste li { padding: 9px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.uebersicht-liste a { font-weight: 600; }
.uebersicht-liste span { color: var(--muted); font-size: .85rem; margin-left: 6px; }
.seite-zahl { color: var(--muted); font-weight: 400; font-size: .85rem; }

@media (min-width: 640px) {
  .kat-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 900px) {
  .kat-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .kat-kachel-text { padding: 30px 16px 14px; }
  .kat-kachel-text strong { font-size: 1.05rem; }
}
@media (max-width: 560px) {
  /* Die Ortsauswahl unter das Suchfeld: nebeneinander bliebe fuer beide zu
     wenig Platz, und der Knopf rutschte aus dem sichtbaren Bereich. */
  .markt-suche { flex-wrap: wrap; }
  .markt-suche-feld { flex: 1 1 100%; }
  .markt-suche-ort { flex: 1 1 auto; }
  .markt-suche .btn { flex: 0 0 auto; }
  /* Die Chipleiste darf bis an den Rand laufen, damit der angeschnittene
     letzte Chip sichtbar bleibt — sonst fehlt der Hinweis aufs Weiterscrollen. */
  .kat-chips { margin-inline: calc(var(--wrap-pad, 20px) * -1); padding-inline: 20px; }
}

/* --- Ergebniskarten: gleiche Hoehe ueber alle Karten --------------------
   Vorher hatte jede Karte je nach Datenlage andere Bloecke — mal Stilchips,
   mal Fakten, mal nichts. Dadurch stand nichts auf einer Linie. Die beiden
   optionalen Zeilen behalten ihren Platz, auch wenn sie leer sind. */
@media (min-width: 760px) {
  /* Das Faktenraster traegt seine Hoehe selbst — jede Spalte hat Beschriftung
     und Wert, auch wenn der Wert fehlt. Eine min-height braucht es dafuer
     nicht mehr. */
  .provider-grid.is-liste .provider-body {
    display: flex; flex-direction: column; gap: 2px;
  }
  .provider-grid.is-liste .provider-desc { margin-bottom: 8px; }
}
/* Ein Fakt ist eine kurze Aussage, kein Satz. Laeuft doch einer ueber, endet
   er an der Wortgrenze statt mitten im Wort. */
.provider-fakt {
  display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}

/* ==========================================================================
   Marktplatz-Umbau: Angebote in den Fokus
   Locationsuche (Archetyp A), Artikeltyp-Kacheln (B), Angebots-Zeile auf
   Anbieterkarten (C), Steckbrief und kompakte Mietartikel-Zeilen im Profil.
   ========================================================================== */

/* --- Tab-Leiste Locations | Anbieter ------------------------------------ */
.raum-umschalter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.raum-umschalter .tab {
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: .92rem; color: var(--ink);
  cursor: pointer; font-family: inherit;
}
.raum-umschalter .tab.is-aktiv { background: var(--accent-deep); color: #fff; border-color: var(--accent-deep); }

/* --- Locationkarte (eine Raeumlichkeit = ein Treffer) ------------------- */
.raum-liste { display: grid; gap: 14px; }
.raum-karte {
  display: grid; grid-template-columns: 1fr 190px; gap: 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius, 14px); padding: 18px 20px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.raum-karte:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.raum-art {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-deep); font-weight: 600; margin: 0 0 2px;
}
.raum-karte h3 { margin: 0 0 2px; font-size: 1.15rem; }
.raum-anbieter { margin: 10px 0 0; color: var(--muted); font-size: .92rem; }
.raum-anbieter a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.raum-fakten { grid-template-columns: repeat(4, minmax(0,1fr)); max-width: 560px; margin-top: 10px; }
.raum-karte-aside {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  justify-content: flex-start; text-align: right;
}
.raum-preis { font-weight: 700; font-size: 1.12rem; }
.raum-preis.is-anfrage { font-weight: 400; font-size: .9rem; color: var(--muted); }
.raum-preis-einheit { display: block; font-size: .75rem; color: var(--muted); font-weight: 400; }
@media (max-width: 700px) {
  .raum-karte { grid-template-columns: 1fr; }
  .raum-fakten { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .raum-karte-aside { flex-direction: row; align-items: center; text-align: left; flex-wrap: wrap; }
  .raum-karte-aside .btn { flex: 1; }
}

/* --- Artikeltyp-Kacheln auf Kategorieseiten ----------------------------- */
.typ-kacheln-block { margin: 0 0 28px; }
.typ-kacheln-block h2 { margin: 0 0 4px; }
.typ-kacheln-hinweis { margin: 0 0 14px; color: var(--muted); }
.typ-kacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.typ-kachel {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--surface); text-decoration: none; color: var(--ink);
  transition: box-shadow .15s ease, transform .15s ease;
}
.typ-kachel:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.typ-kachel-preis { color: var(--accent-deep); font-weight: 600; font-size: .95rem; }
.typ-kachel-zeile { color: var(--muted); font-size: .8rem; }

/* --- Angebots-Zeile auf der Anbieterkarte ------------------------------- */
.provider-angebote {
  margin: 8px 0 0; font-size: .88rem; font-weight: 600; color: var(--accent-deep);
}

/* --- Steckbrief im Profilkopf ------------------------------------------- */
.profil-steckbrief {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0 18px; margin: 14px 0 4px; padding: 12px 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  max-width: 640px;
}
.profil-steckbrief .provider-fakt { display: flex; flex-direction: column; white-space: normal; }
.profil-steckbrief .provider-fakt-label {
  font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.profil-steckbrief .provider-fakt-wert { font-weight: 600; }
.profil-steckbrief .provider-fakt.ist-leer .provider-fakt-wert { font-weight: 400; color: var(--muted); }

/* --- Gruppen-Navigation im Profil --------------------------------------- */
.seite-gruppen-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.seite-gruppen-nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: .88rem; text-decoration: none; color: var(--ink);
}
.seite-gruppen-nav a:hover { border-color: var(--accent-deep); }
.seite-gruppen-nav a span { color: var(--muted); font-size: .8rem; }
.seite-gruppe-anzahl { color: var(--muted); font-weight: 400; font-size: .85em; }

/* --- Aufklappen langer Gruppen ------------------------------------------ */
.seite-angebote-mehr > summary {
  cursor: pointer; padding: 10px 0 14px; color: var(--accent-deep); font-weight: 600;
  list-style: none;
}
.seite-angebote-mehr > summary::before { content: "+ "; }
.seite-angebote-mehr[open] > summary::before { content: "− "; }
.seite-angebote-mehr > summary::-webkit-details-marker { display: none; }

/* --- Mietartikel als Preislisten-Zeile ----------------------------------- */
.seite-angebot--zeile {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px !important;
}
.seite-zeile-haupt { flex: 1; min-width: 0; }
.seite-angebot--zeile h3 { margin: 0; font-size: .98rem; }
.seite-zeile-detail { margin: 2px 0 0; color: var(--muted); font-size: .85rem; }
.seite-zeile-seite {
  display: flex; align-items: center; gap: 12px; flex: none; text-align: right;
}
.seite-zeile-seite .angebot-preis { margin: 0; }
.seite-zeile-menge { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.angebot-merken--zeile { padding: 6px 10px; font-size: .82rem; }
@media (max-width: 640px) {
  .seite-angebot--zeile { flex-wrap: wrap; }
  .seite-zeile-seite { width: 100%; justify-content: space-between; }
}

/* --- Artikeltyp-Seiten: Vergleichszeilen --------------------------------- */
.seite-treffer { display: flex; align-items: center; gap: 14px; }
.seite-treffer-haupt { flex: 1; min-width: 0; }
.seite-treffer-variante { margin: 2px 0 0; color: var(--muted); font-size: .85rem; }
.seite-treffer-seite { display: flex; align-items: center; gap: 12px; flex: none; }
.seite-treffer-preis.is-leer { color: var(--muted); font-weight: 400; font-size: .9rem; }
@media (max-width: 640px) {
  .seite-treffer { flex-wrap: wrap; }
  .seite-treffer-seite { width: 100%; justify-content: space-between; }
}
/* Die Spaltenbeschriftung darf umbrechen — „Trauung vor Ort" abgeschnitten
   als „Trauung vor…" wäre genau die Unklarheit, die die Spalte beheben soll. */
.raum-fakten .provider-fakt { white-space: normal; display: flex; flex-direction: column; }

/* ===========================================================================
   Bildband — der Hero seit dem Umbau: ganzflaechiges Foto, links
   abgedunkelt, ohne Knoepfe. Die Verfuegbarkeitspruefung schiebt sich
   von unten darueber, deshalb der Innenabstand nach unten.
   =========================================================================== */
.bildband { position: relative; height: clamp(400px, 52vw, 560px); overflow: hidden; }
.bildband-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% center;
}
.bildband-schleier {
  position: absolute; inset: 0;
  background: linear-gradient(96deg, rgba(24,23,20,.86) 0%, rgba(24,23,20,.68) 34%,
                              rgba(24,23,20,.20) 62%, rgba(24,23,20,.05) 100%);
}
.bildband-text {
  position: relative; height: 100%; display: flex; flex-direction: column;
  justify-content: center; gap: 16px; padding-bottom: clamp(70px, 10vw, 120px);
}
.bildband-text h1 {
  font-size: clamp(2rem, 5vw, 3.5rem); color: #fff; max-width: 16ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
}
.eyebrow--hell { color: #cbd3bb; }
.bildband-lead { font-size: clamp(1rem, 1.6vw, 1.19rem); color: #ece7dc; max-width: 44ch; }

/* Abschnittskopf mit Bewertung rechts (echte Hochzeiten) */
.abschnitt-kopf {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 32px);
}
.abschnitt-kopf h2 { margin: 0; }

/* Was immer dabei ist */
.zusagen-gitter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 900px) { .zusagen-gitter { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.zusage {
  display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 2.4vw, 24px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
}
.zusage-zahl { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.65rem); color: var(--accent-deep); line-height: 1; }
.zusage-titel { font-family: var(--serif); font-size: 1.18rem; color: var(--ink); }
.zusage-text { font-size: .88rem; color: var(--ink-soft); line-height: 1.5; }

/* Tools- und Plattform-Teaser */
.teaser-paar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 820px) { .teaser-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.teaser { padding: clamp(20px, 2.6vw, 28px) clamp(20px, 2.8vw, 30px); display: flex; align-items: center; gap: 18px; }
.teaser-icon {
  width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-deep);
}
.teaser-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.teaser-titel { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); }
.teaser-unter { font-size: .88rem; color: var(--ink-soft); }
.teaser .btn { flex: none; min-height: 44px; padding: 11px 20px; font-size: .95rem; }

/* CTA-Band mit zwei Spalten */
.cta-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; }
@media (min-width: 860px) { .cta-raster { grid-template-columns: 1fr auto; gap: 40px; } }
.cta-raster h2 { color: #fff; margin: 0 0 8px; }
.cta-raster p { color: #cfc8bb; max-width: 48ch; }
.cta-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===========================================================================
   Kopfzeile über dem Bildband
   Die transparente Kopfzeile trug dunkle Schrift — das passte zum frueheren
   hellen Hero. Das Bildband ist links abgedunkelt, also muss sie hell sein.
   Sobald hdr-solid greift (beim Scrollen), gelten wieder die dunklen Regeln
   weiter oben; diese Block steht danach, deshalb wird er von :not() begrenzt.
   =========================================================================== */
body.home .site-header:not(.hdr-solid) .brand { color: #fff; }
body.home .site-header:not(.hdr-solid) .brand span { color: #cbd3bb; }
body.home .site-header:not(.hdr-solid) .nav-links a,
body.home .site-header:not(.hdr-solid) .nav-dropdown > summary { color: rgba(255, 255, 255, .88); }
body.home .site-header:not(.hdr-solid) .nav-links a:hover,
body.home .site-header:not(.hdr-solid) .nav-dropdown > summary:hover { color: #fff; }
body.home .site-header:not(.hdr-solid) .nav-toggle span { background: #fff; }


/* ===========================================================================
   STARTSEITE (Neuaufbau September 2026)
   Kopf mit Bildstreifen, Sortiment, Bewertungen, Ablauf, Über uns, FAQ,
   Kontakt. Die Buchungsbausteine selbst stehen in verleih.css — hier steht
   nur, was die Startseite darum herum baut.
   =========================================================================== */
/* --- Kopf, gemeinsam --------------------------------------------------- */
.kopf { background: var(--accent-soft); }
.kopf-innen { padding-block: clamp(28px, 4.5vw, 56px) clamp(24px, 3.5vw, 40px); }
.kopf h1 {
  max-width: 15ch;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  margin-bottom: .35em;
}
.kopf-lead { font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 46ch; margin-bottom: 18px; }

/* Jede Aussage bleibt als Ganzes zusammen und bringt ihren Trenner selbst
   mit — sonst steht auf dem Handy ein einsames „·" am Zeilenende. */
.kopf-vertrauen {
  display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap;
  margin: 0 0 clamp(20px, 3vw, 28px);
  font-size: .9rem; color: var(--ink-soft);
}
.kopf-vertrauen .ve { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kopf-vertrauen .ve + .ve::before { content: "·"; color: var(--muted); margin-right: 8px; }
.kopf-vertrauen .stars { color: var(--star); letter-spacing: .06em; }

/* --- Variante B: Bildstreifen ------------------------------------------ */
.kopf--b .kopf-band {
  position: relative;
  min-height: clamp(300px, 32vw, 420px);
  overflow: hidden;
}
.kopf--b .kopf-band img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  /* Das Original ist kühl und dunkel — heller, wärmer, etwas satter. */
  filter: brightness(1.14) saturate(1.12) sepia(.14);
}
/* Warmer statt neutral-schwarzer Schleier, und nur so viel wie die
   Lesbarkeit braucht. Seit im Bild drei Textzeilen stehen, kommt eine zweite,
   senkrechte Lage dazu — ohne sie schwimmt die Vertrauenszeile im hellen
   Teil des Fotos. */
.kopf--b .kopf-band::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(52,34,20,.10) 0%, rgba(52,34,20,.30) 55%,
                    rgba(52,34,20,.55) 100%),
    linear-gradient(92deg, rgba(52,34,20,.70) 0%, rgba(52,34,20,.46) 52%,
                    rgba(52,34,20,.12) 100%);
}

/* Auf dem Handy steht alles über die volle Breite — dort muss der Schleier
   flächig tragen, ein Verlauf nach rechts hilft nicht. */
@media (max-width: 760px) {
  .kopf--b .kopf-band::after {
    background: linear-gradient(180deg, rgba(52,34,20,.42) 0%, rgba(52,34,20,.58) 100%);
  }
}
.kopf--b .kopf-band-text {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  gap: 12px; padding-block: clamp(28px, 4vw, 48px);
  min-height: clamp(300px, 32vw, 420px);
}
/* Auf dem Bild braucht jede Textzeile ihren eigenen Kontrast. */
.kopf--b .kopf-band-text .kopf-lead { color: #f0ebe1; margin: 0; max-width: 48ch;
  text-shadow: 0 1px 14px rgba(40,24,12,.55); }
.kopf--b .kopf-band-text .kopf-vertrauen { color: #e7e1d5; margin: 0;
  text-shadow: 0 1px 12px rgba(40,24,12,.6); }
.kopf--b .kopf-band-text .kopf-vertrauen span[aria-hidden="true"]:not(.stars) { color: #b9b2a4; }
.raster-titel { margin-bottom: 0; }
.kopf--b .kopf-band-text h1 {
  color: #fff; margin: 0; max-width: 17ch;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  text-shadow: 0 2px 22px rgba(40,24,12,.55);
}
/* Auf dem helleren Bild trägt das gedämpfte Salbei nicht mehr — das
   Kleingedruckte braucht Weiß und einen eigenen Schatten. */
.kopf--b .kopf-band-text .eyebrow {
  color: #f4efe6; text-shadow: 0 1px 12px rgba(40,24,12,.6);
}
.kopf--b .kopf-innen,
.kopf--fuss .kopf-innen { padding-block: clamp(20px, 3vw, 32px) clamp(24px, 3.5vw, 40px); }

/* --- Datumszeile -------------------------------------------------------- */
.startdatum {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(16px, 2.4vw, 24px);
}
.startdatum-felder {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 14px; align-items: end;
}
.startdatum .vl-feld label {
  display: block; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.startdatum input, .startdatum select {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
}
.startdatum input:focus, .startdatum select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.startdatum-hinweis {
  margin: 12px 0 0; font-size: .9rem; color: var(--ink-soft);
}

/* --- Kachelraster ------------------------------------------------------- */
.startraster { padding-block: clamp(28px, 4vw, 44px) 0; }
.startraster-gitter {
  display: grid; gap: clamp(12px, 1.6vw, 18px);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.kachel {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kachel:hover { box-shadow: var(--shadow-sm); }
.kachel.ist-gewaehlt { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.kachel.ist-konflikt { border-color: var(--warm); box-shadow: 0 0 0 1px var(--warm); }
.kachel.ist-aus { opacity: .55; }
.kachel-bild {
  display: block; aspect-ratio: 4 / 3; background: var(--bg-2);
}
.kachel-bild img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.kachel-text { padding: 12px 14px 10px; flex: 1; }
.kachel-text h3 { font-size: 1.02rem; margin: 0 0 2px; line-height: 1.25; }
.kachel-preis { margin: 0 0 6px; font-size: .9rem; color: var(--ink-soft); }
.kachel-lage {
  display: inline-block; font-size: .82rem; font-weight: 500;
  padding: 2px 9px; border-radius: 999px;
}
.kachel-lage.ist-frei    { background: var(--accent-soft); color: var(--accent-deep); }
.kachel-lage.ist-knapp   { background: #fdf0e3; color: #9a5f2c; }
.kachel-lage.ist-weg     { background: #f2ece6; color: var(--muted); }
.kachel-lage.ist-neutral { background: var(--bg-2); color: var(--ink-soft); }
.kachel-lage.ist-unklar  { background: var(--bg-2); color: var(--muted); }
.kachel-still { margin: 0; padding: 0 14px 12px; font-size: .8rem; color: var(--muted); }

.kachel-menge {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 14px 14px;
}
.mengen-knopf {
  width: 38px; height: 38px; border-radius: 10px; font-size: 1.2rem; line-height: 1;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); cursor: pointer;
}
.mengen-knopf:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.mengen-knopf:disabled { opacity: .35; cursor: default; }
.mengen-zahl { font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 600; }

.kachel-konflikt {
  padding: 10px 14px 14px; background: #fdf6ef;
  border-top: 1px solid #f0dfcd;
}
.kachel-konflikt p { margin: 0 0 8px; font-size: .84rem; color: #7d4d21; }
.btn--klein { padding: 6px 12px; font-size: .82rem; margin: 0 6px 6px 0; }

/* --- Fussband ----------------------------------------------------------- */
.startraster-fuss {
  position: static;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: clamp(16px, 2.4vw, 22px);
  padding: 14px clamp(14px, 2vw, 20px);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.startraster-fuss.ist-aktiv {
  position: sticky; bottom: 12px; z-index: 40; box-shadow: var(--shadow);
}
.startraster-summe { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.startraster-summe strong { font-size: 1.02rem; }
.startraster-summe span { color: var(--ink-soft); }
.startraster-still { margin: 0; font-size: .88rem; color: var(--ink-soft); }
.startraster-fuss .vl-hinweis { margin: 0; font-size: .88rem; color: #9a5f2c; }

@media (max-width: 720px) {
  .startdatum-felder { grid-template-columns: 1fr; }
  .startraster-gitter { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .kachel-text h3 { font-size: .95rem; }
  .startraster-fuss { flex-direction: column; align-items: stretch; text-align: left; }
  .startraster-fuss .btn { width: 100%; text-align: center; }
}


/* ===========================================================================
   Handy zuerst: Auf 375 Pixeln zählt jede Zeile. Der Kopf darf den ersten
   Bildschirm nicht allein füllen — Ziel ist, dass die Terminleiste ohne
   Scrollen sichtbar ist und die erste Artikelkarte angerissen wird.
   =========================================================================== */
@media (max-width: 600px) {
  .kopf--b .kopf-band { min-height: 0; }
  .kopf--b .kopf-band-text {
    min-height: 0; gap: 7px; padding-block: 22px 18px;
  }
  .kopf--b .kopf-band-text h1 {
    font-size: 1.62rem; line-height: 1.14; max-width: 20ch;
  }
  /* Beim Umbruch landete der Trenner am Zeilenanfang — auf dem Handy trennt
     deshalb nur der Abstand. */
  .kopf-vertrauen .ve + .ve::before { content: none; }
  .kopf-vertrauen { column-gap: 14px; row-gap: 2px; }
  .kopf--b .kopf-band-text .kopf-lead {
    font-size: .92rem; line-height: 1.5; max-width: 34ch;
  }
  .kopf-vertrauen { font-size: .8rem; gap: 2px 10px; }
  .kopf-vertrauen .ve + .ve::before { margin-right: 6px; }
  .raster-titel { font-size: 1.4rem; }
}


/* Schmales Band unter dem Bild: trägt die Vertrauenszeile, ohne das Foto
   zuzutexten. */
.kopf-band-fuss {
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  padding-block: 9px;
}
.kopf-band-fuss .kopf-vertrauen { margin-block: 0; margin-inline: auto; font-size: .85rem; }

@media (max-width: 600px) {
  .kopf-band-fuss { padding-block: 7px; }
  .kopf-band-fuss .kopf-vertrauen { font-size: .78rem; }
}

/* Bewertung in die erste Zeile, die beiden Zusagen darunter — nebeneinander
   wurde es auf dem Handy zu lang und brach an einer beliebigen Stelle um. */
.kopf-vertrauen .ve--bewertung { flex-basis: 100%; }
.kopf-vertrauen .ve--bewertung + .ve::before { content: none; }

@media (max-width: 600px) {
  /* In der zweiten Zeile stehen nur noch zwei Angaben — dort trennt der Punkt
     wieder, ohne dass er am Zeilenanfang landen kann. */
  .kopf-band-fuss .kopf-vertrauen .ve + .ve::before {
    content: "·"; color: var(--muted); margin-right: 6px;
  }
  .kopf-band-fuss .kopf-vertrauen .ve--bewertung + .ve::before { content: none; }
  .kopf-band-fuss .kopf-vertrauen { row-gap: 1px; }
}

/* ===========================================================================
   Abschnitt 4 — Bewertungen und Bilder der Kunden
   =========================================================================== */
.echte-feiern { margin-top: clamp(28px, 4vw, 44px); }
.echte-feiern h3 {
  font-size: clamp(1.1rem, 2vw, 1.35rem); margin-bottom: clamp(12px, 2vw, 18px);
}

@media (max-width: 619px) {
  /* Sechs Bilder einspaltig waeren anderthalb Bildschirme Scrollen — zu zweit
     nebeneinander sieht man vier auf einen Blick. */
  .verleih-galerie { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .verleih-galerie img { aspect-ratio: 1 / 1; border-radius: 12px; }
}

@media (max-width: 600px) {
  #bewertungen .abschnitt-kopf { margin-bottom: 14px; gap: 6px; }
  #bewertungen .rating-inline { font-size: .88rem; }
  .review { padding: 16px 18px; }
  .review p { font-size: .98rem; line-height: 1.5; }
  .review cite { margin-top: 8px; font-size: .82rem; }
  .review-track { gap: 12px; padding-bottom: 14px; }
  .echte-feiern { margin-top: 22px; }
}

/* --- Bilder echter Feiern: zwei Reihen, seitlich zu wischen ---------------
   Zwölf Bilder untereinander waeren drei Bildschirme. Als zweizeiliger
   Streifen sieht man vier auf einmal, der Rest kommt beim Wischen — dieselbe
   Geste wie bei den Bewertungen darueber. */
.kunden-streifen {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
  gap: 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 10px; margin-bottom: -10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.kunden-streifen::-webkit-scrollbar { display: none; }
.kunden-streifen figure { margin: 0; scroll-snap-align: start; }
.kunden-streifen img {
  width: 44vw; max-width: 260px; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--line); display: block;
  box-shadow: var(--shadow-sm); cursor: zoom-in;
}
@media (min-width: 900px) {
  .kunden-streifen { gap: 12px; }
  .kunden-streifen img { width: 220px; max-width: none; border-radius: var(--radius); }
}

/* --- Abschnitt 5 · Ablauf ------------------------------------------------- */
.ablauf-liste {
  list-style: none; margin: clamp(16px, 2.5vw, 24px) 0 0; padding: 0;
  display: grid; gap: clamp(14px, 2vw, 20px);
}
@media (min-width: 760px) { .ablauf-liste { grid-template-columns: repeat(2, 1fr); gap: 22px 32px; } }
.ablauf-liste .step { padding-left: 52px; min-height: 40px; }
.ablauf-liste strong { display: block; font-size: 1rem; margin-bottom: 2px; }
.ablauf-liste span { font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.ablauf-fuss {
  margin: clamp(18px, 2.5vw, 26px) 0 0; font-size: .84rem; color: var(--muted);
}
.ablauf-wa { margin-top: 14px; }

@media (max-width: 600px) {
  .ablauf-liste .step { padding-left: 46px; }
  .ablauf-liste .step::before { width: 34px; height: 34px; font-size: 1rem; }
  .ablauf-liste strong { font-size: .96rem; }
  .ablauf-wa { width: 100%; text-align: center; }
}

/* --- Abschnitt 6 · Über uns ------------------------------------------------
   Der einzige erzaehlende Abschnitt der Seite. Er soll sich anfuehlen wie eine
   Unterbrechung, nicht wie die naechste Kachel: warmer Grund, der erste Satz
   gross in der Serifenschrift, schmalerer Textlauf, Signatur am Ende. */
.ueber-raster { display: grid; gap: clamp(18px, 3vw, 36px); align-items: center; }
@media (min-width: 820px) { .ueber-raster { grid-template-columns: 0.75fr 1.25fr; } }
.ueber-bild { margin: 0; }
.ueber-bild img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--radius-lg); border: 0;
  box-shadow: var(--shadow); display: block;
}
.ueber-text .eyebrow { margin-bottom: 10px; }
.ueber-text h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.25;
  margin-bottom: .7em; max-width: 22ch;
}
.ueber-text p { font-size: .96rem; line-height: 1.7; max-width: 60ch; }
.ueber-signatur {
  margin: clamp(16px, 2vw, 22px) 0 0; font-family: var(--serif);
  font-size: 1rem; color: var(--accent-deep);
}

@media (max-width: 600px) {
  /* Auf dem Handy reicht ein Ausschnitt — die volle Hochkantfläche waere
     ein halber Bildschirm, bevor der erste Satz kommt. */
  .ueber-bild img { aspect-ratio: 4 / 3; object-position: center 22%; }
  .ueber-text h2 { font-size: 1.3rem; }
  .ueber-text p { font-size: .92rem; }
}

/* --- Abschnitt 7 · Häufige Fragen ------------------------------------------
   <details> statt Akkordeon-Skript: funktioniert ohne JavaScript, ist von
   Haus aus bedienbar und mit der Tastatur erreichbar. */
.faq-wrap { max-width: 780px; }
.faq-liste { margin-top: clamp(14px, 2vw, 22px); border-top: 1px solid var(--line); }
.faq-eintrag { border-bottom: 1px solid var(--line); }
.faq-eintrag summary {
  display: flex; align-items: baseline; gap: 12px; cursor: pointer;
  padding: 15px 0; font-size: .98rem; font-weight: 600; color: var(--ink);
  list-style: none;
}
.faq-eintrag summary::-webkit-details-marker { display: none; }
.faq-eintrag summary::after {
  content: "+"; margin-left: auto; flex: none;
  font-size: 1.2rem; font-weight: 400; color: var(--accent-deep); line-height: 1;
}
.faq-eintrag[open] summary::after { content: "–"; }
.faq-eintrag summary:hover { color: var(--accent-deep); }
.faq-eintrag summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq-eintrag p {
  margin: 0 0 16px; padding-right: 28px;
  font-size: .92rem; line-height: 1.65; color: var(--ink-soft);
}

@media (max-width: 600px) {
  .faq-eintrag summary { padding: 13px 0; font-size: .94rem; }
  .faq-eintrag p { font-size: .89rem; padding-right: 4px; }
}

/* --- Abschnitt 8 · Kontakt ------------------------------------------------ */
.kontakt-band { padding-block: clamp(30px, 4.5vw, 60px); }
.kontakt-raster {
  display: grid; gap: clamp(16px, 3vw, 34px); align-items: center;
}
@media (min-width: 820px) { .kontakt-raster { grid-template-columns: 1.3fr 1fr; } }
.kontakt-raster h2 { margin-bottom: .4em; }
.kontakt-raster p { margin: 0; max-width: 52ch; font-size: .95rem; }
.kontakt-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 600px) {
  .kontakt-raster h2 { font-size: 1.4rem; }
  .kontakt-raster p { font-size: .9rem; }
  .kontakt-knoepfe { flex-direction: column; gap: 8px; }
  .kontakt-knoepfe .btn { width: 100%; text-align: center; }
}

/* --- Fußzeile: Kontaktdaten statt wiederholtem Liefergebiet ---------------
   Name, Anschrift und Telefonnummer gehoeren hierher — Google gleicht sie mit
   dem Unternehmensprofil ab, und der Besucher findet die Nummer ohne Umweg
   ueber das Impressum. */
.footer-firma { margin: 0 0 10px; color: #efeae1; font-weight: 600; }
.footer-daten { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-daten li {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px;
  align-items: start; font-size: .92rem; line-height: 1.5;
}
.footer-daten svg { margin-top: 3px; color: #9a9384; }
.footer-daten a { text-decoration: none; }
.footer-daten a:hover { color: #fff; text-decoration: underline; }

/* Der Knopf steht auf beigem Grund: kein Rand, sondern ein dunkleres Beige aus
   derselben Familie. Er bleibt damit ruhiger als der grüne WhatsApp-Knopf. */
.kontakt-band .btn--ghost {
  background: #e2d9c9; border-color: transparent; color: var(--ink);
}
.kontakt-band .btn--ghost:hover { background: #d6cab5; border-color: transparent; }

/* --- Startseite: Feinschliff für große Bildschirme ------------------------- */
@media (min-width: 900px) {
  /* Am Rechner gibt es Platz für alle zwölf Bilder — dann ist das seitliche
     Wischen unnötig und das letzte Bild wird nicht mehr angeschnitten. */
  .kunden-streifen {
    grid-auto-flow: row; grid-template-columns: repeat(6, 1fr);
    grid-template-rows: none; overflow-x: visible;
  }
  .kunden-streifen img { width: 100%; }
}

@media (min-width: 760px) {
  /* Der WhatsApp-Knopf steht unter einer zweispaltigen Liste — links wirkt er
     verloren, mittig schließt er den Abschnitt ab. Etwas Abstand nach oben
     trennt ihn von der letzten Zeile der Liste. */
  .ablauf-wa {
    display: block; width: max-content; margin-inline: auto;
    margin-top: clamp(24px, 3.5vw, 40px);
  }
}

@media (min-width: 820px) {
  .kontakt-knoepfe { gap: 18px; }
}

/* Der Kopf klebt oben - ohne diesen Abstand verschwindet die Ueberschrift des
   angesprungenen Abschnitts darunter. */
#eh-verleih-zeitraum,
#eh-verleih-buchen,
#lieferung, #bewertungen, #ablauf, #ueber-uns, #fragen, #kontakt,
#formular {
  scroll-margin-top: 90px;
}

/* --- Kaufbereich der Produktseiten (September 2026) -----------------------
   Vorher standen dort drei Faktenblöcke plus das Widget, mit doppelten
   Angaben und Knöpfen in Großformat. Jetzt: Preis in einer Zeile, das Widget,
   der schmale WhatsApp-Weg, zuletzt die Vertrauensliste. */

.price-zusatz {
  margin: 6px 0 0; font-size: .86rem; color: var(--muted); line-height: 1.4;
}

/* WhatsApp ist der Nebenweg, nicht der Hauptweg - der Knopf hat deshalb
   Normalgröße und teilt sich die Zeile mit seinem Hinweis. */
.pdp-wa {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  text-align: center;
}
.pdp-wa .btn { flex: none; }
.pdp-wa span { font-size: .84rem; color: var(--muted); line-height: 1.35; max-width: 34ch; }

.pdp-trust-titel {
  margin: 22px 0 8px; font-size: .88rem; font-weight: 700; color: var(--ink);
}
.pdp-buybox .pdp-trust { margin-top: 0; }

/* Die Buttons im Widget waren btn--lg und wirkten in der schmalen Spalte
   erschlagend - zwei davon nebeneinander füllten den halben Bildschirm. */
.pdp-widget .vl-aktionen .btn { font-size: .95rem; padding-block: .72em; }

/* --- Produktseiten: Lieferpauschalen und Abschluss (September 2026) -------
   Die Pauschalen standen nur in der FAQ, sechs Abschnitte unter dem Feld, in
   das man seine Postleitzahl tippt. Jetzt stehen sie daneben. */

/* Eine Staffel, keine Schlagwortsammlung: Drei Pillen mit 69, 119 und 179
   Euro sind verschieden breit, brechen je nach Spaltenbreite anders um und
   lassen sich nicht vergleichen, weil die Betraege nicht untereinander
   stehen. Als Liste mit Entfernung links und Betrag rechts sind sie in einer
   Blickbewegung zu lesen - tabellarische Ziffern halten die Spalte gerade. */
.lieferpauschalen-titel {
  margin: 0; font-family: inherit; font-size: .95rem; font-weight: 600;
  color: var(--ink);
}
.lieferpauschalen {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--line);
}
.lieferpauschalen li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 9px 2px; border-bottom: 1px solid var(--line);
  font-size: .9rem; color: var(--ink-soft);
}
.lieferpauschalen strong {
  color: var(--ink); font-size: 1rem; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Saisonhinweis im Abschlussblock: keine erfundene Dringlichkeit, sondern
   das, was die Buchungsliste zeigt - Mai bis September sind die Wochenenden
   belegt. */
.pdp-saison {
  margin: 14px auto 0; max-width: 46ch;
  font-size: .9rem; color: var(--accent-deep); font-weight: 600;
}
.center-actions { justify-content: center; margin-top: 1.8rem; }

/* ==========================================================================
   Plattform: Angebotskarte mit festen Plätzen (Umbau September 2026)
   Jede Karte hat dieselben Plätze: Art, Name, Anbieter · Ort, drei
   Kennzahlen-Felder, Merkmal-Liste, Preis, Merken, ein Button. Mobile first;
   nichts wird abgeschnitten, Umbrüche nur mit Silbentrennung.
   ========================================================================== */
:root { --kopf-oben: 60px; }
@media (min-width: 900px) { :root { --kopf-oben: 72px; } }

.liste-hero { padding-block: clamp(20px, 3vw, 36px) clamp(12px, 2vw, 20px); }
.liste-hero h1 { margin-bottom: 6px; }
.liste-hero .lead { margin: 0; }

/* --- Klebende Kopfleiste --- */
.liste-kopf {
  position: sticky; top: var(--kopf-oben); z-index: 20; background: var(--bg);
  border-bottom: 1px solid var(--line); padding: 10px 0 8px; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
@media (min-width: 900px) { .liste-kopf { grid-column: 1 / -1; } }
.eck-zeile { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--ink-soft); min-width: 0; }
.eck-zeile .zurueck {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.eck-zeile .eck-text { min-width: 0; line-height: 1.35; }
.eck-zeile .eck-text b { color: var(--ink); }
.eck-zeile .eck-text a { color: var(--accent-deep); text-decoration: underline; }
.steuer { display: flex; gap: 8px; }
.steuer .filter-open, .steuer .steuer-sort {
  flex: 1 1 0; min-height: 40px; margin: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); font: inherit; font-size: .9rem; font-weight: 500; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px;
}
.steuer .filter-open b {
  background: var(--accent); color: #fff; border-radius: 999px; font-size: .72rem; padding: 1px 7px;
}
.steuer .steuer-sort span { white-space: nowrap; }
.steuer .steuer-sort select {
  flex: 1; min-width: 0; border: 0; padding: 6px 26px 6px 4px; background-color: transparent;
  font: inherit; font-size: .9rem; font-weight: 500;
}
@media (min-width: 900px) {
  .steuer .filter-open { display: none; }
  .steuer .steuer-sort { flex: 0 0 auto; }
}
.aktiv-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 0; padding-bottom: 2px; }
.aktiv-chips::-webkit-scrollbar { display: none; }
.aktiv-chips .aktiv-chip { flex: none; white-space: nowrap; }
.aktiv-chips .aktiv-reset { flex: none; white-space: nowrap; }
.aktiv-chips:empty { display: none; }
@media (min-width: 900px) { .aktiv-chips { flex-wrap: wrap; overflow: visible; } }

.liste-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: .82rem; color: var(--muted); margin: 2px 0 8px;
}
.liste-meta strong { color: var(--ink); }
.sortier-offenlegung { flex: none; }
.sortier-offenlegung summary { cursor: pointer; text-decoration: underline; list-style: none; }
.sortier-offenlegung summary::-webkit-details-marker { display: none; }
.sortier-offenlegung p {
  position: absolute; left: 0; right: 0; margin: 8px 0 0; padding: 12px 14px; font-size: .84rem;
  line-height: 1.5; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); z-index: 5;
}
.ergebnis { position: relative; }

.filter-gaeste-zeile { display: flex; gap: 8px; align-items: center; }
.filter-gaeste-zeile input {
  width: 110px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; background: var(--bg);
}
.filter-gaeste-zeile span { font-size: .88rem; color: var(--ink-soft); }

/* --- Die Karte --- */
.karte, .blatt { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 3; overflow-wrap: break-word; }
.karte {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px;
  display: grid; grid-template-columns: 72px 1fr; gap: 10px 12px;
  grid-template-areas: "bild kopf" "fakten fakten" "merk merk" "fuss fuss";
}
.karte:hover { border-color: var(--accent); }
.karte.is-featured { border-color: #d8dccb; box-shadow: var(--shadow-sm); }
.karte-bild {
  grid-area: bild; width: 72px; height: 72px; border-radius: 12px; background: var(--bg-2);
  display: grid; place-items: center; color: var(--muted); overflow: hidden;
}
.karte-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.karte-bild svg { width: 26px; height: 26px; }
.karte-kopf { grid-area: kopf; min-width: 0; }
.karte .art, .blatt .art {
  margin: 0 0 2px; font-size: .7rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-deep);
}
.karte-kopf h3 { margin: 0; font-size: 1.02rem; line-height: 1.25; }
.karte-kopf .anbieter { margin: 2px 0 0; font-size: .82rem; color: var(--muted); line-height: 1.35; }
.karte-kopf .anbieter a { color: var(--ink-soft); }
.karte-kopf .badge-featured { margin-left: 4px; }
.fakten { grid-area: fakten; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fakt { background: var(--bg); border-radius: 10px; padding: 6px 8px; min-width: 0; }
.fakt small { display: block; font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.fakt span { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.fakt span.leer { color: var(--muted); font-weight: 400; }
.merkmale {
  grid-area: merk; margin: 0; padding: 0; list-style: none; display: grid; gap: 3px;
  font-size: .85rem; color: var(--ink-soft);
}
.merkmale li { display: flex; gap: 7px; align-items: flex-start; line-height: 1.35; }
.merkmale li::before { content: "✓"; color: var(--accent-deep); font-weight: 700; flex: none; }
.fuss { grid-area: fuss; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fuss .preis { flex: 1; min-width: 0; }
.preis b { font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.preis small { display: block; font-size: .74rem; color: var(--muted); }
.preis.anfrage b { font-size: .95rem; font-weight: 500; color: var(--muted); }
.merken {
  flex: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); display: grid; place-items: center; color: var(--ink-soft);
  cursor: pointer; padding: 0; transition: border-color .15s, color .15s, background .15s;
}
.merken svg { width: 18px; height: 18px; }
.merken:hover { border-color: var(--accent); color: var(--accent-deep); }
.merken.is-gemerkt { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
.merken.is-gemerkt svg { fill: currentColor; }
.fuss .btn { flex: none; padding: 9px 14px; font-size: .9rem; }
@media (min-width: 760px) {
  .karte {
    grid-template-columns: 96px 1fr auto; align-items: start;
    grid-template-areas: "bild kopf fuss" "bild fakten fuss" "bild merk fuss";
  }
  .karte-bild { width: 96px; height: 96px; }
  .fuss { flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: 8px; min-width: 160px; }
  .fuss .preis { text-align: right; flex: none; }
}

/* --- „Warum hier?" — die Gründe hinter der Position in „Passend" --- */
.rang-warum { font-size: .8rem; color: var(--ink-soft); line-height: 1.45; margin: 0; }
.rang-warum summary {
  cursor: pointer; color: var(--muted); text-decoration: underline; list-style: none;
  font-size: .78rem; padding: 2px 0;
}
.rang-warum summary::-webkit-details-marker { display: none; }
.rang-warum[open] summary { color: var(--ink-soft); }
.rang-warum ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.rang-warum li { display: flex; gap: 6px; align-items: flex-start; }
.rang-warum li::before { content: "·"; color: var(--accent-deep); font-weight: 700; flex: none; }
.fuss .rang-warum { flex-basis: 100%; }
.provider-aside .rang-warum { width: 100%; text-align: left; }
.seite-treffer.is-anzeige { border-color: var(--accent); }
.seite-treffer h3 .badge-featured { margin-left: 6px; vertical-align: middle; }
.seite-treffer .rang-warum { margin-top: 6px; }
@media (min-width: 760px) {
  .fuss .rang-warum { flex-basis: auto; width: 100%; text-align: right; }
  .fuss .rang-warum ul { text-align: left; }
}

/* --- Detail-Blatt (von unten; ab 760 px zentriert) --- */
.blatt-hg { position: fixed; inset: 0; background: rgba(20, 19, 16, .45); z-index: 950; display: none; }
.blatt-hg.is-offen { display: block; }
.blatt {
  position: fixed; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow: auto;
  background: var(--surface); border-radius: 20px 20px 0 0; z-index: 951;
  transform: translateY(100%); transition: transform .25s ease; padding: 14px 16px 24px;
}
.blatt.is-offen { transform: none; }
body.blatt-offen { overflow: hidden; }
.blatt-griff { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 12px; }
.blatt-zu {
  position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); font-size: 1.3rem; line-height: 1;
  cursor: pointer; color: var(--muted);
}
.blatt h2 { font-size: 1.3rem; margin: 0 40px 2px 0; }
.blatt .anbieter { color: var(--muted); font-size: .88rem; margin: 0 0 12px; }
.blatt .anbieter a { color: var(--ink-soft); }
.blatt .fakten { grid-template-columns: repeat(2, 1fr); margin-bottom: 14px; }
.blatt h4 { margin: 14px 0 6px; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.blatt ul { margin: 0; padding-left: 18px; font-size: .92rem; color: var(--ink-soft); }
.blatt ul.merkmale { padding-left: 0; }
.blatt li { margin-bottom: 4px; }
.blatt-cta {
  position: sticky; bottom: -24px; background: var(--surface); padding: 12px 0 0; margin-top: 16px;
  display: flex; gap: 8px; border-top: 1px solid var(--line);
}
.blatt-cta .btn { flex: 1; text-align: center; }
.blatt .quelle { display: block; margin-top: 10px; font-size: .8rem; color: var(--muted); text-align: center; }
@media (min-width: 760px) {
  .blatt { left: 50%; right: auto; width: 640px; transform: translate(-50%, 100%); }
  .blatt.is-offen { transform: translate(-50%, 0); }
}
.blatt-cta .js-merken { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.blatt-cta .js-merken svg { width: 18px; height: 18px; flex: none; }
.blatt-cta .js-merken.is-gemerkt { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.blatt-cta .js-merken.is-gemerkt svg { fill: currentColor; }

/* ==========================================================================
   Plattform: Startseite — der Satz, das Auswahlblatt, Kacheln mit Panel
   (Umbau September 2026, mobile first)
   ========================================================================== */
.section--eng { padding-block: clamp(28px, 5vw, 56px); }
.satz { padding-top: clamp(18px, 4vw, 36px); }
.satz h1 { font-size: clamp(1.7rem, 6.5vw, 2.6rem); margin: 0 0 6px; }
.satz .lead { margin: 0 0 18px; font-size: .98rem; }
.satz-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px;
  font-family: var(--serif); font-size: clamp(1.25rem, 5.2vw, 1.7rem); line-height: 1.5; color: var(--ink);
}
.satz-wert {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 14px; border-radius: 999px;
  border: 1.5px dashed var(--accent); background: var(--accent-soft); color: var(--accent-deep);
  font: inherit; cursor: pointer; min-height: 44px;
}
.satz-wert.is-leer { background: transparent; color: var(--muted); }
.satz-wert.is-gesetzt { border-style: solid; }
.satz-wert svg { width: 14px; height: 14px; flex: none; }
.satz-zusatz { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.satz-datum {
  display: inline-block; margin-top: 10px; font-size: .88rem; color: var(--accent-deep);
  text-decoration: underline; background: none; border: 0; font-family: var(--sans); cursor: pointer; padding: 6px 0;
}
.satz-hinweis { margin: 10px 0 0; font-size: .8rem; color: var(--muted); }
.satz-blatt {
  margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow-sm);
}
.satz-blatt-titel { font-weight: 600; font-size: .9rem; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; }
.satz-blatt-titel button { background: none; border: 0; color: var(--muted); font: inherit; font-size: .85rem; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit; font-size: .92rem; min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip.is-aktiv { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.chip small { color: var(--muted); font-size: .75rem; }
.chip-eingabe { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.chip-eingabe input { width: 110px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: var(--bg); }
.chip-eingabe input[type="date"] { width: auto; }
.satz-fallback { margin-top: 14px; }
.satz-fallback-felder { display: grid; gap: 10px; }
.satz-fallback-felder label { display: grid; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--ink-soft); }
.satz-fallback-felder select, .satz-fallback-felder input {
  height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: var(--bg);
}

.kat-titel { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.kat-titel h2 { margin: 0; }
.kat-titel span { font-size: .85rem; color: var(--muted); text-align: right; }
.start-kat-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .start-kat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 980px) { .start-kat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.start-kat {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--bg-2);
  border: 2px solid transparent; color: inherit;
}
.start-kat img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.start-kat-text {
  position: absolute; inset: auto 0 0 0; padding: 30px 12px 10px; color: #fff;
  background: linear-gradient(to top, rgba(20, 19, 16, .82), rgba(20, 19, 16, 0));
}
.start-kat-text strong { display: block; font-size: .95rem; line-height: 1.2; }
.start-kat-zahl { display: block; font-size: .78rem; opacity: .9; margin-top: 2px; font-variant-numeric: tabular-nums; }
.start-kat.is-offen { border-color: var(--accent); }
.start-kat.is-offen::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; width: 16px; height: 16px; background: var(--surface);
  border-left: 2px solid var(--accent); border-top: 2px solid var(--accent); transform: translate(-50%, 50%) rotate(45deg);
}
.start-panel { grid-column: 1 / -1; background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius); padding: 14px; }
.start-panel h3 { margin: 0 0 2px; font-size: 1.15rem; }
.start-panel .treffer { font-size: .9rem; color: var(--ink-soft); margin: 0 0 12px; }
.start-panel .treffer b { color: var(--accent-deep); }
.frage { margin: 10px 0 0; }
.frage-label { font-size: .82rem; color: var(--muted); margin: 0 0 6px; }
.frage-titel { font-weight: 600; color: var(--ink-soft); }
.start-panel-cta { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.start-panel-cta .btn--primary { flex: 1 1 auto; text-align: center; }
.start-panel-cta .btn--ghost { flex: 0 0 auto; }
.start-panel-hinweis { font-size: .78rem; color: var(--muted); margin: 8px 0 0; }

.typ-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; margin-top: 12px; flex-wrap: nowrap; }
.typ-scroll::-webkit-scrollbar { display: none; }
.typ-scroll a { flex: none; }
@media (min-width: 900px) { .typ-scroll { flex-wrap: wrap; overflow: visible; } }

.werkzeuge { display: grid; gap: 10px; }
@media (min-width: 720px) { .werkzeuge { grid-template-columns: repeat(3, 1fr); } }
.werkzeug {
  display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: inherit; min-height: 60px;
}
.werkzeug:hover { border-color: var(--accent); }
.werkzeug strong { display: block; font-size: .95rem; }
.werkzeug small { color: var(--muted); font-size: .8rem; }
.werkzeug .zaehler {
  margin-left: auto; min-width: 28px; height: 28px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent-deep); display: grid; place-items: center; font-size: .8rem; font-weight: 600; padding: 0 8px;
}

/* Kategorieseiten: Eckdaten-Leiste über der Liste */
.eck-leiste {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--accent-soft);
  color: var(--ink-soft); font-size: .9rem;
}
.eck-leiste a { color: var(--accent-deep); text-decoration: underline; }

/* --- Widerrufsfunktion nach § 356a BGB -----------------------------------
   Der Knopf im Fuß und die drei Schritte auf widerrufen.html. Abs. 1 verlangt
   "hervorgehoben platziert und leicht zugänglich" — deshalb im Fuß ein
   abgesetzter Rahmen und kein weiterer Listeneintrag zwischen Impressum und
   Datenschutz, in dem er als vierter Link von sechs untergegangen wäre. */

/* Mit .site-footer davor, sonst gewinnt ".site-footer a { color: #cfc8bb }"
   weiter oben: zwei Klassen schlagen eine, und der Knopf staende in
   demselben gedaempften Grau wie die Links daneben - also genau nicht
   hervorgehoben. */
.site-footer .footer-widerruf {
  display: inline-block; margin-top: 12px; padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 10px;
  font-size: .9rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; color: #fff;
}
.site-footer .footer-widerruf:hover {
  border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff;
}

.wd-pruefung { margin: 18px 0 0; display: grid; gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; }
.wd-pruefzeile {
  display: grid; grid-template-columns: minmax(140px, 40%) 1fr; gap: 12px;
  padding: 12px 14px; background: var(--bg); font-size: .94rem;
}
.wd-pruefzeile dt { color: var(--ink-soft); font-weight: 600; margin: 0; }
.wd-pruefzeile dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
/* Unter 480 Pixeln stünde der Wert sonst in einer 90 Pixel breiten Spalte. */
@media (max-width: 480px) {
  .wd-pruefzeile { grid-template-columns: 1fr; gap: 2px; }
}

.wd-wortlaut {
  margin: 16px 0 0; padding: 14px 16px; border-left: 3px solid var(--accent);
  background: var(--bg-2); font-size: .94rem; line-height: 1.55;
}

.wd-knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.wd-meldung {
  margin: 16px 0 0; padding: 12px 14px; border-radius: 10px;
  font-size: .9rem; line-height: 1.5;
}
.wd-meldung.ist-fehler { background: #fdf0ee; color: #a4453c; }

.wd-ergebnis p { margin: 0 0 12px; line-height: 1.6; }
.wd-ergebnis p:last-child { margin-bottom: 0; }
.wd-nachsatz { color: #a4453c; font-size: .92rem; }

/* --- WhatsApp-Knopf unten rechts (Noah, 30.09.2026) ------------------------
   Gebaut von main.js. Er steht ueber der jeweils untersten Leiste: der
   Warenkorbleiste (--korbleiste-hoehe, bringt ihren Abstand schon mit) oder
   der Leiste der Produktseiten (--sticky-cta-hoehe). Ohne Leiste 16 px vom
   Rand. Unter dem Abdunkler des Warenkorbblatts (z-index 44), damit er bei
   aufgeklapptem Blatt nicht darueber schwebt. */
.wa-schwebe {
  position: fixed; z-index: 43; right: 16px;
  bottom: max(16px + env(safe-area-inset-bottom), var(--korbleiste-hoehe, 0px),
              var(--sticky-cta-hoehe, 0px) + 12px);
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--accent-deep); border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(34, 33, 29, .16);
  transition: bottom .22s ease, transform .15s ease, box-shadow .2s ease;
}
.wa-schwebe svg { width: 26px; height: 26px; }
.wa-schwebe:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(34, 33, 29, .2); }
.wa-schwebe:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (min-width: 901px) {
  .wa-schwebe { right: 24px; bottom: 24px; width: 56px; height: 56px; }
  .wa-schwebe svg { width: 28px; height: 28px; }
}
/* Am Handy im Kopf statt schwebend - gleiche Groesse und Art wie das
   Warenkorbsymbol daneben. Umschalten an derselben Breite, an der das
   Menue zum Knopf wird. */
.wa-kopf {
  display: none; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-right: 2px;
  border-radius: 999px; color: var(--accent-deep); text-decoration: none;
  transition: background .15s ease;
}
.wa-kopf:hover { background: var(--bg-2); }
.wa-kopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wa-kopf svg { width: 22px; height: 22px; display: block; }
@media (max-width: 860px) {
  .wa-kopf { display: inline-flex; }
  .wa-schwebe { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wa-schwebe { transition: none; } }
@media print { .wa-schwebe, .wa-kopf { display: none; } }

/* iPhone zoomt beim Antippen jedes Eingabefelds unter 16 px heran und bleibt
   danach dort stehen (Noah, 12.10.2026: Datumsfeld 14 px, Mengenfeld der
   Kasse und Widerrufsformular knapp darunter). Den Zoom per viewport zu
   sperren waere der falsche Weg - dann koennte niemand mehr vergroessern.
   Die drei :not() geben der Regel genug Gewicht gegen ".vl-spanne input"
   und ".vl-spanne .vl-datumsfeld" in verleih.css. */
@media (max-width: 899px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 16px; }
}

/* Logo-Auftakt (main.js): Beim Einstieg von aussen steht zuerst "eh" wie im
   Favicon. "infach" (.brand-x) ist dafuer auf Breite 0 zusammengeklappt und
   abgeschnitten, "ochzeit" (.brand-y) unsichtbar, behaelt aber seinen Platz -
   so springt die Navigation daneben nicht. Ohne die Klasse logo-intro sind
   beide ganz normaler Text. */
.brand b { font-weight: inherit; }
.brand i { font-style: inherit; }
.logo-intro .brand .brand-x {
  display: inline-block; width: 0; clip-path: inset(0); white-space: nowrap;
}
.logo-intro .brand .brand-y { opacity: 0; }