/* TCG Team, Richtung „Der Katalog“ (.impeccable/surfaces/src-index-html.md)
   Sand als Grund, Schwarz für Text, Anthrazit für Nebenflächen,
   Weinrot nur für die Anfrage und feine Kanten. Keine Rundungen. */

@font-face {
  font-family: "Kanit";
  src: url("../fonts/kanit-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Kanit";
  src: url("../fonts/kanit-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/archivo-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --papier: #FAF8F4;
  --sand: #F1EEE8;
  --sand-2: #E6E1D7;
  --sand-3: #D9D2C5;
  --tinte: #1B1B1D;
  --anthrazit: #383E42;
  --wein: #8A1C1F;
  --wein-dunkel: #6B1417;
  --text-2: #4D4C50;
  --linie: rgba(27, 27, 29, .16);
  --linie-stark: rgba(27, 27, 29, .46);
  --linie-hell: rgba(255, 255, 255, .2);
  --hell-2: rgba(255, 255, 255, .8);

  --f-titel: "Kanit", "Arial Narrow", sans-serif;
  --f-text: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --kopf-h: 92px;
  --rand: clamp(16px, 4vw, 56px);
  --max: 1360px;
  --abschnitt: clamp(88px, 11vw, 168px);

  /* Werte für das Regler-Panel (Phase 6) */
  --hero-wort-breite: .46;
  --hero-wort-max: 150px;
  --leiste-breite: 820px;
  --hero-hoehe-min: 640px;
  --schleier-staerke: .5;
  --fortschritt-hoehe: 6px;

  --ease-aus: cubic-bezier(.16, 1, .3, 1);
  --ease-tafel: cubic-bezier(.77, 0, .18, 1);
  --fokus: var(--wein);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 16px); }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--f-text);
  font-size: 17px;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--wein); }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
address { font-style: normal; }
::selection { background: var(--wein); color: #fff; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
html { scrollbar-color: var(--anthrazit) var(--sand-2); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sand-2); }
::-webkit-scrollbar-thumb { background: var(--anthrazit); border: 2px solid var(--sand-2); }

.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--tinte); color: #fff; padding: 12px 18px; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.icon { width: 20px; height: 20px; flex: none; }

/* ------------------------------------------------ Typografie */

.titel {
  font-family: var(--f-titel);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1.04;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  text-wrap: balance;
}
.titel--gross { font-size: clamp(1.9rem, 3.3vw, 3.1rem); line-height: 1.02; }
.fliess { max-width: 62ch; }

/* ------------------------------------------------ Knöpfe */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  font-family: var(--f-titel); font-weight: 500; font-size: 15px; line-height: 1.1;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  border: 1.5px solid transparent; border-radius: 0;
  background: transparent; color: inherit;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn .icon { width: 18px; height: 18px; transition: transform .35s var(--ease-aus); }
