:root{
      --accent:#94BBE9;
      --danger:#c0392b;
      --bg:#f7f7f7;
      --card:#fff;
      --muted:#666;
    }
     
    *{box-sizing:border-box}
    body{
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      margin:0;
      background:var(--bg);
      color:#222;
      line-height:1.4;
    }
     
    .site-header{
      background: #EEAECA;
      background: linear-gradient(62deg,rgba(238, 174, 202, 1) 0%, rgba(148, 187, 233, 1) 100%);
      color:#fff;
      padding:12px 16px;
      display:flex;
      justify-content:space-between;
      align-items:center;
    }
    .site-header h1{margin:0;font-size:18px}
    .site-header nav a{color:#ffffff;margin-left:12px;text-decoration:none}
     
    .container{max-width:1100px;margin:18px auto;padding:0 12px}
     
    .panel{
      background:var(--card);
      padding:12px;
      border-radius:10px;
      box-shadow:0 6px 18px rgba(13,34,65,0.06);
      margin-bottom:14px;
    }
     
    .auth-panels{display:flex;gap:12px;flex-wrap:wrap}
    .panel .btn, .btn{
      background:var(--accent); color:#fff; border:0; padding:10px 14px; border-radius:8px; cursor:pointer;
    }
    .btn-danger{background:var(--danger)}
    .btn-warning{background:#e67e22}
    .btn.small{padding:6px 8px;font-size:13px}
    .inline-form{display:inline-block}
    .fullwidth-mobile{width:220px}
    @media (max-width:640px){
      .auth-panels{flex-direction:column}
      .fullwidth-mobile{width:100%}
      .panel{padding:10px}
    }
    .msg{padding:10px;border-radius:8px;margin-bottom:10px}
    .msg-success{background:#e9fbff;border:1px solid #bfe9ff;color:#055a6a}
    .msg-error{background:#ffecec;border:1px solid #f7c0c0;color:#7a0b0b}
     
    .table-responsive{overflow:auto}
    .channel-table{width:100%;border-collapse:collapse}
    .channel-table th, .channel-table td{border:1px solid #eee;padding:8px;text-align:left}
    .row-belegt{background:#fff6f6}
    .row-frei{background:#f7fff7}
    .small{font-size:13px}
    .muted{color:var(--muted);font-size:13px}
    .qr-area{margin-top:8px}
.avatar-link {
  display: inline-block;
  margin-left: 1rem;
  text-decoration: none;
}

.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee; 
  border: 2px solid #ccc;
  transition: border-color 0.2s ease;
}

.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-circle:hover {
  border-color: #EEAECA;
}