@layer system{

html[data-system]{--fokus:var(--text);--fokus-gegen:var(--papier);background:var(--papier)}
html[data-system] body{background:var(--papier);color:var(--text);font-family:var(--schrift-text);font-size:var(--text-groesse,17px);line-height:1.6;font-kerning:normal}
html[data-system] :is(h1,h2):not(.maske__h1){font-family:var(--schrift);font-weight:var(--display-gewicht);letter-spacing:var(--display-lauf);line-height:var(--display-hoehe);text-transform:var(--display-fall,none);font-stretch:var(--display-breite,100%)}
html[data-system] h2{font-size:var(--h2)}
html[data-system] h3{font-family:var(--schrift-h3,var(--schrift-text));font-size:var(--h3);font-weight:var(--h3-gewicht,600);letter-spacing:var(--h3-lauf,-.01em);line-height:1.2;font-stretch:var(--h3-breite,100%)}
html[data-system] :is(h1,h2,h3) .zart{color:var(--zart)}
html[data-system] p{max-width:60ch}
html[data-system] .t-leise{color:var(--leise)}
html[data-system] ::selection{background:var(--text);color:var(--papier)}

html[data-system] .tief{background:var(--tief);color:var(--tief-text);--text:var(--tief-text);--leise:var(--tief-leise);--zart:var(--tief-leise);--linie:var(--tief-linie);--linie-stark:var(--tief-text);--knopf:var(--tief-knopf);--knopf-text:var(--tief-knopf-text);--knopf-hover:var(--tief-knopf-hover);--fokus:var(--tief-text);--fokus-gegen:var(--tief)}

html[data-system] .kopf,html[data-system] .kopf:not(.is-fest):not(.is-menue){color:var(--kopf-text)}
html[data-system] .kopf::before,html[data-system] .kopf:not(.is-fest):not(.is-menue)::before{background:var(--kopf-grund);opacity:1}
html[data-system] .kopf.is-fest::before{border-bottom-color:var(--kopf-linie)}
html[data-system] .kopf{--fokus:var(--kopf-text);--fokus-gegen:var(--kopf-grund)}
html[data-system] .marke__zeichen{font-family:var(--schrift);font-weight:var(--marke-gewicht,600);font-size:var(--marke-groesse,30px);letter-spacing:var(--display-lauf);text-transform:var(--display-fall,none);font-stretch:var(--display-breite,100%)}
html[data-system] .marke__punkt{border-radius:var(--punkt-radius,0)}
html[data-system] .marke__name,html[data-system] .kopf:not(.is-fest):not(.is-menue) .marke__name{font-size:12.5px;font-weight:500;letter-spacing:.01em;text-transform:none;line-height:1.35;border-left-color:var(--kopf-linie)}
html[data-system] .nav{font-size:var(--nav-groesse,14px);gap:clamp(18px,2.4vw,34px)}
html[data-system] .nav a{transition:opacity var(--dauer) var(--kurve)}
html[data-system] .nav a:hover{text-decoration:none;opacity:.62}
html[data-system] .kopf__tel{font-weight:500}
html[data-system] #mobilnav{background:var(--kopf-grund);color:var(--kopf-text);border-bottom-color:var(--kopf-linie)}
html[data-system] #mobilnav a{border-bottom-color:var(--kopf-linie);font-weight:500}

html[data-system] .knopf:not(.maske__tel){gap:10px;min-height:var(--knopf-hoehe,48px);padding:0 var(--knopf-innen,24px);background:var(--knopf);color:var(--knopf-text);border:0;border-radius:var(--knopf-radius);font-family:var(--schrift-text);font-size:var(--knopf-schrift,15px);font-weight:var(--knopf-gewicht,500);letter-spacing:0;text-transform:none;transform:none;transition:background-color var(--dauer) var(--kurve),color var(--dauer) var(--kurve)}
html[data-system] .knopf:not(.maske__tel):hover{background:var(--knopf-hover);transform:none}
html[data-system] .knopf:not(.maske__tel) svg{display:none}
html[data-system] .knopf--dunkel:not(.maske__tel){background:var(--kachel);color:var(--text)}
html[data-system] .knopf--dunkel:not(.maske__tel):hover{background:var(--linie)}
html[data-system] .knopf--linie:not(.maske__tel),html[data-system] .textlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;background:none;border:0;border-radius:0;color:inherit;font-family:var(--schrift-text);font-size:var(--knopf-schrift,15px);font-weight:var(--knopf-gewicht,500);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.42em;text-decoration-color:var(--linie-stark);transition:text-decoration-color var(--dauer) var(--kurve)}
html[data-system] .knopf--linie:not(.maske__tel):hover,html[data-system] .textlink:hover{background:none;text-decoration-color:currentColor;text-decoration-thickness:1px}
html[data-system] .rundpfeil{width:auto;height:auto;border:0;border-radius:0;font-size:18px;background:none!important}
html[data-system] .paar > .knopf{padding-inline:12px}

