/* =====================================================================
   D&O Freshcar Emden — Seiten-Haut (Schritt 6 · @web-designer)
   Baut auf haut.css auf (Tokens dort, hier nur ergänzt). Quelle: bau-brief.md §5–9.
   Rhythmus PC 0·0·0·7·4(+6)·8·4·2,5·6·0·5·8·3 rem — Handy 0·0·0·4·2,5(+3,5)·5·3·2·4·0·3·5·2.
   ===================================================================== */

:root {
  --schatten-kontakt: drop-shadow(0 18px 28px rgba(16, 82, 124, 0.14));
  --ease-aus: cubic-bezier(0.23, 1, 0.32, 1);
}
:root[data-theme="dark"] {
  --schatten-kontakt: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.45));
}

/* ---------- Grundbausteine ---------- */
.rahmen {
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
}
main {
  display: block;
}
body:not([data-kopf="medium"]) main {
  padding-top: var(--kopfleiste-h);
}
.label,
.marke {
  font-family: var(--f-text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
  line-height: 1.3;
}
.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
}
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.03em;
  word-spacing: 0.08em;
  text-wrap: balance;
  max-width: 20ch;
}
h1 em,
h2 em,
h3 em,
.pointe em {
  font-style: normal;
  color: var(--akzent-tief);
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--meta);
  max-width: 38rem;
  text-wrap: pretty;
}
.kleingedruckt {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--meta);
}
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--leit);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
  transition:
    color 200ms var(--ease-ein),
    text-decoration-color 200ms var(--ease-ein);
}
.textlink::after {
  content: "→";
  font-weight: 500;
  transition: transform 200ms var(--ease-aus);
}
.textlink:has(.textlink__pfeil)::after {
  content: none;
}
.textlink__pfeil {
  width: 1em;
  height: 1em;
  transition: transform 200ms var(--ease-aus);
}
@media (hover: hover) and (pointer: fine) {
  .textlink:hover {
    color: var(--akzent-tief);
    text-decoration-color: currentColor;
  }
  .textlink:hover::after,
  .textlink:hover .textlink__pfeil {
    transform: translateX(3px);
  }
}
.knopf:active,
.fixknopf:active,
.chip:active,
.zeile:active {
  transform: scale(0.98);
}
.knopf {
  transition:
    background-color 200ms var(--ease-ein),
    color 200ms var(--ease-ein),
    transform 140ms var(--ease-aus);
}
.knopf--leit {
  --k-bg: var(--leit-fest);
  --k-fg: var(--kalk-fest);
}
.knopf--leit:hover {
  --k-bg: #0c4466;
  --k-fg: var(--kalk-fest);
}
.knopf--leise {
  --k-bg: transparent;
  --k-fg: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--linie);
}
.knopf--leise:hover {
  --k-bg: var(--flaeche);
  --k-fg: var(--text);
}
/* Hell = Knopf-Schrift dunkel (Tinte auf Cyan 6,83:1) — Hover Kalk auf Akzent-tief */

/* Bild-Fallback: fehlt ein Bühnenbild noch, bleibt eine ruhige Fläche statt Bruch-Symbol */
img.bild-fehlt {
  visibility: hidden;
}

/* ---------- Motion „Das Einschalten" (unterhalb des Kopfs) ---------- */
@keyframes einschalten-bild {
  0% {
    filter: brightness(0.42) saturate(0.6);
  }
  44%,
  56% {
    filter: brightness(0.77) saturate(0.84);
  }
  100% {
    filter: brightness(1) saturate(1);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js [data-ein] {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity var(--dauer-zeile) var(--ease-ein),
      transform var(--dauer-zeile) var(--ease-ein);
    transition-delay: calc(var(--i, 0) * var(--staffel));
  }
  .js [data-ein].ist-an {
    opacity: 1;
    transform: none;
  }
  .js [data-ein-medium] img,
  .js img[data-ein-medium] {
    filter: brightness(0.42) saturate(0.6);
  }
  .js [data-ein-medium].ist-an img,
  .js img[data-ein-medium].ist-an {
    animation: einschalten-bild var(--dauer-ein) var(--ease-ein) both;
  }
  .js [data-staffel] > * {
    opacity: 0;
    transform: translateX(40px);
    transition:
      opacity 520ms var(--ease-ein),
      transform 520ms var(--ease-ein);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js [data-staffel].ist-an > * {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================================
   1 · KONTAKTLEISTE (hell, bündig an der Video-Unterkante)
   ===================================================================== */
.kontaktleiste {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}
.kontaktleiste__zellen {
  list-style: none;
  margin-block: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.kontaktleiste__zellen > li {
  min-width: 0;
  border-left: 1px solid var(--linie);
}
.kontaktleiste__zellen > li:first-child {
  border-left: 0;
}
.kontaktleiste__zelle {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.15rem 1.5rem 1.2rem;
  min-height: 100%;
  text-decoration: none;
  color: var(--text);
  transition: background-color 200ms var(--ease-ein);
}
.kontaktleiste__zellen > li:first-child .kontaktleiste__zelle {
  padding-left: 0;
}
.kontaktleiste__wert {
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.35;
}
@media (hover: hover) and (pointer: fine) {
  .kontaktleiste__zelle:hover .kontaktleiste__wert {
    color: var(--akzent-tief);
  }
}

/* =====================================================================
   2 · FAKTEN-LEISTE
   ===================================================================== */
.fakten {
  border-bottom: 1px solid var(--linie);
}
.fakten__reihe {
  margin-block: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fakt {
  padding: 2.4rem 1.5rem 2.2rem;
  border-left: 1px solid var(--linie);
  min-width: 0;
}
.fakt:first-child {
  border-left: 0;
  padding-left: 0;
}
.fakt__wert {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-fakt);
  line-height: 1;
  letter-spacing: -0.03em;
  word-spacing: 0.08em;
  font-variant-numeric: proportional-nums;
  color: var(--text);
  white-space: nowrap;
}
.fakt__klein {
  font-size: 0.36em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--leit);
  vertical-align: 0.15em;
}
.fakt__klein:first-child {
  margin-right: 0.3em;
}
.fakt__label {
  margin: 0.7rem 0 0;
  color: var(--meta);
  font-size: 0.98rem;
  line-height: 1.4;
}
.fakten__fuss {
  font-size: 0.8rem;
  color: var(--meta);
  padding-bottom: 0.9rem;
  margin-top: -0.6rem;
}

/* =====================================================================
   3 · DIE HALLE — zentrierte Bühne + gestaffelter Foto-Streifen
   ===================================================================== */
.halle {
  padding-top: 7rem;
  overflow-x: clip;
  position: relative;
  z-index: 2;
}
.halle__kopf {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.halle__display {
  font-size: var(--fs-xxl);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
  word-spacing: 0.08em;
  font-variant-numeric: proportional-nums;
  margin: 0.1rem 0 0;
}
.halle__lead {
  margin: 1.9rem auto 0;
  max-width: 36rem;
}
.halle__alle {
  margin-top: 0.9rem;
}
.halle__streifen-huelle {
  margin-top: 3.25rem;
}
.halle__streifen {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--rand);
  max-width: calc(var(--breite) + 2 * var(--rand));
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  margin-bottom: -6rem; /* Bruch ①: das mittlere Foto ragt in die Lichtdecke */
}
.halle__foto {
  flex: 0 1 15rem;
  min-width: 0;
  max-width: 100%;
}
.halle__foto--a {
  flex-basis: 14rem;
}
.halle__foto--b {
  flex-basis: 16.5rem;
  margin-top: 3.5rem;
}
.halle__foto--mitte {
  flex-basis: 22rem;
  margin-top: 6rem;
}
.halle__foto button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--dunkel-fest);
  cursor: zoom-in;
  clip-path: var(--fase-poly);
}
.halle__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 520ms var(--ease-aus);
}
@media (hover: hover) and (pointer: fine) {
  .halle__foto button:hover img {
    transform: scale(1.03);
  }
}

/* Lichtbox (alle 9 Studiofotos) */
.lichtbox {
  border: 0;
  padding: 0;
  margin: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  background: rgba(7, 18, 28, 0.94);
  color: var(--kalk-fest);
}
.lichtbox::backdrop {
  background: rgba(7, 18, 28, 0.6);
}
.lichtbox[open] {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.lichtbox__leiste {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem var(--rand);
}
.lichtbox__zaehler {
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  color: var(--meta-fest);
}
.lichtbox__buehne {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0 4.5rem;
}
.lichtbox__bild {
  max-width: 100%;
  max-height: calc(100dvh - 9rem);
  width: auto;
  height: auto;
  object-fit: contain;
}
.lichtbox__text {
  padding: 0.9rem var(--rand) 1.4rem;
  text-align: center;
  color: var(--meta-fest);
  font-size: 0.95rem;
  max-width: 48rem;
  margin-inline: auto;
}
.lichtbox__pfeil {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.lichtbox__pfeil--zurueck {
  left: 0.75rem;
}
.lichtbox__pfeil--vor {
  right: 0.75rem;
}
.lichtbox .icon-knopf {
  color: var(--kalk-fest);
  width: 48px;
  height: 48px;
}
.lichtbox .icon-knopf svg {
  width: 24px;
  height: 24px;
}

/* =====================================================================
   4 · ⭐ DIE LICHTDECKE — weiße Werkzeug-Karte auf --flaeche
   ===================================================================== */
.lichtdecke {
  background: var(--flaeche);
  padding: 10rem 0 0; /* 4 rem + 6 rem Überstand */
  position: relative;
  z-index: 1;
}
.lichtdecke__kopf {
  /* Augen-Tor 27.10.: linksbündig wie das Werkzeug darunter (Fragen + Hinweise stehen links) */
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.lichtdecke__kopf .h2 {
  max-width: 18ch;
}
.lichtdecke__kopf .lead {
  margin-top: 1.1rem;
  text-align: left;
}
.decke-huelle {
  margin-top: 3rem;
  filter: var(--schatten-kontakt); /* der EINE Kontaktschatten */
  position: relative;
  top: 0;
}
.decke {
  background: var(--karte);
  clip-path: var(--fase-poly);
  --fase: 14px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0;
}
.decke__fragen {
  padding: 2.75rem 2.75rem 2.5rem;
  border-right: 1px solid var(--linie);
  display: grid;
  gap: 2rem;
  align-content: start;
}
.frage {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.frage__titel {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
  color: var(--text);
}
.frage__nr {
  font-size: 0.8rem;
  font-family: var(--f-text);
  font-weight: 600;
  color: var(--leit);
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--leit);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 0;
  background: var(--eis);
  translate: 0 -0.1rem;
}
.frage__zusatz {
  font-family: var(--f-text);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--meta);
}
.frage__hinweis {
  margin-top: 0.7rem;
  font-size: 0.875rem;
  color: var(--meta);
  line-height: 1.45;
}
.frage__unter {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--linie);
}
.frage__untertitel {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  transition: transform 140ms var(--ease-aus);
}
.chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.chip > span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  background: var(--grund);
  box-shadow: inset 0 0 0 1px var(--linie);
  clip-path: var(--fase-poly);
  --fase: 6px;
  transition:
    background-color 240ms var(--ease-ein),
    box-shadow 240ms var(--ease-ein),
    color 240ms var(--ease-ein);
}
.chips--klein .chip > span {
  font-size: 0.9rem;
}
.chip input:checked + span {
  background: var(--eis);
  box-shadow: inset 0 0 0 1.5px var(--akzent-tief);
  font-weight: 600;
}
.chip input:focus-visible + span {
  outline: 2px solid var(--akzent-tief);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover > span {
    box-shadow: inset 0 0 0 1.5px var(--leit);
  }
}

.decke__ergebnis {
  padding: 2.5rem 2.75rem 2.5rem;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 2rem 2.75rem;
  align-items: start;
}
.decke__status {
  grid-column: 1 / -1;
  font-size: 0.95rem;
  color: var(--meta);
  min-height: 1.5em;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.decke__status::before {
  content: "";
  flex: none;
  width: 10px;
  height: 12px;
  background: var(--linie);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: background-color 240ms var(--ease-ein);
}
.decke.ist-an .decke__status::before {
  background: var(--akzent);
}

/* Wabenfeld — 7 Sechsecke (spitz oben), wie die LED-Decke der Halle */
.waben {
  --w: 8.6rem;
  --g: 0.4rem;
  --h: calc(var(--w) * 1.1547);
  --sx: calc(var(--w) + var(--g));
  --sy: calc(var(--h) * 0.75 + var(--g) * 0.866);
  position: relative;
  width: calc(2 * var(--sx) + var(--w));
  height: calc(2 * var(--sy) + var(--h));
  flex: none;
}
.zelle {
  position: absolute;
  left: calc(var(--x) * var(--sx));
  top: calc(var(--y) * var(--sy));
  width: var(--w);
  height: var(--h);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--linie); /* Kante aus */
  transition: background-color 240ms var(--ease-ein);
}
.zelle__innen {
  position: absolute;
  inset: 1.5px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--grund);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.15rem;
  padding: 0 0.6rem;
  color: var(--meta);
  transition:
    background-color 240ms var(--ease-ein),
    color 240ms var(--ease-ein);
}
.zelle b {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.zelle span {
  font-size: 0.875rem;
  line-height: 1.25;
  font-variant-numeric: proportional-nums;
}
.zelle.ist-an {
  background: var(--akzent);
}
.zelle.ist-an .zelle__innen {
  background: var(--eis);
  color: var(--text);
}
.zelle.ist-an .zelle__innen span {
  color: var(--text);
}
.zelle--mitte {
  background: var(--leit);
}
.zelle--mitte .zelle__innen {
  background: var(--leit);
  color: var(--kalk-fest);
}
.zelle--mitte b {
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  transition: opacity 200ms var(--ease-ein);
}
.zelle--mitte .zelle__klein {
  font-size: 0.8125rem;
  color: var(--meta-fest);
}
.zelle--mitte b {
  white-space: nowrap;
}
.zelle--mitte b.ist-lang {
  font-size: 1.2rem;
}
.zelle--mitte b.ist-weich {
  opacity: 0.2;
}
:root[data-theme="dark"] .zelle--mitte,
:root[data-theme="dark"] .zelle--mitte .zelle__innen {
  background: var(--akzent);
  color: var(--dunkel-fest);
}
:root[data-theme="dark"] .zelle--mitte .zelle__klein {
  color: var(--dunkel-fest);
}
@media (prefers-reduced-motion: no-preference) {
  .zelle.ist-an .zelle__innen {
    animation: wabe-zuenden 240ms var(--ease-ein);
  }
}
@keyframes wabe-zuenden {
  0% {
    filter: brightness(0.85);
  }
  60% {
    filter: brightness(1.04);
  }
  100% {
    filter: none;
  }
}

/* Ihr Rezept */
.rezept {
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.rezept__titel {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--text);
}
.rezept__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rezept__liste li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.97rem;
  line-height: 1.35;
}
.rezept__liste li span:last-child {
  white-space: nowrap;
  font-weight: 600;
}
.rezept__liste .rezept__leer,
.rezept__liste .rezept__auto {
  color: var(--meta);
  font-size: 0.9rem;
}
.rezept__auto::before {
  content: "+ ";
}
.rezept__summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.9rem 0 0.4rem;
  font-weight: 600;
}
.rezept__summe b {
  font-family: var(--f-display);
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  font-variant-numeric: proportional-nums;
}
.rezept__pangv {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--meta);
}
.rezept__aktion {
  margin-top: auto;
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
}

