:root{
    --max: 760px;
  
    --radius: 26px;
    --radius2: 18px;
  
    --stroke: rgba(255,255,255,0.22);
    --stroke2: rgba(255,255,255,0.16);
  
    --text: rgba(255,255,255,0.95);
    --muted: rgba(255,255,255,0.82);
    --muted2: rgba(255,255,255,0.68);
  
    --shadow: 0 22px 70px rgba(0,0,0,0.28);
  }
  
  *{ box-sizing: border-box; }
  html,body{ height:100%; }
  
  body{
    margin:0;
    font-family: "Poppins", Helvetica, Arial, sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }
  
  /* Background (Instagram gradient inspired) */
  .bg{
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
      radial-gradient(1200px 900px at 70% 15%, rgba(255,255,255,0.20), transparent 55%),
      radial-gradient(900px 700px at 20% 78%, rgba(255,255,255,0.16), transparent 60%),
      linear-gradient(135deg, #f7b13a 0%, #f05b83 35%, #b23aa6 70%, #5b5bd6 100%);
  }
  
  /* Page container */
  .page{
    min-height: 100%;
    display:flex;
    justify-content:center;
    padding: 18px 14px 36px;
  }
  
  /* Liquid glass panel */
  .glass{
    width: 100%;
    max-width: var(--max);
    border-radius: var(--radius);
    border: 1px solid var(--stroke);
    background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.10));
    box-shadow: var(--shadow);
  
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  
    overflow: hidden;
  }
  
  /* HERO (centered, avatar above text) */
  .hero{
    padding: 26px 18px 14px;
    text-align: center;
  }
  
  .heroTopCentered{
    display: grid;
    justify-items: center;
    gap: 14px;
  }
  
  .avatarRing{
    width: 96px;
    height: 96px;
    border-radius: 999px;
    padding: 4px;
    display:grid;
    place-items:center;
    background: conic-gradient(from 180deg, #f7b13a, #f05b83, #b23aa6, #5b5bd6, #f7b13a);
    position: relative;
  }
  
  .avatar{
    width: 100%;
    height: 100%;
    border-radius: 999px;
    object-fit: cover;
    border: 3px solid rgba(255,255,255,0.88);
    display:block;
  }
  
  .avatarFallback{
    position:absolute;
    inset: 6px;
    border-radius: 999px;
    border: 3px solid rgba(255,255,255,0.88);
    display:none;
    place-items:center;
    font-weight: 900;
    font-size: 34px;
    background: rgba(255,255,255,0.12);
  }
  .avatarRing.fallback .avatarFallback{ display:grid; }
  
  .heroText{
    display: grid;
    gap: 8px;
    justify-items: center;
  }
  
  .handle{
    font-weight: 700;
    opacity: 0.95;
    letter-spacing: 0.2px;
  }
  
  .heroText h1{
    margin: 0;
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: -0.6px;
  }
  
  .heroText p{
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
    max-width: 62ch;
  }
  
  .hero .iconRow{
    justify-content: center; /* oben zentriert */
  }
  
  /* Icon rows (phone/mail and social icons) */
  .iconRow{
    margin-top: 16px;
    display: flex;
    justify-content: flex-start; /* ← linksbündig */
    gap: 14px;
    flex-wrap: wrap;
  }  
  
  /* white circle buttons like your reference */
  .iconBtn{
    width: 62px;
    height: 62px;
    border-radius: 999px;
    display:grid;
    place-items:center;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(255,255,255,0.75);
    box-shadow:
      0 10px 30px rgba(0,0,0,0.20),
      inset 0 0 0 1px rgba(255,255,255,0.35);
    transition: transform .12s ease, box-shadow .15s ease;
    text-decoration:none;
    -webkit-tap-highlight-color: transparent;
  }
  
  .iconBtn:hover{
    transform: translateY(-1px);
    box-shadow:
      0 14px 36px rgba(0,0,0,0.22),
      inset 0 0 0 1px rgba(255,255,255,0.45);
  }
  
  .iconBtn:active{ transform: translateY(0); }
  
  /* SVG icons (phone/mail) */
  .iconBtn svg{
    width: 28px;
    height: 28px;
    fill: #111;
  }
  
  /* Font Awesome icons (social/globe) */
  .iconBtn i{
    font-size: 26px;
    color: #111;
    line-height: 1;
  }
  
  /* Accordion container */
  .accordion{
    padding: 0 14px 16px;
  }
  
  /* Each collapsible block */
  .block{
    margin-top: 12px;
    border-radius: var(--radius2);
    border: 1px solid var(--stroke2);
    background: rgba(255,255,255,0.08);
    overflow: hidden;
  }
  
  /* Summary row */
  .block summary{
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 14px 14px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
  }
  
  .block summary::-webkit-details-marker{ display:none; }
  
  .sumLeft{
    display:flex;
    align-items:center;
    gap: 12px;
    min-width: 0;
  }
  
  /* Artist image badge (instead of emoji) */
  .badgeImgWrap{
    width: 44px;
    height: 44px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.10);
    flex: 0 0 auto;
  }
  
  .badgeImg{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .sumTitle{
    font-weight: 900;
    letter-spacing: -0.2px;
    font-size: 17px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 22ch;
  }
  
  .sumSub{
    margin-top: 2px;
    font-weight: 700;
    color: var(--muted2);
    font-size: 13px;
  }
  
  /* Chevron */
  .chev{
    font-weight: 900;
    opacity: .9;
    transition: transform .15s ease;
    flex: 0 0 auto;
  }
  .block[open] .chev{ transform: rotate(180deg); }
  
  /* Panel content */
  .panel{
    padding: 0 14px 16px;
  }
  
  .desc{
    margin: 4px 0 0;
    color: var(--muted);
    line-height: 1.45;
  }
  
  /* Pills under Country */
  .pillRow{
    margin-top: 12px;
    display:flex;
    justify-content:center;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  .pill{
    padding: 10px 14px;
    border-radius: 999px;
    text-decoration:none;
    color: rgba(255,255,255,0.95);
    font-weight: 800;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.18);
    -webkit-tap-highlight-color: transparent;
  }
  .pill:hover{ background: rgba(255,255,255,0.18); }
  .pill:active{ transform: translateY(1px); }
  
  /* Footer */
  .footer{
    text-align:center;
    padding: 10px 14px 18px;
  }
  
  .script{
    font-size: 22px;
    font-style: italic;
    opacity: 0.95;
    margin-top: 6px;
  }
  
  .tiny{
    margin-top: 8px;
    font-size: 12px;
    font-weight: 650;
    color: rgba(255,255,255,0.70);
  }
  
  /* Mobile tweaks */
  @media (max-width: 360px){
    .page{ padding: 16px 10px 32px; }
    .avatarRing{ width: 88px; height: 88px; }
    .heroText h1{ font-size: 26px; }
    .iconBtn{ width: 56px; height: 56px; }
    .iconBtn svg{ width: 26px; height: 26px; }
    .iconBtn i{ font-size: 24px; }
    .sumTitle{ max-width: 18ch; }
  }
  
  /* Accessibility: reduce motion */
  @media (prefers-reduced-motion: reduce){
    .iconBtn, .chev{ transition: none; }
  }