html[data-system] .abschnitt{padding:var(--abstand) var(--rand)}
html[data-system] .abschnitt--eng{padding-block:calc(var(--abstand) * .6)}
html[data-system] .kopfzeile{align-items:flex-end;gap:clamp(24px,4vw,64px);margin-bottom:clamp(36px,4.4vw,72px)}
html[data-system] .kopfzeile p{color:var(--leise);font-size:var(--text-groesse,17px);max-width:38ch}

html[data-system] .start{position:relative;isolation:isolate;overflow:hidden;min-height:620px;min-height:min(calc(100svh - var(--kopf-h)),1000px);padding:clamp(32px,6vh,80px) var(--rand) calc(28px + var(--pille-platz))}
html[data-system] .start__text{position:relative;z-index:2;min-width:0}
html[data-system] .start h1{font-size:var(--h1)}
html[data-system] .start__satz{margin-top:clamp(18px,2.4vh,28px);font-size:var(--satz-groesse,clamp(17px,1.35vw,20px));line-height:1.5;color:var(--leise);max-width:42ch}
html[data-system] .start__aktion{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:clamp(22px,3.4vh,36px)}
html[data-system] .start__bild{position:relative;margin:0;min-width:0;min-height:0;overflow:hidden}
html[data-system] .start__bild > img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
html[data-system] .start__bild--objekt > img{object-fit:contain}
html[data-system] .start__fuss{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px 28px;font-size:14px;color:var(--leise)}
html[data-system] .start__fuss > div{display:flex;flex-direction:column}
html[data-system] .start__fuss dt{font-weight:500;color:var(--text)}
html[data-system] .start__fuss dd{margin:0}
html[data-system] .start .hero__ecke{right:var(--rand);top:18px;bottom:auto}

html[data-system] .index{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie-stark)}
html[data-system] .index__zeile{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;column-gap:clamp(20px,3vw,48px);align-items:baseline;padding:clamp(20px,2.4vw,34px) 0;border-bottom:1px solid var(--linie)}
html[data-system] .index__zeile p{margin:0;color:var(--leise)}
html[data-system] .index__zeile > span{color:var(--leise);font-size:15px;white-space:nowrap}
html[data-system] a.index__zeile{transition:opacity var(--dauer) var(--kurve)}
html[data-system] a.index__zeile:hover{opacity:.7}

html[data-system] .split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,112px);align-items:center;padding:var(--abstand) 0 var(--abstand) var(--rand)}
html[data-system] .split__text p{margin-top:20px;color:var(--leise)}
html[data-system] .split__text .textlink{margin-top:18px}
html[data-system] .split__bild{margin:0;aspect-ratio:5/4;overflow:hidden;border-radius:var(--bild-radius) 0 0 var(--bild-radius)}
html[data-system] .split__bild img{width:100%;height:100%;object-fit:cover}
html[data-system] .split--umgekehrt{grid-template-columns:minmax(0,7fr) minmax(0,5fr);padding:var(--abstand) var(--rand) var(--abstand) 0}
html[data-system] .split--umgekehrt .split__bild{grid-column:1;grid-row:1;border-radius:0 var(--bild-radius) var(--bild-radius) 0}

html[data-system] .zitat{margin:0;max-width:22ch;font-family:var(--schrift);font-weight:var(--display-gewicht);font-size:var(--h2);line-height:1.08;letter-spacing:var(--display-lauf);text-transform:var(--display-fall,none);font-stretch:var(--display-breite,100%)}
html[data-system] .zitat + p{margin-top:24px;color:var(--leise);font-size:15px}