/* =====================================================================
   5 · LEISTUNGEN — Sticky-Bild links über die Kante (Bruch ②)
   ===================================================================== */
.leistungen {
  padding-top: 8rem;
  display: grid;
  grid-template-columns: min(27rem, 34vw) minmax(0, 1fr);
  gap: 0 clamp(3rem, 7vw, 7rem);
  overflow-x: clip;
  max-width: calc(
    var(--breite) + 2 * var(--rand) +
      (100vw - var(--breite) - 2 * var(--rand)) / 2
  );
}
.leistungen__medien {
  min-width: 0;
}
.leistungen__sticky {
  position: sticky;
  top: 6rem;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 36rem;
  overflow: hidden;
  background: var(--dunkel-fest);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--fase)),
    calc(100% - var(--fase)) 100%,
    0 100%
  );
}
.leistungen__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 420ms var(--ease-ein);
}
.leistungen__bild.ist-an {
  opacity: 1;
}
.leistungen__bild[data-bild-gruppe="1"] {
  object-position: 42% 50%;
}
.leistungen__bild[data-bild-gruppe="2"] {
  object-position: 58% 50%;
}
.leistungen__bild[data-bild-gruppe="3"] {
  object-position: 30% 50%;
}
.leistungen__text {
  min-width: 0;
  max-width: 50rem;
  padding-right: var(--rand);
}
.gruppe {
  margin-top: 3rem;
}
.gruppe__band {
  display: none;
  margin: 0;
}
.gruppe__titel {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--text);
}
.gruppe__nr {
  font-weight: 700;
  color: var(--leit);
  font-size: 0.95em;
  font-variant-numeric: proportional-nums;
}
.zeilen {
  list-style: none;
  margin: 0;
  padding: 0;
}
.zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.4rem;
  align-items: center;
  gap: 1rem;
  min-height: 3.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  color: var(--text);
  transition: transform 140ms var(--ease-aus);
}
.zeile__name {
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.3;
}
.zeile__preis {
  color: var(--meta);
  font-size: 0.97rem;
  white-space: nowrap;
}
.zeile__pfeil {
  width: 1.4rem;
  height: 1.4rem;
  justify-self: end;
  background: currentColor;
  color: var(--leit);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9M8.5 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E")
    center / 1rem no-repeat;
  transition: transform 200ms var(--ease-aus);
}
@media (hover: hover) and (pointer: fine) {
  .zeile:hover .zeile__name {
    color: var(--akzent-tief);
  }
  .zeile:hover .zeile__pfeil {
    transform: translateX(4px);
  }
}
.leistungen__fuss {
  margin-top: 2rem;
  display: grid;
  gap: 1.1rem;
}
.leistungen__ausserdem {
  color: var(--meta);
  line-height: 1.6;
  max-width: 44rem;
}
.leistungen__ausserdem b {
  color: var(--text);
}
.leistungen__ausserdem .textlink {
  margin-left: 0.3rem;
  min-height: 0;
}
.hinweislink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--flaeche);
  color: var(--text);
  text-decoration: none;
  clip-path: var(--fase-poly);
  max-width: 34rem;
  transition: background-color 200ms var(--ease-ein);
}
.hinweislink b {
  color: var(--leit);
}
.hinweislink svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  color: var(--leit);
  transition: transform 200ms var(--ease-aus);
}
@media (hover: hover) and (pointer: fine) {
  .hinweislink:hover {
    background: var(--eis);
  }
  .hinweislink:hover svg {
    transform: translateX(4px);
  }
}

/* =====================================================================
   6 · ABLAUF — 21:9-Band über die linke Kante (Bruch ③) + 3 Spalten
   ===================================================================== */
.ablauf {
  padding-top: 4rem;
  margin-top: 4rem;
  overflow-x: clip;
}
.ablauf__kopf {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  flex-wrap: wrap;
}
.ablauf__band {
  margin: 2.5rem 0 0;
  width: calc(
    100% - max(var(--rand), (100% - var(--breite)) / 2) -
      clamp(4rem, 14vw, 16rem)
  );
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--dunkel-fest);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--fase)),
    calc(100% - var(--fase)) 100%,
    0 100%
  );
}
.ablauf__band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.schritte {
  list-style: none;
  margin-top: 3rem;
  margin-bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(2rem, 4vw, 4rem);
}
.schritt {
  min-width: 0;
  border-top: 1px solid var(--linie);
  padding-top: 1.4rem;
}
.schritt__nr {
  display: block;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 2rem + 3vw, 5.2rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--leit);
  margin-bottom: 1rem;
  font-variant-numeric: proportional-nums;
}
.schritt__titel {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
}
.schritt p {
  color: var(--meta);
  max-width: 34ch;
}
.ablauf__alternativ {
  margin-top: 2.5rem;
}
.ablauf__alternativ span {
  display: inline-block;
  padding: 0.9rem 1.2rem;
  background: var(--flaeche);
  clip-path: var(--fase-poly);
  color: var(--text);
  font-size: 0.97rem;
}

/* =====================================================================
   7 · PARTNER — weiße Tafeln 76 px
   ===================================================================== */
.partner {
  padding-top: 4.5rem;
}
.partner__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 2.5rem;
  border-top: 1px solid var(--linie);
  margin-bottom: 1.5rem;
}
.marke--ohne {
  margin: 0;
}
.partner__h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  order: -1;
}
.partner__tafeln {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.75rem;
}
.partner__tafeln > li {
  min-width: 0;
}
.tafel {
  display: grid;
  place-items: center;
  height: 76px;
  padding: 0.75rem 1rem;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--linie);
  clip-path: var(--fase-poly);
  transition: box-shadow 200ms var(--ease-ein);
}
.tafel img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (hover: hover) and (pointer: fine) {
  .tafel:hover {
    box-shadow: inset 0 0 0 1.5px var(--akzent-tief);
  }
}

/* =====================================================================
   9 · BEWERTEN-AUFRUF — dunkle Karte mittig auf Bühne (Kap. 9)
   ===================================================================== */
.bewerten-aufruf {
  margin-top: 6rem;
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(26rem, 38vw, 34rem);
  padding: 4rem var(--rand);
  background: var(--dunkel-fest);
  overflow: hidden;
  --text: var(--kalk-fest);
  --meta: var(--meta-fest);
  color: var(--kalk-fest);
}
.bewerten-aufruf__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bewerten-karte {
  position: relative;
  width: min(34rem, 100%);
  padding: 2.6rem 2.25rem 2.4rem;
  background: rgba(7, 18, 28, 0.9);
  clip-path: var(--fase-poly);
  --fase: 14px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
}
.bewerten-karte__titel {
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kalk-fest);
}
.bewerten-karte__sterne {
  font-size: 2.6rem;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--akzent-fest);
}
.bewerten-karte__knopf {
  width: 100%;
  box-shadow: inset 0 0 0 1.5px #86b4da;
}

/* =====================================================================
   10 · MEHR IM HAUS — das EINE Card-Grid
   ===================================================================== */
.mehr {
  padding-top: 5rem;
}
.mehr__titel {
  display: block;
  margin-bottom: 1.5rem;
}
.mehr__karten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem clamp(1.25rem, 2.5vw, 2.5rem);
}
.mehr__karte {
  min-width: 0;
}
.mehr__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text);
}
.mehr__bild {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--dunkel-fest);
  clip-path: var(--fase-poly);
  margin-bottom: 0.75rem;
}
.mehr__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--ease-aus);
}
.mehr__h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.mehr__link p {
  color: var(--meta);
}
.mehr__link .textlink {
  margin-top: auto;
  min-height: 40px;
}
@media (hover: hover) and (pointer: fine) {
  .mehr__link:hover .mehr__bild img {
    transform: scale(1.03);
  }
  .mehr__link:hover .textlink {
    color: var(--akzent-tief);
  }
}
.mehr__pangv {
  margin-top: 1rem;
}

/* =====================================================================
   11 · ANFRAGE + KARTE — Karte über die rechte Kante (Bruch ④)
   ===================================================================== */
.anfrage {
  padding-top: 8rem;
  overflow-x: clip;
}
.anfrage__raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  padding-left: max(var(--rand), (100% - var(--breite)) / 2);
}
.anfrage__formular-spalte {
  min-width: 0;
  max-width: 40rem;
}
.person {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.6rem 0 1.2rem;
}
.person__wabe {
  flex: none;
  width: 3.6rem;
  height: 4.15rem;
  display: grid;
  place-items: center;
  background: var(--leit);
  color: var(--kalk-fest);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
:root[data-theme="dark"] .person__wabe {
  background: var(--akzent);
  color: var(--dunkel-fest);
}
.person p {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.person b {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.15rem;
}
.person span {
  color: var(--meta);
  font-size: 0.95rem;
}
.anfrage__intro {
  color: var(--text);
  max-width: 36rem;
}
.anfrage__direkt {
  margin-top: 0.6rem;
  color: var(--meta);
  font-size: 0.95rem;
}
.anfrage__direkt a {
  color: var(--leit);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Formular */
.formular {
  margin-top: 2rem;
}
.formular__pflicht {
  font-size: 0.85rem;
  color: var(--meta);
  margin-bottom: 1rem;
}
.formular__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.25rem;
}
.feld {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
}
.feld--breit {
  grid-column: 1 / -1;
}
.feld label,
.feld legend {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0;
}
.feld__zusatz {
  font-weight: 400;
  color: var(--meta);
}
.feld input,
.feld select,
.feld textarea {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0.75rem 0.9rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 0;
  appearance: none;
  transition:
    border-color 200ms var(--ease-ein),
    box-shadow 200ms var(--ease-ein);
}
.feld select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%23405263' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 0.75rem;
  padding-right: 2.4rem;
}
.feld textarea {
  min-height: 7.5rem;
  resize: vertical;
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--akzent-tief);
  box-shadow: inset 0 0 0 1px var(--akzent-tief);
}
.feld [aria-invalid="true"] {
  border-color: var(--fehler);
}
.feld--wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}
.feld--wahl legend {
  margin-bottom: 0.4rem;
  width: 100%;
}
.wahl {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  cursor: pointer;
}
.wahl input,
.einwilligung input {
  appearance: auto;
  width: 1.2rem;
  height: 1.2rem;
  min-height: 0;
  margin: 0;
  accent-color: var(--akzent-tief);
  flex: none;
}
.feld--falle {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.einwilligung {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--meta);
  cursor: pointer;
}
.einwilligung input {
  margin-top: 0.15rem;
}
.einwilligung a {
  color: var(--leit);
}
.formular__knopf {
  margin-top: 1.4rem;
}
.formular__zusage {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: var(--meta);
}
.formular__meldung {
  margin-top: 0.8rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--fehler);
  background: var(--flaeche);
  color: var(--text);
  font-size: 0.95rem;
}
.formular[aria-busy="true"] .formular__knopf {
  opacity: 0.6;
  pointer-events: none;
}