.btn:hover .icon--pfeil-rechts { transform: translateX(4px); }
.btn:hover .icon--pfeil-links { transform: translateX(-4px); }
.btn--anfrage { background: var(--wein); color: #fff; }
.btn--anfrage:hover { background: var(--wein-dunkel); }
.btn--dunkel { background: var(--tinte); color: #fff; }
.btn--dunkel:hover { background: var(--anthrazit); }
.btn--linie { border-color: var(--tinte); color: var(--tinte); }
.btn--linie:hover { background: var(--tinte); color: #fff; }
.btn--hell { border-color: #fff; color: #fff; }
.btn--hell:hover { background: #fff; color: var(--tinte); }
.btn[disabled] { opacity: .55; cursor: progress; }
.knoepfe { min-width: 0; max-width: 100%; contain: inline-size; }
.knoepfe__reihe { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.js .knoepfe__reihe { flex-wrap: nowrap; }
.js .knoepfe__reihe .btn { white-space: nowrap; flex: none; }
.js .knoepfe__reihe.ist-gestapelt { flex-direction: column; align-items: stretch; max-width: 460px; }
.js .knoepfe__reihe.ist-gestapelt .btn { justify-content: center; }

.pfeil-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  font-family: var(--f-titel); font-weight: 500; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: underline; text-decoration-color: var(--linie-stark);
}
.pfeil-link .icon { width: 16px; height: 16px; transition: transform .35s var(--ease-aus); }
.pfeil-link:hover { text-decoration-color: var(--wein); }
.pfeil-link:hover .icon { transform: translateX(4px); }

/* ------------------------------------------------ Kopfzeile */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: var(--sand);
  border-bottom: 1px solid var(--linie);
  transition: box-shadow .35s var(--ease-aus);
}
.kopf.ist-fest { box-shadow: 0 8px 20px -14px rgba(27, 27, 29, .35); }
.kopf__innen {
  height: var(--kopf-h); max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand);
  display: flex; align-items: center; gap: 24px;
}
.kopf__logo { flex: none; }
.kopf__logo img { height: 62px; width: auto; }
.nav { margin-left: auto; }
.nav__liste { display: flex; align-items: stretch; }
.nav__gruppe { position: relative; }
.nav__knopf, .nav__link {
  display: flex; align-items: center; gap: 6px; height: var(--kopf-h); padding: 0 12px;
  background: none; border: 0;
  font-family: var(--f-titel); font-weight: 500; font-size: 15px; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
.nav__knopf .icon { width: 14px; height: 14px; transition: transform .25s var(--ease-aus); }
.nav__gruppe.is-offen .nav__knopf .icon { transform: rotate(180deg); }
.nav__knopf::after, .nav__link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 26px; height: 1px; background: var(--wein);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-aus);
}
.nav__knopf, .nav__link { position: relative; }
.nav__knopf:hover::after, .nav__link:hover::after, .nav__gruppe.is-offen .nav__knopf::after { transform: scaleX(1); }
.nav__panel {
  position: absolute; top: calc(100% - 1px); left: 0; min-width: 320px;
  background: var(--sand); border: 1px solid var(--linie); border-top: 2px solid var(--wein);
  box-shadow: 0 24px 40px -24px rgba(27, 27, 29, .35);
  padding: 8px 0 0;
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .2s, transform .3s var(--ease-aus), visibility 0s .3s;
}
.nav__gruppe.is-offen .nav__panel { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .3s var(--ease-aus); }
@media (hover: hover) and (min-width: 1081px) {
  .nav__gruppe:hover .nav__panel { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .3s var(--ease-aus); }
}
.nav__panel a { display: block; padding: 10px 22px; text-decoration: none; font-size: 15.5px; }
.nav__panel li a:hover { background: var(--sand-2); }
.nav__alle {
  display: flex !important; align-items: center; gap: 8px; margin-top: 8px; border-top: 1px solid var(--linie);
  font-family: var(--f-titel); font-weight: 500; font-size: 13.5px !important; letter-spacing: .08em; text-transform: uppercase;
}
.nav__alle .icon { width: 16px; height: 16px; }
.nav__mobil-kontakt { display: none; }
.kopf__aktionen { display: flex; align-items: center; gap: 8px; }
.kopf__icon, .kopf__menue { display: none; }
.kopf__anfrage { min-height: 46px; }

@media (max-width: 1080px) {
  :root { --kopf-h: 72px; }
  .kopf__logo img { height: 50px; }
  .kopf__icon, .kopf__menue {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    background: none; border: 0; text-decoration: none;
  }
  .kopf__icon .icon, .kopf__menue .icon { width: 24px; height: 24px; }
  .kopf__aktionen { margin-left: auto; gap: 2px; }
  .kopf__menue-zu { display: none; }
  .kopf__menue[aria-expanded="true"] .kopf__menue-auf { display: none; }
  .kopf__menue[aria-expanded="true"] .kopf__menue-zu { display: inline-flex; }
  .kopf__anfrage { display: none; }
  .nav {
    position: fixed; inset: var(--kopf-h) 0 0 0; z-index: 49; margin: 0;
    background: var(--sand); border-top: 1px solid var(--linie);
    overflow-y: auto; padding: 8px var(--rand) 32px;
    visibility: hidden; opacity: 0; transition: opacity .2s, visibility 0s .2s;
  }
  .nav.is-offen { visibility: visible; opacity: 1; transition: opacity .2s; }
  .nav__liste { flex-direction: column; }
  .nav__liste > li { border-bottom: 1px solid var(--linie); }
  .nav__knopf, .nav__link { width: 100%; height: 60px; padding: 0; justify-content: space-between; font-size: 18px; }
  .nav__knopf::after, .nav__link::after { display: none; }
  .nav__panel {
    position: static; min-width: 0; border: 0; box-shadow: none; padding: 0 0 12px; transform: none;
    display: none; visibility: visible; opacity: 1;
  }
  .nav__gruppe.is-offen .nav__panel { display: block; }
  .nav__panel a { padding: 9px 0; }
  .nav__alle { border-top: 0; margin-top: 4px; }
  .nav__mobil-kontakt { display: grid; gap: 10px; margin-top: 28px; }
}

/* Kopfzeile über dem Bühnenfoto: transparent mit weißer Schrift, Sand blendet beim Scrollen ein (Marcel, 2026-10-22) */
.kopf--ueber { background: linear-gradient(180deg, rgba(14, 14, 16, .62) 0%, rgba(14, 14, 16, .28) 60%, rgba(14, 14, 16, 0) 100%) border-box no-repeat; border-bottom-color: transparent; transition: border-color .3s, color .3s, box-shadow .35s var(--ease-aus); }
.kopf--ueber::before { content: ""; position: absolute; inset: 0; background: var(--sand); opacity: 1; transition: opacity .35s var(--ease-aus); }
.kopf--ueber .kopf__innen { position: relative; }
.kopf__logo { position: relative; }
.kopf__logo-weiss { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity .3s; }
.kopf__logo-farbe { transition: opacity .3s; }
.kopf--ueber:not(.ist-fest):not(:has(.kopf__menue[aria-expanded="true"])) { color: #fff; --fokus: #fff; }
.kopf--ueber:not(.ist-fest):not(:has(.kopf__menue[aria-expanded="true"])) :is(.nav__knopf, .nav__link, .kopf__anfrage) { text-shadow: 0 1px 10px rgba(14, 14, 16, .45); }
.kopf--ueber:not(.ist-fest):not(:has(.kopf__menue[aria-expanded="true"])) :is(.kopf__logo-weiss, .kopf__icon, .kopf__menue) { filter: drop-shadow(0 1px 6px rgba(14, 14, 16, .4)); }
.kopf--ueber:not(.ist-fest):not(:has(.kopf__menue[aria-expanded="true"]))::before { opacity: 0; }
.kopf--ueber:not(.ist-fest):not(:has(.kopf__menue[aria-expanded="true"])) .kopf__logo-farbe { opacity: 0; }
.kopf--ueber:not(.ist-fest):not(:has(.kopf__menue[aria-expanded="true"])) .kopf__logo-weiss { opacity: 1; }
.kopf--ueber:not(.ist-fest):not(:has(.kopf__menue[aria-expanded="true"])) .kopf__anfrage { border-color: #fff; color: #fff; }
.kopf--ueber:not(.ist-fest):not(:has(.kopf__menue[aria-expanded="true"])) .kopf__anfrage:hover { background: #fff; color: var(--tinte); }
.kopf--ueber:not(.ist-fest):not(:has(.kopf__menue[aria-expanded="true"])) .nav__knopf::after,
.kopf--ueber:not(.ist-fest):not(:has(.kopf__menue[aria-expanded="true"])) .nav__link::after { background: #fff; }
.kopf--ueber.ist-fest { border-bottom-color: var(--linie); }
.nav__panel, .nav { color: var(--tinte); }
@media (min-width: 1081px) { .nav { color: inherit; } }
.kopf--ueber + main > .buehne:first-child { margin-top: calc(-1 * var(--kopf-h)); height: 100svh; }
.kopf--ueber + main > .buehne:first-child .buehne__flaeche { padding-top: calc(var(--kopf-h) + 32px); }

/* ------------------------------------------------ Bühne: Slider und Produktkopf */

.buehne {
  position: relative;
  height: calc(100svh - var(--kopf-h));
  min-height: var(--hero-hoehe-min);
  max-height: 980px;
  background: var(--tinte);
  color: #fff;
}
.buehne__flaeche {
  position: absolute; inset: 0; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr;
  padding: 32px var(--rand) calc(var(--leiste-h, 280px) + 28px);
  touch-action: pan-y;
}
.buehne__slides { position: absolute; inset: 0; }
.buehne__slide { position: absolute; inset: 0; visibility: hidden; z-index: 0; }
.buehne__slide.is-active { visibility: visible; z-index: 2; }
.buehne__slide.is-leaving { visibility: visible; z-index: 1; }
.buehne__bild, .buehne__bild img { width: 100%; height: 100%; }
.buehne__bild img { object-fit: cover; }
.buehne__schleier {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 14, 16, calc(var(--schleier-staerke) * 1.1)) 0%, rgba(14, 14, 16, 0) 24%),
    linear-gradient(0deg, rgba(14, 14, 16, calc(var(--schleier-staerke) * 1.2)) 0%, rgba(14, 14, 16, 0) 62%),
    linear-gradient(90deg, rgba(14, 14, 16, calc(var(--schleier-staerke) * .6)) 0%, rgba(14, 14, 16, 0) 60%);
}
.buehne__worte { position: relative; z-index: 4; min-height: 0; grid-row: 2; }
.buehne__wort { position: absolute; left: 0; bottom: 0; visibility: hidden; }
.buehne__wort.is-active, .buehne__wort.is-leaving { visibility: visible; }
.wort {
  display: block;
  font-family: var(--f-titel); font-weight: 600; text-transform: uppercase;
  font-size: var(--wort-fs, clamp(56px, 10vw, 200px));
  line-height: .86; letter-spacing: -.012em; color: #fff;
}
.wort__zeile { display: block; overflow: hidden; padding-top: .14em; margin-top: -.14em; }
.wort__zeile > span { display: block; }
.buehne__steuerung { position: absolute; z-index: 6; right: var(--rand); bottom: 28px; display: flex; gap: 2px; }
.steuer {
  width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--sand); color: var(--tinte); border: 0;
  transition: background-color .2s, color .2s;
}
.steuer:hover { background: var(--tinte); color: #fff; }
.steuer .icon { width: 20px; height: 20px; }
.steuer__play { display: none; }
.buehne.is-pausiert .steuer__pause { display: none; }
.buehne.is-pausiert .steuer__play { display: inline-flex; }

.leiste {
  position: absolute; z-index: 5; left: 0; bottom: 0;
  width: min(var(--leiste-breite), calc(100% - 200px));
  background: var(--sand); color: var(--tinte);
  padding: 26px var(--rand) 30px;
}
.leiste__marken { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 4px; height: var(--fortschritt-hoehe, 6px); }
.leiste__marken span { position: relative; flex: 1; background: rgba(27, 27, 29, .3); cursor: pointer; }
.leiste__marken span::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.leiste__marken span::after { content: ""; position: absolute; inset: 0; background: var(--tinte); transform: scaleX(0); transform-origin: left; }
.leiste__marken span.ist-vorbei::after { transform: scaleX(1); }
.leiste__marken span.ist-aktiv::after { background: var(--wein); animation: fortschritt var(--dauer, 7s) linear forwards; }
.buehne.is-pausiert .leiste__marken span.ist-aktiv::after,
.buehne.is-halt .leiste__marken span.ist-aktiv::after { animation-play-state: paused; }
.leiste__marken--fest { height: 3px; }
.leiste__marken--fest span { cursor: default; background: var(--wein); }
.leiste__marken--fest span::after { display: none; }
@keyframes fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.leiste__texte { display: grid; grid-template-columns: minmax(0, 1fr); }
.leiste__text { grid-area: 1 / 1; min-width: 0; visibility: hidden; opacity: 0; }
.leiste__text.is-active { visibility: visible; opacity: 1; }
.leiste__kopf {
  display: flex; align-items: center; gap: 14px; margin-bottom: 10px;
  font-family: var(--f-titel); font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
}
.leiste__zaehler { font-variant-numeric: tabular-nums; }
.leiste__name { font-family: var(--f-titel); font-weight: 600; font-size: 26px; line-height: 1.1; text-transform: uppercase; margin-bottom: 8px; }
.leiste__h1 { font-family: var(--f-titel); font-weight: 600; font-size: clamp(1.5rem, 2.3vw, 2.2rem); line-height: 1.06; text-transform: uppercase; margin-bottom: 12px; text-wrap: balance; }
.leiste__satz { max-width: 58ch; margin-bottom: 20px; color: var(--text-2); font-size: 16.5px; }
.krumen { display: flex; gap: 8px; margin-bottom: 10px; font-size: 14px; color: var(--text-2); }
.krumen a { text-decoration-color: var(--linie-stark); }

/* Signatur: Tafelwechsel */
.js .buehne__slide.is-active.is-rein { animation: tafel-rechts 1.05s var(--ease-tafel) both; }
.js .buehne__slide.is-active.is-rein[data-richtung="-1"] { animation-name: tafel-links; }
.js .buehne__slide.is-active.is-rein img { animation: tafel-bild 1.6s var(--ease-aus) both; }
@keyframes tafel-rechts { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes tafel-links { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tafel-bild { from { transform: scale(1.12); } to { transform: scale(1); } }
.js .buehne__slide.is-leaving img { animation: tafel-weg 1.05s var(--ease-tafel) both; }
@keyframes tafel-weg { to { transform: translateX(calc(var(--weg, -1) * 8%)); filter: brightness(.6); } }

.js .buehne__wort.is-active.is-rein .wort__zeile > span { animation: zeile-rein .9s var(--ease-aus) both; animation-delay: calc(.32s + var(--z, 0) * .09s); }
.js .buehne__wort.is-leaving .wort__zeile > span { animation: zeile-raus .45s var(--ease-tafel) both; animation-delay: calc(var(--z, 0) * .05s); }
@keyframes zeile-rein { from { transform: translateY(130%); } to { transform: none; } }
@keyframes zeile-raus { to { transform: translateY(-150%); opacity: 0; } }

.js .leiste__text { transition: opacity .25s, visibility 0s .25s; }
.js .leiste__text.is-active { transition: opacity .45s .3s, visibility 0s; }
.js .leiste__text.is-active > * { animation: text-rein .7s var(--ease-aus) both; }
.js .leiste__text.is-active > :nth-child(2) { animation-delay: .34s; }
.js .leiste__text.is-active > :nth-child(3) { animation-delay: .38s; }
.js .leiste__text.is-active > :nth-child(4) { animation-delay: .42s; }
.js .leiste__text.ohne-anim > * { animation: none; }
@keyframes text-rein { from { transform: translateY(10px); } to { transform: none; } }

.buehne--produkt { max-height: 880px; }
.buehne--produkt .leiste { width: min(900px, 100%); }

@media (max-width: 820px) {
  .buehne { height: auto; min-height: 0; max-height: none; }
  .buehne__flaeche {
    position: relative; height: 62svh; min-height: 400px; max-height: 620px;
    padding: 20px var(--rand) 88px;
  }
  .buehne--produkt .buehne__flaeche { height: 52svh; min-height: 340px; padding-bottom: 28px; }
  .kopf--ueber + main > .buehne:first-child { height: auto; }
  .kopf--ueber + main > .buehne:first-child .buehne__flaeche { height: calc(62svh + var(--kopf-h)); max-height: calc(620px + var(--kopf-h)); padding-top: calc(var(--kopf-h) + 20px); }
  .kopf--ueber + main > .buehne--produkt:first-child .buehne__flaeche { height: calc(52svh + var(--kopf-h)); }
  .buehne__steuerung { bottom: 20px; }
  .steuer { width: 46px; height: 46px; }
  .leiste, .buehne--produkt .leiste { position: relative; width: 100%; padding: 24px var(--rand) 32px; }
  .leiste__name { font-size: 22px; }
  .leiste__satz { font-size: 16px; }
}

/* ------------------------------------------------ Einstieg unter dem Slider: H1 und drei Fakten */

.einstieg { border-bottom: 1px solid var(--linie); }
.einstieg__innen {
  max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: 56px var(--rand) 52px;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 72px; align-items: center;
}
.einstieg__h1 {
  font-family: var(--f-titel); font-weight: 600; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.5vw, 2.3rem); line-height: 1.08; letter-spacing: .005em; text-wrap: balance; max-width: 24ch;
}
.einstieg__fakten { border-top: 1px solid var(--linie-stark); }
.einstieg__fakten li {
  display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--linie);
  font-family: var(--f-titel); font-weight: 500; font-size: 14.5px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3;
}
.einstieg__fakten li::before { content: ""; width: 18px; height: 2px; background: var(--wein); flex: none; }
@media (max-width: 900px) {
  .einstieg__innen { grid-template-columns: 1fr; padding: 40px var(--rand); }
}

/* ------------------------------------------------ Abschnitte allgemein */

.abschnitt__kopf {
  max-width: var(--max); margin: 0 auto 64px;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end;
}
.abschnitt__kopf p { color: var(--text-2); max-width: 46ch; }
.abschnitt__fuss { max-width: var(--max); margin: 56px auto 0; display: flex; justify-content: flex-start; }
.abschnitt__fuss--zeile { align-items: center; gap: 24px; flex-wrap: wrap; justify-content: space-between; border-top: 1px solid var(--linie); padding-top: 28px; }
@media (max-width: 820px) {
  .abschnitt__kopf { grid-template-columns: 1fr; margin-bottom: 32px; }
}

/* ------------------------------------------------ Montage oder Bausatz */

.wege { background: var(--sand); color: var(--tinte); padding: var(--abschnitt) var(--rand); }
.wege__innen { max-width: var(--max); margin: 0 auto; }
.wege .titel { max-width: 20ch; }
.wege__lead { margin-top: 20px; max-width: 52ch; color: var(--text-2); font-size: 18px; }
.wege__paar { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linie-stark); }
.weg { padding: 40px 48px 0 0; display: flex; flex-direction: column; align-items: flex-start; }
.weg + .weg { padding: 40px 0 0 48px; border-left: 1px solid var(--linie); }
.weg__bild { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 32px; background: var(--sand-2); }
.weg__bild img { width: 100%; height: 100%; object-fit: cover; }
.weg__titel { font-family: var(--f-titel); font-weight: 600; font-size: clamp(1.8rem, 2.8vw, 2.6rem); line-height: 1; text-transform: uppercase; margin-bottom: 16px; }
.weg p { color: var(--text-2); max-width: 46ch; margin-bottom: 28px; }
.weg .btn { margin-top: auto; }
.wege--kompakt .wege__paar { margin-top: 36px; }
.wege--kompakt .weg__titel { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
@media (max-width: 820px) {
  .wege__paar { grid-template-columns: 1fr; }
  .weg, .weg + .weg { padding: 32px 0 0; border-left: 0; }
  .weg + .weg { margin-top: 40px; border-top: 1px solid var(--linie); }
}

/* ------------------------------------------------ Katalog */

.katalog { padding: var(--abschnitt) var(--rand); }
.katalog__raster {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.katalog__eintrag { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--anthrazit); color: #fff; }
.katalog__bild, .katalog__bild img { width: 100%; height: 100%; }
.katalog__bild img { object-fit: cover; transition: transform 1.4s var(--ease-aus); }
.katalog__eintrag:hover .katalog__bild img { transform: scale(1.05); }
.katalog__eintrag::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(14, 14, 16, .82) 0%, rgba(14, 14, 16, .35) 42%, rgba(14, 14, 16, 0) 64%);
}
.katalog__text { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 22px 22px 22px; }
.katalog__name { font-family: var(--f-titel); font-weight: 600; font-size: clamp(17px, 1.32vw, 22px); hyphens: manual; line-height: 1.05; text-transform: uppercase; margin-bottom: 8px; }
.katalog__name a { text-decoration: none; }
.katalog__name a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.katalog__text p { font-size: 15px; line-height: 1.45; color: var(--hell-2); max-width: 34ch; }
.katalog__mehr {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--linie-hell);
  font-family: var(--f-titel); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.katalog__mehr .icon { width: 16px; height: 16px; transition: transform .35s var(--ease-aus); }
.katalog__eintrag:hover .katalog__mehr .icon { transform: translateX(4px); }
.katalog__knopf {
  position: absolute; z-index: 4; top: 0; right: 0;
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 16px;
  background: var(--sand); color: var(--tinte); border: 0;
  font-family: var(--f-titel); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
}
.katalog__knopf .icon { width: 18px; height: 18px; transition: transform .35s var(--ease-aus); }
.katalog__knopf[aria-expanded="true"] { background: var(--tinte); color: #fff; }
.katalog__knopf[aria-expanded="true"] .icon { transform: rotate(45deg); }
.katalog__varianten {
  position: absolute; z-index: 3; inset: 0; background: var(--sand); color: var(--tinte);
  padding: 64px 22px 22px; display: flex; flex-direction: column; justify-content: flex-end;
  clip-path: inset(100% 0 0 0); visibility: hidden;
  transition: clip-path .55s var(--ease-tafel), visibility 0s .55s;
}
.katalog__eintrag.is-offen .katalog__varianten { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .55s var(--ease-tafel); }
.katalog__varianten-titel { font-family: var(--f-titel); font-weight: 600; font-size: clamp(17px, 1.32vw, 22px); hyphens: manual; text-transform: uppercase; line-height: 1.05; margin-bottom: 14px; }
.katalog__varianten ul { border-top: 1px solid var(--linie-stark); }
.katalog__varianten li { border-bottom: 1px solid var(--linie); }
.katalog__varianten a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; text-decoration: none; font-size: 15.5px; line-height: 1.3; }
.katalog__varianten a .icon { width: 16px; height: 16px; transition: transform .3s var(--ease-aus); }
.katalog__varianten a:hover .icon { transform: translateX(4px); }
@media (max-width: 1100px) { .katalog__raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .katalog__raster { grid-template-columns: 1fr; }
  .katalog__eintrag { aspect-ratio: 4 / 4.2; }
}

/* ------------------------------------------------ Ablauf: senkrechte Zeitleiste */

.ablauf { background: var(--sand); padding: var(--abschnitt) var(--rand); }
.ablauf__innen { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 96px; align-items: start; }
.ablauf__kopf { position: sticky; top: calc(var(--kopf-h) + 48px); }
.ablauf__kopf .titel { max-width: 12ch; margin-bottom: 32px; }
.ablauf__strecke { position: relative; --nr-breite: 96px; }
.ablauf__linie { position: absolute; left: calc(var(--nr-breite) + 7px); top: 14px; bottom: 14px; width: 2px; background: var(--sand-3); }
.ablauf__linie span { position: absolute; inset: 0; background: var(--wein); transform: scaleY(var(--fortschritt, 1)); transform-origin: top; }
.js .ablauf__linie span { transform: scaleY(var(--fortschritt, 0)); }
.ablauf__liste { position: relative; }
.ablauf__schritt { display: grid; grid-template-columns: var(--nr-breite) 16px minmax(0, 1fr); column-gap: 0; align-items: start; }
.ablauf__schritt + .ablauf__schritt { margin-top: 56px; }
.ablauf__nr {
  grid-column: 1; grid-row: 1; padding-right: 24px; text-align: right;
  font-family: var(--f-titel); font-weight: 500; font-size: 15px; letter-spacing: .14em; line-height: 30px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.ablauf__marke {
  grid-column: 2; grid-row: 1; width: 16px; height: 16px; margin-top: 7px; position: relative; z-index: 1;
  background: var(--sand); border: 2px solid var(--tinte); transition: background-color .4s, border-color .4s;
}
.ablauf__schritt.ist-erreicht .ablauf__marke { background: var(--wein); border-color: var(--wein); }
.no-js .ablauf__marke, .ablauf__schritt.ist-erreicht .ablauf__nr { color: var(--tinte); }
.ablauf__text { grid-column: 3; grid-row: 1; padding-left: 28px; }
.ablauf__text h3 { font-family: var(--f-titel); font-weight: 600; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.12; text-transform: uppercase; margin-bottom: 10px; }
.ablauf__text p { color: var(--text-2); max-width: 52ch; }
.ablauf__text strong { color: var(--tinte); font-weight: 600; }
@media (max-width: 900px) {
  .ablauf__innen { grid-template-columns: 1fr; }
  .ablauf__kopf { position: static; }
  .ablauf__strecke { --nr-breite: 0px; }
  .ablauf__nr { display: none; }
  .ablauf__linie { left: 7px; }
  .ablauf__text { padding-left: 20px; }
}

/* ------------------------------------------------ Team und Belege */

.team { padding: var(--abschnitt) var(--rand); }
.team__innen { max-width: var(--max); margin: 0 auto; }
.team__kopf { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px 64px; align-items: end; }
.team__kopf p { color: var(--text-2); max-width: 52ch; font-size: 18px; }
.team__personen { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.person { display: flex; gap: 28px; align-items: flex-end; background: var(--sand); padding: 28px; }
.person__bild {
  flex: none; width: 132px; aspect-ratio: 4 / 5; display: flex; align-items: flex-end; padding: 12px 14px;
  background: var(--anthrazit); color: #fff; border-top: 2px solid var(--wein);
  font-family: var(--f-titel); font-weight: 600; font-size: 46px; line-height: 1; letter-spacing: .02em;
}
.person h3 { font-family: var(--f-titel); font-weight: 600; font-size: 25px; line-height: 1.05; text-transform: uppercase; }
.person p { color: var(--text-2); margin: 4px 0 14px; }
.person a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-titel); font-weight: 500; font-size: 18px; letter-spacing: .03em; text-decoration-color: var(--linie-stark); font-variant-numeric: tabular-nums; }
.person a .icon { width: 18px; height: 18px; }
.belege { margin-top: 72px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linie-stark); }
.beleg { padding: 32px 32px 0 0; display: flex; flex-direction: column; gap: 18px; }
.beleg + .beleg { padding-left: 32px; border-left: 1px solid var(--linie); }
.beleg h3 { font-family: var(--f-titel); font-weight: 600; font-size: 18px; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 6px; }
.beleg p { color: var(--text-2); font-size: 15.5px; max-width: 40ch; }
.beleg p a { color: var(--tinte); }
.beleg__siegel { width: 76px; height: 76px; object-fit: contain; background: #fff; padding: 8px; border: 1px solid var(--linie); }
.beleg__wert { display: flex; align-items: center; gap: 16px; height: 76px; }
.beleg__zahl { font-family: var(--f-titel); font-weight: 600; font-size: 60px; line-height: 1; font-variant-numeric: tabular-nums; }
.beleg__sterne { display: flex; gap: 2px; }
.beleg__sterne .icon { width: 18px; height: 18px; fill: var(--tinte); stroke-width: 1; }
@media (max-width: 900px) {
  .team__kopf, .team__personen, .belege { grid-template-columns: 1fr; }
  .person { padding: 20px; gap: 20px; }
  .person__bild { width: 96px; font-size: 36px; }
  .beleg, .beleg + .beleg { padding: 28px 0; border-left: 0; }
  .beleg + .beleg { border-top: 1px solid var(--linie); }
}

/* ------------------------------------------------ Projekte */

.projekte { padding: 0 var(--rand) var(--abschnitt); }
.projekte > .abschnitt__kopf { padding-top: calc(var(--abschnitt) * .8); border-top: 1px solid var(--linie); }
.projekte__raster {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(150px, 17vw, 260px); gap: 16px;
}
.projekte__bild { position: relative; overflow: hidden; background: var(--sand-2); grid-column: span 2; }
.projekte__bild--0 { grid-column: span 3; grid-row: span 2; }
.projekte__bild--1, .projekte__bild--2 { grid-column: span 3; }
.projekte__bild picture, .projekte__bild img { width: 100%; height: 100%; }
.projekte__bild img { object-fit: cover; transition: transform 1.4s var(--ease-aus); }
.projekte__bild:hover img { transform: scale(1.04); }
.projekte__bild figcaption {
  position: absolute; left: 0; bottom: 0; max-width: calc(100% - 24px);
  background: var(--sand); padding: 8px 14px;
  font-family: var(--f-titel); font-weight: 500; font-size: 13px; letter-spacing: .07em; text-transform: uppercase; line-height: 1.3;
}
@media (max-width: 820px) {
  .projekte__raster { grid-template-columns: 1fr 1fr; grid-auto-rows: 44vw; }
  .projekte__bild, .projekte__bild--1, .projekte__bild--2 { grid-column: span 1; }
  .projekte__bild--0 { grid-column: span 2; grid-row: span 1; }
  .projekte__bild figcaption { font-size: 11.5px; padding: 6px 10px; letter-spacing: .03em; hyphens: manual; overflow-wrap: break-word; }
}

/* ------------------------------------------------ Einzugsgebiet */

.gebiet { background: var(--sand); padding: var(--abschnitt) var(--rand); }
.gebiet__innen { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px 80px; align-items: center; }
.gebiet__text > p { margin-top: 24px; max-width: 52ch; color: var(--text-2); font-size: 18px; }
.gebiet__orte { margin-top: 32px; display: flex; flex-wrap: wrap; border-top: 1px solid var(--linie); }
.gebiet__orte li {
  padding: 12px 18px 12px 0; margin-right: 18px; border-bottom: 1px solid var(--linie);
  font-family: var(--f-titel); font-weight: 500; font-size: 15px; letter-spacing: .05em; text-transform: uppercase;
}
.gebiet__karte figcaption { margin-top: 12px; font-size: 13.5px; color: var(--text-2); }
@media (max-width: 900px) { .gebiet__innen { grid-template-columns: 1fr; } }

/* ------------------------------------------------ Fragen */

.fragen { padding: var(--abschnitt) var(--rand); }
.fragen__innen { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 72px; align-items: start; }
.skizze { position: sticky; top: calc(var(--kopf-h) + 32px); border: 1px solid var(--linie-stark); padding: 28px; }
.skizze__titel { font-family: var(--f-titel); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 18px; }
.skizze svg { width: 100%; height: auto; }
.skizze__haus path { fill: none; stroke: var(--tinte); stroke-width: 1.6; }
.skizze__auto { stroke-opacity: .5; }
.skizze__boden { stroke: var(--tinte); stroke-width: 1; stroke-opacity: .5; }
.skizze__mass path { fill: none; stroke: var(--wein); stroke-width: 1.2; }
.skizze__mass text { font-family: var(--f-titel); font-weight: 600; font-size: 15px; fill: var(--wein); paint-order: stroke; stroke: var(--papier); stroke-width: 6px; }
.skizze__label { font-family: var(--f-titel); font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; fill: var(--text-2); }
.skizze__schritte { margin-top: 22px; counter-reset: s; border-top: 1px solid var(--linie); }
.skizze__schritte li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; padding: 12px 0; border-bottom: 1px solid var(--linie); font-size: 15px; line-height: 1.5; color: var(--text-2); }
.skizze__schritte li::before { content: counter(s); font-family: var(--f-titel); font-weight: 600; font-size: 20px; line-height: 1.2; color: var(--tinte); }
.skizze__schritte strong { color: var(--tinte); font-weight: 600; }
.fragen__liste { border-top: 1px solid var(--linie-stark); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; cursor: pointer; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary h3 { font-family: var(--f-text); font-weight: 600; font-size: 18.5px; line-height: 1.35; }
.frage summary:hover h3 { text-decoration: underline; text-decoration-color: var(--wein); text-underline-offset: .22em; }
.frage__zeichen { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--linie-stark); transition: background-color .2s, color .2s; }
.frage__zeichen .icon { width: 18px; height: 18px; transition: transform .35s var(--ease-aus); }
.frage[open] .frage__zeichen { background: var(--tinte); color: #fff; border-color: var(--tinte); }
.frage[open] .frage__zeichen .icon { transform: rotate(45deg); }
.frage__antwort { padding: 0 60px 24px 0; overflow: hidden; }
.frage__antwort p { color: var(--text-2); max-width: 64ch; }
.fragen--produkt { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; }
.fragen--produkt .abschnitt__kopf { margin: 0; }
@media (max-width: 960px) { .fragen--produkt { grid-template-columns: 1fr; } }
@media (max-width: 960px) {
  .fragen__innen { grid-template-columns: 1fr; }
  .skizze { position: static; padding: 20px; }
  .frage__antwort { padding-right: 0; }
}

/* ------------------------------------------------ Abschluss */

.abschluss { background: var(--sand); padding: var(--abschnitt) var(--rand); }
.abschluss__innen { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px 64px; align-items: end; }
.abschluss h2 { font-family: var(--f-titel); font-weight: 600; font-size: clamp(1.9rem, 3.3vw, 3.1rem); line-height: 1; text-transform: uppercase; text-wrap: balance; }
.abschluss p { color: var(--text-2); max-width: 52ch; margin-bottom: 24px; font-size: 18px; }
.abschluss--bild { position: relative; padding: 0; min-height: min(86svh, 860px); display: flex; align-items: flex-end; background: var(--tinte); }
.abschluss__bild { position: absolute; inset: 0; }
.abschluss__bild img { width: 100%; height: 100%; object-fit: cover; }
.abschluss__leiste { position: relative; width: min(980px, 100%); background: var(--sand); padding: 40px var(--rand) 44px; }
.abschluss__leiste h2 { margin-bottom: 16px; }
@media (max-width: 820px) {
  .abschluss__innen { grid-template-columns: 1fr; }
  .abschluss--bild { display: block; min-height: 0; }
  .abschluss__bild { position: relative; height: 46svh; }
  .abschluss__leiste { width: 100%; padding: 32px var(--rand) 40px; }
}

/* ------------------------------------------------ Produktseite */

.randnotiz { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: 40px var(--rand) 0; }
.randnotiz p { border: 1px solid var(--linie-stark); padding: 18px 22px; max-width: 76ch; font-size: 16px; }
.bloecke { padding: calc(var(--abschnitt) * .6) 0 calc(var(--abschnitt) * .7); }
.block {
  max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: 80px var(--rand);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 72px; align-items: start;
}
.block { position: relative; }
.block + .block::before { content: ""; position: absolute; top: 0; left: var(--rand); right: var(--rand); height: 1px; background: var(--linie-stark); }
.block__titel { position: sticky; top: calc(var(--kopf-h) + 28px); font-family: var(--f-titel); font-weight: 600; font-size: clamp(1.5rem, 2.3vw, 2.15rem); line-height: 1.05; text-transform: uppercase; text-wrap: balance; }
.block__inhalt > * + * { margin-top: 24px; }
.eintraege { border-top: 1px solid var(--linie); }
.eintraege > li { padding: 20px 0; border-bottom: 1px solid var(--linie); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 8px 32px; }
.eintraege > li > div { display: contents; }
.eintraege h3, .eintraege h4 { font-family: var(--f-titel); font-weight: 600; font-size: 19px; line-height: 1.15; text-transform: uppercase; }
.eintraege p { color: var(--text-2); }
.eintraege .pfeil-link { grid-column: 2; margin-top: 0; justify-self: start; }
.eintraege--bild { border-top: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 36px 24px; }
.eintraege--bild > li { display: block; padding: 0; border: 0; }
.eintraege--bild > li > div { display: block; padding-top: 14px; border-top: 1px solid var(--linie-stark); margin-top: 14px; }
.eintraege--bild h3, .eintraege--bild h4 { margin-bottom: 6px; }
.eintraege--bild .pfeil-link { margin-top: 10px; }
.eintraege--4 { grid-template-columns: repeat(2, 1fr); }
.eintraege--freisteller .eintrag__bild { background: var(--sand); }
.eintraege--freisteller .eintrag__bild img { mix-blend-mode: multiply; }
.eintrag__bild { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand-2); }
.eintrag__bild img { width: 100%; height: 100%; object-fit: cover; }
.punkte { border-top: 1px solid var(--linie); }
.punkte li { display: grid; grid-template-columns: 30px 1fr; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.punkte li::before { content: ""; width: 14px; height: 1.5px; background: var(--tinte); margin-top: .8em; }
.daten { border-top: 1px solid var(--linie); }
.daten div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--linie); }
.daten dt { font-family: var(--f-titel); font-weight: 500; font-size: 14px; letter-spacing: .07em; text-transform: uppercase; padding-top: 2px; }
.daten dd { margin: 0; font-variant-numeric: tabular-nums; }
.tabelle { overflow-x: auto; }
.tabelle table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tabelle th, .tabelle td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle thead th { font-family: var(--f-titel); font-weight: 600; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--linie-stark); }
.tabelle tbody th { font-family: var(--f-titel); font-weight: 500; font-size: 14px; letter-spacing: .07em; text-transform: uppercase; }
.baustein + .baustein { margin-top: 56px; }
.baustein__titel { font-family: var(--f-titel); font-weight: 600; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--linie-stark); }
.baustein > * + * { margin-top: 20px; }
.baustein__titel + * { margin-top: 0; }
.farben { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.farbe__bild { display: block; aspect-ratio: 1; overflow: hidden; margin-bottom: 10px; background: var(--sand); }
.farbe__bild img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.farbe__name { display: block; font-family: var(--f-titel); font-weight: 500; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.2; }
.farbe__ral { display: block; font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.quer { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 28px; align-items: center; }
.quer picture { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand); }
.quer img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.linkzeilen { border-top: 1px solid var(--linie); }
.linkzeilen a { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) 24px; gap: 4px 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
.linkzeilen strong { font-family: var(--f-titel); font-weight: 600; font-size: 17px; text-transform: uppercase; }
.linkzeilen span { color: var(--text-2); font-size: 16px; }
.linkzeilen .icon { transition: transform .35s var(--ease-aus); }
.linkzeilen a:hover .icon { transform: translateX(4px); }
.linkzeilen a:hover strong { text-decoration: underline; text-decoration-color: var(--wein); text-underline-offset: .22em; }
.hinweis { color: var(--text-2); font-size: 16px; max-width: 62ch; }
@media (max-width: 900px) {
  .block { grid-template-columns: 1fr; padding: 48px var(--rand); }
  .block__titel { position: static; }
  .eintraege > li { grid-template-columns: 1fr; }
  .eintraege .pfeil-link { grid-column: 1; }
  .farben { grid-template-columns: repeat(3, 1fr); }
  .quer { grid-template-columns: 1fr; }
  .linkzeilen a { grid-template-columns: 1fr 24px; }
  .linkzeilen span { grid-column: 1; grid-row: 2; }
  .linkzeilen .icon { grid-row: 1 / span 2; grid-column: 2; }
}
@media (max-width: 560px) { .eintraege--4 { grid-template-columns: 1fr; } }

.kacheln { display: grid; gap: 16px; }
.kacheln--3 { grid-template-columns: repeat(3, 1fr); }
.kacheln--5 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.kachel { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; color: #fff; text-decoration: none; background: var(--anthrazit); }
.kacheln--5 .kachel { aspect-ratio: 3 / 4; }
.kachel__bild, .kachel__bild img { width: 100%; height: 100%; }
.kachel__bild img { object-fit: cover; transition: transform 1.4s var(--ease-aus); }
.kachel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 14, 16, .8) 0%, rgba(14, 14, 16, 0) 55%); }
.kachel:hover .kachel__bild img { transform: scale(1.05); }
.kachel__name { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 50px; font-family: var(--f-titel); font-weight: 600; font-size: 21px; line-height: 1.08; text-transform: uppercase; }
.kacheln--5 .kachel__name { font-size: 17px; left: 14px; right: 14px; bottom: 44px; }
.kachel__mehr { position: absolute; z-index: 1; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-titel); font-weight: 500; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.kacheln--5 .kachel__mehr { left: 14px; bottom: 14px; }
.kachel__mehr .icon { width: 15px; height: 15px; transition: transform .35s var(--ease-aus); }
.kachel:hover .kachel__mehr .icon { transform: translateX(4px); }
@media (max-width: 820px) { .kacheln--3 { grid-template-columns: 1fr; } .kacheln--3 .kachel { aspect-ratio: 16 / 11; } }

