@font-face { font-family: "Manrope"; src: url("../schrift/Manrope-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../schrift/Manrope-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../schrift/Manrope-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../schrift/Manrope-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root, html[data-look="a"] {
  --papier: #ffffff;        
  --papier-2: #eef4f2;      
  --flaeche: #f7faf9;       
  --tinte: #14302f;         
  --tinte-2: #46605e;       
  --petrol: #1d5c5c;        
  --petrol-dunkel: #134245;
  --petrol-hell: #d9e9e5;   
  --akzent: #94500a;        
  --akzent-hell: #f3e3c9;
  --linie: #d7e0dd;
  --licht: #3ddc97;         
  --auf-petrol: #ffffff;
  --schatten-text: none;
  --himmel: var(--papier-2);   
  color-scheme: light;
}
html[data-look="b"] {
  --papier: #0b1416;
  --papier-2: #101c1f;
  --flaeche: #142326;
  --tinte: #eaf2f0;
  --tinte-2: #a9bdb9;
  --petrol: #3aa39f;
  --petrol-dunkel: #2e8c8a;
  --petrol-hell: #163d3d;
  --akzent: #e0a85a;
  --akzent-hell: #3a2d16;
  --linie: #22393b;
  --licht: #3ddc97;
  --auf-petrol: #06181a;
  --himmel: var(--papier-2);
  color-scheme: dark;
}
:root {
  --sans: "Manrope", "Segoe UI", Roboto, Arial, sans-serif;
  --rand: clamp(1.25rem, 5vw, 4rem);
  --kopf-hoehe: 4.25rem;
  --breit: 72rem;
  --innen: max(var(--rand), calc((100% - var(--breit)) / 2 + var(--rand)));
  --rund: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-hoehe) + 1rem); }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 1.0625rem/1.6 var(--sans); }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--petrol-dunkel); }
html[data-look="b"] a:hover { color: var(--tinte); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 3px; }
h1, h2, h3 { font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 0.5em; text-wrap: balance; }
h1, h2 { hyphens: auto; overflow-wrap: break-word; }   
h1 { font-size: clamp(2.2rem, 7.5vw, 4.25rem); }
h2 { font-size: clamp(1.75rem, 5vw, 2.75rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; }
p, li { max-width: 68ch; }
strong { font-weight: 700; }
.nur-lesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 0.75rem; top: -4rem; z-index: 50; background: var(--petrol); color: var(--auf-petrol); padding: 0.6rem 1rem; font-weight: 700; text-decoration: none; border-radius: var(--rund); }
.sprung:focus { top: 0.75rem; }
.breite { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); }
.vorzeile { font: 700 0.8rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent); margin: 0 0 0.9rem; }
.einleitung { font-size: 1.125rem; color: var(--tinte-2); max-width: 36rem; }
.leise { color: var(--tinte-2); font-size: 0.95rem; }

.kopf { position: sticky; top: 0; z-index: 20; background: var(--papier); border-bottom: 1px solid var(--linie); }
.kopf-leiste { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--kopf-hoehe); padding: 0.5rem var(--innen); }
.marke { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--tinte); text-decoration: none; font: 800 1.05rem/1 var(--sans); letter-spacing: -0.01em; }
.marke img { width: 28px; height: 28px; }
.menue-knopf, .menue-zu { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--linie); border-radius: 999px; color: var(--tinte); text-decoration: none; font: 700 0.9rem/1 var(--sans); background: var(--flaeche); }
.menue { display: none; }
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue:target, .menue.offen { display: flex; position: fixed; inset: 0; z-index: 30; flex-direction: column; justify-content: center; gap: 1.75rem; padding: 5rem var(--rand) 3rem; background: var(--papier); overflow: auto; }
.menue:target ul a, .menue.offen ul a { display: block; padding: 0.45rem 0; font: 800 1.9rem/1.2 var(--sans); letter-spacing: -0.02em; color: var(--tinte); text-decoration: none; }
.menue a[aria-current="page"] { color: var(--petrol); }
.menue-zu { position: absolute; top: 0.85rem; right: var(--rand); }

@media (max-width: 63.99rem) {
  .menue:target, .menue.offen { justify-content: flex-start; }
  .menue:target > :first-child, .menue.offen > :first-child { margin-top: auto; }
  .menue:target > .menue-klein, .menue.offen > .menue-klein { margin-bottom: auto; }
}
.kopf-telefon { color: var(--tinte); text-decoration: none; font-weight: 700; white-space: nowrap; }
.marke span, .menue ul a, .kopf .knopf { white-space: nowrap; }
@media (min-width: 64rem) and (max-width: 76rem) { .kopf-telefon { display: none; } }
body.menue-offen { overflow: hidden; }
.menue-klein { display: grid; gap: 0.5rem; }
.menue-klein p { margin: 0; color: var(--tinte-2); font-size: 0.95rem; }
.menue-klein a { color: var(--tinte-2); display: inline-block; padding: 0.35rem 0; }
@media (min-width: 64rem) {
  .menue-knopf, .menue-zu, .menue-klein { display: none; }
  .menue, .menue:target, .menue.offen { display: flex; position: static; flex-direction: row; align-items: center; gap: 1.5rem; padding: 0; background: none; }
  .menue ul { display: flex; gap: 1.4rem; }
  .menue ul a, .menue:target ul a, .menue.offen ul a { font: 600 0.95rem/1 var(--sans); color: var(--tinte-2); text-decoration: none; padding: 0.6rem 0; letter-spacing: 0; }
  .menue ul a:hover, .menue a[aria-current="page"] { color: var(--tinte); }
}

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 48px; padding: 0.75rem 1.4rem; border-radius: 999px; background: var(--petrol); color: var(--auf-petrol); font: 700 1rem/1.2 var(--sans); text-decoration: none; border: 1px solid var(--petrol); cursor: pointer; }
.knopf:hover { background: var(--petrol-dunkel); border-color: var(--petrol-dunkel); color: var(--auf-petrol); }
.knopf-leise { background: transparent; color: var(--tinte); border-color: var(--linie); }
.knopf-leise:hover { background: var(--petrol-hell); color: var(--tinte); border-color: var(--petrol-hell); }
.knopf-klein { min-height: 44px; padding: 0.5rem 1.1rem; font-size: 0.9rem; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.4rem 0 0; }