/* Karte (Variante B hell: Graustufen + pulsierender Logo-Pin) */
.anfrage__karte-spalte {
  min-width: 0;
}
.karte {
  position: sticky;
  top: 6rem;
  height: min(44rem, calc(100svh - 8rem));
  min-height: 30rem;
  background: var(--flaeche);
  overflow: hidden;
  clip-path: polygon(var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase));
}
.karte__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(0.92) brightness(1.04);
}
:root[data-theme="dark"] .karte__iframe {
  filter: grayscale(1) invert(0.9) hue-rotate(180deg) contrast(0.85);
}
.karte__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #ffffff;
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 6px rgba(17, 179, 216, 0.28),
    0 12px 30px -8px rgba(7, 18, 28, 0.5);
  z-index: 2;
}
.karte__pin img {
  width: 46px;
  height: auto;
}
.karte__pin::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--akzent);
}
@media (prefers-reduced-motion: no-preference) {
  .karte__pin::after {
    animation: puls 2.4s var(--ease-aus) infinite;
  }
}
@keyframes puls {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(1.9);
    opacity: 0;
  }
}
.karte__adresse {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 2;
  background: var(--karte);
  padding: 1.25rem 1.4rem 1.35rem;
  clip-path: var(--fase-poly);
  display: grid;
  gap: 0.25rem;
  min-width: 15rem;
  filter: none;
}
.karte__strasse {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.3;
}
.karte__zeit {
  color: var(--meta);
  font-size: 0.95rem;
  margin-bottom: 0.7rem;
}

/* =====================================================================
   12 · FUSS — Navy, themenfest
   ===================================================================== */
.fuss {
  margin-top: 3rem;
  background: var(--leit-fest);
  color: var(--kalk-fest);
  --text: var(--kalk-fest);
  --meta: var(--meta-fest);
  --linie: rgba(243, 247, 250, 0.18);
  padding: 4.5rem 0 5.5rem; /* unten 5 rem Polster für die fixen Knöpfe */
  font-size: 0.97rem;
}
.fuss a {
  color: var(--kalk-fest);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .fuss a:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
}
.fuss__innen {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(1.5rem, 3vw, 3rem);
}
.fuss__logo img {
  height: 64px;
  width: auto;
}
.fuss__kurz {
  margin-top: 1.1rem;
  max-width: 24rem;
  color: var(--kalk-fest);
}
.fuss__nap {
  font-style: normal;
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  color: var(--meta-fest);
  line-height: 1.7;
}
.fuss__nap a {
  color: var(--kalk-fest);
}
.fuss__zeiten {
  margin-top: 1rem;
  color: var(--meta-fest);
  line-height: 1.6;
}
.fuss__zeiten b {
  color: var(--kalk-fest);
  font-weight: 600;
}
.fuss__social {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.75rem;
  margin-left: -0.65rem;
}
.fuss__social .icon-knopf:hover {
  color: var(--akzent-fest);
}
.fuss__titel {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta-fest);
  margin-bottom: 0.9rem;
}
.fuss__spalte ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.1rem;
}
.fuss__spalte a {
  display: inline-block;
  padding: 0.2rem 0;
}
.fuss__partner {
  margin-top: 3rem;
}
.fuss__partner p {
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
  color: var(--meta-fest);
  font-size: 0.9rem;
  line-height: 1.7;
}
.fuss__partner span {
  color: var(--kalk-fest);
  font-weight: 600;
}
.fuss__unten {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  font-size: 0.9rem;
}
.fuss__unten::before {
  content: "";
  position: absolute;
}
.fuss__recht {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.4rem;
}
.fuss__recht a,
.fuss__recht button {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font: inherit;
  color: var(--kalk-fest);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.fuss__recht button:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.fuss__copy {
  color: var(--meta-fest);
  margin-left: auto;
}
.fuss__signatur a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  font-weight: 600;
  color: var(--kalk-fest);
}
.fuss__signatur a::before {
  content: "";
  width: 9px;
  height: 10px;
  background: var(--akzent-fest);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.fuss__uebersetzer:empty {
  display: none;
}

/* Einwilligung (Übersetzer, 2-Klick) */
.einwilligung-dialog {
  border: 0;
  padding: 0;
  max-width: min(34rem, calc(100vw - 2rem));
  background: transparent;
  color: var(--text);
}
.einwilligung-dialog::backdrop {
  background: rgba(7, 18, 28, 0.55);
}
.einwilligung-dialog__karte {
  background: var(--karte);
  clip-path: var(--fase-poly);
  --fase: 12px;
  padding: 1.75rem 1.75rem 1.5rem;
  display: grid;
  gap: 0.9rem;
}
.einwilligung-dialog__titel {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.3rem;
}
.einwilligung-dialog a {
  color: var(--leit);
}
.einwilligung-dialog__stand {
  font-size: 0.875rem;
  color: var(--meta);
}
.einwilligung-dialog__stand:empty {
  display: none;
}
.einwilligung-dialog__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.4rem;
}

/* fixe Knöpfe: nie über dem Kopf-CTA (haut.js) — hier nur Abstand zum Empfang */
.fixknoepfe {
  right: max(1rem, env(safe-area-inset-right));
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 70rem) {
  .decke {
    grid-template-columns: minmax(0, 1fr);
  }
  .decke__fragen {
    border-right: 0;
    border-bottom: 1px solid var(--linie);
  }
  .fuss__innen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .fuss__marke {
    grid-column: 1 / -1;
  }
  .partner__tafeln {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 56.24rem) {
  .kontaktleiste__zellen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 0;
  }
  .kontaktleiste__zellen > li {
    border-left: 0;
    border-top: 1px solid var(--linie);
  }
  .kontaktleiste__zellen > li:nth-child(-n + 2) {
    border-top: 0;
  }
  .kontaktleiste__zellen > li:nth-child(2n) {
    border-left: 1px solid var(--linie);
  }
  .kontaktleiste__zelle,
  .kontaktleiste__zellen > li:first-child .kontaktleiste__zelle {
    padding: 0.95rem var(--rand);
  }
  .kontaktleiste__wert {
    font-size: 0.98rem;
  }

  .fakten__reihe {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fakt,
  .fakt:first-child {
    padding: 1.6rem 0 1.5rem;
    border-left: 0;
  }
  .fakt:nth-child(2n) {
    padding-left: 1.25rem;
    border-left: 1px solid var(--linie);
  }
  .fakt:nth-child(n + 3) {
    border-top: 1px solid var(--linie);
  }
  .fakt__label {
    font-size: 0.9rem;
  }
  .fakten__fuss {
    margin-top: 0;
  }

  .halle {
    padding-top: 4rem;
  }
  .halle__streifen-huelle {
    margin-top: 2rem;
    max-width: 100vw;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-bottom: -3.5rem;
    position: relative;
  }
  .halle__streifen-huelle::-webkit-scrollbar {
    display: none;
  }
  .halle__streifen {
    justify-content: flex-start;
    width: max-content;
    max-width: none;
    margin: 0;
    padding: 0 var(--rand);
    margin-bottom: 0;
    gap: 0.75rem;
  }
  .halle__foto,
  .halle__foto--a,
  .halle__foto--b,
  .halle__foto--mitte {
    flex: none;
    width: 58vw;
    max-width: 16rem;
    scroll-snap-align: center;
  }
  .halle__foto--b {
    margin-top: 1.5rem;
  }
  .halle__foto--mitte {
    margin-top: 3rem;
    width: 66vw;
    max-width: 18rem;
  }
  .lichtdecke {
    padding-top: 6rem;
  }
  .lichtbox__buehne {
    padding: 0 0.5rem;
  }
  .lichtbox__pfeil {
    top: auto;
    bottom: -3.4rem;
    translate: none;
  }

  .decke-huelle {
    margin-top: 2rem;
    margin-inline: calc(-1 * var(--rand));
  }
  .decke {
    --fase: 10px;
  }
  .decke__fragen {
    padding: 1.75rem var(--rand) 1.75rem;
    gap: 1.6rem;
  }
  .decke__ergebnis {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.5rem var(--rand) 2rem;
    justify-items: center;
    gap: 1.5rem;
  }
  .decke__status {
    justify-self: stretch;
  }
  .rezept {
    width: 100%;
  }
  .waben {
    --w: 104px;
    --g: 5px;
  }
  .zelle b {
    font-size: 0.875rem;
  }
  .zelle span {
    font-size: 0.8125rem;
  }
  .zelle--mitte b {
    font-size: 1.15rem;
  }
  .zelle--mitte b.ist-lang {
    font-size: 0.98rem;
  }
  .zelle__innen {
    padding: 0 0.3rem;
  }

  .leistungen {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 5rem;
    max-width: none;
  }
  .leistungen__medien {
    display: none;
  }
  .leistungen__text {
    padding-inline: var(--rand);
    max-width: none;
  }
  .gruppe {
    margin-top: 2.5rem;
  }
  .gruppe__band {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin-bottom: 1.2rem;
    margin-right: calc(-1 * var(--rand));
    background: var(--dunkel-fest);
    clip-path: polygon(var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase));
  }
  .gruppe__band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .zeile {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.9rem;
  }
  .zeile__pfeil {
    display: none;
  }
  .zeile__name {
    font-size: 1rem;
  }
  .zeile__preis {
    font-size: 0.9rem;
  }

  .ablauf {
    padding-top: 3rem;
    margin-top: 3rem;
  }
  .ablauf__band {
    margin-top: 1.75rem;
    width: auto;
    margin-left: var(--rand);
    aspect-ratio: 16 / 9;
    clip-path: polygon(var(--fase) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase));
  }
  .schritte {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 2rem;
    gap: 1.75rem;
  }
  .schritt {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    column-gap: 1rem;
  }
  .schritt__nr {
    grid-row: 1 / span 2;
    font-size: 3.2rem;
    margin: 0;
  }
  .ablauf__alternativ {
    margin-top: 1.75rem;
  }

  .partner {
    padding-top: 3rem;
  }
  .partner__kopf {
    padding-top: 2rem;
  }
  .partner__tafeln {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
  }
  .partner__tafeln > li:last-child {
    grid-column: 1 / -1;
  }

  .bewerten-aufruf {
    margin-top: 4rem;
    min-height: 26rem;
    padding-block: 3rem;
  }
  .bewerten-karte {
    padding: 2rem 1.4rem 1.8rem;
  }
  .bewerten-karte__sterne {
    font-size: 2.2rem;
  }

  .mehr {
    padding-top: 3rem;
  }
  .mehr__karten {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.25rem;
  }

  .anfrage {
    padding-top: 5rem;
  }
  .anfrage__raster {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
  }
  .anfrage__formular-spalte {
    padding-inline: var(--rand);
    max-width: none;
  }
  .anfrage__karte-spalte {
    padding-left: var(--rand);
  }
  .karte {
    position: relative;
    top: 0;
    height: 26rem;
    min-height: 0;
  }
  .karte__adresse {
    left: 1rem;
    bottom: 1rem;
    right: 1rem;
    min-width: 0;
  }

  .fuss {
    margin-top: 2rem;
    padding: 3rem 0 6rem;
  }
  .fuss__innen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fuss__spalte:first-of-type {
    grid-column: 1 / -1;
  }
  .fuss__spalte:first-of-type ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  .fuss__copy {
    margin-left: 0;
  }
}

