/* ==========================================================================
   Lais Möbel – Stylesheet (nah am bisherigen Auftritt)
   Schriften lokal (keine Google Fonts), keine externen Ressourcen.
   ========================================================================== */

@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/roboto-condensed-latin-300-normal.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/roboto-condensed-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/roboto-condensed-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
/* Handschrift ALS SyysScript (Art. Lebedev Studio, Web-Lizenz von Lais Möbel vorhanden) –
   als woff2 mit westeuropäischen Zeichen; Original-OTF liegt nur in Dokumente/Originale (nicht öffentlich) */
@font-face {
  font-family: "Lais Script";
  src: url("../fonts/als-syysscript-latin.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}

:root {
  /* Farben wie bisher */
  --orange: #f07e26;
  --orange-dunkel: #d8691a;
  --text: #554c47;
  --text-hell: #827a76;
  --braun: #806e5a;
  --beige: #f4f0ee;
  --beige-2: #f3efec;
  --karte: #e3dbd6;
  --grau: #d9d9d9;
  --grau-hell: #e9e9e9;
  --taupe: #827a76;
  --taupe-hell: #c2b0a4;
  --linie: #dcd6d2;
  --sterne: #f6bb06;
  --weiss: #fff;

  --schrift: "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --schrift-akzent: "Lais Script", cursive;

  --breite: 1170px;
  --breite-text: 720px;
  --rand: clamp(1rem, 4vw, 2rem);
  --abstand: clamp(3.5rem, 7vw, 6.25rem);
  --radius: 4px;
  --radius-gross: 40px;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 8rem; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text);
  background: var(--weiss);
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--orange); text-underline-offset: .15em; }
a:hover { color: var(--text); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .6em; font-weight: 400; }
p, ul, ol, dl, blockquote { margin: 0 0 1em; }
figure { margin: 0; position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--text); color: #fff; padding: .75rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }
.zentriert { text-align: center; }

/* Überschrift-Stil des Originals: Großbuchstaben, gesperrt, orange */
.titel {
  /* lange Wörter (z. B. DATENSCHUTZERKLÄRUNG) auf schmalen Handys umbrechen statt überstehen */
  overflow-wrap: break-word;
  hyphens: auto;
  font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--orange);
  text-align: center;
  margin-bottom: 1.1em;
}
.intro .titel { max-width: 740px; margin-left: auto; margin-right: auto; margin-bottom: .7em; }
.schrift { font-family: var(--schrift-akzent); font-weight: 300; color: var(--orange); text-transform: none; letter-spacing: .04em; }

/* Text mit oranger Linie links (wie Original) */
.linie-text {
  max-width: var(--breite-text);
  margin: 0 auto;
  padding-left: 1rem;
  border-left: 1px solid var(--orange);
}
.linie-text > :last-child { margin-bottom: 0; }

