.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 60; padding: .75rem 1.25rem;
  background: #fff; color: #000; border-radius: .5rem; outline: 3px solid #000; outline-offset: -3px; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.6; }
.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.sec { padding: 4rem 0; }
img { max-width: 100%; height: auto; }
html {
  --max: 1320px;
  --rand: clamp(20px, 4vw, 56px);
  --luft: clamp(88px, 12vw, 168px);
  --blatt: clamp(28px, 4vw, 56px);
  --r-pille: 999px;
  --r-gross: 28px;
  --r-klein: 12px;
  --ease-aus: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inaus: cubic-bezier(0.65, 0, 0.35, 1);
  --font-display: ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --kopf-oben: 0px;
  --kopf-hoehe: 5.5rem;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
html.menue-offen { overflow: hidden; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--akzent); color: var(--auf-akzent); }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
h1 { font-size: clamp(2.3rem, 5vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.3rem); }
h3 { font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1.12; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
p, li { overflow-wrap: break-word; hyphens: auto; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.lead { font-size: clamp(1.1rem, 1.35vw, 1.3rem); line-height: 1.55; color: var(--text-gedaempft); max-width: 46ch; }
.kicker { font: 500 0.78rem/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent-tief); }
.akzent { color: var(--akzent-tief); }
.dunkel { background: var(--dunkel); color: var(--text-hell); }
.dunkel .lead { color: var(--text-hell-gedaempft); }
.dunkel .kicker, .dunkel .akzent { color: var(--akzent); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.knopf {
  --knopf-bg: var(--dunkel);
  --knopf-fg: var(--grund-2);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 1.05em 1.6em;
  border-radius: var(--r-pille);
  border: 1px solid transparent;
  background: var(--knopf-bg);
  color: var(--knopf-fg);
  font-weight: 600;
  line-height: 1.1;
  text-decoration: none;
  max-width: 100%;
  cursor: pointer;
  transition: transform 0.5s var(--ease-aus), background-color 0.3s, color 0.3s, border-color 0.3s;
}
.knopf [data-icon] { transition: transform 0.5s var(--ease-aus); }
.knopf:hover [data-icon] { transform: translateX(4px); }
.knopf:active { transform: scale(0.98); }
.knopf--leise { --knopf-bg: transparent; --knopf-fg: var(--text); border-color: var(--linie); }
.knopf--leise:hover { border-color: var(--text); }
.dunkel .knopf { --knopf-bg: var(--akzent); --knopf-fg: var(--auf-akzent); }
.dunkel .knopf--leise { --knopf-bg: transparent; --knopf-fg: var(--text-hell); border-color: var(--linie-dunkel); }
.dunkel .knopf--leise:hover { border-color: var(--text-hell); }
:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: 3px; }
.dunkel :focus-visible { outline-color: var(--akzent); }
[tabindex="-1"]:focus { outline: none; }
html { scroll-padding-top: calc(var(--kopf-oben) + var(--kopf-hoehe) + 12px); }
.blatt { position: relative; z-index: 1; margin-top: calc(-1 * var(--blatt)); border-radius: var(--blatt) var(--blatt) 0 0; }
[data-icon] { display: inline-grid; width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em; }
[data-icon] > svg { display: block; width: 100%; height: 100%; fill: currentColor; }
[data-kopf] { position: fixed; top: var(--kopf-oben); left: 0; right: 0; z-index: 50; }
[data-kopf] > :not([data-menue]) { position: relative; z-index: 1; }
[data-menue] {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow-y: auto;
  scroll-padding-top: calc(var(--kopf-oben) + var(--kopf-hoehe) + 12px);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s var(--ease-aus), visibility 0s 0.45s;
}
.menue-offen [data-menue] { visibility: visible; opacity: 1; transition: opacity 0.45s var(--ease-aus); }
@media (scripting: none) {
  [data-burger], [data-menue] { display: none !important; }
  [data-kopf] { position: relative !important; background: var(--dunkel); }
  [data-laufband] > ul { flex-wrap: wrap !important; }
  [data-laufband] > ul > li { white-space: normal !important; }
}
@media (max-height: 30em) {
  [data-kopf] { position: absolute; }
}
.menue-offen [data-kopf] { position: fixed; }
.zeile { display: block; overflow: clip; padding-block: 0.12em 0.07em; margin-block: -0.12em -0.07em; }
.zeile > span { display: inline-block; animation: fundament-zeile 1.15s var(--ease-aus) both; }
.zeile + .zeile > span { animation-delay: 0.12s; }
.einstieg { animation: fundament-auf 1s var(--ease-aus) both; animation-delay: calc(var(--d, 0) * 0.1s + 0.1s); }
.einstieg-bild { animation: fundament-vorhang 1.5s var(--ease-aus) 0.2s both; }
@keyframes fundament-zeile { from { transform: translateY(108%); } }
@keyframes fundament-auf { from { opacity: 0; transform: translateY(22px); } }
@keyframes fundament-vorhang {
  from { clip-path: inset(100% 0 0 0 round var(--r-gross)); }
  to { clip-path: inset(0 0 0 0 round var(--r-gross)); }
}
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 0.9s var(--ease-aus), transform 1.1s var(--ease-aus);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(18% 8% 18% 8% round var(--r-gross));
  transition: clip-path 1.4s var(--ease-aus);
}
.js [data-reveal].ist-da,
.js [data-reveal]:focus-within { opacity: 1; transform: none; }
.js [data-reveal="clip"].ist-da,
.js [data-reveal="clip"]:focus-within { clip-path: inset(-16px round var(--r-gross)); }
.js [data-reveal]:focus-within { transition: none; }
[data-laufband] { position: relative; overflow-x: clip; }
[data-laufband-spur] { display: flex; width: max-content; }
.js [data-laufband-spur] { animation: fundament-laufband var(--laufband-dauer, 42s) linear infinite; }
[data-laufband]:hover [data-laufband-spur],
[data-laufband]:focus-within [data-laufband-spur],
html.bewegung-aus [data-laufband-spur] { animation-play-state: paused; }
@keyframes fundament-laufband { to { transform: translate3d(-50%, 0, 0); } }
[data-bewegung-knopf] {
  position: absolute;
  top: 50%;
  right: 12px;
  z-index: 1;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--grund);
  color: var(--text);
  cursor: pointer;
}
.dunkel [data-bewegung-knopf] { border-color: var(--linie-dunkel); background: var(--dunkel); color: var(--text-hell); }
[data-bewegung-knopf]::before { content: ""; width: 12px; height: 14px; border-inline: 4px solid currentColor; }
[data-bewegung-knopf][aria-pressed="true"]::before { width: 0; height: 0; border-inline: 0; border-left: 12px solid currentColor; border-block: 8px solid transparent; }
[data-aussage] { view-timeline: --fundament-aussage block; --aussage-start: var(--text-gedaempft); }
.dunkel [data-aussage],
[data-aussage].dunkel { --aussage-start: var(--text-hell-gedaempft); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-aussage-bereit] [data-wort] {
      animation-name: fundament-aufhellen;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --fundament-aussage;
      animation-range: cover calc(10% + var(--n, 0) * 30%) cover calc(15% + var(--n, 0) * 30%);
    }
  }
}
@keyframes fundament-aufhellen { from { color: var(--aussage-start); } }
[data-licht] { position: relative; isolation: isolate; }
[data-licht] > * { position: relative; z-index: 2; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-licht]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.45s var(--ease-aus);
    background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--akzent) 22%, transparent), transparent 62%);
  }
  [data-licht]:hover::before { opacity: 1; }
}
.js [data-schritt] { opacity: 0.72; transition: opacity 0.6s var(--ease-aus); }
.js [data-schritt].ist-aktiv { opacity: 1; }
[data-schritt-bild] { transition: opacity 0.9s var(--ease-aus), transform 1.6s var(--ease-aus); }
.js [data-ablauf].ist-bereit [data-schritt-bild]:not(.ist-aktiv) { opacity: 0; transform: scale(1.06); }
[data-fortschritt] { position: relative; overflow: hidden; }
[data-fortschritt]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--akzent);
  transform-origin: left;
  transform: scaleX(var(--anteil, 0));
  transition: transform 0.8s var(--ease-aus);
}
@property --pos { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
[data-vergleich] { position: relative; overflow: hidden; aspect-ratio: 16 / 9; user-select: none; touch-action: pan-y; }
[data-vergleich] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
[data-vergleich-vor] { z-index: 1; clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
[data-vergleich] > input[type="range"] {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
[data-vergleich]::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  z-index: 2;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 24px rgb(0 0 0 / 0.35);
  pointer-events: none;
}
[data-vergleich]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--pos, 50%);
  z-index: 2;
  width: 56px;
  height: 56px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M22 20l-8 8 8 8M34 20l8 8-8 8' fill='none' stroke='%2311181c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.5);
  pointer-events: none;
}
[data-vergleich]:has(> input:focus-visible) { outline: 3px solid var(--akzent-tief); outline-offset: 4px; }
[data-vergleich].zeigt-hinweis { animation: fundament-hinweis 2.1s var(--ease-inaus); }
@keyframes fundament-hinweis {
  0% { --pos: 50%; }
  35% { --pos: 74%; }
  72% { --pos: 28%; }
  100% { --pos: 50%; }
}
details[name] > summary { list-style: none; cursor: pointer; }
details[name] > summary::-webkit-details-marker { display: none; }
@supports (interpolate-size: allow-keywords) {
  html { interpolate-size: allow-keywords; }
  details[name]::details-content { height: 0; overflow: clip; transition: height 0.5s var(--ease-aus), content-visibility 0.5s allow-discrete; }
  details[name][open]::details-content { height: auto; }
}
[data-anfrage-ok]:empty {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
}
[data-magnet] {
  translate: var(--magnet-x, 0px) var(--magnet-y, 0px);
  transition: translate 0.35s var(--ease-aus), transform 0.5s var(--ease-aus), background-color 0.3s, color 0.3s, border-color 0.3s;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  [data-laufband-spur] { animation: none !important; width: auto; }
  [data-laufband] > ul,
  [data-laufband-spur] > ul { flex-wrap: wrap !important; }
  [data-laufband] > ul > li,
  [data-laufband-spur] > ul > li { white-space: normal !important; }
  [data-laufband-spur] > [aria-hidden="true"] { display: none !important; }
  [data-bewegung-knopf] { display: none; }
  [data-magnet] { translate: none; }
}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:100 900;font-display:swap;src:url("/schriften/bricolage-grotesque.woff2") format("woff2-variations")}
@font-face{font-family:"Figtree";font-style:normal;font-weight:100 900;font-display:swap;src:url("/schriften/figtree.woff2") format("woff2-variations")}
:root {
  --grund: #f6f2ec;
  --grund-2: #ffffff;
  --dunkel: #211e1b;
  --dunkel-2: #2e2a26;
  --text: #211e1b;
  --text-gedaempft: #5b544d;
  --text-hell: #f6f1ea;
  --text-hell-gedaempft: #c7bdb1;
  --akzent: #e39a6d;
  --akzent-tief: #9a4e2f;
  --auf-akzent: #211e1b;
  --cta: #211e1b;
  --auf-cta: #ffffff;
  --cta-hell: #ffffff;
  --auf-cta-hell: #211e1b;
  --linie: rgb(33 30 27 / 0.14);
  --linie-dunkel: rgb(246 241 234 / 0.16);
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --r-pille: 0px;
  --r-gross: 0px;
  --r-klein: 0px;
  --holz: #efe3cf;
  --schraeg: 14px;
  --schraeg-gross: 34px;
}
@media (max-width: 1020px) {
  html { scroll-padding-bottom: 96px; }
}