@media (max-width: 30rem) {
  .formular__raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .rezept__aktion .knopf {
    width: 100%;
  }
  .formular__knopf {
    width: 100%;
  }
}

/* =====================================================================
   EMPFANG (Bot ohne KI) — unten links, eigene Ecke neben den fixen Knöpfen
   ===================================================================== */
.empfang {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 85;
  transition:
    opacity 240ms var(--ease-ein),
    transform 260ms var(--ease-ein);
}
.empfang.ist-versteckt:not(.ist-offen) {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  visibility: hidden;
}
.empfang__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.7rem 1.1rem 0.7rem 0.9rem;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--text);
  background: var(--karte);
  box-shadow:
    inset 0 0 0 1.5px var(--akzent-tief),
    0 8px 22px rgba(7, 18, 28, 0.16);
  clip-path: var(--fase-poly);
  transition: transform 140ms var(--ease-aus);
}
.empfang__knopf:active {
  transform: scale(0.97);
}
.empfang__wabe {
  width: 14px;
  height: 16px;
  background: var(--akzent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.empfang__fenster {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.6rem);
  width: min(24rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100svh - 7rem));
  display: flex;
  flex-direction: column;
  background: var(--karte);
  color: var(--text);
  clip-path: var(--fase-poly);
  --fase: 12px;
  filter: drop-shadow(0 18px 28px rgba(7, 18, 28, 0.22));
  transform-origin: bottom left;
}
.empfang__fenster[hidden] {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .empfang__fenster:not([hidden]) {
    animation: empfang-auf 220ms var(--ease-aus);
  }
}
@keyframes empfang-auf {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}
.empfang__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0.6rem 0.75rem 1.1rem;
  border-bottom: 1px solid var(--linie);
  border-top: 2px solid var(--akzent);
}
.empfang__kopf p {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.empfang__kopf b {
  font-family: var(--f-display);
}
.empfang__kopf span {
  font-size: 0.85rem;
  color: var(--meta);
}
.empfang__verlauf {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 8rem;
}
.empfang__blase {
  max-width: 88%;
  padding: 0.65rem 0.85rem;
  font-size: 0.94rem;
  line-height: 1.45;
  background: var(--flaeche);
  clip-path: var(--fase-poly);
  --fase: 6px;
}
.empfang__blase--gast {
  align-self: flex-end;
  background: var(--eis);
}
.empfang__blase a {
  color: var(--leit);
  font-weight: 600;
}
.empfang__vorschlaege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.4rem 1.1rem 0.6rem;
}
.empfang__vorschlag {
  font: inherit;
  font-size: 0.85rem;
  min-height: 36px;
  padding: 0.35rem 0.7rem;
  color: var(--text);
  background: var(--grund);
  border: 1px solid var(--linie);
  cursor: pointer;
}
.empfang__vorschlag:hover {
  border-color: var(--akzent-tief);
}
.empfang__eingabe {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  border-top: 1px solid var(--linie);
}
.empfang__eingabe input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--grund);
  border: 1px solid var(--linie);
  border-radius: 0;
}
.empfang__eingabe .knopf {
  min-height: 46px;
  padding: 0.6rem 1rem;
}
.empfang__fuss {
  padding: 0 1.1rem 0.9rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--meta);
}
@media (max-width: 30rem) {
  .empfang__knopf {
    padding: 0.7rem 0.85rem;
  }
  .empfang__knopf {
    gap: 0.45rem;
    font-size: 0.94rem;
  }
}

/* =====================================================================
   SEHEN-LOOP 1 (Startseite 1440/390) — Verdichtung auf Seitenlänge + Korrekturen
   ===================================================================== */
.textlink {
  white-space: nowrap;
}
.person .person__wabe {
  color: var(--kalk-fest);
  font-size: 1.05rem;
}
:root[data-theme="dark"] .person .person__wabe {
  color: var(--dunkel-fest);
}
/* Lichtdecke: Ergebnis-Spalte breiter, Waben mittig, Status oben */
@media (min-width: 70.01rem) {
  .decke {
    grid-template-columns: minmax(0, 4.3fr) minmax(0, 7.7fr);
  }
  .decke__fragen {
    padding: 2.25rem 2.25rem 2.25rem;
    gap: 1.6rem;
  }
  .decke__ergebnis {
    grid-template-rows: auto 1fr;
    padding: 2.25rem 2.5rem 2.25rem;
    gap: 1.25rem 2.5rem;
  }
}
.decke__ergebnis > .waben {
  align-self: center;
}
@media (min-width: 56.25rem) {
  .waben {
    --w: 8.1rem;
  }
}
/* Leistungen: Zeilen je Gruppe zweispaltig (PC) */
@media (min-width: 56.25rem) {
  .zeilen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.25rem;
  }
  .zeile {
    min-height: 3.15rem;
    padding: 0.4rem 0;
    gap: 0.75rem;
  }
  .zeile__name {
    font-size: 1.02rem;
  }
  .zeile__preis {
    font-size: 0.92rem;
  }
  .gruppe {
    margin-top: 2.25rem;
  }
  .leistungen__fuss {
    margin-top: 1.6rem;
    gap: 0.9rem;
  }
  .ablauf__band {
    width: min(68vw, 62rem);
  }
  .bewerten-aufruf {
    min-height: clamp(22rem, 30vw, 27rem);
  }
  .fakt {
    padding-block: 2rem 1.9rem;
  }
  .halle__foto--mitte {
    flex-basis: 20rem;
  }
  .halle__streifen-huelle {
    margin-top: 2.75rem;
  }
  .formular__raster {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .formular__raster > .feld {
    grid-column: span 3;
  }
  .formular__raster > .feld--breit {
    grid-column: 1 / -1;
  }
  .formular__raster > .feld--drittel {
    grid-column: span 2;
  }
  .feld--wahl {
    flex-direction: row;
    align-items: center;
  }
  .feld--wahl legend {
    float: left;
    width: auto;
    margin: 0 1rem 0 0;
  }
  .person {
    margin: 1.25rem 0 1rem;
  }
  .formular {
    margin-top: 1.5rem;
  }
  .fuss {
    padding-top: 3.5rem;
  }
  .fuss__innen {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  }
  .fuss__spalte:first-of-type ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }
  .fuss__partner {
    margin-top: 2.25rem;
  }
}
.feld textarea {
  min-height: 6rem;
}
/* Ablauf: Kopf rechts neben dem 21:9-Band (nutzt die freie Fläche, Band bleibt links angeschnitten) */
.ablauf__buehne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.ablauf__buehne .ablauf__kopf {
  order: -1;
  padding-inline: var(--rand);
}
.schritt__nr {
  font-size: clamp(3rem, 1.8rem + 2.6vw, 4.4rem);
  margin-bottom: 0.7rem;
}
@media (min-width: 56.25rem) {
  .ablauf__buehne {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    align-items: end;
    gap: 0 clamp(2rem, 4vw, 4rem);
    padding-right: max(var(--rand), (100% - var(--breite)) / 2);
  }
  .ablauf__buehne .ablauf__kopf {
    order: 0;
    padding: 0 0 0.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .ablauf__buehne .ablauf__band {
    width: auto;
    margin-top: 0;
  }
  .ablauf__buehne .h2 {
    font-size: clamp(2rem, 1.2rem + 1.9vw, 2.9rem);
  }
  .schritte {
    margin-top: 2.5rem;
  }
}
.partner__kopf {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.partner__h2 {
  order: 0;
}
@media (max-width: 56.24rem) {
  .zeile {
    min-height: 3rem;
    padding: 0.35rem 0;
  }
  .mehr__karten {
    gap: 1.5rem;
  }
  .mehr__link {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 1rem;
    row-gap: 0.3rem;
  }
  .mehr__bild {
    grid-row: 1 / span 3;
    margin: 0;
    aspect-ratio: 4 / 3;
    align-self: start;
  }
  .mehr__link p {
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .mehr__link .textlink {
    grid-column: 2;
    min-height: 36px;
  }
  .mehr__h3 {
    font-size: 1.1rem;
  }
}

/* =====================================================================
   UNTERSEITEN — Pfad · Bühnen-Kopf · Inhalt + Preiskarte · Kontakt-Band
   ===================================================================== */
.pfad {
  padding-block: 0.85rem;
}
.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  font-size: 0.875rem;
  color: var(--meta);
}
.breadcrumb li + li::before {
  content: "\203A";
  margin-right: 0.5rem;
  color: var(--meta);
}
.breadcrumb a {
  color: var(--leit);
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb [aria-current] {
  color: var(--text);
  font-weight: 600;
}

/* Bühnen-Kopf: Bild vollflächig, Text unten links auf Eck-Verlauf (themenfest) */
.seitenkopf {
  position: relative;
  background: var(--dunkel-fest);
  color: var(--kalk-fest);
  --text: var(--kalk-fest);
  --meta: var(--meta-fest);
  isolation: isolate;
  overflow: clip;
}
.seitenkopf__medium {
  position: relative;
  overflow: hidden;
  background: var(--dunkel-fest);
}
.seitenkopf .buehne {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.seitenkopf__gruppe {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta-fest);
  margin-bottom: 0.9rem;
}
.seitenkopf__h1 {
  margin: 0;
}
.seitenkopf__z1 {
  display: block;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-z1);
  line-height: 1.3;
  color: var(--meta-fest);
  margin-bottom: 0.55rem;
  text-wrap: balance;
}
.seitenkopf__pointe {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-pointe);
  line-height: 1.04;
  letter-spacing: -0.025em;
  word-spacing: 0.04em;
  color: var(--kalk-fest);
  max-width: 18ch;
  text-wrap: balance;
}
.seitenkopf__pointe em {
  font-style: normal;
  color: var(--akzent-fest);
}
.seitenkopf__satz {
  margin-top: 1rem;
  max-width: 32rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--kalk-fest);
}
.seitenkopf__aktion {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.seitenkopf .textlink {
  color: var(--kalk-fest);
}
@media (min-width: 56.25rem) {
  .seitenkopf {
    height: clamp(26rem, 42vw, 38rem);
  }
  .seitenkopf__medium {
    position: absolute;
    inset: 0;
  }
  .seitenkopf__text {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: clamp(2.25rem, 5vh, 3.5rem);
  }
  .seitenkopf__block {
    position: relative;
    width: fit-content;
    max-width: 38rem;
  }
  .seitenkopf__block::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -60% -50% -45% -40%;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(7, 18, 28, 0.9) 0%, rgba(7, 18, 28, 0.86) 52%, rgba(7, 18, 28, 0.62) 72%, rgba(7, 18, 28, 0.28) 87%, rgba(7, 18, 28, 0) 100%);
  }
  .seitenkopf__h1,
  .seitenkopf__satz {
    text-shadow: 0 2px 20px rgba(7, 18, 28, 0.55);
  }
}
@media (max-width: 56.24rem) {
  .seitenkopf__medium {
    aspect-ratio: 16 / 10;
  }
  .seitenkopf__text {
    padding-block: 1.6rem 2rem;
  }
  .seitenkopf__pointe {
    font-size: min(2.1rem, 8.4vw);
    max-width: none;
  }
  .seitenkopf__satz {
    font-size: 1.02rem;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js .seitenkopf .buehne {
    animation: einschalten-bild var(--dauer-ein) var(--ease-ein) both 80ms;
  }
  .js .seitenkopf__block > * {
    animation: zeile-ein var(--dauer-zeile) var(--ease-ein) both;
  }
  .js .seitenkopf__block > :nth-child(2) {
    animation-delay: 70ms;
  }
  .js .seitenkopf__block > :nth-child(3) {
    animation-delay: 140ms;
  }
  .js .seitenkopf__block > :nth-child(4) {
    animation-delay: 210ms;
  }
}

/* Inhalt + Preiskarte */
.seite {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding-top: 3rem;
}
.seite__haupt {
  min-width: 0;
  max-width: 48rem;
}
.seite__rand {
  min-width: 0;
}
@media (min-width: 64rem) {
  .seite {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 0 clamp(3rem, 6vw, 6rem);
    padding-top: 4.5rem;
  }
  .seite__rand {
    grid-column: 2;
    grid-row: 1;
  }
  .seite__haupt {
    grid-column: 1;
    grid-row: 1;
  }
  .preiskarte {
    position: sticky;
    top: 6.5rem;
  }
}
.preiskarte {
  background: var(--karte);
  box-shadow: inset 0 0 0 1px var(--linie);
  clip-path: var(--fase-poly);
  --fase: 12px;
  padding: 1.6rem 1.6rem 1.4rem;
  display: grid;
  gap: 0.55rem;
  justify-items: start;
}
.preiskarte__titel {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
}
.preiskarte__preis {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--leit);
  font-variant-numeric: proportional-nums;
  text-wrap: balance; /* „ab 15 €“ / „pro Rad“ — nie ein Waisenwort (#46) */
}
.preiskarte__hinweis {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--meta);
}
.preiskarte__knopf {
  width: 100%;
  margin-top: 0.4rem;
}
.preiskarte__direkt {
  font-size: 0.92rem;
  color: var(--meta);
}
.preiskarte__direkt a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.preiskarte__direkt a:hover {
  color: var(--akzent-tief);
}

