:root {
  color-scheme: light dark;
  --abstand-gross: clamp(6rem, 3.5rem + 8vw, 11rem);
  --abstand-klein: clamp(2rem, 1.5rem + 2vw, 3rem);
  --abstand-knapp: 1rem;
  --abstand-mittel: clamp(4rem, 2.5rem + 5vw, 7rem);
  --breite: 90rem;
  --breite-schmal: 42rem;
  --dachzeile-abstand: clamp(1rem, 0.6rem + 1vw, 1.5rem);
  --dachzeile-farbe: var(--text);
  --dachzeile-gewicht: 400;
  --dachzeile-groesse: 0.875rem;
  --dachzeile-laufweite: normal;
  --dachzeile-schreibweise: none;
  --einheit: 0.5rem;
  --einheit-flaeche: var(--einheit);
  --einleitung-breite: 42ch;
  --einleitung-farbe: var(--text);
  --einleitung-gewicht: var(--gewicht-text);
  --einleitung-groesse: clamp(1.013rem, 0.945rem + 0.27vw, 1.238rem);
  --gewicht-betont: 500;
  --gewicht-display: var(--gewicht-h1);
  --gewicht-fett: 600;
  --gewicht-h1: 800;
  --gewicht-text: 300;
  --gewicht-titel: 600;
  --groesse-h1: clamp(2.75rem, 0.5rem + 8.5vw, 10rem);
  --groesse-h2: clamp(1.625rem, 1rem + 2vw, 2.75rem);
  --groesse-h3: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  --groesse-hero-gross: clamp(3.5rem, 1rem + 11vw, 15rem);
  --groesse-hero-riesig: clamp(4.5rem, 1rem + 17vw, 24rem);
  --groesse-klein: 0.8125rem;
  --groesse-text: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --kasten-abstand: 2rem;
  --kasten-radius: 1rem;
  --kasten-schatten-deckkraft: 16%;
  --kasten-schatten-groesse: 0px;
  --kasten-schatten-unschaerfe: 48px;
  --kasten-schatten-y: 16px;
  --knopf-grund: var(--text);
  --knopf-text: var(--grund);
  --laufweite-display: var(--laufweite-h1);
  --laufweite-h1: normal;
  --laufweite-titel: -0.015em;
  --link-abstand: 0.25em;
  --link-dicke: 1px;
  --link-farbe: var(--text);
  --link-gewicht: var(--gewicht-betont);
  --marke-groesse: var(--groesse-text);
  --navigation-farbe: var(--text);
  --navigation-gewicht: 500;
  --navigation-groesse: 0.9375rem;
  --radius: 0.625rem;
  --radius-knopf: 0.5rem;
  --rand: clamp(1rem, 4vw, 4rem);
  --randtext-groesse: 0.625rem;
  --schreibweise-display: var(--schreibweise-h1);
  --schreibweise-h1: none;
  --schrift-display: var(--schrift-titel);
  --schrift-text: "Inter Tight", system-ui, sans-serif;
  --schrift-titel: "Inter Tight", system-ui, sans-serif;
  --silbentrennung: auto;
  --text-breite: 85ch;
  --trennlinie-art: dotted;
  --zeile-display: 0.92;
  --zeile-h1: 1.05;
  --zeile-text: 1.55;
  --zeile-titel: 1.1;
  --akzent: #cc3a10;
  --akzent-text: var(--akzent);
  --auf-akzent: #ffffff;
  --auf-schleier: #ffffff;
  --flaeche: #ffffff;
  --gedaempft: #636363;
  --grund: #f6f6f6;
  --kasten-schatten-farbe: #000000;
  --linie: #cfcfcf;
  --schleier: rgba(20, 20, 20, 0.6);
  --seite-grund: #e4e4e4;
  --text: #1c1c1c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --akzent: #b3b3b3;
    --akzent-text: var(--akzent);
    --auf-akzent: #101010;
    --auf-schleier: #ffffff;
    --flaeche: #050505;
    --gedaempft: #a3a3a3;
    --grund: #101010;
    --kasten-schatten-farbe: #000000;
    --linie: #2c2c2c;
    --schleier: rgba(10, 10, 10, 0.6);
    --seite-grund: #050505;
    --text: #f1f1f1;
  }
}
:root[data-farbe="hell"] {
  color-scheme: light;
  --akzent: #cc3a10;
  --akzent-text: var(--akzent);
  --auf-akzent: #ffffff;
  --auf-schleier: #ffffff;
  --flaeche: #ffffff;
  --gedaempft: #636363;
  --grund: #f6f6f6;
  --kasten-schatten-farbe: #000000;
  --linie: #cfcfcf;
  --schleier: rgba(20, 20, 20, 0.6);
  --seite-grund: #e4e4e4;
  --text: #1c1c1c;
}
:root[data-farbe="dunkel"] {
  color-scheme: dark;
  --akzent: #b3b3b3;
  --akzent-text: var(--akzent);
  --auf-akzent: #101010;
  --auf-schleier: #ffffff;
  --flaeche: #050505;
  --gedaempft: #a3a3a3;
  --grund: #101010;
  --kasten-schatten-farbe: #000000;
  --linie: #2c2c2c;
  --schleier: rgba(10, 10, 10, 0.6);
  --seite-grund: #050505;
  --text: #f1f1f1;
}
.grund--invers {
  color-scheme: dark;
  --akzent: #b3b3b3;
  --akzent-text: var(--akzent);
  --auf-akzent: #101010;
  --auf-schleier: #ffffff;
  --flaeche: #050505;
  --gedaempft: #a3a3a3;
  --grund: #101010;
  --kasten-schatten-farbe: #000000;
  --linie: #2c2c2c;
  --schleier: rgba(10, 10, 10, 0.6);
  --seite-grund: #050505;
  --text: #f1f1f1;
}
@media (prefers-color-scheme: dark) {
:root:not([data-farbe="hell"]) .grund--invers {
  color-scheme: light;
  --akzent: #cc3a10;
  --akzent-text: var(--akzent);
  --auf-akzent: #ffffff;
  --auf-schleier: #ffffff;
  --flaeche: #ffffff;
  --gedaempft: #636363;
  --grund: #f6f6f6;
  --kasten-schatten-farbe: #000000;
  --linie: #cfcfcf;
  --schleier: rgba(20, 20, 20, 0.6);
  --seite-grund: #e4e4e4;
  --text: #1c1c1c;
}
}
:root[data-farbe="dunkel"] .grund--invers {
  color-scheme: light;
  --akzent: #cc3a10;
  --akzent-text: var(--akzent);
  --auf-akzent: #ffffff;
  --auf-schleier: #ffffff;
  --flaeche: #ffffff;
  --gedaempft: #636363;
  --grund: #f6f6f6;
  --kasten-schatten-farbe: #000000;
  --linie: #cfcfcf;
  --schleier: rgba(20, 20, 20, 0.6);
  --seite-grund: #e4e4e4;
  --text: #1c1c1c;
}
:root[data-farbe="hell"] .grund--invers {
  color-scheme: dark;
  --akzent: #b3b3b3;
  --akzent-text: var(--akzent);
  --auf-akzent: #101010;
  --auf-schleier: #ffffff;
  --flaeche: #050505;
  --gedaempft: #a3a3a3;
  --grund: #101010;
  --kasten-schatten-farbe: #000000;
  --linie: #2c2c2c;
  --schleier: rgba(10, 10, 10, 0.6);
  --seite-grund: #050505;
  --text: #f1f1f1;
}
@font-face { font-family: "Inter Tight"; src: url("schriften/1266c17bda/InterTight-Thin.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/a4de1d4f00/InterTight-ExtraLight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/58f55b4a36/InterTight-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/55e81c9c4b/InterTight-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/335b70d046/InterTight-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/9bbfab3651/InterTight-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/b5336d29f0/InterTight-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/13d468c584/InterTight-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/04b39c0b80/InterTight-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/da8556146c/InterTight-ThinItalic.woff2") format("woff2"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/2fd72e60fd/InterTight-ExtraLightItalic.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/e741ed8c4a/InterTight-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/f086ddb6de/InterTight-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/4a90042e95/InterTight-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/e400409cc4/InterTight-SemiBoldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/552adb2e23/InterTight-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/9cff1d3ecb/InterTight-ExtraBoldItalic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url("schriften/fe34bfe9ee/InterTight-BlackItalic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: var(--groesse-text);
  font-weight: var(--gewicht-text);
  line-height: var(--zeile-text);
}
img, svg { display: block; max-width: 100%; height: auto; }
strong, b { font-weight: var(--gewicht-fett); }
a[data-mail] { text-decoration: underline; cursor: pointer; }
a { color: var(--link-farbe); text-underline-offset: var(--link-abstand); text-decoration-thickness: var(--link-dicke); }
:focus-visible { outline: 2px solid var(--akzent-text); outline-offset: 3px; }
h1, h2, h3, h4 { font-family: var(--schrift-titel); line-height: var(--zeile-titel); font-weight: var(--gewicht-titel); letter-spacing: var(--laufweite-titel); margin: 0 0 calc(var(--einheit) * 2); }
h1 { font-size: var(--groesse-h1); font-weight: var(--gewicht-h1); letter-spacing: var(--laufweite-h1); text-transform: var(--schreibweise-h1); line-height: var(--zeile-h1); }
h1, h2 { overflow-wrap: break-word; }
h1, h2, h3, h4 { hyphens: var(--silbentrennung); hyphenate-limit-chars: 10 4 4; text-wrap: balance; }
.silbentrennung--aus { --silbentrennung: manual; }
h2 { font-size: var(--groesse-h2); }
h3 { font-size: var(--groesse-h3); }
h4 { font-size: var(--groesse-text); font-weight: var(--gewicht-titel); letter-spacing: normal; }
p, ul, ol, blockquote, pre { margin: 0 0 calc(var(--einheit) * 2); }
:where(p, ul, ol, blockquote, pre):last-child { margin-bottom: 0; }
blockquote { border-left: 3px solid var(--linie); padding-left: calc(var(--einheit) * 2); color: var(--gedaempft); }
code { font-size: 0.9em; background: var(--flaeche); padding: 0.1em 0.3em; border-radius: calc(var(--radius) / 2); }
pre { background: var(--flaeche); padding: calc(var(--einheit) * 2); border-radius: var(--radius); overflow-x: auto; }
pre code { background: none; padding: 0; }
hr { border: 0; border-top: 1px var(--trennlinie-art) var(--linie); margin: calc(var(--einheit) * 4) 0; }
.sprungmarke { position: absolute; left: -100vw; }
.sprungmarke:focus { left: var(--rand); top: var(--einheit); z-index: 10; background: var(--grund); padding: var(--einheit); }
.block { padding-inline: var(--rand); container-type: inline-size; }
.block > * { max-width: var(--breite); margin-inline: auto; }
.breite--schmal > * { max-width: var(--breite-schmal); }
.breite--weit > *, .breite--voll > * { max-width: none; }
.breite--voll { padding-inline: 0; }
.fehlerseite { max-width: var(--breite-schmal); margin: 0 auto; padding: calc(var(--einheit) * 12) var(--rand); }
.abstand--keiner { padding-block: 0; }
.abstand--knapp { padding-block: var(--abstand-knapp); }
.abstand--klein { padding-block: var(--abstand-klein); }
.abstand--mittel { padding-block: var(--abstand-mittel); }
.abstand--gross { padding-block: var(--abstand-gross); }
.abstand-oben--keiner { padding-block-start: 0; }
.abstand-oben--knapp { padding-block-start: var(--abstand-knapp); }
.abstand-oben--klein { padding-block-start: var(--abstand-klein); }
.abstand-oben--mittel { padding-block-start: var(--abstand-mittel); }
.abstand-oben--gross { padding-block-start: var(--abstand-gross); }
.abstand-unten--keiner { padding-block-end: 0; }
.abstand-unten--knapp { padding-block-end: var(--abstand-knapp); }
.abstand-unten--klein { padding-block-end: var(--abstand-klein); }
.abstand-unten--mittel { padding-block-end: var(--abstand-mittel); }
.abstand-unten--gross { padding-block-end: var(--abstand-gross); }
.grund--flaeche { background: var(--flaeche); }
.grund--akzent { background: var(--akzent); color: var(--auf-akzent); }
.grund--invers { background: var(--grund); color: var(--text); }
.grund--akzent a { color: inherit; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.knopf {
  display: inline-block; padding: calc(var(--einheit) * 1.5) calc(var(--einheit) * 3);
  border: 2px solid var(--knopf-grund); border-radius: var(--radius-knopf); background: var(--knopf-grund); color: var(--knopf-text);
  font-weight: var(--gewicht-betont); line-height: var(--zeile-titel); text-decoration: none; transition: background 0.15s, color 0.15s;
}
.knopf:hover { background: transparent; color: var(--knopf-grund); }
.knopf--zweit { background: transparent; color: var(--knopf-grund); }
.knopf--zweit:hover { background: var(--knopf-grund); color: var(--knopf-text); }
.grund--akzent .knopf { border-color: var(--auf-akzent); background: var(--auf-akzent); color: var(--akzent); }
.grund--akzent .knopf:hover, .grund--akzent .knopf--zweit { background: transparent; color: var(--auf-akzent); }
.grund--akzent .knopf--zweit:hover { background: var(--auf-akzent); color: var(--akzent); }
.bildflaeche--verlauf { background: linear-gradient(135deg, var(--akzent), var(--flaeche)); }
.bildflaeche--akzent { background: var(--akzent); }
.bildflaeche--flaeche { background: var(--flaeche); }
.grund--flaeche .bildflaeche--flaeche { background: var(--grund); }
:root { --kante-hoehe: clamp(1.5rem, 4vw, 3.5rem); }
:is(.kante--schraeg, .kante--welle, .kante--zacken) {
  position: relative; z-index: 1;
  border-bottom: var(--kante-hoehe) solid transparent; margin-bottom: calc(var(--kante-hoehe) * -1);
}
:is(.kante--schraeg, .kante--welle, .kante--zacken) + .block { border-top: var(--kante-hoehe) solid transparent; }
:is(.kante--schraeg, .kante--welle, .kante--zacken):has(+ :is(.kante--schraeg, .kante--welle, .kante--zacken)) { z-index: 2; }
:is(.kante--schraeg, .kante--welle, .kante--zacken):has(+ :is(.kante--schraeg, .kante--welle, .kante--zacken) + :is(.kante--schraeg, .kante--welle, .kante--zacken)) { z-index: 3; }
:is(.kante--schraeg, .kante--welle, .kante--zacken):has(+ :is(.kante--schraeg, .kante--welle, .kante--zacken) + :is(.kante--schraeg, .kante--welle, .kante--zacken) + :is(.kante--schraeg, .kante--welle, .kante--zacken)) { z-index: 4; }
.kante--schraeg { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kante-hoehe)), 0 100%); }
.kante--welle {
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--kante-hoehe) + 1px) no-repeat,
    radial-gradient(circle var(--kante-hoehe) at 50% 0, #000 calc(100% - 1px), transparent 100%) bottom / calc(var(--kante-hoehe) * 2) var(--kante-hoehe) repeat-x;
}
.kante--zacken {
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--kante-hoehe) + 1px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) bottom / calc(var(--kante-hoehe) * 2) var(--kante-hoehe) repeat-x;
}
.nur-vorleser { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: no-preference) {
  :is(.mikro--sanft, .mikro--fuellen, .mikro--pfeil) :is(.karten__bildrahmen, .aufrufkarte) {
    transition: translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s;
  }
  :is(.mikro--sanft, .mikro--fuellen, .mikro--pfeil) :is(.karten__karte:hover .karten__bildrahmen, .aufrufkarte:hover) {
    translate: 0 -0.25rem; box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.12);
  }
  :is(.mikro--sanft, .mikro--fuellen, .mikro--pfeil):not(.block--kopf, .block--fuss) :is(p, li) > a:not(.knopf) {
    font-weight: var(--link-gewicht); text-decoration: none; padding-bottom: 0.1em;
    background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 0% var(--link-dicke);
    transition: background-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  :is(.mikro--sanft, .mikro--fuellen, .mikro--pfeil):not(.block--kopf, .block--fuss) :is(p, li) > a:not(.knopf):is(:hover, :focus-visible) {
    background-position: 0 100%; background-size: 100% var(--link-dicke);
  }
  .mikro--fuellen:not(.grund--akzent, .variante--vollbild) .knopf:not(.aufrufkarte__knopf) {
    transition: color 0.3s, border-color 0.3s, background-size 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .mikro--fuellen:not(.grund--akzent, .variante--vollbild) .knopf:not(.knopf--zweit, .aufrufkarte__knopf) {
    background: linear-gradient(var(--akzent), var(--akzent)) no-repeat left / 0% 100% var(--knopf-grund);
  }
  .mikro--fuellen:not(.grund--akzent, .variante--vollbild) .knopf:not(.knopf--zweit, .aufrufkarte__knopf):hover {
    background: linear-gradient(var(--akzent), var(--akzent)) no-repeat left / 100% 100% var(--knopf-grund);
    color: var(--auf-akzent); border-color: var(--akzent);
  }
  .mikro--fuellen:not(.grund--akzent, .variante--vollbild) .knopf--zweit:not(.aufrufkarte__knopf) {
    background: linear-gradient(var(--knopf-grund), var(--knopf-grund)) no-repeat left / 0% 100%;
  }
  .mikro--fuellen:not(.grund--akzent, .variante--vollbild) .knopf--zweit:not(.aufrufkarte__knopf):hover { background-size: 100% 100%; color: var(--knopf-text); }
  .mikro--pfeil .knopf:not(.aufrufkarte__knopf)::after { content: "→"; display: inline-block; margin-left: 0.5em; transition: translate 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .mikro--pfeil .knopf:not(.aufrufkarte__knopf):hover::after { translate: 0.3em 0; }
  .mikro--pfeil:not(.grund--akzent, .variante--vollbild) .knopf:not(.knopf--zweit, .aufrufkarte__knopf):hover { background: var(--knopf-grund); color: var(--knopf-text); border-color: var(--knopf-grund); }
  .mikro--pfeil:not(.grund--akzent, .variante--vollbild) .knopf--zweit:not(.aufrufkarte__knopf):hover { background: transparent; color: var(--knopf-grund); }
}
:root:has(.mit-kasten) {
  --kasten-breite: calc(var(--breite) + 2 * var(--rand));
  --kasten-platz: calc((100vw - var(--kasten-breite) - 2 * var(--einheit)) * 1000);
  --kasten-luft: clamp(0px, var(--kasten-platz), var(--kasten-abstand));
  --kasten-ecke: clamp(0px, var(--kasten-platz), var(--kasten-radius));
  --kasten-schatten: 0 var(--kasten-schatten-y) var(--kasten-schatten-unschaerfe) var(--kasten-schatten-groesse)
    color-mix(in srgb, var(--kasten-schatten-farbe) var(--kasten-schatten-deckkraft), transparent);
}
.mit-kasten { background: var(--seite-grund); }
.mit-kasten > main,
:is(.kasten--alles, .kasten--ohne-fuss) > .block--kopf,
.kasten--ohne-kopf > footer { max-width: var(--kasten-breite); margin-inline: auto; }
.kasten--alles > footer { max-width: var(--kasten-breite); margin-inline: auto; }
:is(.kasten--alles, .kasten--ohne-fuss) { position: relative; padding-block: var(--kasten-luft); }
:is(.kasten--alles, .kasten--ohne-fuss)::before {
  content: ""; position: absolute; z-index: -1; top: var(--kasten-luft); bottom: var(--kasten-luft); pointer-events: none;
  left: max(0px, (100% - var(--kasten-breite)) / 2); right: max(0px, (100% - var(--kasten-breite)) / 2);
  background: var(--grund); border-radius: var(--kasten-ecke); box-shadow: var(--kasten-schatten);
}
.kasten--ohne-fuss > footer { position: absolute; top: 100%; left: 0; right: 0; }
:is(.kasten--ohne-kopf, .kasten--inhalt) > main { position: relative; margin-top: var(--kasten-luft); background: var(--grund); }
.kasten--inhalt > main { margin-bottom: var(--kasten-luft); border-radius: var(--kasten-ecke); }
.kasten--ohne-kopf > main { border-radius: var(--kasten-ecke) var(--kasten-ecke) 0 0; }
.kasten--ohne-kopf > footer { position: relative; margin-bottom: var(--kasten-luft); background: var(--grund); border-radius: 0 0 var(--kasten-ecke) var(--kasten-ecke); }
:is(.kasten--ohne-kopf, .kasten--inhalt) > main::before, .kasten--ohne-kopf > footer::before {
  content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; box-shadow: var(--kasten-schatten); pointer-events: none;
}
:is(.kasten--ohne-kopf, .kasten--inhalt) > main > :first-child,
:is(.kasten--alles, .kasten--ohne-fuss):has(> main > .block--hero:first-child .hero--voll) > main > :first-child,
:is(.kasten--alles, .kasten--ohne-fuss):has(> main > .block--hero.variante--vollbild:first-child):has(.kopf--ueber) > main > :first-child {
  border-top-left-radius: var(--kasten-ecke); border-top-right-radius: var(--kasten-ecke); overflow: clip;
}
:is(.kasten--ohne-fuss, .kasten--inhalt) > main > :last-child,
:is(.kasten--alles, .kasten--ohne-kopf) > footer > :last-child {
  border-bottom-left-radius: var(--kasten-ecke); border-bottom-right-radius: var(--kasten-ecke); overflow: clip;
}
:is(.kasten--alles, .kasten--ohne-fuss):has(.kopf--fixiert)::after {
  content: ""; position: fixed; z-index: 9; top: 0; pointer-events: none;
  left: max(0px, (100% - var(--kasten-breite)) / 2); right: max(0px, (100% - var(--kasten-breite)) / 2);
  height: calc(var(--kasten-luft) + var(--kasten-ecke));
  background:
    radial-gradient(circle at 100% 100%, transparent calc(var(--kasten-ecke) - 0.5px), var(--seite-grund) var(--kasten-ecke)) left bottom / var(--kasten-ecke) var(--kasten-ecke) no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--kasten-ecke) - 0.5px), var(--seite-grund) var(--kasten-ecke)) right bottom / var(--kasten-ecke) var(--kasten-ecke) no-repeat,
    linear-gradient(var(--seite-grund), var(--seite-grund)) top / 100% var(--kasten-luft) no-repeat;
}
@keyframes kasten-streifen { from { opacity: 0; } to { opacity: 1; } }
@supports (animation-timeline: scroll()) {
  :is(.kasten--alles, .kasten--ohne-fuss):has(.kopf--fixiert)::after {
    animation: kasten-streifen linear both; animation-timeline: scroll(root); animation-range: 0px 8px;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-bewegung="scroll"] > * {
      animation: bewegung-scroll linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
  }
}
@keyframes bewegung-scroll {
  from { opacity: 0; transform: translateY(3rem) scale(0.98); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-bewegung="parallax"] { view-timeline: --parallax block; }
    [data-bewegung="parallax"]:is(.variante--vollbild) .hero__bild,
    [data-bewegung="parallax"] :is(.aufrufkarte__bild, .karten__bild) {
      animation: bewegung-parallax linear both; animation-timeline: --parallax; animation-range: cover;
    }
    [data-bewegung="parallax"] img.bildtext__bild,
    [data-bewegung="parallax"]:not(.variante--vollbild) img.hero__bild {
      animation: bewegung-ausschnitt linear both; animation-timeline: --parallax; animation-range: cover;
    }
  }
}
@keyframes bewegung-parallax {
  from { transform: translateY(-7%) scale(1.16); }
  to { transform: translateY(7%) scale(1.16); }
}
@keyframes bewegung-ausschnitt {
  from { object-position: 50% 15%; }
  to { object-position: 50% 85%; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-bewegung="maske"] :is(h1, h2) {
      animation: bewegung-maske linear both; animation-timeline: view(); animation-range: entry 10% cover 35%;
    }
    [data-bewegung="maske"] :is(p, li, .knopf, img) {
      animation: bewegung-nach linear both; animation-timeline: view(); animation-range: entry 20% cover 30%;
    }
  }
}
@keyframes bewegung-maske {
  from { clip-path: inset(-0.5em -0.5em 100% -0.5em); transform: translateY(40%); opacity: 0; }
  to { clip-path: inset(-0.5em -0.5em -0.5em -0.5em); transform: none; opacity: 1; }
}
@keyframes bewegung-nach {
  from { opacity: 0; transform: translateY(1rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .block[data-bewegung="stapel"] { position: sticky; top: var(--stapel-oben, 0px); }
  .block[data-bewegung="stapel"]:not(:has(+ .block[data-bewegung="stapel"])) { position: relative; }
  .block[data-bewegung="stapel"] ~ .block:not([data-bewegung="stapel"]) { position: relative; }
  :is(.block[data-bewegung="stapel"], .block[data-bewegung="stapel"] ~ .block):not(.grund--flaeche, .grund--akzent) { background: var(--grund); }
  .block[data-bewegung="stapel"] + .block[data-bewegung="stapel"] { box-shadow: 0 -1.5rem 3rem rgb(0 0 0 / 0.12); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-bewegung="woerter"] :is(h1, h2) { view-timeline: --woerter block; }
    [data-bewegung="woerter"] .wort {
      animation: bewegung-wort linear both; animation-timeline: --woerter;
      animation-range: cover calc(10% + 35% * var(--i) / var(--n)) cover calc(20% + 35% * var(--i) / var(--n));
    }
  }
}
@keyframes bewegung-wort {
  from { opacity: 0.15; }
}
.vorhang > :first-child { position: relative; z-index: 1; }
.vorhang > .grund--standard:first-child { background: var(--grund); }
.vorhang > :last-child { position: sticky; bottom: 0; z-index: 0; }
@property --grund { syntax: "<color>"; inherits: true; initial-value: white; }
@property --text { syntax: "<color>"; inherits: true; initial-value: black; }
@property --gedaempft { syntax: "<color>"; inherits: true; initial-value: gray; }
@property --linie { syntax: "<color>"; inherits: true; initial-value: silver; }
@property --flaeche { syntax: "<color>"; inherits: true; initial-value: white; }
:root.farbwechsel { transition: --grund 0.6s ease, --text 0.6s ease, --gedaempft 0.6s ease, --linie 0.6s ease, --flaeche 0.6s ease; }
@media (prefers-reduced-motion: reduce) { :root.farbwechsel { transition-duration: 0.01s; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .seitwaerts-an { min-height: calc(var(--hoehe) + var(--weg)); view-timeline: --seitwaerts block; overflow-x: clip; }
    .seitwaerts-an .karten { position: sticky; top: max(0px, calc((100svh - var(--hoehe)) / 2)); }
    .block.seitwaerts-an .karten.karten--band .karten__raster { overflow: visible; scroll-snap-type: none; animation: bewegung-seitwaerts linear both; animation-timeline: --seitwaerts; animation-range: contain 0% contain 100%; }
    [data-bewegung="tiefe"] { view-timeline: --tiefe block; overflow: clip; }
    [data-bewegung="tiefe"] > * { animation: bewegung-tiefe linear both; animation-timeline: --tiefe; animation-range: cover; }
  }
}
@keyframes bewegung-seitwaerts { to { transform: translateX(calc(-1 * var(--weg))); } }
@keyframes bewegung-tiefe { from { transform: translateY(3svh); } to { transform: translateY(-3svh); } }

@view-transition { navigation: auto; }
.block--kopf { view-transition-name: kopf; }
.leiste { view-transition-name: leiste; }
.nach-oben { view-transition-name: nach-oben; }
::view-transition-group(kopf), ::view-transition-group(leiste), ::view-transition-group(nach-oben),
::view-transition-old(kopf), ::view-transition-new(kopf) { animation-duration: 0.15s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
::view-transition-old(root) { animation: 0.2s ease both seitenwechsel-aus; }
::view-transition-new(root) { animation: 0.25s ease 0.05s both seitenwechsel-ein; }
@keyframes seitenwechsel-aus { to { opacity: 0; } }
@keyframes seitenwechsel-ein { from { opacity: 0; } }

.fliesstext__text > :is(p, ul, ol) { max-width: var(--text-breite); }
.fliesstext__titel:where(h1) { font-size: min(var(--groesse-h1), 7.5cqi, calc(var(--breite) * 0.075)); }
.breite--schmal .fliesstext__titel:where(h1) { font-size: min(var(--groesse-h1), 7.5cqi, calc(var(--breite-schmal) * 0.075)); }
:is(.breite--weit, .breite--voll) .fliesstext__titel:where(h1) { font-size: min(var(--groesse-h1), 7.5cqi); }
.fliesstext__text :is(h2, h3, h4)[id] { scroll-margin-top: calc(var(--einheit) * 4); }
.verzeichnis { margin-block: 0 calc(var(--einheit) * 4); padding: calc(var(--einheit) * 2) calc(var(--einheit) * 3); border-left: 3px solid var(--akzent); background: var(--flaeche); border-radius: 0 var(--radius) var(--radius) 0; }
.grund--flaeche .verzeichnis { background: var(--grund); }
.grund--akzent .verzeichnis { background: var(--grund); color: var(--text); border-left-color: var(--akzent-text); }
.verzeichnis__titel { margin: 0 0 var(--einheit); font-weight: var(--gewicht-betont); }
.verzeichnis__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--einheit) * 0.75); }
.verzeichnis__eintrag--unter { padding-left: calc(var(--einheit) * 2.5); font-size: var(--groesse-klein); }
.verzeichnis a { text-decoration: none; }
.verzeichnis a:hover { text-decoration: underline; }
@container (min-width: 56rem) {
  .fliesstext--seitlich { display: grid; grid-template-columns: minmax(12rem, 1fr) 3fr; column-gap: calc(var(--einheit) * 6); align-items: start; }
  .fliesstext--seitlich > .fliesstext__titel { grid-column: 1 / -1; }
  .fliesstext--seitlich > .verzeichnis { position: sticky; top: calc(var(--einheit) * 4); margin: 0; }
}

