:root{
  --grund:#fbfaf7; --text:#1c1a17; --leise:#6b645c; --linie:#e2ddd4; --akzent:#8a5a2b;
  --karte:#ffffff;
}
@media (prefers-color-scheme:dark){
  :root{ --grund:#161513; --text:#eae6df; --leise:#a49c91; --linie:#332f2a; --akzent:#d9a066; --karte:#1e1c19; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--text);
     font:19px/1.72 Georgia,'Iowan Old Style','Times New Roman',serif;
     -webkit-text-size-adjust:100%}
.band{max-width:44rem;margin:0 auto;padding:0 1.6rem}
a{color:var(--akzent)}

header{padding:6rem 0 3.5rem}
h1{font-size:clamp(2.9rem,9vw,4.4rem);line-height:1.02;margin:0;letter-spacing:-.02em;font-weight:400}
.name{margin:1.6rem 0 0;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;
      font-family:system-ui,sans-serif;color:var(--leise)}
.rolle{margin:.5rem 0 0;font-family:system-ui,sans-serif;font-size:1rem;color:var(--leise)}
.kopfzeile{display:flex;gap:2rem;align-items:flex-start;margin-top:3rem}
.foto{flex:none;width:180px;height:180px;border-radius:50%;object-fit:cover;
      background:var(--karte);border:1px solid var(--linie);display:block}
.vorspann{margin:0;font-size:1.16rem}

h2{font-family:system-ui,sans-serif;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
   color:var(--leise);font-weight:600;margin:0 0 2rem;padding-top:3.5rem;border-top:1px solid var(--linie)}
section{margin-bottom:1rem}

.block{padding-left:1.4rem;border-left:2px solid var(--akzent);margin:0 0 2.4rem}
.block b{display:block;font-weight:400;font-size:1.28rem;margin-bottom:.5rem;line-height:1.35;color:var(--akzent)}
.block p{margin:0}

.probe{margin:0 0 2.4rem;padding-left:1.4rem;border-left:2px solid var(--akzent)}
.probe b{display:block;font-weight:700;font-size:1.1rem;margin-bottom:.45rem}
.probe p{margin:0}

.breite{margin:0 0 1.4rem}
.breite:last-child{margin-bottom:0}

/* Zeitleiste (aus Entwurf B, an das Papier-Bild angepasst) */
.vita{position:relative;margin:0;padding-left:2rem}
.vita::before{content:"";position:absolute;left:.34rem;top:.7rem;bottom:.7rem;width:1px;background:var(--linie)}
.vita > div{position:relative;margin-bottom:2rem}
.vita > div::before{content:"";position:absolute;left:-1.83rem;top:.72rem;width:9px;height:9px;
                    border-radius:50%;background:var(--akzent)}
.vita .jahr{font-family:system-ui,sans-serif;font-size:.78rem;letter-spacing:.1em;
            text-transform:uppercase;color:var(--akzent);font-weight:600;margin-bottom:.3rem}
.vita p{margin:0}

.satz{margin:0 0 1.7rem}
.satz b{font-weight:700}

.kontakt{padding:3.5rem 0 1rem;border-top:1px solid var(--linie);margin-top:3.5rem}
.kontakt a{font-size:1.5rem;color:var(--akzent);text-decoration:none;border-bottom:1px solid var(--linie)}
.kontakt a:hover{border-bottom-color:var(--akzent)}

.herkunft{margin:1.6rem 0 0;font-family:system-ui,sans-serif;font-size:.88rem;color:var(--leise)}
footer{font-family:system-ui,sans-serif;font-size:.85rem;color:var(--leise);
       padding:3rem 0 4rem;margin-top:2rem;border-top:1px solid var(--linie)}
footer a{color:var(--leise);text-decoration:none;border-bottom:1px solid var(--linie)}
footer a:hover{color:var(--akzent)}

/* Rechtsseiten */
.recht{padding:5rem 0 1rem}
.recht h1{font-size:clamp(2rem,6vw,2.7rem);margin-bottom:2.5rem}
.recht h2{border-top:none;padding-top:2.6rem;margin-bottom:1rem}
.recht p, .recht li{font-size:1.02rem}
.recht ul{padding-left:1.2rem}
.recht li{margin-bottom:.5rem}
.daten{margin:0 0 1.4rem;line-height:1.9}
.zurueck{font-family:system-ui,sans-serif;font-size:.85rem}

.hinweis{position:fixed;top:0;left:0;right:0;background:var(--akzent);color:#fff;
         font:600 12px/1 system-ui,sans-serif;padding:7px;text-align:center;letter-spacing:.05em;z-index:9}
body.entwurf{padding-top:26px}








/* Am Handy Bild und Text untereinander, sonst bleibt fuer den Text zu wenig Platz */
@media (max-width:560px){
  .kopfzeile{flex-direction:column;gap:1.3rem}
}