/* Inhalts-Typo */
.unterseite .antwort p {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text);
  max-width: 44rem;
}
.unterseite .antwort {
  padding-left: 1.25rem;
  border-left: 3px solid var(--akzent);
}
.seite__haupt > section + section {
  margin-top: 3.5rem;
}
.seite__haupt h2 {
  font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  word-spacing: 0.06em;
  margin-bottom: 1rem;
  text-wrap: balance;
}
.seite__haupt h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}
.seite__haupt p {
  max-width: 66ch;
}
.seite__haupt p + p {
  margin-top: 0.9rem;
}
.seite__haupt a:not(.knopf):not(.textlink) {
  color: var(--leit);
  font-weight: 600;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}
.seite__haupt .pangv {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  color: var(--meta);
}
.liste {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 44rem;
}
.liste > li {
  position: relative;
  padding: 0.85rem 0 0.85rem 2.6rem;
  border-bottom: 1px solid var(--linie);
  line-height: 1.55;
}
.liste > li:first-child {
  border-top: 1px solid var(--linie);
}
ul.liste > li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 1.2rem;
  width: 10px;
  height: 12px;
  background: var(--akzent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
ol.liste {
  counter-reset: schritt;
}
ol.liste > li {
  counter-increment: schritt;
}
ol.liste > li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0.62rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.2;
  color: var(--leit);
  font-variant-numeric: proportional-nums;
}
.tabelle {
  width: 100%;
  max-width: 44rem;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.98rem;
}
.tabelle th {
  text-align: left;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta);
  padding: 0 1rem 0.6rem 0;
  border-bottom: 2px solid var(--text);
}
.tabelle td {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
.tabelle td:last-child,
.tabelle th:last-child {
  padding-right: 0;
}
.tabelle td:last-child {
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 30rem) {
  .tabelle {
    font-size: 0.92rem;
  }
  .tabelle td:last-child {
    white-space: normal;
  }
}

/* FAQ (details) */
.faq-mini details,
details.faq {
  border-bottom: 1px solid var(--linie);
}
.faq-mini details:first-of-type,
details.faq:first-of-type {
  border-top: 1px solid var(--linie);
}
.faq-mini summary,
details.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.8rem 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq-mini summary::-webkit-details-marker,
details.faq summary::-webkit-details-marker {
  display: none;
}
.faq-mini summary::after,
details.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--leit), var(--leit)) center / 100% 2px no-repeat,
    linear-gradient(var(--leit), var(--leit)) center / 2px 100% no-repeat;
  transition: transform 220ms var(--ease-aus);
}
.faq-mini details[open] summary::after,
details.faq[open] summary::after {
  transform: rotate(45deg);
}
.faq-mini details p,
details.faq p {
  padding: 0 0 1.1rem;
  color: var(--meta);
  max-width: 62ch;
}

/* Passt dazu */
.passt-dazu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.seite__haupt .verwandt a {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  height: 100%;
  padding: 1.15rem 1.25rem 1.2rem;
  background: var(--flaeche);
  clip-path: var(--fase-poly);
  text-decoration: none;
  color: var(--text);
  font-weight: 400;
  transition: background-color 200ms var(--ease-ein);
}
.verwandt strong {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.12rem;
}
.verwandt .preis {
  color: var(--leit);
  font-weight: 600;
  font-size: 0.95rem;
}
.verwandt .satz {
  color: var(--meta);
  font-size: 0.95rem;
  line-height: 1.5;
}
@media (hover: hover) and (pointer: fine) {
  .seite__haupt .verwandt a:hover {
    background: var(--eis);
  }
}
@media (max-width: 40rem) {
  .passt-dazu ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Abschluss */
.abschluss {
  padding-top: 2.5rem;
  border-top: 2px solid var(--text);
}
.seite__haupt .abschluss__aktion {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.abschluss__links {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}
.abschluss__links a::after {
  content: " \2192";
}
.abschluss__wege {
  color: var(--meta);
}

/* Kontakt-Band (alle Unterseiten, vor dem Fuß) */
.band-kontakt {
  margin-top: 5rem;
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
}
.band-kontakt__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  padding-block: 2.25rem;
}
.band-kontakt__person {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
}
.band-kontakt .person__wabe {
  flex: none;
  width: 3.6rem;
  height: 4.15rem;
  display: grid;
  place-items: center;
  background: var(--leit);
  color: var(--kalk-fest);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.05rem;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
:root[data-theme="dark"] .band-kontakt .person__wabe {
  background: var(--akzent);
  color: var(--dunkel-fest);
}
.band-kontakt__h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.band-kontakt__text {
  margin-top: 0.3rem;
  color: var(--meta);
  font-size: 0.95rem;
}
.band-kontakt__wege {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
.band-kontakt__weg {
  display: grid;
  text-decoration: none;
  color: var(--text);
}
.band-kontakt__weg b {
  font-weight: 600;
  font-size: 1.08rem;
}
@media (hover: hover) and (pointer: fine) {
  .band-kontakt__weg:hover b {
    color: var(--akzent-tief);
  }
}
.band-kontakt + .fuss {
  margin-top: 0;
}
@media (max-width: 56.24rem) {
  .band-kontakt {
    margin-top: 3.5rem;
  }
  .band-kontakt__wege {
    width: 100%;
    gap: 1rem 1.5rem;
  }
  .band-kontakt__wege li:last-child {
    width: 100%;
  }
  .band-kontakt__wege .knopf {
    width: 100%;
  }
}

/* =====================================================================
   8 · BEWERTUNGEN — Laufband nach rechts (GESETZ Kap. 9), ~90 px/s
   ===================================================================== */
.stimmen {
  padding-top: 6rem;
  overflow-x: clip;
}
.stimmen + .bewerten-aufruf {
  margin-top: 3rem;
}
.stimmen__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-bottom: 1.75rem;
}
.stimmen__h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.stimmen__schnitt {
  font-size: 1.5em;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.stimmen__stern {
  color: var(--akzent);
  font-size: 1.1em;
}
.stimmen__zeile {
  font-weight: 600;
  color: var(--text);
}
.laufband {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.laufband__spur {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  display: flex;
  gap: 1rem;
  width: max-content;
}
.laufband.ist-bereit .laufband__spur {
  animation: laufband-rechts var(--laufband-dauer, 40s) linear infinite;
}
.laufband:hover .laufband__spur,
.laufband:focus-within .laufband__spur {
  animation-play-state: paused;
}
@keyframes laufband-rechts {
  from {
    transform: translate3d(calc(-50% - 0.5rem), 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.stimme {
  flex: none;
  width: 19rem;
  padding: 1.25rem 1.35rem 1.2rem;
  background: var(--karte);
  box-shadow: inset 0 0 0 1px var(--linie);
  clip-path: var(--fase-poly);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.stimme__sterne {
  color: var(--akzent-tief);
  letter-spacing: 0.12em;
  font-size: 1rem;
  line-height: 1;
}
.stimme__text {
  margin: 0;
  flex: 1;
}
.stimme__text p {
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text);
}
.stimme__wer {
  font-size: 0.85rem;
  color: var(--meta);
}
.stimme__wer b {
  color: var(--text);
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .laufband {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .laufband__spur {
    width: auto;
    flex-wrap: wrap;
    padding-inline: var(--rand);
    max-width: calc(var(--breite) + 2 * var(--rand));
    margin-inline: auto;
  }
  .laufband__spur [aria-hidden="true"] {
    display: none;
  }
}
@media (max-width: 56.24rem) {
  .stimmen {
    padding-top: 4rem;
  }
  .stimme {
    width: 16.5rem;
  }
}
/* Augen-Tor 27.10.: steht die Spur still (reduced motion), füllen die Karten die Zeile —
   kein leerer Streifen rechts neben schmalen Karten (360–414 px). */
@media (prefers-reduced-motion: reduce) {
  .laufband.ist-bereit .laufband__spur {
    animation: none;
    transform: none;
  }
  .laufband__spur .stimme {
    flex: 1 1 16.5rem;
    width: auto;
  }
}
@media (max-width: 56.24rem) {
  .stimmen + .bewerten-aufruf {
    margin-top: 2.5rem;
  }
}

/* =====================================================================
   KRATZER-CHECK (aufbereitung-schadenzone) + Gutschein-Formular
   ===================================================================== */
.kc {
  margin-top: 1.5rem;
  padding: 1.75rem;
  background: var(--karte);
  box-shadow: inset 0 0 0 1px var(--linie);
  clip-path: var(--fase-poly);
  --fase: 12px;
}
.kc__oben {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: 1.5rem 2rem;
  align-items: start;
}
.kc__wahl {
  display: grid;
  gap: 1.5rem;
}
.kc-auto {
  width: 100%;
  height: auto;
}
.kc-auto .kc-zone,
.kc-auto .kc-raeder rect {
  fill: var(--flaeche);
  stroke: var(--linie);
  stroke-width: 1.5;
  cursor: pointer;
  transition:
    fill 240ms var(--ease-ein),
    stroke 240ms var(--ease-ein);
}
.kc-auto .kc-glas {
  fill: var(--linie);
  opacity: 0.55;
  pointer-events: none;
}
.kc-auto text {
  font-family: var(--f-text);
  font-size: 13px;
  font-weight: 600;
  fill: var(--meta);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .kc-auto .kc-zone:hover,
  .kc-auto .kc-raeder:hover rect {
    stroke: var(--leit);
  }
}
.kc-auto .ist-an,
.kc-auto .kc-raeder.ist-an rect {
  fill: var(--eis);
  stroke: var(--akzent-tief);
  stroke-width: 2;
}
.chip__preis {
  margin-left: 0.4rem;
  color: var(--meta);
  font-weight: 500;
}
.chip input:checked + span .chip__preis {
  color: var(--text);
}
.kc__ergebnis {
  margin-top: 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--flaeche);
  font-weight: 600;
  clip-path: var(--fase-poly);
  --fase: 6px;
}
.kc__ergebnis b {
  color: var(--leit);
}
.kc__foto {
  margin-top: 1.5rem;
}
.kc__datei {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  cursor: pointer;
}
.kc__datei input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.kc__datei > span:first-of-type {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 1rem;
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--leit);
  color: var(--leit);
  clip-path: var(--fase-poly);
  --fase: 6px;
}
.kc__datei input:focus-visible + span {
  outline: 2px solid var(--akzent-tief);
  outline-offset: 2px;
}
.kc__dateiname {
  font-size: 0.9rem;
  color: var(--meta);
}
.kc .formular__raster {
  margin-top: 1.5rem;
}
.kc__alternativ {
  margin-top: 1rem;
  font-size: 0.95rem;
}
.kc-lead {
  color: var(--meta);
}
.feld[hidden] {
  display: none;
}
.gs .feld--wahl {
  margin-bottom: 1.1rem;
}
@media (max-width: 40rem) {
  .kc {
    padding: 1.25rem 1rem;
    margin-inline: calc(-1 * var(--rand));
  }
  .kc__oben {
    grid-template-columns: minmax(0, 1fr);
  }
  .kc__bild {
    max-width: 11rem;
    margin-inline: auto;
  }
}
.seite__haupt .passt-dazu .verwandt a {
  color: var(--text);
  font-weight: 400;
  text-decoration: none;
}

/* =====================================================================
   HAUPTSEITEN (Leistungen, Pflege-Plan, Ablauf, Termin, Anfahrt, Über uns,
   Karriere, FAQ, Ratgeber, Downloads) + System-Seiten (Bewerten, Danke, 404)
   ===================================================================== */
.unterseite > .rahmen > .antwort:first-child,
.lseite__antwort {
  margin-top: 3.5rem;
  max-width: 48rem;
}

/* Leistungen-Übersicht */
.lgruppe {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1rem clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.lgruppe__titel {
  position: sticky;
  top: 6.5rem;
  display: grid;
  gap: 0.3rem;
  font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.lgruppe__titel .gruppe__nr {
  font-size: clamp(3rem, 2rem + 2.5vw, 4.4rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.lzeilen {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--text);
}
.lzeile {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto 1.4rem;
  align-items: baseline;
  gap: 0.3rem 1.5rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--linie);
  color: var(--text);
  text-decoration: none;
}
.lzeile__name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}
.lzeile__kurz {
  color: var(--meta);
  font-size: 0.97rem;
  line-height: 1.45;
}
.lzeile__preis {
  font-weight: 600;
  color: var(--leit);
  white-space: nowrap;
}
.lzeile .zeile__pfeil {
  align-self: center;
}
@media (hover: hover) and (pointer: fine) {
  .lzeile:hover .lzeile__name {
    color: var(--akzent-tief);
  }
  .lzeile:hover .zeile__pfeil {
    transform: translateX(4px);
  }
}
.lausserdem {
  margin-top: 5rem;
  padding: clamp(1.75rem, 3vw, 2.75rem);
  background: var(--flaeche);
  clip-path: var(--fase-poly);
  --fase: 14px;
}
.lausserdem__liste {
  list-style: none;
  margin: 1.5rem 0 1.25rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2rem;
}
.lausserdem__liste a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--linie);
  color: var(--text);
  text-decoration: none;
  font-size: 0.97rem;
}
.lausserdem__liste b {
  font-weight: 600;
  color: var(--leit);
  text-align: right;
}
.lausserdem__liste a:hover span {
  color: var(--akzent-tief);
}
.lausserdem .kleingedruckt + .kleingedruckt {
  margin-top: 0.3rem;
}
.lseite__schluss {
  margin-top: 4rem;
  max-width: 48rem;
}
@media (max-width: 56.24rem) {
  .lgruppe {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 3rem;
  }
  .lgruppe__titel {
    position: static;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 0.75rem;
  }
  .lgruppe__titel .gruppe__nr {
    font-size: 2.4rem;
  }
  .lzeile {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .lzeile__kurz {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .lzeile .zeile__pfeil {
    display: none;
  }
  .lausserdem {
    margin-top: 3.5rem;
    margin-inline: calc(-1 * var(--rand));
    padding-inline: var(--rand);
    clip-path: none;
  }
  .lausserdem__liste {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 56.25rem) and (max-width: 75rem) {
  .lausserdem__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lzeile {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto 1.4rem;
  }
}

/* Pflege-Plan-Seite */
.lichtdecke--seite {
  margin-top: 3.5rem;
  padding: 4rem 0 4.5rem;
}
.lichtdecke--seite .lichtdecke__kopf .h2 {
  max-width: 20ch;
}

/* Ablauf */
.preiskarte--abgabe .abgabe-zeit {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.abgabe-zeit b {
  font-family: var(--f-display);
  font-size: 2.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--leit);
  line-height: 1.1;
}
.abgabe-zeit span {
  color: var(--meta);
  font-size: 0.95rem;
}
.schrittblock {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 1.25rem;
}
.schrittblock__nr {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(3.4rem, 2.4rem + 2.4vw, 5rem);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--leit);
}
.schrittblock__knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem !important;
}
.hinweisbox {
  padding: 1.6rem 1.75rem;
  background: var(--flaeche);
  clip-path: var(--fase-poly);
  --fase: 12px;
}
.seite__haupt .hinweisbox h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
  margin-bottom: 0.5rem;
}
.abgabe-band {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.25rem !important;
  padding: 1rem 1.2rem;
  background: var(--eis);
  font-weight: 600;
  clip-path: var(--fase-poly);
  --fase: 8px;
}
@media (max-width: 40rem) {
  .schrittblock {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0 0.9rem;
  }
}

/* Karte auf Unterseiten */
.karte--seite {
  position: relative;
  top: 0;
  height: clamp(24rem, 40vw, 34rem);
  min-height: 0;
}

/* Termin + Abgabe-Tag */
.termin__antwort {
  margin-top: 3.5rem;
  max-width: 48rem;
}
.abgabetag {
  margin-top: 3.5rem;
}
.at {
  margin-top: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--karte);
  box-shadow: inset 0 0 0 1px var(--linie);
  clip-path: var(--fase-poly);
  --fase: 14px;
}
.at__uebernahme {
  margin-bottom: 1.5rem;
  padding: 0.85rem 1.1rem;
  background: var(--eis);
  font-weight: 600;
}
.at__raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem 2.5rem;
}
.at__schritt,
.at__kontakt {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 0.9rem;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.at__kontakt {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linie);
}
.at__nr {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--leit);
}
.at .feld--wahl {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.at .feld--wahl legend {
  float: none;
  margin: 0 0 0.3rem;
}
.feld__titel {
  font-weight: 600;
  font-size: 0.95rem;
}
.feld__unter {
  margin-top: 0.75rem;
}
.feld__hilfe {
  font-size: 0.85rem;
  color: var(--meta);
  line-height: 1.45;
}
.feld__hilfe.ist-fehler {
  color: var(--fehler);
  font-weight: 600;
}
.einwilligung--klein {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: var(--text);
}
.at__zusammenfassung {
  margin-top: 1.5rem;
  padding: 0.95rem 1.15rem;
  background: var(--flaeche);
  font-weight: 600;
  clip-path: var(--fase-poly);
  --fase: 6px;
}
.at__status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
  color: var(--meta);
  font-size: 0.95rem;
}
.at .kleingedruckt {
  margin-top: 0.75rem;
}
.termin__kontakt {
  margin-top: 5rem;
  overflow-x: clip;
}
.termin__kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-left: max(var(--rand), (100% - var(--breite)) / 2);
  align-items: start;
}
.kontaktliste {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.kontaktliste li {
  display: grid;
  gap: 0.1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--linie);
}
.kontaktliste a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.kontaktliste a:hover {
  color: var(--akzent-tief);
}
.termin__weiter {
  margin-top: 4rem;
}
@media (max-width: 56.24rem) {
  .at__raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .at {
    margin-inline: calc(-1 * var(--rand));
    padding-inline: var(--rand);
    clip-path: none;
  }
  .termin__kontakt-raster {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
  }
  .termin__direkt {
    padding-inline: var(--rand);
  }
  .termin__karte {
    padding-left: var(--rand);
  }
}

/* Anfahrt: Wege links, Karte über die rechte Kante */
.anfahrt__antwort {
  margin-top: 3.5rem;
  max-width: 48rem;
}
.anfahrt__buehne {
  margin-top: 4rem;
  overflow-x: clip;
}
.anfahrt__raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  padding-left: max(var(--rand), (100% - var(--breite)) / 2);
  align-items: start;
}
.anfahrt__wege .abschnitt + .abschnitt {
  margin-top: 2.5rem;
}
.anfahrt__wege h2 {
  font-size: clamp(1.6rem, 1.15rem + 1.4vw, 2.35rem);
  letter-spacing: -0.025em;
  margin-bottom: 0.8rem;
}
.anfahrt__wege > p {
  margin-top: 1.5rem;
}
.anfahrt__karte .karte {
  position: sticky;
  top: 6rem;
}
@media (max-width: 56.24rem) {
  .anfahrt__raster {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
  }
  .anfahrt__wege {
    padding-inline: var(--rand);
  }
  .anfahrt__karte {
    padding-left: var(--rand);
  }
  .anfahrt__karte .karte {
    position: relative;
    top: 0;
  }
}