#kopf .leiste {
      width: min(100% - 24px, 1400px);
      margin: 8px auto 0;
      display: flex;
      align-items: center;
      gap: clamp(10px, 1.6vw, 24px);
      padding: 4px 8px 4px 16px;
      border: 1px solid transparent;
      color: var(--text);
      transition: background-color 0.45s var(--ease-aus), border-color 0.45s var(--ease-aus), box-shadow 0.45s var(--ease-aus);
    }

#kopf.ist-fest .leiste,
    .menue-offen #kopf .leiste,
    html:not(.js):not(:has([data-kopf-marke])) #kopf .leiste {
      background: rgb(255 255 255 / 0.94);
      border-color: var(--linie);
      box-shadow: 0 18px 40px -30px rgb(33 30 27 / 0.55);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
    }

#kopf .marke { display: flex; align-items: center; flex: none; }

#kopf .marke img { display: block; width: auto; height: 70px; }

#kopf .nav { margin-left: auto; }

#kopf .nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }

#kopf .nav a { display: block; padding: 10px 12px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 0.97rem; box-shadow: inset 0 -2px 0 transparent; transition: color 0.3s, box-shadow 0.3s; }

#kopf .nav a:hover { color: var(--akzent-tief); box-shadow: inset 0 -2px 0 var(--akzent-tief); }

#kopf .nav a { white-space: nowrap; }

#kopf .nav .konfig a { display: inline-flex; align-items: center; gap: 6px; }

#kopf .tel { display: inline-flex; align-items: center; gap: 8px; padding: 10px 6px; color: var(--text); font-weight: 700; text-decoration: none; white-space: nowrap; }

#kopf .tel [data-icon] { color: var(--akzent-tief); }

#kopf .tel:hover { color: var(--akzent-tief); }

#kopf .leiste > .knopf { --knopf-bg: var(--cta); --knopf-fg: var(--auf-cta); padding: 0.85em 1.3em; flex: none; }

#kopf [data-burger] { display: none; margin-left: auto; width: 48px; height: 48px; border: 1px solid var(--linie); background: var(--grund-2); color: var(--text); cursor: pointer; place-content: center; gap: 6px; }

#kopf [data-burger] i { display: block; width: 20px; height: 0; border-top: 2px solid currentColor; transition: transform 0.45s var(--ease-aus); }

#kopf [data-burger][aria-expanded="true"] i:first-of-type { transform: translateY(4px) rotate(45deg); }

#kopf [data-burger][aria-expanded="true"] i:last-of-type { transform: translateY(-4px) rotate(-45deg); }

#kopf [data-menue] { padding: calc(var(--kopf-oben) + var(--kopf-hoehe) + 28px) var(--rand) 120px; background: var(--grund); color: var(--text); }

#kopf [data-menue] ul { list-style: none; margin: 0 0 36px; padding: 0; }

#kopf [data-menue] li { border-bottom: 1px solid var(--linie); }

#kopf [data-menue] li a { display: block; padding: 18px 0; color: inherit; text-decoration: none; font: 700 clamp(1.7rem, 7vw, 2.5rem)/1.05 var(--font-display); letter-spacing: -0.02em; }

#kopf [data-menue] .knopf { --knopf-bg: var(--cta); --knopf-fg: var(--auf-cta); }

#kopf [data-menue] .menue-tel { margin-top: 28px; display: grid; gap: 6px; color: var(--text-gedaempft); }

#kopf [data-menue] .menue-tel a { color: var(--text); font-weight: 700; font-size: 1.15rem; }

@supports (corner-shape: bevel) {
      #kopf .knopf { border-radius: 0 var(--schraeg) 0 0; corner-shape: bevel; }
    }
    #kopf .reiter {
      position: fixed;
      left: 0;
      top: 50%;
      z-index: 3;
      translate: 0 -50%;
      rotate: 180deg;
      writing-mode: vertical-rl;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 20px 13px;
      background: var(--akzent-tief);
      color: #ffffff;
      font: 700 0.86rem/1 var(--font-body);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      text-decoration: none;
      box-shadow: 0 0 0 2px var(--grund), 0 16px 36px -18px rgb(33 30 27 / 0.7);
      transition: background-color 0.3s, padding 0.35s var(--ease-aus);
    }

#kopf .reiter [data-icon] { rotate: 90deg; font-size: 1.25rem; }

#kopf .reiter:hover { background: var(--dunkel); padding-block: 24px; }

#kopf .reiter:focus-visible { outline: 3px solid #ffffff; outline-offset: -7px; }

@supports (corner-shape: bevel) {
      #kopf .reiter { border-radius: var(--schraeg) 0 0 0; corner-shape: bevel; }
    }
    #kopf .schnell { position: fixed; right: 0; top: 50%; z-index: 3; translate: 0 -50%; filter: drop-shadow(0 14px 24px rgb(0 0 0 / 0.28)); }

#kopf .schnell ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }

#kopf .schnell a {
      position: relative;
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      background: var(--dunkel);
      color: var(--text-hell);
      text-decoration: none;
      box-shadow: inset 0 0 0 1px rgb(246 241 234 / 0.2);
      transition: background-color 0.3s;
    }

#kopf .schnell a > [data-icon],
    #kopf .schnell a > svg { width: 25px; height: 25px; }

#kopf .schnell a:hover { background: var(--akzent-tief); }

#kopf .schnell a:focus-visible { outline: 3px solid #ffffff; outline-offset: -7px; }

#kopf .schnell .etikett {
      position: absolute;
      right: 100%;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      padding: 0 18px;
      white-space: nowrap;
      background: var(--akzent-tief);
      color: #ffffff;
      font-weight: 700;
      opacity: 0;
      translate: 10px 0;
      pointer-events: none;
      transition: opacity 0.25s, translate 0.4s var(--ease-aus);
    }

#kopf .schnell a:hover .etikett,
    #kopf .schnell a:focus-visible .etikett { opacity: 1; translate: 0 0; }

#kopf .schnell a:focus-visible .etikett { transition: none; }
    #kopf .ig { position: relative; width: 23px; height: 23px; border: 2px solid currentColor; border-radius: 7px; }

#kopf .ig::before { content: ""; position: absolute; inset: 4px; border: 2px solid currentColor; border-radius: 50%; }

#kopf .ig::after { content: ""; position: absolute; top: 2px; right: 2px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
    #kopf .handyleiste { display: none; }

@media (max-width: 1350px) {
      #kopf .leiste > .tel { display: none; }
    }

@media (max-width: 1200px) and (scripting: enabled) {
      #kopf .nav,
      #kopf .leiste > .knopf { display: none; }
      #kopf [data-burger] { display: grid; }
    }

@media (max-width: 1020px) {
      #kopf .reiter,
      #kopf .schnell { display: none; }
      #kopf .marke img { height: 54px; }
      #kopf .handyleiste {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 3;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        padding: 6px;
        background: rgb(33 30 27 / 0.96);
        box-shadow: 0 18px 40px -16px rgb(0 0 0 / 0.55);
      }
      #kopf .handyleiste a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-height: 56px;
        color: var(--text-hell);
        text-decoration: none;
        font-size: 0.82rem;
        font-weight: 700;
      }
      #kopf .handyleiste a > [data-icon],
      #kopf .handyleiste a > svg { width: 22px; height: 22px; }
      #kopf .handyleiste .haupt { background: var(--cta-hell); color: var(--auf-cta-hell); }
      #kopf .handyleiste a:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
    }

@supports (corner-shape: bevel) {
      #kopf .handyleiste { border-radius: 0 var(--schraeg) 0 0; corner-shape: bevel; }
      #kopf .handyleiste .haupt { border-radius: 0 10px 0 0; corner-shape: bevel; }
    }

.menue-offen #kopf .handyleiste { visibility: hidden; }

@media (scripting: none) {
      #kopf .leiste,
      #kopf .nav ul { flex-wrap: wrap; }
      #kopf .leiste { background: var(--grund-2); }
    }

@media (max-height: 30em) {
      #kopf .handyleiste,
      #kopf .reiter,
      #kopf .schnell { display: none; }
    }

@media (forced-colors: active) {
      #kopf .reiter,
      #kopf .schnell a { border: 2px solid CanvasText; }
    }

#start {
      position: relative;
      isolation: isolate;
      overflow: clip;
      padding-block: calc(var(--kopf-oben) + var(--kopf-hoehe) + clamp(24px, 4.5vw, 64px)) clamp(56px, 7vw, 104px);
      background: var(--grund);
    }

#start [data-kopf-marke] { position: absolute; top: 90px; left: 0; width: 1px; height: 1px; }

#start .raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); align-items: center; }

#start .text { grid-column: 1 / span 7; }

#start .kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }

#start .kicker [data-icon] { font-size: 1.35rem; }

#start h1 { margin-top: 22px; font-size: clamp(2.4rem, 1.1rem + 3.9vw, 5rem); font-weight: 720; line-height: 1.02; letter-spacing: -0.02em; }

#start .lead { margin-top: 26px; max-width: 54ch; color: var(--text-gedaempft); }

#start .aktionen { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }

#start .knopf--rost { --knopf-bg: var(--cta); --knopf-fg: var(--auf-cta); }

#start .knopf--leise { --knopf-bg: var(--grund-2); }

#start .typenschild { margin: 40px 0 0; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 18px 0; border-top: 1px solid var(--linie); }

#start .typenschild div { padding-right: clamp(18px, 2.4vw, 32px); margin-right: clamp(18px, 2.4vw, 32px); border-right: 1px solid var(--linie); }

#start .typenschild div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

#start dt { font: 700 0.74rem/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-gedaempft); }

#start dd { margin: 6px 0 0; font: 700 1.3rem/1.1 var(--font-display); }

#start .innung dd { margin: 6px 0 0; }

#start .innung img { display: block; width: auto; height: 46px; }

#start .bild { grid-column: 8 / span 5; position: relative; margin: 0; }

#start .bild::before {
      content: "";
      position: absolute;
      inset: 22px 22px -22px -22px;
      z-index: -1;
      border: 3px solid var(--akzent-tief);
    }

#start .rahmen { aspect-ratio: 4 / 5; overflow: hidden; background: var(--dunkel-2); }

#start .rahmen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

#start .plakette {
      position: absolute;
      left: -38px;
      bottom: 40px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px 20px 14px 14px;
      background: var(--grund-2);
      box-shadow: 0 24px 50px -26px rgb(33 30 27 / 0.6);
      font-size: 0.95rem;
      line-height: 1.3;
    }

#start .plakette [data-icon] { width: 42px; height: 42px; padding: 9px; background: var(--akzent-tief); color: #ffffff; }

#start .plakette strong { display: block; font-family: var(--font-display); font-size: 1.05rem; }

#start .kacheln { margin: clamp(52px, 6vw, 84px) auto 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

#start .kachel {
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 28px 26px 26px;
      border: 1px solid var(--linie);
      background: var(--grund-2);
      box-shadow: 0 26px 50px -38px rgb(33 30 27 / 0.5);
      transition: translate 0.5s var(--ease-aus), box-shadow 0.5s var(--ease-aus);
    }

#start .kachel:hover { translate: 0 -6px; box-shadow: 0 34px 60px -34px rgb(33 30 27 / 0.55); }

#start .kachel .titel { font: 700 1.2rem/1.2 var(--font-display); }

#start .kachel > [data-icon] { width: 58px; height: 58px; padding: 14px; background: var(--akzent-tief); color: #ffffff; }

#start .kachel .text-klein { flex: 1; font-size: 0.98rem; line-height: 1.5; color: var(--text-gedaempft); }

#start .kachel a { display: inline-flex; align-items: center; gap: 8px; color: var(--akzent-tief); font-weight: 700; text-decoration: none; }

#start .kachel a:hover { text-decoration: underline; text-underline-offset: 4px; }

@supports (corner-shape: bevel) {
      #start .knopf { border-radius: 0 var(--schraeg) 0 0; corner-shape: bevel; }
      #start .rahmen { border-radius: 0 var(--schraeg-gross) 0 0; corner-shape: bevel; }
    }

@media (max-width: 1100px) {
      #start .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

@media (max-width: 900px) {
      #start .raster { grid-template-columns: minmax(0, 1fr); }
      #start .text,
      #start .bild { grid-column: 1 / -1; }
      #start .bild { max-width: 460px; margin-left: 22px; }
      #start .rahmen { aspect-ratio: 5 / 4; }
      #start .plakette { left: -10px; bottom: 14px; }
    }

@media (max-width: 520px) {
      #start .kacheln { grid-template-columns: minmax(0, 1fr); }
      #start .typenschild div { border-right: 0; margin-right: 0; padding-right: 0; width: 50%; }
    }

#band { padding-block: 22px; background: var(--grund); }

#band .streifen { position: relative; padding-block: 30px; background: var(--holz); border-block: 1px solid rgb(33 30 27 / 0.2); }
    #band .streifen::before,
    #band .streifen::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 13px;
      pointer-events: none;
      background:
        repeating-linear-gradient(90deg, rgb(33 30 27 / 0.72) 0 1.5px, transparent 1.5px 50px) 0 0 / 100% 13px no-repeat,
        repeating-linear-gradient(90deg, rgb(33 30 27 / 0.45) 0 1px, transparent 1px 10px) 0 0 / 100% 7px no-repeat;
    }

