@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;
  src:url("schrift/SourceSerif4-Regular.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;
  src:url("schrift/SourceSerif4-Bold.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;
  src:url("schrift/SourceSerif4-Italic.woff2") format("woff2")}

:root{
  --dunkel:#1B4332; --mittel:#2D6A4F; --warm:#C0592C;
  --bg:#FDFBF7; --mint:#E7F0EA; --linie:#C4DBCE;
  --text:#222222; --grau:#5A5A5A;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --breit:62rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--serif);
     font-size:1.0625rem;line-height:1.62}
.huelle{max-width:var(--breit);margin:0 auto;padding:0 1.25rem}

/* Kopf */
header{background:var(--dunkel);color:#fff}
header .huelle{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.5rem;
               padding-top:1rem;padding-bottom:1rem}
.marke{font-family:var(--sans);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
       font-size:.82rem;color:#fff;text-decoration:none}
.marke span{color:#9EC5AE}
nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:1.1rem}
nav a{font-family:var(--sans);font-size:.86rem;color:#CFE3D7;text-decoration:none}
nav a:hover,nav a[aria-current=page]{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* Fliesstext */
main{padding:2.6rem 0 3.5rem}
h1{font-size:2.1rem;line-height:1.2;margin:0 0 .6rem;color:var(--dunkel)}
h2{font-size:1.32rem;line-height:1.3;margin:2.4rem 0 .6rem;color:var(--dunkel)}
h3{font-size:1.06rem;margin:1.6rem 0 .3rem;color:var(--mittel)}
p{margin:0 0 1rem}
a{color:var(--mittel)}
.vorspann{font-size:1.18rem;color:var(--grau);margin-bottom:2rem;max-width:44rem}
.schmal{max-width:44rem}
hr{border:0;border-top:1px solid var(--linie);margin:2.6rem 0}
.klein{font-size:.9rem;color:var(--grau)}

/* Bandkarten */
.baende{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
        margin:2rem 0}
.band{border:1px solid var(--linie);background:#fff;border-radius:3px;padding:1.4rem 1.4rem 1.6rem;
      display:flex;flex-direction:column}
.band .nr{font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.12em;
          text-transform:uppercase;color:var(--warm);margin-bottom:.4rem}
.band h2{font-size:1.28rem;margin:0 0 .5rem}
.band p{font-size:.98rem;color:var(--grau)}
.band .status{font-family:var(--sans);font-size:.78rem;color:var(--grau);margin-top:auto;
              padding-top:.9rem}
.band.kommt{background:#FAF8F4}

/* Knöpfe */
.knopf{display:inline-block;background:var(--dunkel);color:#fff;text-decoration:none;
       font-family:var(--sans);font-size:.92rem;font-weight:600;
       padding:.68rem 1.25rem;border-radius:3px;border:1px solid var(--dunkel)}
.knopf:hover{background:var(--mittel);border-color:var(--mittel)}
.knopf.zweit{background:transparent;color:var(--dunkel)}
.knopf.zweit:hover{background:var(--mint)}
.knopfzeile{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.6rem 0}

/* Buchseite */
.buchkopf{display:grid;gap:2.2rem;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
          align-items:start}
.buchkopf img{width:100%;height:auto;border:1px solid var(--linie);border-radius:2px;
              box-shadow:0 2px 14px rgba(27,67,50,.10)}
@media (max-width:40rem){.buchkopf{grid-template-columns:1fr}
  .buchkopf img{max-width:14rem}}

.fragen{border-left:4px solid var(--warm);padding:.1rem 0 .1rem 1.1rem;margin:1.6rem 0}
.fragen p{font-weight:600;color:var(--dunkel);margin:0 0 .55rem}

.kapitel{list-style:none;padding:0;margin:1rem 0;counter-reset:k}
.kapitel li{counter-increment:k;padding:.46rem 0 .46rem 2.4rem;border-bottom:1px solid var(--linie);
            position:relative}
.kapitel li::before{content:counter(k);position:absolute;left:0;top:.46rem;
                    font-family:var(--sans);font-size:.8rem;font-weight:700;color:var(--warm);
                    width:1.7rem;text-align:right}
.kapitel li:last-child{border-bottom:0}

.fakten{list-style:none;padding:0;margin:1.2rem 0;font-family:var(--sans);font-size:.9rem}
.fakten li{padding:.3rem 0;border-bottom:1px solid var(--linie);display:flex;gap:1rem}
.fakten li span:first-child{color:var(--grau);min-width:9rem}
.fakten li:last-child{border-bottom:0}

.kasten{background:var(--mint);border-radius:3px;padding:1.3rem 1.4rem;margin:2rem 0}
.kasten h2,.kasten h3{margin-top:0}
.kasten p:last-child{margin-bottom:0}
.warmkasten{background:#FBF1EC}

/* Formularbereich */
.formular{border:1px solid var(--linie);background:#fff;border-radius:3px;padding:1.5rem;margin:2rem 0}
.formular p:last-child{margin-bottom:0}

/* Fuss */
footer{border-top:1px solid var(--linie);background:#fff;padding:2rem 0;margin-top:3rem;
       font-family:var(--sans);font-size:.86rem;color:var(--grau)}
footer .huelle{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:baseline}
footer a{color:var(--mittel)}
footer .rechts{margin-left:auto}

/* noch einzutragen */
.luecke{background:#FBE9DF;border-bottom:2px dotted var(--warm);padding:0 .25rem;
        font-family:var(--sans);font-size:.88em;color:#8A3D1B}

/* Ankündigungsleiste */
.leiste{background:var(--warm);color:#fff;font-family:var(--sans);font-size:.84rem}
.leiste .huelle{padding-top:.5rem;padding-bottom:.5rem;text-align:center}
.leiste a{color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* Nummerierte Schritte */
.schritte{list-style:none;counter-reset:schritt;padding:0;margin:1.4rem 0 2rem}
.schritte li{counter-increment:schritt;position:relative;padding:0 0 .9rem 2.9rem;
             margin-bottom:.9rem;border-bottom:1px solid var(--linie)}
.schritte li:last-child{border-bottom:0}
.schritte li::before{content:counter(schritt);position:absolute;left:0;top:.08rem;
  width:1.9rem;height:1.9rem;border-radius:50%;background:var(--mint);color:var(--dunkel);
  font-family:var(--sans);font-weight:700;font-size:.9rem;display:flex;
  align-items:center;justify-content:center}

/* Autorenzeile */
.autor{display:flex;gap:1.3rem;align-items:flex-start;margin:2.6rem 0 1rem;
       padding-top:1.6rem;border-top:1px solid var(--linie)}
.autor .portraet{flex:0 0 5.5rem;width:5.5rem}
.autor .portraet img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
                     border-radius:50%;display:block}
.autor p{margin-bottom:.4rem}
.sig{font-style:italic;color:var(--dunkel);font-size:1.08rem}
@media (max-width:34rem){.autor{flex-direction:column;gap:.8rem}}