.fuss { color: var(--gedaempft); font-size: var(--groesse-klein); }
.fuss a { color: var(--gedaempft); text-decoration: none; }
.fuss a:hover, .fuss a[aria-current="page"] { color: var(--text); text-decoration: underline; }
.fuss__name { color: var(--text); font-weight: var(--gewicht-betont); }
.fuss__kontakt { font-style: normal; }
.fuss__titel { font-size: var(--groesse-klein); font-family: var(--schrift-text); color: var(--text); margin-bottom: var(--einheit); }
.fuss--titel-gross .fuss__titel { text-transform: uppercase; letter-spacing: 0.06em; }
.fuss__liste, .fuss__links { list-style: none; margin: 0; padding: 0; }
.fuss__liste li + li { margin-top: calc(var(--einheit) * 0.5); }
.fuss__wege { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--einheit) * 0.5); margin-top: var(--einheit); }
.fuss__spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: calc(var(--einheit) * 4); }
.fuss__zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--einheit) calc(var(--einheit) * 3); }
.fuss__spalten + .fuss__zeile { margin-top: calc(var(--einheit) * 4); padding-top: calc(var(--einheit) * 2); border-top: 1px var(--trennlinie-art) var(--linie); }
.fuss__links { display: flex; flex-wrap: wrap; align-items: center; }
.fuss__links li + li::before { content: "|"; color: var(--linie); margin-inline: calc(var(--einheit) * 1.5); }
.fuss__haus { display: flex; }
.fuss .fuss__monogramm {
  display: inline-block; margin-bottom: calc(var(--einheit) * 4); color: var(--text); text-decoration: none;
  font-family: var(--schrift-titel); font-size: var(--groesse-h1); font-weight: var(--gewicht-h1); letter-spacing: var(--laufweite-h1); line-height: 0.9;
}
.fuss .fuss__monogramm:hover { color: var(--text); text-decoration: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .monogramm-an .fuss__monogramm--steigen { overflow: clip; padding-block: 0.1em; margin-top: -0.1em; margin-bottom: calc(var(--einheit) * 4 - 0.1em); }
    .monogramm-an .fuss__monogramm--steigen .fuss__monogramm-text {
      display: block; animation: fuss-monogramm linear both; animation-timeline: scroll(root block);
    }
  }
}
@keyframes fuss-monogramm { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .monogramm-an .fuss__monogramm--zeichen .fuss__zeichen { display: inline-block; opacity: 0; }
  .monogramm-an .fuss__monogramm--zeichen.laeuft .fuss__zeichen { animation: fuss-zeichen 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 0.12s); }
}
@keyframes fuss-zeichen { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
.fuss__zeile:has(.fuss__social) { justify-content: flex-start; }
.fuss__social { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--einheit) * 2.5); list-style: none; margin: 0 0 0 auto; padding: 0; }
.fuss .fuss__social a { display: inline-flex; color: var(--text); opacity: 0.7; transition: opacity 0.15s; }
.fuss .fuss__social a:hover { color: var(--text); opacity: 1; text-decoration: none; }
.fuss__social svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.fuss__haus svg { width: 1.2em; height: 1.2em; }
.fuss__wortmarke {
  margin: calc(var(--einheit) * 6) 0 0; padding-bottom: 0.06em; overflow: clip; color: var(--text);
  font-family: var(--schrift-display); font-weight: var(--gewicht-display); letter-spacing: var(--laufweite-display);
  text-transform: var(--schreibweise-display); line-height: var(--zeile-display); font-size: min(var(--groesse-hero-riesig), 20vw);
  view-timeline: --fuss-wortmarke block;
}
.fuss__wortmarke-text { display: block; }
.fuss__wortmarke.eingepasst { font-size: var(--einpassen); white-space: nowrap; }
.fuss__wortmarke.messen { font-size: 100px; width: max-content; white-space: nowrap; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fuss__wortmarke-text { animation: fuss-wortmarke linear both; animation-timeline: --fuss-wortmarke; animation-range: entry 0% entry 100%; }
  }
}
@keyframes fuss-wortmarke { from { transform: translateY(75%); } to { transform: none; } }
.variante--gross .fuss__satz { font-family: var(--schrift-titel); font-size: var(--groesse-h1); line-height: var(--zeile-titel); color: var(--text); max-width: 20ch; margin-bottom: calc(var(--einheit) * 4); }
.variante--gross .fuss__wege a { color: var(--akzent-text); }
:root:has(.nach-oben) { scroll-behavior: smooth; }
.fuss .nach-oben {
  --nach-oben-groesse: calc(var(--einheit) * 4 + var(--groesse-text));
  position: fixed; z-index: 30; right: var(--rand); bottom: calc(var(--einheit) * 2);
  display: grid; place-items: center; width: var(--nach-oben-groesse); height: var(--nach-oben-groesse);
  border-radius: 50%; background: var(--text); color: var(--grund); text-decoration: none;
  box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 0.18); transition: background 0.15s;
}
.fuss .nach-oben:hover { color: var(--grund); background: color-mix(in srgb, var(--text) 85%, var(--grund)); text-decoration: none; }
.fuss .nach-oben:focus-visible { outline-offset: 3px; }
.nach-oben__pfeil { width: 45%; height: 45%; }
.nach-oben__ring { display: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes nach-oben-ein { from { opacity: 0; visibility: hidden; translate: 0 50%; } to { opacity: 1; visibility: visible; translate: 0 0; } }
    @keyframes nach-oben-ring { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
    .fuss .nach-oben {
      opacity: 0; visibility: hidden;
      animation: nach-oben-ein linear both; animation-timeline: scroll(root block); animation-range: 0 min(100vh, 50%);
    }
    .nach-oben__ring {
      --ring-strich: calc(var(--nach-oben-groesse) / 16);
      --ring-farbe: color-mix(in oklab, var(--akzent), var(--grund) 40%);
      display: block; position: absolute; inset: calc(var(--nach-oben-groesse) * 3.25 / 48); pointer-events: none;
    }
    .nach-oben__ring::before {
      content: ""; position: absolute; inset: 0; border-radius: 50%;
      border: var(--ring-strich) solid color-mix(in srgb, var(--grund) 10%, transparent);
    }
    .nach-oben__teil { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; }
    .nach-oben__teil:first-child { left: 50%; }
    .nach-oben__teil:last-child { left: 0; }
    .nach-oben__stand {
      position: absolute; top: 0; width: 200%; height: 100%; box-sizing: border-box;
      border-radius: 50%; border: var(--ring-strich) solid var(--ring-farbe);
      animation: nach-oben-ring linear both; animation-timeline: scroll(root block);
    }
    .nach-oben__teil:first-child .nach-oben__stand { left: -100%; clip-path: inset(0 50% 0 0); animation-range: 0% 50%; }
    .nach-oben__teil:last-child .nach-oben__stand { left: 0; clip-path: inset(0 0 0 50%); animation-range: 50% 100%; }
  }
}
.mit-kasten .fuss .nach-oben { right: calc(max(0px, (100% - var(--kasten-breite)) / 2) + var(--rand)); }
body:has(.nach-oben) .block--fuss { padding-bottom: calc(var(--abstand-mittel) + var(--einheit) * 8); }
body:has(.nach-oben) .leiste { max-width: min(calc(100vw - (var(--rand) + var(--einheit) * 6 + var(--groesse-text)) * 2), var(--breite-schmal)); }
:root:not(:has(.mit-kasten)) body:has(.fuss--vorhang) > main { position: relative; z-index: 1; background: var(--grund); }
:root:not(:has(.mit-kasten)) body:has(.fuss--vorhang) > footer { position: sticky; bottom: 0; z-index: 0; }
:root:not(:has(.mit-kasten)) body:has(.fuss--vorhang) > .block--kopf:not(:has(.kopf--fixiert)) { position: relative; z-index: 2; background: var(--grund); }

