:root{
      --bg:#0b0f14; --fg:#e6edf3; --muted:#9fb0c0; --card:#111824;
      --line:#1f2a3a; --accent:#7dd3fc; --accent2:#a7f3d0;
      --warn:#fbbf24;
      --max:980px;
    }
    *{box-sizing:border-box}
    body{
      margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      background: radial-gradient(1200px 800px at 20% 0%, rgba(125,211,252,.10), transparent 60%),
                  radial-gradient(900px 700px at 80% 20%, rgba(167,243,208,.08), transparent 55%),
                  var(--bg);
      color:var(--fg);
      line-height:1.45;
    }
    a{color:var(--accent); text-decoration:none}
    a:hover{text-decoration:underline}
    header{
      border-bottom:1px solid var(--line);
      position:sticky; top:0; backdrop-filter: blur(10px);
      background: rgba(11,15,20,.70);
      z-index:10;
    }
    .wrap{max-width:var(--max); margin:0 auto; padding:18px 18px}
    .nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
    .brand{display:flex; flex-direction:column}
    .brand b{letter-spacing:.3px}
    .brand span{color:var(--muted); font-size:13px}
    .links{display:flex; gap:14px; flex-wrap:wrap; font-size:14px}
    .hero{padding:42px 0 18px}
    .kicker{color:var(--muted); font-size:14px; letter-spacing:.4px; text-transform:uppercase}
    h1{margin:10px 0 10px; font-size:34px; line-height:1.1}
    .sub{color:var(--muted); max-width:70ch}
    .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px}
    .btn{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 14px; border-radius:12px;
      border:1px solid var(--line); background: rgba(17,24,36,.65);
      color:var(--fg);
    }
    .btn.primary{border-color: rgba(125,211,252,.45); background: rgba(125,211,252,.10)}
    .btn small{color:var(--muted)}
    .grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:14px; margin-top:18px}
    .card{
      grid-column: span 6;
      border:1px solid var(--line); background: rgba(17,24,36,.55);
      border-radius:16px; padding:16px;
    }
    .card h2{margin:0 0 8px; font-size:18px}
    .card p{margin:0; color:var(--muted)}
    .pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line);
      border-radius:999px; color:var(--muted); font-size:13px; background: rgba(17,24,36,.55)
    }
    section{padding:18px 0}
    .section-title{margin:0 0 10px; font-size:22px}
    ul{margin:10px 0 0 18px; color:var(--muted)}
    li{margin:6px 0}
    .two{display:grid; grid-template-columns: 1.2fr .8fr; gap:14px}
    .box{border:1px solid var(--line); background: rgba(17,24,36,.55); border-radius:16px; padding:16px}
    .box h3{margin:0 0 10px; font-size:16px}
    .fine{font-size:13px; color:var(--muted)}
    footer{border-top:1px solid var(--line); padding:18px 0; margin-top:22px}
    .legal{display:flex; gap:14px; flex-wrap:wrap; font-size:14px; color:var(--muted)}
    .note{color:var(--warn)}
    .obf{
      cursor:pointer;
      color:var(--accent);
      border-bottom:1px dotted rgba(125,211,252,.45);
      user-select:none;
    }
    .obf:hover{border-bottom-style:solid}
    @media (max-width: 860px){
      .card{grid-column: span 12}
      .two{grid-template-columns: 1fr}
      h1{font-size:28px}
    }
  
    /* About section layout fixes (no global layout changes) */
    #ueber-mich .two{align-items:start}
    #ueber-mich .box ul{margin:10px 0 0; padding-left:18px}
    #ueber-mich .box li{margin:8px 0; line-height:1.35}
    #ueber-mich .box p.sub{line-height:1.5}

    section { scroll-margin-top: 100px; }
/* Content expansions (scoped, no redesign) */
    .kpi{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
    .kpi .pill{background: rgba(17,24,36,.40)}
    .table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:14px; border:1px solid var(--line)}
    .table th,.table td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
    .table th{font-size:13px; text-transform:uppercase; letter-spacing:.35px; color:var(--muted); background: rgba(17,24,36,.55)}
    .table td{color:var(--muted); background: rgba(17,24,36,.35)}
    .table tr:last-child td{border-bottom:none}
    details{border:1px solid var(--line); background: rgba(17,24,36,.45); border-radius:14px; padding:12px 14px; margin:10px 0}
    summary{cursor:pointer; color:var(--fg); font-weight:600}
    details p{margin:8px 0 0; color:var(--muted)}


/* Ensure pill links look like pills */
a.pill{color:inherit;text-decoration:none}
a.pill:hover{filter:brightness(1.05)}