@font-face { font-family: "Schild"; src: url("schrift/bricolage-schild.woff2") format("woff2"); font-weight: 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Text"; src: url("schrift/bricolage-text.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
:root {
color-scheme: light;
--grund: #EAEFE8; --grund-2: #DEE6DB; --flaeche: #F6F8F3; --text: #13201C; --leise: #3F4D47; --linie: #B4C2B3;
--email: #10372F; --email-2: #174A3F; --gold: #7A5C1A; --gold-hell: #C9A45C; --licht: #FFD27A; --licht-hell: #FFF3D6;
--tinte: #16142A; --knopf: #10372F; --knopf-text: #FFF3D6; --knopf-hover: #174A3F; --fokus: #10372F; --fehler: #9E2A1F;
--band: #10372F; --band-text: #F5EEE2; --band-leise: #CFE0D6;
--innen-0: #FFF1D2; --innen-1: #F2CE8C; --innen-text: #16142A; --innen-leise: #5A4630;
--schrift-schild: "Schild", "Arial Narrow", "Roboto Condensed", sans-serif;
--schrift-text: "Text", system-ui, -apple-system, "Segoe UI", sans-serif;
--t-13: .8125rem; --t-14: .875rem; --t-15: .9375rem; --t-16: 1rem; --t-17: 1.0625rem; --t-20: 1.25rem; --t-24: 1.5rem;
--rand: clamp(16px, 4.4vw, 64px);
--links: max(var(--rand), calc((100vw - 1240px) / 2 + var(--rand)));
--kopf: 60px;
--leiste-h: 68px;
--t-tipp: 120ms; --t-klein: 180ms; --t-mittel: 280ms; --t-gross: 600ms;
--k-aus: cubic-bezier(.23, 1, .32, 1);
--k-inout: cubic-bezier(.77, 0, .175, 1);
--k-feder: cubic-bezier(.34, 1.4, .64, 1);
}
:root[data-theme="dark"] {
color-scheme: dark;
--grund: #0E1636; --grund-2: #121C44; --flaeche: #18224E; --text: #F5EEE2; --leise: #C3C6DD; --linie: #34407A;
--gold: #D9B66E; --knopf: #FFD27A; --knopf-text: #16142A; --knopf-hover: #FFDF9E; --fokus: #FFD27A; --fehler: #FFB4A6;
--band: #0A1029; --band-text: #F5EEE2; --band-leise: #C3C6DD;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--grund: #0E1636; --grund-2: #121C44; --flaeche: #18224E; --text: #F5EEE2; --leise: #C3C6DD; --linie: #34407A;
--gold: #D9B66E; --knopf: #FFD27A; --knopf-text: #16142A; --knopf-hover: #FFDF9E; --fokus: #FFD27A; --fehler: #FFB4A6;
--band: #0A1029; --band-text: #F5EEE2; --band-leise: #C3C6DD;
}
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--grund); scroll-padding-top: calc(var(--kopf) + 12px); }
body { margin: 0; font: 400 var(--t-17)/1.5 var(--schrift-text); color: var(--text); background: var(--grund); overflow-x: clip; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 16px; border-radius: 8px; background: var(--knopf); color: var(--knopf-text); font-weight: 700; text-decoration: none; transition: transform var(--t-klein) var(--k-aus); }
.skip-link:focus { transform: translateY(72px); }
.rahmen { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--rand); }
.ganz { white-space: nowrap; }
.zeile { display: block; }
h2 { font: 800 clamp(2.25rem, 7vw, 4.5rem)/.95 var(--schrift-schild); font-stretch: 82%; letter-spacing: -.005em; text-wrap: balance; }
h3 { font-size: var(--t-20); line-height: 1.25; font-weight: 700; }
.kopf { position: sticky; top: 0; z-index: 50; height: var(--kopf); background: var(--grund); border-bottom: 1px solid transparent; transition: background-color var(--t-mittel) ease, border-color var(--t-mittel) ease; }
.kopf.ist-gerollt { border-bottom-color: var(--linie); }
.kopf-innen { height: 100%; display: flex; align-items: center; gap: 12px; }
.marke { font: 800 1.625rem/1 var(--schrift-schild); font-stretch: 80%; letter-spacing: .005em; text-decoration: none; margin-right: auto; padding: 9px 0; }
.menue { display: none; position: relative; width: 48px; height: 48px; margin-right: -8px; border: 0; border-radius: 12px; background: none; color: inherit; cursor: pointer; }
.menue span { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 1px; background: currentColor; transition: transform var(--t-mittel) var(--k-aus); }
.menue span:first-child { top: 19px; } .menue span:last-child { top: 27px; }
.menue[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menue[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.navigation { display: flex; align-items: center; gap: 8px; }
.nav-links { display: flex; gap: 8px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: var(--t-15); }
.farbmodus, .bewegung { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 22px; background: none; color: inherit; font: 600 var(--t-15)/1 var(--schrift-text); cursor: pointer; }
.js .farbmodus { display: inline-flex; }
.js .bewegung:not([hidden]) { display: inline-flex; }
.farbmodus svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } 
.farbmodus .gefuellt { fill: currentColor; stroke: none; }
.farbmodus-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bewegung-knopf { position: relative; flex: none; width: 40px; height: 24px; border-radius: 12px; background: color-mix(in srgb, var(--text) 26%, transparent); transition: background-color var(--t-klein) ease; }
.bewegung-knopf::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--grund); box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: transform var(--t-klein) var(--k-aus); }
.bewegung[aria-pressed="true"] .bewegung-knopf { background: var(--knopf); }
.bewegung[aria-pressed="true"] .bewegung-knopf::after { transform: translateX(16px); }
html:has(.leiste) .kopf-anfrage, html:has(.leiste) .nav-anfrage { display: none; }
.kopf-anfrage { display: none; }
@media (hover: hover) and (pointer: fine) {
.nav-links a:hover, .farbmodus:hover, .bewegung:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
}
.bewegt:has(.gang) .kopf:not(.fest) { background: transparent; border-bottom-color: transparent; }
.bewegt:has(.gang) .kopf.fest { transition: border-color var(--t-mittel) ease; }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 2px solid var(--knopf); border-radius: 999px; font: 700 var(--t-17)/1.1 var(--schrift-text); text-decoration: none; text-align: center; cursor: pointer; transition: transform var(--t-tipp) var(--k-aus), background-color var(--t-klein) ease, color var(--t-klein) ease, box-shadow var(--t-mittel) ease; }
.knopf:active { transform: scale(.97); }
.knopf-voll { background: var(--knopf); color: var(--knopf-text); }
.knopf-leer { background: transparent; color: var(--text); border-color: currentColor; }
@media (hover: hover) and (pointer: fine) {
.knopf-voll:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); }
.knopf-leer:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
}
.gang { position: relative; margin-top: calc(-1 * var(--kopf)); }
.buehne {
position: relative; display: grid; grid-template: "held" auto "innen" auto / 100%;
--boden: calc(var(--leiste-h) + 26px);
--haus-w: min(84vw, 430px);
--h-0: #0B1230; --h-1: #1B2858; --h-2: #45548F; --h-3: #6E7CB6; --fern: #161E48; --fern-licht: #E2AE63;
--wand: #283063; --wand-hell: #323C77; --wand-tief: #1C2350; --rahmen: #121838; --gesims: #1A2148; --sims: #3A4482;
--og-glas: #121A3D; --og-an: #E8B468; --laden: #161C3E; --holz: #3A2C45; --holz-hell: #4A3956; --messing: #C9A45C;
--roll-a: #5C6488; --roll-b: #4A5277; --roll-c: #3B4266; --pflaster: #171D42; --kante: #39437A;
--n-l: #1E2652; --n-r: #222A58; --n-dach: #151B40; --szene-text: #F5EEE2; --szene-leise: #C3C6DD; --hinweis: #FFD27A;
--glanz: rgb(255 255 255 / .07); --licht-an: 1; --tag: 0;
}
:root:not([data-theme="dark"]) .buehne { 
--h-0: #8DB5D3; --h-1: #BCD3E2; --h-2: #E3E5DE; --h-3: #F3E3C7; --fern: #A9BCC6; --fern-licht: #F4F1E8;
--wand: #E3CFAF; --wand-hell: #EEDFC6; --wand-tief: #CDB28C; --rahmen: #2F3E37; --gesims: #C9AE85; --sims: #F3E8D5;
--og-glas: #5F7884; --og-an: #8EA9B5; --laden: #2A3833; --holz: #6B3E2E; --holz-hell: #85503C; --messing: #B08A3A;
--roll-a: #9AA2A8; --roll-b: #858D94; --roll-c: #727A82; --pflaster: #A7A194; --kante: #D6CFC2;
--n-l: #C3D2CA; --n-r: #DDB9A1; --n-dach: #8E5B49; --szene-text: #13201C; --szene-leise: #33413B; --hinweis: #10372F;
--glanz: rgb(255 255 255 / .22); --licht-an: 0; --tag: 1;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) .buehne {
--h-0: #0B1230; --h-1: #1B2858; --h-2: #45548F; --h-3: #6E7CB6; --fern: #161E48; --fern-licht: #E2AE63;
--wand: #283063; --wand-hell: #323C77; --wand-tief: #1C2350; --rahmen: #121838; --gesims: #1A2148; --sims: #3A4482;
--og-glas: #121A3D; --og-an: #E8B468; --laden: #161C3E; --holz: #3A2C45; --holz-hell: #4A3956; --messing: #C9A45C;
--roll-a: #5C6488; --roll-b: #4A5277; --roll-c: #3B4266; --pflaster: #171D42; --kante: #39437A;
--n-l: #1E2652; --n-r: #222A58; --n-dach: #151B40; --szene-text: #F5EEE2; --szene-leise: #C3C6DD; --hinweis: #FFD27A;
--glanz: rgb(255 255 255 / .07); --licht-an: 1; --tag: 0;
}
}
.himmel, .szene { grid-area: held; }
.innen-rahmen { grid-area: innen; position: relative; }
.himmel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 70% at 50% 100%, transparent 55%, rgb(5 8 30 / calc(.45 * var(--licht-an))) 100%), linear-gradient(180deg, transparent 55%, rgb(255 190 120 / calc(.10 * var(--licht-an))) 85%, transparent); }
.himmel { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--h-0) 0%, var(--h-1) 38%, var(--h-2) 74%, var(--h-3) 100%); }
.szene { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: max(620px, var(--basis, 100svh)); padding-top: var(--kopf); color: var(--szene-text); overflow: hidden; }
.himmel-saetze { display: none; }
.mond, .sonne, .sterne, .wolke { position: absolute; pointer-events: none; }
.mond { z-index: 2; right: 12%; top: calc(var(--kopf) + max(3vh, 32px)); width: 46px; height: 46px; border-radius: 50%; background: #F6EDD9; box-shadow: 0 0 40px 10px rgb(246 237 217 / .18), inset -9px -4px 0 rgb(0 0 0 / .08); opacity: var(--licht-an); } 
.sterne { inset: 0 0 45% 0; opacity: calc(var(--licht-an) * .8);
background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 8%, #fff, transparent), radial-gradient(1.4px 1.4px at 46% 22%, #fff, transparent), radial-gradient(1px 1px at 63% 12%, #fff, transparent), radial-gradient(1.2px 1.2px at 78% 30%, #fff, transparent), radial-gradient(1px 1px at 91% 9%, #fff, transparent), radial-gradient(1px 1px at 36% 34%, #fff, transparent), radial-gradient(1.2px 1.2px at 6% 40%, #fff, transparent); }
.sonne { right: -40px; top: calc(var(--kopf) - 60px); width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 246 214 / .95), rgb(255 236 190 / .45) 45%, rgb(255 236 190 / 0)); opacity: var(--tag); }
.wolke { height: 34px; border-radius: 40px; background: rgb(255 255 255 / .55); opacity: var(--tag); box-shadow: 30px -12px 0 6px rgb(255 255 255 / .5), 70px -2px 0 -2px rgb(255 255 255 / .45); }
.w1 { right: -30px; top: calc(var(--kopf) + 13vh); width: 120px; }
.w2 { left: -40px; top: calc(var(--kopf) + 38vh); width: 90px; transform: scale(.7); }
.held-text { position: relative; z-index: 5; padding: 6px var(--rand) 0; }
.vorzeile { font-size: var(--t-14); line-height: 1.35; color: var(--szene-leise); max-width: 36ch; }
h1 { margin-top: 4px; font: 800 clamp(2.5rem, 11.8vw, 8.25rem)/.9 var(--schrift-schild); font-stretch: 78%; letter-spacing: -.005em; }
.kernsatz { margin-top: 8px; font-size: var(--t-16, 1rem); line-height: 1.35; font-weight: 600; max-width: 34ch; }
.held-fuss { margin-top: 6px; font-size: var(--t-13); line-height: 1.35; color: var(--szene-leise); max-width: 40ch; }
.hinweis { display: none; align-items: flex-end; gap: 6px; margin-top: 8px; font-size: var(--t-15); line-height: 1.3; font-weight: 700; color: var(--hinweis); cursor: pointer; max-width: 30ch; }
.js .hinweis { display: flex; }
.hinweis svg { flex: none; width: 26px; height: 26px; margin-bottom: -8px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hinweis-pfad { stroke-dasharray: 60; stroke-dashoffset: 0; }
.bewegt .hinweis-pfad { animation: zeichnen .9s 1.1s var(--k-aus) both; }
@keyframes zeichnen { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
.strasse-zeile { position: relative; flex: 1 1 auto; min-height: 300px; }
.fern { position: absolute; left: 0; right: 0; bottom: calc(var(--boden) + var(--haus-w) * .62); height: 70px; opacity: .9;
background: var(--fern); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='70'%3E%3Cpath d='M0 70V40h18V26l14-12 14 12v14h10V30h8v-6h6v6h12v40zM84 70V22l22-16 22 16v48zm52 0V36h30V20h8v16h20v34zm64 0V30l20-10 20 10v40z'/%3E%3C/svg%3E") repeat-x bottom / 240px 70px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='70'%3E%3Cpath d='M0 70V40h18V26l14-12 14 12v14h10V30h8v-6h6v6h12v40zM84 70V22l22-16 22 16v48zm52 0V36h30V20h8v16h20v34zm64 0V30l20-10 20 10v40z'/%3E%3C/svg%3E") repeat-x bottom / 240px 70px; }
.strasse { position: absolute; left: 0; right: 0; bottom: 0; height: var(--boden); background-color: var(--pflaster); border-top: 3px solid var(--kante);
background-image: linear-gradient(180deg, rgb(0 0 0 / .18), transparent 40%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28'%3E%3Cg fill='%23fff' fill-opacity='.07'%3E%3Crect x='1' y='1' width='12' height='12' rx='3'/%3E%3Crect x='15' y='1' width='12' height='12' rx='3'/%3E%3Crect x='29' y='1' width='12' height='12' rx='3'/%3E%3Crect x='43' y='1' width='12' height='12' rx='3'/%3E%3Crect x='-6' y='15' width='12' height='12' rx='3'/%3E%3Crect x='8' y='15' width='12' height='12' rx='3'/%3E%3Crect x='22' y='15' width='12' height='12' rx='3'/%3E%3Crect x='36' y='15' width='12' height='12' rx='3'/%3E%3Crect x='50' y='15' width='12' height='12' rx='3'/%3E%3C/g%3E%3C/svg%3E"); background-size: auto, 56px 28px; opacity: 1; }
.strasse::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--pflaster) 95%); pointer-events: none; }
.lichtfall { position: absolute; top: -3px; left: calc(50% - var(--haus-w) * .45); width: calc(var(--haus-w) * .62); height: 80%; opacity: 1;
background: linear-gradient(180deg, rgb(255 205 120 / .42), rgb(255 205 120 / 0)); clip-path: polygon(6% 0, 94% 0, 118% 100%, -18% 100%); }
:root:not([data-theme="dark"]) .lichtfall { background: linear-gradient(180deg, rgb(255 255 255 / .28), rgb(255 255 255 / 0)); }
.pfuetze { position: absolute; top: 6px; left: calc(50% - var(--haus-w) * .3); width: calc(var(--haus-w) * .6); height: 48%; border-radius: 50%; opacity: var(--licht-an);
background: radial-gradient(50% 50% at 50% 30%, rgb(255 214 140 / .22), rgb(255 214 140 / 0) 70%), repeating-linear-gradient(180deg, rgb(255 236 190 / .10) 0 2px, transparent 2px 7px); -webkit-mask: radial-gradient(closest-side, #000 40%, transparent); mask: radial-gradient(closest-side, #000 40%, transparent); }
.laterne-fleck { display: none; }
.nachbar { position: absolute; bottom: var(--boden); background-color: var(--n-l);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23fff' fill-opacity='.06'%3E%3Ccircle cx='115' cy='119' r='1.2'/%3E%3Ccircle cx='24' cy='114' r='1'/%3E%3Ccircle cx='61' cy='7' r='1.2'/%3E%3Ccircle cx='117' cy='71' r='1.2'/%3E%3Ccircle cx='50' cy='69' r='1'/%3E%3C/g%3E%3Cg fill='%23000' fill-opacity='.08'%3E%3Ccircle cx='33' cy='107' r='1.4'/%3E%3Ccircle cx='84' cy='75' r='1.4'/%3E%3Ccircle cx='94' cy='95' r='1.4'/%3E%3Ccircle cx='32' cy='58' r='1.4'/%3E%3C/g%3E%3C/svg%3E"); }
.nachbar-l { right: calc(50% + var(--haus-w) / 2 + 10px); width: 62vw; height: calc(var(--haus-w) * .78); }
.nachbar-r { left: calc(50% + var(--haus-w) / 2 + 8px); width: 40vw; height: calc(var(--haus-w) * 1.06); background-color: var(--n-r); }
.n-dach { position: absolute; left: -6px; right: -6px; bottom: 100%; height: 26%; background: var(--n-dach); clip-path: polygon(0 100%, 30% 0, 70% 0, 100% 100%); }
.n-fenster { position: absolute; width: 18%; height: 22%; top: 14%; background: var(--og-glas); box-shadow: inset 0 0 0 4px var(--rahmen); }
.nachbar-l .nf1 { right: 12%; } .nachbar-l .nf2 { right: 44%; background: var(--og-an); }
.nachbar-r .n-fenster { width: 22%; height: 15%; top: 10%; }
.nachbar-r .nf1 { left: 10%; background: var(--og-an); } .nachbar-r .nf2 { left: 42%; } .nachbar-r .nf3 { left: 10%; top: 34%; }
.wimpel { position: absolute; left: 0; right: 0; top: 44%; height: 16px; transform: rotate(-2deg); transform-origin: right center;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='16'%3E%3Cpath d='M0 1.5H64' stroke='%23222' stroke-opacity='.5'/%3E%3Cpath d='M2 2h12L8 14z' fill='%23E4573D'/%3E%3Cpath d='M18 2h12l-6 12z' fill='%23F2C14E'/%3E%3Cpath d='M34 2h12l-6 12z' fill='%233E8E7E'/%3E%3Cpath d='M50 2h12l-6 12z' fill='%23F5EEE2'/%3E%3C/svg%3E") repeat-x; }
.n-tafel { position: absolute; right: 12%; top: 58%; width: 26%; height: 22%; background: #6B4B33; box-shadow: inset 0 0 0 3px #4E3523;
background-image: linear-gradient(#F5EEE2, #F5EEE2), linear-gradient(#F2C14E, #F2C14E), linear-gradient(#DCE6F0, #DCE6F0); background-size: 28% 40%, 24% 32%, 30% 30%; background-position: 18% 30%, 58% 24%, 82% 70%; background-repeat: no-repeat; }
.n-tuer { position: absolute; right: 50%; bottom: 0; width: 15%; height: 36%; background: var(--holz); box-shadow: inset 0 0 0 3px var(--rahmen); }
.ausleger { position: absolute; left: -2px; top: 46%; width: 34%; height: 4px; background: var(--rahmen); }
.ausleger::before { content: ""; position: absolute; left: 0; top: 4px; width: 60%; height: 22px; border: 3px solid var(--rahmen); border-top: 0; border-left: 0; border-radius: 0 0 22px 0; }
.brezel { position: absolute; right: 4px; top: 4px; width: 40px; height: 40px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 34c-9 0-15-6-15-13 0-8 7-12 12-9 3 2 3 6 3 10M20 34c9 0 15-6 15-13 0-8-7-12-12-9-3 2-3 6-3 10M12 30l16-16M28 30 12 14' fill='none' stroke='%23C07A33' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.n-schaufenster { position: absolute; left: 10%; right: 10%; bottom: 0; height: 30%; background: radial-gradient(80% 90% at 50% 70%, var(--innen-0), var(--innen-1)); box-shadow: inset 0 0 0 5px var(--rahmen); opacity: calc(.35 + .65 * var(--licht-an)); }
.laterne { display: none; position: absolute; bottom: var(--boden); width: 6px; height: calc(var(--haus-w) * .9); background: var(--rahmen); }
.laterne-kopf { position: absolute; top: -4px; left: 50%; width: 30px; height: 40px; margin-left: -15px; background: var(--rahmen); border-radius: 6px 6px 2px 2px; clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); }
.laterne-kopf::after { content: ""; position: absolute; inset: 9px 7px 5px; border-radius: 2px; background: #FFF3D6; opacity: calc(.25 + .75 * var(--licht-an)); }
.laterne-schein { position: absolute; top: -90px; left: 50%; width: 240px; height: 240px; margin-left: -120px; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 200 120 / .26), rgb(255 200 120 / 0)); opacity: var(--licht-an); }
.haus::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: 0; height: 18%; pointer-events: none; z-index: 3; background: linear-gradient(0deg, rgb(0 0 20 / .28), transparent); }
.haus::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 7cqw; pointer-events: none; z-index: 3; background: linear-gradient(90deg, transparent, rgb(0 0 20 / .18)); }
.haus { position: absolute; left: calc(50% - var(--haus-w) / 2); width: var(--haus-w); top: 0; bottom: var(--boden); container-type: inline-size; z-index: 2;
--og: 12cqw; --schild-h: 19cqw; --schild-top: calc(4.2cqw + var(--og) + 2.4cqw); --front-top: calc(var(--schild-top) + var(--schild-h) + 3.4cqw); }
.wand { position: absolute; background-color: var(--wand);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23fff' fill-opacity='.07'%3E%3Ccircle cx='115' cy='119' r='1.2'/%3E%3Ccircle cx='130' cy='48' r='0.8'/%3E%3Ccircle cx='131' cy='121' r='0.8'/%3E%3Ccircle cx='24' cy='114' r='1'/%3E%3Ccircle cx='36' cy='23' r='0.6'/%3E%3Ccircle cx='101' cy='115' r='0.8'/%3E%3Ccircle cx='15' cy='9' r='0.8'/%3E%3Ccircle cx='61' cy='7' r='1.2'/%3E%3Ccircle cx='83' cy='112' r='0.8'/%3E%3Ccircle cx='132' cy='59' r='1'/%3E%3Ccircle cx='117' cy='71' r='1.2'/%3E%3Ccircle cx='21' cy='65' r='1'/%3E%3Ccircle cx='58' cy='131' r='1'/%3E%3Ccircle cx='102' cy='27' r='1'/%3E%3Ccircle cx='13' cy='120' r='1.2'/%3E%3Ccircle cx='50' cy='69' r='1'/%3E%3Ccircle cx='22' cy='79' r='1'/%3E%3C/g%3E%3Cg fill='%23000' fill-opacity='.09'%3E%3Ccircle cx='124' cy='45' r='0.8'/%3E%3Ccircle cx='114' cy='130' r='0.8'/%3E%3Ccircle cx='33' cy='107' r='1.4'/%3E%3Ccircle cx='29' cy='101' r='1.4'/%3E%3Ccircle cx='54' cy='0' r='1'/%3E%3Ccircle cx='10' cy='37' r='0.8'/%3E%3Ccircle cx='84' cy='75' r='1.4'/%3E%3Ccircle cx='94' cy='95' r='1.4'/%3E%3Ccircle cx='32' cy='123' r='0.8'/%3E%3Ccircle cx='98' cy='46' r='0.8'/%3E%3Ccircle cx='48' cy='40' r='0.8'/%3E%3Ccircle cx='27' cy='9' r='1'/%3E%3Ccircle cx='61' cy='100' r='1'/%3E%3Ccircle cx='32' cy='58' r='1.4'/%3E%3Ccircle cx='68' cy='105' r='1.4'/%3E%3Ccircle cx='45' cy='72' r='1'/%3E%3C/g%3E%3Cpath d='M33 18l6 4 3 7 5 2' fill='none' stroke='%23000' stroke-opacity='.06' stroke-width='.6'/%3E%3C/svg%3E"); }
.wand-oben { left: 0; right: 0; top: 0; height: var(--front-top);
background-image: radial-gradient(40cqw 28cqw at 34.6% calc(var(--schild-top) + 2cqw), rgb(255 205 130 / calc(.2 * var(--licht-an))), transparent 70%), radial-gradient(40cqw 28cqw at 65.4% calc(var(--schild-top) + 2cqw), rgb(255 205 130 / calc(.2 * var(--licht-an))), transparent 70%), linear-gradient(180deg, rgb(0 0 0 / .14), transparent 30%),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='%23fff' fill-opacity='.07'%3E%3Ccircle cx='115' cy='119' r='1.2'/%3E%3Ccircle cx='130' cy='48' r='0.8'/%3E%3Ccircle cx='24' cy='114' r='1'/%3E%3Ccircle cx='61' cy='7' r='1.2'/%3E%3Ccircle cx='117' cy='71' r='1.2'/%3E%3Ccircle cx='21' cy='65' r='1'/%3E%3Ccircle cx='102' cy='27' r='1'/%3E%3Ccircle cx='50' cy='69' r='1'/%3E%3C/g%3E%3Cg fill='%23000' fill-opacity='.09'%3E%3Ccircle cx='33' cy='107' r='1.4'/%3E%3Ccircle cx='10' cy='37' r='0.8'/%3E%3Ccircle cx='84' cy='75' r='1.4'/%3E%3Ccircle cx='94' cy='95' r='1.4'/%3E%3Ccircle cx='48' cy='40' r='0.8'/%3E%3Ccircle cx='32' cy='58' r='1.4'/%3E%3Ccircle cx='68' cy='105' r='1.4'/%3E%3C/g%3E%3C/svg%3E"); }
.gesims { position: absolute; left: -2.2cqw; right: -2.2cqw; top: 0; height: 4.2cqw; background: var(--gesims); box-shadow: 0 1.2cqw 1.6cqw -1cqw rgb(0 0 0 / .35);
background-image: repeating-linear-gradient(90deg, transparent 0 2.2cqw, rgb(0 0 0 / .16) 2.2cqw 3.2cqw); background-size: 100% 1.4cqw; background-position: 0 100%; background-repeat: no-repeat; }
.og-fenster { position: absolute; top: 6cqw; width: 12cqw; height: calc(var(--og) - 3.2cqw); background: var(--og-glas); border: .9cqw solid var(--rahmen);
background-image: linear-gradient(90deg, transparent 46%, var(--rahmen) 46% 54%, transparent 54%), linear-gradient(118deg, transparent 28%, var(--glanz) 29% 44%, transparent 45%); }
.og-fenster::before, .og-fenster::after { content: ""; position: absolute; top: -.9cqw; bottom: -.9cqw; width: 5cqw; background: #2E5A4C;
background-image: repeating-linear-gradient(180deg, rgb(255 255 255 / .1) 0 .5cqw, rgb(0 0 0 / .18) .5cqw 1.2cqw); box-shadow: inset 0 0 0 .4cqw rgb(0 0 0 / .25); }
.og-fenster::before { right: 100%; margin-right: .5cqw; } .og-fenster::after { left: 100%; margin-left: .5cqw; }
.og-fenster i { position: absolute; left: -1.6cqw; right: -1.6cqw; bottom: -2.2cqw; height: 1.4cqw; background: var(--sims); }
.og-fenster.of3 i { bottom: -2.6cqw; height: 3cqw; background: #7A4A2E; box-shadow: inset 0 .6cqw 0 #5B3420; }
.og-fenster.of3 i::before { content: ""; position: absolute; left: 6%; right: 6%; top: -1.8cqw; height: 2.4cqw;
background: radial-gradient(circle at 12% 60%, #D9473A 0 .9cqw, transparent 1cqw), radial-gradient(circle at 34% 40%, #E86A4F 0 .9cqw, transparent 1cqw), radial-gradient(circle at 58% 60%, #D9473A 0 .9cqw, transparent 1cqw), radial-gradient(circle at 82% 40%, #E86A4F 0 .9cqw, transparent 1cqw), linear-gradient(transparent 40%, #3F7A45 40%); }
.of1 { left: 13cqw; } .of2 { left: 44cqw; } .of3 { left: 75cqw; }
.og-fenster.an { background-color: var(--og-an); }
.og-fenster.an::after { box-shadow: inset 0 0 0 .4cqw rgb(0 0 0 / .25); }
.lampen { position: absolute; left: 0; right: 0; top: calc(var(--schild-top) - 3.2cqw); height: 6cqw; z-index: 5; pointer-events: none; }
.lampe { position: absolute; top: 0; width: 7cqw; height: 6cqw; margin-left: -3.5cqw; }
.l1 { left: 34.6cqw; } .l2 { left: 65.4cqw; }
.lampe-arm { position: absolute; left: 50%; top: -4.4cqw; width: 2.6cqw; height: 5.2cqw; border: .7cqw solid var(--rahmen); border-left: 0; border-bottom: 0; border-radius: 0 2.6cqw 0 0; }
.lampe-schirm { position: absolute; left: .4cqw; right: .4cqw; top: .6cqw; height: 3cqw; border-radius: 5cqw 5cqw .6cqw .6cqw; background: var(--rahmen); box-shadow: inset 0 -.5cqw 0 rgb(255 255 255 / .08); }
.lampe-schirm::after { content: ""; position: absolute; left: 50%; bottom: -1cqw; width: 3.2cqw; height: 1.3cqw; margin-left: -1.6cqw; border-radius: 0 0 2cqw 2cqw; background: #4A4F6E; transition: none; }
.lampe-kegel { position: absolute; left: 50%; top: 3.4cqw; width: 36cqw; height: calc(var(--schild-h) + 2cqw); margin-left: -18cqw; clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); background: radial-gradient(20% 34% at 50% 0%, rgb(255 226 170 / .55), transparent 100%), linear-gradient(180deg, rgb(255 214 140 / .26), rgb(255 214 140 / .06) 55%, rgb(255 214 140 / 0)); opacity: 0; }
.an .lampe-kegel { opacity: var(--licht-an); }
.an .lampe-schirm::after { background: #FFF3D6; box-shadow: 0 0 1.6cqw .6cqw rgb(255 210 122 / calc(.85 * var(--licht-an))); }
:root:not([data-theme="dark"]) .an .lampe-schirm::after { background: #D6D2C4; box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .an .lampe-schirm::after { background: #FFF3D6; box-shadow: 0 0 1.6cqw .6cqw rgb(255 210 122 / .85); } }
.bewegt .an .lampe-schirm::after, .bewegt .an .lampe-kegel { animation: zuenden .5s steps(1, end) .35s both; }
.bewegt .an .l2 .lampe-schirm::after, .bewegt .an .l2 .lampe-kegel { animation-delay: .47s; }
@keyframes zuenden { 0% { opacity: 0; } 14% { opacity: 1; } 24% { opacity: .25; } 38% { opacity: 1; } 52% { opacity: .55; } 64%, 100% { opacity: 1; } }
.schild { position: absolute; left: 5cqw; right: 5cqw; top: var(--schild-top); height: var(--schild-h); z-index: 4; border-radius: 1.2cqw; overflow: hidden; cursor: text;
background: radial-gradient(circle at 1.3cqw 1.3cqw, #E2C78E .5cqw, transparent .6cqw), radial-gradient(circle at calc(100% - 1.3cqw) 1.3cqw, #E2C78E .5cqw, transparent .6cqw), radial-gradient(circle at 1.3cqw calc(100% - 1.3cqw), #E2C78E .5cqw, transparent .6cqw), radial-gradient(circle at calc(100% - 1.3cqw) calc(100% - 1.3cqw), #E2C78E .5cqw, transparent .6cqw),
radial-gradient(120% 90% at 50% 0%, rgb(255 255 255 / .1), transparent 60%), linear-gradient(180deg, #17483E, #10372F 55%, #0C2C25);
box-shadow: 0 1.6cqw 1.4cqw -.6cqw rgb(5 8 25 / .55), inset 0 0 0 .5cqw #0B2A23; }
.schild::before { content: ""; position: absolute; inset: 2.2cqw; border: .35cqw solid #C9A45C; border-radius: .5cqw; box-shadow: 0 0 0 .3cqw rgb(0 0 0 / .18); pointer-events: none; }
.schild::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
background: radial-gradient(34% 120% at 34% 0%, rgb(255 214 140 / .24), transparent 70%), radial-gradient(34% 120% at 66% 0%, rgb(255 214 140 / .24), transparent 70%); transition: opacity .4s ease; }
.an .schild::after { opacity: var(--licht-an); }
.schild-glanz { position: absolute; top: -20%; bottom: -20%; left: 0; width: 30%; pointer-events: none; z-index: 2; opacity: 0; transform: translateX(-120%) skewX(-18deg);
background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / .22), rgb(255 255 255 / 0)); }
.schild:focus-within { outline: 3px solid var(--hinweis); outline-offset: 4px; overflow: visible; }
.schild-stift { display: none; position: absolute; z-index: 6; right: 7cqw; top: calc(var(--schild-top) + var(--schild-h) - .6cqw); align-items: center; gap: .5em; padding: .35em .8em .35em .6em; border-radius: 0 0 .6em .6em; background: #C9A45C; color: #16142A; font: 700 max(12px, 2.5cqw)/1 var(--schrift-text); cursor: text; box-shadow: 0 .4cqw .8cqw rgb(0 0 0 / .3); }
.schild-stift svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.js .schild-stift { display: inline-flex; }
.schild.fokus ~ .schild-stift, .js .haus.getippt .schild-stift { opacity: 0; }
.bewegt .schild-stift { transition: opacity var(--t-klein) ease, transform var(--t-tipp) var(--k-aus); }
.bewegt .schild-stift:active { transform: scale(.96); }
.schild-text, .schild-feld { position: absolute; left: 4cqw; right: 4cqw; top: 0; bottom: 0; margin: 0; padding: 0; border: 0; }
.schild-text { contain: layout style; }
.schild-text { display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none; z-index: 1;
font: 800 calc(var(--fit, 1) * 11cqw)/.98 var(--schrift-schild); font-stretch: var(--breite, 92%); letter-spacing: .005em; text-align: center; white-space: nowrap; color: #F7E7B8; }
.schild-zeile { display: block; }
.schild-text span span { display: inline-block; }
.schild-text { text-shadow: 0 0 .04em #FFF8E6, 0 0 .22em rgb(255 174 74 / .45); }
:root:not([data-theme="dark"]) .schild-text { color: #E9C46A; text-shadow: 0 .04em 0 #7A5410, 0 .08em .1em rgb(0 0 0 / .35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .schild-text { color: #F7E7B8; text-shadow: 0 0 .04em #FFF8E6, 0 0 .22em rgb(255 174 74 / .45); } }
.schild-text .neu { animation: zuenden .46s steps(1, end) both; animation-delay: var(--d, 0s); will-change: opacity; }
:root:not([data-theme="dark"]) .schild-text .neu { animation: aufmalen .38s var(--k-aus) both; animation-delay: var(--d, 0s); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .schild-text .neu { animation-name: zuenden; animation-timing-function: steps(1, end); animation-duration: .46s; } }
@keyframes aufmalen { from { opacity: 0; transform: translateY(.08em) scale(.96); } to { opacity: 1; transform: none; } }
.schild-text.aus span span { opacity: 0; transition: opacity .12s ease; }
.schild-feld { display: none; width: calc(100% - 8cqw); background: transparent; color: transparent; caret-color: #FFD27A; font: 800 9cqw/1 var(--schrift-schild); text-align: center; outline: 0; -webkit-appearance: none; appearance: none; border-radius: 0; z-index: 3; }
.js .schild-feld { display: block; }
.schild-feld::selection { background: rgb(255 210 122 / .35); color: transparent; }
.js .schild-feld { caret-color: transparent; }
.einfuege { display: inline-block; width: .07em; height: .86em; margin: 0 -.035em; vertical-align: -.06em; border-radius: .03em; background: #FFD27A; box-shadow: 0 0 .2em rgb(255 190 90 / .8); }
.bewegt .einfuege { animation: blinken 1.06s steps(1, end) infinite; }
@keyframes blinken { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.front { position: absolute; left: 0; right: 0; top: var(--front-top); bottom: 0; }
.kasten { position: absolute; z-index: 2; left: 3.6cqw; width: 60.8cqw; top: 0; height: 4.6cqw; background: var(--rahmen); border-radius: .6cqw .6cqw 0 0; box-shadow: 0 .8cqw 1.2cqw -.6cqw rgb(0 0 0 / .5); }
.wand-l { left: 0; width: 5cqw; top: 0; bottom: 0; }
.wand-m { left: 63cqw; width: 5cqw; top: 0; bottom: 0; }
.wand-r { left: 95cqw; width: 5cqw; top: 0; bottom: 0; }
.fenster { position: absolute; left: 5cqw; width: 58cqw; top: 4.6cqw; bottom: 8cqw; overflow: hidden; box-shadow: inset 0 0 0 .7cqw rgb(0 0 10 / .55), inset 0 0 0 1.9cqw var(--rahmen), inset .4cqw .4cqw 0 1.9cqw rgb(255 255 255 / .06), inset 0 3cqw 2.4cqw -1cqw rgb(0 0 0 / .5); }
.fenster-innen { position: absolute; inset: 0; background: radial-gradient(90% 85% at 50% 60%, var(--innen-0), var(--innen-1)); }
.fenster-innen::before { content: ""; position: absolute; left: 0; right: 0; bottom: 18%; height: 3%; background: #A8692C; opacity: .7; }
.fenster-innen i { position: absolute; bottom: 21%; background: #1B1830; border-radius: .6cqw; }
.fi-pc { left: 18%; width: 42%; height: 30%; box-shadow: inset 0 0 0 1.2cqw #1B1830, inset 0 0 0 9cqw #FFFAF0; }
.fi-tel { left: 66%; width: 13%; height: 36%; border-radius: 1.4cqw; transform: rotate(-5deg); box-shadow: inset 0 0 0 .9cqw #1B1830, inset 0 0 0 9cqw #FFFAF0; }
.bewegt .fenster-innen { display: none; }
.glas { position: absolute; inset: 1.1cqw; pointer-events: none; background: linear-gradient(115deg, transparent 22%, rgb(255 255 255 / .14) 23% 31%, transparent 32% 40%, rgb(255 255 255 / .08) 41% 44%, transparent 45%), linear-gradient(180deg, rgb(255 255 255 / .06), transparent 30%); }
.rollladen { position: absolute; inset: 0; transform: translateY(-101%);
background: repeating-linear-gradient(180deg, rgb(255 255 255 / .16) 0 1px, var(--roll-a) 1px 2.3cqw, var(--roll-c) 2.3cqw 2.7cqw, var(--roll-b) 2.7cqw 3cqw), var(--roll-a); border-bottom: 1.6cqw solid var(--roll-c);
box-shadow: inset 0 1.4cqw 1.4cqw -.6cqw rgb(0 0 0 / .45); }
.rollladen::after { content: ""; position: absolute; left: 44%; bottom: -1.2cqw; width: 12%; height: .9cqw; background: #B8BED6; border-radius: .4cqw; }
.bewegt .rollladen { transform: none; }
.bruestung::before { content: ""; position: absolute; left: -1.4cqw; right: -1.4cqw; top: -1.9cqw; height: 1.9cqw; border-radius: .3cqw; background: linear-gradient(180deg, var(--sims), color-mix(in srgb, var(--sims) 70%, #000)); box-shadow: 0 .8cqw .9cqw -.2cqw rgb(0 0 0 / .45); }
.bruestung-licht { position: absolute; left: 0; right: 0; top: -1.9cqw; height: .5cqw; background: rgb(255 214 140 / calc(.5 * var(--licht-an))); }
.bruestung { position: absolute; z-index: 2; left: 3.6cqw; width: 60.8cqw; bottom: 0; height: 8cqw; background: var(--wand-tief); box-shadow: 0 -1cqw 1.2cqw -.8cqw rgb(0 0 0 / .4);
background-image: repeating-linear-gradient(90deg, transparent 0 9cqw, rgb(0 0 0 / .14) 9cqw 9.4cqw), linear-gradient(180deg, rgb(0 0 0 / .2), transparent 40%); }
.tuer { position: absolute; left: 68cqw; width: 27cqw; top: 0; bottom: 0; background: var(--rahmen); padding: 1.2cqw 1.2cqw 0; box-shadow: inset 0 0 0 .6cqw rgb(0 0 10 / .5), inset 0 2.4cqw 1.6cqw -1cqw rgb(0 0 0 / .5); }
.tuer::before { content: ""; position: absolute; inset: 1.2cqw 1.2cqw 0; background: var(--holz); border-radius: .4cqw .4cqw 0 0;
box-shadow: inset 0 0 0 1cqw var(--holz-hell), inset 0 -16cqw 0 -12cqw rgb(0 0 0 / .18); }
.tuer-glas { position: absolute; left: 4.4cqw; right: 4.4cqw; top: 5cqw; height: 40%; background: var(--laden); overflow: hidden; box-shadow: inset 0 0 0 .6cqw rgb(0 0 0 / .3); }
.tuer-licht { position: absolute; inset: 0; background: radial-gradient(80% 80% at 50% 70%, var(--innen-0), var(--innen-1)); }
.bewegt .tuer-licht, .bewegt .bruestung-licht { opacity: 0; }
.tuer::after { content: ""; position: absolute; left: -2cqw; right: -2cqw; bottom: 0; height: 1.8cqw; background: var(--sims); box-shadow: 0 -.4cqw 0 rgb(0 0 0 / .2); }
.hausnummer { position: absolute; z-index: 2; right: 3.4cqw; top: 46%; width: 5cqw; height: 4.4cqw; border-radius: .6cqw; background: #1F4FA0; color: #fff; display: grid; place-items: center; font: 700 2.6cqw/1 var(--schrift-text); box-shadow: inset 0 0 0 .35cqw #fff, 0 .3cqw .5cqw rgb(0 0 0 / .3); }
.tuer-griff { position: absolute; right: 4cqw; top: 58%; width: 2cqw; height: 5.4cqw; background: var(--messing); border-radius: 1cqw; box-shadow: inset -.4cqw 0 0 rgb(0 0 0 / .2); }
.tafel { position: absolute; left: 50%; top: 11%; width: 18cqw; height: 6.6cqw; margin-left: -9cqw; z-index: 2; transform-origin: 50% -3cqw; } 
.js .tuer { cursor: pointer; }
.tafel::before { content: ""; position: absolute; left: 20%; right: 20%; top: -3cqw; height: 3.2cqw; border: .3cqw solid #C9A45C; border-bottom: 0; transform: skewY(0); clip-path: polygon(50% 0, 100% 100%, 0 100%); background: none; }
.tafel-innen { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(180deg); transition: transform var(--t-gross) var(--k-feder); }
.tafel b { position: absolute; inset: 0; display: grid; place-items: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: .6cqw; font: 700 2.3cqw/1 var(--schrift-text); letter-spacing: .02em; box-shadow: 0 .4cqw .6cqw rgb(0 0 0 / .3); }
.tafel .zu { background: #EDE6D8; color: #6B1F2A; }
.tafel .auf { background: #FFD27A; color: #16142A; transform: rotateY(180deg); }
.bewegt .tafel-innen { transform: none; will-change: transform; }
.innen { position: relative; z-index: 1; display: grid; gap: 28px; padding: 64px var(--rand) 72px; color: var(--innen-text); overflow: hidden;
background: radial-gradient(90% 70% at 60% 45%, var(--innen-0), var(--innen-1)); }
.innen-raum { position: absolute; inset: 0; pointer-events: none; }
.regal { display: none; position: absolute; left: 48%; right: 3%; top: 17%; height: 10px; border-radius: 2px; background: #A8692C; opacity: .75; box-shadow: 0 6px 10px -6px rgb(0 0 0 / .3); }
.regal::before { content: ""; position: absolute; left: 4%; right: 10%; bottom: 100%; height: 46px;
background: radial-gradient(9px 11px at 6% 70%, #E9C48A 98%, transparent), linear-gradient(#10372F, #10372F) 14% 100% / 34px 30px no-repeat, linear-gradient(#C0392B, #C0392B) 22% 100% / 26px 40px no-repeat, linear-gradient(#F2C14E, #F2C14E) 52% 100% / 40px 22px no-repeat,
radial-gradient(10px 14px at 70% 60%, rgb(255 255 255 / .7) 98%, transparent), linear-gradient(#3E8E7E, #3E8E7E) 84% 100% / 30px 34px no-repeat; }
.theke { position: absolute; left: 0; right: 0; bottom: 0; height: 13%; background: linear-gradient(180deg, #A8692C, #8C5524); opacity: .6; }
.pflanze { position: absolute; right: 3%; bottom: 13%; width: 46px; height: 86px; background: radial-gradient(ellipse 40% 60% at 30% 40%, #3F7A45 60%, transparent 62%), radial-gradient(ellipse 40% 60% at 70% 30%, #4E8C52 60%, transparent 62%), linear-gradient(#9C5B34, #9C5B34) bottom / 60% 30% no-repeat; opacity: .8; }
.innen-lampe { position: absolute; left: 50%; top: -120px; width: 900px; height: 420px; margin-left: -450px; background: radial-gradient(closest-side, rgb(255 255 255 / .38), rgb(255 255 255 / 0)); }
.innen-text { position: relative; max-width: 36rem; }
.innen-text h2 { font-size: clamp(2rem, 8.4vw, 4rem); }
.innen-lead { margin-top: 12px; font-size: var(--t-17); line-height: 1.4; }
.bekommen { margin-top: 18px; display: grid; gap: 10px; counter-reset: satz; }
.bekommen li { position: relative; padding-left: 30px; font-size: var(--t-20); line-height: 1.3; font-weight: 600; }
.bekommen li::before { content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 16px; border-radius: 50%; background: #FFD27A; box-shadow: inset 0 0 0 3px #10372F; }
.innen-klein { margin-top: 18px; font-size: var(--t-14); color: var(--innen-leise); }
.geraete { position: relative; height: min(70vw, 560px); }
.laptop { position: absolute; left: 0; top: 0; width: 92%; transform-origin: 30% 60%; }
.laptop-deckel { position: relative; padding: 2.2%; background: #14121F; border-radius: 14px 14px 4px 4px; box-shadow: 0 22px 40px -18px rgb(60 30 0 / .55); }
.laptop-schirm { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #FFFDF8; border-radius: 3px; container-type: inline-size; contain: layout paint style; }
.laptop-boden { position: relative; left: -6%; width: 112%; height: 12px; margin-top: -1px; background: linear-gradient(180deg, #CFC8BD, #9E968B); border-radius: 0 0 14px 14px; }
.laptop-boden::before { content: ""; position: absolute; left: 42%; width: 16%; top: 0; height: 5px; background: #8A8277; border-radius: 0 0 6px 6px; }
.handy { position: absolute; right: 0; bottom: 0; width: 31%; padding: 2.6% 2.2%; background: #14121F; border-radius: 28px; transform: rotate(-4deg); transform-origin: 50% 80%; box-shadow: 0 24px 40px -16px rgb(60 30 0 / .6); }
.handy-schirm { position: relative; aspect-ratio: 9 / 18.5; overflow: hidden; background: #FFFDF8; border-radius: 20px; container-type: inline-size; contain: layout paint style; }
.handy-schirm::before { content: ""; position: absolute; z-index: 3; top: 3cqw; left: 50%; width: 30cqw; height: 8cqw; margin-left: -15cqw; border-radius: 5cqw; background: #14121F; }
.demo { position: absolute; inset: 0; color: #1D1A2C; font-family: var(--schrift-text); }
.b-leiste { display: flex; align-items: center; gap: 1cqw; height: 5.4cqw; padding: 0 2cqw; background: #ECE6DB; }
.b-leiste i { flex: none; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #CBBFAE; }
.b-adresse { display: flex; align-items: center; gap: .8cqw; min-width: 0; max-width: 60%; margin-left: 2cqw; padding: .6cqw 2cqw; border-radius: 2cqw; background: #FFFDF8; font-size: 1.7cqw; line-height: 1; color: #5A5048; box-shadow: 0 0 0 0 rgb(31 122 74 / 0); transition: box-shadow var(--t-mittel) ease; }
.b-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-punkt { flex: none; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #1F7A4A; transform: scale(.001); opacity: 0; transition: transform var(--t-mittel) var(--k-feder), opacity var(--t-klein) ease; }
.d-nav { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; padding: 1.2cqw 4cqw; }
.d-logo { display: flex; align-items: center; gap: 1.2cqw; min-width: 0; font-weight: 700; font-size: 2.1cqw; }
.d-logo-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-zeichen { flex: none; display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: .8cqw; background: #10372F; color: #FFD27A; font: 800 2.2cqw/1 var(--schrift-schild); }
.d-links { flex: none; display: flex; gap: 3cqw; font-size: 1.8cqw; color: #4D4658; }
.d-held { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3cqw; margin: 0 4cqw; }
.d-tafel { padding: 4cqw 3.6cqw; border-radius: 1.4cqw; background: #10372F; color: #F5EEE2; box-shadow: inset 0 0 0 .6cqw #10372F, inset 0 0 0 .8cqw #C9A45C; min-width: 0; }
.d-titel { display: block; font: 800 calc(var(--fit-t, 1) * 6.2cqw)/1 var(--schrift-schild); font-stretch: var(--breite-t, 92%); color: #FFF3D6; white-space: nowrap; }
.d-titel .z { display: block; }
.d-satz { display: block; margin-top: 1.8cqw; font-size: 1.9cqw; line-height: 1.35; color: #D9E7DF; }
.d-knoepfe { display: flex; gap: 1.4cqw; margin-top: 2.6cqw; }
.d-knopf { position: relative; padding: 1.2cqw 2cqw; border-radius: 5cqw; font-weight: 700; font-size: 1.7cqw; line-height: 1; border: .25cqw solid #D9E7DF; color: #F5EEE2; }
.d-knopf.d-voll { background: #FFD27A; border-color: #FFD27A; color: #16142A; }
.d-tipp { position: absolute; left: 50%; top: 50%; width: 10cqw; height: 10cqw; margin: -5cqw 0 0 -5cqw; border-radius: 50%; background: rgb(16 55 47 / .35); opacity: 0; transform: scale(.3); pointer-events: none; }
.d-bild { position: relative; overflow: hidden; border-radius: 1.4cqw; background: #E9DFCF; min-height: 8cqw; }
.d-foto { position: absolute; inset: 0; background:
linear-gradient(90deg, transparent 64%, #3A2C45 64% 86%, transparent 86%) bottom / 100% 46% no-repeat,
radial-gradient(90% 90% at 40% 70%, #FFE7B3, #EFB466) 8% 100% / 52% 40% no-repeat,
repeating-linear-gradient(90deg, #FFF3E0 0 12%, #2E8C80 12% 24%) 50% 34% / 86% 16% no-repeat,
linear-gradient(180deg, #8DB5D3, #F3E3C7); }
.d-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; margin: 2.6cqw 4cqw 0; }
.d-kachel { display: block; min-width: 0; padding: 1.8cqw 2cqw; border-radius: 1.2cqw; background: #F3ECE1; }
.d-kt { display: block; font-weight: 700; font-size: 1.8cqw; }
.d-kz { display: block; font-size: 1.6cqw; color: #5A5262; margin-top: .4cqw; }
.demo-klein { padding-top: 12cqw; }
.demo-klein .d-nav { padding: 3cqw 6cqw; }
.demo-klein .d-zeichen { width: 9cqw; height: 9cqw; border-radius: 2.2cqw; font-size: 5.4cqw; }
.d-menue { display: grid; gap: 1.6cqw; } .d-menue i { display: block; width: 7cqw; height: 1cqw; border-radius: 1cqw; background: #1D1A2C; }
.demo-klein .d-tafel { margin: 2cqw 5cqw 0; padding: 7cqw 6cqw; border-radius: 4cqw; box-shadow: inset 0 0 0 1.6cqw #10372F, inset 0 0 0 2.2cqw #C9A45C; }
.demo-klein .d-titel { font-size: calc(var(--fit-h, 1) * 13cqw); font-stretch: var(--breite-h, 92%); }
.demo-klein .d-satz { font-size: 5cqw; margin-top: 4cqw; }
.demo-klein .d-knoepfe { gap: 3cqw; margin-top: 6cqw; }
.demo-klein .d-knopf { font-size: 4.6cqw; padding: 3.2cqw 5cqw; border-width: .6cqw; }
.demo-klein .d-tipp { width: 22cqw; height: 22cqw; margin: -11cqw 0 0 -11cqw; }
.demo-klein .d-bild { display: block; height: 30cqw; margin: 4cqw 5cqw 0; border-radius: 4cqw; }
.demo-klein .d-kachel { margin: 4cqw 5cqw 0; padding: 4cqw 5cqw; border-radius: 3cqw; }
.demo-klein .d-kt { font-size: 5cqw; } .demo-klein .d-kz { font-size: 4.4cqw; }
.geraete[data-satz-zeigt="1"] .d-anrufen .d-tipp { animation: tippen 1.2s var(--k-aus) .15s 2 both; }
.geraete[data-satz-zeigt="1"] .d-anrufen { animation: druecken 1.2s var(--k-aus) .15s 2 both; }
@keyframes tippen { 0% { opacity: .7; transform: scale(.3); } 70%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes druecken { 0%, 100% { transform: none; } 10% { transform: scale(.94); } 24% { transform: none; } }
.handy, .laptop { transition: transform var(--t-gross) var(--k-aus); }
.geraete[data-satz-zeigt="2"] .handy { transform: translate(-6%, -3%) rotate(0deg) scale(1.08); }
.geraete[data-satz-zeigt="2"] .laptop { transform: scale(.97); }
.geraete[data-satz-zeigt="3"] .b-punkt, .geraete[data-satz-zeigt="4"] .b-punkt { transform: none; opacity: 1; }
.geraete[data-satz-zeigt="3"] .b-adresse { box-shadow: 0 0 0 .35cqw rgb(31 122 74 / .55); }
.geraete[data-satz-zeigt="4"] .d-foto, .geraete[data-satz-zeigt="4"] .d-satz { animation: ankommen .7s var(--k-aus) both; }
.geraete[data-satz-zeigt="4"] .demo-klein .d-foto { animation-delay: .12s; }
@keyframes ankommen { from { opacity: 0; transform: translateY(18%) rotate(-2deg) scale(.94); } to { opacity: 1; transform: none; } }
.bekommen li { transition: color var(--t-mittel) ease; }
.leiste { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom)); background: #10372F; color: #F5EEE2; border-top: 2px solid #C9A45C;
transition: transform var(--t-mittel) var(--k-aus), opacity var(--t-klein) ease; }
.leiste p { margin: 0; min-width: 0; }
.leiste .klein { display: none; font-size: var(--t-13); line-height: 1.3; color: #CFE0D6; }
.leiste b { display: block; }
.leiste-name { display: none; grid-column: 1; }
.leiste-name b { font: 800 1.0625rem/1.1 var(--schrift-schild); font-stretch: 80%; color: #FFF3D6; white-space: nowrap; overflow: hidden; }
.leiste.mit-name .leiste-name { display: block; }
.leiste-umfang { grid-column: 1; }
.leiste-umfang b { font-size: var(--t-13); font-weight: 600; line-height: 1.25; color: #CFE0D6; white-space: nowrap; }
.leiste-umfang .lang { display: none; }
.leiste-preis { grid-column: 1; }
.leiste-preis b { font: 800 1.5rem/1.02 var(--schrift-schild); font-stretch: 84%; letter-spacing: .01em; }
.leiste-knopf { grid-column: 2; grid-row: 1 / span 3; background: #FFD27A; border-color: #FFD27A; color: #16142A; min-height: 48px; padding: 0 20px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .leiste-knopf:hover { background: #FFDF9E; border-color: #FFDF9E; box-shadow: 0 0 26px 2px rgb(255 190 90 / .4); } }
.leiste-knopf:focus-visible { outline-color: #FFF3D6; }
.leiste.zurueck { transform: translateY(110%); opacity: 0; visibility: hidden; transition: transform var(--t-mittel) var(--k-aus), opacity var(--t-klein) ease, visibility 0s linear var(--t-mittel); }
@media (min-width: 380px) { .leiste-umfang .lang { display: inline; } }
.abschnitt { padding: 88px 0; }
.abschnitt-kopf { max-width: 52rem; margin-bottom: 40px; }
.abschnitt-kopf p { margin-top: 14px; color: var(--leise); font-size: var(--t-20); line-height: 1.4; }
.ablauf { background: var(--grund-2); }
.schritte { display: grid; gap: 40px; counter-reset: schritt; }
.schritt { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; }
.schritt-bild { grid-column: 1 / -1; position: relative; display: block; height: 150px; margin-bottom: 18px; overflow: hidden; border-bottom: 6px solid var(--theke, #A8692C); }
:root[data-theme="dark"] .schritte { --theke: #C9A45C; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .schritte { --theke: #C9A45C; } }
.schritt-nr { grid-row: 2 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold-hell); font: 800 1.375rem/1 var(--schrift-schild); color: var(--text); }
.schritt h3 { padding-top: 8px; }
.schritt p { grid-column: 2; margin-top: 4px; color: var(--leise); max-width: 46ch; }
.sb-haus { position: absolute; left: 50%; bottom: 0; width: 120px; height: 104px; margin-left: -60px; border: 3px solid var(--text); border-bottom: 0; border-radius: 4px 4px 0 0; }
.sb-haus::before { content: ""; position: absolute; left: 12px; right: 12px; top: 14px; height: 20px; border: 3px solid var(--text); border-radius: 3px; }
.sb-brief { position: absolute; left: calc(50% - 98px); top: 26px; width: 54px; height: 36px; border-radius: 4px; background: var(--licht); box-shadow: inset 0 0 0 2px var(--text);
background-image: linear-gradient(32deg, transparent 49%, var(--text) 49% 52%, transparent 52%), linear-gradient(-32deg, transparent 49%, var(--text) 49% 52%, transparent 52%); background-size: 50% 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat; transform: rotate(-8deg); }
.sb-markise { position: absolute; left: 50%; bottom: 62px; width: 132px; height: 20px; margin-left: -66px; border-radius: 0 0 8px 8px; background: repeating-linear-gradient(90deg, var(--email) 0 16px, var(--licht-hell) 16px 32px); box-shadow: inset 0 0 0 2px var(--text); transform-origin: top center; }
.sb-tuer { position: absolute; left: calc(50% + 14px); bottom: 0; width: 30px; height: 50px; border: 3px solid var(--text); border-bottom: 0; background: var(--holz, #6B3E2E); }
.sb-blatt { position: absolute; left: calc(50% - 112px); top: 18px; width: 58px; height: 74px; border-radius: 3px; background: #FFFDF8; box-shadow: inset 0 0 0 2px var(--text), 0 6px 12px -6px rgb(0 0 0 / .4); transform: rotate(-6deg);
background-image: linear-gradient(var(--text), var(--text)), linear-gradient(var(--linie), var(--linie)), linear-gradient(var(--linie), var(--linie)), linear-gradient(var(--email), var(--email)); background-size: 60% 3px, 70% 2px, 50% 2px, 40% 8px; background-position: 10px 12px, 10px 24px, 10px 32px, 10px 56px; background-repeat: no-repeat; }
.sb-licht { position: absolute; left: 50%; bottom: 0; width: 120px; height: 62px; margin-left: -60px; background: radial-gradient(90% 90% at 50% 70%, var(--innen-0), var(--innen-1)); opacity: 1; }
.sb-offen { position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%) rotate(-3deg); padding: 3px 9px; border-radius: 6px; background: var(--licht); color: var(--tinte); font: 700 var(--t-13)/1.2 var(--schrift-text); white-space: nowrap; box-shadow: 0 0 0 2px var(--text); }
.s3 .sb-haus, .s3 .sb-markise, .s3 .sb-tuer { bottom: 26px; }
.s3 .sb-markise { bottom: 88px; }
.s3 .sb-licht { bottom: 26px; }
.s3 .sb-offen { bottom: 102px; }
.lineal { position: absolute; left: 14px; right: 14px; bottom: 6px; height: 16px; border-top: 2px solid var(--text);
background: repeating-linear-gradient(90deg, var(--text) 0 2px, transparent 2px calc((100% - 2px) / 7)); background-size: 100% 7px; background-repeat: no-repeat; }
.lineal-fuellung { position: absolute; left: 0; right: 0; top: -2px; height: 4px; background: var(--gold-hell); transform-origin: left center; }
.lineal-zahlen { position: absolute; left: -4px; right: -4px; top: 6px; display: flex; justify-content: space-between; font: 700 10px/1 var(--schrift-text); }
.lineal-zahlen i { font-style: normal; width: 8px; text-align: center; }
.s3 .schritt-bild { padding-bottom: 0; }
.ablauf-fuss { display: grid; gap: 20px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--linie); justify-items: start; }
.regel { max-width: 62ch; color: var(--leise); font-size: var(--t-15); }
.bewegt [data-ablauf]:not([data-gesehen]) .sb-brief { opacity: 0; transform: translate(-24px, 12px) rotate(-20deg); }
.bewegt [data-ablauf]:not([data-gesehen]) .s2 .sb-markise { transform: scaleY(0); }
.bewegt [data-ablauf]:not([data-gesehen]) .s2 .sb-tuer, .bewegt [data-ablauf]:not([data-gesehen]) .sb-blatt { opacity: 0; transform: translateY(14px); }
.bewegt [data-ablauf]:not([data-gesehen]) .lineal-fuellung { transform: scaleX(0); }
.bewegt [data-ablauf]:not([data-gesehen]) .sb-licht, .bewegt [data-ablauf]:not([data-gesehen]) .sb-offen { opacity: 0; }
.bewegt [data-ablauf]:not([data-gesehen]) .sb-offen { transform: translateX(-50%) translateY(10px) rotate(-3deg); }
.bewegt [data-ablauf] .sb-brief { transition: opacity .4s var(--k-aus) .1s, transform .6s var(--k-aus) .1s; }
.bewegt [data-ablauf] .s2 .sb-markise { transition: transform .5s var(--k-feder) .45s; }
.bewegt [data-ablauf] .s2 .sb-tuer { transition: opacity .3s ease .7s, transform .45s var(--k-aus) .7s; }
.bewegt [data-ablauf] .sb-blatt { transition: opacity .3s ease .85s, transform .5s var(--k-aus) .85s; }
.bewegt [data-ablauf] .lineal-fuellung { transition: transform 1.4s steps(7, end) 1.1s; }
.bewegt [data-ablauf] .sb-licht { transition: opacity .25s ease 2.55s; }
.bewegt [data-ablauf] .sb-offen { transition: opacity .3s ease 2.7s, transform .5s var(--k-feder) 2.7s; }
.pakete-abschnitt { position: relative; }
.pakete { position: relative; display: grid; gap: 56px; }
.paket { position: relative; display: flex; flex-direction: column; padding-top: 14px; container-type: inline-size; }
.paket::before { content: ""; position: absolute; left: -6px; right: -6px; top: 0; height: 6px; border-radius: 3px; background: linear-gradient(180deg, #E8CF96, #A88340 70%, #8A6A2C); box-shadow: 0 2px 3px rgb(0 0 0 / .25); }
.paket-marke { position: absolute; z-index: 2; top: 30px; right: 4%; left: auto; display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; background: var(--licht); color: var(--tinte); font: 800 var(--t-14)/1 var(--schrift-schild); font-stretch: 84%; letter-spacing: .02em; transform: rotate(-12deg); box-shadow: inset 0 0 0 3px var(--licht), inset 0 0 0 5px var(--tinte); }
.paket h3 { order: 1; margin-top: 18px; font: 800 1.75rem/1.05 var(--schrift-schild); font-stretch: 84%; }
.preis { order: 0; position: relative; align-self: flex-start; display: inline-flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; max-width: 100%; gap: 6px 10px; margin-top: 34px; padding: 14px 20px 12px; border-radius: 10px; background: #10372F; color: #FFF3D6; transform-origin: 50% -34px;
box-shadow: inset 0 0 0 3px #10372F, inset 0 0 0 4.5px #C9A45C, 0 10px 18px -10px rgb(0 0 0 / .45); }
.preis::before { content: ""; position: absolute; left: 50%; top: -34px; width: 2px; height: 34px; margin-left: -1px; background: #8A6A2C; }
.preis::after { content: ""; position: absolute; left: 50%; top: -3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #E2C78E; box-shadow: 0 0 0 2px #10372F; }
.preis-vor { font-size: var(--t-14); font-weight: 600; color: #CFE0D6; }
.preis-zahl { font: 800 3rem/1 var(--schrift-schild); font-stretch: 84%; font-variant-numeric: tabular-nums; }
.preis-oder { font-size: var(--t-14); color: #CFE0D6; }
.paket-zusatz, .paket .liste, .paket .stufen { order: 2; }
.bewegt [data-pakete] .preis { will-change: transform; }
.bewegt [data-pakete][data-gesehen] .preis { animation: pendeln 1.6s var(--k-aus) both; }
.bewegt [data-pakete][data-gesehen] .paket:nth-child(2) .preis { animation-delay: .12s; }
.bewegt [data-pakete][data-gesehen] .paket:nth-child(3) .preis { animation-delay: .24s; }
@keyframes pendeln { 0% { transform: rotate(7deg); } 22% { transform: rotate(-4.5deg); } 42% { transform: rotate(2.6deg); } 62% { transform: rotate(-1.2deg); } 80% { transform: rotate(.5deg); } 100% { transform: none; } }
.paket-zusatz { margin-top: 14px; color: var(--leise); font-size: var(--t-15); }
.paket-zusatz b { color: var(--text); }
.liste { margin-top: 18px; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.liste li { padding: 10px 0; border-bottom: 1px solid var(--linie); font-size: var(--t-15); line-height: 1.4; }
.liste small { display: block; margin-top: 2px; color: var(--leise); font-size: var(--t-13); }
.stufen { margin-top: 18px; display: grid; border-top: 1px solid var(--linie); }
.stufen div { padding: 12px 0; border-bottom: 1px solid var(--linie); }
.stufen dt { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; }
.stufen dt span { font-variant-numeric: tabular-nums; }
.stufen dd { margin-top: 4px; color: var(--leise); font-size: var(--t-15); line-height: 1.45; }
.preis-mwst { margin-top: 28px; font-weight: 600; }
.preis-fuss { display: grid; gap: 22px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--linie); }
.garantie { font-size: var(--t-17); }
.garantie-grenze, .preis-einseitig, .preis-hinweis { margin-top: 8px; color: var(--leise); font-size: var(--t-15); }
.preis-handlung { display: grid; gap: 4px; justify-items: start; }
.preis-handlung .knopf { margin-top: 14px; }
.grundsaetze { display: grid; gap: 28px; }
.grundsaetze li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; padding-top: 22px; border-top: 1px solid var(--linie); }
.grundsaetze h3 { font: 800 var(--t-24)/1.1 var(--schrift-schild); font-stretch: 86%; }
.grundsaetze p { grid-column: 2; margin-top: 6px; color: var(--leise); max-width: 44ch; }
:root { --symbol: var(--email); --symbol-ton: #FFD27A; }
:root[data-theme="dark"] { --symbol: #FFD27A; --symbol-ton: rgb(255 210 122 / .18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --symbol: #FFD27A; --symbol-ton: rgb(255 210 122 / .18); } }
.ding { grid-row: 1 / span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--flaeche); border: 1px solid var(--linie); color: var(--symbol); }
.ding svg { width: 28px; height: 28px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ding .ton { fill: var(--symbol-ton); }
.ding .teil { transform-box: view-box; }
.ding-preis .teil { transform-origin: 8.25px 8.25px; }
.ding-schluessel .teil { transform-origin: 8.25px 15.75px; }
.ding-klingel .teil { transform-origin: 12px 3.25px; }
.ding-offen .teil { transform-origin: 12px 3.75px; }
.bewegt [data-grundsaetze][data-gesehen] .ding-preis .teil { animation: wippen .9s var(--k-aus) .1s both; }
.bewegt [data-grundsaetze][data-gesehen] .ding-schluessel .teil { animation: drehen .7s var(--k-inout) .3s both; }
.bewegt [data-grundsaetze][data-gesehen] .ding-klingel .teil { animation: klingeln .9s var(--k-aus) .5s both; }
.bewegt [data-grundsaetze][data-gesehen] .ding-offen .teil { animation: klingeln .9s var(--k-aus) .7s both; }
@keyframes wippen { 0% { transform: rotate(-16deg); } 45% { transform: rotate(5deg); } 70% { transform: rotate(-3deg); } 100% { transform: none; } }
@keyframes klingeln { 0%, 100% { transform: none; } 15% { transform: rotate(12deg); } 35% { transform: rotate(-9deg); } 55% { transform: rotate(5deg); } 75% { transform: rotate(-2deg); } }
.fragen-abschnitt { background: var(--grund-2); }
.fragen { border-top: 1px solid var(--linie); }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary { position: relative; display: flex; align-items: center; min-height: 64px; padding: 14px 52px 14px 0; font-weight: 700; font-size: var(--t-17); cursor: pointer; list-style: none; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::before, .fragen summary::after { content: ""; position: absolute; right: 14px; top: 50%; width: 16px; height: 2px; margin-top: -1px; background: currentColor; transition: transform var(--t-mittel) var(--k-aus); }
.fragen summary::after { transform: rotate(90deg); }
.fragen details[open] summary::after { transform: rotate(0deg); }
.fragen details[open] summary::before { transform: rotate(180deg); }
.antwort { padding: 0 0 20px; color: var(--leise); max-width: 62ch; }
.bewegt .fragen details[open] .antwort { animation: aufklappen var(--t-mittel) var(--k-aus) both; }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.band { background: var(--band); color: var(--band-text); }
.band, .fuss { --fokus: #FFD27A; }
.kontakt { padding: 88px 0 120px; }
.anfrage h2 { max-width: 14ch; }
.anfrage-ohne-js { margin-top: 18px; max-width: 52ch; color: var(--band-leise); }
.js .anfrage-ohne-js { display: none; }
.anfrage-form { display: none; margin-top: 36px; max-width: 46rem; }
.js .anfrage-form { display: grid; gap: 22px; }
.feld { display: grid; gap: 8px; }
.feld label { font-weight: 700; }
.feld-frei { font-weight: 400; color: var(--band-leise); }
.feld-eingabe { display: grid; gap: 8px; }
.feld input, .feld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 2px solid color-mix(in srgb, var(--band-text) 55%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--band-text) 6%, transparent); color: var(--band-text); font: 400 var(--t-17)/1.4 var(--schrift-text); transition: border-color var(--t-klein) ease, box-shadow var(--t-klein) ease; }
.feld textarea { min-height: 110px; resize: vertical; }
.feld input:focus-visible, .feld textarea:focus-visible { outline: 3px solid #FFD27A; outline-offset: 2px; border-color: #FFD27A; }
.feld [aria-invalid="true"] { border-color: #FFB4A6; }
.feld-hinweis { font-size: var(--t-14); color: var(--band-leise); }
.feld-fehler { font-size: var(--t-14); font-weight: 700; color: #FFB4A6; }
.feld-senden .knopf { justify-self: start; background: #FFD27A; border-color: #FFD27A; color: #16142A; }
@media (hover: hover) and (pointer: fine) { .feld-senden .knopf:hover { background: #FFDF9E; border-color: #FFDF9E; } }
.feld-senden .knopf:focus-visible { outline-color: #FFF3D6; }
.anfrage-status { font-weight: 700; color: #FFD27A; }
.anfrage-status:not(:empty) { animation: aufklappen var(--t-mittel) var(--k-aus) both; }
.kontakt-wege { margin-top: 56px; padding-top: 28px; border-top: 1px solid color-mix(in srgb, var(--band-text) 25%, transparent); }
.kontakt-wege dt { color: var(--band-leise); font-size: var(--t-15); }
.kontakt-wege dd { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.kontakt-gross { display: inline-block; padding: 9px 0; font: 800 clamp(1.5rem, 6vw, 2.5rem)/1.1 var(--schrift-schild); font-stretch: 82%; overflow-wrap: anywhere; }
.kopieren { display: none; position: relative; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid currentColor; border-radius: 999px; background: none; color: inherit; font: 700 var(--t-15)/1 var(--schrift-text); cursor: pointer; transition: transform var(--t-tipp) var(--k-aus); }
.js .kopieren { display: inline-flex; }
.kopieren:active { transform: scale(.97); }
.kopieren-ok { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(6px); transition: opacity var(--t-klein) ease, transform var(--t-klein) var(--k-aus); }
.kopieren-text { transition: opacity var(--t-klein) ease, transform var(--t-klein) var(--k-aus); }
.kopieren.ist-kopiert .kopieren-text { opacity: 0; transform: translateY(-6px); }
.kopieren.ist-kopiert .kopieren-ok { opacity: 1; transform: none; }
.kontakt-daten { display: grid; gap: 18px; margin-top: 32px; }
.kontakt-daten dt { font-weight: 700; }
.kontakt-daten dd { margin-top: 4px; color: var(--band-leise); max-width: 48ch; }
.fuss { background: var(--band); color: var(--band-text); padding: 40px 0 calc(var(--leiste-h) + 40px); border-top: 1px solid color-mix(in srgb, var(--band-text) 18%, transparent); }
html:not(:has(.leiste)) .fuss { padding-bottom: 40px; }
.fuss-innen { display: grid; gap: 18px; }
.fuss-marke p { margin-top: 6px; color: var(--band-leise); font-size: var(--t-15); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-left: -10px; }
.fuss-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
.fuss-recht { color: var(--band-leise); font-size: var(--t-14); }
.entwurf-hinweis:not(:empty)::before { content: " · "; }
.recht { padding-top: 48px; padding-bottom: 88px; max-width: 760px; margin-left: 0; }
.recht .vorzeile { color: var(--leise); }
.recht h1 { margin: 6px 0 0; font-size: clamp(2.75rem, 10vw, 5rem); }
.recht-lead { margin-top: 16px; font-size: var(--t-20); line-height: 1.4; max-width: 46ch; }
.recht section { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--linie); }
.recht h2 { font-size: var(--t-24); font-stretch: 86%; }
.recht p, .recht address { margin-top: 10px; font-style: normal; max-width: 62ch; }
.recht a { text-decoration-thickness: 1px; }
.recht-datum { margin-top: 36px; color: var(--leise); font-size: var(--t-14); }
.person-platz { margin: 0 auto; max-width: 1240px; padding: 24px var(--rand); }
@media (max-width: 759px) {
.paket-marke { top: -16px; right: 0; width: 66px; height: 66px; font-size: .75rem; }
.menue { display: inline-block; }
.js .navigation { position: absolute; left: 0; right: 0; top: var(--kopf); display: grid; gap: 4px; padding: 10px var(--rand) 18px; background: var(--grund); border-bottom: 1px solid var(--linie); box-shadow: 0 18px 30px -18px rgb(0 0 0 / .35);
opacity: 0; transform: translateY(-8px); visibility: hidden; transition: opacity var(--t-klein) ease, transform var(--t-mittel) var(--k-aus), visibility 0s linear var(--t-mittel); }
.js .navigation.ist-offen { opacity: 1; transform: none; visibility: visible; transition: opacity var(--t-klein) ease, transform var(--t-mittel) var(--k-aus); }
.js .navigation .nav-links { display: grid; }
.navigation .nav-links a, .navigation .farbmodus, .navigation .bewegung { justify-content: flex-start; min-height: 48px; font-size: var(--t-17); }
.navigation .farbmodus-text { position: static; width: auto; height: auto; clip-path: none; }
.navigation .bewegung { justify-content: space-between; }
html:not(.js) .kopf { height: auto; }
html:not(.js) .kopf-innen { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
html:not(.js) .navigation { width: 100%; flex-wrap: wrap; }
html:not(.js) .menue { display: none; }
html:not(:has(.leiste)) .kopf-anfrage { display: inline-flex; min-height: 44px; padding: 0 14px; font-size: var(--t-15); }
html:not(:has(.leiste)) .nav-anfrage { display: none; }
}
@media (min-width: 760px) {
:root { --kopf: 72px; }
.marke { font-size: 1.875rem; }
html:not(:has(.leiste)) .nav-anfrage { min-height: 44px; padding: 0 18px; font-size: var(--t-15); }
}
@media (min-width: 800px) {
:root { --leiste-h: 104px; }
.buehne { --haus-w: min(calc((var(--basis, 100svh) - var(--kopf) - var(--boden) - 40px) / 1.06), calc((min(100vw, 1240px) - 2 * var(--rand)) * .52)); --boden: calc(var(--leiste-h) + 20px);
--textbreite: calc(100vw - var(--haus-w) - 2 * var(--links) - 48px); }
.sonne { right: auto; left: calc(var(--links) - 60px); top: calc(var(--kopf) - 70px); }
.w1 { right: auto; left: calc(var(--links) + var(--textbreite) * .55); top: calc(var(--kopf) + 2vh); }
.w2 { left: calc(100vw - var(--links) - var(--haus-w) * .2); top: calc(var(--kopf) + 1vh); }
.szene { display: block; }
.held-text { position: absolute; left: var(--links); top: calc(var(--kopf) + 3vh); width: var(--textbreite); padding: 0; }
.vorzeile { font-size: var(--t-17); }
h1 { font-size: clamp(3rem, min(calc(var(--textbreite) * .19), 12.5vh), 7.5rem); margin-top: 12px; }
.kernsatz { font-size: var(--t-20); margin-top: 18px; }
.held-fuss { font-size: var(--t-14); margin-top: 8px; }
.hinweis { margin-top: 22px; font-size: var(--t-17); }
.hinweis svg { width: 32px; height: 32px; transform: rotate(-70deg); margin-bottom: -2px; }
.strasse-zeile { position: absolute; inset: 0; }
.haus { left: auto; right: var(--links); top: calc(var(--kopf) + 20px); --og: 16cqw; --schild-h: 20cqw; }
.nachbar-l { right: calc(var(--links) + var(--haus-w) + 110px); width: 48vw; height: calc(var(--haus-w) * .3); }
.nachbar-r { left: calc(100vw - var(--links) + 8px); right: auto; width: 30vw; }
.laterne { display: block; left: calc(100vw - var(--links) - var(--haus-w) - 34px); }
.lichtfall { left: calc(100vw - var(--links) - var(--haus-w) * .98); width: calc(var(--haus-w) * .66); }
.fern { bottom: calc(var(--boden) + var(--haus-w) * .36); }
.mond { right: auto; left: min(calc(100vw - 72px), calc(100vw - var(--links) + 14px)); top: calc(var(--kopf) + 36px); width: 58px; height: 58px; } 
.innen { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 5vw; padding: 96px var(--rand); }
.geraete { height: auto; aspect-ratio: 10 / 7.2; }
.laptop { width: 88%; } .handy { width: 25%; }
.leiste { left: 50%; right: auto; bottom: 16px; width: min(1120px, calc(100vw - 2 * var(--rand))); transform: translateX(-50%); border: 2px solid #C9A45C; border-radius: 16px;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) auto auto; grid-template-rows: auto; gap: 0 28px; padding: 12px 12px 12px 24px; box-shadow: 0 16px 40px -12px rgb(0 0 0 / .5); }
.leiste .klein { display: block; }
.leiste-name, .leiste.mit-name .leiste-name { display: block; grid-column: 1; }
.leiste-name b { font-size: 1.375rem; text-overflow: ellipsis; }
.leiste-umfang { grid-column: 2; } .leiste-umfang b { font-size: var(--t-15); color: #F5EEE2; }
.leiste-umfang .lang { display: inline; }
.leiste-preis { grid-column: 3; } .leiste-preis b { font-size: 1.875rem; }
.leiste-knopf { grid-column: 4; grid-row: auto; min-height: 56px; padding: 0 28px; }
.leiste.zurueck { transform: translateX(-50%) translateY(140%); }
.schritte { grid-template-columns: repeat(3, 1fr); gap: 0 40px; position: relative; }
.schritt-bild { margin-right: -40px; }
.schritt:last-child .schritt-bild { margin-right: 0; }
.pakete { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; column-gap: 56px; row-gap: 40px; padding-top: 14px; }
.paket-erst { grid-row: span 2; }
.paket-erst .preis { padding: 18px 26px 16px; }
.paket-erst .preis-zahl { font-size: 4.5rem; }
.paket-erst h3 { font-size: 2.25rem; }
.paket:nth-child(3) { padding-top: 14px; }
.paket:nth-child(3)::before { display: block; }
.paket:nth-child(3) .preis { margin-top: 34px; transform-origin: 50% -34px; }
.paket:nth-child(3) .preis::before { top: -34px; height: 34px; }
.pakete::before { right: auto; width: calc(100% + 20px); }
.pakete::before { content: ""; position: absolute; left: -10px; right: -10px; top: 0; height: 7px; border-radius: 4px; background: linear-gradient(180deg, #E8CF96, #A88340 70%, #8A6A2C); box-shadow: 0 2px 3px rgb(0 0 0 / .25); }
.paket { padding-top: 0; }
.paket::before { display: none; }
.preis { margin-top: 48px; transform-origin: 50% -48px; }
.preis::before { top: -48px; height: 48px; }
.paket-marke { top: 34px; }
.preis-fuss { grid-template-columns: 1fr 1fr; gap: 40px; }
.grundsaetze { grid-template-columns: 1fr 1fr; column-gap: 48px; }
.fragen-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.kontakt-daten { grid-template-columns: repeat(3, 1fr); gap: 32px; }
.fuss-innen { grid-template-columns: 1fr auto auto; align-items: center; gap: 32px; }
.fuss { padding-bottom: calc(var(--leiste-h) + 30px); }
}
@media (min-width: 1200px) {
.abschnitt { padding: 120px 0; }
.grundsaetze { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; }
.grundsaetze li { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; row-gap: 0; }
.grundsaetze .ding { grid-row: auto; margin-bottom: 18px; }
.grundsaetze p { grid-column: 1; max-width: none; margin-top: 8px; }
}
.bewegt .gang { height: calc(var(--basis, 100svh) * var(--schirme, 5.1)); background: var(--grund); }
.bewegt .buehne { position: sticky; top: 0; height: var(--basis, 100svh); display: block; overflow: hidden; }
.bewegt .himmel, .bewegt .szene, .bewegt .himmel-saetze { position: absolute; inset: 0; }
.bewegt .himmel { z-index: 0; } 
.bewegt .szene { min-height: 0; }
.bewegt .innen-rahmen { position: absolute; z-index: 1; overflow: hidden; }
.bewegt .innen-rahmen:not(.vermessen) { visibility: hidden; } 
.bewegt .innen { position: absolute; transform-origin: 0 0; padding-top: calc(var(--kopf) + 14px); padding-bottom: calc(var(--leiste-h) + 18px); align-content: start; }
.bewegt .szene, .bewegt .innen-rahmen, .bewegt .innen, .bewegt .held-text, .bewegt .satz, .bewegt .rollladen, .bewegt .lichtfall, .bewegt .innen-text { will-change: transform, opacity; }
.bewegt .lichtfall { opacity: 0; }
@media (min-width: 800px) { .bewegt .regal { display: block; } }
.bewegt .tuer-licht, .bewegt .bruestung-licht { will-change: opacity; }
.bewegt .tafel b { will-change: transform; }
.bewegt [data-grundsaetze] .ding .teil { will-change: transform; }
.bewegt [data-ablauf] .sb-brief, .bewegt [data-ablauf] .sb-markise, .bewegt [data-ablauf] .sb-tuer, .bewegt [data-ablauf] .sb-blatt, .bewegt [data-ablauf] .lineal-fuellung, .bewegt [data-ablauf] .sb-licht, .bewegt [data-ablauf] .sb-offen { will-change: transform, opacity; }
.bewegt .himmel-saetze { display: block; z-index: 6; pointer-events: none; }
.bewegt .satz { position: absolute; left: var(--links); right: var(--rand); top: calc(var(--kopf) + 3vh); max-width: 15ch; opacity: 0; color: var(--szene-text);
font: 800 clamp(2.1rem, 9.8vw, 6.5rem)/1 var(--schrift-schild); font-stretch: 78%; text-wrap: balance; }
.bewegt .innen-text { opacity: 0; }
@media (max-width: 799px) {
.bewegt .innen { grid-template-rows: auto 1fr; gap: 10px; }
.bewegt .innen-text h2 { font-size: clamp(1.75rem, 8vw, 2.5rem); }
.bewegt .innen-lead, .bewegt .innen-klein { display: none; }
.bewegt .bekommen { position: relative; display: block; margin-top: 10px; min-height: 4.2em; }
.bewegt .bekommen li { position: absolute; left: 0; right: 0; top: 0; font-size: var(--t-20); opacity: 0; transform: translateY(8px); transition: opacity .22s ease, transform .3s var(--k-aus); }
.bewegt .bekommen li.ist-dran { opacity: 1; transform: none; transition-delay: .24s; }
.bewegt .geraete { height: auto; max-height: 100%; aspect-ratio: 10 / 9.4; align-self: end; }
}
@media (min-width: 800px) {
.bewegt .satz { right: auto; width: var(--textbreite); max-width: 13ch; top: calc(var(--kopf) + 8vh); font-size: clamp(2.5rem, min(calc(var(--textbreite) * .15), 10vh), 6.5rem); }
.bewegt .innen { align-content: center; }
.bewegt .bekommen li { color: var(--innen-leise); }
.bewegt .bekommen li.ist-dran { color: var(--innen-text); }
.bewegt .bekommen li::before { transform: scale(.6); transition: transform var(--t-mittel) var(--k-feder); }
.bewegt .bekommen li.ist-dran::before { transform: none; }
}
:root { --t-13: .875rem; --t-15: 1rem; --kopf: calc(60px + env(safe-area-inset-top)); }
@media (min-width: 760px) { :root { --kopf: calc(72px + env(safe-area-inset-top)); } }
.kopf { padding-top: env(safe-area-inset-top); }
.zur-startseite { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: 8px; font-weight: 700; text-decoration: none; color: var(--text); }
.zur-startseite:hover { text-decoration: underline; }
.zur-startseite svg { stroke-width: 2.67; } 
.preis-gruppe { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.preis-pflege .preis-zahl { font-size: clamp(2rem, 13cqi, 3rem); }
@keyframes drehen { 0% { transform: rotate(0); } 45% { transform: rotate(-28deg); } 100% { transform: rotate(0); } }
@media (max-width: 759px) {
.vorzeile { font-size: var(--t-16); }
.kernsatz { font-size: var(--t-17); margin-top: 6px; }
.held-fuss { font-size: var(--t-14); margin-top: 4px; } 
.bewegt .szene { min-height: var(--basis, 100svh); }
.bewegt .strasse-zeile { min-height: 0; }
.strasse-zeile { container-type: size; }
.nachbar-l { height: min(calc(var(--haus-w) * .78), calc((100cqh - var(--boden) - 8px) / 1.26)); }
.nachbar-r { height: min(calc(var(--haus-w) * 1.06), calc((100cqh - var(--boden) - 8px) / 1.26)); }
.fern { bottom: min(calc(var(--boden) + var(--haus-w) * .62), calc(100% - var(--text-unten, 0px) - 78px)); }
.buehne { --haus-w: min(84vw, 430px, var(--haus-max, 430px)); }
.bewegt .innen-text h2 { font-size: clamp(1.75rem, 7.2vw, 2.5rem); overflow-wrap: anywhere; }
.handy { width: 36%; }
.schritt { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.schritt-nr { grid-row: auto; }
.schritt p { grid-column: 1 / -1; max-width: none; margin-top: 8px; }
.schritte { gap: 28px; }
.schritt-bild { height: 120px; margin-bottom: 14px; }
.s3 .schritt-bild { height: 150px; }
.grundsaetze li { grid-template-columns: 52px minmax(0, 1fr); align-items: center; }
.grundsaetze .ding { grid-row: auto; }
.grundsaetze p { grid-column: 1 / -1; max-width: none; margin-top: 8px; }
.leiste { column-gap: 14px; }
.leiste-knopf { padding: 0 14px; font-size: var(--t-16); }
.leiste-umfang b { font-size: var(--t-14); }
}
@media (max-width: 759px) {
.bewegt .buehne.kurz .vorzeile, .bewegt .buehne.kurz .hinweis { display: none; }
.bewegt .buehne.kurz h1 { font-size: min(11.8vw, calc(var(--basis, 100svh) * .08)); }
.bewegt .innen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); container-type: inline-size;
padding-bottom: calc(var(--leiste-h) + 26px + env(safe-area-inset-bottom)); }
.bewegt .geraete { width: auto; height: min(100%, calc((100cqw - 2 * var(--rand)) * .94)); max-width: 100%; aspect-ratio: 10 / 9.4; justify-self: center; align-self: end; container-type: size; }
.bewegt .laptop { width: min(92cqw, 97.9cqh); }
.bewegt .handy { width: min(36cqw, 38.3cqh); }
.paket-marke { width: 78px; height: 78px; font-size: var(--t-14); }
}
.fuss { padding-bottom: calc(var(--leiste-h) + 40px + env(safe-area-inset-bottom)); }
@media (min-width: 760px) {
.fern { left: calc(var(--links) + var(--textbreite) + 24px); }
.strasse-zeile { container-type: size; }
.nachbar-l { height: min(calc(var(--haus-w) * .3), calc((100cqh - var(--boden) - var(--text-unten, 0px) - 12px) / 1.26)); }
}
@media (min-width: 760px) and (max-width: 1059px) {
.leiste { grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 20px; }
.leiste-name, .leiste.mit-name .leiste-name { display: none; }
.leiste-umfang { grid-column: 1; } .leiste-preis { grid-column: 2; } .leiste-knopf { grid-column: 3; }
.leiste-umfang b { white-space: normal; }
}
html:not(.bewegt) .innen { padding-bottom: calc(13% + 24px); }
.sb-blatt { left: calc(50% - 134px); }
.sb-brief { left: calc(50% - 122px); }
.s3 .sb-haus::before { display: none; }
.s3 .sb-offen { bottom: 108px; padding: 2px 8px; transform: translateX(-50%); }
@media (min-width: 760px) { .fuss { padding-bottom: calc(var(--leiste-h) + 30px + env(safe-area-inset-bottom)); } }
.bewegt .tafel-innen { transform: none; transition: none; transform-style: flat; will-change: auto; }
.bewegt .tafel b { -webkit-backface-visibility: visible; backface-visibility: visible; }
.bewegt .tafel .zu { transform: scaleX(1); }
.bewegt .tafel .auf { transform: scaleX(0); }
.bewegt .szene, .bewegt .innen-rahmen, .bewegt .innen { will-change: auto; }
.bewegt .buehne.kamera .szene, .bewegt .buehne.kamera .innen-rahmen, .bewegt .buehne.kamera .innen { will-change: transform, opacity; }
.bewegt .buehne.kamera .szene *:not(.held-text), .bewegt .buehne.kamera .szene *::before, .bewegt .buehne.kamera .szene *::after { will-change: auto; } 
@media (max-width: 759px) { .schreibt .leiste { transform: translateY(110%); opacity: 0; visibility: hidden; } }
html:not(.bewegt) .tafel-innen { transform: none; }
html:not(.bewegt) .tafel .zu { visibility: hidden; }
html:not(.bewegt) .tafel .auf { transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; }
}
html:not(.bewegt) .schild-text .neu { animation: none !important; }
html:not(.bewegt) .tafel-innen, html:not(.bewegt) .knopf, html:not(.bewegt) .leiste, html:not(.bewegt) .handy, html:not(.bewegt) .laptop,
html:not(.bewegt) .menue span, html:not(.bewegt) .navigation, html:not(.bewegt) .fragen summary::before, html:not(.bewegt) .fragen summary::after,
html:not(.bewegt) .bewegung-knopf::after, html:not(.bewegt) .kopieren-ok, html:not(.bewegt) .kopieren-text, html:not(.bewegt) .b-punkt { transition: none !important; }
html:not(.bewegt) .geraete *, html:not(.bewegt) .anfrage-status { animation: none !important; }
html:not(.bewegt) .knopf:active, html:not(.bewegt) .kopieren:active { transform: none; }
html:not(.bewegt) .geraete[data-satz-zeigt] .handy { transform: rotate(-4deg); }
@media (forced-colors: active) {
.menue span { background: CanvasText; forced-color-adjust: none; }
.knopf, .kopieren, .bewegung-knopf { border: 2px solid ButtonText; }
.schild-text { color: CanvasText; text-shadow: none; }
.leiste { border-top: 2px solid CanvasText; }
}
@media print {
:root, :root[data-theme="dark"] { --grund: #fff; --grund-2: #fff; --flaeche: #fff; --text: #000; --leise: #222; --linie: #999; --band: #fff; --band-text: #000; --band-leise: #222; --email: #fff; }
html, body { background: #fff !important; color: #000 !important; }
.kopf, .leiste, .himmel, .strasse-zeile, .hinweis, .schild, .geraete, .innen-raum, .himmel-saetze, .anfrage-form, .kopieren, .skip-link, .schritt-bild, .ding, .fuss-links { display: none !important; }
.bewegt .gang, .gang { height: auto !important; margin: 0; }
.buehne, .bewegt .buehne { position: static !important; display: block !important; height: auto !important; }
.szene, .bewegt .szene, .innen, .bewegt .innen { position: static !important; transform: none !important; opacity: 1 !important; min-height: 0; padding: 12px 0 !important; background: none !important; color: #000 !important; display: block !important; }
.held-text, .innen-text, .bewegt .innen-text { position: static !important; opacity: 1 !important; transform: none !important; width: auto !important; color: #000 !important; }
.vorzeile, .held-fuss { color: #222 !important; }
.bekommen li, .bewegt .bekommen li { position: static !important; opacity: 1 !important; transform: none !important; color: #000 !important; }
.anfrage-ohne-js { display: block !important; color: #000 !important; }
.preis { background: none; color: #000; border: 1px solid #000; }
.preis-vor, .preis-oder { color: #000; }
.preis::before, .preis::after, .paket-marke { display: none; }
.abschnitt, .kontakt { padding: 24px 0; }
a { color: #000; }
details > .antwort { display: block; }
}