.hero { position: relative; }
.hero__folien { display: flex; gap: calc(var(--einheit) * 4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.hero--slider .hero__folien { scrollbar-width: none; }
.hero--slider .hero__folien::-webkit-scrollbar { display: none; }
.hero__folie { flex: 0 0 100%; scroll-snap-align: start; display: grid; align-items: center; gap: calc(var(--einheit) * 4); }
.variante--vollbild .hero__folie { min-height: 60svh; }
.hero.hero--kompakt .hero__folie { min-height: 0; }
.hero.hero--hoch .hero__folie { min-height: 60svh; }
.hero.hero--voll .hero__folie { min-height: 100svh; }
.hero__dachzeile { font-size: var(--dachzeile-groesse); text-transform: var(--dachzeile-schreibweise); letter-spacing: var(--dachzeile-laufweite); font-weight: var(--dachzeile-gewicht); color: var(--dachzeile-farbe); margin-bottom: var(--dachzeile-abstand); }
.hero__inhalt { container-type: inline-size; }
.hero__titel { font-size: var(--groesse-h1); font-size: min(var(--groesse-h1), 11cqi, 14svh); font-weight: var(--gewicht-h1); letter-spacing: var(--laufweite-h1); text-transform: var(--schreibweise-h1); line-height: var(--zeile-h1); max-width: 20ch; }
.hero__titel:is(.hero__titel--gross, .hero__titel--riesig, .hero__titel--randvoll) { line-height: var(--zeile-display); max-width: none; }
.hero__titel--gross { font-size: min(var(--groesse-hero-gross), 16cqi); }
.hero__titel--riesig { font-size: min(var(--groesse-hero-riesig), 22cqi); }
.hero__titel--randvoll { font-size: min(var(--groesse-hero-riesig), 22cqi); }
.hero__titel--randvoll.eingepasst { font-size: var(--einpassen); white-space: nowrap; hyphens: manual; }
.hero__titel--randvoll.messen { font-size: 100px; width: max-content; white-space: nowrap; }
.hero__titel--display { font-family: var(--schrift-display); font-weight: var(--gewicht-display); letter-spacing: var(--laufweite-display); text-transform: var(--schreibweise-display); }
.hero__text { color: var(--einleitung-farbe); font-size: var(--einleitung-groesse); font-size: min(var(--einleitung-groesse), max(1rem, 2.5svh)); font-weight: var(--einleitung-gewicht); }
.hero__text > :is(p, ul, ol) { max-width: var(--einleitung-breite); }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: calc(var(--einheit) * 2); margin: calc(var(--einheit) * 4) 0 0; }
.hero--mittig .hero__inhalt { text-align: center; }
.hero--mittig :is(.hero__titel, .hero__text > *) { margin-inline: auto; }
.hero--mittig .hero__knoepfe { justify-content: center; }
.grund--akzent :is(.hero__dachzeile, .hero__text) { color: inherit; }
.variante--geteilt .hero__bild { border-radius: var(--radius); aspect-ratio: 4 / 3; }
:is(img, video).hero__bild { width: 100%; height: 100%; object-fit: cover; display: block; }
@container (min-width: 48rem) {
  .variante--geteilt .hero__folie { grid-template-columns: 1fr 1fr; gap: calc(var(--einheit) * 6); }
  .variante--geteilt .hero__bild { aspect-ratio: auto; align-self: stretch; min-height: 22rem; }
  .variante--geteilt .hero--bild-links .hero__bild { order: -1; }
}
.block.variante--vollbild { padding: 0; }
.variante--vollbild > .hero { max-width: none; }
.variante--vollbild .hero__folien { gap: 0; }
.variante--vollbild .hero__folie { overflow: clip; position: relative; isolation: isolate; padding: min(var(--abstand-mittel), 8svh) var(--rand); color: var(--auf-schleier); }
.variante--vollbild .hero__bild { position: absolute; inset: 0; z-index: -2; border-radius: 0; }
.variante--vollbild .hero__folie::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--schleier); }
.variante--vollbild .hero__inhalt { width: 100%; max-width: var(--breite); margin-inline: auto; }
.variante--vollbild :is(.hero__dachzeile, .hero__text) { color: inherit; }
.variante--vollbild .knopf:hover { background: transparent; color: var(--auf-schleier); border-color: var(--auf-schleier); }
.variante--vollbild .knopf--zweit { background: transparent; color: var(--auf-schleier); border-color: var(--auf-schleier); }
.variante--vollbild .knopf--zweit:hover { background: color-mix(in srgb, var(--auf-schleier) 15%, transparent); }
.hero__steuerung { display: flex; align-items: center; justify-content: center; gap: calc(var(--einheit) * 2); margin-top: calc(var(--einheit) * 3); }
.hero__steuerung[hidden] { display: none; }
.hero__pfeil {
  font: inherit; font-size: var(--groesse-h3); line-height: 1; width: 2.75rem; height: 2.75rem; padding: 0 0 0.15em;
  border: 1px solid var(--linie); border-radius: 50%; background: var(--grund); color: var(--text); cursor: pointer;
}
.hero__pfeil:hover { border-color: currentColor; }
.hero__punkte { display: flex; gap: var(--einheit); }
.hero__punkt { width: 0.875rem; height: 0.875rem; padding: 0; border: 2px solid currentColor; border-radius: 50%; background: transparent; color: var(--gedaempft); cursor: pointer; }
.hero__punkt[aria-current="true"] { background: currentColor; color: var(--akzent-text); }
.hero__folien:focus-visible { outline-offset: -3px; }
.variante--vollbild .hero__steuerung { position: absolute; inset: auto 0 calc(var(--einheit) * 3); margin: 0; }
.variante--vollbild .hero--slider .hero__folie { padding-bottom: calc(var(--abstand-mittel) + 4rem); }
.variante--vollbild :is(.hero__pfeil, .hero__punkt, .hero__punkt[aria-current="true"]) { color: var(--auf-schleier); }
.variante--vollbild .hero__pfeil { background: transparent; border-color: currentColor; }
.hero__zeile { display: block; }
.hero__zeile--akzent { color: var(--akzent-text); }
.variante--vollbild .hero__zeile--akzent { color: inherit; }
.hero__motiv {
  position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; overflow: hidden; pointer-events: none;
  color: var(--text); opacity: 0.07;
}
.hero__motiv svg { height: min(85%, 52rem); width: auto; max-width: none; }
.hero__motiv svg :is(path, polygon, rect, circle, ellipse) { fill: currentColor; }
.hero__folien, .hero__steuerung { position: relative; z-index: 1; }
.hero__motiv--licht {
  opacity: 0.22;
  mask-image: radial-gradient(ellipse 30% 40% at 50% 50%, #000 0%, rgb(0 0 0 / 0.3) 70%);
  mask-size: 180% 180%; mask-repeat: no-repeat;
  animation: hero-licht 12s ease-in-out infinite;
}
@keyframes hero-licht {
  0%, 100% { mask-position: 10% 15%; }
  20% { mask-position: 70% 20%; }
  40% { mask-position: 80% 70%; }
  60% { mask-position: 20% 80%; }
  80% { mask-position: 55% 35%; }
}
[data-bewegung] .hero__titel[data-animation], [data-bewegung] .hero__titel[data-animation] .wort { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-js] .hero__titel[data-animation]:not(.gelaufen) { opacity: 0; animation: hero-sicher 0.01s 2.5s both; }
  :root[data-js] .hero__titel.laeuft:is([data-animation="maske"], [data-animation="zeilen"]:not(:has(.hero__zeile))) { animation: hero-maske 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  :root[data-js] .hero__titel.laeuft[data-animation="zeilen"] .hero__zeile { animation: hero-maske 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 0.12s); }
  :root[data-js] .hero__titel[data-animation="woerter"] .wort { display: inline-block; }
  :root[data-js] .hero__titel.laeuft[data-animation="woerter"] .wort { animation: hero-wort 0.6s ease-out both; animation-delay: calc(var(--i, 0) * 0.07s); }
}
@keyframes hero-maske {
  from { clip-path: inset(-0.5em -0.5em 100% -0.5em); transform: translateY(40%); opacity: 0; }
  to { clip-path: inset(-0.5em -0.5em -0.5em -0.5em); transform: none; opacity: 1; }
}
@keyframes hero-wort { from { opacity: 0; transform: translateY(0.3em); } }
@keyframes hero-sicher { to { opacity: 1; } }