html[data-system] .zahlen{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 clamp(24px,3vw,56px)}
html[data-system] .zahlen .zahlen__eintrag,html[data-system] .zahlen--schild .zahlen__eintrag{background:none;color:inherit;border-radius:0;padding:22px 0 0;border-top:1px solid var(--linie-stark)}
html[data-system] .zahlen--schild .zahlen__eintrag::before{display:none}
html[data-system] .zahlen .t-zahl,html[data-system] .zahlen--schild .t-zahl{display:block;margin:0;font-family:var(--schrift-zahl,var(--schrift));font-weight:var(--zahl-gewicht,var(--display-gewicht));font-size:var(--zahl);line-height:1;letter-spacing:var(--display-lauf);font-stretch:var(--display-breite,100%);font-variant-numeric:tabular-nums lining-nums;color:var(--zahl-farbe,var(--text))}
html[data-system] .zahlen .t-zahl small{font-size:.4em;letter-spacing:0;margin-left:.12em;color:var(--leise);font-weight:inherit}
html[data-system] .zahlen dd{margin-top:14px;color:var(--leise);font-size:15px;max-width:28ch}

html[data-system] .band__bild{height:clamp(380px,78vh,880px);border-radius:var(--band-radius,0);margin-inline:var(--band-rand,0)}
html[data-system] .band figcaption{width:auto;margin:14px var(--rand) 0;font-size:14px;color:var(--leise)}
html[data-system] .ablauf{border-top-color:var(--linie-stark)}
html[data-system] .ablauf__schritt{border-bottom-color:var(--linie)}
html[data-system] .ablauf__schritt::before{font-family:var(--schrift-zahl,var(--schrift));font-weight:var(--zahl-gewicht,var(--display-gewicht));font-stretch:var(--display-breite,100%);color:var(--ablauf-farbe,var(--leise));font-size:clamp(32px,3.4vw,52px)}
html[data-system] .fragen{border-top-color:var(--linie-stark)}
html[data-system] .frage{border-bottom-color:var(--linie)}
html[data-system] .frage summary{font-family:var(--schrift-text);font-weight:500;font-size:clamp(18px,1.5vw,21px);padding:22px 0}
html[data-system] .frage summary::after{color:var(--leise);font-weight:300}

html[data-system] .karte{border-radius:var(--bild-radius);border-color:var(--linie);background:var(--kachel)}
html[data-system] .karte__platte{background:var(--kachel)}
html[data-system] .standort__daten dl{font-size:15px}
html[data-system] .standort__daten dt{font-weight:500}

html[data-system] .kontakt{background:var(--kontakt-grund,var(--papier));color:var(--text);--fokus:var(--text);--fokus-gegen:var(--kontakt-grund,var(--papier))}
html[data-system] .kontakt h2{font-size:var(--h-kontakt,var(--h2))}
html[data-system] .kontakt h2 .zart{color:var(--zart)}
html[data-system] .kontakt p{color:var(--leise)}
html[data-system] .kontakt__tel{font-family:var(--schrift);font-weight:var(--display-gewicht);font-stretch:var(--display-breite,100%);letter-spacing:var(--display-lauf);font-size:clamp(34px,4.2vw,64px)}
html[data-system] .kontakt__tel svg{display:none}
html[data-system] .kontakt__mail{border-bottom-color:var(--linie-stark);font-weight:500}
html[data-system] .adresse{border-left-color:var(--linie)}
html[data-system] .adresse__zeichen{color:var(--leise)}
html[data-system] .fuss{background:var(--fuss-grund);color:var(--fuss-text);border-top:1px solid var(--fuss-linie,transparent);--fokus:var(--fuss-text);--fokus-gegen:var(--fuss-grund)}

html[data-system] .leiste{background:var(--papier);border-top-color:var(--linie)}