#band .streifen::before { top: 0; }

#band .streifen::after { bottom: 0; scale: 1 -1; }

#band ul { display: flex; align-items: center; gap: clamp(28px, 3.5vw, 52px); margin: 0; padding: 0 clamp(14px, 2vw, 28px); list-style: none; }

#band li { display: flex; align-items: center; gap: clamp(28px, 3.5vw, 52px); font: 700 clamp(1.1rem, 0.95rem + 0.7vw, 1.55rem)/1 var(--font-display); letter-spacing: -0.01em; white-space: nowrap; color: var(--text); }

#band li::after { content: ""; width: 12px; height: 12px; background: var(--akzent-tief); clip-path: polygon(0 100%, 45% 100%, 100% 0, 55% 0); }

#band [data-bewegung-knopf] { border-radius: 0; }

@media (min-width: 1021px) {
      #band [data-bewegung-knopf] { right: 76px; }
    }

#leistungen { padding-block: var(--luft); background: var(--grund-2); }

#leistungen .kopfzeile { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 5vw, 80px); align-items: end; }

#leistungen .kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }

#leistungen .kicker [data-icon] { font-size: 1.35rem; }

#leistungen h2 { margin-top: 16px; max-width: 17ch; }

#leistungen .karten { margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

#leistungen .karte {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid var(--linie);
      background: var(--grund);
      transition: translate 0.5s var(--ease-aus), box-shadow 0.5s var(--ease-aus);
    }

#leistungen .karte:hover { translate: 0 -6px; box-shadow: 0 32px 60px -40px rgb(33 30 27 / 0.6); }

#leistungen .foto { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--dunkel-2); }

#leistungen .foto img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-aus); }

#leistungen .karte:hover .foto img { scale: 1.05; }

#leistungen .inhalt { display: grid; gap: 10px; padding: 22px 22px 26px; }

#leistungen .nr { font: 700 0.78rem/1 var(--font-mono); letter-spacing: 0.14em; color: var(--akzent-tief); }

#leistungen .karte h3 { font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.45rem); }

#leistungen .karte p { font-size: 1rem; line-height: 1.55; color: var(--text-gedaempft); }

#leistungen .mehr { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }

#leistungen .mehr h3 { font-size: 1.15rem; }

#leistungen .chips { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }

#leistungen .chips li { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--linie); background: var(--grund); font-size: 0.97rem; font-weight: 600; }

#leistungen .chips [data-icon] { color: var(--akzent-tief); }

#leistungen .ausstellung { padding: 26px 28px; background: var(--dunkel); color: var(--text-hell); }

#leistungen .ausstellung h3 { color: var(--text-hell); }

#leistungen .ausstellung p { margin-top: 10px; color: var(--text-hell-gedaempft); }

#leistungen .ausstellung a { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; color: var(--akzent); font-weight: 700; text-decoration: none; }

#leistungen .ausstellung a:hover { text-decoration: underline; text-underline-offset: 4px; }

#leistungen .ausstellung a:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

@supports (corner-shape: bevel) {
      #leistungen .karte,
      #leistungen .ausstellung { border-radius: 0 var(--schraeg-gross) 0 0; corner-shape: bevel; }
      #leistungen .chips li { border-radius: 0 10px 0 0; corner-shape: bevel; }
    }

@media (max-width: 1100px) {
      #leistungen .karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

@media (max-width: 900px) {
      #leistungen .kopfzeile,
      #leistungen .mehr { grid-template-columns: minmax(0, 1fr); }
    }

@media (max-width: 560px) {
      #leistungen .karten { grid-template-columns: minmax(0, 1fr); }
      #leistungen .foto { aspect-ratio: 4 / 3; }
    }

#galerie { padding-block: var(--luft); background: var(--grund); }

#galerie .kopfzeile { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 5vw, 80px); align-items: end; }

#galerie .kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }

#galerie .kicker [data-icon] { font-size: 1.35rem; }

#galerie h2 { margin-top: 16px; max-width: 16ch; }

#galerie .filter { margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }

#galerie .filter li { max-width: 100%; }

#galerie .filter button {
      appearance: none;
      max-width: 100%;
      min-height: 46px;
      text-align: left;
      padding: 10px 18px;
      border: 1px solid var(--linie);
      background: var(--grund-2);
      color: var(--text);
      font: 600 0.98rem/1.2 var(--font-body);
      cursor: pointer;
      transition: background-color 0.25s var(--ease-aus), color 0.25s var(--ease-aus), border-color 0.25s var(--ease-aus);
    }

#galerie .filter button:hover { border-color: var(--text); }

#galerie .filter button[aria-pressed="true"] { background: var(--dunkel); border-color: var(--dunkel); color: var(--text-hell); }

#galerie .filter button:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: 3px; }

html:not(.js) #galerie .filter,
    html:not(.js) #galerie .pfeile { display: none; }

#galerie .teile { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }

#galerie .teil { min-width: 0; }

#galerie .teil h3 { margin-bottom: 14px; font-size: 1.15rem; }

#galerie .teil h3 .anzahl { font-weight: 500; color: var(--text-gedaempft); }

#galerie .reihe {
      --h: clamp(300px, 14rem + 16vw, 480px);
      margin: -8px -8px 0;
      padding: 8px 8px 14px;
      list-style: none;
      display: flex;
      gap: 14px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 8px;
      scrollbar-width: thin;
      scrollbar-color: var(--akzent-tief) transparent;
    }

#galerie .reihe li { flex: none; scroll-snap-align: start; }

#galerie .bild { display: block; height: var(--h); padding: 0; border: 0; overflow: hidden; background: var(--dunkel-2); cursor: zoom-in; }

#galerie .bild img { display: block; height: 100%; width: auto; max-width: min(84vw, 720px); object-fit: cover; transition: scale 1s var(--ease-aus); }

#galerie .bild:hover img { scale: 1.04; }

#galerie .bild:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: 3px; }

#galerie .fuss { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

#galerie .tipp { font-size: 0.95rem; color: var(--text-gedaempft); }

#galerie .pfeile { display: flex; gap: 10px; }

#galerie .pfeile button { width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 1px solid var(--text); background: var(--grund-2); color: var(--text); font-size: 1.35rem; cursor: pointer; transition: background-color 0.25s var(--ease-aus), color 0.25s var(--ease-aus); }

#galerie .pfeile button:hover { background: var(--dunkel); color: var(--text-hell); }

#galerie .pfeile button:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: 3px; }

#galerie .pfeile [data-blatt-links] [data-icon] { rotate: 180deg; }

#galerie dialog { width: min(96vw, 1400px); max-width: none; max-height: 96vh; padding: 0; border: 0; background: transparent; color: var(--text-hell); overflow: visible; }

#galerie dialog::backdrop { background: rgb(20 18 16 / 0.94); }

#galerie .gross-knopf { display: block; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; }

#galerie .gross-knopf:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

#galerie .gross-bild { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(96vh - 92px); margin: 0 auto; object-fit: contain; }

#galerie .gross-leiste { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

#galerie .gross-text { font-size: 1rem; line-height: 1.4; color: var(--text-hell); }

#galerie .gross-knoepfe { display: flex; gap: 10px; flex: none; }

#galerie .gross-knoepfe button { width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 1px solid var(--linie-dunkel); background: var(--dunkel); color: var(--text-hell); font-size: 1.35rem; cursor: pointer; }

#galerie .gross-knoepfe button:hover { border-color: var(--text-hell); }

#galerie .gross-knoepfe button:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }

#galerie .gross-knoepfe [data-gross-zurueck] [data-icon] { rotate: 180deg; }

@supports (corner-shape: bevel) {
      #galerie .filter button,
      #galerie .pfeile button { border-radius: 0 10px 0 0; corner-shape: bevel; }
    }

@media (forced-colors: active) {
      #galerie .filter button[aria-pressed="true"] { outline: 3px solid CanvasText; outline-offset: 2px; }
    }
    @media (min-width: 1021px) and (min-height: 30.01em) {
      #galerie .reihe { scroll-padding-inline-end: 72px; }
    }

