:root{
  --papier:#f7f6f3; --tinte:#1b1f23; --gedaempft:#5b5f63; --linie:#dcd8d0;
  --akzent:#2f5d62; --akzent-hell:#e7efee; --karte:#fffefb;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#14171a; --tinte:#e8e6e1; --gedaempft:#a2a6a9; --linie:#2b3034;
    --akzent:#8fbfba; --akzent-hell:#1c2427; --karte:#191d20;
  }
}
:root[data-theme="dark"]{
  --papier:#14171a; --tinte:#e8e6e1; --gedaempft:#a2a6a9; --linie:#2b3034;
  --akzent:#8fbfba; --akzent-hell:#1c2427; --karte:#191d20;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--papier);color:var(--tinte);line-height:1.62;
     font-family:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
     font-size:17px;font-synthesis-weight:none}
a{color:var(--akzent);text-underline-offset:2px}
a:focus-visible,button:focus-visible{outline:2px solid var(--akzent);outline-offset:3px;border-radius:3px}

/* Kopf */
.kopf{border-bottom:1px solid var(--linie);background:var(--papier);
      position:sticky;top:0;z-index:20;backdrop-filter:saturate(120%) blur(6px)}
.kopf-innen{max-width:1120px;margin:0 auto;padding:14px 22px;
            display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.marke{font-family:Bitter,Georgia,serif;font-weight:700;font-size:17px;letter-spacing:-.01em;
       color:var(--tinte);text-decoration:none;flex:0 0 auto}
.marke span{color:var(--akzent)}
nav.haupt{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
nav.haupt .zweig{position:relative}
nav.haupt a{display:block;padding:7px 11px;font-size:14px;color:var(--gedaempft);
            text-decoration:none;border-radius:7px;white-space:nowrap}
nav.haupt a:hover{background:var(--akzent-hell);color:var(--akzent)}
nav.haupt a[aria-current]{color:var(--tinte);font-weight:600}
nav.haupt .unter{display:none;position:absolute;left:0;top:100%;min-width:236px;
     background:var(--karte);border:1px solid var(--linie);border-radius:11px;padding:6px;
     box-shadow:0 12px 30px rgba(0,0,0,.10)}
nav.haupt .zweig:hover .unter,nav.haupt .zweig:focus-within .unter{display:block}
nav.haupt .unter a{font-size:13.6px;padding:8px 10px}

/* Rumpf */
main{max-width:720px;margin:0 auto;padding:54px 22px 90px}
.augenbraue{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
            color:var(--akzent);font-weight:700;margin-bottom:12px}
h1{font-family:Bitter,Georgia,serif;font-weight:700;font-size:clamp(28px,5vw,40px);
   line-height:1.16;letter-spacing:-.02em;text-wrap:balance;margin-bottom:10px}
.unterzeile{font-size:19px;color:var(--gedaempft);margin-bottom:34px;text-wrap:balance;
            font-family:Bitter,Georgia,serif;font-style:italic}
h2{font-family:Bitter,Georgia,serif;font-weight:700;font-size:21px;letter-spacing:-.01em;
   margin:38px 0 12px;text-wrap:balance}
p{margin-bottom:17px;max-width:65ch}
ul.liste{margin:0 0 19px 0;list-style:none;max-width:65ch}
ul.liste li{position:relative;padding-left:20px;margin-bottom:8px}
ul.liste li::before{content:'';position:absolute;left:2px;top:.68em;width:7px;height:1px;
                    background:var(--akzent)}
.merksatz{font-family:Bitter,Georgia,serif;font-size:19.5px;line-height:1.5;
          border-left:3px solid var(--akzent);padding:4px 0 4px 20px;margin:34px 0 0;
          color:var(--tinte);text-wrap:balance}
.karte{background:var(--karte);border:1px solid var(--linie);border-radius:13px;
       padding:20px 24px;margin:24px 0}
.karte h2{margin-top:0}
.karte p:last-child{margin-bottom:0}
.zitat{background:var(--karte);border:1px solid var(--linie);border-radius:13px;
       padding:19px 23px;margin-bottom:14px}
.zitat p{font-size:16.2px;margin-bottom:9px}
.zitat .wer{font-size:13.2px;color:var(--gedaempft);font-weight:600;margin:0}
.weiter{display:flex;flex-wrap:wrap;gap:9px;margin-top:28px}
.weiter a{display:inline-block;padding:9px 15px;border:1px solid var(--linie);border-radius:9px;
          font-size:14.4px;text-decoration:none;background:var(--karte)}
.weiter a:hover{border-color:var(--akzent);background:var(--akzent-hell)}

.buch{display:flex;gap:22px;align-items:flex-start;background:var(--karte);
      border:1px solid var(--linie);border-radius:13px;padding:20px 24px;margin:26px 0}
.buch img{width:118px;height:auto;flex:0 0 auto;border-radius:4px;display:block;
      box-shadow:0 3px 11px rgba(0,0,0,.15)}
.buch .txt{flex:1 1 auto;min-width:0;font-size:14.6px;line-height:1.58}
.buch .txt p{margin-bottom:11px}
.buch .txt p:last-child{margin-bottom:0}
.buch .titel{font-family:Bitter,Georgia,serif;font-weight:700;font-size:17px;
      margin-bottom:8px;display:block}
@media (max-width:560px){.buch{flex-direction:column;gap:16px}.buch img{width:108px}}

/* Fuss */
.fuss{border-top:1px solid var(--linie);margin-top:60px}
.fuss-innen{max-width:720px;margin:0 auto;padding:30px 22px 60px;
            font-size:14px;color:var(--gedaempft)}
.fuss-innen a{color:var(--gedaempft)}
.fuss-innen .kontakt{margin-bottom:12px;color:var(--tinte)}
@media (max-width:760px){
  .kopf-innen{padding:12px 16px}
  nav.haupt{margin-left:0;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  nav.haupt .unter{display:none!important}
  main{padding:38px 18px 70px}
}