:root{
    --bg: #f3e9dc;       /* Beige */
    --text: #4b2e2e;     /* Dunkelbraun */
    --btn: #6b4e3d;      /* Braun */
    --btn-hover: #4b2e2e;/* Dunkleres Braun */
    --shadow: 0 4px 12px rgba(0,0,0,0.2);
  }
  
  *{ box-sizing: border-box; }
  html,body{ height: 100%; margin: 0; }
  body{
    font-family: 'Comic Neue', cursive;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .container{
    min-height: 100dvh;
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
  }
  
  /* Avatar & Name */
  .avatar{
    text-align: center;
  }
  .avatar img{
    width: 220px;
    border-radius: 50%;
    border: 5px solid var(--text);
    box-shadow: var(--shadow);
  }
  .avatar .name{
    margin-top: 12px;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--text);
  }
  
  /* Content */
  .content{ text-align: left; }
  .content h1{
    font-size: clamp(2rem, 2.5vw + 1rem, 3rem);
    margin: 0 0 10px;
  }
  .content p{
    font-size: clamp(1rem, 0.5vw + 0.9rem, 1.25rem);
    margin: 0 0 20px;
  }
  
  /* Buttons */
  .links{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  .btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: bold;
    background: var(--btn);
    color: var(--bg);
    box-shadow: var(--shadow);
    transition: all .3s ease;
  }
  .btn i{ font-size: 1.3em; }
  
  /* Hover-Effekte */
  .btn:hover,
  .btn:focus-visible{
    background: linear-gradient(135deg, var(--btn) 0%, var(--btn-hover) 100%);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
    outline: none;
  }
  
  /* Responsive Anpassungen */
  @media (max-width: 768px){
    .container{
      flex-direction: column;
      text-align: center;
      gap: 24px;
    }
    .content{ text-align: center; }
    .avatar img{ width: 180px; }
    .links{ width: 100%; justify-content: center; }
    .btn{ flex: 1 1 100%; justify-content: center; }
  }
  @media (max-width: 420px){
    .avatar img{ width: 150px; }
    .avatar .name{ font-size: 1.5rem; }
  }
  /* Markenname */
.brand {
    font-size: clamp(2.2rem, 3vw + 1rem, 3.5rem);
    margin: 0 0 8px;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 2px;
  }