@media (max-width: 900px) {
      #galerie .kopfzeile { grid-template-columns: minmax(0, 1fr); }
    }

@media (max-width: 560px) {
      #galerie .pfeile button { width: 46px; height: 46px; }
    }

#konfigurator { padding-block: var(--luft); background: var(--holz); overflow: hidden; }

#konfigurator .raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); align-items: center; }

#konfigurator .kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }

#konfigurator .kicker [data-icon] { font-size: 1.35rem; }

#konfigurator h2 { margin-top: 16px; max-width: 16ch; }

#konfigurator .lead { margin-top: 22px; max-width: 52ch; }

#konfigurator .schritte { margin: 34px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }

#konfigurator .schritte li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: center; font-size: 1.05rem; font-weight: 600; }

#konfigurator .nr { width: 46px; height: 46px; display: grid; place-items: center; background: var(--dunkel); color: var(--text-hell); font: 700 0.9rem/1 var(--font-mono); letter-spacing: 0.06em; }

#konfigurator .aktionen { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 12px; }

#konfigurator .innentuer { margin-top: 22px; }

#konfigurator .innentuer a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; min-height: 24px; }

#konfigurator .knopf--rost { --knopf-bg: var(--cta); --knopf-fg: var(--auf-cta); }

#konfigurator .knopf--leise { --knopf-bg: var(--grund-2); }

#konfigurator .hinweis { margin-top: 14px; font-size: 0.95rem; color: var(--text-gedaempft); }

#konfigurator .tueren { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); align-items: end; }

#konfigurator .tueren li:nth-child(2) { translate: 0 calc(-1 * clamp(18px, 4vw, 56px)); }

#konfigurator .tueren figure { margin: 0; aspect-ratio: 3 / 4.6; overflow: hidden; background: var(--dunkel-2); box-shadow: 0 34px 60px -44px rgb(33 30 27 / 0.7); }

#konfigurator .tueren img { display: block; width: 100%; height: 100%; object-fit: cover; }

#konfigurator .bildtext { margin-top: 18px; font-size: 0.95rem; color: var(--text-gedaempft); text-align: center; }

@supports (corner-shape: bevel) {
      #konfigurator .knopf { border-radius: 0 var(--schraeg) 0 0; corner-shape: bevel; }
      #konfigurator .tueren figure { border-radius: 0 var(--schraeg-gross) 0 0; corner-shape: bevel; }
    }

@media (max-width: 960px) {
      #konfigurator .raster { grid-template-columns: minmax(0, 1fr); }
      #konfigurator .buehne { max-width: 560px; }
    }
    #renovieren { position: relative; padding-block: var(--luft); background: var(--dunkel); border-radius: 0; clip-path: polygon(0 var(--blatt), 56% var(--blatt), calc(56% + var(--blatt)) 0, 100% 0, 100% 100%, 0 100%); }

#renovieren .raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(40px, 6vw, 104px); align-items: center; }

#renovieren .kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }

#renovieren .kicker [data-icon] { font-size: 1.35rem; }

#renovieren h2 { margin-top: 16px; max-width: 18ch; color: var(--text-hell); }

#renovieren .lead { margin-top: 22px; max-width: 54ch; }

#renovieren .aktionen { margin-top: 36px; }

#renovieren .liste { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 32px; }

#renovieren .liste li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 14px; align-content: start; }

#renovieren .symbol { grid-row: span 2; width: 46px; height: 46px; padding: 11px; background: rgb(227 154 109 / 0.14); color: var(--akzent); }

#renovieren .liste h3 { font-size: 1.12rem; line-height: 1.25; color: var(--text-hell); }

#renovieren .liste p { font-size: 0.98rem; line-height: 1.5; color: var(--text-hell-gedaempft); }

#renovieren .aktionen { margin-top: 42px; display: flex; flex-wrap: wrap; gap: 12px; }

#renovieren .regler { justify-self: center; width: min(100%, 410px); }

#renovieren [data-vergleich] { aspect-ratio: 492 / 915; background: var(--dunkel-2); }

#renovieren [data-vergleich]:has(> input:focus-visible) { outline-color: var(--akzent); }

#renovieren .etikett {
      position: absolute;
      top: 16px;
      z-index: 2;
      padding: 8px 14px;
      font: 700 0.74rem/1 var(--font-mono);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      background: rgb(33 30 27 / 0.88);
      color: var(--text-hell);
      pointer-events: none;
    }

#renovieren .etikett--vor { left: 16px; }

#renovieren .etikett--nach { right: 16px; background: var(--akzent); color: var(--auf-akzent); }

#renovieren .bildtext { margin-top: 14px; font-size: 0.92rem; color: var(--text-hell-gedaempft); }

#renovieren .verbund { margin-top: clamp(48px, 6vw, 80px); padding-top: 22px; border-top: 1px solid var(--linie-dunkel); max-width: 90ch; font-size: 0.92rem; color: var(--text-hell-gedaempft); }

@supports (corner-shape: bevel) {
      #renovieren .knopf { border-radius: 0 var(--schraeg) 0 0; corner-shape: bevel; }
      #renovieren [data-vergleich] { border-radius: 0 var(--schraeg-gross) 0 0; corner-shape: bevel; }
    }

@media (max-width: 960px) {
      #renovieren .raster { grid-template-columns: minmax(0, 1fr); }
      #renovieren .regler { width: min(100%, 360px); }
    }

@media (max-width: 560px) {
      #renovieren .liste { grid-template-columns: minmax(0, 1fr); }
    }

#renovieren .aktionen .knopf:not(.knopf--leise) { --knopf-bg: var(--cta-hell); --knopf-fg: var(--auf-cta-hell); }

#stimmen { padding-block: var(--luft); background: var(--grund); overflow: clip; }

#stimmen .kopfzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; }

#stimmen .kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }

#stimmen .kicker [data-icon] { font-size: 1.35rem; }

#stimmen h2 { margin-top: 16px; max-width: 18ch; }

#stimmen .lead { max-width: 40ch; }

#stimmen .buehne { position: relative; margin-top: clamp(36px, 4vw, 56px); padding-bottom: 76px; }

#stimmen .spur {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: min(86%, 430px);
      gap: 18px;
      margin: 0;
      padding: 6px max(var(--rand), (100% - var(--max)) / 2) 14px;
      list-style: none;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: max(var(--rand), (100% - var(--max)) / 2);
      scrollbar-width: none;
    }

#stimmen .spur:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: -3px; }

#stimmen .karte {
      scroll-snap-align: start;
      display: flex;
      flex-direction: column;
      gap: 18px;
      padding: clamp(24px, 2.6vw, 34px);
      background: var(--grund-2);
      border: 1px solid var(--linie);
      border-top: 3px solid var(--akzent-tief);
    }

#stimmen .karte > [data-icon] { width: 40px; height: 40px; color: var(--akzent-tief); }

#stimmen .thema { align-self: flex-start; padding: 6px 10px; background: var(--holz); font: 700 0.74rem/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }

#stimmen blockquote { margin: 0; flex: 1; }

#stimmen blockquote p { font-size: 1.08rem; line-height: 1.6; color: var(--text); }

#stimmen .wer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--linie); }

#stimmen .wer strong { font-family: var(--font-display); font-size: 1.05rem; }

#stimmen .wer span { font-size: 0.9rem; color: var(--text-gedaempft); }
    #stimmen .spur::scroll-button(*) {
      position: absolute;
      bottom: 0;
      width: 56px;
      height: 56px;
      border: 1px solid var(--dunkel);
      background: var(--dunkel);
      color: var(--grund-2);
      font: 700 1.4rem/1 var(--font-body);
      cursor: pointer;
      transition: background-color 0.3s, opacity 0.3s;
    }

#stimmen .spur::scroll-button(*):hover { background: var(--akzent-tief); border-color: var(--akzent-tief); }

#stimmen .spur::scroll-button(*):focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: 3px; }

#stimmen .spur::scroll-button(*):disabled { opacity: 0.3; cursor: default; }

#stimmen .spur::scroll-button(left) { content: "←" / "Vorherige Bewertung"; right: calc(max(var(--rand), (100% - var(--max)) / 2) + 64px); }

#stimmen .spur::scroll-button(right) { content: "→" / "Nächste Bewertung"; right: max(var(--rand), (100% - var(--max)) / 2); }