/* Über uns: Galerie (alle 9 Studiofotos, Lightbox) */
.galerie {
  margin-top: 4.5rem;
}
.galerie__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 2rem;
  margin-bottom: 1.25rem;
}
.galerie__raster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.6rem, 1.2vw, 1rem);
}
.galerie__bild--gross {
  grid-row: span 2;
}
.galerie__bild button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  background: var(--dunkel-fest);
  clip-path: var(--fase-poly);
}
.galerie__bild img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 520ms var(--ease-aus);
}
.galerie__bild--gross img {
  aspect-ratio: auto;
}
@media (hover: hover) and (pointer: fine) {
  .galerie__bild button:hover img {
    transform: scale(1.03);
  }
}
@media (max-width: 56.24rem) {
  .galerie__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .galerie__bild--gross {
    grid-row: auto;
  }
  .galerie__bild--gross img {
    aspect-ratio: 3 / 4;
  }
}
.partner--seite {
  padding-top: 1rem;
}

/* Karriere: Stellen als Zeilen */
.zeilen--eins {
  display: block;
  border-top: 2px solid var(--text);
}
.zeilen--eins .zeile__name {
  font-family: var(--f-display);
  font-weight: 600;
}
.seite__haupt .zeile {
  color: var(--text);
  font-weight: 400;
  text-decoration: none;
}

/* FAQ */
.themenliste {
  list-style: none;
  margin: 0.25rem 0 0.5rem;
  padding: 0;
  width: 100%;
}
.themenliste a {
  display: block;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--linie);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}
.themenliste a:hover {
  color: var(--akzent-tief);
}
.faqgruppe h2 {
  margin-bottom: 0.75rem;
}

/* Ratgeber-Übersicht */
.ratgeber__antwort {
  margin-top: 3.5rem;
  max-width: 48rem;
}
.artikelraster {
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 2rem clamp(1.5rem, 3vw, 3rem);
}
.artikel--gross {
  grid-row: span 2;
}
.artikel a {
  display: grid;
  gap: 0.5rem;
  color: var(--text);
  text-decoration: none;
}
.artikel__bild {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--dunkel-fest);
  clip-path: var(--fase-poly);
  margin-bottom: 0.5rem;
}
.artikel--gross .artikel__bild {
  aspect-ratio: 4 / 3;
}
.artikel__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--ease-aus);
}
.artikel__nr {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1rem;
  color: var(--leit);
}
.artikel__titel {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.7rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}
.artikel--gross .artikel__titel {
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.3rem);
}
.artikel a p {
  color: var(--meta);
}
@media (hover: hover) and (pointer: fine) {
  .artikel a:hover .artikel__bild img {
    transform: scale(1.03);
  }
  .artikel a:hover .artikel__titel {
    color: var(--akzent-tief);
  }
}
.ratgeber__schluss {
  margin-top: 4rem;
}
@media (max-width: 56.24rem) {
  .artikelraster {
    grid-template-columns: minmax(0, 1fr);
  }
  .artikel--gross {
    grid-row: auto;
  }
}

/* Downloads */
.downloads__antwort {
  margin-top: 3.5rem;
  max-width: 48rem;
}
.dateiliste {
  list-style: none;
  margin: 3rem 0 4rem;
  padding: 0;
  border-top: 2px solid var(--text);
}
.datei {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--linie);
}
.datei__symbol {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 4.15rem;
  background: var(--eis);
  color: var(--leit);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.85rem;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.datei__titel {
  font-size: var(--fs-h3);
  font-weight: 600;
}
.datei__text p {
  color: var(--meta);
  margin-top: 0.2rem;
}
.datei__format {
  font-size: 0.85rem;
}
@media (max-width: 40rem) {
  .datei {
    grid-template-columns: 3rem minmax(0, 1fr);
  }
  .datei__symbol {
    width: 2.8rem;
    height: 3.25rem;
    font-size: 0.7rem;
  }
  .datei__knopf {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Bewerten (SEH-Bühne, dunkel, noindex) */
.bewerten-buehne {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--kopfleiste-h));
  padding: 3rem var(--rand);
  background: var(--dunkel-fest);
  overflow: hidden;
  color: var(--kalk-fest);
  --text: var(--kalk-fest);
  --meta: var(--meta-fest);
}
.bewerten-karte--seite {
  width: min(36rem, 100%);
  gap: 1rem;
}
.bewerten-karte__frage {
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--kalk-fest);
}
.bewerten-karte__frage em {
  color: var(--akzent-fest);
}
.bewerten-sterne {
  display: flex;
  gap: 0.25rem;
}
.stern {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 2.5rem;
  line-height: 1;
  color: rgba(198, 211, 222, 0.35);
  transition:
    color 160ms var(--ease-ein),
    transform 140ms var(--ease-aus);
}
.stern.ist-an {
  color: var(--akzent-fest);
}
.stern:active {
  transform: scale(0.94);
}
.bewerten-karte__text,
.bewerten-karte__zweit {
  color: var(--meta-fest);
  font-size: 0.97rem;
  line-height: 1.55;
}
.bewerten-karte__zweit a,
.bewerten-karte .textlink {
  color: var(--kalk-fest);
}
.bewerten-karte__danke {
  color: var(--kalk-fest);
  font-weight: 600;
  min-height: 1.5em;
}
.bewerten-karte--hervor .bewerten-karte__knopf {
  box-shadow: inset 0 0 0 2px var(--akzent-fest);
}

