@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/instrument-sans-latin-wght-normal.woff2') format('woff2-variations'); }
:root {
  --weiss: #ffffff; --creme: #f6f2ea; --blau: #dde8f0; --himmel-oben: #c9dcea; --himmel-mitte: #e4eef5;
  --himmel-tief: #4677b8; --tinte: #1c2632; --tinte-2: #3a4652; --klein: #66717c; --linie: #e3e2dd; --gold: #a07c38; --gold-text: #82622a; --gold-hell: #c9a45c; --nacht: #1f2326; --marine: #1b3a5c; --linie-warm: #dcd6cb;
  --display: "Instrument Sans", system-ui, sans-serif; --text: "Instrument Sans", system-ui, sans-serif;
  --rand: clamp(1.25rem, 5vw, 6rem); --kopf-h: 4.25rem; --abschnitt: clamp(6rem, 12vw, 11rem);
}
* { box-sizing: border-box; }
html { background: var(--weiss); color: var(--tinte); font-family: var(--text); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 1rem); }
@media (max-width: 47.99em) { html { scroll-padding-bottom: 4.5rem; } }
body { margin: 0; font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); line-height: 1.5; }
a { color: inherit; }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { margin: 0 0 1rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; color: var(--gold-text); }
.klein { font-size: 0.9375rem; color: var(--klein); }
.satz-mittel { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(2.3rem, 5.2vw, 4.9rem); line-height: 1.02; letter-spacing: -0.035em; }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: 0 1.5rem; border: 0; border-radius: 2px; background: var(--tinte); color: #fff; text-decoration: none; font-weight: 600; font-size: 1rem; cursor: pointer; transition: transform 0.2s; }
@media (hover: hover) { .knopf:hover { transform: translateY(-2px); } }
.knopf--klein { min-height: 2.75rem; padding: 0 1.15rem; font-size: 0.9375rem; }
.knopf--gold { background: var(--gold-hell); color: #15171a; }
.pille span { transition: transform 0.25s; } .pille:hover span { transform: translateX(4px); }
.zeigen { opacity: 0; transform: translateY(0.5rem); transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.zeigen.is-an { opacity: 1; transform: none; }
.intro { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--weiss); transition: opacity 0.45s ease, visibility 0s linear 0.45s; }
.intro svg { width: clamp(84px, 9vw, 120px); height: auto; overflow: visible; }
.intro path { fill: var(--gold-hell); fill-opacity: 0; stroke: var(--gold-hell); stroke-width: 0.45; stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 0.65s cubic-bezier(0.5, 0, 0.2, 1) forwards, fuellen 0.3s ease 0.5s forwards; }
.intro.is-weg { opacity: 0; visibility: hidden; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes fuellen { to { fill-opacity: 1; stroke-width: 0; } }
.kopf { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--kopf-h); display: flex; align-items: center; gap: 2rem; padding: 0 max(var(--rand), calc((100% - 88rem) / 2)); color: #fff;
  background: linear-gradient(100deg, #163252 0%, #224c78 52%, #36689a 100%); box-shadow: inset 0 -1px 0 rgb(201 164 92 / 0.55), 0 14px 30px -22px rgb(10 25 45 / 0.8); }
.kopf__marke { color: var(--gold-hell); display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; }
.kopf__nav { display: flex; gap: clamp(1.1rem, 2vw, 2rem); margin-left: auto; font-size: clamp(0.95rem, 0.7rem + 0.45vw, 1.0625rem); font-weight: 600; }
.kopf__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: rgb(255 255 255 / 0.94); transition: color 0.2s; }    .kopf__nav a[aria-current] { text-decoration: underline 2px currentColor; text-underline-offset: 0.45em; } .kopf__nav a:hover { color: #fff; }
.kopf__aktion { display: flex; align-items: center; gap: 1.4rem; font-size: clamp(0.95rem, 0.7rem + 0.45vw, 1.0625rem); font-weight: 600; }
.kopf .knopf { box-shadow: 0 6px 18px -8px rgb(0 0 0 / 0.5); transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; }
.kopf__ruf { gap: 0.5rem; font-variant-numeric: tabular-nums; } .kopf__wort { display: none; }
.buehne { position: relative; height: 330vh; }
@media (pointer: coarse) { html:not(.frei):not(.einstieg-kompakt) { scroll-snap-type: y proximity; } }
.buehne__rast { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; scroll-snap-stop: always; }
.buehne__haft { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(28rem, var(--tafel-b, 37%)) 1fr; grid-template-rows: minmax(0, 1fr); --tafel-l: clamp(1.5rem, 3.2vw, 3.75rem); grid-template-areas: "tafel bild"; padding-top: var(--kopf-h); background: var(--creme); }
.bild { position: relative; grid-area: bild; overflow: hidden; background: var(--himmel-tief); }
.bild__rahmen { position: absolute; inset: 0; }
.bau { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
.quellen { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.bau__kante { stroke: #e8c77f; stroke-width: 3.2; opacity: 0; filter: drop-shadow(0 0 4px rgb(255 236 190 / 0.8)); }
.bau__mass { opacity: calc(var(--an, 0) * var(--bleibt, 1)); transition: opacity 0.3s; }
.bau__mass text { font-family: var(--text); font-weight: 600; font-size: var(--mass-gr, 30px); letter-spacing: -0.01em; fill: #fff; }
.bau__mass rect { fill: rgb(14 30 52 / 0.82); }
.bild__grund { display: none; }
.bild::before { content: ""; position: absolute; inset: auto 0 0; z-index: 2; height: calc(var(--raus, 0) * 55%); background: linear-gradient(180deg, rgb(246 242 234 / 0), rgb(246 242 234 / 0.85) 70%, var(--creme)); pointer-events: none; }
.buehne.verlaesst { --bleibt: 0; }
@media (min-width: 90em) { .buehne__haft { --tafel-l: max(var(--rand), calc((100vw - 88rem) / 2)); --tafel-b: max(37%, calc(var(--tafel-l) + 34rem)); } }
.einstieg__tafel { grid-area: tafel; display: flex; flex-direction: column; min-height: 0; padding: clamp(1.25rem, 4vh, 3rem) clamp(1.25rem, 2.6vw, 3.25rem) clamp(1rem, 3vh, 2rem) var(--tafel-l); color: var(--tinte); }
.versprechen { margin-top: auto; }
.einstieg__titel { margin: 0; font-family: var(--text); font-weight: 700; font-size: clamp(3rem, min(4.7vw, 9vh), 5.5rem); line-height: 0.98; letter-spacing: -0.04em; color: var(--marine); text-wrap: balance; }
.einstieg__titel .einstieg__text { display: block; margin-top: 1rem; font-size: clamp(1.125rem, 1.35vw, 1.375rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.005em; color: var(--tinte-2); text-wrap: balance; }
.kontakt { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-top: clamp(1.25rem, 3.6vh, 2.25rem); }
.kontakt .knopf { min-height: 3.25rem; padding: 0 1.75rem; font-size: 1.0625rem; font-weight: 600; white-space: nowrap; box-shadow: 0 14px 30px -16px rgb(10 25 45 / 0.55); }
.kontakt__vertrauen { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--tinte-2); text-wrap: balance; }
.ganz { white-space: nowrap; }
.kontakt__check, .kapitel__check { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; font-size: 1rem; font-weight: 600; color: var(--tinte); text-decoration: underline; text-decoration-color: var(--gold-hell); text-decoration-thickness: 2px; text-underline-offset: 0.32em; }
.kontakt__check span, .kapitel__check span { transition: transform 0.25s; } .kontakt__check:hover span, .kapitel__check:hover span { transform: translateX(4px); }
.kontakt__check { display: none; }
.kapitel { display: grid; margin: clamp(1.5rem, 5vh, 4rem) 0 auto; padding: 0; max-width: 30rem; }
.kapitel__seite { grid-area: 1 / 1; align-self: start; display: flex; flex-direction: column; align-items: flex-start; padding: 1.1rem 1.35rem 1.15rem; border-radius: 0.9rem; background: #fff; box-shadow: 0 0 0 1px var(--linie-warm), 0 18px 36px -28px rgb(20 33 46 / 0.5); opacity: 0; visibility: hidden; transform: translateY(0.4rem); transition: opacity 0.2s, visibility 0s linear 0.2s, transform 0.2s; }
.kapitel__seite.is-an { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s 0.2s, visibility 0s 0.2s, transform 0.65s 0.2s cubic-bezier(0.25, 1, 0.5, 1); }
.kapitel__seite > * { margin: 0; }
.kapitel__marke { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em; color: var(--gold-text); }
.kapitel__titel { margin-top: 0.25rem; font-weight: 700; font-size: clamp(1.3rem, 1.5vw, 1.55rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--tinte); text-wrap: balance; }
.kapitel__satz { margin-top: 0.35rem; max-width: 32rem; font-size: 0.9375rem; line-height: 1.5; color: var(--tinte-2); text-wrap: pretty; }
.kapitel__check { margin-top: 0.1rem; min-height: 2.75rem; font-size: 0.9375rem; }
.steuerung { grid-area: bild; z-index: 3; align-self: start; justify-self: end; display: flex; flex-direction: column; align-items: center; gap: 0; max-width: calc(100% - 2rem); margin: clamp(0.75rem, 2.4vh, 1.25rem) max(1rem, var(--rand), calc((100vw - 88rem) / 2)) 0 1rem; padding: 0.3rem 0.3rem 0.05rem; border-radius: 1rem; background: rgb(246 242 234 / 0.95); box-shadow: 0 16px 34px -20px rgb(10 25 45 / 0.65); transition: opacity 0.2s, background-color 0.25s, box-shadow 0.25s; }
.stufen { display: flex; gap: 0.2rem; }
.stufen button { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 3.5rem; min-height: 2.75rem; padding: 0.4rem 0.4rem 0.35rem; border: 0; border-radius: 0.7rem; background: none; color: var(--tinte-2); font: 600 0.8125rem/1.1 var(--text); cursor: pointer; transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.stufen button svg { width: 2.5rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.stufen button svg .boden { stroke-width: 1.2; opacity: 0.55; }
.stufen button svg .neu { fill: rgb(201 164 92 / 0.38); stroke: var(--gold); stroke-width: 1.3; }
@media (hover: hover) { .stufen button:hover { color: var(--tinte); background: rgb(255 255 255 / 0.6); } }
.stufen button.is-an { background: #fff; color: var(--marine); box-shadow: 0 0 0 1px var(--linie-warm), 0 8px 18px -12px rgb(20 33 46 / 0.45); }
.stufen button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ueberspringen { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem; padding: 0 0.15rem; color: var(--tinte-2); font: 600 0.8125rem/1 var(--text); text-decoration: underline; text-decoration-color: var(--linie-warm); text-decoration-thickness: 1.5px; text-underline-offset: 0.35em; white-space: nowrap; transition: text-decoration-color 0.2s; }
@media (hover: hover) { .ueberspringen:hover { color: var(--tinte); text-decoration-color: var(--gold-hell); } }
.ueberspringen:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.kein-js .ueberspringen { display: none; }
.buehne.verlaesst .steuerung { opacity: 0; pointer-events: none; }
@media (max-height: 45em) { .einstieg__tafel { padding-top: clamp(1rem, 3vh, 1.75rem); } .kontakt { gap: 0.5rem; } .kontakt .knopf { min-height: 3rem; font-size: 1rem; } .kontakt__vertrauen { font-size: 0.9375rem; } }
@media (max-width: 70em) { .kontakt .knopf { padding: 0 1.35rem; font-size: 1rem; } }
@media (min-width: 48em) and (min-height: 36em) and (orientation: landscape) {
  .buehne__haft { --aussage: clamp(2.5rem, min(4.3vw, 8vh), 4.4rem); }
  .einstieg__tafel { display: grid; align-content: center; }
  .versprechen, .kapitel { grid-area: 1 / 1; }
  .versprechen { margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
  .einstieg__titel { padding-top: 2.1rem; min-height: var(--aussage-h, 0px); font-size: var(--aussage); line-height: 1; transition: opacity 0.2s, visibility 0s linear 0.2s; }
  .js .buehne__haft:not([data-zustand="0"]) .einstieg__titel { opacity: 0; visibility: hidden; }
  .buehne__haft[data-zustand="0"] .einstieg__titel { transition: opacity 0.45s 0.2s, visibility 0s 0.2s; }
  .einstieg__titel .einstieg__text, .kapitel__satz { max-width: 27rem; margin-top: 1.1rem; font-size: clamp(1.125rem, 1.3vw, 1.3125rem); font-weight: 400; line-height: 1.45; letter-spacing: normal; color: var(--tinte-2); text-wrap: pretty; }
  .einstieg__titel .einstieg__text { text-wrap: balance; }
  .kontakt { margin-top: clamp(1.5rem, 4vh, 2.5rem); }
  .kapitel { align-self: start; margin: 0; max-width: 30rem; }
  .kapitel__seite { padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .kapitel__seite:first-child { display: none; }
  .kapitel__marke { display: flex; align-items: center; gap: 0.75rem; height: 1.25rem; margin-bottom: 0.85rem; font-size: 0.9375rem; line-height: 1.25rem; }
  .kapitel__marke::before { content: ""; flex: none; width: 1.75rem; height: 1px; background: currentColor; }
  .kapitel__titel { margin-top: 0; font-size: var(--aussage); line-height: 1; letter-spacing: -0.04em; color: var(--marine); }
  .kapitel__check { display: none; }
  .einstieg__titel .zeile { display: block; }
}
@media (max-width: 47.99em), (max-height: 35.99em), (orientation: portrait) {
  .buehne__haft { display: flex; flex-direction: column; height: max(100svh, var(--haft-h, 0px)); overflow: hidden; overflow: clip; }
  .bild { position: absolute; inset: var(--kopf-h) 0 0; }
  .js .bild::after { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: calc(var(--band, 60svh) + 1.25rem); background: linear-gradient(180deg, var(--creme), var(--creme) calc(100% - 1.25rem), rgb(246 242 234 / 0)); pointer-events: none; transition: height 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
  .steuerung { order: -1; align-self: stretch; justify-self: stretch; position: sticky; top: var(--kopf-h); z-index: 4; flex-direction: column; flex-wrap: nowrap; gap: 0.1rem; max-width: none; margin: 0; padding: 0.45rem 0.5rem 0.1rem; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .buehne__haft.geschoben .steuerung { background: var(--creme); box-shadow: 0 12px 20px -16px rgb(10 24 46 / 0.35); }
  .stufen { width: 100%; max-width: 26rem; justify-content: space-between; }
  .stufen button { flex: 1; min-width: 0; padding: 0.35rem 0.25rem 0.3rem; }
  .einstieg__tafel { position: relative; z-index: 3; display: grid; padding: 0.75rem var(--rand) 0; text-align: center; }
  .versprechen, .kapitel { grid-area: 1 / 1; }
  .versprechen { transition: opacity 0.2s, visibility 0s linear 0.2s; }
  .js .buehne__haft:not([data-zustand="0"]) .versprechen { opacity: 0; visibility: hidden; }
  .buehne__haft[data-zustand="0"] .versprechen { transition: opacity 0.45s 0.2s, visibility 0s 0.2s; }
  .kapitel { margin: 0; padding: 0; align-self: start; }
  .versprechen { margin-top: 0; }
  .kapitel__marke { justify-content: center; } .kapitel__marke::before { content: none; }
  .kapitel__seite { align-self: start; align-items: center; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .kapitel { max-width: none; }
  .kapitel__seite:first-child { display: none; }
  .kontakt { align-items: center; gap: 0.55rem; margin-top: 1.1rem; }
  .kontakt__check { display: inline-block; }
  .kontakt__check, .kapitel__check { min-height: 0; padding: 0.7rem 0; }
  .kontakt__check span, .kapitel__check span { display: inline-block; }
  .einstieg__titel { font-size: 3rem; }
  .einstieg__titel .einstieg__text { margin-top: 0.7rem; font-size: 1.0625rem; }
  .kontakt .knopf { min-height: 3.2rem; font-size: 1rem; padding: 0 1.5rem; }
  .kontakt__vertrauen { max-width: 18rem; }
  .kapitel__titel { font-size: 2.15rem; line-height: 1.08; } .kapitel__check { font-size: 1rem; }
  .kapitel__satz { margin-top: 0.6rem; font-size: 1.0625rem; max-width: 22rem; }
  .kapitel__marke { font-size: 0.875rem; }
  .bau__mass text { font-size: var(--mass-gr, 58px); }
  .bau__kante { stroke-width: 5.6; }
  .buehne.kompakt { height: auto; }
  .buehne.kompakt .buehne__haft { position: relative; top: 0; }
  .buehne.kompakt .buehne__rast { display: none; }
}
@media (min-width: 30em) and (orientation: portrait) { .einstieg__titel { font-size: clamp(3rem, 7vw, 4.25rem); } .kapitel__titel { font-size: clamp(2.15rem, 4.6vw, 2.75rem); } }
@media (max-width: 23.5em) { .stufen button { font-size: 0.75rem; } .einstieg__tafel { padding-left: 0.75rem; padding-right: 0.75rem; } .kontakt .knopf { padding: 0 0.95rem; letter-spacing: -0.01em; } }
.warum { display: grid; grid-template-columns: 1fr 3fr; gap: clamp(2rem, 5vw, 6rem); padding: var(--abschnitt) var(--rand); }
.warum .label { padding-top: 0.7rem; }
.woerter span { color: rgb(28 38 50 / 0.5); transition: color 0.3s; }
.woerter span.lit { color: var(--tinte); } .woerter span.lit.gold { color: var(--tinte); font-weight: 700; }
.woerter b { font-weight: inherit; }
.wege { padding: var(--abschnitt) var(--rand); }
.stapel { position: relative; }
.stapel__karte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.stapel__karte + .stapel__karte { margin-top: clamp(3rem, 7vw, 6rem); }
.stapel__karte img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.stapel__karte [data-loop="aufstockung"] img { object-position: 15% 50%; }
.stapel__karte picture, .schluss picture { display: contents; }
.stapel__karte source, .schluss source { display: none; }
.vergleich-rahmen { margin: 0; width: 100%; max-width: 520px; }
.vergleich { --pos: 50%; position: relative; width: 100%; aspect-ratio: 824 / 574; overflow: hidden; touch-action: pan-y; }
.vergleich img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vergleich__vorne { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.vergleich__griff { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px rgb(0 0 0 / 0.3); pointer-events: none; opacity: clamp(0, min(var(--pos-zahl, 50), 100 - var(--pos-zahl, 50)), 1); }
.vergleich__knopf { position: absolute; top: 50%; left: clamp(1.4rem, var(--pos), calc(100% - 1.4rem)); pointer-events: none; }
.vergleich__knopf::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; translate: -50% -50%; border-radius: 50%; background: #fff; color: var(--tinte); font: 700 1rem/1 var(--text); letter-spacing: 0.12em; box-shadow: 0 4px 14px rgb(0 0 0 / 0.3); }
.vergleich__regler { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; background: none; }
.vergleich__regler::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 1px; height: 100%; }
.vergleich__regler::-moz-range-thumb { width: 1px; height: 100%; border: 0; }
.vergleich:has(.vergleich__regler:focus-visible) { outline: 3px solid var(--gold-hell); outline-offset: 4px; }
.vergleich__marke { position: absolute; top: 0.9rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgb(10 24 46 / 0.6); color: #fff; font-size: 0.9375rem; font-weight: 600; pointer-events: none; }
.vergleich__marke { transition: opacity 0.2s; }
.vergleich__marke--links { left: 1rem; opacity: clamp(0, (var(--pos-zahl, 50) - 12) / 8, 1); } .vergleich__marke--rechts { right: 1rem; opacity: clamp(0, (88 - var(--pos-zahl, 50)) / 8, 1); }
.vergleich-rahmen figcaption { margin-top: 0.9rem; font-size: 0.9375rem; color: var(--klein); text-align: center; }
@media (max-width: 47.99em) { .vergleich { aspect-ratio: 1 / 1; } .vergleich img { object-position: 60% 50%; } }
.schritte { list-style: none; margin: 0; padding: 0 0 0 clamp(2.6rem, 4vw, 3.6rem); position: relative; counter-reset: schritt; }
.schritte::before, .schritte::after { content: ""; position: absolute; left: 2.1rem; top: 0.9rem; bottom: 2rem; width: 2px; background: var(--linie); }
.schritte::after { background: var(--gold-hell); transform-origin: top; transform: scaleY(var(--a, 0)); }
.schritt { position: relative; padding-bottom: clamp(2.8rem, 9vh, 6rem); counter-increment: schritt; }
.schritt::before { content: "0" counter(schritt); position: absolute; left: calc(-1 * clamp(2.6rem, 4vw, 3.6rem)); top: 0.3rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--klein); transition: color 0.4s; }
.schritt.is-an::before { color: var(--gold-text); }
.schritt h3 { margin: 0; font-weight: 600; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; }
.schritt p { margin: 0.6rem 0 0; max-width: 34rem; color: var(--tinte-2); }
.check { padding: var(--abschnitt) max(var(--rand), calc((100% - 88rem) / 2)); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 8rem); }
.check__text { margin: 1rem 0 0; color: var(--tinte-2); max-width: 24rem; }
.check__feld { position: relative; scroll-margin-top: calc(var(--kopf-h) + 1rem); min-height: 24rem; }
.check__stand { margin-bottom: 1.8rem; }
.check__kopfzeile { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.6rem; }
.check__zaehler { margin: 0; font-size: 0.9375rem; color: var(--klein); }
.check__schritte { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.check__schritte li { flex: 1; height: 4px; border-radius: 4px; background: var(--linie); transition: background-color 0.4s; }
.check__schritte li.ist-an { background: var(--gold-hell); }
.check__frage { border: 0; margin: 0; padding: 0; min-width: 0; display: none; }
.check__frage.ist-an { display: block; animation: einschieben 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes einschieben { from { opacity: 0; transform: translateX(1.5rem); } }
.check__frage legend { padding: 0; margin-bottom: 1.4rem; font-weight: 700; font-size: clamp(1.75rem, 2.6vw, 2.75rem); line-height: 1.1; letter-spacing: -0.025em; }
.check__wahl { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--linie); }
.check__wahl button { min-height: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; padding: 1rem 0; border: 0; border-bottom: 1px solid var(--linie); background: none; font-size: 1.125rem; font-weight: 400; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.check__wahl--laender { grid-template-columns: repeat(auto-fill, minmax(9.75rem, 1fr)); column-gap: 1.5rem; }
.check__wahl--laender button::after { content: none; }
.check__wahl button::after { content: "\2192"; color: var(--gold); opacity: 0; transition: opacity 0.2s, transform 0.25s; }
@media (hover: hover) { .check__wahl button:hover::after { opacity: 1; transform: translateX(4px); } .check__wahl button:hover { color: var(--gold-text); } }
.check__wahl button:focus-visible::after, .check__wahl button:active::after { opacity: 1; transform: translateX(4px); }
.check__wahl button:active { color: var(--gold-text); }
.check__wahl button:focus-visible, .check__zurueck:focus-visible, .check__neu:focus-visible, .check__angaben summary:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }
.check__wahl button[aria-pressed="true"] { color: var(--gold-text); border-bottom-color: var(--gold); }
.check__ergebnis { display: none; }
.check__ergebnis.ist-an { display: grid; gap: 1.8rem; animation: einschieben 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.check__oben { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.check__oben .check__bild { aspect-ratio: 16 / 7; overflow: hidden; } .check__oben .check__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.check__oben:has(.check__bild[hidden]) { grid-template-columns: 1fr; }
.check__oben:focus { outline: none; }
.check__oben:focus-visible { outline: 2px solid var(--b-blau-linie, #36689a); outline-offset: 14px; border-radius: 4px; }
.check__bild { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--creme); }
.check__bild img { width: 100%; height: 100%; object-fit: cover; }
.check__label { margin-bottom: 0.6rem; }
.check__weg { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; font-size: clamp(1.8rem, 2.8vw, 2.8rem); line-height: 1.05; }
.check__satz { margin: 0.9rem 0 0; color: var(--tinte-2); }
.check__untertitel { margin: 0 0 0.8rem; font-weight: 600; }
.check__pruefen ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.check__pruefen li { position: relative; padding-left: 1.4em; color: var(--tinte-2); }
.check__pruefen li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 0.75em; height: 1px; background: var(--gold); }
.check__angaben { border-top: 1px solid var(--linie); padding-top: 1rem; }
.check__angaben summary { min-height: 2.75rem; display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-weight: 600; list-style: none; }
.check__angaben summary::-webkit-details-marker { display: none; }
.check__angaben summary::before { content: "+"; display: grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; border: 1.5px solid currentColor; border-radius: 50%; font-weight: 600; line-height: 1; }
.check__angaben[open] summary::before { content: "–"; }
.check__angaben dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem 1.2rem; margin: 0.8rem 0 0; font-size: 0.9375rem; }
.check__angaben dt { color: var(--klein); } .check__angaben dd { margin: 0; }
.check__hinweis { margin: 0; font-size: 1.0625rem; color: var(--tinte-2); }
.check__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; margin-top: 1.2rem; }
.check__wege { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; padding: 0; list-style: none; }
.check__wege li { padding: 0.35rem 0.8rem; border: 1px solid var(--gold-hell); border-radius: 999px; font-size: 0.9375rem; }
.check__nummer { font-weight: 600; font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; text-decoration: none; border-bottom: 1px solid var(--gold-hell); padding: 0.3rem 0; }
.check__mail { color: var(--tinte-2); text-decoration: underline; text-decoration-color: var(--gold-hell); text-underline-offset: 0.22em; padding: 0.6rem 0; }
.check__neu-zeile { margin: 0; }
.check__aktion .knopf { text-align: center; line-height: 1.25; padding-block: 0.7rem; }
.check__neu, .check__zurueck { min-height: 2.75rem; border: 0; background: none; padding: 0.4rem 0; color: var(--tinte-2); cursor: pointer; }
.check__neu { text-decoration: underline; text-decoration-color: var(--gold-hell); text-underline-offset: 0.22em; }
.check__zurueck { margin: 0; font-size: 0.9375rem; }
.check__anruf { margin: 0.2rem 0 0; flex-basis: 100%; font-size: 1.0625rem; color: var(--tinte-2); }
.check__anruf .check__nummer { font-size: inherit; padding: 0; white-space: nowrap; }
.check__anruf .check__mail { margin-left: 0.3rem; }
.check__warum { margin: 1.1rem 0 0; } .check__warum .check__untertitel { margin-bottom: 0.5rem; font-size: 0.9375rem; color: var(--b-blau, #224c78); }
.check__gruende { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.check__gruende li { position: relative; padding-left: 1.5em; color: var(--tinte); }
.check__gruende li::before { content: ""; position: absolute; left: 0.1em; top: 0.42em; width: 0.7em; height: 0.38em; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); rotate: -45deg; }
.check__zweite { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid rgb(28 38 50 / 0.18); color: var(--tinte-2); }
.check__fertig { margin: 1rem 0 0; max-width: 30rem; color: var(--tinte); }
.check__aktion .knopf { white-space: nowrap; }
@media (max-width: 22em) { .check__aktion .knopf { white-space: normal; } }
.check__zurueck:hover, .check__neu:hover { color: var(--tinte); }
.check__zurueck[hidden] { display: none; }
.check__senden { position: relative; scroll-margin-top: calc(var(--kopf-h) + 1rem); padding: clamp(1.2rem, 2.6vw, 2rem); background: var(--papier-blau, #dce8f1); }
.check__senden-titel { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.75rem); line-height: 1.1; }
.check__senden-text { margin: 0.6rem 0 0; color: var(--tinte-2); }
.check__felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem 1.2rem; margin-top: 1.4rem; }
.check__eingabe { display: grid; gap: 0.35rem; align-content: start; min-width: 0; }
.check__eingabe--breit, .check__eingabe:first-child { grid-column: 1 / -1; }
.check__eingabe label { font-weight: 600; font-size: 0.9375rem; }
.check__eingabe input, .check__eingabe textarea { width: 100%; min-height: 3rem; padding: 0.7rem 0.85rem; border: 1.5px solid rgb(28 38 50 / 0.4); border-radius: 0; background: #fff; color: var(--tinte); font: inherit; font-size: 1.0625rem; line-height: 1.4; }
.check__eingabe textarea { resize: vertical; min-height: 13rem; font-size: 1rem; }
.check__eingabe input:focus-visible, .check__eingabe textarea:focus-visible { outline: 3px solid var(--tinte); outline-offset: 1px; border-color: var(--tinte); }
.check__eingabe [aria-invalid="true"] { border-color: #a12a22; }
.check__fehler { margin: 0; font-size: 0.9375rem; color: #a12a22; }
.check__fehler:empty { display: none; }
.check__falle { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.check__datenschutz { margin: 1.1rem 0 0; font-size: 0.9375rem; color: var(--tinte-2); }
.check__datenschutz a { color: var(--tinte); text-decoration-color: var(--b-blau-linie, #36689a); text-underline-offset: 0.22em; }
.check__senden-aktion { margin-top: 1.1rem; }
.check__senden[aria-busy="true"] .knopf { opacity: 0.75; cursor: progress; }
.check__meldung { margin-top: 1rem; padding: 0.9rem 1rem; border-left: 3px solid #a12a22; background: #fff; }
.check__meldung p, .check__meldung ul { margin: 0; } .check__meldung ul { margin-top: 0.4rem; padding-left: 1.2rem; }
.check__meldung a { color: var(--tinte); font-weight: 600; white-space: nowrap; }
.check__meldung:focus, .check__danke:focus { outline: none; }
.check__danke { margin-top: 0.8rem; }
.check__danke-titel { margin: 0; font-weight: 700; font-size: 1.25rem; }
.check__danke-text { margin: 0.4rem 0 0; color: var(--tinte-2); }
.check__danke-text strong { color: var(--tinte); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; }
.fragen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 8rem); padding: var(--abschnitt) max(var(--rand), calc((100% - 88rem) / 2)); }
.fragen__kopf { position: sticky; top: 24vh; align-self: start; }
.fragen__liste { border-bottom: 1px solid var(--linie); interpolate-size: allow-keywords; }
.fragen details { border-top: 1px solid var(--linie); }
.fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 2rem; padding: 1.5rem 0; font-size: 1.5rem; font-weight: 600; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary h3 { margin: 0; font: inherit; }
.fragen summary::after { content: ""; flex: none; width: 1rem; height: 1rem; margin-top: 0.45rem; background: linear-gradient(var(--tinte), var(--tinte)) center / 100% 2px no-repeat, linear-gradient(var(--tinte), var(--tinte)) center / 2px 100% no-repeat; transition: transform 0.4s; }
.fragen details[open] summary::after { transform: rotate(45deg); background: linear-gradient(var(--gold), var(--gold)) center / 100% 2px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 2px 100% no-repeat; }
.fragen details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 0.5s allow-discrete; }
.fragen details[open]::details-content { block-size: auto; }
.fragen details > div { padding: 0 0 1.6rem; max-width: 40rem; color: var(--tinte-2); }
.fragen details > div p { margin: 0 0 0.9rem; }
.schluss { --kamin: 0.515; --bh: max(56.25vw, 55vh); --luft: clamp(3rem, 9vh, 6.5rem); position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; overflow: hidden; background: #0b3b92; }
.schluss__bild { order: 2; flex: 1 0 var(--bh); width: 100%; height: auto; min-height: var(--bh); margin-top: calc(var(--luft) - var(--kamin) * var(--bh)); object-fit: cover; object-position: 50% 100%; transform: scale(var(--zs, 1)); transform-origin: 50% calc(var(--kamin) * 100%); -webkit-mask-image: linear-gradient(180deg, transparent, transparent 15%, #000 46%); mask-image: linear-gradient(180deg, transparent, transparent 15%, #000 46%); }
.schluss::after { content: none; }
.schluss .label { color: #d9b878; }
.schluss__titel { margin: 0 auto; max-width: 14ch; font-family: var(--display); font-weight: 700; font-size: clamp(2.3rem, 5.2vw, 4.9rem); line-height: 1.02; letter-spacing: -0.035em; }
.fuss { background: var(--nacht); color: #b4b9be; padding: 2.4rem var(--rand); font-size: 1rem; }
.fuss__oben { display: grid; grid-template-columns: auto 1fr auto auto; gap: 2.5rem; align-items: center; }
.fuss__marke { color: var(--gold-hell); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.6rem; }
.fuss a { text-decoration: none; } .fuss a:hover { color: #fff; }
.ruf { display: none; }
@media (max-width: 47.99em) {
  .schluss { --bh: max(100vw, 50vh); padding-bottom: 0; }
  .schluss__bild { -webkit-mask-image: linear-gradient(180deg, transparent, transparent 12%, #000 44%); mask-image: linear-gradient(180deg, transparent, transparent 12%, #000 44%); }
}
@media (max-width: 47.99em) {
  :root { --kopf-h: 3.6rem; }
  .kopf { padding: 0 1.1rem; gap: 1rem; }
  .kopf__nav { display: none; } .kopf__nr { display: none; } .kopf__wort { display: inline; } .kopf__ruf svg { display: none; }
  .kopf__aktion { margin-left: auto; }
  [data-raum=kinder] { --x: 31.8%; --y: 39%; } [data-raum=arbeit] { --x: 59.6%; --y: 40.5%; } [data-raum=kueche] { --x: 17%; --y: 55%; }
  .warum, .fragen, .check { grid-template-columns: 1fr; gap: 1rem; }
  .satz-gross { font-size: 2.5rem; } .satz-mittel { font-size: 2.75rem; }
  .stapel__karte { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .stapel__karte img { aspect-ratio: 16 / 10; height: auto; }
  .stapel__karte [data-loop="aufstockung"] img { object-position: 50% 22%; }
  .fragen__kopf { position: static; margin-bottom: 1.5rem; }
  .team__partner img { height: 1.7rem; } .team__partner img[alt^="Dachkönig"] { height: 2.5rem; }
  .check__oben { grid-template-columns: 1fr; } .check__bild { aspect-ratio: 16 / 9; }
  .fuss__oben { grid-template-columns: 1fr; gap: 1.2rem; }
  .ruf { display: flex; justify-content: center; position: fixed; left: 0; right: 0; bottom: 0; padding: 0.6rem var(--rand) calc(0.6rem + env(safe-area-inset-bottom)); background: rgb(19 41 74 / 0.96); box-shadow: 0 -10px 24px -14px rgb(0 0 0 / 0.5); z-index: 25; transform: translateY(150%); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .ruf.ist-sichtbar { transform: none; }
  .ruf .knopf { width: 100%; max-width: 26rem; justify-content: center; min-height: 2.9rem; white-space: nowrap; box-shadow: none; }
  body { padding-bottom: calc(4.2rem + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro { display: none; } .kapitel__seite, .kapitel__seite.is-an { transition: none; transform: none; }
  .bild__rahmen, .stufen, .ueberspringen, .bild::after, .kapitel, .kopf, .stufen button, .woerter span, .vergleich__marke, .schritt::before, .check__schritte li, .fragen summary::after, .fragen details::details-content, .bau__mass, .knopf, .textpfeil span, .kontakt__check span, .kapitel__check span, .projekt__gross img, .ruf, .check__wahl button, .check__wahl button::after { transition: none; }
  .check__frage.ist-an, .check__ergebnis.ist-an { animation: none; }
  .zeigen { opacity: 1; transform: none; }
}
.buehne { overflow-x: clip; }
.sprunglink { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.7rem 1rem; border-radius: 6px; background: var(--tinte); color: #fff; text-decoration: none; }
.sprunglink:focus { top: 1rem; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--gold-hell); outline-offset: 3px; }
.kein-js .intro { display: none; }
.kein-js .buehne { height: 100vh; }
.kein-js .quellen { position: relative; grid-area: bild; width: auto; height: auto; opacity: 1; overflow: hidden; }
.kein-js .quellen picture + picture { display: none; }
.kein-js .quellen img { width: 100%; height: 100%; object-fit: cover; }
.kein-js .kapitel { opacity: 1; }
.kein-js .stufen { display: none; }
@media (max-width: 47.99em), (max-height: 35.99em), (orientation: portrait) {
  .kein-js .buehne, .kein-js .buehne__haft { position: relative; height: auto; }
  .kein-js .quellen { position: relative; inset: auto; order: 1; margin-top: 1.25rem; }
  .kein-js .bild { display: none; }
  .kein-js .quellen img { height: auto; aspect-ratio: 4 / 3; object-position: 58% 15%; }
}
.kein-js .check { display: none; }
.kein-js .zeigen { opacity: 1; transform: none; }
.unterseite .ruf { transform: none; }
.unterseite main { padding: calc(var(--kopf-h) + clamp(2.5rem, 6vw, 5rem)) var(--rand) clamp(3rem, 8vw, 6rem); }
.inhalt--schmal { max-width: 44rem; }
.unterseite h1 { margin: 0 0 1.2rem; font-family: var(--display); font-weight: 700; letter-spacing: -0.03em; font-size: clamp(1.9rem, 4vw, 3.4rem); hyphens: auto; overflow-wrap: break-word; line-height: 1.08; letter-spacing: -0.015em; }
.unterseite h2 { margin: 2.4rem 0 0.8rem; font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.15; }
.unterseite h3 { margin: 1.6rem 0 0.5rem; font-size: 1.05rem; }
.unterseite main p, .unterseite main li { color: var(--tinte-2); }
.unterseite main ul { padding-left: 1.2rem; }
@media (max-width: 47.99em) { .fuss { padding-bottom: 6.5rem; } }
.ueberzeile { margin: 0 0 1rem; font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.02em; color: var(--gold-text); }
.einleitung { font-size: 1.15em; color: var(--tinte-2); }
.textlink { color: var(--tinte); text-decoration: underline; text-decoration-color: var(--gold-hell); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
.unterseite .kopf { background: linear-gradient(100deg, #163252, #224c78 52%, #36689a); }
@media (max-width: 47.99em) { .leiste-an:has(.ruf.ist-sichtbar:not(.ruf--weg)) .kopf .knopf { visibility: hidden; } }
.fuss a { display: inline-block; padding: 0.7rem 0; }
.fuss__ort { color: #8d949b; }
.textpfeil { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; margin-top: 1.2rem; color: var(--tinte); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-hell); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.textpfeil span { transition: transform 0.25s; } .textpfeil:hover span { transform: translateX(4px); }
@media (max-width: 47.99em) { .ruf.ruf--weg { transform: translateY(150%); } }
.projekt { max-width: 64rem; margin: clamp(2.6rem, 5vw, 4rem) auto 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 3.5vw, 3.5rem); align-items: start; text-align: left; }
.projekt figure { margin: 0; }
.projekt__gross { display: block; overflow: hidden; background: var(--creme); cursor: zoom-in; }
.projekt__gross img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.projekt__gross:hover img { transform: scale(1.025); }
.projekt figcaption { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--tinte-2); }
.projekt figcaption b { margin-right: 0.4rem; color: var(--tinte); font-weight: 600; }
@media (max-width: 47.99em) { .vergleich-rahmen { max-width: none; } }
.lupe { max-width: min(92vw, 1100px); max-height: 92vh; padding: 0; border: 0; border-radius: 10px; background: #111; overflow: hidden; }
.lupe::backdrop { background: rgb(10 14 18 / 0.82); }
.lupe img { display: block; max-width: 100%; max-height: 86vh; width: auto; height: auto; margin: 0 auto; }
.lupe p { margin: 0; padding: 0.7rem 1rem; color: #d7dadd; font-size: 0.9375rem; }
.lupe button { position: absolute; top: 0.6rem; right: 0.6rem; min-width: 2.75rem; min-height: 2.75rem; border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.92); color: var(--tinte); font-size: 1.3rem; cursor: pointer; }
.kontaktpunkt { margin-top: 1.8rem; }
.kontaktpunkt p { margin: 0.8rem 0 0; max-width: 24rem; font-size: 0.9375rem; color: var(--tinte-2); }
.kontaktpunkt p a { color: var(--tinte); text-decoration-color: var(--gold-hell); text-underline-offset: 0.25em; }
.check__direkt { margin: 1rem 0 0; font-size: 0.9375rem; color: var(--tinte-2); }
.check__direkt a { color: var(--tinte); font-weight: 600; text-decoration-color: var(--gold-hell); text-underline-offset: 0.25em; }
.check__text { margin-top: clamp(2.5rem, 3.5vw, 3.5rem); }
a, button, summary, input { -webkit-tap-highlight-color: transparent; }
.fragen__mail { margin: 0.4rem 0 0; font-size: 0.9375rem; color: var(--tinte-2); }
.fragen__mail a { text-underline-offset: 0.25em; }
.fragen__mail a { color: var(--tinte); text-decoration-color: var(--gold-hell); }
.ruf .knopf svg { margin-right: 0.5rem; flex: none; }
@media (min-width: 48em) {
  .team__text > .label { grid-area: label; } .team__text > h2 { grid-area: titel; } .team__partner { grid-area: partner; }
  .team__text > .team__absatz { grid-area: absatz; margin-top: 0.4rem; } .team__zeile { grid-area: zeile; margin-bottom: 2.4rem; }
}
.knopf svg { margin-right: 0.55rem; flex: none; }
@media (max-width: 47.99em) { .knopf svg { display: none; } .ruf .knopf svg { display: inline; } }
@media (max-width: 47.99em), (max-height: 35.99em), (orientation: portrait) { .bild { background: linear-gradient(180deg, #93b6d6, #a3c2dc calc(var(--naht-pos, 70%) * 0.35), var(--naht-farbe, #7099ca) calc(var(--naht-pos, 70%) * 0.72), var(--naht-farbe, #7099ca) var(--naht-pos, 70%)); } }
a[href^="tel:"]:not(.knopf):not(.textpfeil) { white-space: nowrap; }
@media (min-width: 48em) and (max-width: 63.99em) { .fuss__oben { grid-template-columns: auto 1fr; row-gap: 0.4rem; } .fuss__oben ul { grid-column: 2; } }