#stimmen .hinweis { position: absolute; bottom: 18px; left: max(var(--rand), (100% - var(--max)) / 2); font-size: 0.92rem; color: var(--text-gedaempft); }

@supports selector(::scroll-button(left)) {
      #stimmen .hinweis { display: none; }
    }

#stimmen .karte { overflow-wrap: anywhere; hyphens: auto; }

@supports (corner-shape: bevel) {
      #stimmen .karte { border-radius: 0 var(--schraeg-gross) 0 0; corner-shape: bevel; }
    }

@media (max-width: 22.5em) {
      #stimmen .buehne { padding-bottom: 0; }
      #stimmen .spur { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; }
      #stimmen .spur::scroll-button(*) { display: none; }
      #stimmen .hinweis { display: none; }
    }

#stimmen .google { display: grid; gap: 6px; justify-items: start; }

#stimmen .wertung { display: flex; align-items: center; gap: 14px; margin: 0; }

#stimmen .zahl { font: 700 clamp(2.4rem, 1.9rem + 1.6vw, 3.4rem)/1 var(--font-display); letter-spacing: -0.02em; }

#stimmen .sterne { position: relative; display: inline-block; font-size: 1.7rem; line-height: 1; letter-spacing: 0.06em; }

#stimmen .sterne .leer { color: #d8d1c6; }

#stimmen .sterne .voll { position: absolute; inset: 0 auto 0 0; overflow: hidden; white-space: nowrap; color: #fbbc04; }

#stimmen .quelle { margin: 0; color: var(--text-gedaempft); }

#stimmen .google a { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--akzent-tief); font-weight: 700; text-decoration: none; }

#stimmen .google a:hover { text-decoration: underline; text-underline-offset: 4px; }

#stimmen .google a:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: 3px; }

#stimmen .karte .sterne-zeile { margin: 0; font-size: 1.2rem; line-height: 1; letter-spacing: 0.06em; color: #fbbc04; }

#partner { padding-block: clamp(48px, 6vw, 80px); background: var(--grund); }

#partner .kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }

#partner .kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }

#partner .kicker [data-icon] { font-size: 1.35rem; }

#partner h2 { margin-top: 12px; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); }

#partner .lead { max-width: 46ch; }

#partner .spur-rahmen { position: relative; margin-top: clamp(28px, 4vw, 44px); padding-block: 16px; }

#partner ul { display: flex; align-items: center; gap: 16px; margin: 0; padding: 0 8px; list-style: none; }

#partner li { flex: none; display: grid; place-items: center; width: 200px; height: 104px; padding: 18px 22px; background: var(--grund-2); border: 1px solid var(--linie); }

#partner li img { display: block; width: auto; height: auto; max-width: 100%; max-height: 64px; object-fit: contain; filter: grayscale(1); opacity: 0.8; transition: filter 0.4s var(--ease-aus), opacity 0.4s var(--ease-aus); }

#partner li:hover img { filter: none; opacity: 1; }

#partner [data-bewegung-knopf] { border-radius: 0; }

@supports (corner-shape: bevel) {
      #partner li { border-radius: 0 12px 0 0; corner-shape: bevel; }
    }

@media (min-width: 1021px) {
      #partner [data-bewegung-knopf] { right: 76px; }
    }

@media (max-width: 560px) {
      #partner li { width: 160px; height: 88px; padding: 14px 16px; }
      #partner li img { max-height: 52px; }
    }

#weiche { padding-block: clamp(64px, 8vw, 120px) clamp(72px, 9vw, 130px); background: var(--grund); }

#weiche .kopfzeile { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(24px, 5vw, 80px); align-items: end; }

#weiche .kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }

#weiche .kicker [data-icon] { font-size: 1.35rem; }

#weiche h2 { margin-top: 16px; max-width: 16ch; }

#weiche .paneele { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

#weiche .paneel { position: relative; display: flex; flex-direction: column; min-width: 0; }

#weiche .paneel figure { margin: 0; height: clamp(220px, 24vw, 340px); overflow: hidden; background: var(--dunkel-2); }

#weiche .paneel img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease-aus); }

#weiche .paneel:hover img { scale: 1.04; }

#weiche .inhalt { flex: 1; display: grid; gap: 14px; align-content: start; padding: clamp(26px, 3vw, 44px); overflow-wrap: anywhere; hyphens: auto; }

#weiche .ziel { font: 700 0.78rem/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent-tief); }

#weiche h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem); line-height: 1.05; }

#weiche .inhalt p { color: var(--text-gedaempft); line-height: 1.55; max-width: 48ch; }

#weiche .punkte { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }

#weiche .punkte li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }

#weiche .punkte [data-icon] { color: var(--akzent-tief); margin-top: 2px; }

#weiche .knopf { margin-top: 12px; justify-self: start; }

#weiche .privat { background: var(--grund-2); border: 1px solid var(--linie); border-right: 0; }

#weiche .privat .knopf { --knopf-bg: var(--cta); --knopf-fg: var(--auf-cta); }
    #weiche .gewerbe { background: var(--dunkel); color: var(--text-hell); margin-left: calc(-1 * var(--schraeg-gross)); clip-path: polygon(var(--schraeg-gross) 0, 100% 0, 100% 100%, 0 100%); }

#weiche .gewerbe .inhalt { padding-left: calc(clamp(26px, 3vw, 44px) + var(--schraeg-gross)); }

#weiche .gewerbe .ziel { color: var(--akzent); }

#weiche .gewerbe h3 { color: var(--text-hell); }

#weiche .gewerbe .inhalt p { color: var(--text-hell-gedaempft); }

#weiche .gewerbe .punkte [data-icon] { color: var(--akzent); }

#weiche .gewerbe .knopf { --knopf-bg: var(--cta-hell); --knopf-fg: var(--auf-cta-hell); }

#weiche .gewerbe :focus-visible { outline-color: var(--akzent); }

@supports (corner-shape: bevel) {
      #weiche .knopf { border-radius: 0 var(--schraeg) 0 0; corner-shape: bevel; }
    }

@media (max-width: 900px) {
      #weiche .kopfzeile,
      #weiche .paneele { grid-template-columns: minmax(0, 1fr); }
      #weiche .privat { border-right: 1px solid var(--linie); }
      #weiche .gewerbe { margin-left: 0; margin-top: calc(-1 * var(--schraeg-gross)); clip-path: polygon(0 var(--schraeg-gross), 60% var(--schraeg-gross), calc(60% + var(--schraeg-gross)) 0, 100% 0, 100% 100%, 0 100%); }
      #weiche .gewerbe figure { margin-top: 0; }
      #weiche .gewerbe .inhalt { padding-left: clamp(26px, 3vw, 44px); }
    }

#familie { padding-block: var(--luft); background: var(--grund-2); }

#familie .kopfzeile { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }

#familie .kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }

#familie .kicker [data-icon] { font-size: 1.35rem; }

#familie h2 { margin-top: 16px; max-width: 15ch; }

#familie .fliesstext { display: grid; gap: 14px; max-width: 60ch; }

#familie .fliesstext p { line-height: 1.65; color: var(--text-gedaempft); }

#familie h3 { margin: clamp(40px, 5vw, 60px) 0 18px; font-size: clamp(1.15rem, 1rem + 0.4vw, 1.4rem); }

#familie .team { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr 1.35fr; grid-template-rows: repeat(2, clamp(200px, 9rem + 9vw, 300px)); gap: 14px; }

#familie .team .t1 { grid-column: 1; grid-row: 1 / 3; }

#familie .team .t2 { grid-column: 2; grid-row: 1 / 3; }

#familie .team .t3 { grid-column: 3; grid-row: 1 / 3; }

#familie .team .t4 { grid-column: 4; grid-row: 1; }

#familie .team .t5 { grid-column: 4; grid-row: 2; }

#familie .team figure { position: relative; height: 100%; margin: 0; }

#familie .bild { display: block; width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden; background: var(--dunkel-2); cursor: zoom-in; }

#familie .bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease-aus); }

#familie .bild:hover img { scale: 1.04; }

#familie .bild:focus-visible { outline: 3px solid var(--akzent-tief); outline-offset: 3px; }

#familie .team figcaption { position: absolute; left: 0; bottom: 0; max-width: 100%; padding: 10px 16px; background: rgb(33 30 27 / 0.9); color: var(--text-hell); font-weight: 700; font-size: 0.98rem; pointer-events: none; }

