:root{
    --bg:#1A1030; --bg2:#150C28; --violet:#8B4DF0; --violet-soft:#BCA8F2;
    --white:#FFFFFF; --line:rgba(139,77,240,0.35);
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  *{box-sizing:border-box}
  html{scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth;}
  body{
    margin:0; background:var(--bg); color:var(--white);
    font-family:'Oswald',Arial,sans-serif; overflow-x:hidden;
  }
  a{color:inherit}

  header{
    position:sticky; top:0; z-index:10;
    padding:calc(14px + env(safe-area-inset-top,0px)) 20px 14px;
    display:flex; align-items:center; justify-content:space-between;
    background:rgba(21,12,40,0.85); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .brand{display:flex; align-items:center; gap:10px; font-family:'Anton',sans-serif; font-size:18px; letter-spacing:0.5px;}
  .brand .mark{width:30px;height:30px;border-radius:50%;background:var(--violet);border:2px solid var(--white);display:flex;align-items:center;justify-content:center;font-size:12px;}
  nav a{text-decoration:none; font-size:14px; letter-spacing:1px; margin-left:22px; color:var(--violet-soft); font-weight:500;}
  nav a:hover{color:var(--white)}

  .hero{
    max-width:900px; margin:0 auto; padding:64px 24px 40px; text-align:center;
  }
  .hero svg{width:min(560px,90%); height:auto; display:block; margin:0 auto;}
  .tagline{
    font-size:clamp(14px,2.4vw,18px); letter-spacing:2px; color:var(--violet-soft);
    text-transform:uppercase; margin-top:6px; font-weight:500;
  }
  .lede{max-width:520px; margin:22px auto 0; color:#D9CCF8; font-size:16px; line-height:1.6;}
  .cta{
    display:inline-block; margin-top:30px; padding:13px 30px;
    background:var(--violet); color:var(--white); text-decoration:none;
    font-weight:600; letter-spacing:1px; border-radius:999px; font-size:15px;
    transition:transform .15s ease, background .15s ease;
  }
  .cta:hover{background:#9c63ff; transform:translateY(-1px);}

  section{max-width:1040px; margin:0 auto; padding:50px 24px;}
  h2{
    font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(24px,4vw,32px);
    letter-spacing:1px; text-align:center; margin:0 0 8px;
  }
  .section-sub{text-align:center; color:var(--violet-soft); font-size:14px; letter-spacing:1px; margin-bottom:36px;}

  .team{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px;
  }
  .card{
    display:block; background:var(--bg2); border:1px solid var(--line); border-radius:16px;
    padding:24px 20px; text-align:left; transition:border-color .15s ease, transform .15s ease;
    text-decoration:none; color:inherit;
  }
  .card, .card *{text-decoration:none !important;}
  .card:hover{border-color:var(--violet); transform:translateY(-3px);}
  .card .name{font-family:'Anton',sans-serif; font-size:24px; letter-spacing:0.5px;}
  .card .role{color:var(--violet); font-size:13.5px; letter-spacing:0.5px; margin-top:4px; min-height:17px;}
  .card .sep{border:none; border-top:1px solid var(--line); margin:14px 0;}
  .card .link-hint{
    display:block; font-size:13.5px; color:var(--violet-soft); text-decoration:none;
  }
  .card:hover .link-hint{color:var(--white)}

  .card .bio-toggle{
    display:inline-block; margin-top:14px; font-size:12.5px; letter-spacing:0.5px;
    color:var(--violet-soft); background:none; border:1px solid var(--line);
    border-radius:999px; padding:6px 14px; cursor:pointer; font-family:'Oswald',Arial,sans-serif;
  }
  .card .bio-toggle:hover{border-color:var(--violet); color:var(--white)}
  .card .bio{
    display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
    font-size:13px; line-height:1.7; color:#D9CCF8;
  }
  .card .bio.open{display:block}
  .card .bio dt{color:var(--violet-soft); font-size:11px; letter-spacing:0.5px; text-transform:uppercase; margin-top:8px;}
  .card .bio dt:first-child{margin-top:0}
  .card .bio dd{margin:0;}
  .card .bio input{
    width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--line);
    background:var(--bg); color:var(--white); font-family:'Oswald',Arial,sans-serif;
    font-size:13.5px; margin-top:4px;
  }
  .card .bio input:focus{outline:none; border-color:var(--violet);}
  .card .bio-send{
    display:inline-block; margin-top:12px; font-size:12.5px; letter-spacing:0.5px;
    color:var(--white); background:var(--violet); border:none;
    border-radius:999px; padding:8px 18px; cursor:pointer; font-family:'Oswald',Arial,sans-serif;
    font-weight:600;
  }
  .card .bio-send:hover{background:#9c63ff}
  .card .bio-note{font-size:11.5px; color:#8f7fc2; margin-top:8px;}

  .contact-box{
    background:var(--bg2); border:1px solid var(--line); border-radius:20px;
    padding:36px 28px; text-align:center;
  }
  .contact-box p{color:#D9CCF8; font-size:15px; max-width:440px; margin:10px auto 22px; line-height:1.6;}
  .contact-links{display:flex; flex-wrap:wrap; justify-content:center; gap:14px;}
  .contact-links a{
    border:1px solid var(--line); padding:10px 20px; border-radius:999px; text-decoration:none;
    font-size:14px; letter-spacing:0.5px; color:var(--white);
  }
  .contact-links a:hover{border-color:var(--violet); background:rgba(139,77,240,0.12);}

  .contact-form{display:grid; gap:16px; text-align:left; max-width:480px; margin:0 auto;}
  .contact-form label{
    display:block; font-size:12.5px; letter-spacing:0.8px; text-transform:uppercase;
    color:var(--violet-soft); margin-bottom:6px;
  }
  .contact-form input, .contact-form select, .contact-form textarea{
    width:100%; padding:11px 13px; border-radius:10px; border:1px solid var(--line);
    background:var(--bg); color:var(--white); font-family:'Oswald',Arial,sans-serif;
    font-size:14.5px;
  }
  .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
    outline:none; border-color:var(--violet);
  }
  .contact-form textarea{resize:vertical; min-height:90px;}
  .contact-form .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  @media (max-width:520px){ .contact-form .row2{grid-template-columns:1fr;} }
  .contact-form button{
    justify-self:center; margin-top:4px; padding:13px 34px; border:none; border-radius:999px;
    background:var(--violet); color:var(--white); font-weight:600; letter-spacing:1px;
    font-size:15px; cursor:pointer; transition:background .15s ease, transform .15s ease;
    font-family:'Oswald',Arial,sans-serif;
  }
  .contact-form button:hover{background:#9c63ff; transform:translateY(-1px);}
  .form-note{text-align:center; font-size:12px; color:#8f7fc2; margin-top:14px;}

  footer{
    text-align:center; padding:30px 20px calc(30px + env(safe-area-inset-bottom,0px));
    color:#8f7fc2; font-size:12.5px; letter-spacing:0.5px; border-top:1px solid var(--line);
  }
  footer .joke{margin-top:6px; opacity:0.7;}

/* --- Profilseiten --- */
.back-link{
  display:inline-flex; align-items:center; gap:6px; color:var(--violet-soft);
  text-decoration:none; font-size:13.5px; letter-spacing:0.5px; margin-bottom:6px;
}
.back-link:hover{color:var(--white)}

.profile-hero{
  max-width:720px; margin:0 auto; padding:40px 24px 10px; text-align:center;
}
.avatar{
  width:120px; height:120px; border-radius:50%; margin:0 auto 18px;
  background:var(--violet); border:3px solid var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:'Anton',sans-serif; font-size:44px; color:var(--white);
}
.profile-hero .name{
  font-family:'Anton',sans-serif; font-size:clamp(30px,6vw,44px); letter-spacing:0.5px;
}
.profile-hero .role{color:var(--violet); font-size:15px; letter-spacing:0.5px; margin-top:4px;}
.profile-hero .mail{display:inline-block; margin-top:10px; color:var(--violet-soft); font-size:14px; text-decoration:none;}
.profile-hero .mail:hover{color:var(--white)}

.panel{
  background:var(--bg2); border:1px solid var(--line); border-radius:20px;
  padding:30px 26px; max-width:560px; margin:0 auto 32px;
}
.panel h2{font-size:20px; text-align:left; margin-bottom:18px;}
.panel .field-grid{display:grid; gap:14px;}
.panel .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:480px){ .panel .row2{grid-template-columns:1fr;} }
.panel label{
  display:block; font-size:12px; letter-spacing:0.6px; text-transform:uppercase;
  color:var(--violet-soft); margin-bottom:5px;
}
.panel input, .panel textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--bg); color:var(--white); font-family:'Oswald',Arial,sans-serif; font-size:14px;
}
.panel input:focus, .panel textarea:focus{outline:none; border-color:var(--violet);}
.panel textarea{min-height:90px; resize:vertical;}
.panel button{
  margin-top:6px; padding:12px 26px; border:none; border-radius:999px;
  background:var(--violet); color:var(--white); font-weight:600; letter-spacing:1px;
  font-size:14.5px; cursor:pointer; font-family:'Oswald',Arial,sans-serif;
}
.panel button:hover{background:#9c63ff}
.panel .note{font-size:12px; color:#8f7fc2; margin-top:10px;}

.bio-facts{display:grid; gap:14px;}
.bio-facts dt{
  font-size:11px; letter-spacing:0.6px; text-transform:uppercase;
  color:var(--violet-soft); margin:0;
}
.bio-facts dd{margin:3px 0 0; font-size:15px; color:var(--white);}