/* Schriften liegen auf dem eigenen Server: keine Verbindung zu Google,
   damit die Seite ohne Einwilligung datenschutzkonform ist. */
@font-face{font-family:"Poppins";src:url("schriften/poppins-regular.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("schriften/poppins-medium.woff") format("woff");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("schriften/poppins-bold.woff") format("woff");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --bg:#E6EEEC; --flaeche:#FFFFFF; --tinte:#1B2550; --tinte-leise:#56607F;
  --linie:#C8D5D1; --knopf:#1B2550; --knopf-text:#FFFFFF;
  --sonne:#F4C542; --pink:#E8637A; --gruen:#2E8B62; --blau:#2A44B8;
  --ui:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hand:"Segoe Print","Bradley Hand","Snell Roundhand",cursive;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tinte);font-family:var(--ui);
  font-size:17px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--sonne);outline-offset:2px}
a{color:var(--blau)}

.rahmen{max-width:620px;margin:0 auto;padding:0 18px 90px}
.kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 0;font-size:15px}
.kopf a{text-decoration:none;font-weight:600;color:var(--tinte)}
.kopf .rechts{color:var(--tinte-leise);display:flex;gap:14px;align-items:center}

h1{font-size:32px;line-height:1.12;letter-spacing:-.02em;margin:16px 0 10px;font-weight:600}
h2{font-size:21px;line-height:1.2;margin:30px 0 6px;font-weight:600}
p.lead{color:var(--tinte-leise);margin:0 0 20px}
.leise{color:var(--tinte-leise);font-size:15px}

.knopf{display:block;width:100%;border:0;border-radius:14px;padding:14px 18px;
  font-weight:600;font-size:17px;cursor:pointer;background:var(--knopf);
  color:var(--knopf-text);text-align:center;text-decoration:none}
.knopf.leer{background:transparent;color:var(--tinte);border:2px solid var(--linie)}
.knopf:disabled{opacity:.45;cursor:not-allowed}
.knopf.schmal{display:inline-block;width:auto;padding:10px 16px;font-size:15px}

.meldung{background:#FFF3D1;border:2px solid var(--sonne);border-radius:12px;
  padding:12px 14px;margin:14px 0;font-size:15px}

.karte{background:var(--flaeche);border-radius:16px;padding:16px 18px;margin:14px 0}
.karte strong{display:block;margin-bottom:2px}

.fortschritt{display:flex;gap:6px;margin:10px 0 6px}
.fortschritt span{flex:1;height:8px;border-radius:4px;background:var(--linie)}
.fortschritt span.fertig{background:var(--gruen)}

.liste{list-style:none;padding:0;margin:0 0 18px;border-top:1px solid var(--linie)}
.liste li{border-bottom:1px solid var(--linie)}
.liste .zeile{width:100%;display:flex;justify-content:space-between;align-items:center;
  gap:10px;background:none;border:0;padding:14px 4px;text-align:left;cursor:pointer;
  text-decoration:none;color:inherit}
.liste .zeile[disabled]{cursor:default;opacity:.55}
.marke{font-size:13px;padding:3px 9px;border-radius:20px;background:var(--linie);white-space:nowrap}
.marke.ok{background:var(--gruen);color:#fff}

.feld{margin:20px 0 0}
.feld label.l,.feld .l{display:block;font-weight:600;margin-bottom:6px}
.feld .hinweis{font-size:14px;color:var(--tinte-leise);margin:-4px 0 6px}
.pflicht{color:var(--pink)}
input[type=text],input[type=email],input[type=date],input[type=number],textarea,select{
  width:100%;background:var(--flaeche);border:2px solid var(--linie);border-radius:12px;
  padding:11px 13px;outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--blau)}
textarea{resize:vertical;min-height:84px}
.zaehler{font-size:13px;color:var(--tinte-leise);text-align:right;margin-top:3px}
.zaehler.voll{color:var(--pink)}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.reihe{display:flex;gap:10px}
.reihe input{flex:1}

.wahl{display:flex;flex-wrap:wrap;gap:8px}
.wahl label{border:2px solid var(--linie);background:var(--flaeche);border-radius:22px;
  padding:8px 14px;cursor:pointer}
.wahl input{position:absolute;opacity:0;width:0;height:0}
.wahl input:checked + span,.wahl label:has(input:checked){background:var(--blau);
  border-color:var(--blau);color:#fff;border-radius:22px}
.skala{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.skala label{padding:9px 0;text-align:center;border-radius:10px;border:2px solid var(--linie);
  background:var(--flaeche);cursor:pointer}
.skala label:has(input:checked){background:var(--blau);border-color:var(--blau);color:#fff}
.paar{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin-bottom:8px}
.paar .oder{font-size:14px;color:var(--tinte-leise)}

.bildfeld{display:flex;align-items:center;gap:14px;background:var(--flaeche);
  border:2px dashed var(--linie);border-radius:12px;padding:12px;cursor:pointer}
.bildfeld img,.bildfeld .platz{width:72px;height:72px;border-radius:8px;object-fit:cover;
  flex:none;background:var(--linie);display:grid;place-items:center;font-size:28px}
.bildfeld input[type=file]{display:none}

.zustimmung{display:flex;gap:12px;align-items:flex-start;margin:26px 0 8px;font-size:15px}
.zustimmung input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--blau)}

.unten{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--linie);
  padding:12px 0;margin-top:26px}