@supports (corner-shape: bevel) {
      #familie .team .t3 .bild,
      #familie .team .t4 .bild { border-radius: 0 var(--schraeg-gross) 0 0; corner-shape: bevel; }
    }

@media (max-width: 1020px) {
      #familie .kopfzeile { grid-template-columns: minmax(0, 1fr); }
      #familie .team { display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 8px; margin: -8px -8px 0; padding: 8px 8px 14px; scrollbar-width: thin; scrollbar-color: var(--akzent-tief) transparent; }
      #familie .team li { flex: none; height: clamp(320px, 18rem + 10vw, 440px); scroll-snap-align: start; }
      #familie .team .bild img { width: auto; max-width: 84vw; }
    }

#social { position: relative; padding-block: var(--luft); background: var(--grund); overflow: clip; }

#social .raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 104px); align-items: center; }

#social .kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }

#social .kicker [data-icon] { font-size: 1.35rem; }

#social h2 { margin-top: 16px; max-width: 15ch; }

#social .lead { margin-top: 20px; }

#social .aktionen { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

#social .aktionen .knopf { --knopf-bg: var(--cta); --knopf-fg: var(--auf-cta); }

#social .aktionen .knopf > svg { width: 1.25em; height: 1.25em; flex: none; }

#social .griff { font-weight: 700; color: var(--text); }

#social .ig { position: relative; display: inline-block; width: 1.15em; height: 1.15em; border: 2px solid currentColor; border-radius: 30%; flex: none; }

#social .ig::before { content: ""; position: absolute; inset: 22%; border: 2px solid currentColor; border-radius: 50%; }

#social .ig::after { content: ""; position: absolute; top: 9%; right: 9%; width: 12%; height: 12%; border-radius: 50%; background: currentColor; }

#social .buehne-ig { position: relative; display: grid; place-items: center; min-height: 640px; }

#social .buehne-ig::before { content: ""; position: absolute; inset: 8% 6% 8% 14%; background: var(--holz); clip-path: polygon(0 12%, 38% 12%, 48% 0, 100% 0, 100% 100%, 0 100%); }
    #social .handy { position: relative; width: min(100%, 360px); padding: 10px; border-radius: 42px; background: #16181b; box-shadow: 0 50px 90px -40px rgb(33 30 27 / 0.7), inset 0 0 0 2px #2b2e33; }

#social .schirm { overflow: hidden; border-radius: 33px; background: #ffffff; color: #111111; }

#social .ig-kopf { display: flex; align-items: center; justify-content: space-between; padding: 22px 18px 8px; font-weight: 800; font-size: 1.02rem; }

#social .ig-kopf span:last-child { font-size: 1.3rem; letter-spacing: 2px; line-height: 0.5; }

#social .profil { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; align-items: center; padding: 8px 18px 0; }

#social .avatar { width: 80px; height: 80px; padding: 3px; border-radius: 50%; background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); }

#social .avatar img { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #ffffff; background: #ffffff; object-fit: contain; padding: 6px; }

#social .name { font-weight: 800; font-size: 1rem; line-height: 1.25; }

#social .bio { padding: 12px 18px 0; font-size: 0.88rem; line-height: 1.45; color: #262626; }

#social .bio .ort-zeile { display: flex; align-items: center; gap: 4px; }

#social .ig-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 14px 18px; }

#social .ig-knoepfe a { display: grid; place-items: center; min-height: 34px; border-radius: 8px; font-size: 0.88rem; font-weight: 700; text-decoration: none; }

#social .ig-folgen { background: #0a66c2; color: #ffffff; }

#social .ig-nachricht { background: #efefef; color: #111111; }

#social .ig-knoepfe a:focus-visible { position: relative; z-index: 1; outline: 3px solid #111111; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }
    #social .kachel-ig:focus-visible { outline: 4px solid #ffffff; outline-offset: -4px; }

#social .kachel-ig:focus-visible img { scale: 1.06; filter: brightness(0.62); }

#social .tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #dbdbdb; }

#social .tabs span { display: grid; place-items: center; height: 42px; color: #737373; }

#social .tabs span:first-child { color: #111111; box-shadow: inset 0 -2px 0 #111111; }

#social .gitter { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }

#social .kachel-ig { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #eeeeee; }

#social .kachel-ig img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.8s var(--ease-aus), filter 0.4s; }

#social .kachel-ig:hover img { scale: 1.06; filter: brightness(0.8); }

#social .kachel-ig [data-icon] { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: rgb(0 0 0 / 0.62); color: #ffffff; }

#social .blase {
      position: absolute;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 12px;
      max-width: 250px;
      margin: 0;
      padding: 12px 16px 12px 12px;
      background: var(--grund-2);
      border: 1px solid var(--linie);
      box-shadow: 0 24px 50px -26px rgb(33 30 27 / 0.55);
      font-size: 0.9rem;
      line-height: 1.3;
    }

#social .blase [data-icon] { flex: none; width: 38px; height: 38px; padding: 9px; background: var(--akzent-tief); color: #ffffff; }

#social .blase strong { display: block; font-family: var(--font-display); }

#social .blase--oben { top: 12%; left: 0; }

#social .blase--unten { bottom: 10%; right: 0; }

@supports (corner-shape: bevel) {
      #social .aktionen .knopf,
      #social .blase { border-radius: 0 var(--schraeg) 0 0; corner-shape: bevel; }
    }

@media (max-width: 960px) {
      #social .raster { grid-template-columns: minmax(0, 1fr); }
      #social .buehne-ig { min-height: 0; padding-block: 24px; }
    }

@media (max-width: 640px) {
      #social .buehne-ig { display: flex; flex-direction: column; align-items: stretch; }
      #social .blase { position: relative; inset: auto; margin-top: 12px; max-width: none; }
      #social .handy { margin-inline: auto; }
      #social .buehne-ig::before { inset: 6% 0; }
    }

#karriere { position: relative; padding-block: var(--luft); background: var(--holz); overflow: clip; }

#karriere .raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 104px); align-items: center; }

#karriere .video { position: relative; margin: 0 auto; width: min(100%, 360px); }

#karriere .video::before { content: ""; position: absolute; inset: 22px -22px 34px 22px; border: 3px solid var(--akzent-tief); }

#karriere video { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--dunkel); }

#karriere figcaption { position: relative; margin-top: 34px; font-size: 0.9rem; color: var(--text-gedaempft); }

#karriere figcaption a { color: var(--text); font-weight: 700; }

#karriere .kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }

#karriere .kicker [data-icon] { font-size: 1.35rem; }

#karriere h2 { margin-top: 16px; font-size: clamp(2.2rem, 1.3rem + 3vw, 4.2rem); line-height: 1; max-width: 14ch; }

#karriere .lead { margin-top: 22px; color: var(--text-gedaempft); max-width: 52ch; }

#karriere .punkte { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }

#karriere .punkte li { display: flex; gap: 14px; align-items: center; padding: 14px 18px; background: var(--grund-2); border-left: 3px solid var(--akzent-tief); font-weight: 600; }

#karriere .punkte [data-icon] { color: var(--akzent-tief); font-size: 1.3rem; }

#karriere .aktionen { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }

#karriere .knopf--rost { --knopf-bg: var(--cta); --knopf-fg: var(--auf-cta); }

#karriere .knopf--leise { --knopf-bg: var(--grund-2); border-color: rgb(33 30 27 / 0.3); }

#karriere .knopf svg { width: 1.2em; height: 1.2em; }

#karriere .mail { margin-top: 18px; color: var(--text-gedaempft); }

#karriere .mail a { color: var(--text); font-weight: 700; }

@supports (corner-shape: bevel) {
      #karriere .knopf,
      #karriere .punkte li { border-radius: 0 var(--schraeg) 0 0; corner-shape: bevel; }
      #karriere video { border-radius: 0 var(--schraeg-gross) 0 0; corner-shape: bevel; }
    }

@media (max-width: 900px) {
      #karriere .raster { grid-template-columns: minmax(0, 1fr); }
      #karriere .video { width: min(100% - 22px, 320px); margin-inline: 0 auto; }
    }

#fragen { padding-block: var(--luft); background: var(--grund-2); }

#fragen .raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }

#fragen .einleitung { position: sticky; top: calc(var(--kopf-oben) + var(--kopf-hoehe) + 24px); }

