:root{
      --bg:#0b0f14; --panel:#111826; --fg:#eaf4ff; --muted:#9fb2c8;
      --accent:#3285a8; --accent-2:#7cf; --gap:14px; --radius:14px;
      --tab:#0f1622; --tab-border:#203043; --tab-active:#132033;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
      color:var(--fg);
      background: radial-gradient(90% 140% at 10% 0%, #0b1422, #0a0e13 50%, #070a0f 100%);
    }
    header{
      padding:24px clamp(16px,3vw,32px);
      display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap;
    }
    .brand{font-weight:800; letter-spacing:.2px}
    .brand b{color:var(--accent)}  


.page-title {
 /* font-size: 2rem;  */
  font-weight: 700;
  margin: 0 0 20px 0;
  padding: 0 clamp(16px,3vw,32px);
  
  font-size: 46px;
  color: #3285a8;
  
  
}





    /* Tabs (Gruppen) */
    .tabs-wrap{padding:0 clamp(16px,3vw,32px) 8px}
    .tabs{
      display:flex; gap:8px; align-items:center; overflow-x:auto; scrollbar-width:thin;
      padding-bottom:8px;
    }
    .tab{
      background:var(--tab); color:var(--fg); border:1px solid var(--tab-border);
      border-radius:10px; padding:8px 12px; cursor:pointer; white-space:nowrap;
    }
    .tab[aria-selected="true"]{ background:var(--tab-active); border-color:var(--accent); box-shadow:0 0 0 3px rgba(75,179,253,.25) }
    .tab:focus-visible{ outline:3px solid rgba(75,179,253,.6) }

    main{padding:0 clamp(16px,3vw,32px) 48px}

    /* Responsive Grid mit minmax */
    .grid{
      display:grid; gap:var(--gap);
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
    .card{
      position:relative; overflow:hidden; border-radius:var(--radius);
      background:var(--panel); box-shadow:0 6px 20px rgba(0,0,0,.35);
      outline:none;
    }
    .card:focus-visible{ box-shadow:0 0 0 3px rgba(75,179,253,.7), 0 8px 24px rgba(0,0,0,.45)}
    .card img{
      display:block; width:100%; height:160px; object-fit:cover; filter:saturate(1.05);
      transition:transform .25s ease, filter .25s ease;
    }
    .card:hover img{ transform:scale(1.03); filter:saturate(1.15) }
    .caption{
      position:absolute; inset:auto 0 0 0; padding:8px 10px; font-size:.9rem;
      background:linear-gradient(180deg,transparent,rgba(0,0,0,.55) 35%, rgba(0,0,0,.88));
    }

    /* Lightbox mit Fokus-Trap */
    .lightbox{
      position:fixed; inset:0; display:none; place-items:center;
      background:rgba(3,8,13,.82); backdrop-filter: blur(6px);
    }
    .lightbox.open{ display:grid }
    .lb-frame{
      position:relative; max-width:min(92vw,1400px); max-height:90vh;
      display:flex; align-items:center; gap:12px;
    }
    .lb-img{
      max-width:100%; max-height:90vh; border-radius:12px;
      box-shadow:0 16px 50px rgba(0,0,0,.6);
    }
    .lb-meta{
      position:absolute; left:0; right:0; bottom:-42px; display:flex;
      justify-content:space-between; align-items:center; color:var(--muted); font-size:.95rem;
    }
    .icon-btn{
      position:absolute; top:50%; transform:translateY(-50%);
      border:none; width:44px; height:44px; border-radius:50%; cursor:pointer;
      background:rgba(255,255,255,.10); color:#dfefff; display:grid; place-items:center; font-size:20px;
    }
    .prev{ left:-56px } .next{ right:-56px }
    .close{
      position:absolute; top:-56px; right:0; width:42px; height:42px; border-radius:50%;
      background:rgba(255,255,255,.12); color:#fff; border:none; cursor:pointer; font-size:20px;
    }
    @media (max-width: 700px){
      .prev{left:8px} .next{right:8px} .close{top:8px; right:8px}
      .lb-meta{ position:static; margin-top:8px }
    }

    footer{padding:16px; text-align:center; color:var(--muted); font-size:.9rem}
    .sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }



a:link {
      text-decoration:none;
}