.galerie { background: var(--papier); color: var(--tinte); padding: var(--abschnitt) var(--rand); }
.galerie > .titel, .galerie__raster { max-width: var(--max); margin-left: auto; margin-right: auto; }
.galerie > .titel { margin-bottom: 36px; }
.galerie__raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 16px; }
.galerie__raster--1 { grid-template-columns: minmax(0, 900px); }
.galerie__raster--2 { grid-template-columns: 1fr 1fr; }
.galerie__raster--4 { grid-template-columns: repeat(2, 1fr); }
.galerie figure picture { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand-2); }
.galerie figure img { width: 100%; height: 100%; object-fit: cover; }
.galerie figcaption { padding-top: 10px; font-size: 14px; color: var(--text-2); }
@media (max-width: 820px) { .galerie__raster, .galerie__raster--2, .galerie__raster--4 { grid-template-columns: 1fr; } }

.verwandt { padding: var(--abschnitt) var(--rand); }
.verwandt > .titel, .verwandt > .kacheln { max-width: var(--max); margin-left: auto; margin-right: auto; }
.verwandt > .titel { margin-bottom: 32px; }

/* ------------------------------------------------ Seitenköpfe, Übersicht, Kontakt */

.seitenkopf { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--rand) 48px; }
.seitenkopf h1 { max-width: 18ch; }
.seitenkopf > p { margin-top: 20px; max-width: 58ch; color: var(--text-2); font-size: 18px; }
.seitenkopf .knoepfe { margin-top: 32px; }
.seitenkopf--fehler { min-height: 50svh; }
.seitenkopf--recht { min-height: 0; padding-bottom: 24px; }
.recht { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand) var(--abschnitt); }
.recht > * { max-width: 860px; }
.recht h2 { font-family: var(--f-titel); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.1; text-transform: uppercase; margin: 48px 0 14px; padding-top: 20px; border-top: 1px solid var(--linie); }
.recht h3 { font-family: var(--f-titel); font-weight: 600; font-size: 17px; letter-spacing: .02em; text-transform: uppercase; margin: 24px 0 8px; }
.recht p { color: var(--text-2); max-width: 68ch; }
.recht p + p { margin-top: 12px; }
.recht a { color: var(--tinte); overflow-wrap: anywhere; }
.recht__stand { font-variant-numeric: tabular-nums; }
.recht__spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 8px 48px; }
.recht__spalten h3 { margin-top: 8px; }
.offen { background: #FFE58A; color: var(--tinte); padding: 0 4px; }

.gruppen { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand) var(--abschnitt); }
.gruppen--nach-buehne { padding-top: clamp(48px, 7vw, 96px); }
.gruppe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; padding: 48px 0; border-top: 1px solid var(--linie-stark); }
.gruppe__bild { display: block; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 20px; }
.gruppe__bild img { width: 100%; height: 100%; object-fit: cover; }
.gruppe__kopf p { margin-top: 10px; color: var(--text-2); }
.gruppe__liste { border-top: 1px solid var(--linie); align-self: start; }
.gruppe__liste a { display: grid; grid-template-columns: 88px 1fr 24px; gap: 20px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
.gruppe__liste span { font-family: var(--f-titel); font-weight: 600; font-size: 19px; text-transform: uppercase; line-height: 1.15; }
.liste__bild { display: block; width: 88px; aspect-ratio: 1; overflow: hidden; }
.liste__bild img { width: 100%; height: 100%; object-fit: cover; }
.gruppe__liste .icon { transition: transform .35s var(--ease-aus); }
.gruppe__liste a:hover .icon { transform: translateX(4px); }
.gruppe__liste a:hover span { text-decoration: underline; text-decoration-color: var(--wein); text-underline-offset: .2em; }
@media (max-width: 900px) { .gruppe { grid-template-columns: 1fr; } .gruppe__liste a { grid-template-columns: 64px 1fr 24px; } .liste__bild { width: 64px; } }

.kontakte { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: 24px var(--rand) var(--abschnitt); display: grid; grid-template-columns: repeat(4, 1fr); }
.kontakt { padding: 28px 28px 28px 0; border-top: 2px solid var(--tinte); }
.kontakt + .kontakt { padding-left: 28px; border-left: 1px solid var(--linie); }
.kontakt h2 { font-family: var(--f-titel); font-weight: 500; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); margin-bottom: 14px; }
.kontakt__name { font-family: var(--f-titel); font-weight: 600; font-size: 20px; text-transform: uppercase; }
.kontakt__nr { display: inline-block; margin: 6px 0 4px; font-family: var(--f-titel); font-weight: 600; font-size: 26px; letter-spacing: .01em; text-decoration-color: var(--linie-stark); font-variant-numeric: tabular-nums; }
.kontakt__nr--mail { font-size: 21px; }
.kontakt address { font-size: 18px; }
@media (max-width: 960px) { .kontakte { grid-template-columns: 1fr 1fr; } .kontakt:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .kontakte { grid-template-columns: 1fr; } .kontakt, .kontakt + .kontakt { padding: 24px 0; border-left: 0; } }