#fragen .kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }

#fragen .kicker [data-icon] { font-size: 1.35rem; }

#fragen h2 { margin-top: 16px; max-width: 14ch; }

#fragen .lead { margin-top: 20px; }

#fragen .lead a { color: var(--akzent-tief); font-weight: 700; white-space: nowrap; }

#fragen .liste { border-top: 1px solid var(--linie); }

#fragen details { border-bottom: 1px solid var(--linie); }

#fragen summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      padding: 24px 0;
      cursor: pointer;
      font: 650 clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem)/1.25 var(--font-display);
      letter-spacing: -0.01em;
    }

#fragen summary:hover { color: var(--akzent-tief); }

#fragen summary [data-icon] {
      width: 44px;
      height: 44px;
      padding: 11px;
      border: 1px solid var(--linie);
      transition: transform 0.5s var(--ease-aus), background-color 0.3s, color 0.3s, border-color 0.3s;
    }

#fragen details[open] summary [data-icon] { transform: rotate(45deg); background: var(--akzent-tief); color: #ffffff; border-color: var(--akzent-tief); }

#fragen .antwort p { padding: 0 68px 26px 0; max-width: 60ch; color: var(--text-gedaempft); line-height: 1.6; }

@media (max-width: 900px) {
      #fragen .raster { grid-template-columns: minmax(0, 1fr); }
      #fragen .einleitung { position: static; }
      #fragen .antwort p { padding-right: 0; }
    }

@media (max-height: 38em) {
      #fragen .einleitung { position: static; }
    }

#kontakt { padding-block: var(--luft); background: var(--grund); }

#kontakt .raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }

#kontakt .kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; }

#kontakt .kicker [data-icon] { font-size: 1.35rem; }

#kontakt h2 { margin-top: 16px; hyphens: manual; }

#kontakt .fotos { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

#kontakt .fotos img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; background: var(--dunkel-2); }

#kontakt .daten { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 16px; }

#kontakt .daten li { display: flex; gap: 14px; align-items: flex-start; line-height: 1.45; }

#kontakt .daten li > [data-icon],
    #kontakt .daten li > svg { flex: none; width: 40px; height: 40px; padding: 9px; background: rgb(154 78 47 / 0.1); color: var(--akzent-tief); }

#kontakt .daten strong { display: block; font-family: var(--font-display); }

#kontakt .daten a { color: var(--text); font-weight: 600; }

#kontakt .daten a:hover { color: var(--akzent-tief); }

#kontakt .daten .klein { color: var(--text-gedaempft); font-size: 0.95rem; }

#kontakt form {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
      padding: clamp(24px, 3.4vw, 48px);
      background: var(--grund-2);
      border: 1px solid var(--linie);
      border-top: 3px solid var(--akzent-tief);
      box-shadow: 0 40px 80px -60px rgb(33 30 27 / 0.5);
    }

#kontakt .form-titel { grid-column: 1 / -1; font: 700 1.4rem/1.2 var(--font-display); }

#kontakt .feld { display: grid; gap: 8px; align-content: start; min-width: 0; }

#kontakt .breit { grid-column: 1 / -1; }

#kontakt fieldset { margin: 0; padding: 0; border: 0; }

#kontakt label,
    #kontakt legend { font-size: 0.95rem; font-weight: 700; color: var(--text); }

#kontakt legend { margin-bottom: 8px; }

#kontakt .optional { font-weight: 400; color: var(--text-gedaempft); }

#kontakt input:not([type="radio"], [type="checkbox"]),
    #kontakt select,
    #kontakt textarea {
      width: 100%;
      min-height: 52px;
      padding: 14px 16px;
      border: 1px solid rgb(33 30 27 / 0.55);
      background: var(--grund);
      color: var(--text);
      transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
    }

#kontakt input:focus-visible,
    #kontakt select:focus-visible,
    #kontakt textarea:focus-visible { outline: 3px solid transparent; outline-offset: 2px; border-color: var(--dunkel); background: var(--grund-2); box-shadow: 0 0 0 4px var(--akzent-tief); }

#kontakt textarea { min-height: 132px; resize: vertical; }

#kontakt .auswahl { position: relative; }

#kontakt select { appearance: none; padding-right: 44px; cursor: pointer; }

#kontakt .auswahl::after {
      content: "";
      position: absolute;
      right: 20px;
      top: 50%;
      width: 8px;
      height: 8px;
      pointer-events: none;
      border-right: 1.5px solid var(--text);
      border-bottom: 1.5px solid var(--text);
      transform: translateY(-70%) rotate(45deg);
    }

#kontakt .chips { display: flex; flex-wrap: wrap; gap: 10px; }

#kontakt .chip { position: relative; font-weight: 600; }

#kontakt .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }

#kontakt .chip span {
      display: inline-flex;
      align-items: center;
      min-height: 46px;
      padding: 0 20px;
      cursor: pointer;
      border: 1px solid rgb(33 30 27 / 0.55);
      transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    }

#kontakt .chip input:checked + span { background: var(--dunkel); color: var(--grund-2); border-color: var(--dunkel); }

#kontakt .chip input:focus-visible + span { box-shadow: 0 0 0 4px var(--akzent-tief); outline: 3px solid transparent; outline-offset: 2px; }

#kontakt .hinweis { margin: 0; font-size: 0.92rem; color: var(--text-gedaempft); overflow-wrap: anywhere; hyphens: auto; }

#kontakt .hinweis a { color: var(--text); }

#kontakt .senden { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

#kontakt .senden .knopf { --knopf-bg: var(--cta); --knopf-fg: var(--auf-cta); }

#kontakt [data-anfrage-ok] { padding: 16px 18px; background: rgb(227 154 109 / 0.28); color: var(--text); }

@supports (corner-shape: bevel) {
      #kontakt .fotos img:last-child { border-radius: 0 var(--schraeg-gross) 0 0; corner-shape: bevel; }
      #kontakt .knopf,
      #kontakt .chip span { border-radius: 0 var(--schraeg) 0 0; corner-shape: bevel; }
    }

@media (forced-colors: active) {
      #kontakt .chip input:checked + span { border-width: 3px; font-weight: 700; }
    }

@media (max-width: 900px) {
      #kontakt .raster { grid-template-columns: minmax(0, 1fr); }
    }

@media (max-width: 560px) {
      #kontakt form { grid-template-columns: minmax(0, 1fr); }
    }

#fuss { padding-block: clamp(64px, 8vw, 110px) 32px; overflow: clip; background: var(--dunkel); border-radius: 0; clip-path: polygon(0 var(--blatt), 56% var(--blatt), calc(56% + var(--blatt)) 0, 100% 0, 100% 100%, 0 100%); }

#fuss .oben { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }

#fuss .marke img { display: block; width: 180px; height: auto; }

#fuss .marke p { margin-top: 18px; max-width: 36ch; color: var(--text-hell-gedaempft); line-height: 1.55; }

#fuss h2 { font: 700 0.8rem/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent); }

#fuss ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }

#fuss a { color: var(--text-hell); text-decoration: none; transition: color 0.3s; }

#fuss a:hover { color: var(--akzent); }

#fuss .spalte p { margin-top: 16px; color: var(--text-hell-gedaempft); line-height: 1.6; }

#fuss .riesig {
      margin: clamp(48px, 7vw, 96px) 0 clamp(16px, 3vw, 32px);
      font: 800 clamp(4rem, 19vw, 17rem)/0.8 var(--font-display);
      letter-spacing: -0.05em;
      white-space: nowrap;
      text-align: center;
      color: transparent;
      background: linear-gradient(180deg, rgb(227 154 109 / 0.9) 10%, rgb(227 154 109 / 0.05) 92%);
      -webkit-background-clip: text;
      background-clip: text;
    }

#fuss .unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; border-top: 1px solid var(--linie-dunkel); font-size: 0.9rem; color: var(--text-hell-gedaempft); }

#fuss .recht { margin: 0; display: flex; flex-wrap: wrap; gap: 24px; }

#fuss .recht a { color: inherit; }

#fuss .recht a:hover { color: var(--text-hell); }

@media (max-width: 900px) {
      #fuss .oben { grid-template-columns: minmax(0, 1fr); }
    }

@media (max-width: 1020px) {
      #fuss { padding-bottom: 104px; }
    }