:root{
    --bg:#ffffff;
    --text:#222;
    --subtle:#666;
    --link:#000;
}

body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    margin:0;
    background:var(--bg);
    color:var(--text);
    line-height:1.65;
}

/* Container */

.container{
    max-width:700px;
    margin:18vh auto 0 auto;
    padding:40px;
}
main.content {
  padding-left: 120px;
}

/* Sprachschalter */

.lang-switch{
    position:fixed;
    top:25px;
    right:30px;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.85rem;
    opacity:0.85;
    letter-spacing:0.05em;
}

.lang-switch a{
    text-decoration:none;
    color:#666;
}

.lang-switch a:hover{
    text-decoration:underline;
}

.lang-switch .active{
    color:#222;
    font-weight:600;
}

.lang-switch .sep{
    color:#666;
}

/* Überschrift */

h1{
    font-size:2.2rem;
    font-weight:600;
    margin-bottom:20px;
    letter-spacing:-0.01em;
}

/* Untertitel */

.subtitle{
    font-size:1.1rem;
    line-height:1.6;
    color:var(--subtle);
    margin-bottom:50px;
    max-width: 30em;
}

.subtitle p{
    margin:0 0 12px 0;
}
.subtitle p:last-child{
    max-width:28em;
}

/* Sektionen */

.section{
    margin-top:40px;
}

.section h2{
    font-size:0.9rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--subtle);
    margin-bottom:12px;
}

/* Links */

.links a{
    display:block;
    text-decoration:none;
    color:var(--link);
    padding:6px 0;
    transition:transform 0.15s ease;
}

.links a:hover{
    text-decoration:underline;
    transform:translateX(4px);
}

.links{
    max-width: 32em;
}

/* Footer */

.footer{
    margin-top:80px;
    font-size:0.9rem;
    color:var(--subtle);
}

/* Dark Mode */

@media (prefers-color-scheme: dark){

:root{
    --bg:#0f1115;
    --text:#e5e5e5;
    --subtle:#9a9a9a;
    --link:#ffffff;
}

}

.role{
    font-size:0.95rem;
    color:var(--subtle);
    margin-top:30px;
}

/* Footer */

.footer a{
    text-decoration:none;
    color:var(--subtle);
}

.footer a:hover{
    text-decoration:underline;
}


.contact a {
  display: block;
  padding: 6px 0;
  text-decoration: none;
  color: var(--link);
  margin-top: 32px;
  transition: transform 0.15s ease;
}