.abschnitt { padding: clamp(3.5rem, 9vw, 7rem) 0; }
.abschnitt-eng { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.band { background: var(--papier-2); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.drei { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.drei li { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.4rem 1.4rem 1.5rem; }
.drei h3 { margin-bottom: 0.4rem; }
.drei p { margin: 0; color: var(--tinte-2); }
@media (min-width: 48rem) { .drei { grid-template-columns: repeat(3, 1fr); } }
.schritte { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; counter-reset: s; }
.schritte li { counter-increment: s; border-top: 2px solid var(--linie); padding-top: 1rem; }
.schritte li::before { content: counter(s, decimal-leading-zero); display: block; font: 800 0.85rem/1 var(--sans); letter-spacing: 0.12em; color: var(--akzent); margin-bottom: 0.7rem; }
.schritte h3 { font-size: 1.2rem; margin-bottom: 0.3rem; }
.schritte p { margin: 0; color: var(--tinte-2); }
@media (min-width: 48rem) { .schritte { grid-template-columns: repeat(3, 1fr); gap: 2rem; } .schritte.sechs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .schritte.sechs { grid-template-columns: repeat(6, 1fr); gap: 1.5rem; } }
.haken { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.haken li { position: relative; padding: 0.4rem 0 0.4rem 1.8rem; }
.haken li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 1rem; height: 0.5rem; border-left: 2px solid var(--petrol); border-bottom: 2px solid var(--petrol); transform: translateY(-60%) rotate(-45deg); }
.nicht { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.nicht li { position: relative; padding: 0.4rem 0 0.4rem 1.8rem; color: var(--tinte-2); }
.nicht li::before { content: "–"; position: absolute; left: 0.2rem; top: 0.4rem; color: var(--akzent); font-weight: 800; }
.kennzahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1rem; margin: 2rem 0 0; }
.kennzahlen div { border-top: 2px solid var(--linie); padding-top: 0.9rem; }
.kennzahlen dt { font: 700 0.75rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinte-2); }
.kennzahlen dd { margin: 0.3rem 0 0; font: 800 clamp(2rem, 6vw, 3rem)/1 var(--sans); letter-spacing: -0.02em; color: var(--tinte); }
.kennzahlen dd.zusatz { margin: 0.3rem 0 0; font: 400 0.95rem/1.4 var(--sans); color: var(--tinte-2); }
@media (min-width: 48rem) { .kennzahlen { grid-template-columns: repeat(4, 1fr); } }
.beispielwert { margin: 1.25rem 0 0; color: var(--tinte-2); font-size: 0.875rem; }
.textseite { padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(3rem, 8vw, 6rem); }
.textseite .breite { max-width: 48rem; }
.textseite p, .textseite li { overflow-wrap: anywhere; }   
.textseite h1 { font-size: clamp(1.75rem, 6.6vw, 3.25rem); }   
.textseite h2 { font-size: clamp(1.4rem, 3.5vw, 1.8rem); margin-top: 2.25rem; }
.textseite .platzhalter { padding: 1rem 1.2rem; border: 1px dashed var(--akzent); border-radius: var(--rund); color: var(--tinte-2); background: var(--flaeche); }
.tabelle { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.tabelle th, .tabelle td { text-align: left; vertical-align: top; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--linie); }
.tabelle th { font-weight: 700; color: var(--tinte-2); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.tabelle-hinweis { font-size: 0.875rem; color: var(--tinte-2); }

@media (max-width: 40rem) {
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; }
  .tabelle tr { padding: 0.75rem 0; border-bottom: 1px solid var(--linie); }
  .tabelle td { border: 0; padding: 0.15rem 0; }
  .tabelle td:first-child { font-weight: 700; padding-bottom: 0.3rem; }
  .tabelle td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; color: var(--tinte-2); font-weight: 700; }
}
details { border-top: 1px solid var(--linie); padding: 0.4rem 0; }
details:last-of-type { border-bottom: 1px solid var(--linie); }
summary { cursor: pointer; font-weight: 700; padding: 0.6rem 0; min-height: 44px; display: flex; align-items: center; }
details p { color: var(--tinte-2); }

.formular { display: grid; gap: 1.1rem; max-width: 44rem; }
.formular .zwei { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .formular .zwei { grid-template-columns: 1fr 1fr; } }
.formular fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.formular .gruppe { border: 1px solid var(--linie); border-radius: var(--rund); padding: 0.9rem 1rem 1rem; display: grid; gap: 0.5rem; background: var(--flaeche); }
.formular legend { padding: 0 0.35rem; font-weight: 700; }
.formular label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.formular .wahl { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.formular .wahl label { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 400; margin: 0; min-height: 44px; }
.formular input[type="text"], .formular input[type="tel"], .formular input[type="email"], .formular input[type="url"], .formular select, .formular textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.85rem; border: 1px solid var(--linie); border-radius: var(--rund); background: var(--flaeche); color: var(--tinte); font: 400 1rem/1.4 var(--sans); }
.formular textarea { min-height: 6.5rem; resize: vertical; }
.formular input[type="radio"], .formular input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--petrol); margin: 0; }
.formular .fang { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.formular .fuss-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: 0.25rem; }
.formular .fuss-zeile p { margin: 0; color: var(--tinte-2); font-size: 0.95rem; }
.pflicht { color: var(--akzent); font-weight: 700; }
.datenschutz-zeile { margin: 0; color: var(--tinte-2); font-size: 0.9rem; }
.formular :disabled { cursor: not-allowed; }
.formular .knopf[disabled] { background: var(--linie); border-color: var(--linie); color: var(--tinte-2); }
input::placeholder, textarea::placeholder { color: #7a8a88; }

.fuss { background: var(--papier-2); border-top: 1px solid var(--linie); padding: 3rem 0 3rem; font-size: 0.9375rem; }
.fuss .fuss-raster { display: grid; gap: 2rem; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.fuss ul a { color: var(--tinte-2); display: inline-block; padding: 0.35rem 0; }
.marke-fuss { margin: 0; }
.marke-fuss img { width: 24px; height: 24px; }
.fuss-marke p:not(.marke) { color: var(--tinte-2); margin: 0.75rem 0 0; max-width: 24rem; }
.fuss-titel { font: 700 0.75rem/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent); margin: 0 0 0.6rem; }
.fuss-spalte address, .fuss-spalte p { font-style: normal; color: var(--tinte-2); margin: 0 0 0.6rem; }
.fuss-spalte a { color: var(--tinte-2); }
.fuss .fuss-unten { display: grid; gap: 0.35rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); }
.fuss-unten p { margin: 0; color: var(--tinte-2); font-size: 0.85rem; max-width: none; }
.fuss-unten a { color: var(--tinte-2); }
@media (min-width: 48rem) { .fuss .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.geraet { container-type: inline-size; width: min(100%, 22rem); margin: 0 auto; }
.geraet-rand { position: relative; aspect-ratio: 9 / 19; border-radius: 12cqw; padding: 3cqw; background: #17191c; box-shadow: none; border: 1px solid #2c3034; }
html[data-look="b"] .geraet-rand { background: #1c2528; border-color: #2d3d41; }
.geraet-kerbe { position: absolute; top: 3.2cqw; left: 50%; width: 26cqw; height: 5.5cqw; transform: translateX(-50%); background: #17191c; border-radius: 0 0 4cqw 4cqw; z-index: 2; }
html[data-look="b"] .geraet-kerbe { background: #1c2528; }
.m-rumpf { position: relative; height: 100%; overflow-y: auto; overflow-x: hidden; border-radius: 9.5cqw; background: #fff; color: #1a1a1a; scrollbar-width: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.m-rumpf::-webkit-scrollbar { display: none; }
.m-seite { --e: 1cqw; font: 400 calc(3.6 * var(--e))/1.45 var(--sans); --k-farbe: #1d3a5c; --k-auf: #fff; }
.farbe-sicherheit .m-seite { --k-farbe: #1d3a5c; } .farbe-reinigung .m-seite { --k-farbe: #1d5c5c; } .farbe-facility .m-seite { --k-farbe: #5c3d1d; } .farbe-andere .m-seite { --k-farbe: #3a3a5c; }
.m-kopf { display: flex; align-items: center; justify-content: space-between; padding: calc(9 * var(--e)) calc(5 * var(--e)) calc(3 * var(--e)); }
.m-marke { font-weight: 800; font-size: calc(4.2 * var(--e)); letter-spacing: -0.02em; color: var(--k-farbe); }
.m-menue { display: inline-grid; gap: calc(1 * var(--e)); } .m-menue i { display: block; width: calc(5 * var(--e)); height: calc(0.6 * var(--e)); background: #1a1a1a; border-radius: calc(1 * var(--e)); }
.m-held { background: var(--k-farbe); color: var(--k-auf); padding: calc(7 * var(--e)) calc(5 * var(--e)) calc(7 * var(--e)); }
.m-vorzeile { margin: 0 0 calc(2 * var(--e)); font-weight: 700; font-size: calc(2.7 * var(--e)); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.m-h1 { margin: 0 0 calc(2.5 * var(--e)); font-weight: 800; font-size: calc(7.4 * var(--e)); line-height: 1.05; letter-spacing: -0.02em; }
.m-h2 { margin: 0 0 calc(1.5 * var(--e)); font-weight: 800; font-size: calc(5 * var(--e)); line-height: 1.1; letter-spacing: -0.02em; }
.m-h3 { margin: 0 0 calc(2 * var(--e)); font-weight: 700; font-size: calc(3.6 * var(--e)); }
.m-text { margin: 0 0 calc(3 * var(--e)); font-size: calc(3.4 * var(--e)); opacity: 0.92; }
.m-knoepfe { display: flex; flex-wrap: wrap; gap: calc(2 * var(--e)); margin: 0; }
.m-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: calc(10 * var(--e)); padding: 0 calc(4 * var(--e)); border-radius: calc(99 * var(--e)); background: #fff; color: var(--k-farbe); font-weight: 700; font-size: calc(3.3 * var(--e)); border: 1px solid #fff; }
.m-knopf-leise { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.m-block { padding: calc(6 * var(--e)) calc(5 * var(--e)); border-top: 1px solid #e6e6e6; }
.m-block .m-vorzeile { color: var(--k-farbe); opacity: 1; }
.m-leistungen { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(2 * var(--e)); }
.m-leistungen li { display: grid; gap: calc(0.5 * var(--e)); padding: calc(3 * var(--e)) calc(3.5 * var(--e)); border: 1px solid #e6e6e6; border-radius: calc(2 * var(--e)); }   
.m-leistungen strong { font-size: calc(3.6 * var(--e)); } .m-leistungen span { font-size: calc(3.1 * var(--e)); color: #4a4a4a; }
.m-formular { display: grid; gap: calc(2 * var(--e)); margin-top: calc(3 * var(--e)); }
.m-formular .m-knopf { background: var(--k-farbe); color: #fff; border-color: var(--k-farbe); margin-top: calc(1 * var(--e)); }
.m-feld { display: block; min-height: calc(9 * var(--e)); padding: calc(2.2 * var(--e)) calc(3 * var(--e)); border: 1px solid #cfd4d8; border-radius: calc(2 * var(--e)); font-size: calc(3.2 * var(--e)); color: #6b7276; background: #fafafa; }
.m-feld-wahl { color: #1a1a1a; background: #fff; }
.m-jobs { background: #f5f6f7; }
.m-fuss { padding: calc(5 * var(--e)) calc(5 * var(--e)) calc(7 * var(--e)); font-size: calc(2.8 * var(--e)); color: #666; text-align: center; }
.geraet-hinweis { margin: 0.9rem 0 0; text-align: center; font-size: 0.85rem; color: var(--tinte-2); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print {
  .kopf, .menue-knopf, .sprung, .geraet-hinweis { display: none; }
  body { background: #fff; color: #000; }
  .fuss { background: none; }
}

.m-hell .m-knopf { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.m-hell .m-knopf-leise { background: transparent; color: #1a1a1a; border-color: rgba(0, 0, 0, 0.45); }
.m-hell .m-held { border-bottom: 1px solid #e6e6e6; }

.buehne { background: var(--himmel); padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(2.5rem, 6vw, 5rem); overflow: clip; }
.buehne .breite { display: grid; gap: 2.5rem; }
.buehne h1 { margin-bottom: 0.4em; }
.buehne h1 em { font-style: normal; color: var(--petrol); }
.buehne .einleitung { font-size: clamp(1.0625rem, 2.2vw, 1.2rem); }
.eingaben { display: grid; gap: 1rem; margin: 1.75rem 0 0; }   
.eingaben legend { font-weight: 800; padding: 0; margin-bottom: 0.25rem; }
.eingaben fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.5rem; }
.pillen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pillen label { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.9rem; border: 1px solid var(--linie); border-radius: 999px; background: var(--papier); font-weight: 600; cursor: pointer; }
.pillen label:has(input:checked) { background: var(--petrol-hell); border-color: var(--petrol); color: var(--tinte); }
.pillen input { width: 1.1rem; height: 1.1rem; accent-color: var(--petrol); margin: 0; }
.eingaben .zwei { display: grid; gap: 0.75rem; }
@media (min-width: 30rem) { .eingaben .zwei { grid-template-columns: 1fr 1fr; } }
.eingaben label.feld { display: grid; gap: 0.3rem; font-weight: 700; font-size: 0.9rem; }
.eingaben input[type="text"] { width: 100%; min-height: 48px; padding: 0.6rem 0.85rem; border: 1px solid var(--linie); border-radius: var(--rund); background: var(--papier); color: var(--tinte); font: 400 1rem/1.4 var(--sans); }
.farben { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.farben label { position: relative; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; border: 3px solid var(--flaeche); outline: 1px solid var(--linie); }
.farben label:has(input:checked) { outline: 3px solid var(--akzent); }
.farben input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.farben .f-1 { background: #1d3a5c; } .farben .f-2 { background: #1d5c5c; } .farben .f-3 { background: #2b5a3c; } .farben .f-4 { background: #6b2334; } .farben .f-5 { background: #5c3d1d; } .farben .f-6 { background: #2e3338; }
.eingaben-hinweis { margin: 0; font-size: 0.85rem; color: var(--tinte-2); }
.buehne-geraet { display: grid; justify-items: center; align-content: start; }
.buehne-geraet .geraet { width: min(100%, 20rem); }
@media (min-width: 64rem) {
  .buehne { padding-top: clamp(3rem, 6vw, 5rem); }
  .buehne .breite { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 4rem; }
  .buehne-geraet { position: sticky; top: calc(var(--kopf-hoehe) + 1.5rem); }
  .buehne-geraet .geraet { width: min(100%, 22rem); }
}

.tueren { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.tueren a { display: grid; gap: 0.35rem; padding: 1.25rem 1.3rem 1.35rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); color: var(--tinte); text-decoration: none; min-height: 44px; }   
.tueren a:hover { border-color: var(--petrol); }
.tueren a[aria-current="true"] { border-color: var(--petrol); background: var(--petrol-hell); }
.tueren strong { font-size: 1.25rem; letter-spacing: -0.01em; }
.tueren span { color: var(--tinte-2); font-size: 0.95rem; }
@media (min-width: 48rem) { .tueren { grid-template-columns: repeat(3, 1fr); } }

.antwort .breite { display: grid; gap: 2rem; }
.antwort .geraet { width: min(100%, 18rem); }
.antwort-beleg { display: grid; gap: 1rem; align-content: start; }
.mail-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1.1rem 1.2rem; font-size: 0.95rem; max-width: 26rem; }
.mail-karte .mail-kopf { display: grid; gap: 0.15rem; padding-bottom: 0.7rem; margin-bottom: 0.7rem; border-bottom: 1px solid var(--linie); color: var(--tinte-2); font-size: 0.85rem; }
.mail-karte .mail-kopf strong { color: var(--tinte); font-size: 1rem; }
.mail-karte dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.9rem; margin: 0; }
.mail-karte dt { color: var(--tinte-2); } .mail-karte dd { margin: 0; font-weight: 600; }
@media (min-width: 64rem) { .antwort .breite { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 4rem; } }

.pakete { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.pakete li { display: grid; gap: 0.4rem; align-content: start; padding: 1.5rem 1.4rem 1.6rem; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); }
.pakete .paket-name { font: 800 0.85rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--akzent); margin: 0; }
.pakete .paket-preis { font: 800 clamp(1.9rem, 5vw, 2.5rem)/1 var(--sans); letter-spacing: -0.02em; margin: 0.3rem 0 0.2rem; }
.pakete .paket-preis small { font-size: 0.95rem; font-weight: 600; color: var(--tinte-2); letter-spacing: 0; }
.pakete p { margin: 0; color: var(--tinte-2); }
.pakete .paket-kern { border-color: var(--petrol); box-shadow: inset 0 0 0 1px var(--petrol); }
@media (min-width: 48rem) { .pakete { grid-template-columns: repeat(3, 1fr); } }

.beispiel-raster { display: grid; gap: 2rem; margin-top: 2rem; }
.beispiel-geraet { container-type: inline-size; width: min(100%, 20rem); margin: 0 auto; }
.beispiel-geraet .geraet-rand { aspect-ratio: 9 / 19; }
.beispiel-bild { display: block; height: 100%; overflow: hidden; border-radius: 9.5cqw; background: #06080c; }
.beispiel-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.beispiel-text { display: grid; gap: 0.5rem; align-content: center; }
.kennzeichen { display: inline-block; padding: 0.25rem 0.7rem; border-radius: 999px; background: var(--akzent-hell); color: var(--tinte); font-size: 0.8rem; font-weight: 700; }
@media (min-width: 64rem) { .beispiel-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 4rem; } }

.abschluss .breite { display: grid; gap: 2rem; }
@media (min-width: 64rem) { .abschluss .breite { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 4rem; align-items: start; } }

.seite-kontakt .abschluss h1 { font-size: clamp(1.9rem, 1.1rem + 2vw, 2.6rem); }

.preis-tabelle td:nth-child(3), .preis-tabelle th:nth-child(3) { white-space: nowrap; text-align: right; }
.preis-tabelle strong { white-space: nowrap; }
@media (max-width: 40rem) { .preis-tabelle td:nth-child(3) { text-align: left; white-space: normal; } }   

.messwert { font-weight: 800; color: var(--petrol); }
html[data-look="b"] .messwert { color: var(--licht); }
.pruef-tabelle td:first-child { font-weight: 700; }

.branche-kopf { background: var(--himmel); padding: clamp(2rem, 6vw, 4.5rem) 0; }
.branche-kopf .breite { display: grid; gap: 2.5rem; }

.branche-kopf h1 { font-size: clamp(1.9rem, 1.1rem + 2.7vw, 3.25rem); }
@media (min-width: 64rem) { .branche-kopf .breite { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 4rem; } }

.fehlerseite { min-height: 60vh; display: grid; align-content: center; padding: clamp(3rem, 8vw, 6rem) 0; }

.buehne { position: relative; }

.geraet-leiste { display: grid; gap: 0.75rem; justify-items: center; margin-top: 1rem; }
.geraet-wahl, .geraet-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.geraet-wahl button[aria-pressed="true"] { background: var(--petrol-hell); border-color: var(--petrol); }
.geraet-meldung { margin: 0; font-size: 0.9rem; color: var(--tinte-2); min-height: 1.4em; text-align: center; }
.qr-dialog { border: 1px solid var(--linie); border-radius: var(--rund); background: var(--flaeche); color: var(--tinte); padding: 1.5rem; max-width: min(92vw, 26rem); }
.qr-dialog::backdrop { background: rgba(10, 20, 20, 0.6); }
.qr-dialog h2 { font-size: 1.4rem; }
.qr-bild svg { width: min(70vw, 16rem); height: auto; display: block; margin: 0.5rem auto; }
.qr-adresse { font-size: 0.8rem; color: var(--tinte-2); word-break: break-all; }

.geraet-tablet { width: min(100%, 30rem); } .geraet-tablet .geraet-rand { aspect-ratio: 3 / 4; border-radius: 5cqw; padding: 2cqw; } .geraet-tablet .m-rumpf { border-radius: 3.5cqw; } .geraet-tablet .geraet-kerbe { display: none; }
.geraet-tablet .m-seite { --e: 0.62cqw; }
.geraet-rechner { width: 100%; } .geraet-rechner .geraet-rand { aspect-ratio: 16 / 10; border-radius: 2cqw; padding: 1.2cqw 1.2cqw 2.4cqw; } .geraet-rechner .m-rumpf { border-radius: 1cqw; } .geraet-rechner .geraet-kerbe { display: none; }
.geraet-rechner .m-seite { --e: 0.4cqw; }
.geraet-rechner .m-leistungen, .geraet-tablet .m-leistungen { grid-template-columns: repeat(3, 1fr); }
.geraet-rechner .m-formular, .geraet-tablet .m-formular { grid-template-columns: 1fr 1fr; } .geraet-rechner .m-formular .m-knopf, .geraet-tablet .m-formular .m-knopf, .geraet-rechner .m-formular .m-h3, .geraet-tablet .m-formular .m-h3 { grid-column: 1 / -1; }
@media (min-width: 64rem) { .buehne-geraet:has(.geraet-rechner), .buehne-geraet:has(.geraet-tablet) { position: static; } .buehne .breite:has(.geraet-rechner) { grid-template-columns: 1fr; } }

body.entwurf-voll .kopf, body.entwurf-voll .buehne-text, body.entwurf-voll main > :not(.buehne), body.entwurf-voll .fuss, body.entwurf-voll .geraet-leiste, body.entwurf-voll .geraet-hinweis { display: none; }
body.entwurf-voll .buehne { padding: 0; min-height: 100svh; background: #fff; }
body.entwurf-voll .buehne .breite { padding: 0; max-width: none; display: block; }
body.entwurf-voll .geraet { width: 100%; } body.entwurf-voll .geraet-rand { aspect-ratio: auto; height: 100svh; border: 0; border-radius: 0; padding: 0; background: #fff; }
body.entwurf-voll .geraet-kerbe { display: none; } body.entwurf-voll .m-rumpf { border-radius: 0; }
@media print {
  
  body.druck-entwurf .buehne-text, body.druck-entwurf .geraet-leiste, body.druck-entwurf .geraet-hinweis, body.druck-entwurf main > :not(.buehne) { display: none !important; }
  body.druck-entwurf .buehne, body.druck-entwurf .buehne .breite { display: block; padding: 0; background: #fff; }
  body.druck-entwurf .geraet { width: 100%; } body.druck-entwurf .geraet-rand { aspect-ratio: auto; border: 0; padding: 0; border-radius: 0; background: #fff; } body.druck-entwurf .geraet-kerbe { display: none; }
  body.druck-entwurf .m-rumpf { height: auto; overflow: visible; border-radius: 0; } body.druck-entwurf .m-seite { --e: 0.6cqw; }
  body.druck-entwurf .m-jobs, body.druck-entwurf .m-kontakt { break-before: page; }
}

.zwei-raster { display: grid; gap: 2rem; margin-top: 2rem; justify-items: center; }
.zwei-geraet { margin: 0; width: min(100%, 20rem); display: grid; gap: 0.75rem; justify-items: center; }
.zwei-geraet .geraet { width: 100%; }
.zwei-geraet .geraet-hinweis { display: none; }
.zwei-geraet figcaption { font-size: 0.9rem; color: var(--tinte-2); text-align: center; }
.zwei-geraet .geraet-knoepfe { margin: 0; }
@media (min-width: 48rem) { .zwei-raster { grid-template-columns: 1fr 1fr; align-items: start; } }

.geraet-alt .m-rumpf { overflow-x: auto; background: #d8d8d8; color: #222; }
.alt-seite { width: 300%; font: 400 calc(2.9 * var(--e, 1cqw))/1.4 Verdana, Arial, sans-serif; background: #fff; color: #222; }
.alt-seite b { font-weight: 700; }
.alt-kopf { display: flex; justify-content: space-between; align-items: center; padding: calc(1.5 * var(--e, 1cqw)) calc(2 * var(--e, 1cqw)); background: linear-gradient(#5b7fb8, #2f4f86); color: #fff; }
.alt-logo { font-weight: 700; font-size: calc(2.6 * var(--e, 1cqw)); letter-spacing: 0.05em; }
.alt-nav { font-size: calc(1.8 * var(--e, 1cqw)); }
.alt-banner { padding: calc(1.5 * var(--e, 1cqw)) calc(2 * var(--e, 1cqw)); background: #f3e8a8; border-bottom: 1px solid #c9b45a; font-size: calc(2.2 * var(--e, 1cqw)); font-weight: 700; color: #7a1d1d; }
.alt-banner small { font-weight: 400; color: #555; }
.alt-tabelle { width: 100%; border-collapse: collapse; }
.alt-tabelle td { vertical-align: top; padding: calc(1.5 * var(--e, 1cqw)); border: 1px solid #bbb; }
.alt-links { width: 22%; background: #eef1f7; } .alt-rechts { width: 20%; background: #eef1f7; text-align: center; }
.alt-seite a { color: #0000ee; text-decoration: underline; }
.alt-lade { display: block; margin-top: calc(1.5 * var(--e, 1cqw)); padding: calc(0.6 * var(--e, 1cqw)); border: 1px solid #999; position: relative; isolation: isolate; background: #fff; font-size: calc(1.7 * var(--e, 1cqw)); color: #333; }
.alt-lade::before { content: ""; position: absolute; inset: 0 57% 0 0; z-index: -1; background: #8fb0e0; }   
.alt-bild { width: 100%; aspect-ratio: 4 / 3; background: #ccc; display: grid; place-items: center; color: #555; font-size: calc(1.7 * var(--e, 1cqw)); }
.alt-fuss { padding: calc(1.5 * var(--e, 1cqw)); text-align: center; font-size: calc(1.6 * var(--e, 1cqw)); color: #666; background: #e9e9e9; }
.alt-cookie { position: sticky; bottom: 0; left: 0; width: 100%; padding: calc(2.5 * var(--e, 1cqw)) calc(3 * var(--e, 1cqw)); background: #222; color: #eee; font: 400 calc(2.6 * var(--e, 1cqw))/1.4 Verdana, Arial, sans-serif; }
.alt-cookie p { margin: 0 0 calc(2 * var(--e, 1cqw)); max-width: none; }
.alt-cookie-knopf { display: inline-block; padding: calc(1.5 * var(--e, 1cqw)) calc(3 * var(--e, 1cqw)); background: #2e7d32; color: #fff; border-radius: 2px; margin-right: calc(1.5 * var(--e, 1cqw)); cursor: pointer; }
.alt-cookie-knopf + .alt-cookie-knopf { background: #666; }
.alt-bogen { border: 1px solid #999; padding: 1rem; background: #fafafa; color: #222; font: 400 0.8rem/1.6 "Courier New", monospace; margin: 0.75rem 0; }
.alt-bogen p { max-width: none; } .alt-bogen-titel { font-weight: 700; text-align: center; }

.angebot-raster { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 64rem) { .angebot-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; align-items: start; } .angebot-wahl { position: sticky; top: calc(var(--kopf-hoehe) + 1rem); } }
.angebot-wahl { display: grid; gap: 1.25rem; }
.angebot-wahl fieldset { border: 1px solid var(--linie); border-radius: var(--rund); padding: 0.9rem 1rem 1rem; background: var(--flaeche); margin: 0; min-width: 0; }
.angebot-wahl legend { padding: 0 0.35rem; font-weight: 800; }
.wahl-liste { display: grid; gap: 0.35rem; }
.wahl-liste label { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.55rem 0.4rem; border-radius: var(--rund); cursor: pointer; min-height: 44px; }
.wahl-liste label:has(input:checked) { background: var(--petrol-hell); }
.wahl-liste input { width: 1.25rem; height: 1.25rem; accent-color: var(--petrol); margin: 0.2rem 0 0; flex: none; }
.wahl-liste small { color: var(--tinte-2); font-size: 0.875rem; }
.wahl-preis { font-weight: 700; color: var(--petrol); white-space: nowrap; }
html[data-look="b"] .wahl-preis { color: var(--licht); }
.angebot-wahl .geraet-knoepfe { justify-content: flex-start; margin: 0; }
.angebot-wahl .geraet-meldung { text-align: left; }

.blatt { background: #fff; color: #111; border: 1px solid var(--linie); border-radius: 4px; padding: clamp(1.1rem, 3vw, 2rem); font-size: 0.9rem; line-height: 1.45; }
html[data-look="b"] .blatt { border-color: #3a4d50; }
.blatt p, .blatt li { max-width: none; }
.blatt-kopf { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 2px solid #111; padding-bottom: 0.75rem; margin-bottom: 0.9rem; }
.blatt-kopf p { margin: 0; }
.blatt-titel { font-weight: 800; font-size: 1.1rem; text-align: right; }
.blatt-klein { font-size: 0.78rem; color: #555; font-weight: 400; }
.blatt-an { margin: 0 0 0.9rem; }
.blatt-platz { color: #6b6b6b; font-style: italic; }
.blatt-h { font-size: 0.95rem; margin: 0.9rem 0 0.35rem; letter-spacing: 0; }
.blatt-umfang, .blatt-nicht { margin: 0 0 0.6rem; padding-left: 1.1rem; }
.blatt-umfang li, .blatt-nicht li { margin: 0.1rem 0; }
.blatt-nicht { columns: 2; column-gap: 1.5rem; font-size: 0.84rem; color: #333; }
.blatt-tabelle { width: 100%; border-collapse: collapse; margin: 0.6rem 0 0.75rem; }
.blatt-tabelle td { padding: 0.35rem 0.2rem; border-bottom: 1px solid #ddd; vertical-align: top; }
.blatt-tabelle tfoot td { border-bottom: 0; color: #333; }
.blatt-betrag { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.blatt-summe td { font-weight: 800; color: #111; border-top: 2px solid #111 !important; font-size: 1rem; }
.blatt-betreuung { padding: 0.6rem 0.75rem; background: #f5f6f7; border-radius: 4px; margin: 0 0 0.75rem; }   
.blatt-text { margin: 0 0 0.6rem; }
.blatt-unterschrift { display: flex; justify-content: space-between; gap: 2rem; margin: 2.2rem 0 0.75rem; }
.blatt-unterschrift span { flex: 1; border-top: 1px solid #111; padding-top: 0.3rem; font-size: 0.8rem; color: #555; }
.blatt-hinweis { color: #6b6b6b; margin: 0; }
@media (max-width: 40rem) { .blatt-nicht { columns: 1; } }
@media print {
  body.druck-blatt .kopf, body.druck-blatt .fuss, body.druck-blatt main > :not(.angebot), body.druck-blatt .angebot > .breite > :not(.angebot-raster), body.druck-blatt .angebot-wahl, body.druck-blatt .blatt-hinweis { display: none !important; }
  body.druck-blatt .angebot { padding: 0; } body.druck-blatt .angebot .breite { padding: 0; max-width: none; } body.druck-blatt .angebot-raster { display: block; margin: 0; }
  body.druck-blatt .blatt { border: 0; padding: 0; font-size: 10.5pt; line-height: 1.35; }
  @page { size: A4; margin: 16mm; }
}

.ein-tag { --tag-t: 0; position: relative; padding-top: 0; }
.tag-uhr { position: sticky; top: var(--kopf-hoehe); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.55rem var(--innen); margin-bottom: clamp(2rem, 5vw, 3.5rem);
  color: var(--tinte); border-bottom: 1px solid var(--linie);
  background: color-mix(in srgb, #dbe7ee calc((1 - var(--tag-t)) * 100%), #c9d6e2 calc(var(--tag-t) * 100%)); }   
html[data-look="b"] .tag-uhr { background: color-mix(in srgb, #10262c calc((1 - var(--tag-t)) * 100%), #2d2214 calc(var(--tag-t) * 100%)); }
.tag-zeit { font: 800 1.4rem/1 var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tag-ort { font-size: 0.85rem; color: var(--tinte-2); }
.tag-stationen { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: clamp(3rem, 8vw, 6rem); }
.tag-marke { margin: 0 0 1rem; font-weight: 700; color: var(--tinte-2); }
.tag-marke time { display: inline-block; min-width: 4.2rem; padding: 0.2rem 0.6rem; margin-right: 0.5rem; border-radius: 999px; background: var(--petrol); color: var(--auf-petrol); font-variant-numeric: tabular-nums; }
.tag-inhalt { display: grid; gap: 1.5rem; align-items: start; }
.tag-text h3 { font-size: clamp(1.35rem, 3.2vw, 1.8rem); }
.tag-text p { color: var(--tinte-2); }
.tag-geraet { width: min(100%, 19rem); margin: 0 auto; }
@media (min-width: 64rem) { .tag-inhalt { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; } .tag-bewerbung .tag-inhalt { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.9fr); } }

.such-seite { padding: 10cqw 5cqw 6cqw; font: 400 3.4cqw/1.45 var(--sans); color: #1a1a1a; }
.such-feld { margin: 0 0 4cqw; padding: 2.5cqw 4cqw; border: 1px solid #cfd4d8; border-radius: 99cqw; background: #fff; font-size: 3.6cqw; }
.such-treffer { display: grid; gap: 1cqw; margin: 0 0 4cqw; padding: 3cqw 0; border-top: 1px solid #e6e6e6; }
.such-treffer strong { font-size: 3.9cqw; color: #1a3d8f; }
.such-treffer span { font-size: 3.1cqw; color: #4a4a4a; }
.such-adresse { color: #1d6b3a !important; }
.such-leer strong { color: #4a5b7a; } .such-leer span { color: #666; }

.kb-formular { display: grid; gap: calc(2 * var(--e)); margin-top: calc(3 * var(--e)); }
.kb-feld { display: grid; gap: calc(0.8 * var(--e)); font-size: calc(3.1 * var(--e)); font-weight: 700; color: #1a1a1a; }
.kb-feld input, .kb-feld select { width: 100%; min-height: calc(10 * var(--e)); padding: calc(2 * var(--e)) calc(3 * var(--e)); border: 1px solid #cfd4d8; border-radius: calc(2 * var(--e)); font: 400 calc(3.4 * var(--e))/1.3 var(--sans); background: #fff; color: #1a1a1a; }
.kb-gruppe { border: 1px solid #e6e6e6; border-radius: calc(2 * var(--e)); padding: calc(2 * var(--e)) calc(3 * var(--e)); margin: 0; display: flex; flex-wrap: wrap; gap: calc(1 * var(--e)) calc(4 * var(--e)); font-size: calc(3.1 * var(--e)); color: #1a1a1a; }
.kb-gruppe legend { font-weight: 700; padding: 0 calc(1 * var(--e)); }
.kb-gruppe label { display: inline-flex; align-items: center; gap: calc(1.5 * var(--e)); min-height: calc(9 * var(--e)); }
.kb-gruppe input { width: calc(4 * var(--e)); height: calc(4 * var(--e)); margin: 0; accent-color: var(--k-farbe); }
.kb-knopf { border: 0; cursor: pointer; font-family: var(--sans); }
.kb-hinweis { margin: 0; font-size: calc(2.8 * var(--e)); color: #555; }
[dir="rtl"] .kb-formular { text-align: right; }
.sprachen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0.5rem; }
.sprachen button[aria-pressed="true"] { background: var(--petrol-hell); border-color: var(--petrol); }
.kb-mail dd { min-height: 1.4em; }
.kb-zeit { margin: 0.75rem 0 0; }
.bewertung .sterne { color: var(--akzent); letter-spacing: 0.1em; }
.bewertung p { margin: 0 0 0.5rem; font-size: 1.05rem; }
.pruef-zeile { margin: 0; padding: 0.9rem 1rem; background: #14302f; color: #d9e9e5; border-radius: var(--rund); font-size: 0.82rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; max-width: 46rem; }
.kb-formular .m-knopf { background: var(--k-farbe); color: #fff; border-color: var(--k-farbe); }

.ordner-raster { display: grid; gap: 2rem; margin-top: 2rem; }
@media (min-width: 64rem) { .ordner-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: start; } }
.ordner { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 1rem 1.1rem; font-size: 0.95rem; }
.ordner details { border: 0; padding: 0; }
.ordner summary { min-height: 40px; padding: 0.35rem 0; gap: 0.5rem; }
.ordner summary::before { content: ""; width: 1rem; height: 0.8rem; border-radius: 2px 2px 3px 3px; background: var(--akzent); flex: none; }
.ordner ul { list-style: none; margin: 0; padding: 0 0 0 1.25rem; }
.ordner li { margin: 0; max-width: none; }
.ordner-datei { display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 40px; padding: 0.3rem 0; border-top: 1px solid var(--linie); }
.ordner-datei a { text-decoration: none; display: inline-flex; gap: 0.5rem; align-items: center; min-width: 0; }
.ordner-datei a::before { content: ""; width: 0.75rem; height: 0.95rem; border: 1.5px solid var(--tinte-2); border-radius: 2px; flex: none; }
.ordner-datei span { color: var(--tinte-2); font-size: 0.85rem; white-space: nowrap; }
.ordner-inhalt { margin-top: 1rem; }
.ordner-inhalt pre { margin: 0; max-height: 24rem; overflow: auto; padding: 0.9rem 1rem; background: #14302f; color: #d9e9e5; border-radius: var(--rund); font-size: 0.78rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.ordner-inhalt .ordner-titel { font-weight: 700; margin: 0 0 0.4rem; display: flex; justify-content: space-between; gap: 1rem; }
.ordner-inhalt .ordner-titel small { color: var(--tinte-2); font-weight: 400; }
.wieder { display: grid; gap: 1rem; justify-items: center; }
.wieder .geraet { width: min(100%, 19rem); }
.wieder-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.wieder-schirm { position: absolute; inset: 0; display: none; padding: 12cqw 6cqw; font: 400 3.6cqw/1.5 var(--sans); color: #1a1a1a; background: #fff; }
.wieder-schirm.da { display: block; }
.wieder-schirm .wieder-h { font-size: 6cqw; font-weight: 800; margin: 6cqw 0 2cqw; letter-spacing: -0.02em; max-width: none; }
.wieder-schirm.weg { background: #f2f2f2; color: #333; font-family: ui-monospace, "Courier New", monospace; }
.wieder-schirm ul { list-style: none; margin: 3cqw 0 0; padding: 0; display: grid; gap: 1cqw; font-size: 3cqw; color: #4a4a4a; font-family: ui-monospace, "Courier New", monospace; }
.wieder-schirm li::before { content: "✓ "; color: #1d6b3a; }
.wieder-balken { height: 2.5cqw; background: #e3e3e3; border-radius: 99cqw; overflow: hidden; margin: 3cqw 0; }
.wieder-balken i { display: block; height: 100%; width: 0; background: var(--petrol); transition: width 0.3s linear; }
.wieder-text { margin: 0; color: var(--tinte-2); text-align: center; max-width: 30rem; }

.blaupause-schalter { margin-top: 1rem; }
html.blaupause main section, html.blaupause .kopf, html.blaupause .fuss { outline: 1px dashed color-mix(in srgb, var(--licht) 70%, var(--tinte)); outline-offset: -1px; }
html.blaupause [data-warum] { position: relative; outline: 1px solid var(--licht); outline-offset: 2px; }
.bp-zettel { display: none; }
html.blaupause .bp-zettel { display: block; position: absolute; left: 0; top: 100%; z-index: 6; max-width: 20rem; margin-top: 0.3rem; padding: 0.35rem 0.6rem; border-radius: 4px; background: #14302f; color: #d9e9e5; font: 400 0.75rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; box-shadow: none; }
html.blaupause .bp-zettel::before { content: "Warum so gebaut: "; color: var(--licht); font-weight: 700; }
.blaupause-tafel { position: fixed; right: 0; bottom: 0; z-index: 40; width: min(100%, 36rem); max-height: 80vh; overflow: auto; padding: 1rem 1.1rem 1.2rem; background: #0f2423; color: #e6efed; border-top-left-radius: var(--rund); border: 1px solid #2a4a48; font-size: 0.85rem; line-height: 1.45; }
.blaupause-tafel[hidden] { display: none; }
.bp-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.bp-kopf strong { font-size: 1rem; } .bp-kopf span { color: #c9dad5; flex: 1 1 12rem; } .bp-kopf .knopf { color: #e6efed; border-color: #2a4a48; background: transparent; }
.bp-tabelle { width: 100%; border-collapse: collapse; }
.bp-tabelle th, .bp-tabelle td { text-align: left; vertical-align: top; padding: 0.4rem 0.4rem 0.4rem 0; border-bottom: 1px solid #2a4a48; color: #e6efed; }
.bp-tabelle thead th { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #a9bdb9; }
.bp-tabelle td strong { color: var(--licht); }
.bp-quelle { color: #c9dad5; font-size: 0.75rem; }
.bp-abnahme { margin: 0.9rem 0 0.3rem; } .bp-liste { margin: 0 0 0.6rem; padding-left: 1.1rem; color: #cfdcd9; } .bp-liste li { max-width: none; }
.bp-fuss { margin: 0; color: #c9dad5; } .bp-fuss a { color: var(--licht); }
@media (prefers-reduced-motion: no-preference) { .blaupause-tafel { transition: none; } }

.check-eingabe { display: grid; gap: 0.75rem; max-width: 40rem; }
.check-eingabe .zeile { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.check-eingabe input[type="url"], .check-eingabe input[type="text"] { flex: 1 1 16rem; min-height: 48px; padding: 0.7rem 0.85rem; border: 1px solid var(--linie); border-radius: var(--rund); background: var(--flaeche); color: var(--tinte); font: 400 1rem/1.4 var(--sans); }
.check-ergebnis { margin-top: 2rem; outline: none; }
.check-ergebnis[hidden] { display: none; }
.check-kopf h2 { font-size: clamp(1.4rem, 3.5vw, 2rem); word-break: break-word; }
.check-adresse { word-break: break-all; }
.check-befunde { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 0.5rem; }
.check-befund { display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.8rem; padding: 0.8rem 1rem; background: var(--flaeche); border: 1px solid var(--linie); border-left: 5px solid var(--linie); border-radius: var(--rund); }
.check-befund.stand-gruen { border-left-color: #2b7a5a; } .check-befund.stand-orange { border-left-color: var(--akzent); } .check-befund.stand-unbekannt { border-left-color: #8a8a8a; }
.check-nr { grid-row: 1 / span 3; font: 800 0.8rem/1.4 var(--sans); color: var(--tinte-2); padding-top: 0.2rem; }
.check-befund strong { display: block; }
.check-text { color: var(--tinte); } .check-beleg { color: var(--tinte-2); font-size: 0.82rem; }
.check-hinweis { padding: 0.8rem 1rem; border-left: 3px solid var(--akzent); background: var(--flaeche); color: var(--tinte-2); font-size: 0.95rem; max-width: 46rem; }
.check-fehler { padding: 0.8rem 1rem; border-left: 3px solid var(--akzent); background: var(--flaeche); }

.check-vorschlag { display: grid; gap: 0.5rem; justify-items: start; margin: 1rem 0; }

.druckblatt { padding: clamp(2rem, 6vw, 4rem) 0 clamp(3rem, 8vw, 5rem); }
.druckblatt .breite { max-width: 52rem; }
.druck-kopf { border-bottom: 2px solid var(--tinte); padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
.druck-kopf h1 { font-size: clamp(1.9rem, 5vw, 2.75rem); }
.druck-teil { break-inside: avoid; padding: 1.1rem 0 0.4rem; }
.druck-teil h2 { font-size: 1.25rem; margin: 0 0 0.6rem; }
.felder { display: grid; gap: 0.6rem; margin: 0.5rem 0 0; }
.felder div { display: grid; gap: 0.3rem; }
.felder dt { font-weight: 700; font-size: 0.92rem; }
.felder dd { margin: 0; min-height: 2.2rem; border: 1px solid var(--linie); border-radius: 4px; background: var(--flaeche); }
.felder dd.hoch { min-height: 4.4rem; }
.motive { margin: 0.5rem 0 0; padding-left: 1.4rem; display: grid; gap: 0.45rem; }
.motive li { max-width: none; }
.druck-fuss { margin: 1.5rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--linie); color: var(--tinte-2); font-size: 0.82rem; max-width: none; }
@media print {
  .seite-druck .kopf, .seite-druck .fuss, .druck-weg, .seite-druck .blaupause-schalter { display: none !important; }
  .druckblatt { padding: 0; } .druckblatt .breite { max-width: none; padding: 0; }
  .druckblatt { font-size: 9.5pt; line-height: 1.3; } .druck-kopf h1 { font-size: 18pt; margin-bottom: 0.3em; } .druck-kopf { padding-bottom: 0.6rem; margin-bottom: 0.6rem; } .druck-kopf .einleitung { font-size: 9.5pt; } .druck-teil h2 { font-size: 11.5pt; margin-bottom: 0.3rem; }
  .felder dd { min-height: 1.35rem; background: #fff; } .felder dd.hoch { min-height: 2.6rem; } .felder dt { font-size: 9pt; }
  .felder { gap: 0.25rem; } .druck-teil { padding: 0.45rem 0 0.1rem; } .haken, .motive { gap: 0.15rem; } .haken li { padding: 0.15rem 0 0.15rem 1.5rem; } .haken li::before { top: 0.75em; } .leise { font-size: 8.5pt; } .druck-fuss { margin-top: 0.7rem; font-size: 8pt; }
  .druckblatt p.leise { max-width: none; }
  .druckblatt .druck-teil { break-inside: auto; } .druckblatt .felder > div { break-inside: avoid; } .druckblatt .druck-teil h2, .druckblatt .druck-teil > .leise { break-after: avoid; }      
  @page { size: A4; margin: 14mm 16mm; }
}

.seite-recht .textseite h3 { font-size: 1.05rem; margin: 1.6rem 0 0.4rem; }
.seite-recht .textseite p { max-width: 68ch; }
.seite-recht .textseite blockquote { margin: 1rem 0; padding: 0.6rem 1rem; border-left: 3px solid var(--petrol); background: var(--flaeche); }
.seite-recht span.platzhalter { display: inline; padding: 0 0.25rem; border: 1px dashed var(--akzent); border-radius: 3px; background: var(--akzent-hell); color: var(--tinte); }

.formular-stufen { gap: 1.25rem; }
.formular-stufen .stufe { display: grid; gap: 1rem; }
.formular-stufen:not(.gefuehrt) .stufe + .stufe { padding-top: 1.25rem; border-top: 1px solid var(--linie); }
.formular-stufen.gefuehrt .stufe:not(.aktiv) { display: none; }
.formular-stufen .stufe-titel { padding: 0; margin: 0; font-weight: 800; font-size: 1.25rem; line-height: 1.25; color: var(--tinte); }
.formular-stufen .stufe-titel:focus { outline: none; }
.formular-stufen .stufe-titel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; border-radius: 4px; }
.stufe-zahl { display: block; margin-bottom: 0.4rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--petrol); }
.stufen-fortschritt { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.stufen-fortschritt span { height: 4px; border-radius: 4px; background: var(--linie); }
.stufen-fortschritt span.an { background: var(--petrol); }
.kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.kacheln label { position: relative; display: grid; margin: 0; font-weight: 600; cursor: pointer; }
.kacheln input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kacheln span { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.5rem 0.75rem; text-align: center; border: 1px solid var(--linie); border-radius: var(--rund); background: var(--papier); color: var(--tinte); line-height: 1.3; }
.kacheln input:checked + span { border-color: var(--petrol); background: var(--petrol-hell); box-shadow: inset 0 2px 0 var(--petrol); }
.kacheln input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
.kacheln[aria-invalid="true"] span { border-color: var(--akzent); }
.formular .feld { display: grid; gap: 0.35rem; }
.formular .feld label { margin: 0; }
.formular .feld-fehler { margin: 0; color: var(--akzent); font-weight: 700; font-size: 0.95rem; }
.formular [aria-invalid="true"]:not(.kacheln) { border-color: var(--akzent); }
.formular .frei { font-weight: 500; font-size: 0.85rem; color: var(--tinte-2); }
.formular .haken-feld { display: flex; gap: 0.7rem; align-items: flex-start; font-weight: 400; margin: 0; cursor: pointer; line-height: 1.45; }
.formular .haken-feld input { flex: none; margin-top: 0.2rem; }
.stufe-fuss { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.stufen-meldung { margin: 0; padding: 0.8rem 1rem; border: 1px solid var(--akzent); border-radius: var(--rund); font-weight: 700; color: var(--tinte); }
.stufen-meldung:focus { outline: 2px solid var(--akzent); outline-offset: 2px; }
.formular [hidden] { display: none !important; }   

@font-face { font-family: "Manrope"; src: url("../schrift/Manrope-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }

@font-face { font-family: "Manrope Ersatz"; src: local("Arial"), local("Liberation Sans"); font-weight: 300; size-adjust: 99.9%; ascent-override: 106.7%; descent-override: 30%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Ersatz"; src: local("Arial"), local("Liberation Sans"); font-weight: 400; size-adjust: 101.7%; ascent-override: 104.8%; descent-override: 29.5%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Ersatz"; src: local("Arial Bold"), local("Liberation Sans Bold"); font-weight: 600; size-adjust: 99.1%; ascent-override: 107.5%; descent-override: 30.3%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Ersatz"; src: local("Arial Bold"), local("Liberation Sans Bold"); font-weight: 700; size-adjust: 100.8%; ascent-override: 105.7%; descent-override: 29.7%; line-gap-override: 0%; }

:root { --h-mint: #d3f1e6; --h-flieder: #e6e0f7; --h-flaeche: #f3f6f5; --h-rand: #c9d3d1; --h-warnung: #94500a; }   
html[data-look="a"], .seite-start {
  --tinte: #0e1b1b;          
  --tinte-2: #3d4c4a;        
  --akzent: #1d5c5c;         
  --akzent-hell: #d9e9e5;
}
.seite-start {
  --papier: #ffffff; --papier-2: #eef4f2; --flaeche: #f7faf9; --petrol: #1d5c5c; --petrol-dunkel: #134245; --petrol-hell: #d9e9e5;
  --linie: #d7e0dd; --auf-petrol: #ffffff; color-scheme: light;
}

.formular .feld-fehler, .pflicht { color: var(--h-warnung); }
.check-befund.stand-orange, .check-hinweis, .check-fehler { border-left-color: var(--h-warnung); }
.kacheln[aria-invalid="true"] span { border-color: var(--h-warnung); }

:is(html[data-look="a"], .seite-start) .kopf { background: #ffffff; border-bottom-color: var(--linie); }
.marke .zeichen { width: 28px; height: 28px; flex: none; overflow: visible; color: var(--petrol); }
.marke-zusatz { color: var(--petrol); }
.fuss .marke .zeichen { width: 24px; height: 24px; }
@media (min-width: 64rem) {
  :is(html[data-look="a"], .seite-start) .kopf .menue ul a { color: var(--tinte); }
  .kopf .menue ul a:hover { text-decoration: underline; }
}

:is(html[data-look="a"], .seite-start) .knopf { background: var(--tinte); border-color: var(--tinte); color: #ffffff; font-weight: 600;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); }
:is(html[data-look="a"], .seite-start) .knopf:hover { background: #24403f; border-color: #24403f; color: #ffffff; }
.knopf:active { transform: scale(0.97); }
:is(html[data-look="a"], .seite-start) .knopf-leise { background: #ffffff; color: var(--tinte); border-color: var(--h-rand); }
:is(html[data-look="a"], .seite-start) .knopf-leise:hover { background: var(--h-flaeche); color: var(--tinte); border-color: var(--h-rand); }

:is(html[data-look="a"], .seite-start) .bp-kopf .knopf { color: #e6efed; border-color: #2a4a48; background: transparent; }

main { min-height: calc(100vh - var(--kopf-hoehe)); }

.haken small.beleg { display: block; margin-top: 0.1rem; font-size: 0.85em; color: var(--tinte-2); }

.seite-start { --sans: "Manrope", "Manrope Ersatz", "Segoe UI", Roboto, Arial, sans-serif; }
.seite-start p { text-wrap: pretty; }
.seite-start h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; font-weight: 300; max-width: 18em; hyphens: manual; }
.seite-start h2 b { font-weight: 700; }
.seite-start .kopf { border-bottom-color: transparent; }
.abschnitt-kopf { padding-top: clamp(4rem, 9vw, 8rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.abschnitt-kopf h2 { margin: 0; }
.abschnitt-kopf p, .abschnitt-text { margin: 1rem 0 0; max-width: 40em; color: var(--tinte-2); }
.abschnitt-text.leise { font-size: 0.92rem; }

.start-kopf { background: linear-gradient(118deg, var(--h-mint) 0%, #eef7f4 46%, var(--h-flieder) 100%); padding: clamp(1.75rem, 6vw, 6rem) 0 clamp(3rem, 7vw, 6.5rem); }
.start-kopf .breite { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.seite-start .vorzeile { margin: 0 0 1.1rem; font: 600 0.95rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--petrol); }
.start-kopf h1 { margin: 0; font-size: clamp(2.5rem, 1.3rem + 3vw, 4.1rem); text-wrap: balance; line-height: 1.04; letter-spacing: -0.025em; font-weight: 300; hyphens: manual; }
.start-kopf h1 .kraeftig { display: block; font-weight: 700; }
.start-kopf .einleitung { margin: 1.4rem 0 0; max-width: 34em; color: var(--tinte-2); font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.6; }
.start-kopf .knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 0; }
.start-preise { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin: 1.6rem 0 0; padding: 0; color: var(--tinte-2); font-size: 0.95rem; }
.start-preise li { max-width: none; }
.start-preise b { color: var(--tinte); font-weight: 700; margin-right: 0.3rem; text-transform: uppercase; }
.start-preise-text { margin: 0.5rem 0 0; max-width: 34em; color: var(--tinte-2); font-size: 0.9rem; }   

.geraete { position: relative; padding: 0 9% 11% 0; container-type: inline-size; isolation: isolate; }
.geraete::before, .geraete::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.geraete::before { left: -6%; top: -2%; width: 56%; height: 52%; background: radial-gradient(closest-side, rgba(168, 223, 197, 0.9), rgba(189, 234, 213, 0)); }
.geraete::after { right: -6%; bottom: -4%; width: 56%; height: 58%; background: radial-gradient(closest-side, rgba(205, 192, 240, 0.85), rgba(230, 224, 247, 0)); }
.glas { position: relative; isolation: isolate; -webkit-backdrop-filter: blur(6px) saturate(1.6); backdrop-filter: blur(6px) saturate(1.6); }
.glas-g { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.glas-fuell { z-index: -3; background: linear-gradient(140deg, rgba(255, 255, 255, 0.34) 0%, rgba(230, 247, 240, 0.14) 40%, rgba(205, 238, 224, 0.12) 66%, rgba(255, 255, 255, 0.28) 100%); box-shadow: inset 0 1.5px 0 #fff, inset 0 -1px 0 rgba(19, 66, 69, 0.08), 0 0 0 1px rgba(19, 66, 69, 0.13), 0 46px 60px -52px rgba(16, 39, 42, 0.26); }
.glas-mint { z-index: -2; background: radial-gradient(120% 90% at 100% 100%, rgba(140, 214, 184, 0.38), rgba(140, 214, 184, 0) 60%), radial-gradient(80% 70% at 0% 0%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 60%); }
.glas-rand { z-index: -1; padding: 1.5px; background: linear-gradient(140deg, #fff 0%, rgba(255, 255, 255, 0.4) 28%, rgba(255, 255, 255, 0.12) 55%, rgba(255, 255, 255, 0.8) 85%, #fff 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.glas-glanz { z-index: -1; background: linear-gradient(118deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0.75) 25%, rgba(255, 255, 255, 0) 31%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0.4) 62%, rgba(255, 255, 255, 0) 65%); }
.glas-leiste { display: flex; align-items: center; background: #f3f6f5; border-bottom: 1px solid #dfe6e4; box-shadow: 0 0 0 1px rgba(19, 66, 69, 0.18); }
.glas-feld { display: flex; align-items: center; justify-content: center; border-radius: 0.85cqw; background: #e8eeec; color: #4f6966; font-weight: 600; white-space: nowrap; overflow: hidden; }
.glas-feld svg { flex: none; }
.glas-punkte { display: flex; gap: 0.75cqw; width: 12.7cqw; }
.glas-punkte i { width: 1.06cqw; height: 1.06cqw; border-radius: 50%; background: #c3d1ce; }
.schirm { position: relative; overflow: hidden; background: #ffffff; border-radius: 6px; }
.glas .schirm { box-shadow: 0 0 0 1px rgba(19, 66, 69, 0.18), 0 0 0 2.5px #fff; }
.glas-fenster { padding: 2.1cqw; border-radius: 4cqw; }
.glas-fenster .glas-leiste { height: 4cqw; padding: 0 1.5cqw; border-radius: 1.7cqw 1.7cqw 0 0; }
.glas-fenster .glas-feld { flex: 1; height: 2.5cqw; margin-right: 12.7cqw; gap: 0.6cqw; font-size: 1.32cqw; }
.glas-fenster .glas-feld svg { width: 1.06cqw; height: 1.16cqw; }
.glas-fenster .schirm { aspect-ratio: 16 / 10; border-radius: 0 0 1.7cqw 1.7cqw; }
.schirm img { width: 100%; height: auto; transform: translateY(0); }

.js .schirm img.laeuft { animation: lauf 4.2s cubic-bezier(0.65, 0, 0.35, 1) 1 both; }
@keyframes lauf { 0% { transform: translateY(0); } 46%, 58% { transform: translateY(var(--weg, 0)); } 100% { transform: translateY(0); } }
.glas-handy { position: absolute; right: 0; bottom: 0; width: 27cqw; padding: 0.96cqw; border-radius: 4.1cqw; }
.glas-handy .glas-leiste { height: 3cqw; padding: 0.55cqw 1.5cqw 0; border-bottom: 0; border-radius: 3.2cqw 3.2cqw 0 0; }
.glas-handy .glas-feld { flex: 1; height: 2.06cqw; gap: 0.4cqw; font-size: 0.86cqw; border-radius: 0.7cqw; }
.glas-handy .glas-feld svg { width: 0.7cqw; height: 0.77cqw; }
.glas-handy .schirm { aspect-ratio: 393 / 852; border-radius: 0 0 3.2cqw 3.2cqw; }
.geraete-notiz { margin: 1.1rem 0 0; font-size: 0.9rem; color: var(--tinte-2); }
@media (min-width: 56rem) {
  
  .start-kopf { min-height: calc(100vh - var(--kopf-hoehe)); }
  .start-kopf .breite { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .start-kopf-bild { margin-top: clamp(0px, 2.6vw, 40px); }
}

.strecke { position: relative; }
.strecke-buehne { padding-bottom: 3rem; }
.strecke-teile { list-style: none; margin: 0; padding: 0; display: grid; gap: 3.5rem; }
.strecke-teile > li { margin: 0; max-width: none; }
.strecke-wahl { display: none; }
.strecke-wahl button { font: 600 0.92rem/1.2 var(--sans); color: var(--tinte); background: #ffffff; border: 1px solid var(--h-rand); border-radius: 999px; padding: 0.55rem 1.05rem; min-height: 44px; cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.16s cubic-bezier(0.23, 1, 0.32, 1); }
.strecke-wahl button:active { transform: scale(0.97); }
.strecke-wahl button[aria-pressed="true"] { background: var(--tinte); color: #ffffff; border-color: var(--tinte); }
@media (min-height: 700px) {
  .js .strecke { height: calc(var(--n) * var(--schritt, 70vh) + 100vh); }
  
  .js .strecke { content-visibility: auto; contain-intrinsic-size: auto calc(var(--n) * var(--schritt, 70vh) + 100vh); }
  .strecke-kurz { --schritt: 30vh; }   
  .js .strecke-buehne { position: sticky; top: var(--kopf-hoehe); height: calc(100vh - var(--kopf-hoehe)); padding-top: 0; padding-bottom: 0; display: flex; flex-direction: column; justify-content: safe center; }
  .js .strecke-teile { grid-template-columns: minmax(0, 1fr); }
  
  .js .strecke-teile > li { grid-area: 1 / 1; visibility: hidden; z-index: 0; background: var(--papier); }
  .js .strecke-teile > li.aktiv { visibility: visible; z-index: 1; }
  .js .strecke-teile > li.weg { visibility: visible; z-index: 2; animation: raus 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
  .js .strecke-teile > li.weg.zurueck { animation-name: raus-zurueck; }
}
@keyframes raus { from { clip-path: inset(0); } to { clip-path: inset(0 0 0 100%); } }
@keyframes raus-zurueck { from { clip-path: inset(0); } to { clip-path: inset(0 100% 0 0); } }
@media (min-height: 700px) {
  .js .strecke-wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1.4rem auto 0; padding: 0; list-style: none; }
  .js .strecke-wahl li { max-width: none; }
}

.browser { position: relative; margin: 0 auto; width: min(100%, 1040px); background: #ffffff; border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; }
.browser-leiste { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 14px; background: var(--h-flaeche); border-bottom: 1px solid var(--linie); }
.punkte { display: inline-flex; gap: 6px; }
.punkte i { width: 10px; height: 10px; border-radius: 50%; background: #c6d0ce; }

.browser-adresse { flex: 1; min-width: 0; margin-right: 46px; font-size: 0.8rem; color: var(--tinte-2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser img { width: 100%; height: auto; aspect-ratio: 1440 / 900; object-fit: cover; object-position: top; }

.ref-kennzeichen { flex: none; white-space: nowrap; background: #ffffff; color: var(--tinte); font-size: 0.78rem; font-weight: 600; padding: 0.12rem 0.7rem; border-radius: 999px; border: 1px solid var(--linie); }
.ref-text { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.35rem 1.2rem; margin: 1.1rem auto 0; max-width: 1040px; text-align: center; }
.ref-text strong { font-size: 1.15rem; }
.ref-text span { color: var(--tinte-2); }
@media (min-height: 700px) {
  .js .muster-teile { width: min(100%, 1040px, calc((100vh - var(--kopf-hoehe) - 190px) * 1.6)); margin: 0 auto; }
  .js .browser { width: 100%; }
}

.schritt { display: grid; gap: 1.5rem 3rem; align-items: center; align-content: center; padding: 0.5rem 0; }   
.schritt-nr { margin: 0 0 0.6rem; font-weight: 600; font-size: 0.95rem; color: var(--petrol); }
.schritt h3 { margin: 0 0 0.6rem; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 700; }
.schritt-text p { margin: 0 0 0.8rem; color: var(--tinte-2); max-width: 30em; }
.schritt-text .leise { font-size: 0.9rem; }
.suchfeld { display: flex; align-items: center; gap: 0.9rem; min-height: 64px; padding: 0 1.5rem; border: 1px solid var(--h-rand); border-radius: 999px; background: #ffffff; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); }
.suchfeld svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--tinte-2); stroke-width: 2.4; stroke-linecap: round; }
.suchfeld-text { white-space: nowrap; }
.suchfeld-strich { width: 2px; height: 1.3em; flex: none; background: var(--tinte); }
.js .schritt.aktiv .suchfeld-text { animation: tippen 1.3s steps(17, end) 0.15s 1 both; }   
@keyframes tippen { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ergebnis { margin: 1.6rem 0 0; padding: 0 0.4rem; }
.ergebnis-adresse { margin: 0; font-size: 0.85rem; color: var(--tinte-2); }
.ergebnis-titel { margin: 0.2rem 0 0.35rem; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); font-weight: 600; line-height: 1.3; color: var(--petrol); }
.ergebnis-text { margin: 0; color: var(--tinte-2); font-size: 0.98rem; }
.schritt .mail-karte { margin: 0; max-width: 34rem; background: #ffffff; }
.schritt .mail-karte dl { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
.schritt-bild .leise { margin: 0.7rem 0 0; color: var(--tinte-2); font-size: 0.88rem; }
@media (min-width: 56rem) {
  .schritt { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .schritt-bild { min-height: 22rem; display: flex; flex-direction: column; justify-content: center; }
  .suchfeld { min-height: 80px; padding: 0 2rem; font-size: 1.6rem; }
  .suchfeld svg { width: 28px; height: 28px; }
}
@media (min-height: 700px) { .js .such-teile { width: min(100%, 1040px); margin: 0 auto; } }

.szene-rahmen { position: relative; overflow: hidden; border-radius: 28px; aspect-ratio: 16 / 9; background: var(--h-flaeche); }
.szene-rahmen svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; }
.szene-schild { position: absolute; left: clamp(12px, 2.4vw, 28px); top: clamp(12px, 2.4vw, 28px); display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; max-width: calc(100% - 24px); margin: 0; padding: 0.55rem 0.6rem 0.55rem 1.1rem; background: #ffffff; border-radius: 999px; }
.szene-schild strong { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.35rem); font-weight: 700; letter-spacing: -0.01em; }
.szene-schild span { background: var(--tinte); color: #ffffff; font-size: 0.85rem; font-weight: 600; padding: 0.3rem 0.8rem; border-radius: 999px; }
.szene-text { margin: 0.9rem 0.25rem 0; color: var(--tinte-2); font-size: 0.95rem; }
.zeichnung-notiz { margin: 1rem auto 0; max-width: 40em; color: var(--tinte-2); font-size: 0.9rem; text-align: center; }
@media (min-height: 700px) {
  .js .branchen-teile { width: min(100%, calc((100vh - var(--kopf-hoehe) - 170px) * 16 / 9)); margin: 0 auto; }
  .js .szene-text { display: none; }
}

.js .aktiv .tu-strahl { animation: strahl 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.3s 1 both; transform-origin: 1006px 536px; }
@keyframes strahl { 0% { transform: rotate(-12deg); } 55% { transform: rotate(7deg); } 100% { transform: rotate(0); } }
.js .aktiv .tu-fenster { animation: fenster 1.2s steps(1, end) 0.5s 1 both; }
@keyframes fenster { 0% { fill: #5a6899; } 100% { fill: #ffe7a3; } }

.js .aktiv .tu-licht { animation: licht 1.2s steps(1, end) 0.5s 1 both; }
@keyframes licht { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.js .aktiv .tu-wisch { animation: wisch 1.5s cubic-bezier(0.65, 0, 0.35, 1) 1; transform-origin: 752px 592px; }
@keyframes wisch { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-7deg); } 65% { transform: rotate(5deg); } }
.js .aktiv .tu-glanz { animation: aufdecken 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.6s 1 both; }
@keyframes aufdecken { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.js .aktiv .tu-farbe { animation: hochfuellen 1.4s cubic-bezier(0.65, 0, 0.35, 1) 1 both; }
@keyframes hochfuellen { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.js .aktiv .tu-rolle { animation: rolle 1.4s cubic-bezier(0.65, 0, 0.35, 1) 1 both; }
@keyframes rolle { 0% { transform: translateY(44px); } 70% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
.js .aktiv .tu-teller { animation: teller 1.1s cubic-bezier(0.23, 1, 0.32, 1) 1 both; transform-origin: 860px 498px; }
@keyframes teller { from { transform: rotate(10deg); } to { transform: rotate(0); } }
.js .aktiv .tu-dampf { animation: hochfuellen 0.9s cubic-bezier(0.23, 1, 0.32, 1) 0.9s 1 both; }
.js .aktiv .tu-klinge { animation: schnipp 0.5s cubic-bezier(0.65, 0, 0.35, 1) 3; transform-box: fill-box; transform-origin: 0% 50%; }
@keyframes schnipp { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }

.js .aktiv .tu-haar { animation: fallen 1.1s cubic-bezier(0.4, 0, 1, 1) 0.4s 1 both; }
@keyframes fallen { from { transform: translateY(-70px); } to { transform: translateY(0); } }

.zeiten { margin: 2rem 0 0; max-width: 52rem; }
.zeiten-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.zeiten-liste li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 4.2rem; align-items: center; gap: 1rem; max-width: none; }
.zeit-name { font-weight: 600; }
.zeit-wert { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.zeit-balken { display: block; width: 100%; height: 28px; }
.zeit-balken .balken { fill: var(--petrol); }
.zeit-balken .gut { fill: var(--h-mint); }
.zeit-balken .grenze { stroke: var(--tinte); stroke-width: 2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.zeiten-achse { max-width: none; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 4.2rem; gap: 1rem; margin-top: 0.6rem; font-size: 0.85rem; color: var(--tinte-2); }
.zeiten-achse span:nth-child(2) { display: flex; justify-content: space-between; }
.zeiten-achse i { font-style: normal; white-space: nowrap; }
@media (max-width: 30rem) { .zeiten-achse { font-size: 0.78rem; } .zeiten-achse i:nth-child(2), .zeiten-achse i:nth-child(3) { display: none; } }
.js .zeiten:not(.gesehen) .balken { clip-path: inset(0 100% 0 0); }
.js .zeiten.gesehen .balken { animation: aufdecken 0.9s cubic-bezier(0.23, 1, 0.32, 1) 1 both; }
.zeiten-erklaerung { margin: 1.4rem 0 0; max-width: 38em; text-wrap: pretty; color: var(--tinte-2); font-size: 0.95rem; }
.zeiten-erklaerung strong { color: var(--tinte); }

.selbst-pruefen .tabelle { margin-top: 2rem; font-size: 1rem; }
.selbst-pruefen .tabelle td:first-child { font-weight: 700; width: 24%; }
.selbst-pruefen .tabelle td:last-child { color: var(--tinte-2); width: 30%; }

.seite-start .abschluss h2 { font-size: clamp(2rem, 1.3rem + 1.6vw, 2.6rem); }

.js .reiter-buehne { display: flex; flex-direction: column; padding-bottom: 0.5rem; }
.js .reiter-feld .strecke-teile { grid-template-columns: minmax(0, 1fr); }
.js .reiter-feld .strecke-teile > li { grid-area: 1 / 1; visibility: hidden; z-index: 0; background: var(--papier); }
.js .reiter-feld .strecke-teile > li.aktiv { visibility: visible; z-index: 1; }
.js .reiter-feld .strecke-teile > li.weg { visibility: visible; z-index: 2; animation: raus 0.3s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.js .reiter-feld .strecke-teile > li.weg.zurueck { animation-name: raus-zurueck; }
.js .reiter-feld .strecke-wahl { order: -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0 auto 1.2rem; padding: 0; list-style: none; }
.js .reiter-feld .strecke-wahl li { max-width: none; }
.js .reiter-feld .szene-text { display: none; }
.js .reiter-feld .such-teile, .js .reiter-feld .branchen-teile { width: min(100%, 1040px); margin: 0 auto; }
.js .reiter-feld .schritt { align-content: start; }   

@media (max-width: 44rem) {
  .seite-start .abschnitt { padding: 2.75rem 0; }
  .seite-start .abschnitt-kopf { padding-top: 3rem; }
  .seite-start .pakete li { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; padding: 1rem 1.1rem; }
  .seite-start .pakete .paket-preis { grid-row: 1; grid-column: 2; align-self: start; margin: 0; font-size: 1.6rem; }
  .seite-start .pakete li > p:last-child { grid-column: 1 / -1; }
}

@media (max-width: 47.99rem) {
  .fuss .fuss-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.75rem 1.25rem; }
  .fuss .fuss-marke { grid-column: 1 / -1; }
}

@media (max-width: 55.99rem) {
  .geraete { margin-top: 0.5rem; padding: 0 12% 14% 0; }
}

@media (max-width: 44rem) { .geraete { width: 82%; margin-inline: auto; } .geraete-notiz { text-align: center; } }
@media (max-width: 44rem) {
  .start-kopf .vorzeile { margin-bottom: 0.8rem; }
  .start-kopf .einleitung { margin-top: 1rem; }
  .start-kopf .knoepfe { margin-top: 1.4rem; }
  .start-kopf .knoepfe .knopf { flex: 1 1 auto; }
  .start-preise { margin-top: 1.1rem; }
  
  .browser { width: min(100%, 300px); border-radius: 22px; }
  .browser img { aspect-ratio: 393 / 830; }
  .browser-leiste { height: 34px; }
  .punkte { display: none; }
  .browser-adresse { display: none; }   
  .browser-leiste { justify-content: center; }
  @media (min-height: 700px) {
    .js .muster-teile { width: min(100%, 300px, calc((100svh - var(--kopf-hoehe) - 320px) * 393 / 830)); }
    .js .strecke-wahl { gap: 0.4rem; margin-top: 0.9rem; }
  }
  .strecke-wahl button { font-size: 0.85rem; padding: 0.45rem 0.8rem; }
  .ref-text { font-size: 0.92rem; gap: 0.2rem 0.8rem; }
  .ref-text strong { font-size: 1rem; }
  .ref-text span { display: block; width: 100%; }
  .schritt { gap: 1rem; }
  .schritt h3 { font-size: 1.35rem; }
  .schritt-text p { margin-bottom: 0.5rem; font-size: 0.98rem; }
  .suchfeld { min-height: 54px; padding: 0 1.1rem; }
  .schritt .mail-karte { padding: 0.9rem 1rem; font-size: 0.9rem; }
  .schritt .mail-karte dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .schritt .mail-karte dd { margin-bottom: 0.35rem; }
  .szene-rahmen { aspect-ratio: 4 / 5; border-radius: 22px; }
  
  .szene-schild { flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 0; background: none; border-radius: 0; }
  .szene-schild strong { padding: 0.35rem 0.85rem; border-radius: 999px; background: #ffffff; font-size: 1rem; }
  .szene-schild span { font-size: 0.75rem; white-space: nowrap; padding: 0.25rem 0.65rem; }
  .ref-kennzeichen { font-size: 0.8rem; padding: 0.1rem 0.7rem; }
  @media (min-height: 700px) { .js .branchen-teile { width: min(100%, calc((100svh - var(--kopf-hoehe) - 260px) * 4 / 5)); } }
  .zeiten-liste li, .zeiten-achse { grid-template-columns: 6.6rem minmax(0, 1fr) 3.4rem; gap: 0.6rem; }
  .zeit-name { font-size: 0.92rem; }
  .selbst-pruefen .tabelle td:first-child, .selbst-pruefen .tabelle td:last-child { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .js .strecke-teile > li.weg { visibility: hidden; }
  .js .zeiten:not(.gesehen) .balken { clip-path: none; }
}
@media print {
  .start-kopf { background: #ffffff; }
  .geraete, .strecke-wahl { display: none; }
}

.farbe-handwerk .m-seite, .farbe-handwerk .ms { --k-farbe: #2e3338; }
.farbe-praxis .m-seite, .farbe-praxis .ms { --k-farbe: #2b5a3c; }
.farbe-gastronomie .m-seite, .farbe-gastronomie .ms { --k-farbe: #6b2334; }
.farbe-einzelhandel .m-seite, .farbe-einzelhandel .ms { --k-farbe: #1d5c5c; }
.farbe-sicherheit .m-seite, .farbe-sicherheit .ms { --k-farbe: #1d3a5c; }
.farbe-reinigung .m-seite, .farbe-reinigung .ms { --k-farbe: #1d5c5c; }
.farbe-facility .m-seite, .farbe-facility .ms { --k-farbe: #5c3d1d; }
.farbe-andere .m-seite, .farbe-andere .ms { --k-farbe: #3a3a5c; }