.impressum > :not(h1) { max-width: var(--breite-schmal); }
.impressum > h1 { font-size: min(var(--groesse-h1), 7.5cqi); }
.impressum__teil h2, .impressum__zusatz h2 { font-size: var(--groesse-h3); margin-top: calc(var(--einheit) * 4); }
.impressum__teil > :last-child p:last-child, .impressum__teil > p:last-child { margin-bottom: 0; }
.variante--tabelle .impressum__teil { padding-block: calc(var(--einheit) * 1.5); border-top: 1px solid var(--linie); }
.variante--tabelle .impressum__teil:last-of-type { border-bottom: 1px solid var(--linie); }
.variante--tabelle .impressum__teil h2 { font-family: var(--schrift-text); font-size: var(--groesse-text); margin: 0 0 calc(var(--einheit) * 0.5); }
@container (min-width: 36rem) {
  .variante--tabelle .impressum__teil { display: grid; grid-template-columns: 14rem 1fr; gap: calc(var(--einheit) * 3); }
  .variante--tabelle .impressum__teil h2 { margin: 0; }
}

.kontakt__text { margin-bottom: calc(var(--einheit) * 3); }
.kontakt__text > :is(p, ul, ol) { max-width: var(--text-breite); }
.kontakt address { font-style: normal; }
.kontakt__teil p, .kontakt__teil address { margin: 0; }
.kontakt__hinweis { color: var(--gedaempft); }
.variante--zeilen .kontakt__angaben { display: flex; flex-direction: column; gap: var(--einheit); }
.kontakt__bez { display: inline-block; min-width: 5em; color: var(--gedaempft); }
.variante--spalten .kontakt__angaben { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: calc(var(--einheit) * 4); }
.kontakt__titel { font-family: var(--schrift-text); font-size: var(--groesse-text); color: var(--gedaempft); margin-bottom: var(--einheit); }
.variante--gross .kontakt__angaben { display: flex; flex-direction: column; gap: calc(var(--einheit) * 3); font-family: var(--schrift-titel); font-size: var(--groesse-h3); line-height: var(--zeile-text); }
.variante--gross .kontakt__hinweis { font-family: var(--schrift-text); font-size: var(--groesse-text); }
.kontakt__logo { color: var(--text); margin-bottom: calc(var(--einheit) * 4); }
.kontakt__logo svg { height: clamp(2rem, 1.5rem + 2vw, 3rem); width: auto; }

.kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--einheit) calc(var(--einheit) * 3); }
.kopf__marke { font-family: var(--schrift-titel); font-weight: var(--gewicht-titel); font-size: var(--marke-groesse); color: var(--text); text-decoration: none; margin-inline-end: auto; }
.kopf__logo { display: block; height: 2rem; }
.kopf__logo--klein { height: 1.5rem; }
.kopf__logo--gross { height: 2.75rem; }
.kopf__logo svg { height: 100%; width: auto; }
.kopf__menue ul { display: flex; flex-wrap: wrap; gap: var(--einheit) calc(var(--einheit) * 3); list-style: none; margin: 0; padding: 0; font-size: var(--navigation-groesse); font-weight: var(--navigation-gewicht); }
.kopf__menue a { color: var(--navigation-farbe); text-decoration: none; }
.kopf__menue a:hover, .kopf__menue a[aria-current="page"] { color: var(--text); text-decoration: underline; }
.kopf--kraeftig .kopf__menue ul { font-family: var(--schrift-titel); font-weight: 800; font-size: var(--groesse-h3); line-height: var(--zeile-titel); }
.kopf--kraeftig .kopf__menue a { color: var(--text); }
.kopf--gross .kopf__menue ul { text-transform: uppercase; letter-spacing: 0.06em; }
.kopf__unter { position: relative; }
.kopf__unter > summary { cursor: pointer; list-style: none; color: var(--navigation-farbe); display: inline-flex; align-items: center; gap: 0.4em; }
.kopf__unter > summary::-webkit-details-marker { display: none; }
.kopf__unter > summary::after { content: ""; width: 0.4em; height: 0.4em; border-right: 2px solid; border-bottom: 2px solid; transform: translateY(-0.15em) rotate(45deg); transition: transform 0.15s; }
.kopf__unter[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }
.kopf__unter > summary:hover, .kopf__unter > .kopf__unter-aktiv, .kopf--kraeftig .kopf__unter > summary { color: var(--text); }
.kopf__menue .kopf__unter > ul {
  position: absolute; top: calc(100% + var(--einheit)); left: calc(var(--einheit) * -2); z-index: 20;
  flex-direction: column; flex-wrap: nowrap; gap: var(--einheit); min-width: 12rem; white-space: nowrap;
  padding: calc(var(--einheit) * 2); background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius);
  max-height: calc(100vh - var(--einheit) * 16); max-height: calc(100dvh - var(--einheit) * 16);
  overflow-y: auto; overscroll-behavior: contain;
}
.block--kopf:has(.kopf--fixiert) { position: sticky; top: 0; z-index: 10; }
:root:has(.kopf--fixiert) { scroll-padding-top: calc(var(--einheit) * 12); }
:where(.block--kopf:has(.kopf--fixiert)) { background: var(--grund); }
:is(.kasten--alles, .kasten--ohne-fuss) > .block--kopf:has(.kopf--fixiert) { top: var(--kasten-luft); }
:root:has(:is(.kasten--alles, .kasten--ohne-fuss) .kopf--fixiert) { scroll-padding-top: calc(var(--einheit) * 12 + var(--kasten-luft)); }
:where(:is(.kasten--ohne-kopf, .kasten--inhalt) > .block--kopf:has(.kopf--fixiert)) { background: var(--seite-grund); }
.kopf__knopf, .kopf__schliessen, .kopf__farbe {
  font: inherit; color: var(--text); background: none; cursor: pointer;
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: calc(var(--einheit) * 0.75) calc(var(--einheit) * 1.5);
  display: inline-flex; align-items: center; gap: var(--einheit);
}
.kopf__knopf { font-size: var(--navigation-groesse); }
.kopf__knopf:hover, .kopf__schliessen:hover, .kopf__farbe:hover { border-color: var(--text); }
.kopf__striche, .kopf__striche::before, .kopf__striche::after { display: block; width: 1.1em; height: 2px; background: currentColor; }
.kopf__striche { position: relative; }
.kopf__striche::before, .kopf__striche::after { content: ""; position: absolute; left: 0; }
.kopf__striche::before { top: -0.35em; }
.kopf__striche::after { top: 0.35em; }
.kopf__farbe { padding: calc(var(--einheit) * 0.75); }
:root:not([data-js]) .kopf__farbe { display: none; }
.kopf__farbe svg { width: 1.25em; height: 1.25em; }
.kopf__knopf { display: var(--kopf-knopf, inline-flex); }
.kopf__menue[popover]:not(:popover-open) {
  display: var(--kopf-leiste, none); position: static; inset: auto; width: auto; height: auto;
  margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible;
}
.kopf__menue:not(:popover-open) .kopf__schliessen { display: none; }
.kopf__menue:popover-open {
  inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0;
  padding: var(--rand); background: var(--grund); color: var(--text); overflow: auto;
}
.kopf__menue:popover-open::backdrop { background: transparent; }
.kopf__menue:popover-open ul { flex-direction: column; gap: calc(var(--einheit) * 2); margin-top: calc(var(--einheit) * 8); font-family: var(--schrift-titel); font-size: var(--groesse-h2); line-height: var(--zeile-titel); }
.kopf__menue:popover-open a { color: var(--text); }
.kopf--menue-normal .kopf__menue:popover-open ul { font-size: var(--groesse-h3); }
.kopf--menue-riesig .kopf__menue:popover-open ul { font-size: var(--groesse-h1); font-weight: 800; }
.kopf__schliessen { position: absolute; top: var(--rand); right: var(--rand); }
@container (min-width: 20rem) { .kopf--ab-20 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 22rem) { .kopf--ab-22 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 24rem) { .kopf--ab-24 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 26rem) { .kopf--ab-26 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 28rem) { .kopf--ab-28 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 30rem) { .kopf--ab-30 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 32rem) { .kopf--ab-32 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 34rem) { .kopf--ab-34 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 36rem) { .kopf--ab-36 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 38rem) { .kopf--ab-38 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 40rem) { .kopf--ab-40 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 42rem) { .kopf--ab-42 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 44rem) { .kopf--ab-44 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 46rem) { .kopf--ab-46 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 48rem) { .kopf--ab-48 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 50rem) { .kopf--ab-50 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 52rem) { .kopf--ab-52 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 54rem) { .kopf--ab-54 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 56rem) { .kopf--ab-56 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 58rem) { .kopf--ab-58 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 60rem) { .kopf--ab-60 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 62rem) { .kopf--ab-62 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 64rem) { .kopf--ab-64 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 66rem) { .kopf--ab-66 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 68rem) { .kopf--ab-68 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 70rem) { .kopf--ab-70 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 72rem) { .kopf--ab-72 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 74rem) { .kopf--ab-74 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 76rem) { .kopf--ab-76 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 78rem) { .kopf--ab-78 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 80rem) { .kopf--ab-80 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 82rem) { .kopf--ab-82 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 84rem) { .kopf--ab-84 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 86rem) { .kopf--ab-86 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 88rem) { .kopf--ab-88 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 90rem) { .kopf--ab-90 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 92rem) { .kopf--ab-92 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 94rem) { .kopf--ab-94 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 96rem) { .kopf--ab-96 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 98rem) { .kopf--ab-98 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 100rem) { .kopf--ab-100 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 102rem) { .kopf--ab-102 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 104rem) { .kopf--ab-104 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 106rem) { .kopf--ab-106 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 108rem) { .kopf--ab-108 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 110rem) { .kopf--ab-110 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 112rem) { .kopf--ab-112 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 114rem) { .kopf--ab-114 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 116rem) { .kopf--ab-116 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 118rem) { .kopf--ab-118 { --kopf-leiste: block; --kopf-knopf: none; } }
@container (min-width: 120rem) { .kopf--ab-120 { --kopf-leiste: block; --kopf-knopf: none; } }
.kopf__menue:popover-open .kopf__unter > summary { color: var(--text); }
.kopf__menue:popover-open .kopf__unter > ul {
  position: static; min-width: 0; padding: 0 0 0 calc(var(--einheit) * 3); margin-top: calc(var(--einheit) * 2);
  background: none; border: 0; font-size: var(--groesse-h3); white-space: normal;
}
.kopf--menue-normal .kopf__menue:popover-open .kopf__unter > ul { font-size: var(--groesse-text); }
.kopf--menue-riesig .kopf__menue:popover-open .kopf__unter > ul { font-size: var(--groesse-h2); }
.leiste {
  position: fixed; z-index: 30; left: 50%; bottom: calc(var(--einheit) * 2); transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(var(--einheit) * 0.5);
  max-width: min(calc(100vw - var(--einheit) * 4), var(--breite-schmal)); padding: calc(var(--einheit) * 0.5);
  background: var(--text); color: var(--grund); border-radius: calc(var(--radius-knopf) + var(--einheit) * 0.5);
  font-size: var(--groesse-klein); line-height: 1; box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 0.18);
}
.leiste__liste { display: flex; gap: calc(var(--einheit) * 0.5); min-width: 0; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.leiste__liste::-webkit-scrollbar { display: none; }
@property --leiste-links { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --leiste-rechts { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes leiste-rand {
  from { --leiste-links: 0px; --leiste-rechts: 3rem; }
  8%, 92% { --leiste-links: 3rem; --leiste-rechts: 3rem; }
  to { --leiste-links: 3rem; --leiste-rechts: 0px; }
}
@supports (animation-timeline: scroll()) {
  .leiste__liste {
    mask-image: linear-gradient(to right, transparent, #000 var(--leiste-links), #000 calc(100% - var(--leiste-rechts)), transparent);
    animation: leiste-rand linear both; animation-timeline: scroll(self inline);
  }
}
.leiste a { display: block; white-space: nowrap; text-decoration: none; border-radius: var(--radius-knopf); padding: calc(var(--einheit) * 1.5) calc(var(--einheit) * 2); }
.leiste__link { color: color-mix(in srgb, var(--grund) 65%, transparent); background: color-mix(in srgb, var(--grund) 7%, transparent); transition: color 0.15s, background 0.15s; }
.leiste__link:hover { color: var(--grund); }
.leiste__link[aria-current] { color: var(--grund); background: color-mix(in srgb, var(--grund) 20%, transparent); }
.leiste__marke { flex: none; color: var(--grund); font-family: var(--schrift-titel); font-weight: var(--gewicht-h1); font-size: var(--groesse-text); }
.leiste__knopf { flex: none; background: var(--grund); color: var(--text); font-weight: var(--gewicht-betont); }
.leiste__knopf:hover { background: color-mix(in srgb, var(--grund) 85%, transparent); }
.leiste :focus-visible { outline-color: var(--grund); outline-offset: 2px; }
body:has(.leiste) .block--fuss { padding-bottom: calc(var(--abstand-mittel) + var(--einheit) * 8); }
:root:has(.leiste) { scroll-padding-bottom: calc(var(--einheit) * 10); }
.kopf--mega { position: relative; }
.kopf--mega .kopf__menue:not(:popover-open) .kopf__unter { position: static; }
.kopf--mega .kopf__menue:not(:popover-open) .kopf__unter > ul {
  left: 0; right: 0; top: calc(100% + var(--einheit));
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: calc(var(--einheit) * 0.5);
  min-width: 0; white-space: normal; padding: calc(var(--einheit) * 1.5);
  background: var(--flaeche); box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.08);
}
.kopf--mega .kopf__menue:not(:popover-open) .kopf__unter > ul a {
  display: block; height: 100%; padding: calc(var(--einheit) * 1.5) calc(var(--einheit) * 2);
  border-radius: var(--radius-knopf); color: var(--text); text-decoration: none; transition: background 0.15s;
}
.kopf--mega .kopf__menue:not(:popover-open) .kopf__unter > ul a:is(:hover, [aria-current]) { background: var(--grund); text-decoration: none; }
.kopf__mega-titel { display: block; font-weight: var(--gewicht-betont); }
.kopf__mega-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  margin-top: 0.25em; font-size: var(--groesse-klein); font-weight: var(--gewicht-text); line-height: 1.4; color: var(--gedaempft);
}
.kopf__menue:popover-open .kopf__mega-text { display: none; }
:is(.kasten--alles, .kasten--ohne-fuss) > .block--kopf {
  --kopf-fest-rand: max(0px, (100% - var(--kasten-breite)) / 2); --kopf-fest-oben: var(--kasten-luft);
  border-radius: var(--kasten-ecke) var(--kasten-ecke) 0 0;
}
@property --kopf-farbe { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --kopf-grund { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --kopf-blur { syntax: "<length>"; inherits: true; initial-value: 0px; }
:root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(main > .block--hero.variante--vollbild:first-child) .block--kopf:has(.kopf--ueber) {
  --kopf-farbe: var(--auf-schleier); --kopf-grund: transparent; --kopf-blur: 0px;
  --kopf-farbe-nach: var(--text); --kopf-grund-nach: var(--grund); --kopf-blur-nach: 0px;
  position: absolute; top: var(--kopf-fest-oben, 0px); left: var(--kopf-fest-rand, 0px); right: var(--kopf-fest-rand, 0px); z-index: 10; background: none;
}
:root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(main > .block--hero.variante--vollbild:first-child) .block--kopf:has(.kopf--ueber)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--kopf-grund); -webkit-backdrop-filter: blur(var(--kopf-blur)); backdrop-filter: blur(var(--kopf-blur));
}
:root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(main > .block--hero.variante--vollbild:first-child) .block--kopf:has(.kopf--ueber-glas) {
  --kopf-grund: color-mix(in srgb, var(--auf-schleier) 10%, transparent); --kopf-blur: 16px;
}
:root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(main > .block--hero.variante--vollbild:first-child) .block--kopf:has(.kopf--nach-glas) {
  --kopf-grund-nach: color-mix(in srgb, var(--grund) 75%, transparent); --kopf-blur-nach: 16px;
}
:root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(main > .block--hero.variante--vollbild:first-child) .block--kopf:has(.kopf--ueber.kopf--fixiert) {
  position: fixed;
  --kopf-farbe: var(--kopf-farbe-nach); --kopf-grund: var(--kopf-grund-nach); --kopf-blur: var(--kopf-blur-nach);
}
:root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(main > .block--hero.variante--vollbild:first-child) .kopf--ueber :is(.kopf__marke, .kopf__knopf, .kopf__farbe),
:root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(main > .block--hero.variante--vollbild:first-child) .kopf--ueber .kopf__menue:not(:popover-open) > ul > li > a,
:root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(main > .block--hero.variante--vollbild:first-child) .kopf--ueber .kopf__menue:not(:popover-open) > ul > li > .kopf__unter > summary {
  color: var(--kopf-farbe);
}
:root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(main > .block--hero.variante--vollbild:first-child) .kopf--ueber :is(.kopf__knopf, .kopf__farbe) { border-color: color-mix(in srgb, var(--kopf-farbe) 35%, transparent); }
:root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(main > .block--hero.variante--vollbild:first-child) .kopf--ueber :is(.kopf__knopf, .kopf__farbe):hover { border-color: var(--kopf-farbe); }
:root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(.kopf--ueber) main > .block--hero.variante--vollbild:first-child .hero__folie { padding-top: calc(min(var(--abstand-mittel), 8svh) + var(--einheit) * 10); }
@keyframes kopf-nach-hero { to { --kopf-farbe: var(--kopf-farbe-nach); --kopf-grund: var(--kopf-grund-nach); --kopf-blur: var(--kopf-blur-nach); } }
@supports (timeline-scope: --a) and (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    :root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(.kopf--ueber.kopf--fixiert) { timeline-scope: --kopf-hero; }
    :root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(.kopf--ueber.kopf--fixiert) main > .block--hero.variante--vollbild:first-child { view-timeline: --kopf-hero block; view-timeline-inset: 0; }
    :root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(main > .block--hero.variante--vollbild:first-child) .block--kopf:has(.kopf--ueber.kopf--fixiert) {
      --kopf-farbe: var(--auf-schleier); --kopf-grund: transparent; --kopf-blur: 0px;
      animation: kopf-nach-hero linear both; animation-timeline: --kopf-hero;
      animation-range: cover calc(100% - var(--einheit) * 14) cover calc(100% - var(--einheit) * 9);
    }
    :root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(main > .block--hero.variante--vollbild:first-child) .block--kopf:has(.kopf--ueber-glas.kopf--fixiert) {
      --kopf-grund: color-mix(in srgb, var(--auf-schleier) 10%, transparent); --kopf-blur: 16px;
    }
  }
}
.randtext {
  --randtext-lage: calc(var(--rand) / 2);
  --randtext-versatz: 0px;
  display: none; position: fixed; top: 50%; z-index: 5; margin: 0; pointer-events: none;
  writing-mode: vertical-rl; white-space: nowrap; line-height: 1;
  font-size: var(--randtext-groesse); letter-spacing: 0.25em; text-transform: uppercase; color: var(--gedaempft);
}
.randtext.randtext--link { pointer-events: auto; text-decoration: none; transition: color .2s; }
.randtext.randtext--link:is(:hover, :focus-visible) { color: var(--text); }
.randtext--klein { --randtext-lage: calc(var(--rand) / 4); }
.randtext--gross { --randtext-lage: calc(var(--rand) * 3 / 4); }
.randtext:is(.randtext--am-inhalt, .randtext--im-kasten) { --randtext-versatz: max(0px, (100% - var(--breite)) / 2 - var(--rand)); }
.mit-kasten .randtext--am-inhalt { --randtext-versatz: max(0px, (100% - var(--kasten-breite)) / 2 - var(--rand)); }
@media (min-width: 64rem) {
  .randtext { display: block; }
  .randtext--links { left: max(var(--randtext-versatz) + var(--randtext-lage), 0.75em); transform: translate(-50%, -50%) rotate(180deg); }
  .randtext--rechts { right: max(var(--randtext-versatz) + var(--randtext-lage), 0.75em); transform: translate(50%, -50%); }
}
:root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(main > .block--hero:first-child .hero--voll) .block--kopf:not(:has(.kopf--ueber)) {
  position: absolute; top: var(--kopf-fest-oben, 0px); left: var(--kopf-fest-rand, 0px); right: var(--kopf-fest-rand, 0px); z-index: 10; background: var(--grund);
}
:root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(main > .block--hero:first-child .hero--voll) .block--kopf:has(.kopf--fixiert):not(:has(.kopf--ueber)) { position: fixed; }
:root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(main > .block--hero:first-child .hero--voll) main > .block--hero:first-child { padding-block: 0; }
:root:not(:has(.kasten--ohne-kopf, .kasten--inhalt)):has(main > .block--hero:first-child .hero--voll) main > .block--hero:first-child .hero__folie {
  padding-block: calc(min(var(--abstand-mittel), 8svh) + var(--einheit) * 9) min(var(--abstand-mittel), 8svh);
}
:root[data-js]:not([data-hero-weg]) body:has(main > .block--hero:first-child) .kopf--marke-spaeter .kopf__marke { opacity: 0; visibility: hidden; }
.kopf--marke-spaeter .kopf__marke { transition: opacity 0.3s, visibility 0.3s; }
@media (prefers-reduced-motion: reduce) { .kopf--marke-spaeter .kopf__marke { transition: none; } }
.block--kopf:has(.kopf--mischen) { mix-blend-mode: difference; background: transparent; }
.kopf--mischen :is(.kopf__marke, .kopf__knopf, .kopf__farbe), .kopf--mischen .kopf__menue:not(:popover-open) a { color: #fff; border-color: rgb(255 255 255 / 0.6); }
.kopf--mischen .kopf__striche, .kopf--mischen .kopf__striche::before, .kopf--mischen .kopf__striche::after { background: #fff; }