:root{
      --bg:#0b1020;
      --panel: rgba(255,255,255,.06);
      --panel2: rgba(255,255,255,.10);
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.68);
      --line: rgba(255,255,255,.12);
      --accent:#39ff14; /* Neon-Grün */
      --accent2:#a78bfa;
      --ok:#34d399;
      --danger:#fb7185;

      --radius:18px;
      --shadow: 0 12px 32px rgba(0,0,0,.38);
      --max: 1180px;
      --gap: 14px;

      --focus: 0 0 0 4px rgba(57,255,20,.18);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 600px at 20% -10%, rgba(103,232,249,.18), transparent 55%),
        radial-gradient(900px 500px at 85% 0%, rgba(167,139,250,.18), transparent 55%),
        radial-gradient(800px 600px at 50% 110%, rgba(52,211,153,.12), transparent 60%),
        var(--bg);
    }

    a{ color:inherit; text-decoration:none; }
    button, input, select{ font:inherit; color:inherit; }
    .wrap{ max-width:var(--max); margin:0 auto; padding:0 18px; }

    header{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(10px);
      background: linear-gradient(to bottom, rgba(11,16,32,.78), rgba(11,16,32,.40));
      border-bottom:1px solid var(--line);
    }
    .topbar{
      display:flex; align-items:center; justify-content:space-between;
      gap:12px; padding:14px 0;
    }
    

    .navlinks{
      display:flex; align-items:center; gap:8px; flex-wrap:wrap;
      justify-content:flex-end;
    }
    .navlinks a{
      font-size:13px; color:var(--muted);
      padding:8px 10px; border-radius:999px;
      border:1px solid transparent;
    }
    .navlinks a:hover{
      color:var(--text);
      border-color: var(--line);
      background: rgba(255,255,255,.04);
    }

    .hero{ padding:22px 0 16px; }
    .heroCard{
      border:1px solid var(--line);
      border-radius: calc(var(--radius) + 8px);
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .heroInner{
      padding:18px;
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:16px;
      align-items:start;
    }
    .heroTitle{
      margin:0 0 8px;
      font-size: clamp(22px, 3.2vw, 36px);
      line-height: 1.08;
      letter-spacing: .2px;
    }
    .heroSub{
      margin:0 0 12px;
      color: var(--muted);
      font-size: 14px;
      max-width: 85ch;
    }
    .heroSub .en{
      display:block;
      margin-top:6px;
      color: rgba(255,255,255,.56);
      font-size: 13px;
    }

    .trustStrip{
      margin-top: 10px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }
    .trustItem{
      display:inline-flex; align-items:center; gap:8px;
      font-size:12px;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.04);
      color: var(--muted);
    }
    .trustIcon{ width:16px; height:16px; opacity:.95; }
    .trustStrong{ color: var(--text); font-weight:750; }

    .badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
    .badge{
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.04);
      color: var(--muted);
      display:inline-flex; align-items:center; gap:8px;
    }
    .dot{
      width:7px; height:7px; border-radius:50%;
      background: var(--accent);
      box-shadow: 0 0 0 4px rgba(57,255,20,.10);
    }
    .badge.important{
      border-color: rgba(251,113,133,.45);
      background: rgba(251,113,133,.12);
      color: rgba(255,255,255,.90);
    }
    .badge.update{
      border-color: rgba(52,211,153,.40);
      background: rgba(52,211,153,.12);
      color: rgba(255,255,255,.90);
    }
    .badge strong{ color: var(--text); font-weight:750; }

    .heroRight{
      border-left: 1px solid var(--line);
      padding-left: 16px;
    }
    .note{ font-size:13px; color: var(--muted); margin: 0 0 10px; }
    .pill{
      display:flex; gap:10px; flex-wrap:wrap;
      align-items:center;
    }
    .pill button{
      appearance:none; border:1px solid var(--line);
      background: rgba(255,255,255,.04);
      color: var(--text);
      padding:9px 12px;
      border-radius: 999px;
      font-size: 13px;
      cursor:pointer;
      transition: transform .06s ease, background .15s ease, border-color .15s ease;
      outline:none;
    }
    .pill button:hover{ background: rgba(255,255,255,.07); }
    .pill button:active{ transform: translateY(1px); }
    .pill button[aria-pressed="true"]{
      border-color: rgba(57,255,20,.55);
      background: rgba(57,255,20,.12);
    }
    .pill button:focus-visible{ box-shadow: var(--focus); }

    .controls{
      padding: 14px 18px 18px;
      border-top:1px solid var(--line);
      background: rgba(255,255,255,.02);
      display:grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items:center;
    }
    .search{
      display:flex; gap:10px; align-items:center;
      border:1px solid var(--line);
      border-radius: 999px;
      padding: 10px 12px;
      background: rgba(255,255,255,.04);
    }
    .search svg{ flex:0 0 auto; opacity:.8; }
    .search input{
      width:100%;
      border:0; outline:0;
      background: transparent;
      color: var(--text);
      font-size: 14px;
    }
    .search input::placeholder{ color: rgba(255,255,255,.45); }
    .search:focus-within{ box-shadow: var(--focus); border-color: rgba(57,255,20,.45); }

    .metaRow{
      display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap;
      color: var(--muted); font-size: 13px;
      align-items:center;
    }
    .chip{
      padding:8px 10px;
      border-radius:999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      display:inline-flex; gap:8px; align-items:center;
      white-space:nowrap;
    }
    .chip strong{ color: var(--text); font-weight:650; }

    .select{
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      color: var(--text);
      border-radius: 999px;
      padding: 8px 10px;
      outline:none;
    }
    .select:focus-visible{ box-shadow: var(--focus); border-color: rgba(57,255,20,.45); }

    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:8px;
      border-radius: 12px;
      padding: 10px 12px;
      border: 1px solid rgba(57,255,20,.35);
      background: rgba(57,255,20,.14);
      color: var(--text);
      font-weight: 750;
      font-size: 13px;
      cursor:pointer;
      transition: transform .06s ease, background .15s ease, border-color .15s ease;
      white-space:nowrap;
      outline:none;
    }
    .btn:hover{ background: rgba(57,255,20,.20); border-color: rgba(57,255,20,.55); }
    .btn:active{ transform: translateY(1px); }
    .btn:focus-visible{ box-shadow: var(--focus); }

    .btn.secondary{
      border-color: var(--line);
      background: rgba(255,255,255,.04);
      color: var(--muted);
      font-weight:650;
    }
    .btn.secondary:hover{ background: rgba(255,255,255,.07); color: var(--text); }

    main{ padding: 18px 0 30px; }

    .grid{
      display:grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(--gap);
    }

    .card{
      grid-column: span 6;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
      box-shadow: var(--shadow);
      overflow:hidden;
      display:grid;
      grid-template-columns: 44% 56%;
      min-height: 100%;
    }

    .cardTop{
      grid-column: 1 / -1;
      padding: 12px 12px 0;
      display:flex;
      justify-content:space-between;
      gap:10px;
      align-items:flex-start;
    }

    .kicker{
      display:flex; flex-wrap:wrap; gap:8px; align-items:center;
      color: var(--muted); font-size: 12px;
    }
    .tag{
      padding:4px 9px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
    }
    .newest{
      color: rgba(52,211,153,.95);
      border-color: rgba(52,211,153,.35);
      background: rgba(52,211,153,.10);
    }
    .count{
      color: rgba(255,255,255,.85);
      border-color: rgba(167,139,250,.35);
      background: rgba(167,139,250,.10);
    }

    .media{
      padding: 10px 12px 12px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .previewWrap{
      border-radius: 14px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.35);
    }
    video{
      width:100%;
      display:block;
      aspect-ratio: 16 / 9;
      height:auto;
      background: rgba(0,0,0,.35);
    }

    .content{
      padding: 10px 12px 12px 0;
      display:flex;
      flex-direction:column;
      gap:10px;
      min-width: 0;
    }
    .title{
      margin:0;
      font-size: 16px;
      line-height: 1.25;
      letter-spacing: .2px;
    }
    .desc{
      margin:0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      min-height: calc(1.45em * 2);
    }

    .metaLine{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
      color: var(--muted);
      font-size: 12px;
      padding-top:2px;
    }
    .metaPill{
      border:1px solid var(--line);
      background: rgba(255,255,255,.04);
      border-radius:999px;
      padding:6px 9px;
      display:inline-flex;
      gap:8px;
      align-items:center;
      white-space:nowrap;
    }
    .metaPill strong{ color: var(--text); font-weight:650; }

    .actions{
      margin-top:auto;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      padding-right: 12px;
      padding-bottom: 12px;
    }

    .empty{
      grid-column: 1 / -1;
      margin: 0;
      border:1px dashed rgba(255,255,255,.18);
      border-radius: var(--radius);
      padding: 18px;
      color: var(--muted);
      background: rgba(255,255,255,.03);
    }

    .sections{
      margin-top: 22px;
      display:flex; flex-direction:column; gap: 14px;
    }
    section{
      border:1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255,255,255,.04);
      overflow:hidden;
    }
    section .secHead{
      padding: 14px 14px 12px;
      display:flex; justify-content:space-between; align-items:center; gap:12px;
      border-bottom:1px solid var(--line);
      background: rgba(255,255,255,.03);
    }
    section h2{ margin:0; font-size: 16px; letter-spacing:.2px; }
    section .secBody{
      padding: 14px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;
    }
    details{
      border:1px solid var(--line);
      border-radius: 14px;
      padding: 10px 12px;
      background: rgba(255,255,255,.03);
      margin: 10px 0 0;
    }
    summary{
      cursor:pointer;
      color: var(--text);
      font-weight: 800;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      list-style:none;
      outline:none;
    }
    summary::-webkit-details-marker { display:none; }
    summary:focus-visible{ box-shadow: var(--focus); border-radius: 12px; }

    footer{
      border-top:1px solid var(--line);
      margin-top: 24px;
      padding: 18px 0 28px;
      color: rgba(255,255,255,.55);
      font-size: 13px;
      text-align:center;
    }
    footer .footStrong{ color: rgba(255,255,255,.82); }
    footer .footLinks{ margin-top:10px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
    footer .footLinks a{
      color: rgba(255,255,255,.58);
      padding: 6px 10px;
      border: 1px solid transparent;
      border-radius: 999px;
    }
    footer .footLinks a:hover{
      color: rgba(255,255,255,.86);
      border-color: rgba(255,255,255,.12);
      background: rgba(255,255,255,.04);
    }

    .modalOverlay{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.62);
      display:none;
      align-items:center;
      justify-content:center;
      padding: 18px;
      z-index: 100;
    }
    .modalOverlay[aria-hidden="false"]{ display:flex; }
    .modal{
      width: min(980px, 100%);
      border-radius: calc(var(--radius) + 8px);
      background: linear-gradient(180deg, rgba(11,16,32,.92), rgba(11,16,32,.78));
      border: 1px solid rgba(255,255,255,.16);
      box-shadow: 0 20px 60px rgba(0,0,0,.55);
      overflow:hidden;
    }
    .modalHead{
      padding: 14px 14px;
      display:flex;
      gap: 12px;
      align-items:flex-start;
      justify-content:space-between;
      border-bottom: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.03);
    }
    .modalTitle{
      margin:0;
      font-size: 16px;
      letter-spacing:.2px;
      line-height: 1.25;
    }
    .modalSub{
      margin:6px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
      max-width: 95ch;
    }
    .modalClose{
      border-radius: 12px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.04);
      cursor:pointer;
      color: var(--muted);
      font-weight: 750;
      outline:none;
    }
    .modalClose:hover{ background: rgba(255,255,255,.07); color: var(--text); }
    .modalClose:focus-visible{ box-shadow: var(--focus); }

    .modalBody{
      padding: 14px;
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 14px;
    }
    .modalPreview{
      border-radius: 16px;
      overflow:hidden;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.35);
    }
    .modalPreview video{
      width:100%;
      display:block;
      aspect-ratio: 16/9;
    }

    .clipList{
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      background: rgba(255,255,255,.03);
      overflow:hidden;
      display:flex;
      flex-direction:column;
      min-height: 100%;
    }
    .clipListHead{
      padding: 12px;
      border-bottom: 1px solid rgba(255,255,255,.10);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color: var(--muted);
      font-size: 12px;
      background: rgba(255,255,255,.02);
    }
    .clipListBody{
      overflow:auto;
      max-height: 380px;
    }
    .clipItem{
      padding: 12px;
      border-top: 1px solid rgba(255,255,255,.10);
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .clipItem:first-child{ border-top:0; }
    .clipName{
      font-weight: 850;
      font-size: 13px;
      line-height: 1.3;
    }
    .clipDesc{
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
      margin:0;
    }
    .clipRow{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
    }

    .techGrid{
      margin-top: 10px;
      border-top: 1px solid rgba(255,255,255,.10);
      padding-top: 10px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:8px 12px;
      font-size: 12px;
      color: var(--muted);
    }
    .techGrid div strong{ color: var(--text); font-weight:650; }

    .modalFoot{
      padding: 14px;
      border-top: 1px solid rgba(255,255,255,.12);
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
      background: rgba(255,255,255,.02);
    }
    .modalFootLeft{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      color: var(--muted);
      font-size: 12px;
      align-items:center;
    }

    @media (max-width: 1024px){
      .heroInner{ grid-template-columns: 1fr; }
      .heroRight{ border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:12px; }
      .controls{ grid-template-columns: 1fr; }
      .metaRow{ justify-content:flex-start; }

      .card{ grid-column: span 12; grid-template-columns: 1fr; }
      .content{ padding: 0 12px 12px; }
      .actions{ padding-left:12px; }

      .modalBody{ grid-template-columns: 1fr; }
      .clipListBody{ max-height: 320px; }
      .techGrid{ grid-template-columns: 1fr; }
    }
    @media (max-width: 640px){
      .navlinks{ display:none; }
      .brand{ min-width:auto; }
    }
    @media (prefers-reduced-motion: reduce){
      *{ scroll-behavior:auto !important; transition:none !important; }
    }