.unten .in{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}

.linkbox{display:flex;gap:8px;align-items:center;background:var(--flaeche);
  border:2px solid var(--linie);border-radius:12px;padding:10px 12px;margin:10px 0}
.linkbox code{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}

/* Seitenansicht im Buch */
.seiten{display:grid;gap:16px;margin:18px 0}
.seite{background:var(--flaeche);border-radius:14px;padding:18px 20px}
.seite h3{margin:0 0 4px;font-size:24px;font-family:var(--hand);color:var(--blau);font-weight:700}
.seite .worte{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.seite .worte span{background:var(--sonne);border-radius:20px;padding:3px 11px;font-size:14px;font-weight:600}
.seite img{width:100%;border-radius:10px;display:block;margin:10px 0}
.seite .frage{font-size:13px;font-weight:600;color:var(--tinte-leise);margin-top:12px}
.seite .antwort{font-family:var(--hand);font-size:21px;line-height:1.15;color:var(--blau)}
.seite .bilder{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.reiter{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px}
.reiter a{white-space:nowrap;border:2px solid var(--linie);background:var(--flaeche);
  border-radius:22px;padding:7px 14px;text-decoration:none;color:inherit}
.reiter a.aktiv{background:var(--blau);border-color:var(--blau);color:#fff}

.wahlknopf{display:block;text-align:center;border:2px solid var(--linie);
  background:var(--flaeche);border-radius:22px;padding:9px 10px;cursor:pointer}
.wahlknopf input{position:absolute;opacity:0;width:0;height:0}
.wahlknopf:has(input:checked){background:var(--blau);border-color:var(--blau);color:#fff}
.skala label input{position:absolute;opacity:0;width:0;height:0}

.auswahl{display:flex;align-items:center;gap:12px;background:var(--flaeche);
  border:2px solid var(--linie);border-radius:14px;padding:14px;margin:10px 0;cursor:pointer}
.auswahl input{width:22px;height:22px;flex:none;accent-color:var(--blau)}
.auswahl .text{flex:1;display:block}
.auswahl .text strong{display:block}
.auswahl .text .leise{font-size:14px}
.auswahl .preis{font-weight:600;white-space:nowrap}
.auswahl:has(input:checked){border-color:var(--blau)}

.unterzeile{color:var(--tinte-leise);font-size:19px;margin:-6px 0 20px}

/* ---------------- Öffentliche Seiten ---------------- */
.oeffentlich{background:var(--bg)}
.band{background:var(--flaeche);border-bottom:1px solid var(--linie)}
.band-in{max-width:1040px;margin:0 auto;padding:14px 20px;display:flex;
  justify-content:space-between;align-items:center;gap:16px}
.marke-logo{font-weight:700;font-size:21px;text-decoration:none;color:var(--tinte);
  letter-spacing:-.01em}
.band nav{display:flex;gap:18px;align-items:center}
.band nav a{text-decoration:none;color:var(--tinte-leise);font-size:15px}
.band nav a.knopf{color:var(--knopf-text)}
.rahmen.weit{max-width:1040px;padding-left:20px;padding-right:20px;padding-bottom:0}
section.rahmen{padding-top:56px;padding-bottom:56px}
.oeffentlich h2{font-size:28px;margin:0 0 20px}
.oeffentlich h3{font-size:19px;margin:22px 0 6px;font-weight:600}
.gross{font-size:19px;line-height:1.5;color:var(--tinte-leise);max-width:62ch}

.held{max-width:1040px;margin:0 auto;padding:44px 20px 20px;display:grid;
  grid-template-columns:1fr;gap:34px;align-items:center}
.held h1{font-size:40px;line-height:1.08;margin:0 0 16px;letter-spacing:-.025em}
.held .gross{margin:0 0 24px}
.knopfreihe{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.knopfreihe .knopf{width:auto;padding:14px 24px}
.held-buch{position:relative;display:flex;justify-content:center;gap:0;
  padding:10px 0 30px;perspective:1400px}
.held-buch .blatt{width:46%;max-width:300px;height:auto;display:block;
  box-shadow:0 18px 40px rgba(27,37,80,.22);border-radius:3px}
.held-buch .links{transform:rotate(-2.2deg) translateY(6px)}
.held-buch .rechts{transform:rotate(1.8deg)}
@media (min-width:860px){
  .held{grid-template-columns:1.05fr .95fr;padding-top:64px;gap:48px}
  .held h1{font-size:50px}
  .held-buch .blatt{width:48%;max-width:340px}
}

.streifen{background:var(--flaeche)}
.streifen section,.streifen .rahmen{padding-top:56px;padding-bottom:56px}

.schritte{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:26px}
.schritte li{display:grid;grid-template-columns:auto 1fr;gap:14px 16px;align-items:start}
.schritte .nr{grid-row:1/3;width:40px;height:40px;border-radius:50%;background:var(--sonne);
  display:grid;place-items:center;font-weight:700;font-size:18px;color:var(--tinte)}
.schritte h3{margin:6px 0 4px}
.schritte p{margin:0;color:var(--tinte-leise)}
@media (min-width:800px){.schritte{grid-template-columns:repeat(3,1fr);gap:30px}
  .schritte li{grid-template-columns:1fr;gap:12px;align-content:start}
  .schritte .nr{grid-row:auto;margin-bottom:2px}
  .schritte h3{margin:0 0 6px}}

.paerchen{display:grid;gap:30px}
.paerchen p{color:var(--tinte-leise);margin:0 0 4px}
.bildkarte{margin:0}
.bildkarte img{width:100%;max-width:360px;height:auto;display:block;border-radius:4px;
  box-shadow:0 16px 36px rgba(27,37,80,.2);transform:rotate(1.4deg)}
.bildkarte figcaption{font-size:14px;color:var(--tinte-leise);margin-top:14px}
@media (min-width:800px){.paerchen{grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}}

.anlaesse{display:grid;gap:22px}
.anlaesse article{border-left:4px solid var(--gruen);padding-left:16px}
.anlaesse article:nth-child(2){border-color:var(--pink)}
.anlaesse article:nth-child(3){border-color:var(--sonne)}
.anlaesse h3{margin:0 0 6px}
.anlaesse p{margin:0;color:var(--tinte-leise)}
@media (min-width:760px){.anlaesse{grid-template-columns:repeat(3,1fr);gap:28px}}

.preisreihe{display:grid;gap:16px;margin:22px 0 14px}
.preiskarte{background:var(--flaeche);border-radius:16px;padding:20px 22px}
.streifen .preiskarte{background:var(--bg)}
.preiskarte h3{margin:0 0 4px}
.preiskarte .zahl{font-size:30px;font-weight:700;margin:0 0 6px}
.preiskarte p{margin:0}
@media (min-width:620px){.preisreihe{grid-template-columns:1fr 1fr;max-width:620px}}

.fragen{margin:0}
.fragen dt{font-weight:600;margin-top:22px}
.fragen dd{margin:6px 0 0;color:var(--tinte-leise);max-width:68ch}

.abschluss{background:var(--tinte);color:#fff;text-align:center}
.abschluss .rahmen{padding:56px 20px}
.abschluss h2{color:#fff}
.abschluss .gross{color:rgba(255,255,255,.8);margin:0 auto 24px}
.abschluss .knopf{background:var(--sonne);color:var(--tinte);width:auto;
  display:inline-block;padding:14px 28px}

.fuss-band{background:var(--flaeche);border-top:1px solid var(--linie);margin-top:0}
.fuss-in{max-width:1040px;margin:0 auto;padding:30px 20px 40px;display:grid;gap:18px}
.fuss-in strong{font-size:17px}
.fuss-in p{margin:4px 0 0}
.fuss-in nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.fuss-in nav a{color:var(--tinte-leise);font-size:15px;text-decoration:none}
.fuss-in nav a:hover{text-decoration:underline}
@media (min-width:760px){.fuss-in{grid-template-columns:1fr auto;align-items:start}}

/* Textseiten */
.textseite{max-width:720px;margin:0 auto;padding:40px 20px 70px}
.textseite h1{font-size:32px;margin:0 0 8px}
.textseite h2{font-size:21px;margin:30px 0 8px}
.textseite h3{font-size:17px;margin:20px 0 6px}
.textseite p,.textseite li{color:var(--tinte);max-width:70ch}
.textseite .leise{color:var(--tinte-leise)}
.textseite ul,.textseite ol{padding-left:22px}
.textseite li{margin:5px 0}
.luecke{background:#FFF3D1;border-bottom:2px solid var(--sonne);padding:0 3px;
  border-radius:3px;font-weight:600}
.entwurfshinweis{background:#FFF3D1;border:2px solid var(--sonne);border-radius:12px;
  padding:14px 16px;margin:0 0 26px;font-size:15px}

@media (max-width:620px){
  .band-in{padding:12px 16px}
  .band nav{gap:12px}
  .band nav a:not(.knopf){display:none}
  .marke-logo{font-size:19px}
}