html[data-system] .demo{background:rgb(12 12 12/.5)}
html[data-system] .demo__karte{background:var(--papier);color:var(--text);border-radius:var(--demo-radius,var(--radius))}
html[data-system] .demo__marke{text-transform:none;letter-spacing:0;font-weight:500;font-size:13px}
html[data-system] .demo__marke::before{background:var(--akzent)}
html[data-system] .demo__zu{border-color:var(--linie)}
html[data-system] .demo__balken{height:2px;background:var(--linie)}
html[data-system] .demo__balken i{background:var(--text)}
html[data-system] .demo__titel{font-family:var(--schrift);font-weight:var(--display-gewicht);letter-spacing:var(--display-lauf);text-transform:var(--display-fall,none);font-stretch:var(--display-breite,100%);line-height:1.04;font-size:clamp(28px,3vw,40px)}
html[data-system] .demo__wahl{gap:0;border-top:1px solid var(--linie)}
html[data-system] .demo__knopf{min-height:64px;padding:16px 2px;background:none;border:0;border-bottom:1px solid var(--linie);border-radius:0;font-size:17px;font-weight:500;transition:border-color var(--dauer) var(--kurve)}
html[data-system] .demo__knopf::after{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:1px solid var(--leise);transition:border-width .2s var(--kurve),border-color .2s}
html[data-system] .demo__knopf:hover{background:none;border-bottom-color:var(--text)}
html[data-system] .demo__knopf[aria-pressed="true"]{background:none;color:var(--text);border-bottom-color:var(--text)}
html[data-system] .demo__knopf[aria-pressed="true"]::after{border:6px solid var(--text)}
html[data-system] .demo__knopf[aria-pressed="true"] small,html[data-system] .demo__knopf small{color:var(--leise);font-weight:400}
html[data-system] .demo__feld input{border-radius:var(--feld-radius,var(--radius));border-color:var(--leise);background:var(--papier)}
html[data-system] .demo__tag{border-radius:var(--feld-radius,var(--radius));background:var(--kachel)}
html[data-system] .demo__tag[aria-pressed="true"],html[data-system] .demo__zeit[aria-pressed="true"]{background:var(--knopf);border-color:var(--knopf);color:var(--knopf-text)}
html[data-system] .demo__tag[aria-pressed="true"] small{color:var(--knopf-text)}
html[data-system] .demo__zeit{border-radius:var(--feld-radius,var(--radius));background:var(--papier)}
html[data-system] .demo__haken{background:var(--knopf);color:var(--knopf-text)}
html[data-system] .demo__ergebnis dl{background:none;padding:0 0 20px;border-bottom:1px solid var(--linie);border-radius:0}
html[data-system] .demo__fuss{border-top-color:var(--linie)}
html[data-system] .demo-offen .demo__karte{background:var(--kachel)}

html[data-system].js .auf{transform:translateY(var(--auf-weg,14px));transition:opacity var(--auf-dauer,.7s) var(--kurve),transform var(--auf-dauer,.7s) var(--kurve)}
html[data-system].js .auf.is-da{opacity:1;transform:none}

@media (min-width:761px) and (max-height:520px){
  html[data-system] main .start{padding-right:calc(var(--rand) + 62px)}
  html[data-system] main .start__fuss{right:calc(var(--rand) + 62px)}
}

@media (max-width:760px){
  html[data-system] body{font-size:16px}
  html[data-system] .kopf{gap:10px}
  html[data-system] .marke{gap:10px}
  html[data-system] .marke__zeichen{font-size:var(--marke-klein,24px)}
  html[data-system] .marke__name,html[data-system] .kopf:not(.is-fest):not(.is-menue) .marke__name{padding-left:10px;font-size:12px;letter-spacing:0}
  html[data-system] .kopf__tel{margin-left:auto}
  html[data-system] .start{padding:24px var(--rand) calc(16px + var(--pille-platz))}
  html[data-system] .start__aktion{gap:8px 22px}
  html[data-system] .index__zeile{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  html[data-system] .index__zeile p{grid-column:1 / -1;grid-row:2}
  html[data-system] .split,html[data-system] .split--umgekehrt{grid-template-columns:minmax(0,1fr);padding:var(--abstand) 0;gap:28px}
  html[data-system] .split__bild,html[data-system] .split--umgekehrt .split__bild{grid-row:1;border-radius:0;aspect-ratio:4/3}
  html[data-system] .split__text{padding-inline:var(--rand)}
  html[data-system] .zahlen{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 18px}
  html[data-system] .band__bild{height:clamp(300px,62vh,520px);margin-inline:0;border-radius:0}
}
}