:root{
    --bg:#070b11; --bg2:#0c1320; --fg:#ecf2fb; --muted:#9fb0c8;
    --primary:#86d6ff; --ok:#6cffbe; --glass:rgba(255,255,255,.07); --border:rgba(255,255,255,.12);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    padding-top: 80px;
    font-family: Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--fg);
    background:
      radial-gradient(1200px 600px at 20% -10%, rgba(134,214,255,.08), transparent 60%),
      linear-gradient(180deg,var(--bg),var(--bg2) 70%);
    min-height:100svh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  
  /* Utils */
  .container{max-width:1100px;margin:0 auto;padding:0 20px}
  .vh-only{
    position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0;
    clip:rect(0 0 0 0); clip-path:inset(50%); overflow:hidden; white-space:nowrap; color:transparent;
  }
  .vh-only:focus{
    clip:auto; clip-path:none; width:auto; height:auto; white-space:normal;
    left:16px; top:16px; padding:8px 12px; border-radius:8px;
    background:#000; color:#fff; z-index:2000; border:1px solid #333;
  }
  .glassy{ background:var(--glass); border:1px solid var(--border); backdrop-filter: blur(12px) saturate(130%); }
  
  /* Topbar */
  .topbar{
    position:sticky; top:12px; margin:12px auto 20px; inset-inline:0;
    width:min(1100px, calc(100% - 24px));
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px; border-radius:14px; z-index:10;
  }
  .logo{font-weight:800; display:flex; gap:8px; text-decoration:none; color:var(--fg)}
  .tb-right{display:flex; gap:8px}
  .btn{display:inline-block; padding:10px 12px; border-radius:10px; border:1px solid var(--border); color:var(--fg); text-decoration:none}
  .btn.ghost{ background:rgba(255,255,255,.04) }
  .btn.pill{ border-radius:999px; padding:12px 16px }
  .btn.primary{
    background:linear-gradient(180deg, rgba(134,214,255,.96), rgba(134,214,255,.86));
    color:#062238; border-color:rgba(134,214,255,.92); font-weight:800;
    box-shadow:0 8px 22px rgba(134,214,255,.18), inset 0 1px 0 rgba(255,255,255,.45);
  }
  
  /* Hero */
  .hero{ margin:34px 0 14px }
  .hero h1{ font-size: clamp(34px, 6.8vw, 56px); line-height:1.05; margin:0 0 6px }
  .hero .lede{ color:var(--muted); margin:0 0 12px }
  
  /* Suche */
  .search-wrap{ display:grid; gap:10px; align-items:start; }
  .search{
    width:100%; padding:14px 14px; border-radius:14px; border:1px solid var(--border);
    background:rgba(255,255,255,.05); color:var(--fg); font-size:16px;
  }
  .tags{ display:flex; gap:8px; flex-wrap:wrap }
  .tag{
    padding:8px 10px; border-radius:999px; border:1px solid var(--border);
    background:rgba(255,255,255,.04); color:var(--fg); cursor:pointer;
  }
  .tag.active{ background:rgba(134,214,255,.18); border-color:rgba(134,214,255,.5); color:#062238; font-weight:800 }
  
  /* Kategorien */
  .cat-title{ margin:18px 0 10px; font-size:22px }
  
  /* Accordion */
  .accordion{ display:grid; gap:10px }
  .qa{
    border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.05);
    overflow:hidden;
    transition:box-shadow .2s ease, transform .2s ease, background .2s ease;
  }
  .qa[open]{ box-shadow:0 14px 40px rgba(0,0,0,.32); background:rgba(255,255,255,.06) }
  .qa summary{
    list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
    cursor:pointer; padding:14px 16px; font-weight:700;
  }
  .qa summary::-webkit-details-marker{ display:none }
  .qa .chev{ transition: transform .2s ease; opacity:.85 }
  .qa[open] .chev{ transform: rotate(180deg) }
  .qa .a{ padding:0 16px 16px; color:var(--muted); line-height:1.6 }
  
  /* Contact */
  .contact{ margin:26px 0 50px; border-radius:16px }
  .contact-wrap{ padding:18px; text-align:center }
  .contact .cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px }
  
  /* ==== FOOTER LINKS ==== */
  .foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    margin-top: 4rem;
    background: rgba(20, 20, 25, 0.65); /* Glasoptik Hintergrund */
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.9rem;
    color: #bbb;
    text-align: center;
  }

  .foot-links {
    display: flex;
    gap: 1.25rem;
    font-size: 0.9rem;
  }

  .foot-links a {
    color: #9cc9ff; /* dezentes Blau */
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
  }

  .foot-links a:hover {
    color: #fff;
    text-shadow: 0 0 8px rgba(156, 201, 255, 0.8);
  }

  .foot .muted {
    font-size: 0.75rem;
    color: #666;
  }
  .logos{display:flex; justify-content:center; gap:8px; margin-bottom:8px; flex-wrap:wrap}
  .logo-chip{font-weight:900; letter-spacing:.5px; padding:6px 10px; border-radius:10px; background: rgba(255,255,255,.07); border:1px solid var(--border)}


  /* Responsive */
  @media (max-width: 560px){
    .tb-right .btn{ padding:8px 10px }
    .qa summary{ padding:12px 12px }
    .qa .a{ padding:0 12px 12px }
  }