/* ------------------------------------------------ Anfrage */

.anfrage {
  max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--rand) var(--abschnitt);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px 80px; align-items: start;
}
.anfrage__seite { position: sticky; top: calc(var(--kopf-h) + 32px); }
.anfrage__seite > p { margin-top: 18px; color: var(--text-2); max-width: 40ch; }
.schritte { margin-top: 36px; border-top: 1px solid var(--linie); }
.schritte li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--linie); font-family: var(--f-titel); font-weight: 500; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); }
.schritte__nr { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--linie-stark); font-weight: 600; font-variant-numeric: tabular-nums; }
.schritte li.ist-aktiv { color: var(--tinte); }
.schritte li.ist-aktiv .schritte__nr { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.schritte li.ist-fertig .schritte__nr { border-color: var(--wein); color: var(--wein); }
.anfrage__direkt { margin-top: 40px; display: grid; gap: 8px; justify-items: start; }
.anfrage__direkt p { font-size: 15px; color: var(--text-2); }
.anfrage__direkt a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-titel); font-weight: 500; font-size: 17px; letter-spacing: .03em; text-decoration-color: var(--linie-stark); }
.anfrage__direkt .icon { width: 18px; height: 18px; }
.anfrage__form { position: relative; padding: clamp(28px, 4vw, 56px) 0 0; }
.form__marken { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 4px; height: var(--fortschritt-hoehe, 6px); }
.form__marken span { flex: 1; background: var(--sand-3); transition: background-color .4s var(--ease-aus); }
.form__marken span.is-an { background: var(--tinte); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.form__schritt { border: 0; padding: 0; margin: 0; min-width: 0; }
.js .form__schritt { display: none; }
.js .form__schritt.is-active { display: block; animation: text-rein .5s var(--ease-aus) both; }
.form__schritt + .form__schritt { margin-top: 56px; }
.js .form__schritt + .form__schritt { margin-top: 0; }
.form__frage { font-family: var(--f-titel); font-weight: 600; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.05; text-transform: uppercase; margin-bottom: 8px; padding: 0; }
.form__frage:focus { outline: none; }
.form__hilfe { font-size: 14.5px; color: var(--text-2); margin-top: 6px; }
.form__schritt > .form__hilfe:first-of-type { margin-bottom: 20px; }
.form__reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.form__reihe--plz { grid-template-columns: 2fr 3fr; }
.feld { margin-top: 26px; }
.feld label:not(.wahl), .feld__titel {
  display: block; margin-bottom: 4px;
  font-family: var(--f-titel); font-weight: 500; font-size: 13.5px; letter-spacing: .08em; text-transform: uppercase;
}
.optional { font-family: var(--f-text); font-weight: 400; font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text-2); margin-left: 6px; }
.feld input:not([type="checkbox"]):not([type="radio"]), .feld textarea, .feld select {
  width: 100%; padding: 12px 0 10px; border: 0; border-bottom: 1.5px solid var(--linie-stark); border-radius: 0;
  background: transparent; color: var(--tinte); font: inherit; font-size: 18px; caret-color: var(--wein);
  transition: border-color .2s;
}
.feld textarea { resize: vertical; min-height: 96px; }
.feld select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1B1D' stroke-width='1.75'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; background-size: 20px; padding-right: 28px; }
.feld input:hover, .feld textarea:hover, .feld select:hover { border-bottom-color: var(--tinte); }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; border-bottom: 2px solid var(--tinte); margin-bottom: -.5px; }
.feld input:focus-visible, .feld textarea:focus-visible, .feld select:focus-visible { box-shadow: 0 2px 0 0 var(--wein); }
.feld ::placeholder { color: #5E5C62; opacity: 1; }
.feld__fehler { display: none; margin-top: 8px; color: var(--wein); font-size: 14.5px; font-weight: 500; }
.feld.has-error .feld__fehler { display: block; }
.feld.has-error input, .feld.has-error textarea { border-bottom-color: var(--wein); }
.feld--gruppe { margin-top: 18px; }
.wahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0 28px; }
.wahlen--zeile { display: flex; flex-wrap: wrap; column-gap: 28px; }
.wahlen--spalte { grid-template-columns: 1fr; max-width: 560px; }
.wahl { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: center; padding: 15px 4px; border: 0; border-bottom: 1px solid var(--linie); background: none; cursor: pointer; transition: border-color .15s, background-color .15s; line-height: 1.35; }
.wahl:hover { border-bottom-color: var(--tinte); }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl__kasten { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--tinte); background: var(--sand); }
.wahl__kasten .icon { width: 16px; height: 16px; opacity: 0; stroke-width: 2.4; }
.wahl:has(input:checked) { border-bottom-color: var(--tinte); font-weight: 600; }
.wahl input:checked + .wahl__kasten { background: var(--tinte); color: #fff; }
.wahl input:checked + .wahl__kasten .icon { opacity: 1; }
.wahl:has(input:focus-visible) { outline: 2px solid var(--wein); outline-offset: 2px; }
.wahl--rund .wahl__kasten { border-radius: 50%; }
.wahl--klein { padding: 10px 14px; }
.wahl--check { border: 0; padding: 0; background: none; align-items: start; font-size: 15.5px; }
.wahl--check:has(input:checked) { box-shadow: none; font-weight: 400; }
.feld.has-error .wahl__kasten, .feld.has-error .wahl { border-color: var(--wein); }
.form__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linie-stark); }
.form__knoepfe [data-weiter], .form__knoepfe [data-senden] { margin-left: auto; }
.form-status { margin-top: 16px; }
.form-status.is-error { color: var(--wein); font-weight: 500; }
.form__danke .titel { margin-bottom: 16px; }
.form__danke p { margin-bottom: 28px; max-width: 52ch; color: var(--text-2); }
.form__danke:focus { outline: none; }
#form-wrap.is-sent form { display: none; }
@media (max-width: 900px) {
  .anfrage { grid-template-columns: 1fr; gap: 32px; }
  .anfrage__seite { position: static; }
  .schritte, .anfrage__direkt { display: none; }
  .form__reihe, .form__reihe--plz { grid-template-columns: 1fr; }
}

