* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--creme); color: var(--tinte); font-family: var(--font); font-size: var(--fs-text); line-height: 1.65; font-weight: var(--leicht); -webkit-font-smoothing: antialiased; }
main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: inherit; hyphens: manual; overflow-wrap: break-word; }
main * { min-width: 0; }
picture { display: contents; }
picture > source { display: none; }
.innen { width: 100%; max-width: var(--breite); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand-r); }
.dunkel { --flaeche: var(--nacht); background: var(--flaeche); color: var(--auf-dunkel); }
.hell { --flaeche: var(--creme); background: var(--flaeche); color: var(--tinte); }
.rosa { --flaeche: var(--rose); background: var(--flaeche); color: var(--nacht); }
.abschnitt { padding-block: var(--abstand); }
.b { font-weight: var(--fett); }
.l { font-weight: var(--leicht); }
.abschnittstitel { font-size: var(--titel); font-weight: var(--leicht); line-height: var(--titel-zeile); letter-spacing: var(--eng); text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; }
.abschnittstitel .b { color: var(--pink); }
.abschnittstitel .satz { display: block; }
.untertitel { font-size: var(--untertitel); font-weight: var(--fett); line-height: var(--untertitel-zeile); letter-spacing: var(--eng); text-wrap: balance; }
.label { display: block; font-size: var(--fs-label); font-weight: var(--fett); letter-spacing: var(--sperr-label); text-transform: uppercase; }
hgroup > .label { margin-bottom: var(--raum-2); }
.knopf { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; min-height: var(--knopf-h); padding: 0 22px 0 26px; border-radius: var(--rund-knopf); background: var(--pink); color: var(--weiss); text-decoration: none; font-weight: var(--fett); font-size: var(--knopf-schrift); letter-spacing: var(--sperr-link); text-transform: uppercase; transition: background 0.25s; border: 0; font-family: inherit; cursor: pointer; }
.knopf-zwei { flex: none; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: var(--knopf-h); padding: 0 26px; border: 1px solid currentColor; border-radius: var(--rund-knopf); background: none; color: inherit; font-family: inherit; cursor: pointer; text-decoration: none; font-weight: var(--fett); font-size: var(--knopf-schrift); letter-spacing: var(--sperr-link); text-transform: uppercase; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.dunkel .knopf-zwei:hover, .dunkel .knopf-zwei:focus-visible { background: var(--auf-dunkel); border-color: var(--auf-dunkel); color: var(--nacht); }
.knopf:hover, .knopf:focus-visible { background: var(--pink-hover); }
.knopf:focus-visible, .knopf-zwei:focus-visible, .pfeil:focus-visible, .menue-knopf:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.knopf::after { content: ""; flex: none; width: var(--pfeil-b); height: var(--pfeil-h); background: currentColor; -webkit-mask: var(--pfeil-maske) center / contain no-repeat; mask: var(--pfeil-maske) center / contain no-repeat; transition: transform 0.25s; }
.knopf:hover::after, .knopf:focus-visible::after { transform: var(--pfeil-hover); }
@media (max-width: 760px) {
.knopf { flex-shrink: 1; max-width: 100%; padding-block: var(--raum-1); white-space: normal; text-wrap: balance; }
.hv-aktion .knopf { width: 100%; justify-content: center; text-align: center; }
}
.leiste { transition: visibility 0.4s, transform 0.4s var(--lauf); }
.cta-sichtbar .leiste, .menue-offen .leiste { transform: var(--leiste-weg, translateY(110%)); visibility: hidden; }
.pfeil { display: inline-block; font-weight: var(--fett); font-size: var(--fs-fein); letter-spacing: var(--sperr-link); text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; transition: text-underline-offset 0.25s, color 0.25s; }
.pfeil:hover { text-underline-offset: 4px; }
.aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.kb-fuss .aktion { gap: 12px; }
.an { opacity: 0; transform: translateY(18px); animation: auf 1s var(--lauf) forwards; animation-delay: var(--v, 0s); }
@keyframes auf { to { opacity: 1; transform: none; } }
.kopf { position: absolute; inset: 0 0 auto 0; z-index: 20; isolation: isolate; padding-top: env(safe-area-inset-top, 0px); color: var(--auf-dunkel); transition: background 0.35s; }
.kopf::before { content: ""; position: absolute; inset: 0 0 -40px 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--nacht) 75%, transparent), transparent); pointer-events: none; transition: opacity 0.35s; }
.kopf .innen { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--kopf-luecke); height: var(--kopf-h); }
.logo { justify-self: start; color: var(--pink); width: var(--logo-b); }
.logo svg { width: 100%; height: auto; display: block; }
.kopf-aktion { grid-column: 2; justify-self: end; display: flex; align-items: center; gap: 12px; }
.menue-knopf { --mk-feld: var(--strich-lang); --mk-l1: var(--strich-lang); --mk-l2: var(--strich-lang); --mk-dicke: var(--strich-fein); --mk-luft: var(--strich-luft); display: inline-flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: var(--menue-knopf); min-height: var(--menue-knopf); padding: 0; border: 0; border-radius: var(--rund-knopf); background: none; color: inherit; cursor: pointer; font: inherit; font-weight: var(--fett); font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.menue-wort, .menue-wort-zu, .menue-knopf[aria-expanded="true"] .menue-wort-auf { display: none; }
.menue-knopf[aria-expanded="true"] .menue-wort-zu { display: inline; }
.menue-striche { position: relative; flex: none; width: var(--mk-feld); height: var(--mk-feld); transition: background 0.3s, color 0.3s; }
.menue-striche span { position: absolute; top: 50%; right: calc((var(--mk-feld) - var(--mk-l1)) / 2); width: var(--mk-l1); height: var(--mk-dicke); margin-top: calc(var(--mk-dicke) / -2); background: currentColor; transform: translateY(calc(var(--mk-luft) * -1)); transition: transform 0.35s var(--lauf), width 0.35s var(--lauf); }
.menue-striche span:last-child { width: var(--mk-l2); transform: translateY(var(--mk-luft)); }
.menue-knopf[aria-expanded="true"] .menue-striche span { width: var(--mk-l1); transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-striche span:last-child { transform: rotate(-45deg); }
.mk-rahmenwort { --mk-feld: var(--strich-mittel); --mk-l1: var(--strich-mittel); --mk-l2: var(--strich-mittel); }
.mk-rahmenwort .menue-wort { display: inline; }
.mk-rahmenwort { border: 1px solid currentColor; }
.mk-rahmenwort { min-height: var(--knopf-h-klein); padding: 0 16px 0 20px; }
.mk-rahmenwort[aria-expanded="true"] { background: var(--rose); }
.mk-rahmenwort:focus-visible { background: var(--auf-dunkel); border-color: var(--auf-dunkel); color: var(--nacht); }
.mk-rahmenwort[aria-expanded="true"]:focus-visible { background: var(--nacht); border-color: var(--nacht); color: var(--rose); }
@media (hover: hover) {
.mk-rahmenwort:hover { background: var(--auf-dunkel); border-color: var(--auf-dunkel); color: var(--nacht); }
.mk-rahmenwort[aria-expanded="true"]:hover { background: var(--nacht); border-color: var(--nacht); color: var(--rose); }
}
.menue-offen .kopf::before { opacity: 0; }
.menue-offen .kopf { position: fixed; background: linear-gradient(to left, transparent var(--menue-bild-b), var(--rose) var(--menue-bild-b)); color: var(--nacht); }
.menue { position: fixed; inset: 0; z-index: 15; display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; padding-block: calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + 24px) calc(32px + env(safe-area-inset-bottom, 0px)); background: var(--rose); color: var(--nacht); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--lauf), visibility 0.4s; }
.menue-offen .menue { opacity: 1; visibility: visible; }
.menue-offen, .menue-offen body { overflow: hidden; }
.menue-liste { display: grid; justify-items: start; gap: clamp(14px, 1.8vw, 26px); }
.menue-punkt { font-size: var(--fs-menue); line-height: 1; letter-spacing: var(--sperr-versal); text-transform: uppercase; text-decoration: none; opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--lauf), transform 0.5s var(--lauf), color 0.25s; transition-delay: calc(var(--i) * 0.05s + 0.1s); }
.menue-offen .menue-punkt { opacity: 1; transform: none; }
.menue-punkt:hover, .menue-punkt:focus-visible, .menue-unter a:hover, .menue-unter a:focus-visible { color: var(--pink); }
.menue-gruppe { display: grid; justify-items: start; justify-self: stretch; }
.menue-oben { display: inline-flex; align-items: center; gap: var(--raum-3); padding: 0; border: 0; background: none; color: inherit; font-family: inherit; font-weight: inherit; text-align: left; cursor: pointer; }
.menue-oben::after { content: ""; flex: none; width: var(--menue-pfeil-b); height: var(--menue-pfeil-h); background: currentColor; -webkit-mask: var(--pfeil-maske) center / contain no-repeat; mask: var(--pfeil-maske) center / contain no-repeat; transform: rotate(90deg); transition: transform 0.3s var(--lauf); }
.menue-oben[aria-expanded="true"]::after { transform: rotate(-90deg); }
.menue-unter { --menue-unter-spalte: 15.5em; display: none; justify-self: stretch; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--menue-unter-spalte)), max-content)); gap: var(--raum-2) var(--raum-5); font-size: var(--fs-name); margin: var(--raum-3) 0 var(--raum-1); padding: 0; list-style: none; }
.menue-gruppe.offen .menue-unter { display: grid; }
.menue-unter a { line-height: 1.2; letter-spacing: var(--sperr-versal); text-transform: uppercase; text-decoration: none; transition: color 0.25s; }
.menue-fuss { margin-top: clamp(32px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--linie-hell); opacity: 0; transition: opacity 0.5s var(--lauf) 0.45s; }
.menue-offen .menue-fuss { opacity: 1; }
.menue-fuss { gap: 16px 12px; }
.menue-sozial { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; padding: 0; list-style: none; opacity: 0; transition: opacity 0.5s var(--lauf) 0.45s; }
.menue-offen .menue-sozial { opacity: 1; }
.menue-sozial-symbol { gap: 4px; }
.menue-raster > .menue-sozial { grid-column: 1; grid-row: 1; align-self: end; justify-self: end; justify-content: flex-end; margin: 0 -10px var(--menue-sozial-luft) 0; }
.menue .knopf-zwei:hover, .menue .knopf-zwei:focus-visible { background: var(--nacht); border-color: var(--nacht); color: var(--rose); }
.menue > .menue-raster { margin-block: auto; }
.menue-raster { --menue-raster-luft: clamp(32px, 5vw, 80px); --menue-sozial-luft: 4px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--menue-raster-luft); width: auto; max-width: none; margin-inline: max(0px, (100% - var(--breite)) / 2) calc(var(--menue-bild-b) + var(--menue-raster-luft)); padding-right: 0; }
.menue-raster > .menue-text { grid-row: 1; grid-column: 1; }
.menue-bild { position: fixed; inset: 0 0 0 auto; margin: 0; width: var(--menue-bild-b); overflow: hidden; opacity: 0; transition: opacity 0.6s var(--lauf) 0.2s; }
.menue-offen .menue-bild { opacity: 1; }
.menue-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s var(--lauf); }
.menue-bild img.aktiv { opacity: 1; }
.hv-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: clamp(56px, 8vw, 140px); }
.hv-text { display: grid; justify-items: start; gap: 24px; }
.hv-lead { max-width: 30rem; font-size: var(--fs-karte); line-height: 1.25; letter-spacing: -0.02em; text-wrap: balance; }
.hv-text p:not(.label):not(.hv-lead) { max-width: 34rem; color: var(--auf-dunkel); text-wrap: pretty; }
.hv-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 34px; margin-top: 12px; }
.hv-bild { position: relative; }
.hv-bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--rund-bogen) var(--rund-bogen) var(--rund-bild) var(--rund-bild); }
.hv-karte { position: absolute; display: grid; gap: 2px; padding: 14px 20px; border-radius: var(--rund-karte); background: var(--auf-dunkel); color: var(--nacht); box-shadow: 0 18px 40px var(--kb-a3); }
.hv-wert { font-size: var(--fs-lead); font-weight: var(--fett); line-height: 1.1; }
.hv-was { font-size: var(--fs-fein); line-height: 1.35; }
.hv-k1 { top: 24%; left: var(--hv-raus); }
.hv-k2 { top: 52%; right: var(--hv-raus); }
.hv-k3 { bottom: 9%; left: var(--hv-raus-klein); }
.karten-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 40px; margin-bottom: clamp(32px, 4vw, 56px); }
.karten-kopf-text { display: grid; justify-items: start; gap: 18px; }
.karten-pfeile { display: flex; gap: 10px; }
.karten-pfeil { display: grid; place-items: center; width: var(--menue-knopf); height: var(--menue-knopf); padding: 0; border: 1px solid currentColor; border-radius: var(--rund-knopf); background: none; color: inherit; cursor: pointer; transition: background 0.25s, color 0.25s, opacity 0.25s; }
.karten-pfeil::before { content: ""; width: var(--pfeil-b); height: var(--pfeil-h); background: currentColor; -webkit-mask: var(--pfeil-maske) center / contain no-repeat; mask: var(--pfeil-maske) center / contain no-repeat; }
.karten-zurueck::before { transform: scaleX(-1); }
.karten-pfeil:disabled { opacity: 0.3; cursor: default; }
.karten-pfeil:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.karten { --karten-rand: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand-basis))); display: flex; gap: clamp(12px, 1.4vw, 20px); margin-inline: calc(50% - 50vw); padding-inline: var(--karten-rand); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--karten-rand); scroll-behavior: smooth; scrollbar-width: none; }
.karten::-webkit-scrollbar { display: none; }
.karten li { flex: 0 0 var(--karte-b); scroll-snap-align: start; }
.karte { position: relative; isolation: isolate; display: flex; align-items: flex-end; aspect-ratio: 3 / 4; padding: clamp(18px, 1.8vw, 28px); border-radius: var(--rund-bild); overflow: hidden; color: var(--auf-dunkel); text-decoration: none; }
.karte img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--lauf); }
.karte::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(var(--karte-schein-form) at 50% 100%, var(--karte-schein), transparent 70%), linear-gradient(180deg, transparent 50%, var(--kb-a3) 85%, var(--kb-a4)); }
.karte-fuss { display: flex; flex: 1; align-items: flex-end; justify-content: space-between; gap: 16px; }
.karte-titel { font-size: var(--fs-karte); font-weight: var(--fett); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.karte-plus { position: relative; flex: none; width: var(--plus-feld); height: var(--plus-feld); border: 1px solid currentColor; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.karte-plus::before, .karte-plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: var(--plus-strich); height: var(--strich-fein); background: currentColor; transform: translate(-50%, -50%); }
.karte-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.karte:focus-visible { outline: 2px solid var(--pink); outline-offset: -4px; }
@media (hover: hover) {
.karte:hover img { transform: scale(1.04); }
.karte:hover .karte-plus { background: var(--auf-dunkel); border-color: var(--auf-dunkel); color: var(--nacht); }
.karten-pfeil:not(:disabled):hover { background: var(--tinte); border-color: var(--tinte); color: var(--creme); }
}
@media (prefers-reduced-motion: reduce) {
.karten { scroll-behavior: auto; }
}
.preise { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: 32px clamp(40px, 6vw, 110px); margin-top: clamp(56px, 7vw, 110px); }
.preise-kopf { display: grid; justify-items: start; gap: 22px; }
.preise-liste { --preise-linie: var(--linie-hell); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 64px); margin: 0; }
.dunkel .preise-liste { --preise-linie: var(--linie-dunkel); }
.preise-liste div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-block: var(--raum-3); border-bottom: 1px solid var(--preise-linie); }
.preise-liste div:nth-child(-n+2) { border-top: 1px solid var(--preise-linie); }
.preise-liste dt { min-width: 0; }
.preise-liste dd { margin: 0; flex: none; font-weight: var(--fett); color: var(--pink-klein); }
.dunkel .preise-liste dd { color: var(--pink-klein-dunkel); }
@media (max-width: 1080px) {
.karten { --karte-b: 42vw; }
.hv-raster { grid-template-columns: minmax(0, 1fr); }
.hv-bild { width: min(100%, 30rem); justify-self: center; }
.preise { grid-template-columns: minmax(0, 1fr); }
.preise-kopf { display: contents; }
.preise-liste { order: 1; }
.preise-kopf .pfeil { order: 2; justify-self: start; }
}
@media (max-width: 760px) {
:root { --kopf-h: 66px; }
:root { --logo-b: var(--logo-klein); --menue-bild-b: 0px; }
.menue-raster { display: flex; flex: 1 0 auto; flex-direction: column; align-items: stretch; margin-inline: 0; padding-right: var(--rand-r); }
.menue-text { margin-block: auto; }
.menue-bild { display: none; }
.menue-punkt { font-size: var(--fs-h3); }
.menue-unter { grid-template-columns: minmax(0, 1fr); gap: var(--raum-2); font-size: var(--fs-text); }
.menue-raster > .menue-sozial { align-self: stretch; justify-content: flex-start; margin: 32px 0 -10px -10px; }
h2, h3 { hyphens: auto; -webkit-hyphens: auto; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.an { animation: none; opacity: 1; transform: none; }
}
.icon { display: block; flex: none; width: var(--icon-groesse); height: var(--icon-groesse); overflow: visible; color: var(--icon-farbe); }
.icon .icon-flaeche { fill: var(--icon-flaeche); stroke: none; }
.icons-animiert .icon :is(path, circle, rect):not(.icon-flaeche) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.icons-animiert .icon :is(.icon-flaeche, [fill="currentColor"]) { opacity: 0; }
.icons-animiert .icon.icon-an :is(path, circle, rect):not(.icon-flaeche) { animation: icon-zeichnen var(--icon-dauer) var(--lauf) forwards; animation-delay: calc(var(--icon-nr, 0) * var(--icon-versatz)); }
.icons-animiert .icon.icon-an :is(.icon-flaeche, [fill="currentColor"]) { animation: icon-fuellen var(--icon-dauer) var(--lauf) forwards; animation-delay: calc(var(--icon-nr, 0) * var(--icon-versatz) + var(--icon-dauer) / 2); }
@keyframes icon-zeichnen { to { stroke-dashoffset: 0; } }
@keyframes icon-fuellen { to { opacity: 1; } }
@keyframes icon-wackeln { 30% { transform: rotate(-9deg); } 65% { transform: rotate(6deg); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.preise-sprung a:hover .icon { animation: icon-wackeln 0.5s var(--lauf); }
}
.icon .icon-voll { fill: currentColor; stroke: none; }
.abschnittstitel { margin-bottom: var(--raum-2); }
:is(p, ul, dl, blockquote) + :is(.aktion, .knopf, .pfeil) { margin-top: var(--raum-2); }
:is(.karten, .bw-quellen, .tk-band, .igr-band) { margin-top: var(--raum-3); }
.knopf + .pfeil { margin-top: var(--raum-1); }
@media (max-width: 760px) {
body { line-height: 1.7; }
.abschnittstitel { margin-bottom: var(--raum-3); }
p + p { margin-top: var(--raum-1); }
:is(.erz-foto, .hv-bild, .sa-tuer-buehne) + * { margin-top: var(--raum-3); }
}
.k-ort { font-size: var(--fs-label); letter-spacing: var(--sperr-label); line-height: 1.6; }
.kb { --kb-w: 100vw; --kb-bild-h: calc(var(--kb-w) * var(--team-h) / var(--team-b)); --kb-schrift: calc(var(--kb-w) * var(--kb-gross)); --kb-ueberdeckung: calc(var(--kb-w) * var(--team-ueberdeckung)); --kb-oberteil: calc(var(--kopf-h) + var(--kb-oben) + var(--kb-ort-h) + var(--kb-zeile) * var(--kb-schrift)); --kb-zug: calc(var(--kb-bild-h) * var(--team-kopf) + var(--kb-ueberdeckung)); position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + var(--kb-oben)); }
.kb-titel { display: grid; justify-items: center; gap: var(--kb-ort-abstand); }
.kb-buehne { position: relative; width: 100%; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; height: min(var(--kb-bild-h), calc(100svh - var(--kb-oberteil) + var(--kb-zug))); margin-top: calc(-1 * var(--kb-zug)); }
.kb-buehne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; --kb-lauf-oben: var(--kb-verlauf-oben); --kb-maske: linear-gradient(180deg, transparent, var(--kb-a1) calc(var(--kb-lauf-oben) * .2), var(--kb-a2) calc(var(--kb-lauf-oben) * .4), var(--kb-a3) calc(var(--kb-lauf-oben) * .6), var(--kb-a4) calc(var(--kb-lauf-oben) * .8), var(--nacht) var(--kb-lauf-oben), var(--nacht) calc(100% - var(--kb-verlauf-unten)), var(--kb-a4) calc(100% - var(--kb-verlauf-unten) * .8), var(--kb-a3) calc(100% - var(--kb-verlauf-unten) * .6), var(--kb-a2) calc(100% - var(--kb-verlauf-unten) * .4), var(--kb-a1) calc(100% - var(--kb-verlauf-unten) * .2), transparent); -webkit-mask-image: var(--kb-maske); mask-image: var(--kb-maske); transform-origin: 50% 100%; animation: kb-bild 2s var(--lauf) both; }
.kb-frei { z-index: 3; pointer-events: none; }
.kb-buehne .kb-frei { --kb-lauf-oben: var(--kb-verlauf-oben-frei); }
.kb-zeile { position: relative; z-index: 2; white-space: nowrap; font-size: var(--kb-schrift); line-height: var(--kb-zeile); letter-spacing: var(--gross-eng); text-transform: uppercase; color: var(--auf-dunkel); }
.kb-zeile .b { color: var(--pink); }
.kb-wort { display: inline-block; animation: kb-weich 1.6s var(--lauf) var(--v, 0s) both; }
.kb .k-ort { text-align: center; }
.kb-fuss { position: absolute; z-index: 5; left: 0; right: 0; bottom: clamp(24px, 3vw, 44px); display: flex; justify-content: flex-end; }
@keyframes kb-bild { from { opacity: 0; transform: scale(1.04); } }
@keyframes kb-weich { from { opacity: 0; filter: blur(var(--titel-unschaerfe)); transform: translateY(var(--titel-weg)); } }
@media (prefers-reduced-motion: reduce) {
.kb-buehne img, .kb-wort { animation: none; }
}
@media (max-width: 760px) {
.kb { --kb-w: 100vw; --team-kopf: var(--team-kopf-mobil); --kb-bild-h: calc(100vw * var(--hoch-h) / var(--hoch-b)); --kb-schrift: calc(100vw * var(--kb-gross-mobil)); --kb-ueberdeckung: calc(100vw * var(--team-ueberdeckung-mobil)); align-items: stretch; padding-top: calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + 30px); padding-bottom: var(--kb-unten-mobil); }
.kb-titel { gap: 14px; }
.kb .k-ort { letter-spacing: var(--sperr-kicker-mobil); text-wrap: balance; }
.kb-zeile { display: grid; justify-items: center; white-space: normal; }
.kb-buehne { height: auto; aspect-ratio: var(--hoch-b) / var(--hoch-h); }
.kb-fuss { position: relative; bottom: auto; margin-top: calc(-1 * var(--kb-fuss-zug)); }
.kb-fuss .aktion { flex: 1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 10px; }
.kb-fuss .knopf, .kb-fuss .knopf-zwei { justify-content: center; padding-inline: 10px; letter-spacing: var(--sperr-knopf-mobil); }
.kb-fuss .knopf::after { display: none; }
}
.zus { white-space: nowrap; }
.sterne { display: inline-block; flex: none; width: calc(var(--stern) * 6); height: var(--stern); background: var(--pink); -webkit-mask: var(--stern-maske) 0 50% / calc(var(--stern) * 1.2) var(--stern) repeat-x; mask: var(--stern-maske) 0 50% / calc(var(--stern) * 1.2) var(--stern) repeat-x; }
.erzaehlung-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(40px, 6vw, 110px); }
.erz-bild { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rund-bild); }
.erz-text { display: grid; justify-items: start; gap: 24px; }
.erz-text p { max-width: 34rem; text-wrap: pretty; }
.erz-lead { font-weight: var(--fett); }
.erzaehlung + .geschichte, .geschichte + .erzaehlung { padding-top: 0; }
.gs-pillen { display: grid; justify-items: center; gap: clamp(32px, 4vw, 52px); text-align: center; }
.gs-pillen-satz .zus { white-space: nowrap; }
.gs-pillen-satz .gs-leistung { font-weight: var(--betont); }
.gs-pillen-satz { max-width: 18em; color: var(--pink); font-size: var(--satz-groesse); line-height: 1.24; letter-spacing: -0.02em; text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; }
.pille { display: inline-block; width: 2.3em; height: 1em; margin-inline: calc(var(--pille-luft) + 0.06em) 0.06em; vertical-align: -0.16em; border-radius: var(--rund-pille); background-size: cover; background-position: center; }
.gs-bereit .gs-wort { color: var(--pink-leise); transition: color 0.35s, opacity 0.35s; }
.gs-bereit .pille.gs-wort { opacity: 0.35; }
.gs-bereit .gs-wort.an { color: var(--pink); opacity: 1; }
@media (max-width: 900px) {
.erzaehlung-raster { grid-template-columns: minmax(0, 1fr); }
.erz-foto { width: 100%; max-width: 30rem; }
}
@media (max-width: 760px) {
.gs-pillen { justify-items: start; text-align: left; }
.gs-pillen-satz { --satz-laengste: 8; font-size: min(var(--fs-h2), calc((100vw - var(--rand) - var(--rand-r)) / var(--satz-laengste))); text-wrap: pretty; }
.gs-pillen-satz .gs-zeile { display: block; }
.karten { --karte-b: var(--karte-b-mobil); }
.karten-pfeile { display: none; }
.hv-k1 { left: 12px; }
.hv-k2 { right: 12px; }
.hv-k3 { left: 12px; }
.preise-liste { grid-template-columns: minmax(0, 1fr); }
.preise-liste div:nth-child(2) { border-top: 0; }
.mk-rahmenwort { --mk-feld: var(--strich-klein); --mk-l1: var(--strich-klein); --mk-l2: var(--strich-klein); --mk-luft: var(--menue-abstand); min-height: var(--menue-knopf-klein); padding: 0 10px 0 12px; gap: 10px; letter-spacing: 0.12em; }
}
.sa { --sa-punkt: 9px; --sa-bk-punkt: 16px; --sa-luft: 12px; --sa-logo-b: 96px; --sa-linie: color-mix(in srgb, var(--nacht) 55%, transparent); --sa-ring: color-mix(in srgb, var(--nacht) 22%, transparent); --sa-zelle: var(--rose); --sa-zelle-zu: color-mix(in srgb, var(--rose) 40%, var(--creme)); }
.sa-status { color: var(--pink-klein); font-weight: var(--fett); }
.sa-zeiten { width: 100%; max-width: 30rem; }
.sa-zeiten div { display: flex; justify-content: space-between; gap: 20px; padding-block: 10px; border-bottom: 1px solid var(--linie-hell); }
.sa-zeiten dd { text-align: right; }
.sa-zeiten .heute { color: var(--pink-klein-dunkel); font-weight: var(--fett); }
.sa-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: 6px; }
@media (max-width: 760px) {
.sa { --sa-logo-b: 72px; --sa-luft: 10px; }
.sa-aktion { flex-direction: column; align-items: stretch; justify-self: stretch; }
.sa-aktion .knopf { justify-content: center; }
.sa-aktion .pfeil { align-self: center; }
}
.kb { --kb-badge-b: 108px; --kb-badge-unten: 0px; --kb-badge-zahl: 32px; --kb-badge-logo-h: 7px; --kb-box-b: 20rem; --kb-box-logo-b: 5.2rem; --kb-box-logo-h: 15px; --kb-box-zahl: 44px; }
.kb-box { width: var(--kb-box-b); margin: 0; padding: 16px 18px; border-radius: var(--rund-karte); background: var(--creme); color: var(--tinte); }
.kb-box .sterne { --stern: 12px; }
.kb-badge { position: absolute; left: var(--rand); bottom: var(--kb-badge-unten); display: grid; justify-items: center; gap: 6px; width: var(--kb-badge-b); padding: 14px 8px; text-align: center; text-decoration: none; }
.kb-badge .sterne { --stern: 10px; }
.kb-badge .kb-box-zahl { font-size: var(--fs-karte); }
.kb-badge .kb-box-text { font-size: var(--fs-label); line-height: 1.3; text-wrap: balance; }
.kb-badge:hover .kb-box-text { color: var(--pink); }
.kb-badge-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; margin-top: 2px; }
.kb-badge-logo { height: calc(var(--kb-badge-logo-h) * var(--bw-logo-skala, 1)); width: auto; color: var(--tinte); }
.kb-box-zahl { grid-row: 1 / 3; font-size: var(--fs-karte); font-weight: var(--fett); line-height: 1; letter-spacing: var(--gross-eng); color: var(--pink); }
.kb-box-text { font-size: var(--fs-fein); color: var(--tinte); }
.kb-box a:focus-visible, a.kb-box:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
@media (max-width: 760px) {
.kb { --kb-box-zahl: 36px; --kb-box-logo-h: 13px; --kb-badge-b: 84px; --kb-badge-zahl: 22px; --kb-badge-logo-h: 5.5px; --kb-badge-unten: calc(100% + 36vw); }
.kb-box { width: auto; padding: 12px 14px; }
.kb-box.kb-badge { left: auto; right: var(--rand-r); width: var(--kb-badge-b); padding: 9px 6px; gap: 4px; }
.kb-badge .sterne { --stern: 8px; }
.kb-badge-logos { flex-wrap: nowrap; gap: 3px; }
}
.zeigen-bereit .auftritt { opacity: 0; transform: translateY(var(--auftritt-weg)); }
.zeigen-bereit .auftritt-bild { opacity: 0; transform: scale(1.05); }
.zeigen-sichtbar .auftritt { opacity: 1; transform: none; transition: opacity 0.8s var(--lauf), transform 1.1s var(--lauf); transition-delay: calc(var(--i, 0) * var(--auftritt-takt)); }
.zeigen-sichtbar .auftritt-bild { opacity: 1; transform: none; transition: opacity 1.4s var(--lauf), transform 1.8s var(--lauf); transition-delay: calc(var(--i, 0) * var(--auftritt-takt)); }
@media (prefers-reduced-motion: reduce) {
.zeigen-bereit .auftritt, .zeigen-bereit .auftritt-bild { opacity: 1; transform: none; }
}
.sa { --sa-schild-b: 23rem; --sa-zeile-raus: 12px; --sa-og-gross: clamp(54px, 13.6vw, 196px); --sa-hoch: 4 / 5; --sa-klein-b: 46%; --sa-klein-raus: -14%; }
.sa-tuer-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 4.5vw, 80px); align-items: stretch; }
.sa-tuer-buehne { position: relative; margin: 0; min-height: 40rem; }
.sa-tuer-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--rund-bild); }
.sa-schild { position: absolute; left: clamp(16px, 2.4vw, 36px); bottom: clamp(16px, 2.4vw, 36px); display: grid; gap: 12px; width: min(calc(100% - 32px), var(--sa-schild-b)); padding: clamp(22px, 2.4vw, 34px); border-radius: var(--rund-karte); background: var(--nacht); color: var(--auf-dunkel); }
.sa-schild-titel { font-size: var(--fs-zwischen); line-height: 1.2; letter-spacing: var(--eng); }
.sa-schild .sa-status { color: var(--auf-dunkel); font-weight: var(--leicht); font-size: 15px; margin-top: -6px; }
.sa-tage { margin-top: 4px; }
.sa-schild .sa-tage div { padding-block: 8px; border-color: var(--linie-dunkel); font-size: var(--fs-klein); }
.sa-schild .sa-tage dt { color: var(--auf-dunkel); }
.sa-schild .sa-tage div:last-child { border-bottom: 0; }
.sa-schild .sa-tage .heute { margin-inline: calc(var(--sa-zeile-raus) * -1); padding-inline: var(--sa-zeile-raus); border-radius: var(--rund-mini); border-bottom-color: transparent; background: var(--pink); color: var(--weiss); font-weight: var(--fett); }
.sa-schild .sa-tage .heute dt { color: var(--weiss); }
.sa-schild .sa-tage .heute { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px; row-gap: 8px; padding-block: 10px 12px; }
.sa-schild .sa-jetzt { grid-column: 1 / -1; justify-self: start; padding: 3px 11px; border-radius: var(--rund-pille); background: var(--weiss); color: var(--pink); font-size: var(--fs-fein); font-weight: var(--fett); line-height: 1.4; text-align: left; text-wrap: balance; }
.sa-tuer-torbogen { --sa-tor-max: 34rem; --sa-tor-b: min(82%, 29rem); --sa-tor-scheitel: 0.25; --sa-tor-seite: clamp(40px, 4.2vw, 58px); --sa-tor-titel: clamp(26px, 2.3vw, 34px); --sa-tor-fuss: clamp(28px, 3.4vw, 48px); padding-block: 0; }
.sa-tuer-torbogen .sa-tuer-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(48px, 7vw, 120px); }
.sa-tuer-torbogen .sa-tuer-buehne { min-height: clamp(620px, 56vw, 820px); margin-left: calc(-1 * (max(0px, (100vw - var(--breite)) / 2) + var(--rand))); }
.sa-tuer-torbogen .sa-tuer-foto { border-radius: 0; }
.sa-tuer-torbogen .sa-schild { inset: 0; margin: auto; width: var(--sa-tor-b); height: fit-content; padding: calc(var(--sa-tor-b) * var(--sa-tor-scheitel)) var(--sa-tor-seite) var(--sa-tor-fuss); border-radius: var(--rund-schild) var(--rund-schild) 0 0; }
.sa-tuer-torbogen .sa-schild-titel { justify-self: center; margin-bottom: 6px; color: var(--pink); font-size: var(--fs-karte); font-weight: var(--fett); }
.sa-tuer-torbogen .sa-zeiten { max-width: none; }
.sa-schild .sa-tage div.heute, .sa-schild .sa-tage div:has(+ .heute) { border-bottom-color: transparent; }
.sa-tuer-torbogen .sa-tuer-text { padding-block: var(--abstand); }
.sa-tuer-text { display: grid; gap: 26px; align-content: center; justify-items: start; min-width: 0; }
.sa-tuer-text > p { color: var(--tinte); font-size: var(--fs-lead); max-width: 34rem; text-wrap: pretty; }
.sa-tuer-text > div { width: 100%; }
.dunkel .sa-tuer-text > p { color: var(--auf-dunkel); }
.leiste-dunkel .leiste-icon:is(.termin, .bewerben) { background: var(--nacht); }
@media (max-width: 900px) {
.sa-tuer-raster { grid-template-columns: minmax(0, 1fr); }
.sa-tuer-buehne { min-height: 0; }
.sa-tuer-foto { position: static; aspect-ratio: 4 / 3; height: auto; }
.sa-schild { position: relative; left: auto; right: auto; bottom: auto; width: auto; margin: -48px 14px 0; }
}
@media (max-width: 760px) {
.sa-schild { padding: 20px 18px; }
.sa-schild .sa-tage div { gap: 12px; }
}
@media (max-width: 900px) {
.sa-tuer-torbogen .sa-tuer-raster { grid-template-columns: minmax(0, 1fr); }
.sa-tuer-torbogen .sa-tuer-buehne { margin-left: calc(-1 * var(--rand)); margin-right: calc(-1 * var(--rand-r)); min-height: 0; padding-block: 28vw; }
.sa-tuer-torbogen .sa-tuer-foto { position: absolute; height: 100%; aspect-ratio: auto; }
.sa-tuer-torbogen { --sa-tor-b: min(calc(100% - var(--rand) - var(--rand-r)), var(--sa-tor-max)); --sa-tor-seite: clamp(var(--raum-3), 6vw, 68px); --sa-tor-titel: 26px; }
.sa-tuer-torbogen .sa-schild { position: relative; left: auto; right: auto; bottom: auto; margin: 0 auto; }
.sa-tuer-torbogen .sa-tuer-text { padding-block: var(--abstand-klein) var(--abstand); }
}
.bw { --bw-linie: color-mix(in srgb, var(--nacht) 22%, transparent); --bw-stern: 14px; --bw-initial: 36px; --bw-karte-b: clamp(270px, 24vw, 360px); --bw-wand-h: clamp(560px, 62vw, 820px); --bw-pad: clamp(22px, 2vw, 30px); --bw-foto-format: 1 / 1; --bw-luecke: 14px; --bw-logo-h: 18px; --bw-quelle-logo-b: 6rem; --bw-schnitt-klein: clamp(22px, 1.7vw, 26px); --bw-logo-klein: 15px; }
.bw .sterne { --stern: var(--bw-stern); }
.bw-quellen { display: flex; flex-wrap: wrap; gap: var(--bw-luecke); }
.bw-quellen li { display: flex; }
.bw-quelle { display: grid; grid-template-columns: var(--bw-quelle-logo-b) auto; align-items: center; justify-items: start; gap: 2px 18px; padding: 12px 20px; border-radius: var(--rund-karte); background: var(--weiss); color: var(--tinte); text-decoration: none; transition: background 0.25s; }
.bw-quelle-logo { grid-row: 1 / 3; }
.bw-quelle .bw-schnitt { font-size: var(--fs-zwischen); }
.bw-quelle:hover { background: var(--creme); }
.bw-quelle:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.bw-quelle-logo { height: calc(var(--bw-logo-h) * var(--bw-logo-skala, 1)); width: auto; }
.bw-quelle-wert { display: flex; align-items: center; gap: 10px; }
.bw-quelle-anzahl { font-size: var(--fs-fein); line-height: 1.3; color: var(--tinte); }
.bw-karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bw-karte-logo { height: calc(var(--bw-logo-klein) * var(--bw-logo-skala, 1)); width: auto; color: var(--tinte); }
.bw-logo-google { --bw-logo-skala: 1.3; }
.bw-schnitt { font-size: var(--fs-h3); font-weight: var(--fett); line-height: 1; letter-spacing: var(--eng); color: var(--pink); }
.bw-karte { position: relative; display: grid; align-content: start; gap: 16px; padding: var(--bw-pad); border-radius: var(--rund-karte); background: var(--creme); color: var(--tinte); overflow: hidden; }
.bw-karte blockquote { margin: 0; }
.bw-karte blockquote p { font-size: var(--fs-text); line-height: 1.5; text-wrap: pretty; }
.bw-wer { display: flex; align-items: center; gap: 12px; margin-top: auto; font-size: var(--fs-klein); }
.bw-wer-text { display: grid; line-height: 1.3; }
.bw-via { font-size: var(--fs-fein); color: var(--tinte); }
.bw-initial { display: grid; place-items: center; flex: none; width: var(--bw-initial); height: var(--bw-initial); border-radius: 50%; background: var(--rose); color: var(--nacht); font-weight: var(--fett); }
.bw-textkarte { grid-template-rows: auto 1fr auto; }
.dunkel .karten-pfeil:not(:disabled):hover { background: var(--auf-dunkel); border-color: var(--auf-dunkel); color: var(--nacht); }
.bw-wand-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 22px 40px; }
.bw-wand-kopf .abschnittstitel { flex-basis: 100%; text-align: center; }
.bw-wand-kopf .bw-quellen { flex-basis: 100%; justify-content: center; }
.bw-wand .innen { display: grid; gap: clamp(36px, 4vw, 60px); }
.bw-wand-feld { position: relative; max-height: var(--bw-wand-h); overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, var(--nacht) 70%, transparent); mask-image: linear-gradient(to bottom, var(--nacht) 70%, transparent); }
.bw-wand-feld.offen { max-height: none; -webkit-mask-image: none; mask-image: none; }
.bw-wand-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bw-luecke); align-items: start; }
.bw-wand-spalten ul { display: grid; gap: var(--bw-luecke); }
.bw-wand-spalten .bw-karte { background: var(--weiss); }
.bw-wand-fuss { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 32px; }
.bw-wand-mehr { background: none; font-family: inherit; cursor: pointer; }
.bw-wand .knopf-zwei:hover, .bw-wand .knopf-zwei:focus-visible { background: var(--nacht); border-color: var(--nacht); color: var(--weiss); }
@media (max-width: 900px) {
.bw-wand-spalten { display: block; columns: 2; column-gap: var(--bw-luecke); }
.bw-wand-spalten ul { display: contents; }
.bw-wand-spalten .bw-karte { break-inside: avoid; margin-bottom: var(--bw-luecke); }
}
@media (max-width: 760px) {
.bw { --bw-karte-b: 78vw; --bw-wand-h: 1100px; --bw-logo-h: 14px; --bw-logo-zeile: 20px; --bw-schnitt-klein: 18px; --bw-stern-klein: 10px; }
.bw-quellen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.bw-quelle { width: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--bw-logo-zeile) auto auto; justify-items: center; gap: 6px; padding: 12px 6px; text-align: center; }
.bw-quelle-logo { grid-row: auto; }
.bw-quelle-wert { flex-direction: column; gap: 4px; }
.bw-quelle .sterne { --stern: var(--bw-stern-klein); }
.bw-quelle-anzahl { text-wrap: balance; }
.bw-wand-spalten { columns: 1; }
}
.faq { --faq-plus: 22px; --faq-strich: 2px; --faq-linie: var(--linie-hell); }
.faq-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.faq-kopf { position: sticky; top: calc(var(--kopf-platz) + 32px); display: grid; gap: 24px; justify-items: start; }
.faq-weiter { color: var(--tinte); font-size: var(--fs-text); max-width: 26rem; text-wrap: pretty; }
.faq-weiter a { color: var(--tinte); text-underline-offset: 4px; }
.faq-weiter a[href^="tel:"] { white-space: nowrap; }
.faq-liste { border-top: 1px solid var(--faq-linie); }
.faq-punkt { border-bottom: 1px solid var(--faq-linie); }
.faq-punkt summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: clamp(20px, 2vw, 28px); cursor: pointer; list-style: none; font-size: var(--fs-lead); font-weight: var(--fett); line-height: 1.3; }
.faq-punkt summary::-webkit-details-marker { display: none; }
.faq-punkt summary:hover, .faq-punkt[open] summary { color: var(--pink); }
.faq-punkt summary:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }
.faq-plus { position: relative; flex: none; width: var(--faq-plus); height: var(--faq-plus); }
.faq-plus::before, .faq-plus::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - var(--faq-strich) / 2); height: var(--faq-strich); background: currentColor; transition: transform 0.3s var(--lauf); }
.faq-plus::after { transform: rotate(90deg); }
.faq-punkt[open] .faq-plus::after { transform: rotate(0deg); }
.faq-punkt p { max-width: 42rem; padding-bottom: clamp(20px, 2vw, 28px); color: var(--tinte); font-size: var(--fs-text); text-wrap: pretty; }
@media (max-width: 900px) {
.faq-raster { grid-template-columns: minmax(0, 1fr); }
.faq-kopf { position: static; }
}
.fu { --fu-abstand: var(--abstand-klein); --fu-satz: clamp(44px, 7.6vw, 128px); --fu-luecke: clamp(28px, 4vw, 64px); --fu-linie: var(--linie-dunkel); --fu-leise: var(--auf-dunkel); --fu-unten-luecke: 12px 28px; --fu-unten-platz: calc(var(--leiste-feld) + var(--leiste-abstand) * 2); padding-top: var(--fu-abstand); padding-bottom: var(--fu-unten-platz); }
.fu .innen { display: grid; gap: var(--fu-abstand); }
.fu-satz { font-size: var(--fu-satz); line-height: 0.92; letter-spacing: var(--gross-eng); text-transform: uppercase; }
.fu-satz .b { color: var(--pink); display: block; }
.fu-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 0.75fr); gap: var(--fu-luecke); padding-top: var(--fu-luecke); border-top: 1px solid var(--fu-linie); }
.fu-spalte { display: grid; gap: 14px; align-content: start; justify-items: start; min-width: 0; font-size: var(--fs-klein); }
.fu-titel { font-size: var(--fs-klein); font-weight: var(--fett); color: var(--pink-klein-dunkel); }
.fu-spalte address { font-style: normal; line-height: 1.6; }
.fu-tel { font-size: var(--fs-zwischen); font-weight: var(--fett); letter-spacing: var(--eng); text-decoration: none; white-space: nowrap; }
.fu-tel:hover { color: var(--pink); }
.fu-spalte dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
.fu-spalte dt { color: var(--fu-leise); }
.fu-seiten, .fu-sozial { display: grid; gap: 6px; }
.fu-sozial { margin-top: 6px; }
.fu-seiten a, .fu-sozial a { text-decoration: none; }
.fu-seiten a:hover, .fu-sozial a:hover { color: var(--pink); }
.fu .fu-sozial.fu-sozial-symbol { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 -10px -10px; }
.fu-logo { width: 100%; height: auto; color: var(--pink); }
.fu-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--fu-unten-luecke); padding-block: 22px; border-top: 1px solid var(--fu-linie); font-size: var(--fs-fein); color: var(--fu-leise); }
.fu-unten nav { display: flex; gap: 22px; }
.fu-unten a { text-decoration: none; }
.fu-unten a:hover { color: var(--pink); }
.fu-unten-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fu-unten-luecke); }
.fu-badge { display: inline-flex; align-items: center; color: var(--fu-leise); }
.fu-badge-logo { display: block; height: var(--badge-h); width: auto; aspect-ratio: var(--badge-format); overflow: visible; }
@media (max-width: 1100px) {
.fu-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.fu { --fu-unten-platz: calc(var(--leiste-feld) * 2 + var(--leiste-abstand) * 3); }
.fu-spalten { grid-template-columns: minmax(0, 1fr); }
}
.fu { --fu-logo-b: clamp(200px, 22vw, 320px); --fu-tel-gross: clamp(24px, 2.4vw, 34px); --fu-satz-faktor: 9.9; --fu-satz-faktor-mobil: 5.5; }
.fu-zeiten { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; }
.fu-zeiten > div { display: contents; }
.fu-zeiten dt { color: var(--fu-leise); }
.fu-zeiten dt, .fu-zeiten dd { white-space: nowrap; }
.fu-zeiten .heute dt, .fu-zeiten .heute dd { color: var(--pink-klein-dunkel); font-weight: var(--fett); }
.fu-status { font-size: var(--fs-klein); color: var(--fu-leise); }
.fu-ende { display: grid; gap: clamp(28px, 3vw, 44px); }
.fu-kopf .fu-logo { width: var(--fu-logo-b); }
.fu-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.fu-satz-rahmen { container-type: inline-size; }
.fu-satz-breit { font-size: calc(100cqw / var(--fu-satz-faktor)); white-space: nowrap; }
.fu-satz-breit .b { display: inline; }
.fu-satzende .fu-spalten { --fu-luecke-halb: calc(var(--fu-luecke) / 2); column-gap: 0; padding-top: 0; }
.fu-satzende .fu-spalte { padding: var(--fu-luecke) var(--fu-luecke-halb) 0; }
.fu-satzende .fu-spalte:first-child { padding-left: 0; }
.fu-satzende .fu-spalte:last-child { padding-right: 0; }
.fu-satzende .fu-spalte + .fu-spalte { border-left: 1px solid var(--fu-linie); }
@media (max-width: 1100px) {
.fu-satzende .fu-spalten { row-gap: 0; }
.fu-satzende .fu-spalte:nth-child(odd) { padding-left: 0; padding-right: var(--fu-luecke-halb); border-left: 0; }
.fu-satzende .fu-spalte:nth-child(even) { padding-left: var(--fu-luecke-halb); padding-right: 0; }
.fu-satzende .fu-spalte:nth-child(-n+2) { padding-bottom: var(--fu-luecke); }
.fu-satzende .fu-spalte:nth-child(n+3) { border-top: 1px solid var(--fu-linie); }
}
@media (max-width: 760px) {
.fu-kopf .knopf { width: 100%; justify-content: center; }
.fu-satz-breit { white-space: normal; font-size: calc(100cqw / var(--fu-satz-faktor-mobil)); }
.fu-satz-breit .b { display: block; }
.fu-satzende .fu-spalte:nth-child(n) { padding: var(--fu-luecke) 0; border-left: 0; }
.fu-satzende .fu-spalte + .fu-spalte { border-top: 1px solid var(--fu-linie); }
.fu-satzende .fu-spalte:last-child { padding-bottom: 0; }
}
.tn-leise { color: inherit; }
.tn-aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.tn-rolle { display: inline-block; margin-left: 10px; vertical-align: middle; font-size: var(--fs-label); color: var(--pink-klein); }
.tk-kopf .karten-kopf-text > p { max-width: 34rem; }
.tk:not(.tk-kompakt) .karten.tk-band { --karte-b: clamp(200px, 17vw, 250px); }
.karten.tk-band { margin-bottom: clamp(32px, 4vw, 52px); }
.tk-kompakt .tk-portraet { aspect-ratio: 3 / 4; margin-bottom: 14px; }
.tk-kompakt .tk-name { font-size: var(--fs-name); }
.tk-kompakt .tk-fach { font-size: var(--fs-klein); }
.tk-karte { display: grid; gap: 4px; align-content: start; justify-items: start; color: inherit; text-decoration: none; }
.tk-portraet { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rund-bild); margin-bottom: 10px; transition: transform 0.5s var(--lauf); }
.tk-karte .tn-rolle { margin-left: 0; }
.tk-name { font-size: var(--fs-name); font-weight: var(--fett); }
.tk-fach { font-size: var(--fs-klein); line-height: 1.4; }
a.tk-karte:hover .tk-name { color: var(--pink); }
@media (max-width: 1080px) {
.tk:not(.tk-kompakt) .karten.tk-band { --karte-b: 40vw; }
}
@media (max-width: 760px) {
.tk:not(.tk-kompakt) .karten.tk-band { --karte-b: 56vw; }
}
.ig-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pink); color: var(--weiss); font-size: 9px; letter-spacing: 0.02em; }
.ig-zeichen { display: block; width: 56%; height: auto; }
.ig-abspielen { position: absolute; right: 12px; bottom: 10px; width: var(--ig-abspielen); height: var(--ig-abspielen); border-radius: 50%; background: var(--pink); transition: transform 0.25s var(--lauf); }
.ig-abspielen::before { content: ""; position: absolute; inset: 31% 28% 31% 38%; background: var(--weiss); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ig-abspielen:hover { transform: scale(1.08); }
.ig-abspielen:focus-visible { outline: 2px solid var(--weiss); outline-offset: 3px; }
@keyframes ig-zoom { from { scale: 1; } to { scale: 1.08; } }
.igr { --ig-karte: clamp(230px, 19vw, 290px); --ig-hoehe: calc(var(--ig-karte) * 19.5 / 9); --ig-rahmen: calc(var(--ig-karte) * 0.042); --ig-radius: calc(var(--ig-karte) * 0.15); --ig-kante: color-mix(in srgb, var(--auf-dunkel) 24%, transparent); }
.igr-kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "titel pfeile" "profil pfeile"; align-items: end; gap: 22px 32px; }
.igr-kopf > :is(.abschnittstitel, hgroup) { grid-area: titel; }
.igr-kopf > .karten-pfeile { grid-area: pfeile; display: flex; }
.igr-profil { grid-area: profil; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.igr-avatar { width: 56px; height: 56px; font-size: 16px; flex: none; }
.igr-profil-text { display: grid; gap: 2px; margin-right: 12px; }
.igr-handle { color: inherit; font-size: var(--fs-name); font-weight: var(--fett); letter-spacing: var(--eng); text-decoration: none; }
.igr-handle:hover { color: var(--pink); }
.igr-profil-text .tn-leise { font-size: var(--fs-klein); }
.igr-weitere { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: 0; padding: 0; list-style: none; }
.igr-profil-text .igr-weitere { margin-top: 8px; }
.igr-profil-text .igr-weitere-symbol { gap: 4px; margin: -2px 0 -10px -10px; }
.sozial-symbol { width: var(--sozial-symbol, 24px); height: var(--sozial-symbol, 24px); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sozial-symbol .voll { fill: currentColor; stroke: none; }
.sozial-nur-symbol { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: inherit; transition: color 0.25s; }
.sozial-nur-symbol:hover, .sozial-nur-symbol:focus-visible { color: var(--pink); }
.igr-buehne { position: relative; margin-top: clamp(16px, 2vw, 28px); --ig-oben: 32px; }
.igr-buehne:focus-visible { outline: 2px solid var(--pink); outline-offset: -2px; }
.igr-band { position: relative; z-index: 1; list-style: none; display: flex; gap: clamp(16px, 1.8vw, 26px); margin: 0; padding: var(--ig-oben) calc(50% - var(--ig-karte) / 2) 28px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.igr-band::-webkit-scrollbar { display: none; }
.igr-reel { position: relative; flex: 0 0 var(--ig-karte); height: var(--ig-hoehe); overflow: hidden; border-radius: var(--ig-radius); scroll-snap-align: center; cursor: pointer; opacity: 0.42; scale: 0.86; transition: opacity 0.45s var(--lauf), scale 0.45s var(--lauf); user-select: none; }
.igr-reel.aktiv { opacity: 1; scale: 1; }
.igr-reel img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.igr-reel.aktiv img { animation: ig-zoom 7s ease-in-out infinite alternate; }
.igr-buehne > .iphone { position: absolute; z-index: 2; left: 50%; top: var(--ig-oben); translate: -50% 0; margin-top: calc(-1 * var(--ig-rahmen)); pointer-events: none; }
.iphone { position: relative; box-sizing: content-box; width: var(--ig-karte); height: var(--ig-hoehe); border: var(--ig-rahmen) solid var(--nacht); border-radius: calc(var(--ig-radius) + var(--ig-rahmen)); outline: 2px solid var(--ig-kante); }
.iphone-bildschirm { position: absolute; inset: 0; overflow: hidden; border-radius: var(--ig-radius); }
.iphone-insel { position: absolute; z-index: 6; top: calc(var(--ig-karte) * 0.03); left: 50%; width: calc(var(--ig-karte) * 0.31); height: calc(var(--ig-karte) * 0.09); translate: -50% 0; border-radius: var(--rund-pille); background: var(--nacht); }
.iphone-balken { position: absolute; z-index: 6; bottom: calc(var(--ig-karte) * 0.022); left: 50%; width: 36%; height: calc(var(--ig-karte) * 0.014); translate: -50% 0; border-radius: var(--rund-pille); background: var(--weiss); }
.iphone-taste { position: absolute; width: calc(var(--ig-rahmen) * 0.5); border-radius: 2px; background: var(--ig-kante); }
.iphone-aktion, .iphone-lauter, .iphone-leiser { left: calc(-1 * var(--ig-rahmen) - var(--ig-rahmen) * 0.5); }
.iphone-seite, .iphone-kamera { right: calc(-1 * var(--ig-rahmen) - var(--ig-rahmen) * 0.5); }
.iphone-aktion { top: 17%; height: 4.5%; }
.iphone-lauter { top: 25%; height: 8%; }
.iphone-leiser { top: 35%; height: 8%; }
.iphone-seite { top: 27%; height: 12%; }
.iphone-kamera { top: 58%; height: 7%; }
.igr-vorschau { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-ui { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-rows: auto auto 1fr auto auto; color: var(--weiss); font-size: calc(var(--ig-karte) * 0.042); line-height: 1.3; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--nacht) 45%, transparent), transparent 20%, transparent 58%, color-mix(in srgb, var(--nacht) 72%, transparent) 88%); }
.reel-status { display: flex; justify-content: space-between; align-items: center; padding: 1.05em 1.7em 0; font-size: 1.02em; font-weight: var(--fett); }
.reel-status-rechts { display: flex; align-items: center; gap: 0.32em; }
.reel-st { height: 0.78em; width: auto; fill: currentColor; }
.reel-akku-rand { fill: none; stroke: currentColor; stroke-width: 1; }
.reel-oben { display: flex; justify-content: space-between; align-items: center; padding: 1em 1.1em 0; }
.reel-titel { display: inline-flex; align-items: center; gap: 0.2em; font-size: 1.4em; font-weight: var(--fett); letter-spacing: -0.01em; }
.reel-symbol { width: 1.7em; height: 1.7em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reel-klein { width: 0.8em; height: 0.8em; stroke-width: 2.6; }
.reel-punkte { stroke-width: 3; }
.reel-leiste { position: absolute; right: 0.75em; bottom: 6.6em; display: grid; justify-items: center; gap: 0.95em; }
.reel-aktion { display: grid; justify-items: center; gap: 0.1em; }
.reel-zahl { font-size: 0.82em; font-weight: var(--fett); }
.reel-ui .ig-avatar { width: calc(var(--ig-karte) * 0.085); height: calc(var(--ig-karte) * 0.085); font-size: calc(var(--ig-karte) * 0.026); }
.reel-audio .ig-avatar { border-radius: calc(var(--ig-karte) * 0.02); outline: 2px solid var(--weiss); }
.reel-unten { grid-row: 4; display: grid; gap: 0.45em; padding: 0 4.4em 0.9em 1em; }
.reel-konto { display: flex; align-items: center; gap: 0.5em; font-weight: var(--fett); }
.reel-folgen { padding: 0.22em 0.7em; border: 1px solid color-mix(in srgb, var(--weiss) 70%, transparent); border-radius: 0.5em; color: var(--weiss); font-size: 0.86em; text-decoration: none; pointer-events: auto; }
.reel-folgen:hover { background: color-mix(in srgb, var(--weiss) 18%, transparent); }
.reel-text { display: flex; gap: 0.3em; margin: 0; font-size: 0.92em; }
.reel-text [data-feld] { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.reel-mehr { flex: none; color: var(--weiss); }
.reel-nav { grid-row: 5; display: flex; justify-content: space-around; align-items: center; padding: 0.75em 0.6em 2em; background: var(--nacht); }
.reel-nav .reel-symbol { width: 1.55em; height: 1.55em; }
.reel-nav .reel-aktiv { stroke-width: 2.5; }
.igr-popup { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--auf-dunkel); overflow: hidden; }
.igr-popup[open] { display: grid; place-items: center; }
.igr-popup::backdrop { background: color-mix(in srgb, var(--nacht) 90%, transparent); }
.igr-pop-innen { display: grid; grid-template-columns: auto auto auto; grid-template-areas: "zurueck telefon weiter" ". fuss ."; align-items: center; justify-items: center; gap: 20px clamp(14px, 3vw, 44px); padding: 16px; }
.igr-pop-innen > .karten-pfeile { display: contents; }
.igr-pop-zurueck { grid-area: zurueck; }
.igr-pop-weiter { grid-area: weiter; }
.igr-popup .iphone { grid-area: telefon; --ig-karte: min(calc((100dvh - 140px) * 9 / 19.5), calc(100vw - 64px)); --ig-hoehe: calc(var(--ig-karte) * 19.5 / 9); --ig-rahmen: calc(var(--ig-karte) * 0.042); --ig-radius: calc(var(--ig-karte) * 0.15); touch-action: pan-y; }
.igr-pop-video, .igr-pop-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.igr-popup.ohne-video .igr-pop-video { display: none; }
.igr-pop-hinweis { position: absolute; inset: 0; z-index: 4; display: none; place-items: center; }
.igr-popup.ohne-video .igr-pop-hinweis { display: grid; }
.igr-pop-abspielen { display: grid; justify-items: center; gap: 12px; color: var(--weiss); font-weight: var(--fett); font-size: 15px; text-decoration: none; }
.igr-pop-abspielen .ig-abspielen { position: relative; right: auto; bottom: auto; --ig-abspielen: 76px; }
.igr-pop-abspielen:hover .ig-abspielen { transform: scale(1.08); }
.igr-popup img, .igr-popup a { -webkit-user-drag: none; }
.igr-pop-fuss { grid-area: fuss; }
.igr-pop-zu { position: fixed; z-index: 2; top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); width: 48px; height: 48px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.igr-pop-zu::before, .igr-pop-zu::after { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 2px; background: currentColor; rotate: 45deg; }
.igr-pop-zu::after { rotate: -45deg; }
.igr-pop-zu:focus-visible { outline: 2px solid var(--pink); }
@media (prefers-reduced-motion: reduce) {
.igr-reel.aktiv img { animation: none; }
}
@media (max-width: 760px) {
.igr { --ig-karte: 60vw; }
.igr-kopf { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titel" "profil" "pfeile"; gap: 18px; }
.igr-kopf > .karten-pfeile { justify-self: end; }
.igr-profil { gap: 14px 14px; }
.igr-profil-text { margin-right: 0; }
.igr-avatar { width: 48px; height: 48px; font-size: 14px; }
.igr-weitere { width: 100%; }
.igr-pop-innen { grid-template-columns: auto; grid-template-areas: "telefon" "fuss"; }
.igr-pop-pfeil { display: none; }
.igr-pop-innen { padding-top: 64px; }
.igr-popup .iphone { --ig-karte: min(calc((100dvh - 190px) * 9 / 19.5), calc(100vw - 48px)); }
}
.leiste-ecke { position: fixed; z-index: 25; display: flex; --leiste-weg: translateX(calc(100% + var(--leiste-abstand) * 2)); }
.leiste-icon { position: relative; display: block; flex: none; width: var(--leiste-feld); height: var(--leiste-feld); }
.leiste-icon::before { content: ""; position: absolute; inset: 0; margin: auto; width: var(--leiste-symbol); height: var(--leiste-symbol); background: currentColor; -webkit-mask: var(--leiste-maske) center / contain no-repeat; mask: var(--leiste-maske) center / contain no-repeat; }
.leiste-icon.tel { --leiste-maske: var(--tel-maske); background: var(--nacht); color: var(--auf-dunkel); }
.leiste-icon.termin { --leiste-maske: var(--kalender-maske); background: var(--pink); color: var(--weiss); }
.leiste-icon.bewerben { --leiste-maske: var(--bewerben-maske); background: var(--pink); color: var(--weiss); }
.leiste-icon:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.leiste-ecke { right: max(var(--leiste-abstand), env(safe-area-inset-right, 0px)); bottom: max(var(--leiste-abstand), env(safe-area-inset-bottom, 0px)); flex-direction: column; gap: 10px; }
@media (max-width: 760px) {
.leiste { --leiste-reiter-b: 38px; --leiste-feld: 48px; }
.leiste-ruht .leiste { transform: var(--leiste-weg, translateY(110%)); visibility: hidden; }
}
@media (min-width: 761px) {
.leiste-ecke .tel, .nur-handy { display: none; }
}
.cta-band { padding-block: 0 var(--abstand-klein); background: var(--nacht); color: var(--auf-dunkel); }
:not(.abschnitt) + .cta-band { padding-top: var(--abstand-klein); }
.magazin-beitrag:has(> .magazin-weiter:last-child) + .cta-band { padding-top: 0; }
.magazin-beitrag:has(+ .cta-band) > .magazin-weiter:last-child { padding-bottom: var(--abstand-klein); }
.abschnitt:has(+ .cta-band) { padding-bottom: var(--abstand-klein); }
:is(.hell, .magazin-lesen) + .cta-band { background: var(--creme); color: var(--tinte); }
:is(.rosa, .magazin-uebersicht, .magazin-beitrag:has(> .magazin-weiter:last-child)) + .cta-band { background: var(--rose); color: var(--nacht); }
:is(.rosa, .magazin-uebersicht, .magazin-beitrag:has(> .magazin-weiter:last-child)) + .cta-band .cta-box { background: var(--weiss); }
.hell + .cta-band:has(+ .hell), .rosa + .cta-band:has(+ .rosa), :not(.hell, .rosa, .magazin-lesen, .magazin-uebersicht, .magazin-beitrag) + .cta-band:has(+ .dunkel) { padding-bottom: 0; }
.hell + .cta-band + .hell, .rosa + .cta-band + .rosa, :not(.hell, .rosa, .magazin-lesen, .magazin-uebersicht, .magazin-beitrag) + .cta-band + .dunkel { padding-top: var(--abstand-klein); }
.cta-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px clamp(32px, 5vw, 80px); padding: clamp(28px, 4.4vw, 68px); border-radius: var(--rund-karte); background: var(--rose); color: var(--nacht); }
.cta-text { display: grid; gap: 14px; min-width: 0; }
.cta-titel { font-size: var(--untertitel); line-height: var(--untertitel-zeile); }
.cta-text > p:not(.cta-titel) { max-width: 34rem; text-wrap: pretty; }
.cta-aktion { display: grid; justify-items: start; gap: 18px; }
.cta-anruf { display: grid; gap: 2px; }
.cta-tel { color: inherit; font-size: var(--fs-zwischen); font-weight: var(--fett); letter-spacing: var(--eng); text-decoration: none; white-space: nowrap; }
.cta-tel:hover, .cta-tel:focus-visible { color: var(--pink); }
.cta-anruf .sa-status { font-size: var(--fs-klein); }
.hv-bild .hv-wert-logo { display: block; width: clamp(118px, 9vw, 146px); height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 0; margin-bottom: 4px; }
@media (max-width: 760px) {
.cta-box { grid-template-columns: minmax(0, 1fr); padding: 30px 22px; }
}
.us-held { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100svh; overflow: clip; }
.us-held-text { display: grid; justify-items: start; align-self: center; gap: 24px; padding: calc(var(--kopf-h) + 40px) clamp(32px, 5vw, 80px) 64px var(--us-rand); }
.us-held-text .aktion { gap: 12px; margin-top: 8px; }
.us-titel { font-size: min(var(--us-titel), calc((100vw - var(--rand) - var(--rand-r)) / var(--us-titel-laengste))); font-weight: var(--leicht); line-height: 1; letter-spacing: var(--eng); text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; }
.us-titel .b { color: var(--pink); }
.us-lead { max-width: 32rem; font-size: var(--fs-lead); line-height: 1.5; text-wrap: pretty; }
.us-held-rahmen { position: relative; min-height: 100svh; overflow: clip; }
.us-held-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--held-fokus, 66%) 50%; }
.us-fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); margin-top: clamp(10px, 1.6vw, 22px); }
.us-fakt { display: grid; align-content: start; gap: 6px; padding: clamp(16px, 1.6vw, 22px); border-radius: var(--rund-karte); background: var(--weiss); color: var(--tinte); }
.us-fakt .hv-wert-logo { display: block; width: clamp(104px, 8vw, 128px); height: auto; margin-block: 2px 4px; }
.us-methoden { display: grid; gap: clamp(48px, 6vw, 96px); }
.us-methoden-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); margin: 0; padding: 0; list-style: none; }
.us-methoden-liste li { display: grid; align-content: start; gap: 14px; }
.us-methoden-liste p { max-width: 36rem; text-wrap: pretty; }
.us-methode-bild { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; border-radius: var(--rund-bild); margin-bottom: 10px; }
.us-methode-titel { font-size: var(--untertitel); font-weight: var(--fett); line-height: var(--untertitel-zeile); letter-spacing: var(--eng); text-wrap: balance; }
.us-methode-fuer { font-weight: var(--fett); }
.igr-kopf-ohne-profil { grid-template-areas: "titel pfeile"; align-items: end; }
.ab-leiste { display: grid; gap: clamp(40px, 5vw, 72px); }
.ab-leiste > .pfeil { justify-self: start; }
.ab-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-3) var(--raum-5); }
.ab-links .knopf + .pfeil { margin-top: 0; }
.ab-zeit { --ab-punkt: clamp(42px, 3.4vw, 50px); --ab-einzug: 20px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linie-hell); }
.ab-zeit { position: relative; }
.ab-zeit li { position: relative; display: grid; align-content: start; gap: 10px; padding-top: calc(var(--ab-punkt) / 2 + clamp(20px, 2vw, 28px)); }
.ab-nr { position: absolute; top: calc(var(--ab-punkt) / -2); left: 0; display: grid; place-items: center; width: var(--ab-punkt); height: var(--ab-punkt); border-radius: 50%; background: var(--pink); color: var(--weiss); font-size: calc(var(--ab-punkt) * 0.4); font-weight: var(--fett); line-height: 1; font-variant-numeric: tabular-nums; }
.ab-zeit h3 { font-size: var(--zwischentitel); font-weight: var(--fett); line-height: var(--untertitel-zeile); letter-spacing: var(--sperr-versal); text-transform: uppercase; }
.ab-zeit p { max-width: 30rem; text-wrap: pretty; }
.us-einleitung { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(28px, 3vw, 48px) clamp(24px, 6vw, 110px); }
.us-einleitung-titel { grid-column: 1 / -1; }
.us-einleitung-text { display: grid; gap: 18px; }
.us-einleitung-text p { max-width: 36rem; text-wrap: pretty; }
.us-einleitung-text > .pfeil { justify-self: start; }
.us-einleitung-mit-foto { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr repeat(3, auto) 1fr; row-gap: var(--raum-4); }
.us-einleitung-mit-foto > :not(.us-einleitung-foto) { grid-column: 2; }
.us-einleitung-mit-foto > .us-einleitung-titel { grid-row: 2; }
.us-einleitung-mit-foto > .us-lead { grid-row: 3; }
.us-einleitung-mit-foto > .us-einleitung-text { grid-row: 4; }
.us-einleitung-foto { grid-column: 1; grid-row: 1 / -1; }
.us-einleitung-bild { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rund-bild); }
.eg { display: grid; gap: clamp(40px, 5vw, 72px); }
.us-kopf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: clamp(24px, 6vw, 110px); }
.us-kopf p { max-width: 30rem; text-wrap: pretty; }
.eg-faelle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 64px); margin: 0; padding: 0; list-style: none; }
.eg-faelle li { display: grid; align-content: start; gap: 12px; padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--linie-hell); }
.eg-faelle .icon { margin-bottom: 8px; }
.eg-mit-bild { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; column-gap: clamp(40px, 6vw, 110px); }
.eg-mit-bild > .eg-foto { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: calc(var(--kopf-h) + var(--raum-4)); margin: 0; }
.eg-mit-bild > .us-kopf, .eg-mit-bild > .eg-faelle { grid-column: 2; }
.eg-mit-bild > .us-kopf { grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--raum-3); }
.eg-mit-bild > .eg-faelle, .eg-mit-bild > .eg-faelle:has(> li:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
.eg-bild { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rund-bild); }
.us-kopf > .eg-marke { grid-column: 1 / -1; margin: 0; }
.eg-logo { display: block; width: var(--eg-logo-b); height: auto; }
@media (min-width: 901px) {
.eg-faelle:has(> li:nth-child(3):last-child), .us-methoden-liste:has(> li:nth-child(3):last-child), .us-team-karten:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.eg-faelle h3 { font-size: var(--zwischentitel); font-weight: var(--fett); line-height: var(--untertitel-zeile); letter-spacing: var(--eng); text-wrap: balance; }
.eg-faelle p { max-width: 34rem; text-wrap: pretty; }
.pf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(40px, 6vw, 110px); }
.pf-text { display: grid; justify-items: start; gap: 24px; }
.pf-text p { max-width: 30rem; text-wrap: pretty; }
.pf-liste { margin: 0; border-top: 1px solid var(--linie-dunkel); }
.pf-liste div { display: grid; grid-template-columns: minmax(var(--pf-titel-min), 4fr) minmax(0, 8fr); gap: clamp(16px, 3vw, 40px); padding-block: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid var(--linie-dunkel); }
.pf-liste dt { display: flex; align-self: start; align-items: center; gap: 16px; color: var(--weiss); font-weight: var(--fett); text-wrap: balance; }
.pf-liste dd { margin: 0; max-width: 36rem; text-wrap: pretty; }
.us-zitat { margin: 0; display: grid; gap: 14px; }
.us-zitat blockquote { margin: 0; font-size: var(--fs-karte); line-height: 1.3; letter-spacing: -0.02em; text-wrap: balance; }
.us-zitat figcaption { font-size: var(--fs-klein); font-weight: var(--fett); }
.us-team-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.us-team-karten:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); max-width: var(--team-einzeln-b); }
@media (max-width: 860px) {
.us-held, .pf, .us-kopf, .us-einleitung, .eg-mit-bild { grid-template-columns: minmax(0, 1fr); }
.eg-mit-bild > :is(.eg-foto, .us-kopf, .eg-faelle) { grid-column: auto; grid-row: auto; }
.eg-mit-bild > .eg-foto { position: static; max-width: 30rem; }
.us-einleitung-mit-foto { grid-template-rows: none; }
.us-einleitung-mit-foto > *, .us-einleitung-mit-foto > :is(.us-einleitung-titel, .us-lead, .us-einleitung-text) { grid-column: auto; grid-row: auto; }
.us-einleitung-foto { max-width: 30rem; }
.us-kopf { align-items: start; }
.us-held { min-height: 0; }
.us-held-rahmen { order: -1; min-height: 0; height: 62svh; }
}
@media (max-width: 600px) {
.us-methoden-liste { grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 12vw, 64px); }
.pf-liste div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.eg-faelle { grid-template-columns: minmax(0, 1fr); }
.us-fakten { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
.us-held-text { padding: 40px var(--rand) 64px; }
.ab-zeit { grid-auto-flow: row; grid-auto-columns: auto; margin-left: calc(var(--ab-punkt) / 2); padding-left: calc(var(--ab-punkt) / 2 + var(--ab-einzug)); border-top: 0; border-left: 1px solid var(--linie-hell); }
.ab-zeit li { padding-top: 0; min-height: var(--ab-punkt); }
.ab-nr { left: calc(-1 * (var(--ab-punkt) + var(--ab-einzug)) - 0.5px); }
}
.preise-mehr { margin-top: var(--raum-5); }
.preise-sprung { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--raum-2); margin-top: var(--raum-5); }
.preise-sprung a { display: flex; align-items: center; gap: var(--raum-2); padding: var(--raum-3); border-radius: var(--rund-karte); background: var(--weiss); color: var(--tinte); font-size: var(--fs-fein); font-weight: var(--fett); line-height: 1.3; letter-spacing: var(--sperr-link); text-transform: uppercase; text-decoration: none; text-wrap: balance; transition: color 0.25s; }
.preise-sprung a:hover, .preise-sprung a:focus-visible { color: var(--pink); }
.preise-sprung span { min-width: 0; hyphens: auto; -webkit-hyphens: auto; }
.preise-sprung .icon, .preise-titel .icon { --icon-groesse: var(--icon-klein); }
.preise-titel { display: flex; align-items: center; gap: var(--raum-2); }
.preise-titel span { min-width: 0; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.us-methoden-liste > li > .icon { margin-bottom: var(--raum-3); }
@media (max-width: 1100px) {
.preise-sprung { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.preise-sprung { grid-template-columns: minmax(0, 1fr); }
}
.rosa .eg-faelle li { border-top-color: var(--linie-rosa); }
.us-team-alle { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bild-reihe { display: grid; gap: var(--raum-5); }
.bild-reihe-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raum-3); margin: 0; padding: 0; list-style: none; }
.bild-reihe-liste img { width: 100%; aspect-ratio: var(--hoch-b) / var(--hoch-h); object-fit: cover; }
.bild-stapel { position: relative; display: block; aspect-ratio: var(--stapel-format); --stapel-format: 5 / 3; }
.bild-stapel > li { position: absolute; left: var(--x); top: var(--y); z-index: var(--ebene); width: var(--b); }
.bild-stapel > li:nth-child(1) { --x: 0%; --y: 0%; --b: 56%; --ebene: 1; --bild-format: 4 / 3; }
.bild-stapel > li:nth-child(2) { --x: 64%; --y: 13.33%; --b: 36%; --ebene: 2; --bild-format: 4 / 5; }
.bild-stapel > li:nth-child(3) { --x: 42%; --y: 50%; --b: 30%; --ebene: 3; --bild-format: 1; }
.bild-stapel img { aspect-ratio: var(--bild-format); }
.bild-stapel > li:not(:first-child) img { border: var(--stapel-fuge) solid var(--flaeche); }
a[href^="tel:"] { white-space: nowrap; }
.bewerbung { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--raum-5) clamp(24px, 6vw, 110px); align-items: start; }
.bewerbung-text { display: grid; justify-items: start; gap: var(--raum-3); }
.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-4); align-content: start; }
.formular > * { grid-column: 1 / -1; }
.formular > .feld:has(input, select) { grid-column: auto; }
.feld { position: relative; display: grid; gap: var(--raum-1); margin: 0; }
.feld label { font-size: var(--fs-label); font-weight: var(--fett); letter-spacing: var(--sperr-label); text-transform: uppercase; }
.feld-frei { font-weight: var(--leicht); letter-spacing: 0; text-transform: none; }
.feld input, .feld select, .feld textarea { width: 100%; padding: var(--raum-1) 0 var(--raum-2); border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: none; color: inherit; font: inherit; font-size: var(--fs-lead); }
.feld select { appearance: none; padding-right: var(--raum-4); cursor: pointer; }
.feld:has(select)::after { content: ""; position: absolute; right: 4px; bottom: calc(var(--raum-2) + 0.5em); width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; pointer-events: none; }
.feld textarea { min-height: 8.5em; resize: vertical; }
.feld select option { color: var(--tinte); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: none; border-bottom: 2px solid var(--pink); padding-bottom: calc(var(--raum-2) - 1px); }
.feld-haken input:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.feld-haken { display: flex; align-items: start; gap: var(--raum-2); font-size: var(--fs-fein); }
.feld-haken input { flex: none; width: var(--raum-3); height: var(--raum-3); margin-top: 0.1em; accent-color: var(--pink); }
.formular .knopf { justify-self: start; }
.vn-form__status { padding: var(--raum-2) var(--raum-3); border: 1px solid currentColor; }
.us-held-schlicht { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.us-held-breit { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.us-held-breit .us-held-text { padding-block: calc(var(--kopf-h) + var(--raum-6)) var(--raum-6); }
.us-held-breit .us-held-rahmen { order: 0; height: auto; min-height: 0; aspect-ratio: var(--held-breit-format); }
.us-held-schlicht .us-held-text { padding-block: calc(var(--kopf-h) + var(--raum-6)) var(--raum-6); }
.text-seite { display: grid; gap: var(--raum-3); max-width: 46rem; }
.text-seite h2 { margin-top: var(--raum-4); font-size: var(--zwischentitel); font-weight: var(--fett); line-height: var(--untertitel-zeile); letter-spacing: var(--eng); }
.text-seite ul { display: grid; gap: var(--raum-1); padding-left: 1.2em; list-style: disc; }
.text-seite a { text-underline-offset: 0.2em; }
.text-seite > .pfeil { justify-self: start; margin-top: var(--raum-4); }
.zeitleiste { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raum-4) clamp(20px, 3vw, 40px); margin: var(--raum-5) 0 0; padding: 0; list-style: none; }
.zeitleiste::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--zeit-jahr-h) / 2); height: 1px; background: var(--linie-hell); }
.rosa .zeitleiste::before { background: var(--linie-rosa); }
.zeit-station { position: relative; display: grid; align-content: start; gap: var(--raum-3); }
.zeitleiste { --zeit-jahr-h: var(--fs-h3); }
.zeit-jahr { display: inline-flex; align-items: center; gap: var(--raum-2); justify-self: start; padding-right: var(--raum-2); background: var(--flaeche); color: var(--pink); font-size: var(--fs-h3); font-weight: var(--fett); line-height: 1; letter-spacing: var(--eng); }
.zeit-jahr::before { content: ""; flex: none; width: var(--zeit-punkt); height: var(--zeit-punkt); border-radius: 50%; background: var(--pink); }
.zeit-bild { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.zeit-titel { font-size: var(--fs-name); font-weight: var(--fett); line-height: 1.2; }
.zeit-station p { max-width: 30rem; text-wrap: pretty; }
.zeit-fakten { display: flex; flex-wrap: wrap; gap: var(--raum-3) var(--raum-6); margin: var(--raum-5) 0 0; padding-top: var(--raum-4); border-top: 1px solid var(--linie-hell); }
.zeit-fakten div { display: grid; gap: 2px; }
.zeit-fakten dt { display: grid; justify-items: start; gap: var(--raum-2); font-size: var(--fs-zwischen); font-weight: var(--fett); line-height: 1.2; }
.zeit-fakten .icon { --icon-groesse: var(--icon-klein); stroke-width: var(--icon-strich-fein); }
.zeit-fakten .icon .icon-flaeche { fill: none; }
.zeit-fakten dd { margin: 0; }
.teamfoto-text { display: grid; justify-items: start; gap: var(--raum-3); }
.teamfoto-rahmen { margin: var(--raum-5) 0 0; overflow: hidden; }
.teamfoto-bild { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.stellen-liste { display: grid; gap: var(--raum-2); margin: var(--raum-5) 0 0; padding: 0; list-style: none; }
.stelle-zeile { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) auto; align-items: center; gap: var(--raum-3) var(--raum-5); padding: var(--raum-4); background: var(--weiss); color: var(--tinte); text-decoration: none; }
.stelle-kopf { display: grid; gap: var(--raum-1); }
.stelle-titel { font-size: var(--fs-karte); font-weight: var(--fett); line-height: 1.1; letter-spacing: var(--eng); transition: color 0.25s; }
.stelle-kurz { max-width: 36rem; text-wrap: pretty; }
.stelle-fakten { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-4); }
.stelle-fakt { display: grid; gap: 4px; }
.stelle-fakt-name { display: inline-flex; align-items: center; gap: var(--raum-1); }
:is(.stelle-fakt, .stelle-chips, .stelle-daten) .icon { --icon-groesse: var(--icon-mini); color: inherit; stroke-width: var(--icon-strich-fein); }
:is(.stelle-fakt, .stelle-chips, .stelle-daten) .icon .icon-flaeche { fill: none; }
.stelle-fakt-wert { padding-left: calc(var(--icon-mini) + var(--raum-1)); }
.stelle-chip-text { display: grid; gap: 2px; }
.stelle-fakt-name, .stelle-chip-text > span, .stelle-daten dt { font-size: var(--fs-label); font-weight: var(--fett); letter-spacing: var(--sperr-label); text-transform: uppercase; }
.stelle-mehr { display: inline-flex; align-items: center; gap: var(--raum-2); font-size: var(--fs-fein); font-weight: var(--fett); letter-spacing: var(--sperr-link); text-transform: uppercase; white-space: nowrap; }
.stelle-mehr::after { content: ""; flex: none; width: var(--pfeil-b); height: var(--pfeil-h); background: currentColor; -webkit-mask: var(--pfeil-maske) center / contain no-repeat; mask: var(--pfeil-maske) center / contain no-repeat; transition: transform 0.3s var(--lauf); }
.stelle-zeile:hover .stelle-titel, .stelle-zeile:focus-visible .stelle-titel { color: var(--pink); }
.stelle-zeile:hover .stelle-mehr::after, .stelle-zeile:focus-visible .stelle-mehr::after { transform: var(--pfeil-hover); }
.stelle-zeile:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }
.stellen .aktion { margin-top: var(--raum-4); }
.stelle-held { padding-block: calc(var(--kopf-h) + var(--raum-6)) var(--raum-6); }
.stelle-held .innen { display: grid; justify-items: start; gap: var(--raum-4); }
.stelle-held .us-titel { max-width: 16ch; }
.stelle-zurueck { display: inline-flex; align-items: center; gap: var(--raum-2); color: var(--pink-klein-dunkel); text-decoration: none; }
.stelle-zurueck::before { content: ""; flex: none; width: var(--pfeil-klein-b); height: var(--pfeil-klein-h); background: currentColor; -webkit-mask: var(--pfeil-maske) center / contain no-repeat; mask: var(--pfeil-maske) center / contain no-repeat; transform: scaleX(-1); }
.stelle-chips { display: flex; flex-wrap: wrap; gap: var(--raum-2); margin: 0; padding: 0; list-style: none; }
.stelle-chips li { display: flex; align-items: center; gap: var(--raum-2); padding: var(--raum-2) var(--raum-3); border: 1px solid var(--linie-dunkel); }
.stelle-chip-text > span { color: var(--pink-klein-dunkel); }
.stelle-vergeben { font-size: var(--fs-lead); color: var(--pink-klein-dunkel); }
.stelle-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--raum-5) clamp(32px, 6vw, 110px); align-items: start; }
.stelle-inhalt { display: grid; gap: var(--raum-5); }
.stelle-block { display: grid; gap: var(--raum-3); padding-top: var(--raum-4); border-top: 1px solid var(--linie-hell); }
.stelle-text { max-width: 40rem; }
.stelle-text p { margin: 0 0 var(--raum-2); }
.stelle-text ul { display: grid; gap: var(--raum-2); margin: 0; padding: 0; list-style: none; }
.stelle-text li { position: relative; padding-left: var(--raum-4); }
.stelle-text li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: var(--raum-3); height: 1px; background: var(--pink); }
.stelle-karte { position: sticky; top: calc(var(--kopf-platz) + var(--raum-4)); display: grid; justify-items: start; gap: var(--raum-3); padding: var(--raum-4); background: var(--weiss); }
.stelle-daten { display: grid; width: 100%; margin: 0; }
.stelle-daten div { display: grid; gap: 4px; padding-block: var(--raum-2); border-bottom: 1px solid var(--linie-hell); }
.stelle-daten dt { display: flex; align-items: center; gap: var(--raum-1); }
.stelle-daten dd { padding-left: calc(var(--icon-mini) + var(--raum-1)); }
.stelle-daten dd { margin: 0; text-wrap: pretty; }
@media (max-width: 900px) {
.zeitleiste { grid-template-columns: minmax(0, 1fr); gap: var(--raum-5); padding-left: var(--raum-4); }
.zeitleiste::before { left: calc(var(--zeit-punkt) / 2); right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
.zeit-jahr { margin-left: calc(-1 * var(--raum-4)); padding-block: var(--raum-1); }
.zeit-bild { max-width: 34rem; }
.us-team-alle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stelle-zeile, .stelle-raster { grid-template-columns: minmax(0, 1fr); }
.stelle-zeile { gap: var(--raum-2); padding: var(--raum-3); }
.stelle-karte { position: static; }
.bewerbung, .bild-reihe-liste { grid-template-columns: minmax(0, 1fr); }
.formular { grid-template-columns: minmax(0, 1fr); }
.bild-reihe-liste img { aspect-ratio: var(--team-b) / var(--team-h); }
.bild-stapel { --stapel-format: 100 / 132; }
.bild-stapel > li:nth-child(1) { --y: 0%; --b: 80%; }
.bild-stapel > li:nth-child(2) { --x: 44%; --y: 33.33%; --b: 56%; }
.bild-stapel > li:nth-child(3) { --x: 6%; --y: 62.12%; --b: 50%; }
.bild-stapel img { aspect-ratio: var(--bild-format); }
}
@media (max-width: 760px) {
.us-held:not(.us-held-schlicht) { position: relative; }
.us-held:not(.us-held-schlicht)::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: var(--held-schatten-h); background: linear-gradient(color-mix(in srgb, var(--nacht) 60%, transparent), transparent); pointer-events: none; }
.us-held-schlicht .us-held-text { padding: calc(var(--kopf-h) + var(--raum-4)) var(--rand) var(--raum-5); }
}
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--seitenwechsel); }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@keyframes bk-notfall { to { opacity: 1; } }
.vn-motion-ok:not(.bewegung-laeuft) :is(.us-held, .magazin-kopf) :is(.us-titel, .us-lead, .aktion, .magazin-meta, .mk-thema, .magazin-krume) { opacity: 0; animation: bk-notfall 0.01s var(--bewegung-notfall) forwards; }
.bewegung-laeuft .ab-zeit::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--pink); transform: scaleX(var(--ab-fortschritt, 0)); transform-origin: left; }
.bewegung-laeuft .ab-nr { transform: scale(0.55); opacity: 0.35; transition: transform 0.5s var(--lauf), opacity 0.5s var(--lauf); }
.bewegung-laeuft .ab-zeit li.ist-an .ab-nr { transform: none; opacity: 1; }
.bewegung-laeuft [data-tiefe] { --tiefe-weg: var(--tiefe-1); translate: 0 calc(var(--zug, 0) * var(--tiefe-weg)); will-change: translate; }
.bewegung-laeuft [data-tiefe="2"] { --tiefe-weg: var(--tiefe-2); }
.bewegung-laeuft [data-tiefe="3"] { --tiefe-weg: var(--tiefe-3); }
.bewegung-laeuft .us-held-bild { transform-origin: 50% 100%; translate: 0 calc(var(--raus, 0) * var(--held-weg)); scale: calc(1 + var(--einstieg, 0) * var(--held-einstieg-zoom) + var(--raus, 0) * var(--held-zoom)); }
.bewegung-laeuft .kb-buehne img { translate: 0 calc(var(--raus, 0) * var(--kb-buehne-weg)); }
.preise { scroll-margin-top: var(--raum-5); }
@media (min-width: 901px) {
.preise-kopf, .pf-text { position: sticky; top: calc(var(--kopf-platz) + var(--raum-5)); }
}
@media (max-width: 860px) {
.bewegung-laeuft .ab-zeit::before { top: 0; bottom: 0; left: -1px; right: auto; width: 2px; height: auto; transform: scaleY(var(--ab-fortschritt, 0)); transform-origin: top; }
}
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--raum-5) clamp(48px, 7vw, 120px); align-items: start; }
.kontakt-spalte { display: grid; gap: var(--raum-5); }
.kontakt-formular { position: sticky; top: calc(var(--kopf-platz) + var(--raum-5)); }
.kontakt-kopf { display: grid; gap: var(--raum-3); }
.kontakt-lead { max-width: 34rem; font-size: var(--fs-lead); text-wrap: pretty; }
.kontakt-block { display: grid; gap: var(--raum-3); }
.kontakt-block-titel { font-size: var(--zwischentitel); font-weight: var(--fett); line-height: var(--untertitel-zeile); letter-spacing: var(--eng); }
.kontakt-foto { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rund-bild); }
.kontakt-woche { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--raum-1); margin: 0; padding: 0; list-style: none; }
.kontakt-woche li { display: grid; gap: 2px; padding: var(--raum-2); background: var(--weiss); color: var(--tinte); }
.kontakt-woche .kw-tag { font-size: var(--fs-zwischen); font-weight: var(--fett); line-height: 1.1; letter-spacing: var(--eng); }
.kontakt-woche .kw-zeit { font-size: var(--fs-fein); }
.kontakt-woche .kw-zu { background: none; box-shadow: inset 0 0 0 1px var(--linie-rosa); color: color-mix(in srgb, var(--nacht) 60%, transparent); }
.kontakt-woche .heute { background: var(--pink); color: var(--weiss); }
.kontakt-status { justify-self: start; padding: 3px 11px; border-radius: var(--rund-pille); background: var(--weiss); color: var(--pink-klein); font-size: var(--fs-fein); font-weight: var(--fett); }
.kontakt-kacheln { display: grid; margin: 0; padding: 0; list-style: none; }
.kontakt-kachel { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px var(--raum-3); padding-block: var(--raum-3); border-bottom: 1px solid var(--linie-rosa); }
.kontakt-kachel:first-child { border-top: 1px solid var(--linie-rosa); }
.kontakt-kachel .icon { --icon-groesse: var(--icon-klein); grid-row: span 2; color: var(--pink); }
.kontakt-kachel-breit { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.kontakt-kachel-breit .kontakt-kachel-titel { padding-left: calc(var(--icon-klein) + var(--raum-3)); }
.kontakt-kachel-titel { font-size: var(--fs-label); font-weight: var(--fett); letter-spacing: var(--sperr-label); text-transform: uppercase; }
.kontakt-kachel-wert { font-style: normal; color: inherit; }
a.kontakt-kachel-wert { font-size: var(--fs-name); font-weight: var(--fett); text-decoration: none; white-space: nowrap; }
a.kontakt-kachel-wert:hover { color: var(--pink); }
.kontakt-sozial { display: flex; flex-wrap: wrap; gap: 4px; margin: -10px -10px -10px 0; padding: 0; list-style: none; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.anfahrt { position: relative; isolation: isolate; display: grid; align-items: center; min-height: var(--anfahrt-h); overflow: hidden; }
.anfahrt-raster { position: relative; z-index: 1; padding-block: var(--abstand); pointer-events: none; }
.anfahrt-text { display: grid; justify-items: start; gap: var(--raum-4); max-width: var(--anfahrt-text-b); pointer-events: auto; }
.anfahrt-adresse { font-style: normal; font-size: var(--fs-lead); line-height: 1.45; }
.anfahrt-text > p { max-width: 30rem; font-size: var(--fs-lead); text-wrap: pretty; }
.anfahrt-karte { --karte-bild-b: calc(var(--karte-b-km) * var(--karte-px-km)); --karte-bild-h: calc(var(--karte-h-km) * var(--karte-px-km)); position: absolute; inset: 0; margin: 0; background: var(--karte-land); }
.karte-plan { position: absolute; inset: 0; }
.karte-plan::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--karte-verlauf); pointer-events: none; }
.karte-grund { position: absolute; left: calc(var(--karte-cx) - var(--anker-x) * var(--karte-bild-b)); top: calc(var(--karte-cy) - var(--anker-y) * var(--karte-bild-h)); width: var(--karte-bild-b); height: var(--karte-bild-h); max-width: none; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.karte-orte { margin: 0; padding: 0; list-style: none; }
.karte-ort, .karte-salon { position: absolute; left: calc(var(--karte-cx) + (var(--u) - var(--anker-x)) * var(--karte-bild-b)); top: calc(var(--karte-cy) + (var(--v) - var(--anker-y)) * var(--karte-bild-h)); }
.karte-ort { translate: -50% -50%; color: var(--karte-schrift-leise); font-size: var(--fs-fein); font-weight: var(--betont); line-height: 1.2; white-space: nowrap; text-shadow: var(--karte-halo); }
.karte-ort-stadt { color: var(--karte-schrift); font-size: var(--fs-klein); font-weight: var(--fett); }
.karte-ort[data-desktop="nein"] { display: none; }
.karte-ort-verdeckt { visibility: hidden; }
.karte-salon { --u: var(--anker-x); --v: var(--anker-y); z-index: 2; margin: 0; }
.karte-pin { position: absolute; left: 0; top: 0; width: var(--karte-pin-b); height: auto; translate: -50% -100%; overflow: visible; filter: drop-shadow(0 2px 3px var(--karte-pin-schatten)); }
.karte-pin path { fill: var(--pink); stroke: var(--karte-pin-rand); stroke-width: 1; }
.karte-pin circle { fill: var(--weiss); }
.karte-salon .karte-name { position: absolute; left: calc(var(--karte-pin-b) / 2 + 4px); top: calc(var(--karte-pin-b) * -1); display: grid; color: var(--pink-klein-dunkel); font-size: var(--fs-klein); font-weight: var(--fett); line-height: 1.2; white-space: nowrap; text-shadow: var(--karte-halo); }
.karte-salon-ort { color: var(--karte-schrift); font-size: var(--fs-label); font-weight: var(--betont); }
.karte-quelle { position: absolute; left: var(--us-rand); bottom: var(--raum-2); z-index: 2; padding: 2px 8px; background: var(--karte-quelle-grund); color: var(--karte-schrift-leise); font-size: var(--fs-label); text-decoration: none; }
.karte-quelle:hover { color: var(--karte-schrift); text-decoration: underline; }
@media (max-width: 900px) {
.kontakt-raster { grid-template-columns: minmax(0, 1fr); }
.kontakt-formular { position: static; }
}
@media (max-width: 760px) {
.anfahrt { --karte-px-km: var(--karte-px-km-mobil); --karte-cx: var(--karte-cx-mobil); --karte-cy: calc(var(--anfahrt-band) / 2); --karte-verlauf: var(--karte-verlauf-mobil); --karte-pin-b: 24px; align-items: end; min-height: 0; }
.anfahrt-raster { padding-top: var(--anfahrt-band); }
.karte-ort { font-size: var(--fs-label); }
.karte-ort-stadt, .karte-salon .karte-name { font-size: var(--fs-fein); }
.karte-ort[data-desktop="nein"] { display: block; }
.karte-ort[data-handy="nein"] { display: none; }
.karte-quelle { top: var(--raum-2); right: var(--rand-r); bottom: auto; left: auto; }
}
@media (max-width: 400px) {
.anfahrt { --karte-px-km: var(--karte-px-km-klein); --karte-cx: var(--karte-cx-klein); }
}
.magazin-themen { display: flex; flex-wrap: wrap; gap: var(--raum-1); margin-bottom: var(--raum-5); }
.magazin-themen a { padding: 8px 14px; border: 1px solid currentColor; color: inherit; font-size: var(--fs-label); font-weight: var(--fett); letter-spacing: var(--sperr-label); text-transform: uppercase; text-decoration: none; }
.magazin-themen a[aria-current] { background: var(--pink); border-color: var(--pink); color: var(--weiss); }
.magazin-uebersicht, .magazin-lesen { --flaeche: var(--creme); background: var(--flaeche); color: var(--tinte); }
.magazin-modul, .magazin-weiter { --flaeche: var(--rose); background: var(--flaeche); color: var(--nacht); }
.magazin-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raum-6) clamp(20px, 2.4vw, 36px); margin: 0; padding: 0; list-style: none; }
.magazin-karte, .mk-link { height: 100%; }
.mk-link { display: grid; align-content: start; gap: var(--raum-3); color: inherit; text-decoration: none; }
.mk-rahmen { display: block; overflow: clip; border-radius: var(--rund-bild); }
.mk-bild { display: block; width: 100%; aspect-ratio: var(--mk-format); object-fit: cover; object-position: var(--mk-fokus); transition: transform 0.9s var(--lauf); }
.mk-link:hover .mk-bild { transform: scale(1.04); }
.mk-text { display: grid; justify-items: start; align-content: start; gap: var(--raum-1); }
.mk-thema { color: var(--pink-klein); }
.dunkel .mk-thema { color: var(--pink-klein-dunkel); }
.mk-titel { font-size: var(--fs-karte); font-weight: var(--fett); line-height: 1.12; letter-spacing: var(--eng); text-wrap: balance; hyphens: auto; -webkit-hyphens: auto; transition: color 0.3s var(--lauf); }
.mk-link:hover .mk-titel { color: var(--pink); }
.mk-lead { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: var(--fs-klein); }
.mk-meta { display: flex; flex-wrap: wrap; gap: 4px var(--raum-2); margin-top: var(--raum-1); font-size: var(--fs-fein); color: color-mix(in srgb, currentColor 72%, transparent); }
.mk-zeile .mk-link { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); align-items: center; gap: var(--raum-3); }
.mk-zeile .mk-titel { font-size: var(--fs-name); }
.mk-zeile .mk-lead, .mk-zeile .mk-meta { display: none; }
.magazin-leer { max-width: 36rem; }
.magazin-uebersicht .nav-links { display: flex; gap: var(--raum-3); margin-top: var(--raum-6); }
.magazin-uebersicht .nav-links a { color: inherit; }
.magazin-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-1) var(--raum-3); font-size: var(--fs-fein); color: color-mix(in srgb, var(--auf-dunkel) 78%, transparent); }
.magazin-von { display: inline-flex; align-items: center; gap: var(--raum-1); color: var(--auf-dunkel); font-weight: var(--fett); }
.magazin-portraet { width: var(--magazin-portraet); height: var(--magazin-portraet); border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.magazin-lesen { padding-block: var(--abstand-klein); }
.magazin-spalte { display: grid; gap: var(--raum-5); max-width: calc(var(--magazin-spalte) + var(--rand) + var(--rand-r)); }
.magazin-blick { padding: var(--raum-4); background: var(--weiss); }
.magazin-blick ul { display: grid; gap: var(--raum-2); margin-top: var(--raum-2); padding-left: 1.2em; list-style: disc; }
.magazin-blick li::marker { color: var(--pink); }
.magazin-text { display: grid; gap: var(--raum-3); line-height: 1.75; }
.editor-styles-wrapper .is-root-container { max-width: var(--magazin-spalte); margin-inline: auto; line-height: 1.75; }
.editor-styles-wrapper .editor-post-title { max-width: var(--magazin-spalte); margin-inline: auto; font-size: var(--fs-h2); font-weight: var(--fett); line-height: 1.06; letter-spacing: var(--eng); }
:is(.magazin-text, .is-root-container) > h2 { margin-top: var(--raum-4); font-size: var(--zwischentitel); font-weight: var(--fett); line-height: var(--untertitel-zeile); letter-spacing: var(--eng); hyphens: auto; -webkit-hyphens: auto; }
:is(.magazin-text, .is-root-container) > h3 { margin-top: var(--raum-3); font-size: var(--fs-name); font-weight: var(--fett); }
:is(.magazin-text, .is-root-container) > :is(ul, ol) { display: grid; gap: var(--raum-1); padding-left: 1.2em; }
:is(.magazin-text, .is-root-container) > ul { list-style: disc; }
:is(.magazin-text, .is-root-container) a { color: inherit; text-decoration-color: var(--pink); text-underline-offset: 0.2em; }
.magazin-text .wp-block-image img { display: block; width: 100%; height: auto; }
:is(.magazin-text, .is-root-container) .wp-block-quote { margin-block: var(--raum-4); padding: 0; border: 0; font-size: var(--fs-h3); font-weight: var(--betont); line-height: 1.18; letter-spacing: var(--eng); color: var(--pink); }
:is(.magazin-text, .is-root-container) .wp-block-quote cite { display: block; margin-top: var(--raum-2); font-size: var(--fs-label); font-style: normal; font-weight: var(--fett); letter-spacing: var(--sperr-label); text-transform: uppercase; color: var(--tinte); }
.magazin-autorin { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--raum-4); padding-top: var(--raum-5); border-top: 1px solid var(--linie-hell); }
.magazin-autorin > div { display: grid; justify-items: start; gap: 4px; }
.magazin-autorin-bild { width: var(--magazin-autorin-bild); height: var(--magazin-autorin-bild); border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.magazin-autorin-name { font-size: var(--fs-name); font-weight: var(--fett); }
.magazin-autorin .pfeil { margin-top: var(--raum-1); }
.magazin-weiter .innen { display: grid; gap: var(--abstand-klein); }
.bk-tipp { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--raum-3); margin-block: var(--raum-2); padding: var(--raum-4); background: var(--nacht); color: var(--auf-dunkel); }
.bk-tipp-bild { width: var(--tipp-bild); height: var(--tipp-bild); border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.bk-tipp-text { display: grid; justify-items: start; gap: var(--raum-2); }
.bk-tipp .label { color: var(--pink-klein-dunkel); }
.bk-termin { display: grid; justify-items: start; gap: var(--raum-2); margin-block: var(--raum-3); padding: var(--raum-5) var(--raum-4); background: var(--rose); color: var(--nacht); }
.bk-termin-titel { font-size: var(--untertitel); font-weight: var(--betont); line-height: var(--untertitel-zeile); letter-spacing: var(--eng); }
.bk-termin-titel .b { color: var(--pink); font-weight: var(--fett); }
.bk-termin .aktion { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--raum-1); }
.bk-galerie, .bk-vorher-nachher { display: grid; gap: var(--raum-2); margin: var(--raum-3) 0; }
.bk-galerie .karten { --karte-b: min(72%, 22rem); margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
.bk-galerie-bild, .bk-vn-bild { display: block; width: 100%; aspect-ratio: var(--hoch-format); object-fit: cover; }
.bk-galerie-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--raum-3); }
:is(.bk-galerie, .bk-vorher-nachher) figcaption { font-size: var(--fs-fein); }
.bk-vn-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-1); }
.bk-vn-seite { position: relative; }
.bk-vn-wann { position: absolute; left: var(--raum-2); bottom: var(--raum-2); padding: 6px 10px; background: var(--nacht); color: var(--auf-dunkel); }
.bk-lies-auch { display: grid; gap: var(--raum-2); margin-block: var(--raum-2); padding-block: var(--raum-3); border-block: 1px solid var(--linie-hell); }
.bk-block-leer { padding: var(--raum-3); border: 1px dashed var(--linie-hell); }
.magazin-zur-leistung .magazin-raster { margin-top: 0; }
@media (max-width: 1100px) {
.magazin-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.magazin-raster { grid-template-columns: minmax(0, 1fr); }
.bk-tipp { grid-template-columns: minmax(0, 1fr); }
}
.magazin-reiter { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--raum-1) var(--raum-4); padding-bottom: var(--raum-3); border-bottom: 1px solid var(--linie-hell); }
.magazin-reiter a { padding-block: 6px; border-bottom: 2px solid transparent; color: inherit; font-size: var(--fs-label); font-weight: var(--fett); letter-spacing: var(--sperr-label); text-transform: uppercase; text-decoration: none; }
.magazin-reiter a:hover, .magazin-reiter a[aria-current] { border-bottom-color: var(--pink); }
.magazin-trenner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--raum-3); margin: var(--raum-6) 0 var(--raum-4); font-size: var(--fs-label); font-weight: var(--fett); letter-spacing: var(--sperr-label); text-transform: uppercase; }
.magazin-trenner::before, .magazin-trenner::after { content: ""; height: 1px; background: var(--linie-hell); }
.magazin-thema { margin-top: var(--raum-6); }
.magazin-stapel { display: grid; gap: var(--raum-4); max-width: var(--magazin-stapel-b); margin: 0 auto; padding: 0; list-style: none; }
.mk-liegend .mk-link { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: stretch; gap: 0; background: var(--rose); color: var(--nacht); }
.mk-liegend .mk-rahmen { border-radius: 0; }
.mk-liegend .mk-bild { height: 100%; }
.mk-liegend .mk-text { align-content: center; padding: clamp(24px, 4vw, 64px); }
.mk-liegend .mk-titel { font-size: var(--fs-h3); line-height: 1.08; }
.mk-liegend .mk-lead { max-width: 34rem; font-size: var(--fs-text); }
.magazin-mehr { margin-top: var(--raum-4); text-align: center; }
.magazin-uebersicht .magazin-stapel + .nav-links, .magazin-uebersicht .navigation { margin-top: var(--raum-6); text-align: center; }
.magazin-kopf { padding-block: calc(var(--kopf-h) + var(--raum-6)) var(--raum-6); }
.magazin-kopf-text { display: grid; justify-items: start; gap: var(--raum-3); }
.magazin-kopf .us-titel { font-size: var(--fs-h2); line-height: 1.04; hyphens: auto; -webkit-hyphens: auto; }
.magazin-kopf .us-lead { max-width: none; }
.magazin-kopf:has(+ .magazin-lesen-mit-bild) { padding-bottom: calc(var(--magazin-bild-zug) + var(--raum-5)); }
.magazin-titelbild { display: grid; gap: var(--raum-2); margin: calc(-1 * (var(--magazin-bild-zug) + var(--abstand-klein))) 0 0; }
.magazin-bild { display: block; width: 100%; aspect-ratio: var(--mk-format); object-fit: cover; object-position: var(--mk-fokus); }
.magazin-titelbild figcaption { font-size: var(--fs-fein); color: color-mix(in srgb, currentColor 72%, transparent); }
@media (max-width: 600px) {
.mk-liegend .mk-link { grid-template-columns: minmax(0, 1fr); }
.mk-liegend .mk-bild { height: auto; }
}
.magazin-uebersicht { padding-top: var(--raum-6); }
.magazin-stapel { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: clamp(20px, 2.4vw, 36px); }
.magazin-stapel .mk-liegend .mk-text { padding: clamp(20px, 2.6vw, 40px); }
.magazin-stapel .mk-liegend .mk-titel { font-size: var(--fs-karte); }
.magazin-stapel .mk-liegend .mk-lead { font-size: var(--fs-klein); }
.magazin-thema .mk-thema { display: none; }
@media (max-width: 900px) {
.magazin-stapel { grid-template-columns: minmax(0, 1fr); }
}
.mk-liegend .mk-rahmen { position: relative; min-height: 100%; }
.mk-liegend .mk-bild { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
@media (max-width: 600px) {
.mk-liegend .mk-rahmen { position: static; }
.mk-liegend .mk-bild { position: static; aspect-ratio: var(--mk-format); }
}
.magazin-stapel .mk-liegend .mk-titel { font-size: var(--fs-zwischen); }
.magazin-uebersicht { --flaeche: var(--rose); --mk-panel: var(--weiss); --mk-panel-text: var(--tinte); --mk-linie: var(--linie-rosa); background: var(--flaeche); color: var(--nacht); }
.magazin-uebersicht .mk-karte .mk-link { gap: 0; background: var(--mk-panel); color: var(--mk-panel-text); }
.magazin-uebersicht .mk-karte .mk-text { height: 100%; padding: clamp(18px, 2vw, 28px); }
.magazin-uebersicht :is(.magazin-reiter, .magazin-trenner::before, .magazin-trenner::after) { border-color: var(--mk-linie); }
.magazin-uebersicht .magazin-trenner::before, .magazin-uebersicht .magazin-trenner::after { background: var(--mk-linie); }
.magazin-uebersicht .magazin-reiter { border-bottom-color: var(--mk-linie); }
.magazin-uebersicht .mk-liegend .mk-link { background: var(--mk-panel); color: var(--mk-panel-text); }
.magazin-trenner { grid-template-columns: auto minmax(0, 1fr); gap: var(--raum-4); font-size: var(--fs-h3); font-weight: var(--leicht); line-height: 1.1; letter-spacing: var(--eng); text-transform: none; }
.magazin-trenner::before { display: none; }
.magazin-trenner .b { color: var(--pink); font-weight: var(--fett); }
@media (max-width: 600px) {
.magazin-trenner { grid-template-columns: minmax(0, 1fr); }
.magazin-trenner::after { display: none; }
}
.magazin-lese-raster { display: grid; grid-template-columns: minmax(0, 1fr) min(var(--magazin-spalte), 100%) minmax(0, 1fr); align-items: start; column-gap: var(--raum-5); }
.magazin-inhalt { grid-column: 2; display: grid; gap: var(--raum-5); min-width: 0; }
.magazin-seite { grid-column: 3; align-self: stretch; }
.magazin-seite-innen { position: sticky; top: calc(var(--kopf-platz) + var(--raum-5)); display: grid; justify-items: start; gap: var(--raum-3); max-width: 17rem; }
.magazin-sprung { display: grid; gap: var(--raum-2); margin: 0; padding: 0 0 0 var(--raum-3); border-left: 1px solid var(--linie-hell); font-size: var(--fs-klein); line-height: 1.4; list-style: none; }
.magazin-sprung a { color: inherit; text-decoration: none; }
.magazin-sprung a:hover, .magazin-sprung a[aria-current] { color: var(--pink-klein); }
.magazin-krume { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-1); font-size: var(--fs-label); font-weight: var(--fett); letter-spacing: var(--sperr-label); text-transform: uppercase; }
.magazin-krume a { color: var(--pink-klein-dunkel); text-decoration: none; }
.magazin-krume a:hover { text-decoration: underline; }
.magazin-krume span { color: color-mix(in srgb, var(--auf-dunkel) 60%, transparent); }
.magazin-fragen { display: grid; gap: var(--raum-3); margin-top: var(--raum-3); }
.magazin-fragen-titel { font-size: var(--fs-h3); font-weight: var(--leicht); line-height: 1.1; letter-spacing: var(--eng); }
.magazin-fragen-titel .b { color: var(--pink); font-weight: var(--fett); }
.magazin-fragen .faq-punkt summary { font-size: var(--fs-name); }
.magazin-teilen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-2); }
.magazin-teilen .label { margin-right: var(--raum-1); }
.magazin-teilen button { border: 1px solid currentColor; background: transparent; font-family: inherit; cursor: pointer; }
.magazin-weiter .mk-karte .mk-link { gap: 0; background: var(--weiss); color: var(--tinte); }
.magazin-weiter .mk-karte .mk-text { height: 100%; padding: clamp(18px, 2vw, 28px); }
.magazin-weiter .magazin-passende .magazin-trenner { margin-top: 0; }
@media (max-width: 1100px) {
.magazin-lese-raster { grid-template-columns: minmax(0, 1fr); max-width: calc(var(--magazin-spalte) + var(--rand) + var(--rand-r)); }
.magazin-inhalt { grid-column: 1; }
.magazin-seite { display: none; }
}
.magazin-text > h2, .magazin-fragen-titel { scroll-margin-top: var(--raum-6); }
.mm-steuerung { display: flex; align-items: center; gap: var(--raum-4); margin-left: auto; }
.mm-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); margin: 0; padding: 0; list-style: none; }
.magazin-modul .mk-band .mk-link { grid-template-rows: auto 1fr; align-content: stretch; gap: 0; background: var(--weiss); color: var(--tinte); }
.magazin-modul .mk-band .mk-text { padding: clamp(18px, 2vw, 28px); }
.magazin-modul .mk-band .mk-text { grid-template-rows: auto auto 1fr auto; }
.magazin-modul .mk-band .mk-lead { -webkit-line-clamp: 3; }
@media (max-width: 760px) {
.mm-steuerung { justify-content: space-between; width: 100%; }
.mm-liste { grid-template-columns: minmax(0, 1fr); }
}
#leistungen { overflow-x: clip; }
.quer-laeuft .karten-buehne .karten { overflow: visible; scroll-snap-type: none; }
.quer-laeuft .karten-buehne .karten-pfeile { visibility: hidden; }
.bk-galerie-paar .karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--raum-2); overflow: visible; }
@media (min-width: 1280px) {
.menue-raster { --menue-unter-b: 15rem; grid-template-columns: max-content minmax(0, var(--menue-unter-b)) minmax(0, 1fr); grid-template-rows: repeat(var(--menue-zeilen), auto) auto 1fr; align-items: center; column-gap: var(--menue-raster-luft); row-gap: clamp(14px, 1.8vw, 26px); }
.menue-text, .menue-liste, .menue-gruppe { display: contents; }
.menue-punkt { grid-column: 1; justify-self: start; white-space: nowrap; }
.menue-oben::after, .menue-oben[aria-expanded="true"]::after { transform: none; }
.menue-unter, .menue-gruppe.offen .menue-unter { grid-column: 2; grid-row: 1 / span var(--menue-zeilen); align-self: center; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--raum-3); margin: 0; padding-left: var(--raum-4); border-left: 1px solid var(--linie-hell); opacity: 0; visibility: hidden; transform: translateX(calc(var(--raum-3) * -1)); transition: opacity 0.4s var(--lauf), transform 0.4s var(--lauf), visibility 0.4s; }
.menue-offen .menue-gruppe.offen .menue-unter { opacity: 1; visibility: visible; transform: none; }
.menue-oben[aria-expanded="true"] { color: var(--pink); }
.menue-fuss { grid-column: 1 / 3; grid-row: -3 / -2; align-self: start; }
.menue-raster > .menue-sozial { grid-column: 2; grid-row: -3 / -2; }
}