:root{
  --grund:#0E1B1E;
  --flaeche:#14282C;
  --schrift:#E8F0EF;
  --signal:#3AC0A0;
  --leise:#7C9A97;
  --kante:rgba(124,154,151,.28);
  --flaeche-hoch:#1A3238;
}

*,
*::before,
*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

html,
body{margin:0;padding:0}

body{
  background:var(--grund);
  color:var(--schrift);
  font-family:"DM Sans",sans-serif;
  font-size:1.02rem;
  line-height:1.68;
  min-height:100vh;
}

img{max-width:100%;height:auto;display:block}

iframe{display:block;max-width:100%}

h1,h2,h3,
.kennwert,
.preisblock__summe{
  font-family:"DM Serif Display",serif;
  letter-spacing:-.01em;
  font-weight:400;
  line-height:1.18;
  margin:0 0 .6em;
}

h1{font-size:clamp(2rem,1.3rem + 2.4vw,3.2rem)}
h2{font-size:clamp(1.5rem,1.1rem + 1.3vw,2.15rem)}
h3{font-size:1.22rem}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}

ul,ol{margin:0 0 1em;padding-left:1.15em}
li{margin:.28em 0}

a{color:#3AC0A0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#56D4B6}

:focus-visible{
  outline:2px solid #3AC0A0;
  outline-offset:3px;
}

.rahmen{max-width:1180px;margin-inline:auto;padding-inline:clamp(16px,4vw,36px)}

.raster-zwei{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}

@media (max-width:900px){
  .raster-zwei{grid-template-columns:1fr}
}

.aufblende{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
html.js .aufblende{opacity:0;transform:translateY(12px)}
html.js .aufblende.ist-da{opacity:1;transform:none}
html.no-js .aufblende{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  .aufblende,html.js .aufblende{opacity:1!important;transform:none!important;transition:none}
}

.kopfleiste{
  position:sticky;
  top:0;
  z-index:70;
  background:rgba(14,27,30,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--kante);
}

.kopfleiste__innen{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:72px;
}

.kopfleiste__marke{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--schrift);
  text-decoration:none;
  font-weight:500;
  font-size:1.02rem;
}

.kopfleiste__marke:hover{color:var(--schrift)}

.kopfleiste__marke svg{flex:0 0 28px;width:28px;height:28px}

.kopfleiste__rechts{
  display:flex;
  align-items:center;
  gap:16px;
}

.kopfleiste__telefon{
  color:var(--schrift);
  text-decoration:none;
  font-size:.95rem;
  white-space:nowrap;
}

.kopfleiste__telefon:hover{color:#56D4B6}

@media (max-width:700px){
  .kopfleiste__telefon{display:none}
}

@media (max-width:520px){
  .kopfleiste__marke{font-size:.9rem;max-width:58vw;line-height:1.25}
}

.menuetaste{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:transparent;
  color:var(--schrift);
  border:1px solid var(--kante);
  border-radius:10px;
  padding:8px 12px;
  font-family:"DM Sans",sans-serif;
  font-size:.92rem;
  cursor:pointer;
}

.menuetaste:hover{background:var(--flaeche-hoch)}

.menuetaste__striche{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.menuetaste__striche span{
  display:block;
  width:16px;
  height:2px;
  background:var(--schrift);
  border-radius:1px;
}

.vollmenue{
  position:fixed;
  inset:0;
  background:#0E1B1E;
  z-index:80;
  overflow:auto;
  padding:28px 0 48px;
}

.vollmenue[hidden]{display:none!important}

.vollmenue__liste{
  list-style:none;
  margin:0;
  padding:12px 0 0;
}

.vollmenue__liste a{
  font-family:"DM Serif Display",serif;
  font-size:clamp(1.7rem,4vw,2.6rem);
  letter-spacing:-.01em;
  color:var(--schrift);
  text-decoration:none;
  display:block;
  padding:10px 0;
  border-bottom:1px solid var(--kante);
}

.vollmenue__liste a:hover{color:#56D4B6}
.vollmenue__liste a[aria-current="page"]{color:var(--signal)}

.vollmenue__fuss{
  background:var(--flaeche);
  border:1px solid var(--kante);
  border-radius:14px;
  padding:24px;
}

.vollmenue__fuss p{margin:0 0 .7em;color:var(--leise);font-size:.95rem}
.vollmenue__fuss p:last-child{margin-bottom:0}
.vollmenue__fuss a{color:var(--schrift);text-decoration:none}
.vollmenue__fuss a:hover{color:#56D4B6}

.haupt{padding:28px 0 72px}

.sektion{margin-bottom:42px}

.panel{
  position:sticky;
  top:92px;
  background:var(--flaeche);
  border:1px solid var(--kante);
  border-radius:14px;
  padding:24px;
}

.panel__punkt{
  display:block;
  color:var(--schrift);
  text-decoration:none;
  padding:8px 0;
  border-bottom:1px solid var(--kante);
  font-size:.95rem;
}

.panel__punkt:hover{color:#56D4B6}
.panel__punkt[aria-current="true"]{color:var(--signal)}

.kachel{
  background:var(--flaeche);
  border:1px solid var(--kante);
  border-radius:14px;
  padding:22px;
}

.kachel--hoch{border-left:3px solid var(--signal)}

.kachel__marke{
  display:block;
  margin-bottom:8px;
  font-size:.86rem;
  color:var(--leise);
  letter-spacing:.02em;
}

.kachel img,
.bildfeld img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:14px;
}

.bildfeld img{height:260px;margin-bottom:0}

.kennwert{
  display:block;
  font-size:clamp(1.7rem,1.2rem + 1.4vw,2.4rem);
  color:var(--schrift);
  margin:0 0 6px;
}

.kennwert__text{
  display:block;
  font-size:.86rem;
  color:var(--leise);
}

.modulkarte{
  background:var(--flaeche);
  border:1px solid var(--kante);
  border-radius:14px;
  padding:22px;
}

.modulkarte h3{margin-bottom:10px}

.modulkarte__zeile{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:7px 0;
  border-top:1px solid var(--kante);
  font-size:.86rem;
  color:var(--leise);
}

.modulkarte__zeile strong{
  color:var(--schrift);
  font-weight:500;
}

.preisblock{
  background:var(--flaeche);
  border:1px solid var(--kante);
  border-radius:14px;
  padding:24px;
}

.preisblock__summe{
  display:block;
  font-size:clamp(2rem,1.5rem + 1.6vw,2.8rem);
  margin:8px 0 12px;
  color:var(--signal);
}

.ablaufschritt{
  background:var(--flaeche);
  border:1px solid var(--kante);
  border-radius:14px;
  padding:22px;
}

.hinweisband{
  background:var(--flaeche);
  border:1px solid var(--kante);
  border-radius:14px;
  padding:16px 20px;
  color:var(--leise);
  font-size:.95rem;
}

.taste{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#3AC0A0;
  color:#0E1B1E;
  border:0;
  border-radius:10px;
  padding:12px 18px;
  font-family:"DM Sans",sans-serif;
  font-weight:500;
  font-size:1.02rem;
  text-decoration:none;
  cursor:pointer;
  line-height:1.2;
}

.taste:hover{background:#56D4B6;color:#0E1B1E}

.taste--rand{
  background:transparent;
  color:#E8F0EF;
  border:1px solid #7C9A97;
}

.taste--rand:hover{background:#1A3238;color:#E8F0EF}

.tastenreihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

.frageblock{
  background:var(--flaeche);
  border:1px solid var(--kante);
  border-radius:14px;
  padding:4px 18px;
}

.frageblock + .frageblock{margin-top:12px}

.frageblock summary{
  cursor:pointer;
  font-weight:500;
  padding:14px 0;
  list-style:none;
}

.frageblock summary::-webkit-details-marker{display:none}

.frageblock summary::after{
  content:"+";
  float:right;
  color:var(--signal);
  font-family:"DM Serif Display",serif;
  font-size:1.3rem;
  line-height:1;
}

.frageblock[open] summary::after{content:"–"}

.frageblock .frageblock__text{
  padding:0 0 16px;
  color:var(--schrift);
}

.beitrag{margin-bottom:0}
.beitrag h2{margin-top:6px}
.beitrag .beitrag__meta{
  font-size:.86rem;
  color:var(--leise);
  margin-bottom:14px;
}

.formfeld{margin-bottom:16px}

.formfeld label{
  display:block;
  margin-bottom:6px;
  font-size:.86rem;
  color:var(--leise);
}

.formfeld input,
.formfeld select,
.formfeld textarea{
  width:100%;
  background:var(--grund);
  color:var(--schrift);
  border:1px solid var(--kante);
  border-radius:10px;
  padding:11px 12px;
  font-family:"DM Sans",sans-serif;
  font-size:1.02rem;
}

.formfeld textarea{min-height:140px;resize:vertical}

.formfeld input:hover,
.formfeld select:hover,
.formfeld textarea:hover{border-color:var(--leise)}

.formfeld--check{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.formfeld--check input{width:auto;margin-top:5px}
.formfeld--check label{color:var(--schrift);font-size:.95rem}

.dankfeld{
  background:var(--flaeche);
  border:1px solid var(--kante);
  border-left:3px solid var(--signal);
  border-radius:14px;
  padding:24px;
}

.dankfeld[hidden]{display:none!important}

.kartenfeld{
  height:300px;
  border-radius:14px;
  border:1px solid var(--kante);
  overflow:hidden;
  background:var(--flaeche);
}

.kartenfeld iframe{width:100%;height:300px;border:0}

.fusszeile{
  border-top:1px solid var(--kante);
  padding:42px 0 28px;
  background:var(--grund);
}

.fusszeile__marke{
  font-weight:500;
  margin-bottom:10px;
}

.fusszeile a{color:var(--schrift);text-decoration:none}
.fusszeile a:hover{color:#56D4B6}

.fusszeile__kontakt p{margin:0 0 .45em;color:var(--leise);font-size:.95rem}
.fusszeile__kontakt a{color:var(--schrift)}

.linkreihe{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin:16px 0 0;
  padding:0;
  list-style:none;
  font-size:.9rem;
}

.fusszeile__unten{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid var(--kante);
  color:var(--leise);
  font-size:.86rem;
}

.fusszeile__unten p{margin:0 0 .6em}

.cookiebalken{
  position:fixed;
  left:16px;
  right:16px;
  bottom:16px;
  z-index:90;
  max-width:640px;
  background:var(--flaeche);
  border:1px solid var(--kante);
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 12px 40px rgba(0,0,0,.28);
}

.cookiebalken[hidden]{display:none!important}

.cookiebalken p{margin:0 0 12px;font-size:.95rem}

.kleintext{font-size:.86rem;color:var(--leise)}

.liste-ruhig{
  list-style:none;
  margin:0;
  padding:0;
}

.liste-ruhig li{
  padding:10px 0;
  border-bottom:1px solid var(--kante);
}

.liste-ruhig li:last-child{border-bottom:0}

.unterschrift{
  margin-top:18px;
  font-size:.86rem;
  color:var(--leise);
}

.rechtsblock{margin-top:18px}

@media (max-width:900px){
  .panel{position:static}
  .kachel img,
  .bildfeld img{height:200px}
}