/* Danke + 404 (schlicht, ohne Bühne) */
.schlichtkopf {
  padding-top: 4.5rem;
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}
.schlichtkopf__wabe {
  width: 3.2rem;
  height: 3.7rem;
  background: var(--akzent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  margin-bottom: 0.5rem;
}
.schlichtkopf .seitenkopf__z1 {
  color: var(--meta);
}
.schlichtkopf .seitenkopf__pointe {
  color: var(--text);
  font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.2rem);
  max-width: 16ch;
}
.schlichtkopf .seitenkopf__pointe em {
  color: var(--akzent-tief);
}
.schlicht {
  padding-top: 2rem;
  padding-bottom: 2rem;
  max-width: calc(48rem + 2 * var(--rand));
  margin-inline: 0 auto;
  margin-left: max(0px, (100% - var(--breite) - 2 * var(--rand)) / 2);
}
.schlicht__karte {
  padding: 1.6rem 1.75rem;
  background: var(--flaeche);
  clip-path: var(--fase-poly);
  --fase: 12px;
  display: grid;
  gap: 0.75rem;
  font-size: 1.05rem;
}
.schlicht__karte a,
.schlicht a:not(.textlink):not(.zeile) {
  color: var(--leit);
  font-weight: 600;
}
.schlicht__weiter {
  margin-top: 3rem;
}
.schlicht__weiter .h2 {
  margin-bottom: 1rem;
}
.wegeliste {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  border-top: 2px solid var(--text);
}
.wegeliste .zeile {
  color: var(--text);
  text-decoration: none;
}
.wegeliste .zeile__name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.15rem;
}
.schlicht__kontakt {
  margin-top: 1.5rem;
  color: var(--meta);
}
@media (max-width: 40rem) {
  .textlink {
    white-space: normal;
  }
  .tabelle {
    table-layout: fixed;
  }
  .tabelle th,
  .tabelle td {
    overflow-wrap: break-word;
    hyphens: auto;
  }
  .tabelle th {
    letter-spacing: 0.04em;
  }
}
/* Rechtsseiten (Unterseiten-Generator): Überschriften in der Build-Display-Schrift */
.std-schlicht__h1,
main [class^="std-"] h2,
main section > h2[id^="i-"],
main section > h2[id^="d-"] {
  font-family: var(--f-display);
  letter-spacing: -0.02em;
}

/* =====================================================================
   FIX-RUNDE S6-2 (26.10.) — gemeinsame Korrekturen aller Seiten
   ===================================================================== */
