:root{--grund:#eef2fd;--karte:#ffffff;--rand:#d2dcf9;--band:#6c86dc;--bandtext:#0b1440;--name:#000080;--text:#333333;--leise:#515151;--link:#215dc6;--hover:#000080}
@media (prefers-color-scheme:dark){:root{--grund:#121626;--karte:#1a2038;--rand:#2c3866;--band:#4a62b8;--bandtext:#f2f4ff;--name:#c9d4ff;--text:#e3e6f2;--leise:#aab1c8;--link:#9fb4f5;--hover:#dfe6ff}}
*{box-sizing:border-box}
:root{color-scheme:light dark}
html{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.6}
body{margin:0;background:var(--grund);color:var(--text);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--link);text-underline-offset:.2em}
a:hover,a:focus-visible{color:var(--hover)}
a:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.sprung{position:absolute;left:-9999px;top:0;background:var(--name);color:var(--karte);padding:.5rem .9rem;z-index:10}
.sprung:focus{left:.75rem;top:.75rem}
.band{background:var(--band);height:.5rem}
main{flex:1;display:flex;align-items:center;padding:2.5rem 1rem}
.karte{max-width:36rem;margin:0 auto;width:100%;background:var(--karte);border:1px solid var(--rand);border-top:4px solid var(--band);border-radius:.5rem;padding:2.25rem 2rem}
.kopf{display:flex;align-items:center;gap:1.1rem;margin:0 0 2rem}
.zeichen{flex:none;width:auto;height:5.5rem}
.marke{display:inline-block}
.name{color:var(--name);font-family:Verdana,Geneva,"DejaVu Sans",sans-serif;font-size:clamp(2rem,7.5vw,3rem);font-weight:700;line-height:1.05;margin:0;text-align:right}
.name a{color:inherit;text-decoration:none}
.beruf{color:var(--name);font-family:Verdana,Geneva,"DejaVu Sans",sans-serif;font-size:clamp(.9rem,3.2vw,1.125rem);text-align:right;margin:.2rem 0 0}
.block{border-top:1px solid var(--rand);padding-top:1.25rem;margin:0 0 1.75rem}
.block h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--leise);font-weight:600;margin:0 0 .35rem}
.block p{margin:0}
.hobbys ul{margin:0;padding:0;list-style:none}
.hobbys li{margin-top:.6rem}
.hobbys li:first-child{margin-top:0}
.hobbys strong{display:block;font-weight:600}
.spende{margin:0;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.knopf{display:inline-block;padding:.5rem 1.1rem;border:1px solid var(--link);border-radius:.4rem;text-decoration:none;font-size:.95rem;background:var(--grund)}
.knopf:hover,.knopf:focus-visible{background:var(--link);color:var(--karte)}
.text h1{color:var(--name);font-size:1.75rem;line-height:1.2;margin:0 0 1rem}
.text h2{font-size:1rem;color:var(--text);margin:1.5rem 0 .35rem}
.text p,.text ul{margin:0 0 .75rem}
.mail .at::after{content:"@"}
.mail .punkt::after{content:"."}
footer{background:var(--band);color:var(--bandtext);font-size:.875rem;padding:.6rem 1rem}
footer ul{max-width:36rem;margin:0 auto;padding:0;list-style:none;display:flex;gap:1.25rem}
footer a{color:var(--bandtext)}
footer a:focus-visible{outline-color:var(--bandtext)}
@media (max-width:420px){.zeichen{height:4.25rem}.karte{padding:1.75rem 1.25rem}}