/* Aufzählungen mit Häkchen */
.textbild ul, .reiter__text ul {
  list-style: none; padding: 0;
}
.textbild li, .reiter__text li { position: relative; padding-left: 1.6rem; margin-bottom: .35rem; }
.textbild li::before, .reiter__text li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: 1rem; height: 1rem;
  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='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%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='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.4rem;
  background: var(--orange);
  color: #fff;
  border: 0;
  border-radius: 12px 3px 12px 0; /* Blattform wie im Original */
  font: inherit; font-weight: 400; font-size: 1.125rem; line-height: 1.3;
  text-decoration: none; cursor: pointer;
  transition: background .2s;
}
.btn:hover { background: var(--text); color: #fff; }
.button-block, .cta-block { text-align: center; }

/* ---------- Hinweisleiste (Betriebsurlaub o.ä.) ---------- */
.notice { background: var(--text); color: #fff; text-align: center; padding: .6rem var(--rand); }
/* Sonderhinweis (Betriebsurlaub o. Ä.): Farben aus dem Admin, Standard Weinrot mit weißer Schrift (Kontrast 9:1) */
.notice--sonder { background: var(--hinweis-hg, #7d2e3a); color: var(--hinweis-text, #fff); font-weight: 700; letter-spacing: .02em; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: #fff; }
.kopf__innen { max-width: 1320px; margin: 0 auto; padding: 1.4rem var(--rand); display: flex; align-items: center; gap: 2rem; }
.logo img { width: 150px; height: auto; }
.nav { flex: 1; display: flex; justify-content: center; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.nav a { color: var(--text); text-decoration: none; font-size: 1.125rem; }
.nav a:hover, .nav a[aria-current] { color: var(--orange); }
.nav__nur-mobil { display: none; }
.kopf__tel { display: inline-flex; align-items: center; gap: .4rem; color: var(--text); text-decoration: none; font-weight: 700; font-size: 1.125rem; white-space: nowrap; }
.kopf__tel .icon { color: var(--orange); }
.kopf__tel:hover { color: var(--orange); }
/* Mail-Button wie im Original: abgerundet oben links und unten rechts */
.kopf__mail {
  display: grid; place-items: center; width: 65px; height: 44px; flex: none;
  background: var(--text); color: #fff; border-radius: 10px 3px 10px 0;
  transition: background .2s;
}
.kopf__mail:hover { background: var(--orange); color: #fff; }
.kopf__mail .icon { width: 24px; height: 24px; }
@media (max-width: 1240px) { .kopf__tel span { display: none; } }
.menu-toggle { display: none; }

@media (max-width: 1000px) {
  .kopf__innen { padding: .8rem var(--rand); gap: 1rem; }
  .logo img { width: 110px; }
  .kopf__mail, .kopf__tel { display: none; }
  .menu-toggle {
    display: grid; place-items: center; margin-left: auto;
    width: 48px; height: 48px; background: none; border: 0; cursor: pointer; color: var(--text);
  }
  .menu-toggle__linien, .menu-toggle__linien::before, .menu-toggle__linien::after {
    display: block; width: 26px; height: 2px; background: currentColor; position: relative; transition: transform .2s;
  }
  .menu-toggle__linien::before, .menu-toggle__linien::after { content: ""; position: absolute; left: 0; }
  .menu-toggle__linien::before { top: -8px; }
  .menu-toggle__linien::after { top: 8px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__linien { background: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__linien::before { transform: translateY(8px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__linien::after { transform: translateY(-8px) rotate(-45deg); }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; display: none;
    background: #fff; border-top: 1px solid var(--linie); box-shadow: 0 12px 20px -12px rgb(0 0 0 / .25);
    padding: .5rem var(--rand) 1.5rem;
  }
  .nav.ist-offen { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: .75rem 0; border-bottom: 1px solid var(--linie); }
  .nav__nur-mobil { display: block; }
}

/* ---------- Titelbild ---------- */
.hero { position: relative; background: var(--beige); overflow: hidden; }
.hero__bilder { display: grid; }
.hero__bild { grid-area: 1 / 1; opacity: 0; transition: opacity 1s ease; }
.hero__bild.ist-aktiv { opacity: 1; z-index: 1; }
.hero__bild img { width: 100%; height: clamp(260px, 33vw, 520px); object-fit: cover; }
/* Handy: flacherer Ausschnitt, damit mehr vom (breiten) Titelbild sichtbar bleibt */
@media (max-width: 700px) { .hero__bild img { height: clamp(230px, 62vw, 340px); } }
.hero__text {
  position: absolute; z-index: 2; left: clamp(1rem, 4.2vw, 3.75rem); right: 1rem; bottom: clamp(1.25rem, 3vw, 2.5rem);
  color: #fff; text-shadow: 0 1px 10px rgb(0 0 0 / .35);
  font-size: clamp(1.25rem, .9rem + 1.3vw, 2rem); line-height: 1.55; letter-spacing: .05em; text-transform: uppercase;
}
.hero::after { content: ""; position: absolute; z-index: 1; inset: auto 0 0 0; height: 50%; background: linear-gradient(transparent, rgb(30 24 20 / .22)); pointer-events: none; }
.hero__claim, .hero__titel { margin: 0; }
.hero__titel { font-weight: 700; }
.tpl-home .hero__titel { font-weight: 400; }
.hero__pfeil {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgb(85 76 71 / .18); color: rgb(255 255 255 / .75); display: grid; place-items: center;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: background .2s;
}
.hero__pfeil .icon { width: 18px; height: 18px; }
.hero__pfeil:hover { background: rgb(85 76 71 / .55); color: #fff; }
.hero__pfeil--zurueck { left: .75rem; }
/* Bildwechsel anhalten (Barrierefreiheit: bewegte Inhalte müssen stoppbar sein) – dezent unten rechts */
.hero__pause {
  position: absolute; z-index: 3; right: .75rem; bottom: .75rem;
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgb(85 76 71 / .18); color: rgb(255 255 255 / .8); font-size: .7rem; line-height: 1; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: background .2s;
}
.hero__pause:hover, .hero__pause:focus-visible { background: rgb(85 76 71 / .55); color: #fff; }
.hero__pause[hidden] { display: none; }
.hero__pfeil--vor { right: .75rem; }
.nachweis {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: 4.5rem clamp(1rem, 4vw, 3.75rem) clamp(1rem, 3vw, 2.4rem);
  background: linear-gradient(transparent, rgb(0 0 0 / .7));
  color: #fff; font-size: .9rem; font-weight: 700; line-height: 1.2;
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
figure:hover > .nachweis, figure:focus-within > .nachweis { opacity: 1; }
.hero .nachweis { padding: 1rem; background: none; text-align: right; font-weight: 400; font-size: .75rem; }

/* ---------- Abschnitte ---------- */
.abschnitt, .intro { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: var(--abstand) var(--rand) 0; }
.intro { padding-top: clamp(3rem, 5vw, 4.6rem); }
.intro + .kacheln, .intro + .bloecke > :first-child { margin-top: var(--abstand); }
.bloecke > * { max-width: calc(var(--breite) + 2 * var(--rand)); margin: var(--abstand) auto 0; padding: 0 var(--rand); }
.bloecke > .galerie-slider { max-width: none; padding: 0; }
.bloecke > h2 { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); text-align: center; }
.bloecke > h2 + .linie-text, .bloecke > h3 + .linie-text, .bloecke > .linie-text + .linie-text { margin-top: 0; }
.bloecke > .linie-text { padding-left: 1rem; max-width: var(--breite-text); }
.bloecke > .button-block { margin-top: clamp(3rem, 6vw, 5.5rem); }
.bloecke > .button-block:first-child { margin-top: 2rem; }

/* Startseite: Bereichs-Kacheln */
.kacheln { max-width: calc(var(--breite) + 2 * var(--rand)); margin: var(--abstand) auto 0; padding: 0 var(--rand); display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.kachel { display: flex; flex-direction: column; background: var(--beige-2); color: var(--text); text-decoration: none; border-radius: 24px 3px 24px 3px; /* Blattform wie Buttons & Reiter-Bilder */ overflow: hidden; transition: transform .25s, box-shadow .25s; }
.kachel:hover { transform: translateY(-3px); box-shadow: 0 10px 25px -14px rgb(85 76 71 / .5); color: var(--text); }
.kachel__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kachel__text { padding: 1.1rem 1.1rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.kachel h2 { font-size: 2.3rem; line-height: 1.25; margin: .2rem 0 .6rem; }
.kachel p { font-size: 1rem; flex: 1; line-height: 1.6; }
.kachel__mehr { display: inline-flex; align-items: center; gap: .15rem; color: var(--orange-dunkel); font-weight: 700; }

/* Akkordeon (Vorteile, FAQ) */
.akkordeon { max-width: var(--breite-text); margin: 0 auto 2.5rem; }
.akkordeon details { border-bottom: 1px solid var(--linie); }
.akkordeon summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  cursor: pointer; padding: 1.05rem 1rem; list-style: none;
  color: var(--orange); font-weight: 700; font-size: 1.125rem;
}
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary .icon { width: 28px; height: 28px; flex: none; transition: transform .2s; }
.akkordeon details[open] summary .icon { transform: rotate(180deg); }
.akkordeon__inhalt { padding: 0 1rem 1.1rem; }
.akkordeon__inhalt > :last-child { margin-bottom: 0; }

/* Ausstellung (2 × 2 wie Original) */
.ausstellung { display: grid; grid-template-columns: 1fr; }
.ausstellung__text { background: var(--grau); padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 5vw, 4.5rem); border-top-left-radius: var(--radius-gross); }
.ausstellung__text > :last-child, .ausstellung__zeiten > :last-child { margin-bottom: 0; }
.ausstellung__claim { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); text-transform: uppercase; letter-spacing: .1em; color: var(--text); font-weight: 400; }
.ausstellung__bild img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.ausstellung__bild:last-child img { border-bottom-right-radius: var(--radius-gross); }
.ausstellung__zeiten { margin-top: 1.75rem; }
.ausstellung__zeiten h4 { display: flex; align-items: center; gap: .4rem; color: var(--braun); font-weight: 700; font-size: 1.15rem; }
.ausstellung__zeiten .icon { color: var(--orange); flex: none; }
.ausstellung__adresse { display: flex; gap: .4rem; align-items: flex-start; margin: 1rem 0 .25rem; }
.ausstellung__adresse .icon { margin-top: .2rem; }
@media (min-width: 800px) {
  .ausstellung { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Bild neben dem Text füllt immer die volle Höhe – keine Lücke */
  .ausstellung__bild:nth-child(2) { min-height: 100%; }
  .ausstellung__bild:nth-child(2) img { position: absolute; inset: 0; aspect-ratio: auto; }
}

/* Öffnungszeiten */
.zeiten { margin: 0 0 .4rem; }
.zeiten div { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.zeiten dt { font-weight: 700; min-width: 6.5rem; }
.zeiten dd { margin: 0; }
.zeiten__hinweis { font-size: .95rem; font-style: italic; }

/* Team – volle Breite, Text beim Darüberfahren */
.team-bereich { margin-top: var(--abstand); }
.team { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 800px) { .team { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.person { position: relative; overflow: hidden; outline-offset: -3px; }
.person img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .6s ease; }
.person__text {
  position: absolute; inset: 0; padding: clamp(1rem, 2.5vw, 2rem);
  background: rgb(40 34 31 / .72); color: #fff; font-size: .98rem; line-height: 1.55;
  opacity: 0; transition: opacity .35s ease; overflow: auto;
}
.person__name { text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1em; }
.person:hover .person__text, .person:focus .person__text, .person:focus-within .person__text { opacity: 1; }
.person:hover img { transform: scale(1.03); }
@media (hover: none) {
  /* Auf Touch-Geräten: Name immer sichtbar, Text per Tippen */
  .person__text { opacity: 0; }
}
.team-bereich__text { text-align: center; margin: 3rem var(--rand) 1.5rem; }
.team-bereich__namen { text-align: center; color: var(--orange); text-transform: uppercase; letter-spacing: .1em; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.3; margin: 0 var(--rand); }

/* Text mit Bild */
.textbild { display: grid; gap: 0; align-items: center; }
.textbild__text { padding: 2rem 0; }
.textbild h2, .reiter__text h2, .aktion h2 { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem); text-transform: uppercase; letter-spacing: .12em; color: var(--orange); font-weight: 400; }
.textbild__fliess > :last-child { margin-bottom: 0; }
/* Nur der erste Absatz bekommt die orange Linie (wie Original) */
.textbild--weiss .textbild__fliess > * { margin-left: .5rem; padding-left: 1rem; }
.textbild--weiss .textbild__fliess > p:first-child { border-left: 1px solid var(--orange); }
.textbild--weiss .textbild__fliess > p { margin-bottom: 1.4em; }
.textbild--weiss .textbild__fliess > ul { padding-left: 0; }
.textbild--hell, .textbild--grau, .textbild--dunkel { align-items: stretch; }
.textbild--hell .textbild__text, .textbild--grau .textbild__text, .textbild--dunkel .textbild__text { padding: clamp(1.5rem, 5vw, 5.5rem); display: flex; flex-direction: column; justify-content: center; }
.textbild--hell .textbild__text { background: var(--beige-2); }
.textbild--grau .textbild__text { background: var(--grau-hell); }
.textbild--dunkel .textbild__text { background: var(--taupe); color: #fff; }
.textbild--dunkel h2 { color: #fff; }
.textbild--dunkel a { color: #fff; }
.textbild__bilder img { width: 100%; }
/* farbige Blöcke: Bild quadratisch und so hoch wie die Textfläche */
.textbild:is(.textbild--hell, .textbild--grau, .textbild--dunkel) .textbild__bilder--einzel :is(figure, picture) { height: 100%; }
.textbild:is(.textbild--hell, .textbild--grau, .textbild--dunkel) .textbild__bilder--einzel img { height: 100%; aspect-ratio: 1; object-fit: cover; }
/* weiße Blöcke: Bild in Originalgröße (max. 500 bzw. 400 px) */
.textbild--weiss .textbild__bilder--einzel { max-width: 500px; width: 100%; }
.textbild--klein .textbild__bilder--einzel { max-width: 400px; }
.textbild--gross .textbild__bilder--einzel { max-width: none; }
.textbild--bild-rechts.textbild--weiss .textbild__bilder--einzel { justify-self: end; }
/* Collage (3 Bilder): links zwei kleine, rechts ein hohes – natürliche Formate */
.textbild__bilder--collage { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; max-width: 586px; }
.collage__links { display: grid; gap: 6px; }
/* Bildergruppe (4+ Bilder): zweispaltig versetzt */
.textbild__bilder--gruppe { columns: 2; column-gap: 6px; max-width: 586px; }
.textbild__bilder--gruppe figure { break-inside: avoid; margin-bottom: 6px; }
.textbild--ohne-bild { max-width: calc(var(--breite-text) + 2 * var(--rand)) !important; }
.textbild--ohne-bild .textbild__text { padding: 0; }
@media (min-width: 900px) {
  .textbild:not(.textbild--ohne-bild) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .textbild--weiss { column-gap: 3rem; }
  .textbild--bild-links .textbild__bilder { order: -1; }
  .textbild:has(.textbild__bilder--collage, .textbild__bilder--gruppe) .textbild__text { max-width: 420px; padding-left: 3.5rem; }
  .textbild:has(.textbild__bilder--collage) { align-items: start; }
}

/* Reiter */
.reiter__leiste { display: flex; justify-content: center; flex-wrap: wrap; gap: 0; margin-top: 2.5rem; }
html:not(.js) .reiter__leiste[hidden] { display: none; }
/* bis das Skript bereit ist: nur den ersten Reiter zeigen (kein Springen beim Laden) */
.js .reiter:not(.ist-bereit) .reiter__panel--weitere { display: none; }
.reiter__leiste button {
  font: inherit; text-transform: uppercase; font-size: 1rem;
  background: none; border: 0; padding: .55rem 1.1rem; color: var(--text); cursor: pointer;
}
.reiter--hell .reiter__leiste button[aria-selected="true"] { background: var(--beige-2); color: var(--orange); }
.reiter__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: clamp(1.25rem, 5vw, 4.5rem) clamp(1.25rem, 5vw, 3.75rem) clamp(1.5rem, 6vw, 6rem); margin-bottom: 1rem; }
.reiter--hell .reiter__panel { background: var(--beige-2); }
.js .reiter__panel { margin-bottom: 0; }
.js .reiter__panel[hidden] { display: none; }
.reiter__text h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); text-transform: uppercase; letter-spacing: .1em; color: var(--orange); }
.reiter__text > :last-child { margin-bottom: 0; }
.reiter--hell .slider--bilder figure { border-radius: 28px 0 28px 0; overflow: hidden; }
@media (min-width: 900px) { .reiter--hell .reiter__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; } }
.reiter--dunkel .reiter__kasten { background: var(--taupe); color: #fff; padding: clamp(2rem, 6vw, 5.5rem) clamp(1rem, 4vw, 3.5rem) clamp(2.5rem, 7vw, 8rem); }
.reiter--dunkel .reiter__kasten .titel { margin-bottom: .8em; }
.reiter--dunkel .titel { color: #fff; }
.reiter--dunkel a { color: #fff; }
.reiter__intro { max-width: var(--breite-text); margin: 0 auto; text-align: center; }
.reiter--dunkel .reiter__leiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 1.5rem; max-width: 1054px; margin-left: auto; margin-right: auto; }
html:not(.js) .reiter--dunkel .reiter__leiste[hidden] { display: none; }
.reiter--dunkel .reiter__leiste button { color: #fff; border-bottom: 4px solid transparent; padding: .5rem .5rem .6rem; font-size: 1.125rem; }
.reiter--dunkel .reiter__leiste button[aria-selected="true"] { border-color: #fff; }
.reiter--dunkel .reiter__panel { padding: 4.5rem 0 0; }
.reiter--dunkel .slider { max-width: 942px; margin: 0 auto; }
.reiter--dunkel .slider--bilder img { aspect-ratio: 4 / 3; }

/* Reiter auf dem Handy: eine Zeile zum Wischen statt Umbruch, Rand blendet weich aus */
@media (max-width: 700px) {
  .reiter .reiter__leiste:not([hidden]) {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0 .25rem;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    max-width: none; margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand));
    padding: 0 var(--rand);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--rand), #000 calc(100% - 2.5rem), transparent);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--rand), #000 calc(100% - 2.5rem), transparent);
  }
  .reiter .reiter__leiste::-webkit-scrollbar { display: none; }
  .reiter .reiter__leiste button { flex: none; white-space: nowrap; font-size: .95rem; padding: .55rem .9rem .6rem; }
  .reiter--dunkel .reiter__leiste button { border-bottom-width: 3px; }
  .reiter--dunkel .reiter__panel { padding-top: 1.75rem; }
  /* im dunklen Kasten liegt die Leiste innerhalb des Innenabstands */
  .reiter--dunkel .reiter .reiter__leiste:not([hidden]), .reiter--dunkel .reiter__leiste:not([hidden]) {
    margin-left: calc(-1 * clamp(1rem, 4vw, 3.5rem)); margin-right: calc(-1 * clamp(1rem, 4vw, 3.5rem));
    padding: 0 clamp(1rem, 4vw, 3.5rem);
  }
}

/* Touch-Geräte: ausreichend große Tippziele */
@media (hover: none), (max-width: 700px) {
  .hero__pfeil { width: 44px; height: 44px; }
  .bewertung__mehr { padding: .6rem 1rem; margin: .2rem 0 .6rem; }
  .fuss .fuss__social a { width: 42px; height: 42px; }
  .fuss .fuss__social .icon { width: 22px; height: 22px; }
  .fuss .fuss__links a { display: inline-block; padding: .4rem 0; }
  .slider--karten .slider__pfeil.slider__pfeil { width: 44px; height: 44px; }
  .feld select, .feld input { min-height: 46px; }
}

/* Fehlerseite */
.fehlerseite__links { list-style: none; padding: 0; margin: 2.5rem auto 0; max-width: var(--breite-text); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: center; }
.fehlerseite__links a:not(.btn) { padding: .4rem 0; }

/* Bildunterschrift: am PC nur Bildnachweis beim Darüberfahren */
.nachweis__text { display: none; }
.nachweis--ohne { display: none; }

/* Handy: Slider zum Wischen mit angeschnittenem nächsten Bild,
   Bildunterschrift (Beschreibung · Nachweis) sichtbar unter dem Bild */
@media (max-width: 700px) {
  .slider.slider--bilder .slider__spur { grid-auto-columns: 85%; }
  .slider.slider--bilder .slider__spur:has(> li:only-child) { grid-auto-columns: 100%; }
  .slider--bilder .slider__punkte { display: none !important; }
  .bloecke figure > .nachweis {
    position: static; opacity: 1; display: block; background: none;
    padding: .45rem .1rem 0; color: var(--text-hell); font-size: .8rem; font-weight: 400; line-height: 1.35;
  }
  .nachweis__text { display: inline; }
  .nachweis__text + .nachweis__quelle::before { content: " · "; }
  .reiter--dunkel figure > .nachweis { color: rgb(255 255 255 / .8) !important; }
  /* Rundung aufs Bild statt auf die ganze Figur, damit die Unterschrift darunter passt */
  .reiter--hell .slider--bilder figure { border-radius: 0; overflow: visible; }
  .reiter--hell .slider--bilder picture { border-radius: 22px 0 22px 0; }
  /* Dunkler Kasten (Möbel) von Rand zu Rand, Bilder laufen rechts aus */
  .bloecke > .reiter--dunkel { padding-left: 0; padding-right: 0; }
  .reiter--dunkel .reiter__kasten { padding-left: 1.25rem; padding-right: 1.25rem; }
  .reiter--dunkel .reiter__leiste:not([hidden]) { margin-left: -1.25rem !important; margin-right: -1.25rem !important; padding: 0 1.25rem !important; }
  .reiter--dunkel .slider { margin-right: -1.25rem; }
  .slider.slider--galerie .slider__spur { gap: 8px; padding-left: var(--rand); padding-right: var(--rand); scroll-padding-left: var(--rand); }
}
/* Auf Touch-Geräten und dem Handy keine Pfeile – dort wird gewischt */
@media (hover: none), (max-width: 700px) {
  .slider--bilder .slider__pfeil, .slider--galerie .slider__pfeil { display: none !important; }
}

/* Slider (Bilder, Galerie, Bewertungen) */
.slider { position: relative; }
.slider__spur {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 6px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.slider__spur::-webkit-scrollbar { display: none; }
/* Ziehen mit der Maus */
@media (hover: hover) {
  .slider__spur { cursor: grab; }
  .slider__spur.ist-gezogen { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
  .slider__spur.ist-gezogen figure { transform: none !important; }
  /* Dezente Pfeile erscheinen beim Darüberfahren */
  .slider--bilder .slider__pfeil, .slider--galerie .slider__pfeil { opacity: 0; transition: opacity .25s ease, background .2s; }
  .slider--bilder:hover .slider__pfeil, .slider--galerie:hover .slider__pfeil,
  .slider--bilder .slider__pfeil:focus-visible, .slider--galerie .slider__pfeil:focus-visible { opacity: 1; }
}
/* Dezente Pfeile: klein, halbtransparent, ohne Schatten; beim Darüberfahren etwas kräftiger */
.slider--bilder .slider__pfeil, .slider--galerie .slider__pfeil {
  z-index: 5; width: 34px; height: 34px;
  background: rgb(255 255 255 / .25); color: rgb(85 76 71 / .6);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.slider--bilder .slider__pfeil .icon, .slider--galerie .slider__pfeil .icon { width: 18px; height: 18px; }
.slider--bilder .slider__pfeil:hover, .slider--galerie .slider__pfeil:hover { background: rgb(255 255 255 / .6); color: var(--text); }
.slider--bilder .slider__pfeil { top: calc(50% - .8rem); }
.slider__spur > li { scroll-snap-align: start; }
/* Endlos-Lauf: Kopien der Bilder (main.js) – nicht nötig, wenn alle Bilder auf einmal sichtbar sind */
.slider.ist-passend .ist-klon { display: none; }
.slider--bilder img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.slider--zwei .slider__spur { grid-auto-columns: 100%; }
@media (min-width: 700px) { .slider--zwei .slider__spur { grid-auto-columns: calc(50% - 3px); } }
.slider__punkte { display: flex; justify-content: center; gap: .4rem; margin-top: .8rem; }
.slider__punkte[hidden] { display: none; }
.slider__punkte { gap: 0 !important; }
.slider__punkte button { width: 24px; height: 24px; border: 0; padding: 0; cursor: pointer; background: radial-gradient(circle, #b9b0aa 0 4.5px, transparent 5px); }
.slider__punkte button[aria-current="true"] { background: radial-gradient(circle, var(--text) 0 4.5px, transparent 5px); }
.reiter--dunkel .slider__punkte button { background: radial-gradient(circle, rgb(255 255 255 / .45) 0 4.5px, transparent 5px); }
.reiter--dunkel .slider__punkte button[aria-current="true"] { background: radial-gradient(circle, #fff 0 4.5px, transparent 5px); }
.slider__pfeil {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: rgb(85 76 71 / .75); color: #fff;
}
.slider__pfeil[hidden] { display: none; }
.slider__pfeil--zurueck { left: .5rem; }
.slider__pfeil--vor { right: .5rem; }
.slider--galerie .slider__spur { grid-auto-columns: 85%; }
@media (min-width: 900px) { .slider--galerie .slider__spur { grid-auto-columns: calc((100% - 6px) / 3); } }
.slider--galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.slider--galerie .slider__spur { gap: 3px; }
/* Beim Darüberfahren: Bildrahmen bleibt, Inhalt zoomt sanft hinein (wie beim Team) */
.slider--galerie picture, .slider--bilder picture { display: block; overflow: hidden; }
.slider--galerie img, .slider--bilder img { transition: transform .6s ease; }
@media (hover: hover) {
  .slider--galerie figure:hover img, .slider--bilder figure:hover img { transform: scale(1.05); }
}
.slider__spur.ist-gezogen img { transform: none !important; }
.galerie-slider__text { text-align: center; font-size: .95rem; color: var(--text-hell); margin-top: .75rem; }

/* Info-Kacheln (z.B. „Wichtige Komponenten“) */
.infokacheln {
  background: var(--taupe-hell); border-radius: var(--radius-gross) 0 var(--radius-gross) 0;
  max-width: var(--breite) !important;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
}
.infokacheln h2 { text-align: center; color: #fff; text-transform: uppercase; letter-spacing: .12em; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin-bottom: 2.5rem; }
.infokacheln__liste { list-style: none; margin: 0 auto; padding: 0; max-width: 1084px; display: grid; gap: 3.5rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.infokachel { background: var(--beige-2); padding: 0 1.5rem 1.5rem; text-align: center; margin-top: 2.3rem; }
.infokachel__symbol {
  display: inline-grid; place-items: center; width: 80px; height: 80px; border-radius: 50%;
  background: var(--text); color: var(--beige-2); margin-top: -40px; margin-bottom: 1rem;
}
.infokachel__symbol .icon { width: 38px; height: 38px; }
.infokachel h3 { color: var(--taupe-hell); text-transform: uppercase; letter-spacing: .08em; font-weight: 300; font-size: 1.6rem; margin-bottom: .5rem; }
.infokachel p { font-size: 1rem; margin: 0; }

/* Termin-Aufruf */
.cta-block .titel { margin-bottom: .6em; }
.cta-block p { max-width: var(--breite-text); margin-left: auto; margin-right: auto; }

/* Video-Links */
.videolinks { text-align: center; }
.videolinks h3 { color: var(--braun); font-size: 1.1rem; font-weight: 700; }
.videolinks ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2rem; }

/* Einzelbild */
.bild img { width: 100%; }
.bild figcaption { font-size: .95rem; color: var(--text-hell); padding-top: .4rem; }

/* Artikel (Über uns, Impressum, Datenschutz) */
.artikel { max-width: calc(var(--breite-text) + 2 * var(--rand)); margin: 0 auto; padding: var(--abstand) var(--rand) 0; }
.artikel h2 { color: var(--orange); text-transform: uppercase; letter-spacing: .12em; font-size: clamp(1.45rem, 1.15rem + 1vw, 1.95rem); margin: 1.2em 0 .6em; }
.artikel > .titel { margin-bottom: .4em; }
.artikel .linie-text p { margin-bottom: 1.6em; }
.artikel h3 { color: var(--braun); font-weight: 700; font-size: 1.15rem; margin-top: 1.5em; }
.artikel .linie-text { border: 0; padding: 0; max-width: none; }
.artikel .linie-text + .linie-text { margin-top: 1em; }
.artikel .textbild { margin-top: 1.5rem; }

/* Marken & Einzugsgebiet */
.marken__kasten { background: var(--beige-2); border-radius: 24px 3px 24px 3px; padding: clamp(1.25rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 2.75rem); }
.marken__einleitung { color: var(--orange); text-transform: uppercase; letter-spacing: .1em; font-size: 1.15rem; margin-bottom: .8rem; }
.marken__liste { list-style: none; padding: 0; margin: 0 0 1rem; }
.marken__liste li { padding: .35rem 0; border-bottom: 1px solid var(--linie); }
.marken__liste li:last-child { border-bottom: 0; }
.marken__ort { margin: 0; font-size: .98rem; color: var(--text-hell); }
/* Logoleiste: einheitlich grau, beim Darüberfahren in Originalfarbe */
.marken__intro { text-align: center; max-width: var(--breite-text); margin: 0 auto 2rem; }
.logoleiste { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 800px) { .logoleiste { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.logoleiste__eintrag { display: flex; flex-direction: column; align-items: center; gap: .6rem; height: 100%; padding: 1.25rem .75rem 1rem; text-align: center; text-decoration: none; color: var(--text-hell); border-radius: 18px 3px 18px 3px; transition: background .25s; }
.logoleiste__logo { display: flex; align-items: center; justify-content: center; height: 56px; width: 100%; }
.logoleiste__logo img { max-height: 46px; max-width: min(150px, 80%); width: auto; filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s; }
.logoleiste__logo strong { color: var(--text); letter-spacing: .08em; text-transform: uppercase; }
.logoleiste__text { font-size: .85rem; line-height: 1.4; }
a.logoleiste__eintrag:hover, a.logoleiste__eintrag:focus-visible { background: var(--beige-2); color: var(--text); }
a.logoleiste__eintrag:hover img, a.logoleiste__eintrag:focus-visible img { filter: none; opacity: 1; }
.marken--uebersicht { max-width: calc(var(--breite) + 2 * var(--rand)) !important; }
.marken--uebersicht, .einzugsgebiet { max-width: calc(var(--breite-text) + 2 * var(--rand)); margin: var(--abstand) auto 0; padding: 0 var(--rand); }
.einzugsgebiet { text-align: center; }
.einzugsgebiet__orte { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }
.einzugsgebiet__orte li { background: var(--beige-2); padding: .3rem .85rem; border-radius: 12px 3px 12px 3px; font-size: .95rem; }
.einzugsgebiet__zusatz { margin-top: 1rem; }
.einzugsgebiet--klein { margin-top: 2rem; padding: 0; max-width: none; }
.einzugsgebiet--klein p { font-size: .95rem; margin-bottom: 0; }
.einzugsgebiet--klein .einzugsgebiet__orte li { background: #fff; border: 1px solid var(--linie); font-size: .88rem; }

/* Ratgeber */
.ratgeber-liste { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.artikel-karte { display: flex; flex-direction: column; background: var(--beige-2); color: var(--text); text-decoration: none; border-radius: 24px 3px 24px 3px; overflow: hidden; }
.artikel-karte:hover { color: var(--text); }
.artikel-karte__bild picture { display: block; overflow: hidden; }
.artikel-karte__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .6s ease; }
@media (hover: hover) { .artikel-karte:hover img { transform: scale(1.05); } }
.artikel-karte__text { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.artikel-karte__meta { font-size: .85rem; color: var(--text-hell); margin-bottom: .3rem; }
.artikel-karte h3, .artikel-karte__titel { color: var(--orange); font-size: 1.3rem; font-weight: 400; line-height: 1.3; margin-bottom: .5rem; }
.artikel-karte p { font-size: 1rem; line-height: 1.55; }
.artikel-karte__text > p:last-of-type { flex: 1; }
.ratgeber-mehr { margin-top: 2rem; }
.ratgeber-artikel__meta { text-align: center; font-size: .95rem; color: var(--text-hell); margin-bottom: .6rem; }
.ratgeber-artikel__meta a { color: var(--text-hell); }
.ratgeber-artikel .titel { text-transform: none; letter-spacing: .04em; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.ratgeber-artikel__bild { margin: 1.5rem 0; }
.ratgeber-artikel__bild picture { display: block; overflow: hidden; border-radius: 28px 3px 28px 3px; }
.ratgeber-artikel__bild img { width: 100%; }
.ratgeber-artikel__teaser { font-size: 1.2rem; line-height: 1.6; color: var(--braun); }
.ratgeber-artikel .linie-text { border: 0; padding: 0; }
.ratgeber-artikel h2 { text-transform: none; letter-spacing: .03em; font-size: 1.45rem; }
.ratgeber-artikel ul { padding-left: 1.2rem; }
.ratgeber-artikel li { margin-bottom: .4rem; }
.ratgeber-artikel__cta { margin-top: 2.5rem; padding: 1.75rem; background: var(--beige-2); border-radius: 24px 3px 24px 3px; text-align: center; }
@media (max-width: 700px) { .ratgeber-artikel__bild figure > .nachweis, .ratgeber-artikel__bild > .nachweis { position: static; opacity: 1; background: none; color: var(--text-hell); padding: .45rem .1rem 0; font-size: .8rem; font-weight: 400; } }

/* Aktionen */
.aktionen-liste { display: grid; gap: 1.5rem; }
.aktion { display: grid; background: var(--beige-2); overflow: hidden; }
.aktion__bild img { width: 100%; height: 100%; object-fit: cover; }
.aktion__text { padding: clamp(1.25rem, 4vw, 2.5rem); }
.aktion__zeitraum { display: inline-block; background: var(--orange); color: #fff; padding: .1rem .7rem; font-size: .95rem; }
.aktion h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); text-transform: uppercase; letter-spacing: .1em; color: var(--orange); margin: .6rem 0 .2rem; }
.aktion__untertitel { text-transform: uppercase; letter-spacing: .08em; color: var(--orange); }
.aktion__links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.aktion__links .btn--hell { background: var(--text); }
@media (min-width: 900px) { .aktion:has(.aktion__bild) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }

/* Aktions-Popup */
/* Farben und Ecken pro Aktion einstellbar (Admin-Bereich → Popup-Gestaltung), sonst wie bisher */
.popup {
  border: 1px solid #333; padding: 2.5rem clamp(1.25rem, 4vw, 3.5rem) 2rem; max-width: min(600px, calc(100% - 2rem));
  text-align: center; color: var(--popup-text, var(--text)); background: var(--popup-hg, #fff);
  border-radius: var(--popup-radius, 0);
}
.popup::backdrop { background: rgb(0 0 0 / .45); }
.popup__bild { margin: -.5rem 0 1.5rem; }
.popup__bild img { width: 100%; height: auto; max-height: 38vh; object-fit: cover; display: block; border-radius: var(--popup-radius, 0); }
.popup__titel { color: var(--popup-akzent, var(--orange)); text-transform: uppercase; letter-spacing: .1em; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.popup__untertitel { color: var(--popup-untertitel, var(--popup-akzent, var(--orange))); text-transform: uppercase; letter-spacing: .08em; font-size: 1rem; }
.popup a { color: inherit; }
.popup__knopf { margin: 1.5rem 0 0; }
.popup .btn { color: #fff; background: var(--popup-akzent, var(--orange)); }
.popup .btn:hover { background: var(--text); }
.popup__zu-form { position: absolute; right: .6rem; bottom: .6rem; margin: 0; }
/* Schließen-Knopf immer gleich (weiß mit dunklem X), damit er bei jeder Popup-Farbe sichtbar bleibt */
.popup__zu { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #554c47; background: #fff; cursor: pointer; font-size: 1.15rem; line-height: 1; color: #554c47; box-shadow: 0 1px 6px rgb(0 0 0 / .25); }
.popup__zu:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

/* Bewertungen (vor dem Fuß, auf allen Seiten) */
.bewertungen { background: var(--beige); margin-top: var(--abstand); padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 3.5vw, 3.25rem) 4rem; }
.slider--karten .slider__spur { grid-auto-columns: 100%; gap: 1rem; }
@media (min-width: 640px) { .slider--karten .slider__spur { grid-auto-columns: calc((100% - 1rem) / 2); } }
@media (min-width: 980px) { .slider--karten .slider__spur { grid-auto-columns: calc((100% - 3rem) / 4); } }
.slider--karten { padding: 0 2rem; }
.slider--karten .slider__pfeil { background: none; color: #a59c96; width: 32px; }
.slider--karten .slider__pfeil--zurueck { left: -.25rem; }
.slider--karten .slider__pfeil[hidden] { display: grid; }
.slider--karten .slider__pfeil--vor { right: -.25rem; }
.slider--karten .slider__pfeil .icon { width: 32px; height: 32px; }
.bewertung { background: var(--karte); border-radius: var(--radius); padding: 1.25rem 1.1rem 1.5rem; display: flex; flex-direction: column; min-height: 360px; }
.bewertung__sterne { position: relative; /* hält den unsichtbaren Screenreader-Text im Bildband */ color: var(--sterne); font-size: 1.45rem; letter-spacing: .05em; margin-bottom: .6rem; line-height: 1; }
.bewertung__titel { font-size: 1.1rem; font-weight: 400; margin-bottom: 1.1rem; color: var(--text); }
.bewertung__text { font-size: 1.05rem; line-height: 1.55; }
.bewertung__text.ist-gekuerzt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bewertung--ohne-titel .bewertung__text.ist-gekuerzt { -webkit-line-clamp: 4; }
.bewertung__mehr { align-self: center; background: none; border: 0; font: inherit; color: #a59c96; cursor: pointer; margin: .6rem 0 1.2rem; }
.bewertung__mehr[hidden] { display: none; }
.bewertung__mehr:hover { color: var(--text); }
.bewertung__name { font-weight: 700; font-size: .9rem; margin: 0; }
.bewertung__quelle { display: block; font-weight: 400; font-size: .8rem; color: #6b625e; }
/* Pflichthinweis zur Echtheit (§ 5b UWG): klein, aber lesbar */
.bewertungen__hinweis { max-width: 46rem; margin: 2.5rem auto 0; text-align: center; font-size: .85rem; line-height: 1.5; color: #6b625e; }
.bewertungen__hinweis + .bewertungen__link { margin-top: 2rem; }
.bewertungen__link { text-align: center; margin: 4.5rem 0 0; }

/* ---------- Kontakt ---------- */
.kontakt-seite { background: var(--beige) var(--bg, none) center / cover fixed no-repeat; padding: var(--abstand) var(--rand); }
/* Handy/Tablet: kleineres Hintergrundbild, scrollt mit (fest verankert ruckelt dort bzw. wird von iOS ignoriert) */
@media (max-width: 900px) { .kontakt-seite { background-image: var(--bg-klein, var(--bg, none)); background-attachment: scroll; } }
.kontakt-seite + .bewertungen { margin-top: 0; }
.kontakt-karte { max-width: var(--breite); margin: 0 auto; background: #fff; padding: clamp(1.5rem, 5vw, 3.75rem) clamp(1rem, 4vw, 3.75rem); }
.kontakt-kopf { text-align: center; }
.kontakt-kopf .titel { margin-bottom: .4em; }
.kontakt-kopf__unterzeile { text-transform: uppercase; letter-spacing: .1em; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); color: var(--text); text-align: center; }
.kontakt-kopf__text { max-width: var(--breite-text); margin: 0 auto 2rem; }
.kontakt { display: grid; gap: 2rem; margin-top: 2rem; }
.kontakt__daten { background: var(--beige-2); padding: 2rem; }
.kontakt__daten h3 { font-size: 1.15rem; font-weight: 700; color: var(--braun); margin-top: 1.5rem; }
@media (min-width: 900px) { .kontakt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.formular { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.feld { flex: 1 1 100%; margin-bottom: .9rem; }
.feld--halb { flex: 1 1 calc(50% - .5rem); min-width: 200px; }
.feld label { display: block; font-size: .95rem; margin-bottom: .2rem; }
.feld input, .feld select, .feld textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--text);
  padding: .5rem .65rem; background: #fff; border: 1px solid #9a918c; border-radius: 3px;
}
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--orange); outline: 1px solid var(--orange); }
.feld--fehler input, .feld--fehler textarea { border-color: #b3261e; }
.feld__fehler { flex: 1 1 100%; color: #b3261e; font-size: .95rem; margin: -.5rem 0 .9rem; }
.feld__hinweis { flex: 1 1 100%; font-size: .9rem; color: var(--text-hell); margin: -.4rem 0 .9rem; }
.feld--honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__datenschutz { flex: 1 1 100%; font-size: .9rem; }
.meldung { padding: 1rem 1.25rem; margin-bottom: 1rem; }
.meldung p { margin: 0; }
.meldung--erfolg { background: #e7f3e8; border-left: 4px solid #2e7d32; }
.meldung--fehler { background: #fbeaea; border-left: 4px solid #b3261e; }

.anfahrt { margin-top: 3.5rem; }
.anfahrt__karte { display: grid; place-items: center; position: relative; min-height: 300px; background: #a8a29e; text-decoration: none; margin-top: 1.5rem; }
.anfahrt__karte picture { position: absolute; inset: 0; }
.anfahrt__karte picture img { width: 100%; height: 100%; object-fit: cover; }
.anfahrt__karte:has(picture) { aspect-ratio: 1400 / 620; min-height: 0; width: 100%; }
@media (max-width: 700px) { .anfahrt__karte:has(picture) { aspect-ratio: 1 / 1; } }
.anfahrt__karte .btn { position: absolute; }
.anfahrt__karte:has(picture) .btn { bottom: 1.25rem; }
.anfahrt__nachweis { position: absolute; right: 0; bottom: 0; padding: .1rem .4rem; font-size: .7rem; color: #554c47; background: rgba(255, 255, 255, .75); }
.anfahrt__platzhalter { position: absolute; top: 40%; color: #fff; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .08em; text-align: center; padding: 0 1rem; transform: translateY(-120%); }
.anfahrt__text { text-align: center; margin-top: 1rem; font-size: .95rem; }

/* ---------- Markenband (über dem Footer) ---------- */
.markenband { background: #e9e3de; padding: 1.5rem 0; }
.markenband__fenster { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.markenband__spur { display: flex; width: max-content; animation: markenband 50s linear infinite; }
.markenband ul { list-style: none; margin: 0; padding: 0 clamp(2.75rem, 5vw, 4.5rem) 0 0; display: flex; align-items: center; gap: clamp(2.75rem, 5vw, 4.5rem); }
.markenband li { display: flex; align-items: center; }
.markenband a { display: block; padding: .4rem; border-radius: 10px 3px 10px 3px; }
.markenband img { display: block; height: var(--logo-hoehe, 34px); width: auto; max-width: calc(var(--logo-hoehe, 34px) * 4.2); object-fit: contain; filter: grayscale(1); opacity: .55; transition: filter .3s, opacity .3s; }
.markenband a:hover img, .markenband a:focus-visible img { filter: none; opacity: 1; }
.markenband__fenster:hover .markenband__spur, .markenband__fenster:focus-within .markenband__spur { animation-play-state: paused; }
.markenband.ist-gesteuert .markenband__spur { animation: none; will-change: transform; }
.markenband.ist-gesteuert .markenband__fenster { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.markenband.ist-gezogen .markenband__fenster { cursor: grabbing; }
.markenband img { -webkit-user-drag: none; }
@keyframes markenband { to { transform: translateX(-50%); } }
@media (max-width: 800px) {
  .markenband img { height: var(--logo-hoehe-mobil, 26px); max-width: calc(var(--logo-hoehe-mobil, 26px) * 4.2); }
}
@media (prefers-reduced-motion: reduce) {
  .markenband__spur { animation: none; width: auto; }
  .markenband ul[aria-hidden] { display: none; }
  .markenband ul { flex-wrap: wrap; justify-content: center; padding: 0 var(--rand); gap: 1.25rem 2.5rem; }
  .markenband__fenster { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Fuß: einfarbig, kompakt ---------- */
.fuss { background: var(--text); color: #f4f0ee; font-size: 1rem; line-height: 1.6; }
.fuss a { color: #fff; }
.fuss a:hover { color: var(--orange); }
.fuss__innen { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 2.75rem var(--rand) 2rem; display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .fuss__innen { grid-template-columns: 1.1fr 1.25fr 1.25fr .9fr; } }
.fuss__marke { grid-column: 1 / -1; }
@media (min-width: 900px) { .fuss__marke { grid-column: auto; } }
.fuss__marke img { width: 110px; margin-left: -5px; }
.fuss__claim { margin: .8rem 0 0; color: var(--beige-dunkel, #d7cac0); font-size: .95rem; }
.fuss__titel { font-size: .95rem; text-transform: uppercase; letter-spacing: .14em; color: #fff; font-weight: 400; line-height: 1.2; margin: 0 0 .6rem; }
.fuss p { margin: 0; }
.fuss__links { list-style: none; padding: 0; margin: 0; }
.fuss__unten { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 1rem var(--rand) 1.4rem; border-top: 1px solid rgb(255 255 255 / .12); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; font-size: .85rem; color: #d7cac0; }
.fuss__social { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; }
.fuss__social a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--orange); color: #fff; }
.fuss__social a:hover { background: #fff; color: var(--orange); }
.fuss__social .icon { width: 18px; height: 18px; }
.fuss__topateam { display: block; }
.fuss__topateam img { width: 130px; height: auto; display: block; opacity: .9; transition: opacity .2s; }
.fuss__topateam:hover img { opacity: 1; }
.fuss__innen > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 559px) { .fuss__innen { grid-template-columns: 1fr; gap: 1.6rem; } }
@media (max-width: 700px) { .fuss__unten { flex-direction: column; } }

/* Leiste für angemeldete Redakteure (snippets/redaktion.php) */
.redaktion { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: center; justify-content: center; padding: .45rem 1rem; background: var(--text); color: #fff; font-size: .85rem; }
.redaktion a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.redaktion a:hover, .redaktion a:focus-visible { color: var(--orange); }

/* Kontaktformular: Erklärung des Sternchens */
.formular__pflicht { font-size: .9rem; color: #6b625e; margin: 0 0 1rem; }

/* Nach oben */
.nach-oben {
  position: fixed; z-index: 55; right: 1.25rem; bottom: 1.25rem;
  width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgb(240 126 38 / .85); color: #fff; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s, background .2s;
}
.nach-oben.ist-sichtbar { opacity: 1; visibility: visible; }
.nach-oben:hover { background: var(--orange); }
.nach-oben svg { width: 22px; height: 22px; }
@media (max-width: 1000px) {
  .nach-oben { right: .9rem; width: 46px; height: 46px; transition: opacity .3s, visibility .3s, bottom .35s ease; }
  .nach-oben.ist-sichtbar { bottom: 1.25rem; }
  body.aktionsbar-offen .nach-oben { bottom: calc(5.6rem + env(safe-area-inset-bottom)); }
}

/* Aktions-Lasche am linken Rand: fährt herein, öffnet das Aktions-Popup.
   Startseite: erst nach dem Schließen des Popups; verschwindet beim Herunterscrollen – siehe main.js */
.aktion-lasche {
  position: fixed; z-index: 45; left: 0; top: calc(58% - 4.5rem);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  padding: .85rem .55rem .9rem .5rem;
  background: var(--orange); color: #fff; text-decoration: none;
  font-size: .9rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 0 18px 4px 0;
  box-shadow: 0 6px 18px -6px rgb(40 30 25 / .45);
  animation: lasche-rein .5s ease 1s both;
  transition: padding .2s, background .2s, transform .45s ease, visibility 0s;
}
.aktion-lasche span { writing-mode: vertical-rl; transform: rotate(180deg); }
.aktion-lasche .icon { width: 20px; height: 20px; }
.aktion-lasche:hover, .aktion-lasche:focus-visible { background: var(--orange-dunkel); padding-left: .85rem; color: #fff; }
@keyframes lasche-rein { from { transform: translateX(-110%); } to { transform: none; } }
.js #aktion-popup ~ .aktion-lasche { animation: none; }
.js #aktion-popup ~ .aktion-lasche:not(.ist-sichtbar), .aktion-lasche.ist-weg { transform: translateX(-110%); visibility: hidden; transition: transform .45s ease, visibility 0s linear .45s; }
@media (max-width: 700px) {
  .aktion-lasche { padding: .65rem .4rem .7rem .35rem; font-size: .78rem; gap: .4rem; }
  .aktion-lasche .icon { width: 17px; height: 17px; }
}

/* Schnellkontakt-Leiste (nur Handy/Tablet): schwebend, in Blattform,
   blendet sich beim Herunterscrollen aus und beim Hochscrollen ein */
.aktionsbar {
  position: fixed; z-index: 60;
  left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom));
  max-width: 520px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr 1.6fr; align-items: stretch; gap: .25rem;
  padding: .3rem;
  background: rgb(255 255 255 / .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 18px 4px 18px 4px;
  box-shadow: 0 8px 28px -6px rgb(40 30 25 / .35), 0 0 0 1px rgb(85 76 71 / .06);
  /* ausgeblendet: weit unter den Rand schieben und komplett unsichtbar (auch der Schatten) */
  transform: translateY(calc(150% + 3rem + env(safe-area-inset-bottom)));
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .35s ease, opacity .25s ease, visibility 0s linear .35s;
}
.aktionsbar.ist-sichtbar {
  transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  transition: transform .35s ease, opacity .2s ease, visibility 0s;
}
.aktionsbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  padding: .45rem .25rem; color: var(--text); text-decoration: none; font-size: .8rem; letter-spacing: .02em;
  border-radius: 14px 3px 14px 3px;
}
.aktionsbar a:active { background: var(--beige); }
.aktionsbar .icon { width: 20px; height: 20px; color: var(--orange); }
.aktionsbar__haupt { flex-direction: row !important; gap: .45rem !important; background: var(--orange); color: #fff !important; font-size: .95rem !important; }
.aktionsbar__haupt:active { background: var(--orange-dunkel) !important; }
.aktionsbar__haupt .icon { color: #fff; }
@media (min-width: 1001px) { .aktionsbar { display: none; } }

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

@media print {
  .kopf, .aktionsbar, .hero, .popup { display: none; }
}