:root{
  --papier:#F5F7FB;
  --flaeche:#E5EAF3;
  --tinte:#12203A;
  --kobalt:#2C56C6;
  --nebel:#7C86A0;
  --weiss:#FFFFFF;
  --linie:#CBD4E4;
  --radius-s:10px;
  --radius-l:20px;
  --radius-pille:999px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--papier);
  color:var(--tinte);
  font-family:Lora,Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:17.5px;
  line-height:1.72;
}
@media(min-width:620px){
  body{font-size:18px}
}
img{max-width:100%;height:auto;display:block}
a{color:var(--kobalt)}
a:hover{color:#1F42A3}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
h1,h2,h3{
  font-family:Manrope,system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-0.015em;
  line-height:1.2;
  margin:0 0 .6em;
  color:var(--tinte);
}
h1{font-size:clamp(2rem,1.4rem + 2.4vw,2.9rem)}
h2{font-size:1.55rem}
h3{font-size:1.15rem;font-weight:700}
ul,ol{margin:0 0 1em;padding-left:1.2em}

/* Kopfbereich */
.kopfbereich{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(245,247,251,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  padding:14px 0 16px;
}
.kopf-innen{
  max-width:700px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.marke{
  font-family:Manrope,system-ui,sans-serif;
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:-0.015em;
  color:var(--tinte);
  text-decoration:none;
}
.marke:hover{color:var(--kobalt)}
.pillen-leiste{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:var(--radius-pille);
  padding:6px;
  display:flex;
  gap:4px;
  overflow-x:auto;
  box-shadow:0 6px 20px rgba(18,32,58,.08);
  max-width:100%;
  scrollbar-width:none;
}
.pillen-leiste::-webkit-scrollbar{display:none}
.pille-link{
  border-radius:999px;
  padding:8px 14px;
  font:600 14px Manrope,system-ui,sans-serif;
  color:var(--tinte);
  text-decoration:none;
  white-space:nowrap;
}
.pille-link:hover{background:var(--flaeche);color:var(--tinte)}
.pille-link.aktiv{background:var(--kobalt);color:#fff}
.pille-link.aktiv:hover{background:#1F42A3;color:#fff}

/* Saeule */
.saeule{
  max-width:700px;
  margin:0 auto;
  padding:0 20px 48px;
}

/* Auftakt */
.auftakt{padding:36px 0 8px}
.auftakt-marke{
  font:700 14px Manrope,system-ui,sans-serif;
  color:var(--kobalt);
  letter-spacing:-0.01em;
  margin:0 0 10px;
}
.auftakt-titel{margin-bottom:14px}
.auftakt-text{margin-bottom:22px}
.knopf-reihe{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:28px;
}
.knopf--voll,
.knopf--linie{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:700 15px/1 Manrope,system-ui,sans-serif;
  letter-spacing:-0.015em;
  text-decoration:none;
  border-radius:var(--radius-pille);
  padding:13px 20px;
  border:1.5px solid transparent;
  cursor:pointer;
}
.knopf--voll{background:var(--kobalt);color:#FFFFFF}
.knopf--voll:hover{background:#1F42A3;color:#FFFFFF}
.knopf--linie{background:var(--weiss);color:#12203A;border:1.5px solid var(--kobalt)}
.knopf--linie:hover{background:var(--flaeche);color:#12203A}
.streifen--getoent .knopf--linie,
.streifen--dunkel .knopf--linie{
  background:var(--weiss);
  color:#12203A;
}
.zahlenband{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1px;
  background:var(--linie);
  border:1px solid var(--linie);
  border-radius:var(--radius-l);
  overflow:hidden;
}
@media(min-width:620px){
  .zahlenband{grid-template-columns:repeat(4,1fr)}
}
.zahlenfeld{
  background:var(--weiss);
  padding:16px 14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.zahlenfeld-wert{
  font:800 1.9rem/1.1 Manrope,system-ui,sans-serif;
  letter-spacing:-0.015em;
  color:var(--kobalt);
}
.zahlenfeld-text{
  font:400 14px/1.45 Lora,Georgia,serif;
  color:var(--nebel);
}

/* Streifen */
.streifen{padding:36px 0}
.streifen--getoent{
  background:var(--flaeche);
  border-radius:20px;
  padding:28px 22px;
  margin:8px 0;
}
.streifen-titel{margin-bottom:10px}
.streifen-lead{margin-bottom:18px}

/* Duo */
.duo{display:grid;gap:10px;margin:0 0 18px}
@media(min-width:620px){
  .duo{grid-template-columns:0.7fr 1.3fr;gap:22px;align-items:start}
}
.duo-marke{
  font:700 14px Manrope,system-ui,sans-serif;
  color:var(--kobalt);
  border-top:2px solid var(--kobalt);
  padding-top:8px;
}
.duo-inhalt p{margin-bottom:.8em}
.duo-inhalt p:last-child{margin-bottom:0}

/* Karten */
.karten-liste{display:grid;gap:14px}
.karte{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:var(--radius-l);
  padding:20px 18px;
}
.streifen--getoent .karte{background:var(--weiss)}
.karte-titel{
  font:700 1.15rem/1.25 Manrope,system-ui,sans-serif;
  letter-spacing:-0.015em;
  margin:0 0 8px;
}
.karte-text{margin-bottom:12px}
.karte-fuss{
  font:700 14px Manrope,system-ui,sans-serif;
  color:var(--kobalt);
}
.karte-fuss a{color:var(--kobalt);text-decoration:none}
.karte-fuss a:hover{text-decoration:underline;color:#1F42A3}

/* Listen und Hinweise */
.merkliste{
  list-style:none;
  padding:0;
  margin:0 0 18px;
}
.merkliste li{
  position:relative;
  padding:8px 0 8px 22px;
  border-bottom:1px solid var(--linie);
}
.merkliste li:last-child{border-bottom:0}
.merkliste li::before{
  content:"";
  position:absolute;
  left:0;
  top:16px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--kobalt);
}
.hinweis{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-left:4px solid var(--kobalt);
  border-radius:var(--radius-s);
  padding:14px 16px;
  margin:16px 0 0;
}

/* Bilder */
.bild-rahmen{
  border-radius:var(--radius-l);
  overflow:hidden;
  border:1px solid var(--linie);
  margin:16px 0 6px;
}
.bild-rahmen img{width:100%;aspect-ratio:16/10;object-fit:cover}
.bild-unterschrift{
  font:400 14px/1.45 Lora,Georgia,serif;
  color:var(--nebel);
  margin:0 0 8px;
}

/* Schritte */
.schritt-liste{display:grid;gap:14px;margin:0}
.schritt{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:var(--radius-l);
  padding:16px 18px;
}
.streifen--getoent .schritt{background:var(--weiss)}
.schritt-zahl{
  display:inline-block;
  font:800 13px Manrope,system-ui,sans-serif;
  letter-spacing:-0.015em;
  color:#FFFFFF;
  background:var(--kobalt);
  border-radius:var(--radius-pille);
  padding:4px 10px;
  margin-bottom:8px;
}

/* Artikel */
.artikel-liste{display:grid;gap:14px}
.artikel-eintrag{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:var(--radius-l);
  padding:18px;
}
.artikel-datum{
  display:block;
  font:700 13px Manrope,system-ui,sans-serif;
  color:var(--kobalt);
  margin-bottom:6px;
}

/* FAQ */
.frage-klappe{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:var(--radius-s);
  padding:0 16px;
  margin:0 0 10px;
}
.frage-klappe summary{
  font:700 1rem/1.4 Manrope,system-ui,sans-serif;
  letter-spacing:-0.015em;
  cursor:pointer;
  padding:14px 0;
  list-style:none;
}
.frage-klappe summary::-webkit-details-marker{display:none}
.frage-klappe summary::after{
  content:"+";
  float:right;
  color:var(--kobalt);
  font-weight:800;
}
.frage-klappe[open] summary::after{content:"–"}
.frage-klappe p{padding-bottom:14px}

/* Preise */
.preis-tafel{
  border:1px solid var(--linie);
  border-radius:var(--radius-l);
  overflow:hidden;
  background:var(--weiss);
  margin:12px 0 18px;
}
.preis-zeile{
  display:grid;
  gap:6px;
  padding:14px 16px;
  border-bottom:1px solid var(--linie);
}
.preis-zeile:last-child{border-bottom:0}
@media(min-width:620px){
  .preis-zeile{grid-template-columns:1.4fr .6fr;align-items:start}
}
.preis-name{
  font:700 15px Manrope,system-ui,sans-serif;
  letter-spacing:-0.015em;
}
.preis-detail{
  font:400 14.5px/1.55 Lora,Georgia,serif;
  color:var(--tinte);
  margin-top:4px;
}
.preis-wert{
  font:800 1.15rem Manrope,system-ui,sans-serif;
  letter-spacing:-0.015em;
  color:var(--kobalt);
}
.preis-hinweis{
  font:400 14.5px/1.55 Lora,Georgia,serif;
  color:var(--nebel);
  margin-top:8px;
}
.paket-karte{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:var(--radius-l);
  padding:20px 18px;
  margin:0 0 14px;
}
.paket-karte--hervor{
  background:var(--weiss);
  border:2px solid var(--kobalt);
  box-shadow:0 10px 28px rgba(44,86,198,.12);
}
.paket-karte .preis-wert{display:block;margin:8px 0 12px}

/* Formular */
.formular{display:grid;gap:14px;position:relative}
.feld{display:grid;gap:6px}
.feld-label{
  font:700 14px Manrope,system-ui,sans-serif;
}
.feld-eingabe{
  width:100%;
  font:400 16px/1.5 Lora,Georgia,serif;
  color:var(--tinte);
  background:var(--weiss);
  border:1.5px solid var(--linie);
  border-radius:var(--radius-s);
  padding:11px 12px;
}
.feld-eingabe:focus{
  outline:2px solid var(--kobalt);
  outline-offset:1px;
  border-color:var(--kobalt);
}
.feld-eingabe.ungueltig{border-color:#9B2335}
.zustimmung{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:15.5px;
}
.zustimmung input{margin-top:5px}
.honig{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.danke-box{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:var(--radius-l);
  padding:24px 20px;
}
.fehler-text{
  color:#9B2335;
  font:400 15px Lora,Georgia,serif;
  margin:0;
}

/* Fussbereich */
.fussbereich{
  background:var(--tinte);
  color:#DCE3F2;
  padding:40px 0 28px;
  margin-top:20px;
}
.fuss-innen{
  max-width:700px;
  margin:0 auto;
  padding:0 20px;
}
.fuss-mega{
  display:grid;
  gap:22px;
}
@media(min-width:620px){
  .fuss-mega{grid-template-columns:repeat(3,1fr)}
}
.fuss-titel{
  font:700 14px Manrope,system-ui,sans-serif;
  color:#8FA6E8;
  margin:0 0 8px;
}
.fuss-liste{
  list-style:none;
  padding:0;
  margin:0;
}
.fuss-liste li{margin:0 0 6px}
.fuss-liste a{
  color:#DCE3F2;
  text-decoration:none;
  font:500 14px Manrope,system-ui,sans-serif;
}
.fuss-liste a:hover{color:#FFFFFF;text-decoration:underline}
.fuss-schluss{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid #2A3A5C;
  font-size:14.5px;
  line-height:1.65;
  color:#DCE3F2;
}
.fuss-schluss p{margin:0 0 10px}
.fuss-schluss p:last-child{margin:0}

/* Keks */
.keks-leiste{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  width:min(660px,calc(100% - 24px));
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:var(--radius-l);
  box-shadow:0 12px 32px rgba(18,32,58,.16);
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:50;
}
.keks-leiste.weg{display:none}
.keks-text{margin:0;font-size:15.5px}
.keks-leiste > div{display:flex;flex-wrap:wrap;gap:8px}
.keks-knopf{
  font:700 14px Manrope,system-ui,sans-serif;
  letter-spacing:-0.015em;
  border-radius:var(--radius-pille);
  padding:10px 16px;
  cursor:pointer;
}
.keks-knopf--ja{
  background:var(--kobalt);
  color:#FFF;
  border:1.5px solid var(--kobalt);
}
.keks-knopf--ja:hover{background:#1F42A3;border-color:#1F42A3}
.keks-knopf--nein{
  background:#FFF;
  color:#12203A;
  border:1.5px solid var(--linie);
}
.keks-knopf--nein:hover{background:var(--flaeche)}

/* Karte */
.karte-embed{
  border:1px solid var(--linie);
  border-radius:var(--radius-l);
  overflow:hidden;
  margin:14px 0 6px;
}
.karte-embed iframe{
  display:block;
  width:100%;
  height:260px;
  border:0;
}

/* Aufblende */
.aufblende{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}
.js .aufblende{opacity:0;transform:translateY(14px)}
.js .aufblende.sichtbar{opacity:1;transform:none}
.no-js .aufblende{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  .aufblende{opacity:1!important;transform:none!important;transition:none}
  html{scroll-behavior:auto}
}