body{
margin:0;
font-family: "Red Hat Display", sans-serif;
background:var(--bg);
color:#111827;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
padding:24px;
}


.kontakt-card{
max-width:880px;
margin:0 auto;
background:var(--card);
border-radius:var(--radius);
box-shadow:0 6px 18px rgba(15,23,42,0.06);
padding:18px;
}


.kontakt-header{
display:flex;
gap:16px;
align-items:end;
border-bottom:1px solid #eef2f7;
padding-bottom:12px;
}


.kontakt-header h2{
margin:0;
font-size:20px;
line-height:1;
}
.kontakt-header .subtitle{
margin:0;
color:var(--muted);
font-size:14px;
}


.kontakt-body{
padding-top:14px;
display:grid;
gap:16px;
}


/* person row */
.kontakt-person{
display:flex;
gap:12px;
align-items:center;
}
.avatar{
width:56px;
height:56px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
background:linear-gradient(135deg,#fffcee,#4e4339);
color:#ffffff;
font-size:18px;
}
.role{font-weight:600;margin:0}
.small{margin:4px 0 0;color:var(--muted);font-size:13px}


.kontakt-list{margin:0;padding:0;display:grid;gap:10px}
.kontakt-row{display:flex;gap:12px;align-items:start}
.kontakt-row dt{width:96px;font-weight:600;color:var(--muted);}
.kontakt-row dd{margin:0}
.kontakt-row a{color: #4e4339;text-decoration:none}
.kontakt-row a:hover{text-decoration:underline}


.kontakt-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:6px;
}
.btn{
display:inline-block;
padding:10px 14px;
border-radius:10px;
text-decoration:none;
font-weight:600;
background:#4e4339;
color:white;
}
.btn.ghost{
background:transparent;
color: #4e4339;
border:1px solid rgba(15,98,254,0.12);
}


/* RESPONSIVE LAYOUT */
/* desktop: two-column details */
@media (min-width:720px){
.kontakt-body{
grid-template-columns: 1fr 1fr;
align-items:start;
}
.kontakt-person{grid-column:1 / span 2}
.kontakt-actions{grid-column:2 / 3; justify-self:end}
}


@media (max-width:420px){
.avatar{width:48px;height:48px;font-size:16px}
.kontakt-header h2{font-size:18px}
}


/* small accessibility helper */
.kontakt-card a:focus{outline:3px solid rgba(15,98,254,0.18);outline-offset:3px}