/* #24/#29 Kopf-Schatten nur als Eck-Verlauf unten links — Bildmitte und oben bleiben frei */
@media (min-width: 56.25rem) {
  .seitenkopf__block::before {
    content: none;
  }
  .seitenkopf__medium::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 78% 98% at 0% 100%, rgba(7, 18, 28, 0.9) 0%, rgba(7, 18, 28, 0.8) 42%, rgba(7, 18, 28, 0.5) 66%, rgba(7, 18, 28, 0.16) 86%, rgba(7, 18, 28, 0) 100%);
  }
}
/* #22 Brotkrumen einzeilig, der letzte Punkt kürzt mit … */
.breadcrumb ol {
  flex-wrap: nowrap;
  min-width: 0;
}
.breadcrumb li {
  flex: none;
  white-space: nowrap;
}
.breadcrumb li:last-child {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* #40 schlichte Köpfe ohne Bühne: kein Text-Schatten */
.schlichtkopf .seitenkopf__h1,
.schlichtkopf .seitenkopf__satz,
.schlichtkopf h1 {
  text-shadow: none;
}
/* #28/#33 Karte am Handy: Pin frei, Adresse UNTER der Karte */
@media (max-width: 56.24rem) {
  .karte,
  .anfahrt__karte .karte {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--karte);
  }
  .karte__iframe {
    position: relative;
    inset: auto;
    flex: none;
    height: 22rem;
  }
  .karte__pin {
    top: 11rem;
  }
  .karte__adresse {
    position: static;
    min-width: 0;
    clip-path: none;
    padding: 1.15rem 1.25rem 1.35rem;
    box-shadow: inset 0 1px 0 var(--linie);
  }
}
/* Safari @390: die horizontale Staffel startet 40 px rechts — nie über die Seitenkante */
.partner__tafeln {
  overflow-x: clip;
}
/* Bewerten-Weiche: Hinweis, Stufen, Formular auf der dunklen Karte */
.bewerten-karte__hinweis {
  color: var(--meta-fest);
  font-size: 0.92rem;
  min-height: 1.4em;
}
.bewerten-stufe {
  display: grid;
  justify-items: center;
  gap: 1rem;
  width: 100%;
}
.bewerten-stufe[hidden] {
  display: none;
}
.bewerten-form {
  display: grid;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
}
.bewerten-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.bewerten-form__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--kalk-fest);
  margin-bottom: 0.3rem;
}
.bewerten-form__feld {
  width: 100%;
  min-height: 44px;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: 1rem;
  color: var(--kalk-fest);
  background: rgba(243, 247, 250, 0.06);
  border: 1px solid rgba(198, 211, 222, 0.45);
  border-radius: 0;
}
.bewerten-form__feld:focus-visible {
  outline: 2px solid var(--akzent-fest);
  outline-offset: 1px;
}
.bewerten-form__feld[aria-invalid="true"] {
  border-color: #f2a39b;
}
textarea.bewerten-form__feld {
  resize: vertical;
}
.bewerten-form__reihe {
  display: grid;
  gap: 0.5rem 0.75rem;
  margin-top: 0.4rem;
}
@media (min-width: 36rem) {
  .bewerten-form__reihe {
    grid-template-columns: 1fr 1fr;
  }
}
.bewerten-form__recht,
.bewerten-form__meldung {
  color: var(--meta-fest);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0.2rem 0 0.4rem;
}
.bewerten-form__recht a,
.bewerten-form__meldung a {
  color: var(--kalk-fest);
}
/* Startseite: fünf Stern-Grafiken im Aufruf */
.bewerten-karte__sterne {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  letter-spacing: 0;
}
.bewerten-karte__sterne svg {
  width: 2.3rem;
  height: 2.3rem;
}
/* #7/#8/#21 Vergleichs-Tabellen: PC gleich breite Stufen-Spalten, Handy je Zeile eine Karte */
.tabelle--stapel {
  table-layout: fixed;
  max-width: 48rem;
}
.tabelle--stapel td:last-child {
  font-weight: 400;
  white-space: normal;
}
.tabelle--stapel th,
.tabelle--stapel td {
  overflow-wrap: break-word;
  hyphens: manual;
}
.tabelle--stapel td[data-label="Preis"],
.tabelle--vergleich tr:last-child td {
  font-weight: 600;
}
.tabelle--vergleich th:first-child,
.tabelle--vergleich td:first-child {
  width: 24%;
  font-weight: 600;
  color: var(--text);
}
@media (max-width: 40rem) {
  .tabelle--stapel,
  .tabelle--stapel tbody,
  .tabelle--stapel tr,
  .tabelle--stapel td {
    display: block;
    width: 100%;
  }
  .tabelle--stapel thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .tabelle--stapel tr {
    padding: 0.9rem 0 0.8rem;
    border-bottom: 1px solid var(--linie);
  }
  .tabelle--stapel td {
    display: grid;
    grid-template-columns: 7.2rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.2rem 0;
    border: 0;
  }
  .tabelle--stapel td::before {
    content: attr(data-label);
    font-size: var(--fs-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--meta);
    padding-top: 0.15rem;
  }
  .tabelle--stapel td:not([data-label])::before {
    content: none;
  }
  .tabelle--vergleich td:first-child {
    width: 100%;
    display: block;
    font-family: var(--f-display);
    font-size: 1.05rem;
    margin-bottom: 0.25rem;
  }
  .tabelle--stapel:not(.tabelle--vergleich) td:first-child {
    font-weight: 600;
  }
}
/* #11/#20 Bild führt: Hallenfoto mitten im Text (gefast, ohne Rahmen) */
.hallenbild {
  margin: 3rem 0 0;
}
.hallenbild img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 55%;
  clip-path: var(--fase-poly);
  background: var(--flaeche);
}
.hallenbild--breit img {
  aspect-ratio: 16 / 9;
}
.hallenbild figcaption {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--meta);
}
/* #11 Passt-dazu-Karten mit Bild */
.seite__haupt .verwandt a {
  overflow: hidden;
}
.verwandt__bild {
  display: block;
  width: calc(100% + 2.5rem);
  max-width: none;
  margin: -1.15rem -1.25rem 0.75rem;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* #13/#17 Varianten (Teil/Voll, Betrag/Leistung) als zwei gegliederte Karten */
.varianten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.variante {
  padding: 1.25rem 1.35rem 1.35rem;
  background: var(--flaeche);
  clip-path: var(--fase-poly);
}
.variante__titel {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.25;
  margin: 0 0 0.45rem;
  color: var(--text);
}
.variante__text {
  margin: 0;
  color: var(--meta);
}
@media (max-width: 40rem) {
  .varianten {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* #14 Datenzeilen als Preisliste: Name fett, Preis rechts, Satz darunter */
.posten {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  border-top: 1px solid var(--linie);
}
.posten__zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linie);
}
.posten__name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.05rem;
}
.posten__preis {
  font-weight: 600;
  color: var(--leit);
  text-align: right;
  white-space: nowrap;
}
.posten__satz {
  grid-column: 1 / -1;
  color: var(--meta);
  font-size: 0.97rem;
}
@media (max-width: 30rem) {
  .posten__zeile {
    grid-template-columns: minmax(0, 1fr);
  }
  .posten__preis {
    text-align: left;
  }
}
.hallenbild img,
.verwandt__bild {
  height: auto;
}
.posten__zeile{scroll-margin-top:6.5rem}
/* Layout-Prüfung: Pflege-Plan-Seite unter 70rem — Kopf linksbündig wie das Werkzeug darunter */
@media (max-width: 70rem) {
  .lichtdecke--seite .lichtdecke__kopf {
    text-align: left;
    align-items: flex-start;
  }
}
@media (min-width: 56.25rem) and (max-width: 70rem) {
  .lichtdecke__kopf {
    text-align: left;
    align-items: flex-start;
  }
  .lichtdecke__kopf .lead {
    text-align: left;
  }
}
.zeile__name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.bewerten-karte__titel,
.stimmen__h2,
.mehr__h3 {
  text-wrap: balance;
}
/* Handy-Tabellen: Label über dem Wert (liest sich linksbündig) */
@media (max-width: 40rem) {
  .tabelle--stapel td {
    display: block;
  }
  .tabelle--stapel td::before {
    display: block;
    padding-top: 0;
    margin-bottom: 0.1rem;
  }
}
.rezept__auto::before{content:none}
/* #34 Galerie ohne Waise: PC 1 große Kachel (2×2) + 8 kleine = 3 volle Reihen; Handy: letztes Bild über 2 Spalten */
@media (min-width: 56.25rem) {
  .galerie__raster {
    grid-auto-flow: dense;
  }
  .galerie__bild--gross:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  .galerie__bild--gross:not(:first-child) {
    grid-row: auto;
  }
  .galerie__bild--gross:not(:first-child) img {
    aspect-ratio: 3 / 4;
  }
}
@media (max-width: 56.24rem) {
  .galerie__bild:last-child {
    grid-column: 1 / -1;
  }
  .galerie__bild:last-child img {
    aspect-ratio: 16 / 10;
  }
}
/* #25 Wege-Knöpfe unter Schritt 1: erkennbare Fläche + volle Kante (ohne Fase, damit die Kante nicht abgeschnitten wird) */
.schrittblock__knoepfe .knopf--leise {
  --k-bg: var(--flaeche);
  --k-fg: var(--text);
  min-height: 44px;
  padding: 0.65rem 1.15rem;
  clip-path: none;
  box-shadow: inset 0 0 0 1.5px var(--akzent-tief);
}
:root[data-theme="dark"] .schrittblock__knoepfe .knopf--leise {
  box-shadow: inset 0 0 0 1.5px var(--meta);
}
@media (hover: hover) and (pointer: fine) {
  .schrittblock__knoepfe .knopf--leise:hover {
    --k-bg: var(--akzent-tief);
    --k-fg: var(--kalk-fest);
  }
}
.schrittblock__knoepfe .knopf--leise:active {
  transform: scale(0.97);
}
.hallenbild{margin-bottom:2.75rem}
/* #31 Ratgeber-Raster: Artikel 01 wächst auf die Höhe von 02 + 03 (keine leere Fläche) */
@media (min-width: 56.25rem) {
  .artikel--gross a {
    height: 100%;
    grid-template-rows: minmax(24rem, 1fr) auto auto auto auto;
  }
  .artikel--gross .artikel__bild {
    aspect-ratio: auto;
    height: 100%;
  }
}
/* #10 Kratzer-Check: weiche Draufsicht, Karosserie als ruhige Fläche, 8 Zonen klar abgesetzt */
.kc-auto .kc-karosse {
  fill: var(--karte);
  stroke: var(--meta);
  stroke-width: 1.5;
  pointer-events: none;
}
.kc-auto .kc-spiegel {
  fill: var(--flaeche);
  stroke: var(--meta);
  stroke-width: 1.2;
  pointer-events: none;
}
.kc-auto .kc-zone {
  stroke: var(--karte);
  stroke-width: 3;
  stroke-linejoin: round;
}
.kc-auto .kc-raeder rect {
  fill: var(--text);
  stroke: var(--text);
}
.kc-auto .kc-glas {
  fill: var(--leit);
  opacity: 0.18;
}
.kc-auto .ist-an {
  stroke: var(--karte);
  stroke-width: 3;
  fill: var(--akzent);
}
.kc-auto .kc-raeder.ist-an rect {
  fill: var(--akzent-tief);
  stroke: var(--akzent);
}
:root[data-theme="dark"] .kc__ergebnis {
  background: var(--akzent-flaeche, #103b4b);
  box-shadow: inset 0 0 0 1px rgba(157, 176, 194, 0.35);
}
:root[data-theme="dark"] .kc-auto .kc-zone:not(.ist-an) {
  fill: #1a3249;
}
:root[data-theme="dark"] .kc-auto .kc-raeder:not(.ist-an) rect {
  fill: #050d15;
  stroke: var(--meta);
}
:root[data-theme="dark"] .kc-auto .kc-glas {
  fill: #86b4da;
  opacity: 0.22;
}

/* =====================================================================
   #3 STARTSEITE VERDICHTET (Fix-Runde S6-2) — gleiche Pflichtteile, weniger Leerlauf
   ===================================================================== */
@media (min-width: 56.25rem) {
  .halle {
    padding-top: 5.5rem;
  }
  .halle__lead {
    margin-top: 1.4rem;
  }
  .halle__streifen-huelle {
    margin-top: 2.25rem;
  }
  .lichtdecke__kopf .lead {
    margin-top: 0.8rem;
  }
  .decke-huelle {
    margin-top: 2.25rem;
  }
  .leistungen {
    padding-top: 6rem;
  }
  .ablauf {
    margin-top: 2.5rem;
    padding-top: 3rem;
  }
  .ablauf__buehne .ablauf__band {
    aspect-ratio: 21 / 8;
  }
  .schritte {
    margin-top: 2rem;
  }
  .partner {
    padding-top: 3.5rem;
  }
  .stimmen {
    padding-top: 4.5rem;
  }
  .mehr {
    padding-top: 4rem;
  }
  .mehr__bild {
    aspect-ratio: 16 / 10;
  }
  .anfrage {
    padding-top: 5.5rem;
  }
}
@media (min-width: 70.01rem) {
  /* Lichtdecke: Fragen-Spalte breiter → Chips in weniger Reihen, Karte niedriger */
  .decke {
    grid-template-columns: minmax(0, 5.3fr) minmax(0, 6.7fr);
  }
  .decke__fragen {
    gap: 1.25rem;
    padding-block: 2rem;
  }
  .frage__titel {
    margin-bottom: 0.7rem;
  }
  .frage__hinweis {
    margin-top: 0.5rem;
  }
  .decke__ergebnis {
    padding-block: 2rem;
  }
  .waben {
    --w: 7.3rem;
  }
}
@media (max-width: 56.24rem) {
  .halle {
    padding-top: 3.25rem;
  }
  .leistungen {
    padding-top: 3.5rem;
  }
  .gruppe {
    margin-top: 2rem;
  }
  .gruppe__band {
    aspect-ratio: 21 / 9;
    margin-bottom: 0.9rem;
  }
  .ablauf {
    margin-top: 2.25rem;
    padding-top: 2.25rem;
  }
  .ablauf__band {
    aspect-ratio: 2 / 1;
  }
  .schritte {
    margin-top: 1.75rem;
    gap: 1.6rem;
  }
  .partner {
    padding-top: 2.25rem;
  }
  .partner__kopf {
    padding-top: 1.5rem;
  }
  .stimmen {
    padding-top: 3rem;
  }
  .mehr {
    padding-top: 2.5rem;
  }
  .anfrage {
    padding-top: 3.5rem;
  }
  .lichtdecke {
    padding-top: 5rem;
  }
  .fuss {
    padding-top: 2.5rem;
  }
  .fuss__innen {
    row-gap: 1.75rem;
  }
}
/* Fixe Knöpfe blenden sich im Fuß aus (haut.js) → das Extra-Polster unten entfällt */
.fuss,
.band-kontakt + .fuss {
  padding-bottom: 2.75rem;
}
@media (min-width: 56.25rem) {
  .bewerten-aufruf {
    min-height: 22rem;
    padding-block: 3rem;
  }
  .stimmen + .bewerten-aufruf {
    margin-top: 2.5rem;
  }
  .fuss {
    padding-top: 3rem;
  }
}
@media (max-width: 56.24rem) {
  .anfrage .karte__iframe {
    height: 18rem;
  }
  .anfrage .karte__pin {
    top: 9rem;
  }
  .anfrage .karte__adresse {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 1rem;
  }
  .anfrage .karte__adresse .label,
  .anfrage .karte__strasse,
  .anfrage .karte__zeit {
    grid-column: 1;
  }
  .anfrage .karte__adresse .knopf {
    grid-column: 2;
    grid-row: 2 / span 2;
  }
  .anfrage .karte__zeit {
    margin-bottom: 0;
  }
}
.seite__haupt .variante__titel{margin-top:0}

/* =====================================================================
   NACHBESSERUNG S6-3 (27.10.)
   ===================================================================== */
/* Zweites Thema: Pointe-Akzent auf der Bühne heller, damit er auch über
   hellen Bildzonen ≥ 3:1 trägt (#11b3d8 fiel auf 2,2–2,8:1) */
.seitenkopf .seitenkopf__pointe em {
  color: #7ad9f0;
}
/* leistungen @1024: lange Leistungsnamen nicht abschneiden */
.lzeile__name {
  hyphens: auto;
  overflow-wrap: break-word;
}
@media (min-width: 56.25rem) and (max-width: 75rem) {
  .lzeile {
    grid-template-columns: minmax(0, 14.5rem) minmax(0, 1fr) auto 1.4rem;
  }
}
/* ueber-uns „in Zahlen“: Fakten-Reihe in der Textspalte, eine Stufe kleiner als auf der Startseite */
.zahlen__reihe {
  margin-top: 1.25rem;
  border-block: 1px solid var(--linie);
}
.zahlen .fakt__wert {
  font-size: calc(var(--fs-fakt) * 0.8);
}
.zahlen .fakt {
  padding-block: 1.6rem 1.5rem;
}
.zahlen .fakten__reihe {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.zahlen .fakt:nth-child(odd) {
  border-left: 0;
  padding-left: 0;
}
.zahlen .fakt:nth-child(n + 3) {
  border-top: 1px solid var(--linie);
}
@media (min-width: 80rem) {
  .zahlen .fakten__reihe {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .zahlen .fakt:nth-child(3) {
    border-left: 1px solid var(--linie);
    padding-left: 1.5rem;
  }
  .zahlen .fakt:nth-child(n + 3) {
    border-top: 0;
  }
}
/* index @360: „Route planen“ quetschte die Adresse auf 112 px — unter 24rem untereinander */
@media (max-width: 24rem) {
  .anfrage .karte__adresse {
    grid-template-columns: minmax(0, 1fr);
  }
  .anfrage .karte__adresse .knopf {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 0.6rem;
  }
}

/* =====================================================================
   TAKT-FIX 5 (27.10.) — Seitenschienen ab 64rem: fixe Knöpfe liegen im Seitenrand,
   nie über der Textspalte (GESETZ Kap. 10 „fixe Overlays verdecken nie Inhalt“).
   Rechts: Anrufen + WhatsApp senkrecht an der Kante · links: „Fragen?“ (Empfang).
   ===================================================================== */
@media (min-width: 64rem) {
  :root {
    --rand: clamp(3.25rem, 4vw, 4rem); /* Rand breiter als die 2,5-rem-Schiene */
  }
  .fixknoepfe {
    right: 0;
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    flex-direction: column;
    gap: 2px;
  }
  .fixknopf,
  .empfang__knopf {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    width: 2.5rem;
    min-height: 0;
    padding: 1.05rem 0;
    justify-content: center;
    gap: 0.6rem;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    --fase: 8px;
  }
  .fixknopf svg {
    transform: rotate(180deg);
    width: 18px;
    height: 18px;
  }
  .empfang {
    left: 0;
    bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
  .empfang__knopf:active {
    transform: rotate(180deg) scale(0.97);
  }
  .empfang__fenster {
    left: calc(100% + 0.6rem);
    bottom: 0;
  }
}

/* TAKT-FIX 5 (#54): Absatz nach Tabelle, Liste oder Karten bekommt Luft */
main :is(table, ol, ul, dl, .varianten, .tabelle-rahmen) + p,
main p + table {
  margin-top: 1.25rem;
}

/* TAKT-FIX 5 (#53): Leistungs-Übersicht — je Kategorie ein Bild unter der Ziffer */
.lgruppe__kopf {
  position: sticky;
  top: 6.5rem;
  display: grid;
  gap: 1.5rem;
  align-content: start;
}
.lgruppe__kopf .lgruppe__titel {
  position: static;
}
.lgruppe__bild {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--flaeche, var(--linie));
  --fase: 14px;
  clip-path: var(--fase-poly);
}
.lgruppe__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 56.24rem) {
  .lgruppe__kopf {
    position: static;
    gap: 1rem;
  }
  .lgruppe__bild {
    aspect-ratio: 16 / 9;
  }
}

/* TAKT-FIX 5 (#56): Über-uns-Schluss als EIN Band — Bild führt, Stellen + Kanäle daneben */
.uu-band {
  grid-column: 1 / -1;
  display: grid;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.uu-band__bild {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  --fase: 16px;
  clip-path: var(--fase-poly);
}
.uu-band__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.uu-band__text {
  display: grid;
  gap: 2rem;
  align-content: center;
}
.uu-band__text h2 {
  font-size: var(--fs-h2, clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem));
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.uu-band__text p {
  margin-top: 0.75rem;
  max-width: 40ch;
}
.uu-band__stellen {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.uu-band__stellen a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55rem 0.95rem;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--text);
  text-decoration: none;
  background: var(--karte);
  box-shadow: inset 0 0 0 1.5px var(--linie);
  --fase: 8px;
  clip-path: var(--fase-poly);
  transition:
    box-shadow 180ms var(--ease-aus),
    transform 140ms var(--ease-aus);
}
.uu-band__stellen a:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .uu-band__stellen a:hover {
    box-shadow: inset 0 0 0 1.5px var(--akzent-tief);
  }
}
.uu-band__social {
  padding-top: 1.6rem;
  border-top: 1px solid var(--linie);
}
.uu-band__text .uu-band__h-klein {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
}
@media (min-width: 64rem) {
  .uu-band {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(3rem, 5vw, 5rem);
    align-items: center;
  }
  .uu-band__bild {
    aspect-ratio: 4 / 3.4;
  }
  .seite > .uu-band {
    grid-row: 1;
  }
  .seite > .uu-band + .seite__haupt {
    grid-row: 2;
  }
}

/* TAKT-FIX 5 (#57): Detail-Ausschnitt statt zweitem Gesamtbild */
.hallenbild--detail img {
  aspect-ratio: 5 / 4;
  object-position: 80% 38%;
}