/* ------------------------------------------------ Einwilligung (Google Analytics nur nach Zustimmung) */

.einwilligung {
  position: fixed; z-index: 60; right: var(--rand); bottom: 112px; width: min(500px, calc(100% - 2 * var(--rand)));
  background: var(--papier); color: var(--tinte); border: 1px solid var(--linie-stark); border-top: 3px solid var(--tinte);
  box-shadow: 0 24px 48px -24px rgba(27, 27, 29, .45);
  padding: 24px 24px 22px;
}
.einwilligung[hidden] { display: none; }
.einwilligung__titel { font-family: var(--f-titel); font-weight: 600; font-size: 20px; line-height: 1.1; text-transform: uppercase; margin-bottom: 10px; }
.einwilligung p { font-size: 15px; color: var(--text-2); }
.einwilligung p a { color: var(--tinte); }
.einwilligung .knoepfe { margin-top: 18px; }
.einwilligung .btn { min-width: 140px; justify-content: center; }
.einwilligung-offen .schwebe { visibility: hidden; }
@media (max-width: 820px) { .einwilligung { bottom: 24px; } }
.fuss__knopf { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
@media (max-width: 560px) {
  .einwilligung { left: 0; right: 0; bottom: 0; width: 100%; border-left: 0; border-right: 0; border-bottom: 0; padding: 20px var(--rand) 22px; }
}

/* ------------------------------------------------ Fußzeile */

.fuss { background: var(--anthrazit); color: var(--hell-2); --fokus: #fff; font-size: 15.5px; }
.fuss__innen { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: 80px var(--rand) 56px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px 48px; }
.fuss__marke img { width: 156px; height: auto; margin-bottom: 20px; }
.fuss__marke p { max-width: 36ch; }
.fuss h2 { font-family: var(--f-titel); font-weight: 500; font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--linie-hell); }
.fuss address { margin-bottom: 14px; }
.fuss__spalte li + li { margin-top: 6px; }
.fuss a { color: #fff; text-decoration-color: rgba(255, 255, 255, .35); }
.fuss a:hover { text-decoration-color: #fff; }
.fuss li a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.fuss li a:hover { text-decoration: underline; }
.fuss li .icon { width: 18px; height: 18px; }
.fuss__unten { max-width: calc(var(--max) + 2 * var(--rand)); margin: 0 auto; padding: 20px var(--rand) 28px; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--linie-hell); font-size: 14px; }
.fuss__unten ul { display: flex; gap: 24px; align-items: center; }
.fuss__unten p, .fuss__unten li { margin: 0; line-height: 1.5; }
@media (max-width: 960px) { .fuss__innen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fuss__innen { grid-template-columns: 1fr; padding-top: 56px; } .fuss__unten { flex-direction: column; } }

/* ------------------------------------------------ Schwebender Knopf (mobil) */

.schwebe { display: none; }
@media (max-width: 1080px) {
  .schwebe {
    display: inline-flex; position: fixed; z-index: 40; right: 16px; bottom: 16px;
    box-shadow: 0 12px 28px -10px rgba(27, 27, 29, .55);
    transform: translateY(140%); transition: transform .45s var(--ease-aus);
  }
  .schwebe.is-sichtbar { transform: none; }
  .fuss { padding-bottom: 72px; }
}

/* ------------------------------------------------ Weniger Bewegung */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .ablauf__linie span { transform: scaleX(1); }
}

/* Slider: Ohne Titel in der Leiste trägt der Satz den Inhalt */
.buehne--slider .leiste__satz { color: var(--tinte); font-size: 18px; line-height: 1.5; max-width: 52ch; }
@media (max-width: 820px) { .buehne--slider .leiste__satz { font-size: 16.5px; } }

/* Karte „Wo wir montieren“ (Leaflet, eigene Kacheln) */
.karte { position: relative; z-index: 0; isolation: isolate; width: 100%; aspect-ratio: 1 / 1; max-height: 640px; background: var(--sand); border: 1px solid var(--linie); }
.karte.leaflet-container { font-family: var(--f-text); background: var(--sand); }
.karte .leaflet-bar { border: 1px solid var(--linie-stark); border-radius: 0; box-shadow: none; }
.karte .leaflet-bar a { width: 40px; height: 40px; border-radius: 0 !important; background: var(--papier); color: var(--tinte); font: 400 22px/38px var(--f-text); }
.karte .leaflet-bar a:hover { background: var(--tinte); color: #fff; }
.karte .leaflet-bar a.leaflet-disabled { color: #9a979c; background: var(--papier); }
.karte .leaflet-control-attribution { background: rgba(250, 248, 244, .88); color: var(--text-2); font-size: 11px; padding: 2px 8px; }
.karte .leaflet-control-attribution a { color: var(--tinte); }
.karte-ort { width: 0; height: 0; }
.karte-ort__punkt { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--tinte); box-shadow: 0 0 0 2px var(--papier); }
.karte-ort--gross .karte-ort__punkt { left: -6px; top: -6px; width: 12px; height: 12px; }
.karte-ort--sitz .karte-ort__punkt { left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 0; background: var(--wein); }
.karte-ort__name {
  position: absolute; left: 12px; top: -11px; white-space: nowrap;
  font-size: 14px; line-height: 22px; color: var(--tinte);
  text-shadow: 0 0 3px var(--papier), 0 0 3px var(--papier), 0 0 6px var(--papier);
}
.karte-ort--links .karte-ort__name { left: auto; right: 12px; }
.karte-ort--unten .karte-ort__name { left: 0; top: 8px; transform: translateX(-50%); }
.karte-ort--oben .karte-ort__name { left: 0; top: -32px; transform: translateX(-50%); }
.karte-ort--gross .karte-ort__name { font-family: var(--f-titel); font-weight: 600; font-size: 16px; letter-spacing: .03em; text-transform: uppercase; }
.karte-ort--sitz .karte-ort__name { right: 16px; font-family: var(--f-titel); font-weight: 600; font-size: 17px; text-transform: uppercase; color: var(--wein); }
.karte-mass { width: auto !important; height: auto !important; white-space: nowrap; font-family: var(--f-titel); font-weight: 500; font-size: 12px; letter-spacing: .12em; color: var(--wein); text-shadow: 0 0 3px var(--papier), 0 0 3px var(--papier); }
@media (max-width: 900px) { .karte { aspect-ratio: 4 / 5; } }
.karte--weit .karte-ort:not(.karte-ort--gross):not(.karte-ort--sitz) .karte-ort__name { display: none; }

/* Lange Wörter wie „Terrassenüberdachung“ passen auch auf schmale Handys */
.abschnitt__kopf > *, .team__kopf > *, .gebiet__innen > *, .fragen__innen > * { min-width: 0; }
@media (max-width: 560px) {
  .titel--gross, .abschluss h2 { font-size: clamp(1.45rem, 6.6vw, 1.9rem); }
  .titel, .abschluss h2 { overflow-wrap: break-word; hyphens: auto; }
}
.block > *, .gruppe > *, .gruppe__kopf > *, .quer > *, .anfrage > * { min-width: 0; }
.farben { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .farben { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .titel:not(.titel--gross), .block__titel { font-size: clamp(1.3rem, 5.6vw, 1.6rem); }
  .farbe__name { font-size: 12.5px; overflow-wrap: anywhere; }
}
.gruppe__liste a { grid-template-columns: 88px minmax(0, 1fr) 24px; }
.gruppe__liste span { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 900px) { .gruppe__liste a { grid-template-columns: 64px minmax(0, 1fr) 24px; gap: 14px; } }

/* Nur die Belege (Zertifikat, Google, Region), ohne Personenkarten */
.team--belege { padding: calc(var(--abschnitt) * .7) var(--rand); }
.team--belege .belege { margin-top: 0; }

/* Aktueller Menüpunkt: feine weinrote Linie unter der Gruppe, Eintrag im Panel markiert */
.nav__gruppe.is-aktiv > .nav__knopf::after, .nav__link.is-aktiv::after { transform: scaleX(1); height: 2px; }
.nav__panel a.is-aktiv { font-weight: 600; text-decoration: underline; text-decoration-color: var(--wein); text-decoration-thickness: 2px; text-underline-offset: .3em; }
@media (max-width: 1080px) {
  .nav__gruppe.is-aktiv > .nav__knopf, .nav__link.is-aktiv { color: var(--wein); }
}