/* ===== index.html ===== */
/* =========================================================
       0) DESIGN-TOKENS (Farben, Abstände, Schatten)
       ---------------------------------------------------------
       Alles, was du am Look ändern willst, am besten hier.
       ========================================================= */
    :root{
      /* Grundfarben */
      --bg:    #f6f8fc;
      --card:  #ffffff;
      --ink:   #0b1220;
      --muted: #4b5563;
      --line:  #e6eaf2;

      /* Schatten */
      --shadow:  0 16px 38px rgba(15,23,42,.10);
      --shadow2: 0 10px 22px rgba(15,23,42,.08);

      /* Rundungen & Layout */
      --radius:  18px;
      --radius2: 22px;
      --max:     1160px;

      /* Akzentfarben (für Chips/Karten) */
      --a1:#2bb0ff;
      --a2:#7c5cff;
      --a3:#ff4d7d;
      --a4:#00c2d4;
      --a5:#ff9a3c;
      --a6:#22c55e;
      --a7:#968c00;

      /* Standard-Transition */
      --ease: cubic-bezier(.2,.8,.2,1);

      /* Typo-Weights (Inter ist bis 900 → 950 vermeiden!) */
      --w-text: 450;  /* Fließtext: wirkt bei lokalem Inter weniger "bold" */
      --w-sub:  650;  /* Untertitel/kleine UI-Texte */
      --w-ui:   800;  /* Buttons/Chips */
      --w-bold: 900;  /* Headlines/Key-Texte */
    }

    /* =========================================================
       1) FONTS (lokal, DSGVO-freundlich)
       ---------------------------------------------------------
       WICHTIG:
       - Für normales UI brauchst du ROMAN (normal).
       - Italic nur, wenn du wirklich Kursivtexte nutzt.
       - Wenn du nur italic lädst, fehlt normal → Browser "synthetisiert"
         und das kann dicker/komisch wirken.
       ========================================================= */
    @font-face{
      font-family:"Inter";
      font-style:normal;
      font-weight:400;
      font-display:swap;
      src:url("assets/fonts/inter/inter-v20-latin-regular.woff2") format("woff2");
    }
    @font-face{
      font-family:"Inter";
      font-style:normal;
      font-weight:700;
      font-display:swap;
      src:url("assets/fonts/inter/inter-v20-latin-700.woff2") format("woff2");
    }
    @font-face{
      font-family:"Inter";
      font-style:normal;
      font-weight:900;
      font-display:swap;
      src:url("assets/fonts/inter/inter-v20-latin-900.woff2") format("woff2");
    }
    @font-face{
      font-family:"Inter";
      font-style:italic;
      font-weight:400;
      font-display:swap;
      src:url("assets/fonts/inter/inter-v20-latin-italic.woff2") format("woff2");
    }


    /* =========================================================
       2) BASE / RESET
       ========================================================= */
    *{ box-sizing:border-box; }
    html,body{ height:100%; }

    html{
      /* verhindert iOS-Auto-Zoom/Resize bei Textgrößen */
      -webkit-text-size-adjust: 100%;
    }

    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      color:var(--ink);
      background:var(--bg);
      line-height:1.35;
      overflow-x:hidden;

      /* Rendering (macht Inter oft "ruhiger") */
      font-optical-sizing:auto;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      text-rendering:optimizeLegibility;
      font-synthesis:none;

      /* Default-Weight fürs ganze UI */
      font-weight:var(--w-text);
    }
    body.noScroll{ overflow:hidden; }

    a{ color:inherit; text-decoration:none; }

    /* Wrapper: zentriert + angenehme Seitenabstände */
    .wrap{
      max-width:var(--max);
      margin:0 auto;
      padding:22px 16px 80px;
    }

    /* =========================================================
       3) TYPO-SCHNELLREGELN (damit lokal Inter nicht zu fett wirkt)
       ---------------------------------------------------------
       Du steuerst das alles über --w-Variablen oben.
       ========================================================= */
    .brandTitle,
    .kicker,
    h1,
    .appTitle{
      font-weight:var(--w-bold);
    }

    .brandSub,
    .lead,
    .sectionHead p,
    .hint{
      font-weight:var(--w-sub);
    }

    .btn,
    .chip,
    .go,
    .linkBtn{
      font-weight:var(--w-ui);
    }

    /* =========================================================
       4) HINTERGRUND (Blobs + Noise)
       ---------------------------------------------------------
       Der Hintergrund liegt fixed unter allem (z-index negativ).
       ========================================================= */
    .bg{
      position:fixed;
      inset:0;
      z-index:-2;
      overflow:hidden;
      background: linear-gradient(180deg, #ffffff 0%, var(--bg) 55%, #ffffff 100%);
    }

    /* Ein "Blob" = großer radialer Farbklecks mit Animation */
    .blob{
      position:absolute;
      width:58vmax;
      height:58vmax;
      border-radius:999px;
      opacity:.58;
      filter:blur(14px);
      transform:translate3d(0,0,0);
      will-change:transform;

      /* Bewegung: Drift (Bahn) + Swirl (Rotation/Scale) */
      animation:
        driftA var(--t, 18s) linear infinite,
        swirl  var(--s, 9s)  ease-in-out infinite;
    }

    /* Farbvarianten (Position + Gradient + eigene Bahn) */
    .b1{
      left:-18vmax; top:-22vmax;
      --t:14s; --s:7.5s;
      background: radial-gradient(circle at 30% 30%,
        rgba(43,176,255,.95) 0%,
        rgba(43,176,255,.55) 30%,
        rgba(43,176,255,.20) 52%,
        transparent 72%);
      mix-blend-mode:multiply;
    }
    .b2{
      right:-22vmax; top:-16vmax;
      --t:16s; --s:8.5s;
      background: radial-gradient(circle at 40% 40%,
        rgba(124,92,255,.92) 0%,
        rgba(124,92,255,.52) 32%,
        rgba(124,92,255,.20) 54%,
        transparent 74%);
      mix-blend-mode:multiply;
      animation-name: driftB, swirl;
    }
    .b3{
      left:8vmax; bottom:-26vmax;
      --t:18s; --s:9.5s;
      background: radial-gradient(circle at 40% 40%,
        rgba(255,154,60,.92) 0%,
        rgba(255,154,60,.52) 34%,
        rgba(255,154,60,.20) 56%,
        transparent 76%);
      mix-blend-mode:multiply;
      animation-name: driftC, swirl;
    }
    .b4{
      right:10vmax; bottom:-24vmax;
      --t:20s; --s:10.5s;
      background: radial-gradient(circle at 40% 40%,
        rgba(0,194,212,.90) 0%,
        rgba(0,194,212,.48) 34%,
        rgba(0,194,212,.18) 56%,
        transparent 76%);
      mix-blend-mode:multiply;
      animation-name: driftD, swirl;
    }

    /* Drift-Bahnen (Loop) */
    @keyframes driftA{
      0%{ transform:translate3d(0,0,0); }
      20%{ transform:translate3d(7%,4%,0); }
      45%{ transform:translate3d(3%,-6%,0); }
      70%{ transform:translate3d(-6%,2%,0); }
      100%{ transform:translate3d(0,0,0); }
    }
    @keyframes driftB{
      0%{ transform:translate3d(0,0,0); }
      18%{ transform:translate3d(-8%,5%,0); }
      44%{ transform:translate3d(-2%,-7%,0); }
      73%{ transform:translate3d(6%,1%,0); }
      100%{ transform:translate3d(0,0,0); }
    }
    @keyframes driftC{
      0%{ transform:translate3d(0,0,0); }
      22%{ transform:translate3d(6%,-5%,0); }
      48%{ transform:translate3d(-7%,-1%,0); }
      76%{ transform:translate3d(2%,7%,0); }
      100%{ transform:translate3d(0,0,0); }
    }
    @keyframes driftD{
      0%{ transform:translate3d(0,0,0); }
      16%{ transform:translate3d(5%,-6%,0); }
      42%{ transform:translate3d(-6%,-2%,0); }
      68%{ transform:translate3d(-1%,7%,0); }
      100%{ transform:translate3d(0,0,0); }
    }

    /* Swirl: zweite Bewegungsschicht */
    @keyframes swirl{
      0%{ rotate:0deg;  scale:1; }
      35%{ rotate:10deg; scale:1.04; }
      70%{ rotate:-8deg; scale:0.98; }
      100%{ rotate:0deg; scale:1; }
    }

    /* Glanz-Schicht auf dem Blob (macht’s lebendiger) */
    .blob::after{
      content:"";
      position:absolute;
      inset:-18%;
      border-radius:999px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 58%),
        radial-gradient(circle at 70% 70%, rgba(255,255,255,.12), transparent 62%);
      opacity:.55;
      filter:blur(10px);
      mix-blend-mode:screen;
      animation: shimmer 6.5s ease-in-out infinite;
      will-change: transform, opacity;
      pointer-events:none;
    }
    @keyframes shimmer{
      0%{ transform:translate3d(0,0,0); opacity:.40; }
      50%{ transform:translate3d(2%,-2%,0); opacity:.70; }
      100%{ transform:translate3d(0,0,0); opacity:.40; }
    }

    /* Mini-Noise (als Data-URI, keine externen Requests) */
    .noise{
      position:absolute;
      inset:0;
      opacity:.06;
      mix-blend-mode:multiply;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
    }

    /* =========================================================
       5) TOPBAR (sticky Header)
       ========================================================= */
    .top{
      position:sticky;
      top:12px;
      z-index:50;

      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;

      padding:12px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.84);
      border-radius:var(--radius2);
      box-shadow:var(--shadow2);
      backdrop-filter:blur(10px);
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0; /* erlaubt Text-Ellipsis */
    }

    .logo{
      width:36px;
      height:36px;
      border-radius:14px;

      display:grid;
      place-items:center;

      border:1px solid var(--line);
      background:
        radial-gradient(16px 16px at 30% 30%, rgba(43,176,255,.35), transparent 60%),
        radial-gradient(18px 18px at 70% 70%, rgba(124,92,255,.28), transparent 60%),
        #fff;
      box-shadow:0 10px 22px rgba(15,23,42,.06);
      font-size:16px;
    }

    .brandText{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
    }

    .brandTitle{
      margin:0;
      letter-spacing:-.02em;
      font-size:14px;
      line-height:1.1;

      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .brandSub{
      margin:0;
      color:var(--muted);
      font-size:12px;
      line-height:1.1;

      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    /* Buttons in der Topbar */
    .btnRow{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-end;
    }

    .btn{
      appearance:none;
      border:1px solid var(--line);
      background:#fff;
      color:var(--ink);

      padding:10px 12px;
      border-radius:14px;

      cursor:pointer;
      user-select:none;
      white-space:nowrap;

      display:inline-flex;
      align-items:center;
      gap:10px;

      box-shadow:0 8px 18px rgba(15,23,42,.06);
      transition: transform .12s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
    }
    .btn:hover{ transform:translateY(-2px); border-color:#d6dbea; }
    .btn:active{ transform:translateY(0); }

    .btnIcon{
      width:28px;
      height:28px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:rgba(15,23,42,.06);
      font-size:16px;
    }

    .btnPrimary{
      border-color:rgba(43,176,255,.28);
      background: linear-gradient(180deg, rgba(43,176,255,.16), rgba(124,92,255,.10));
    }

    /* Suche (ab Desktop sichtbar) */
    .search{
      display:none;
      align-items:center;
      gap:10px;

      border:1px solid var(--line);
      background:#fff;
      border-radius:14px;
      padding:10px 12px;
      box-shadow:0 8px 18px rgba(15,23,42,.06);

      min-width:min(560px, 60vw);
    }
    .searchIcon{ opacity:.75; }
    .search input{
      width:100%;
      border:0;
      outline:none;
      font:inherit;
      font-weight:var(--w-sub);
      color:var(--ink);
      background:transparent;
    }
    @media (min-width: 880px){
      .search{ display:flex; }
    }

    /* =========================================================
       6) HERO (Titel, CTA, Highlights)
       ========================================================= */
    .hero{
      margin-top:18px;
      padding:22px;

      border-radius: calc(var(--radius2) + 4px);
      border:1px solid var(--line);
      background: rgba(255,255,255,.78);
      box-shadow: var(--shadow);

      overflow:hidden;
      position:relative;
    }

    .heroGrid{
      display:grid;
      grid-template-columns:1fr;
      gap:16px;
      align-items:start;
    }
    @media (min-width: 920px){
      .heroGrid{ grid-template-columns: 1.15fr .85fr; }
    }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;

      padding:8px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      width:fit-content;
    }

    .kdot{
      width:10px;
      height:10px;
      border-radius:999px;
      background: linear-gradient(135deg, var(--a1), var(--a2));
      box-shadow:0 0 0 4px rgba(43,176,255,.12);
    }

    h1{
      margin:12px 0 0 0;
      font-size:clamp(28px, 3.4vw, 44px);
      line-height:1.05;
      letter-spacing:-.03em;
      max-width:22ch;
      font-weight: 900;
    }

    .lead{
      margin:10px 0 0 0;
      color:var(--muted);
      font-size:14px;
      max-width:64ch;
    }

    .heroActions{
      margin-top:14px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }

    /* Rechte Seite: kleine Feature-Kacheln */
    .heroSide{ display:grid; gap:10px; }

    .miniGrid{
      display:grid;
      grid-template-columns:repeat(2, 1fr);
      gap:10px;
    }

    .mini{
      border:1px solid var(--line);
      border-radius:18px;
      background:#fff;
      box-shadow:0 10px 18px rgba(15,23,42,.06);
      padding:12px;

      transform:translateY(6px);
      opacity:0;
      animation: floatIn .7s var(--ease) forwards;
    }
    .mini:nth-child(2){ animation-delay:.08s; }
    .mini:nth-child(3){ animation-delay:.16s; }
    .mini:nth-child(4){ animation-delay:.24s; }

    .mini strong{
      display:block;
      font-weight:var(--w-bold);
      letter-spacing:-.01em;
      font-size:13px;
    }
    .mini span{
      display:block;
      color:var(--muted);
      font-weight:var(--w-sub);
      font-size:12px;
      margin-top:4px;
    }

    @keyframes floatIn{
      to{ transform:translateY(0); opacity:1; }
    }

    /* Subtile Punkte im Hero (werden per JS gesetzt) */
    .floaters{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:0;
      opacity:.75;
    }
    .floater{
      position:absolute;
      width:10px;
      height:10px;
      border-radius:999px;
      background:rgba(15,23,42,.10);
      box-shadow:0 10px 28px rgba(15,23,42,.10);
      animation:bob 6.5s var(--ease) infinite;
    }
    .floater::after{
      content:"";
      position:absolute;
      inset:-10px;
      background:radial-gradient(circle, rgba(255,255,255,.35), transparent 60%);
      border-radius:999px;
      opacity:.6;
    }
    @keyframes bob{
      0%{ transform:translate3d(0,0,0); opacity:.55; }
      50%{ transform:translate3d(0,-10px,0); opacity:.85; }
      100%{ transform:translate3d(0,0,0); opacity:.55; }
    }

    /* =========================================================
       7) PROMO-BANNER (zwischen Hero und Bibliothek)
       ========================================================= */
    .promoBanner{
      margin-top:16px;
      border:1px solid var(--line);
      border-radius:20px;
      background:rgba(255,255,255,.82);
      box-shadow:var(--shadow2);
      padding:10px;
    }

    .promoHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:2px 4px 8px;
    }

    .promoLabel{
      margin:0;
      font-size:11px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
      font-weight:var(--w-ui);
    }

    .promoDots{
      display:flex;
      align-items:center;
      gap:6px;
    }

    .promoDot{
      width:8px;
      height:8px;
      border-radius:999px;
      background:rgba(11,18,32,.18);
      transition: transform .2s var(--ease), background-color .2s var(--ease);
    }
    .promoDot.active{
      background:var(--a1);
      transform:scale(1.12);
    }

    .promoViewport{
      min-height:130px;
      position:relative;
    }

    .promoSlide{
      position:absolute;
      inset:0;
      border-radius:16px;
      overflow:hidden;
      border:1px solid rgba(11,18,32,.08);
      background:#fff;
      display:grid;
      grid-template-columns:108px 1fr;
      align-items:stretch;
      opacity:0;
      pointer-events:none;
      transform:translateY(6px);
      transition: opacity .45s var(--ease), transform .45s var(--ease);
    }
    .promoSlide.active{
      opacity:1;
      pointer-events:auto;
      transform:translateY(0);
    }

    .promoImg{
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .promoBody{
      padding:12px;
      display:grid;
      gap:8px;
      align-content:center;
      background:
        linear-gradient(125deg, rgba(255,255,255,.98), rgba(246,248,252,.97));
    }

    .promoKicker{
      margin:0;
      font-size:11px;
      letter-spacing:.04em;
      text-transform:uppercase;
      color:var(--muted);
      font-weight:var(--w-ui);
    }

    .promoTitle{
      margin:0;
      font-size:14px;
      line-height:1.2;
      letter-spacing:-.01em;
      font-weight:var(--w-bold);
      max-width:34ch;
    }

    .promoLink{
      width:fit-content;
      border:1px solid rgba(43,176,255,.30);
      background:linear-gradient(180deg, rgba(43,176,255,.12), rgba(124,92,255,.08));
      border-radius:999px;
      padding:7px 10px;
      font-size:12px;
      font-weight:var(--w-ui);
      color:var(--ink);
    }
    .promoLink.isMuted{
      border-color:var(--line);
      background:#fff;
      color:var(--muted);
      pointer-events:none;
    }

    @media (max-width: 640px){
      .promoSlide{ grid-template-columns:84px 1fr; }
      .promoViewport{ min-height:122px; }
      .promoTitle{ font-size:13px; }
    }

    /* =========================================================
       8) SECTION HEADERS (Bibliothek, Kontakt)
       ========================================================= */
    .section{ margin-top:18px; }

    .sectionHead{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:12px;
      padding:2px;
    }
    .sectionHead h2{
      margin:0;
      font-size:16px;
      font-weight:var(--w-bold);
      letter-spacing:-.01em;
    }
    .sectionHead p{
      margin:0;
      color:var(--muted);
      font-size:12px;
      max-width:70ch;
    }

    /* =========================================================
       9) FILTER-CHIPS
       ========================================================= */
    .chips{
      margin-top:12px;
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }

    .chip{
      border:1px solid var(--line);
      background:#fff;
      border-radius:999px;
      padding:9px 10px;
      font-size:12px;

      cursor:pointer;
      user-select:none;

      display:inline-flex;
      align-items:center;
      gap:8px;

      box-shadow:0 8px 18px rgba(15,23,42,.05);
      transition: transform .12s var(--ease), border-color .18s var(--ease);
    }
    .chip:hover{ transform:translateY(-2px); border-color:#d6dbea; }
    .chip[aria-pressed="true"]{
      border-color: rgba(43,176,255,.35);
      background: linear-gradient(180deg, rgba(43,176,255,.12), rgba(124,92,255,.08));
    }

    .chipDot{
      width:10px;
      height:10px;
      border-radius:999px;
      background:var(--a1);
    }
    .chip[data-color="a2"] .chipDot{ background:var(--a2); }
    .chip[data-color="a3"] .chipDot{ background:var(--a3); }
    .chip[data-color="a4"] .chipDot{ background:var(--a4); }
    .chip[data-color="a5"] .chipDot{ background:var(--a5); }
    .chip[data-color="a6"] .chipDot{ background:var(--a6); }
    .chip[data-color="a7"] .chipDot{ background:var(--a7); }

    /* =========================================================
       10) APP-GRID + APP-CARDS
       ========================================================= */
    .gridApps{
      margin-top:14px;
      display:grid;
      grid-template-columns:repeat(12, 1fr);
      gap:14px;
      align-items:stretch;
    }

    .appCard{
      grid-column:span 12;
      border:1px solid var(--line);
      background:#fff;
      border-radius: calc(var(--radius2) + 2px);
      box-shadow: var(--shadow);
      overflow:hidden;

      cursor:pointer;

      transform:translateY(10px);
      opacity:0;
      animation: cardIn .55s var(--ease) forwards;

      transition: transform .16s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
    }
    .appCard:hover{
      transform:translateY(-4px);
      border-color:#d6dbea;
      box-shadow:0 20px 50px rgba(15,23,42,.12);
    }

    @media (min-width:720px){ .appCard{ grid-column:span 6; } }
    @media (min-width:980px){ .appCard{ grid-column:span 4; } }

    @keyframes cardIn{
      to{ transform:translateY(0); opacity:1; }
    }

    /* farbige Linie oben auf jeder Karte */
    .accentLine{ height:6px; width:100%; background:var(--a1); }
    .appCard[data-accent="a2"] .accentLine{ background:var(--a2); }
    .appCard[data-accent="a3"] .accentLine{ background:var(--a3); }
    .appCard[data-accent="a4"] .accentLine{ background:var(--a4); }
    .appCard[data-accent="a5"] .accentLine{ background:var(--a5); }
    .appCard[data-accent="a6"] .accentLine{ background:var(--a6); }
    .appCard[data-accent="a7"] .accentLine{ background:var(--a7); }    

    .appBody{
      padding:16px;
      display:grid;
      gap:12px;
    }

    .appTop{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
    }

    .appTitle{
      margin:0;
      letter-spacing:-.01em;
      font-size:16px;
      line-height:1.15;
    }

    .appDesc{
      margin:8px 0 0 0;
      color:var(--muted);
      font-size:12px;
      line-height:1.25;

      /* max 2 Zeilen, dann "...", damit Karten ruhig bleiben */
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }

    .catPill{
      border:1px solid var(--line);
      background:#fff;
      border-radius:999px;
      padding:7px 9px;
      font-weight:var(--w-ui);
      font-size:12px;
      color:var(--muted);

      display:inline-flex;
      align-items:center;
      gap:8px;
      flex-shrink:0;
    }

    .pillRow{ display:flex; gap:8px; flex-wrap:wrap; }
    .pill{
      border:1px solid var(--line);
      background:#fff;
      border-radius:999px;
      padding:7px 9px;
      font-size:12px;
      color:var(--muted);
      display:inline-flex;
      align-items:center;
      gap:8px;
    }

    .appFooter{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding-top:2px;
    }

    .hint{
      color:var(--muted);
      font-size:12px;
    }

    .go{
      display:inline-flex;
      align-items:center;
      gap:10px;

      border:1px solid var(--line);
      border-radius:14px;
      padding:10px 12px;
      background:#fff;

      box-shadow:0 8px 18px rgba(15,23,42,.06);
      transition: transform .12s var(--ease), border-color .18s var(--ease);
      user-select:none;
    }
    .go:hover{ transform:translateY(-2px); border-color:#d6dbea; }
    .go .btnIcon{ width:26px; height:26px; border-radius:10px; }

    /* =========================================================
       11) ALPHA-POPUP
       ========================================================= */
    .alphaOverlay{
      position:fixed;
      inset:0;
      z-index:1200;
      display:none;
      align-items:center;
      justify-content:center;
      padding:16px;
      background:rgba(3,7,18,.62);
      backdrop-filter:blur(6px);
    }
    .alphaOverlay.open{ display:flex; }

    .alphaCard{
      width:min(650px, 100%);
      border:1px solid rgba(124,92,255,.28);
      border-radius:24px;
      background:linear-gradient(165deg, rgba(255,255,255,.97), rgba(246,248,252,.97));
      box-shadow:0 28px 80px rgba(2,6,23,.34);
      padding:24px;
      position:relative;
      overflow:hidden;
    }
    .alphaCard::before{
      content:"";
      position:absolute;
      inset:-35% auto auto -12%;
      width:260px;
      height:260px;
      border-radius:999px;
      background:radial-gradient(circle, rgba(43,176,255,.22), transparent 68%);
      pointer-events:none;
    }

    .alphaBadge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border:1px solid rgba(124,92,255,.26);
      border-radius:999px;
      padding:8px 12px;
      background:rgba(255,255,255,.88);
      position:relative;
      z-index:1;
    }

    .alphaTitle{
      margin:14px 0 8px;
      font-size:clamp(26px, 5vw, 34px);
      letter-spacing:-.03em;
      line-height:1.02;
      position:relative;
      z-index:1;
    }

    .alphaText,
    .alphaList,
    .alphaHint{
      position:relative;
      z-index:1;
    }

    .alphaText{ margin:0; color:var(--muted); }
    .alphaList{
      margin:14px 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:8px;
    }
    .alphaList li{ display:flex; gap:8px; }
    .alphaList li::before{ content:"•"; }
    .alphaHint{ margin:0; color:var(--muted); }

    .alphaActions{
      margin-top:18px;
      display:flex;
      gap:10px;
      justify-content:flex-end;
      flex-wrap:wrap;
      position:relative;
      z-index:1;
    }

    /* =========================================================
       12) MODAL (Vorschau via IFRAME)
       ========================================================= */
    .modalOverlay{
      position:fixed;
      inset:0;
      z-index:999;

      background:rgba(3,7,18,.55);
      display:none;

      align-items:center;
      justify-content:center;
      padding:14px;
    }
    .modalOverlay.open{ display:flex; }

    .modalCard{
      width:min(980px, 100%);
      background:#fff;
      border-radius:20px;
      overflow:hidden;

      border:1px solid rgba(15,23,42,.10);
      box-shadow:0 22px 70px rgba(2,6,23,.25);
    }

    .modalTop{
      padding:10px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;

      border-bottom:1px solid var(--line);
      background:#fbfcff;
    }

    .modalTitle{
      margin:0;
      font-weight:var(--w-bold);
      font-size:14px;
      line-height:1.1;
    }

    .modalBody{
      background:#0b1220; /* dunkler Frame-Hintergrund */
      position:relative;
    }

    .modalFrame{
      width:100%;
      aspect-ratio:16 / 9;
      border:0;
      display:block;
      background:#0b1220;
    }

    /* =========================================================
       13) FOOTER (Kontaktbereich)
       ========================================================= */
    footer{
      margin-top:18px;
      border:1px solid var(--line);
      border-radius: calc(var(--radius2) + 2px);
      background:rgba(255,255,255,.78);
      box-shadow:var(--shadow2);

      padding:16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }

    .footLeft{
      display:flex;
      flex-direction:column;
      gap:4px;

      color:var(--muted);
      font-weight:var(--w-sub);
      font-size:12px;
      max-width:72ch;
    }

    .footRight{ display:flex; gap:10px; flex-wrap:wrap; }

    .linkBtn{
      border:1px solid var(--line);
      background:#fff;
      border-radius:14px;
      padding:10px 12px;

      box-shadow:0 8px 18px rgba(15,23,42,.06);
      cursor:pointer;

      display:inline-flex;
      align-items:center;
      gap:10px;
    }

    /* =========================================================
       14) ACCESSIBILITY: Reduced Motion
       ========================================================= */
@media (prefers-reduced-motion: reduce){
      *{ animation:none !important; transition:none !important; }
      .bg{ background: linear-gradient(180deg, #fff 0%, var(--bg) 60%, #fff 100%); }
    }

/* ===== home v2 (index.html only) ===== */
body.homeV2{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--ink);
  line-height:1.35;
  overflow-x:hidden;
  font-weight:var(--w-text);
}

.homeV2 .v2-wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:22px 16px 80px;
}

.homeV2 .v2-top{
  position:sticky;
  top:12px;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius2);
  background:rgba(255,255,255,.84);
  box-shadow:var(--shadow2);
  backdrop-filter:blur(10px);
}

.homeV2 .v2-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.homeV2 .v2-logo{
  width:36px;
  height:36px;
  border-radius:14px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  background:
    radial-gradient(16px 16px at 30% 30%, rgba(43,176,255,.35), transparent 60%),
    radial-gradient(18px 18px at 70% 70%, rgba(124,92,255,.28), transparent 60%),
    #fff;
  box-shadow:0 10px 22px rgba(15,23,42,.06);
  font-size:16px;
}

.homeV2 .v2-brandTitle{
  margin:0;
  font-size:14px;
  line-height:1.1;
  letter-spacing:-.02em;
  font-weight:var(--w-bold);
}

.homeV2 .v2-brandSub{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.1;
  font-weight:var(--w-sub);
}

.homeV2 .v2-btnRow{
  display:flex;
  align-items:center;
  gap:10px;
}

.homeV2 .v2-btn{
  appearance:none;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  padding:10px 12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  font-weight:var(--w-ui);
  box-shadow:0 8px 18px rgba(15,23,42,.06);
  transition:transform .12s var(--ease), border-color .18s var(--ease);
}

.homeV2 .v2-btn:hover{
  transform:translateY(-2px);
  border-color:#d6dbea;
}

.homeV2 .v2-btnPrimary{
  border-color:rgba(43,176,255,.28);
  background:linear-gradient(180deg, rgba(43,176,255,.16), rgba(124,92,255,.10));
}

.homeV2 .v2-btnSmall{
  padding:8px 10px;
  font-size:12px;
}

.homeV2 .v2-btnIcon{
  width:28px;
  height:28px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:rgba(15,23,42,.06);
  font-size:16px;
}

.homeV2 .v2-search{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:10px 12px;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}

.homeV2 .v2-searchDesktop{
  min-width:min(480px, 50vw);
}

.homeV2 .v2-searchMobile{
  margin-top:14px;
}

.homeV2 .v2-searchIcon{
  opacity:.75;
}

.homeV2 .v2-search input{
  width:100%;
  border:0;
  outline:none;
  font:inherit;
  font-weight:var(--w-sub);
  color:var(--ink);
  background:transparent;
}

.homeV2 .v2-hero{
  margin-top:18px;
  padding:24px 22px;
  border-radius:calc(var(--radius2) + 4px);
  border:1px solid var(--line);
  background:rgba(255,255,255,.78);
  box-shadow:var(--shadow);
}

.homeV2 .v2-kicker{
  margin:0;
  width:fit-content;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-size:12px;
  font-weight:var(--w-ui);
}

.homeV2 .v2-kdot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--a1), var(--a2));
  box-shadow:0 0 0 4px rgba(43,176,255,.12);
}

.homeV2 .v2-h1{
  margin:12px 0 0 0;
  font-size:clamp(24px, 3vw, 38px);
  line-height:1.08;
  letter-spacing:-.03em;
  max-width:28ch;
  font-weight:var(--w-bold);
}

.homeV2 .v2-lead{
  margin:8px 0 0;
  color:var(--muted);
  font-size:14px;
  max-width:64ch;
  font-weight:var(--w-sub);
}

.homeV2 .v2-lead a{
  text-decoration:underline;
  text-underline-offset:2px;
}

.homeV2 .v2-info{
  margin-top:14px;
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(43,176,255,.25);
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow2);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.homeV2 .v2-infoMain{
  flex:1;
  min-width:0;
}

.homeV2 .v2-infoTitle{
  margin:0;
  font-size:14px;
  font-weight:var(--w-bold);
}

.homeV2 .v2-infoText{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
  font-weight:var(--w-sub);
}

.homeV2 .v2-info .v2-benefitGrid{
  margin-top:14px;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
}

.homeV2 .v2-info .v2-benefitCard{
  background:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}

.homeV2 .v2-quickNav{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.homeV2 .v2-navPill{
  border:1px solid #d9deea;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  padding:11px 18px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:var(--w-ui);
  color:var(--ink);
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
  transition:transform .12s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}

.homeV2 .v2-navPill:hover{
  transform:translateY(-2px);
}

.homeV2 .v2-navPill.isActive{
  border-color:#9fd0fb;
  background:linear-gradient(180deg, rgba(187,220,255,.28), rgba(201,215,255,.22));
}

.homeV2 .v2-navIcon{
  width:20px;
  height:20px;
  stroke-width:2.2;
  flex-shrink:0;
  display:block;
}

.homeV2 .navBlue{ color:#2b9de0; }
.homeV2 .navOrange{ color:#ff9632; }
.homeV2 .navPurple{ color:#765bf4; }
.homeV2 .navPink{ color:#f14f88; }
.homeV2 .navGreen{ color:#28b85c; }

.homeV2 .v2-section{
  margin-top:24px;
  content-visibility:auto;
  contain-intrinsic-size: 1px 900px;
}

.homeV2 .v2-panel{
  position:relative;
  border:1px solid #d9deea;
  border-radius:40px;
  padding:24px 22px 20px;
  background:rgba(255,255,255,.72);
  box-shadow:0 16px 40px rgba(15,23,42,.08);
  overflow:hidden;
}

.homeV2 .v2-panel::before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:8px;
  border-radius:0 10px 10px 0;
  background:var(--accentBar, var(--a1));
}

.homeV2 .v2-accentBlue{ --accentBar:#2b9de0; }
.homeV2 .v2-accentOrange{ --accentBar:#ff9a3c; }
.homeV2 .v2-accentPurple{ --accentBar:#7358ee; }
.homeV2 .v2-accentPink{ --accentBar:#f24f87; }
.homeV2 .v2-accentGreen{ --accentBar:#22c55e; }

.homeV2 .v2-sectionHead{
  padding:2px 2px 10px;
}

.homeV2 .v2-noPad{
  padding:0;
}

.homeV2 .v2-sectionHead h2{
  margin:0;
  font-size:16px;
  font-weight:var(--w-bold);
  letter-spacing:-.01em;
  display:flex;
  align-items:center;
  gap:10px;
}

.homeV2 .v2-headIcon{
  width:22px;
  height:22px;
  stroke-width:2.2;
  flex-shrink:0;
  display:block;
}

.homeV2 .v2-sectionHead p{
  margin:2px 0 0;
  color:var(--muted);
  font-size:12px;
  font-weight:var(--w-sub);
}

.homeV2 .v2-headRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  padding:2px 2px 10px;
}

.homeV2 .v2-pageHint{
  font-size:12px;
  color:var(--muted);
  font-weight:var(--w-sub);
}

.homeV2 .v2-categoryGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
}

.homeV2 .v2-categoryCard{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:16px 14px;
  cursor:pointer;
  text-align:left;
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:8px;
  box-shadow:0 10px 18px rgba(15,23,42,.06);
  transition:transform .12s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}

.homeV2 .v2-categoryCard:hover{
  transform:translateY(-3px);
}

.homeV2 .v2-categoryCard.isActive{
  border:2px solid var(--a1);
  background:rgba(43,176,255,.08);
}

.homeV2 .v2-categoryIcon{
  width:36px;
  height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:color-mix(in srgb, var(--accent) 10%, white);
  border:1px solid color-mix(in srgb, var(--accent) 25%, white);
}

.homeV2 .v2-categoryCard strong{
  display:block;
  font-size:14px;
  font-weight:var(--w-bold);
}

.homeV2 .v2-categoryCard small{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
  font-weight:var(--w-sub);
}

.homeV2 .v2-categoryCard em{
  margin-left:auto;
  font-style:normal;
  color:var(--muted);
  font-size:16px;
}

.homeV2 .v2-featuredGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:12px;
}

.homeV2 .v2-featuredCard{
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow2);
  transition:transform .16s var(--ease), box-shadow .18s var(--ease);
}

.homeV2 .v2-featuredCard:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(15,23,42,.12);
}

.homeV2 .v2-featuredTop{
  height:5px;
  background:var(--accent);
}

.homeV2 .v2-featuredBody{
  padding:14px;
  display:grid;
  gap:8px;
}

.homeV2 .v2-featuredHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}

.homeV2 .v2-featuredHead p{
  margin:0;
  font-size:15px;
  line-height:1.2;
  font-weight:var(--w-bold);
  letter-spacing:-.01em;
}

.homeV2 .v2-tag{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:3px 8px;
  font-size:11px;
  font-weight:var(--w-ui);
}

.homeV2 .v2-tagNew{
  background:var(--a6);
  color:#fff;
}

.homeV2 .v2-tagTop{
  color:var(--a5);
  background:rgba(255,154,60,.10);
  border:1px solid rgba(255,154,60,.20);
}

.homeV2 .v2-featuredDesc{
  margin:0;
  color:var(--muted);
  font-size:12px;
}

.homeV2 .v2-featuredFoot{
  margin-top:auto;
  padding-top:4px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.homeV2 .v2-featuredFoot span{
  font-size:11px;
  color:var(--muted);
  background:rgba(15,23,42,.06);
  border-radius:999px;
  padding:4px 8px;
  text-transform:capitalize;
}

.homeV2 .v2-featuredFoot b{
  font-size:12px;
  font-weight:var(--w-ui);
}

.homeV2 .v2-collections{
  display:grid;
  gap:12px;
}

.homeV2 .v2-collection{
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow2);
  overflow:hidden;
}

.homeV2 .v2-collection.isOpen{
  border-color:color-mix(in srgb, var(--c) 35%, white);
  background:var(--cb);
}

.homeV2 .v2-collectionHead{
  width:100%;
  border:0;
  background:transparent;
  color:var(--ink);
  text-align:left;
  padding:16px 18px;
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  gap:14px;
  align-items:flex-start;
  cursor:pointer;
}

.homeV2 .v2-collectionIcon{
  width:42px;
  height:42px;
  border-radius:14px;
  background:var(--cb);
  border:1px solid color-mix(in srgb, var(--c) 20%, white);
  display:grid;
  place-items:center;
}

.homeV2 .v2-collectionMeta{
  min-width:0;
}

.homeV2 .v2-collectionTitle{
  display:block;
  font-size:15px;
  line-height:1.2;
  letter-spacing:-.01em;
  font-weight:var(--w-bold);
}

.homeV2 .v2-collectionDesc{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  font-weight:var(--w-sub);
}

.homeV2 .v2-collectionPills{
  margin-top:8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.homeV2 .v2-collectionPills span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 8px;
  background:#fff;
  color:var(--muted);
  font-size:11px;
  font-weight:var(--w-sub);
}

.homeV2 .v2-collectionCount{
  align-self:flex-start;
  font-size:11px;
  font-weight:var(--w-ui);
  color:var(--c);
  background:var(--cb);
  border:1px solid color-mix(in srgb, var(--c) 18%, white);
  border-radius:999px;
  padding:2px 8px;
}

.homeV2 .v2-collectionArrow{
  align-self:flex-start;
  width:32px;
  height:32px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-style:normal;
  background:rgba(15,23,42,.04);
  transition:transform .2s var(--ease);
}

.homeV2 .v2-collection.isOpen .v2-collectionArrow{
  transform:rotate(90deg);
}

.homeV2 .v2-collectionBody{
  border-top:1px solid color-mix(in srgb, var(--c) 15%, white);
  padding:14px 18px 16px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:10px;
}

.homeV2 .v2-collectionApp{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  padding:14px;
  display:flex;
  align-items:flex-start;
  gap:12px;
  box-shadow:0 6px 14px rgba(15,23,42,.05);
  transition:transform .12s var(--ease), box-shadow .18s var(--ease);
}

.homeV2 .v2-collectionApp > span{
  min-width:0;
}

.homeV2 .v2-collectionApp:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(15,23,42,.10);
}

.homeV2 .v2-collectionNr{
  width:30px;
  height:30px;
  border-radius:10px;
  background:var(--cb);
  border:1px solid color-mix(in srgb, var(--c) 20%, white);
  display:grid;
  place-items:center;
  color:var(--c);
  font-weight:var(--w-bold);
  font-size:13px;
  flex-shrink:0;
}

.homeV2 .v2-collectionApp strong{
  display:block;
  font-size:13px;
  line-height:1.2;
  font-weight:var(--w-bold);
  white-space:normal;
  overflow-wrap:anywhere;
}

.homeV2 .v2-collectionApp small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:11px;
  font-weight:var(--w-sub);
  white-space:normal;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.homeV2 .v2-collectionApp em{
  margin-left:auto;
  font-style:normal;
  color:var(--muted);
}

.homeV2 .v2-chipRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px;
}

.homeV2 .v2-chip{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:9px 12px;
  font-size:12px;
  font-weight:var(--w-ui);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}

.homeV2 .v2-chip.isActive{
  border-color:rgba(43,176,255,.35);
  background:linear-gradient(180deg, rgba(43,176,255,.12), rgba(124,92,255,.08));
}

.homeV2 .v2-chipDot{
  width:10px;
  height:10px;
  border-radius:999px;
}

.homeV2 .v2-appGrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;
  min-height:200px;
}

.homeV2 .v2-appCard{
  border:1px solid var(--line);
  border-radius:calc(var(--radius2) + 2px);
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
  cursor:pointer;
  transition:transform .16s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}

.homeV2 .v2-appCard:hover{
  transform:translateY(-4px);
  border-color:#d6dbea;
  box-shadow:0 20px 50px rgba(15,23,42,.12);
}

.homeV2 .v2-appTopLine{
  height:6px;
  background:var(--accent);
}

.homeV2 .v2-appBody{
  padding:16px;
  display:grid;
  gap:12px;
}

.homeV2 .v2-appTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.homeV2 .v2-appTitle{
  margin:0;
  font-size:16px;
  line-height:1.15;
  letter-spacing:-.01em;
  font-weight:var(--w-bold);
}

.homeV2 .v2-appDesc{
  margin:8px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.homeV2 .v2-appCat{
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  padding:7px 9px;
  color:var(--muted);
  font-size:12px;
  font-weight:var(--w-ui);
  text-transform:capitalize;
}

.homeV2 .v2-appTags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.homeV2 .v2-appTags span{
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  padding:5px 8px;
  font-size:11px;
  color:var(--muted);
}

.homeV2 .v2-appFoot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.homeV2 .v2-appFoot small{
  color:var(--muted);
  font-size:12px;
  font-weight:var(--w-sub);
}

.homeV2 .v2-appFoot a{
  border:1px solid var(--line);
  border-radius:14px;
  padding:8px 12px;
  background:#fff;
  font-size:13px;
  font-weight:var(--w-ui);
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}

.homeV2 .v2-emptyCard{
  grid-column:1 / -1;
  border:1px solid var(--line);
  border-radius:calc(var(--radius2) + 2px);
  background:#fff;
  box-shadow:var(--shadow);
  padding:24px;
  text-align:center;
}

.homeV2 .v2-emptyCard p{
  margin:0;
  font-size:16px;
  font-weight:var(--w-bold);
}

.homeV2 .v2-emptyCard span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  font-weight:var(--w-sub);
}

.homeV2 .v2-inlineBtn{
  border:0;
  background:none;
  color:var(--a1);
  cursor:pointer;
  font-size:12px;
  font-weight:var(--w-ui);
  padding:0;
  margin-left:4px;
}

.homeV2 .v2-pagination{
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.homeV2 .v2-pageBtn{
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  font-size:18px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(15,23,42,.05);
}

.homeV2 .v2-pageDot{
  width:10px;
  height:10px;
  border:0;
  border-radius:999px;
  background:rgba(15,23,42,.15);
  padding:0;
  cursor:pointer;
  transition:width .25s var(--ease), background .2s var(--ease);
}

.homeV2 .v2-pageDot.isActive{
  width:32px;
  background:var(--a1);
}

.homeV2 .v2-benefitGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:10px;
}

.homeV2 .v2-benefitCard{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 18px rgba(15,23,42,.06);
  padding:14px;
}

.homeV2 .v2-benefitIcon{
  margin:0 0 8px;
  font-size:20px;
}

.homeV2 .v2-benefitTitle{
  margin:0;
  font-size:13px;
  letter-spacing:-.01em;
  font-weight:var(--w-bold);
}

.homeV2 .v2-benefitText{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  font-weight:var(--w-sub);
}

.homeV2 .v2-footer{
  border:1px solid var(--line);
  border-radius:calc(var(--radius2) + 2px);
  background:rgba(255,255,255,.78);
  box-shadow:var(--shadow2);
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.homeV2 .v2-footerTitle{
  margin:0;
  color:var(--ink);
  font-size:12px;
  font-weight:var(--w-bold);
}

.homeV2 .v2-footerSub{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
  font-weight:var(--w-sub);
}

.homeV2 .v2-footerBtns{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.homeV2 .v2-linkBtn{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:10px 12px;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:var(--w-ui);
  color:var(--ink);
  text-decoration:none;
}

@media (max-width: 939px){
  .homeV2 .v2-searchDesktop{ display:none; }
}

@media (min-width: 940px){
  .homeV2 .v2-searchMobile{ display:none; }
}

@media (max-width: 720px){
  .homeV2 .v2-navPill{
    font-size:14px;
    padding:9px 14px;
  }
  .homeV2 .v2-panel{
    border-radius:28px;
    padding:18px 14px 14px;
  }
  .homeV2 .v2-panel::before{
    width:6px;
    top:14px;
    bottom:14px;
  }
  .homeV2 .v2-btnRow{
    width:100%;
    justify-content:flex-end;
  }
  .homeV2 .v2-top{
    flex-wrap:wrap;
  }
  .homeV2 .v2-info{
    flex-direction:column;
    align-items:flex-start;
  }
  .homeV2 .v2-collectionHead{
    grid-template-columns:auto 1fr auto;
  }
  .homeV2 .v2-collectionCount{
    display:none;
  }
}

/* iPad/touch perf profile: keep look, reduce expensive paint effects */
@media (hover: none), (pointer: coarse), (max-width: 1180px){
  .bg{ overflow:hidden; }
  .blob{
    animation:none;
    filter:blur(9px);
    opacity:.42;
  }
  .blob::after{
    animation:none;
    opacity:.32;
  }
  .noise{ opacity:.035; }

  .homeV2 .v2-top{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:0 6px 14px rgba(15,23,42,.06);
  }

  .homeV2 .v2-panel,
  .homeV2 .v2-hero,
  .homeV2 .v2-info,
  .homeV2 .v2-footer{
    box-shadow:0 8px 20px rgba(15,23,42,.06);
  }

  .homeV2 .v2-appCard,
  .homeV2 .v2-featuredCard,
  .homeV2 .v2-collection,
  .homeV2 .v2-benefitCard,
  .homeV2 .v2-categoryCard,
  .homeV2 .v2-navPill{
    transition:none;
  }
}


/* ===== impressum.html ===== */
:root{
      --bg:    #f6f8fc;
      --card:  #ffffff;
      --ink:   #0b1220;
      --muted: #4b5563;
      --line:  #e6eaf2;

      --shadow:  0 16px 38px rgba(15,23,42,.10);
      --shadow2: 0 10px 22px rgba(15,23,42,.08);

      --radius:  18px;
      --radius2: 22px;
      --max:     1160px;

      --a1:#2bb0ff;
      --a2:#7c5cff;
      --a3:#ff4d7d;
      --a4:#00c2d4;
      --a5:#ff9a3c;
      --a6:#22c55e;

      --ease: cubic-bezier(.2,.8,.2,1);

      --w-text: 450;
      --w-sub:  650;
      --w-ui:   800;
      --w-bold: 900;
    }

    @font-face{
      font-family:"Inter";
      font-style:normal;
      font-weight:400;
      font-display:swap;
      src:url("assets/fonts/inter/inter-v20-latin-regular.woff2") format("woff2");
    }
    @font-face{
      font-family:"Inter";
      font-style:normal;
      font-weight:700;
      font-display:swap;
      src:url("assets/fonts/inter/inter-v20-latin-700.woff2") format("woff2");
    }
    @font-face{
      font-family:"Inter";
      font-style:normal;
      font-weight:900;
      font-display:swap;
      src:url("assets/fonts/inter/inter-v20-latin-900.woff2") format("woff2");
    }
    @font-face{
      font-family:"Inter";
      font-style:italic;
      font-weight:400;
      font-display:swap;
      src:url("assets/fonts/inter/inter-v20-latin-italic.woff2") format("woff2");
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    html{ -webkit-text-size-adjust: 100%; }

    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      color:var(--ink);
      background:var(--bg);
      line-height:1.35;
      overflow-x:hidden;

      font-optical-sizing:auto;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      text-rendering:optimizeLegibility;
      font-synthesis:none;

      font-weight:var(--w-text);
    }

    a{ color:inherit; text-decoration:none; }

    .wrap{
      max-width:var(--max);
      margin:0 auto;
      padding:22px 16px 80px;
    }

    .brandTitle,
    .kicker,
    h1,
    .appTitle{
      font-weight:var(--w-bold);
    }

    .brandSub,
    .lead,
    .sectionHead p,
    .hint{
      font-weight:var(--w-sub);
    }

    .btn,
    .chip,
    .go,
    .linkBtn{
      font-weight:var(--w-ui);
    }

    /* BG */
    .bg{
      position:fixed;
      inset:0;
      z-index:-2;
      overflow:hidden;
      background: linear-gradient(180deg, #ffffff 0%, var(--bg) 55%, #ffffff 100%);
    }

    .blob{
      position:absolute;
      width:58vmax;
      height:58vmax;
      border-radius:999px;
      opacity:.58;
      filter:blur(14px);
      transform:translate3d(0,0,0);
      will-change:transform;

      animation:
        driftA var(--t, 18s) linear infinite,
        swirl  var(--s, 9s)  ease-in-out infinite;
    }

    .b1{
      left:-18vmax; top:-22vmax;
      --t:14s; --s:7.5s;
      background: radial-gradient(circle at 30% 30%,
        rgba(43,176,255,.95) 0%,
        rgba(43,176,255,.55) 30%,
        rgba(43,176,255,.20) 52%,
        transparent 72%);
      mix-blend-mode:multiply;
    }
    .b2{
      right:-22vmax; top:-16vmax;
      --t:16s; --s:8.5s;
      background: radial-gradient(circle at 40% 40%,
        rgba(124,92,255,.92) 0%,
        rgba(124,92,255,.52) 32%,
        rgba(124,92,255,.20) 54%,
        transparent 74%);
      mix-blend-mode:multiply;
      animation-name: driftB, swirl;
    }
    .b3{
      left:8vmax; bottom:-26vmax;
      --t:18s; --s:9.5s;
      background: radial-gradient(circle at 40% 40%,
        rgba(255,154,60,.92) 0%,
        rgba(255,154,60,.52) 34%,
        rgba(255,154,60,.20) 56%,
        transparent 76%);
      mix-blend-mode:multiply;
      animation-name: driftC, swirl;
    }
    .b4{
      right:10vmax; bottom:-24vmax;
      --t:20s; --s:10.5s;
      background: radial-gradient(circle at 40% 40%,
        rgba(0,194,212,.90) 0%,
        rgba(0,194,212,.48) 34%,
        rgba(0,194,212,.18) 56%,
        transparent 76%);
      mix-blend-mode:multiply;
      animation-name: driftD, swirl;
    }

    @keyframes driftA{
      0%{ transform:translate3d(0,0,0); }
      20%{ transform:translate3d(7%,4%,0); }
      45%{ transform:translate3d(3%,-6%,0); }
      70%{ transform:translate3d(-6%,2%,0); }
      100%{ transform:translate3d(0,0,0); }
    }
    @keyframes driftB{
      0%{ transform:translate3d(0,0,0); }
      18%{ transform:translate3d(-8%,5%,0); }
      44%{ transform:translate3d(-2%,-7%,0); }
      73%{ transform:translate3d(6%,1%,0); }
      100%{ transform:translate3d(0,0,0); }
    }
    @keyframes driftC{
      0%{ transform:translate3d(0,0,0); }
      22%{ transform:translate3d(6%,-5%,0); }
      48%{ transform:translate3d(-7%,-1%,0); }
      76%{ transform:translate3d(2%,7%,0); }
      100%{ transform:translate3d(0,0,0); }
    }
    @keyframes driftD{
      0%{ transform:translate3d(0,0,0); }
      16%{ transform:translate3d(5%,-6%,0); }
      42%{ transform:translate3d(-6%,-2%,0); }
      68%{ transform:translate3d(-1%,7%,0); }
      100%{ transform:translate3d(0,0,0); }
    }
    @keyframes swirl{
      0%{ rotate:0deg;  scale:1; }
      35%{ rotate:10deg; scale:1.04; }
      70%{ rotate:-8deg; scale:0.98; }
      100%{ rotate:0deg; scale:1; }
    }

    .blob::after{
      content:"";
      position:absolute;
      inset:-18%;
      border-radius:999px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 58%),
        radial-gradient(circle at 70% 70%, rgba(255,255,255,.12), transparent 62%);
      opacity:.55;
      filter:blur(10px);
      mix-blend-mode:screen;
      animation: shimmer 6.5s ease-in-out infinite;
      will-change: transform, opacity;
      pointer-events:none;
    }
    @keyframes shimmer{
      0%{ transform:translate3d(0,0,0); opacity:.40; }
      50%{ transform:translate3d(2%,-2%,0); opacity:.70; }
      100%{ transform:translate3d(0,0,0); opacity:.40; }
    }

    .noise{
      position:absolute;
      inset:0;
      opacity:.06;
      mix-blend-mode:multiply;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
    }

    /* Topbar */
    .top{
      position:sticky;
      top:12px;
      z-index:50;

      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;

      padding:12px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.84);
      border-radius:var(--radius2);
      box-shadow:var(--shadow2);
      backdrop-filter:blur(10px);
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .logo{
      width:36px;
      height:36px;
      border-radius:14px;

      display:grid;
      place-items:center;

      border:1px solid var(--line);
      background:
        radial-gradient(16px 16px at 30% 30%, rgba(43,176,255,.35), transparent 60%),
        radial-gradient(18px 18px at 70% 70%, rgba(124,92,255,.28), transparent 60%),
        #fff;
      box-shadow:0 10px 22px rgba(15,23,42,.06);
      font-size:16px;
    }

    .brandText{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
    }

    .brandTitle{
      margin:0;
      letter-spacing:-.02em;
      font-size:14px;
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .brandSub{
      margin:0;
      color:var(--muted);
      font-size:12px;
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .btnRow{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-end;
    }

    .btn{
      appearance:none;
      border:1px solid var(--line);
      background:#fff;
      color:var(--ink);

      padding:10px 12px;
      border-radius:14px;

      cursor:pointer;
      user-select:none;
      white-space:nowrap;

      display:inline-flex;
      align-items:center;
      gap:10px;

      box-shadow:0 8px 18px rgba(15,23,42,.06);
      transition: transform .12s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
    }
    .btn:hover{ transform:translateY(-2px); border-color:#d6dbea; }
    .btn:active{ transform:translateY(0); }

    .btnIcon{
      width:28px;
      height:28px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:rgba(15,23,42,.06);
      font-size:16px;
    }

    .btnPrimary{
      border-color:rgba(43,176,255,.28);
      background: linear-gradient(180deg, rgba(43,176,255,.16), rgba(124,92,255,.10));
    }

    /* Content sections */
    .section{ margin-top:18px; }

    .hero{
      margin-top:18px;
      padding:22px;

      border-radius: calc(var(--radius2) + 4px);
      border:1px solid var(--line);
      background: rgba(255,255,255,.78);
      box-shadow: var(--shadow);

      overflow:hidden;
      position:relative;
    }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;

      padding:8px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      width:fit-content;
    }

    .kdot{
      width:10px;
      height:10px;
      border-radius:999px;
      background: linear-gradient(135deg, var(--a1), var(--a2));
      box-shadow:0 0 0 4px rgba(43,176,255,.12);
    }

    h1{
      margin:12px 0 0 0;
      font-size:clamp(28px, 3.4vw, 44px);
      line-height:1.05;
      letter-spacing:-.03em;
      max-width:26ch;
      font-weight: 900;
    }

    .lead{
      margin:10px 0 0 0;
      color:var(--muted);
      font-size:14px;
      max-width:70ch;
    }

    .cards{
      margin-top:14px;
      display:grid;
      grid-template-columns:repeat(12, 1fr);
      gap:14px;
      align-items:stretch;
    }

    .card{
      grid-column:span 12;
      border:1px solid var(--line);
      background:#fff;
      border-radius: calc(var(--radius2) + 2px);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    @media (min-width:900px){
      .card{ grid-column:span 6; }
    }

    .accentLine{ height:6px; width:100%; background:var(--a2); }

    .cardBody{
      padding:16px;
      display:grid;
      gap:10px;
    }

    .appTitle{
      margin:0;
      letter-spacing:-.01em;
      font-size:16px;
      line-height:1.15;
    }

    .text{
      margin:0;
      color:var(--muted);
      font-size:12px;
      line-height:1.35;
      font-weight:var(--w-sub);
    }

    .list{
      margin:0;
      padding-left:18px;
      color:var(--muted);
      font-size:12px;
      line-height:1.45;
      font-weight:var(--w-sub);
    }

    .inlineLink{
      text-decoration:underline;
      text-underline-offset:2px;
    }

    /* Footer (same vibe as main page) */
    footer{
      margin-top:18px;
      border:1px solid var(--line);
      border-radius: calc(var(--radius2) + 2px);
      background:rgba(255,255,255,.78);
      box-shadow:var(--shadow2);

      padding:16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }

    .footLeft{
      display:flex;
      flex-direction:column;
      gap:4px;

      color:var(--muted);
      font-weight:var(--w-sub);
      font-size:12px;
      max-width:72ch;
    }

    .footRight{ display:flex; gap:10px; flex-wrap:wrap; }

    .linkBtn{
      border:1px solid var(--line);
      background:#fff;
      border-radius:14px;
      padding:10px 12px;

      box-shadow:0 8px 18px rgba(15,23,42,.06);
      cursor:pointer;

      display:inline-flex;
      align-items:center;
      gap:10px;
    }

    @media (prefers-reduced-motion: reduce){
      *{ animation:none !important; transition:none !important; }
      .bg{ background: linear-gradient(180deg, #fff 0%, var(--bg) 60%, #fff 100%); }
    }


/* ===== datenschutz.html ===== */
:root{
      --bg:    #f6f8fc;
      --card:  #ffffff;
      --ink:   #0b1220;
      --muted: #4b5563;
      --line:  #e6eaf2;

      --shadow:  0 16px 38px rgba(15,23,42,.10);
      --shadow2: 0 10px 22px rgba(15,23,42,.08);

      --radius:  18px;
      --radius2: 22px;
      --max:     1160px;

      --a1:#2bb0ff;
      --a2:#7c5cff;
      --a3:#ff4d7d;
      --a4:#00c2d4;
      --a5:#ff9a3c;
      --a6:#22c55e;

      --ease: cubic-bezier(.2,.8,.2,1);

      --w-text: 450;
      --w-sub:  650;
      --w-ui:   800;
      --w-bold: 900;
    }

    @font-face{
      font-family:"Inter";
      font-style:normal;
      font-weight:400;
      font-display:swap;
      src:url("assets/fonts/inter/inter-v20-latin-regular.woff2") format("woff2");
    }
    @font-face{
      font-family:"Inter";
      font-style:normal;
      font-weight:700;
      font-display:swap;
      src:url("assets/fonts/inter/inter-v20-latin-700.woff2") format("woff2");
    }
    @font-face{
      font-family:"Inter";
      font-style:normal;
      font-weight:900;
      font-display:swap;
      src:url("assets/fonts/inter/inter-v20-latin-900.woff2") format("woff2");
    }
    @font-face{
      font-family:"Inter";
      font-style:italic;
      font-weight:400;
      font-display:swap;
      src:url("assets/fonts/inter/inter-v20-latin-italic.woff2") format("woff2");
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    html{ -webkit-text-size-adjust: 100%; }

    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      color:var(--ink);
      background:var(--bg);
      line-height:1.35;
      overflow-x:hidden;

      font-optical-sizing:auto;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      text-rendering:optimizeLegibility;
      font-synthesis:none;

      font-weight:var(--w-text);
    }

    a{ color:inherit; text-decoration:none; }

    .wrap{
      max-width:var(--max);
      margin:0 auto;
      padding:22px 16px 80px;
    }

    .brandTitle,
    .kicker,
    h1,
    .appTitle{
      font-weight:var(--w-bold);
    }

    .brandSub,
    .lead,
    .sectionHead p,
    .hint{
      font-weight:var(--w-sub);
    }

    .btn,
    .chip,
    .go,
    .linkBtn{
      font-weight:var(--w-ui);
    }

    /* BG */
    .bg{
      position:fixed;
      inset:0;
      z-index:-2;
      overflow:hidden;
      background: linear-gradient(180deg, #ffffff 0%, var(--bg) 55%, #ffffff 100%);
    }

    .blob{
      position:absolute;
      width:58vmax;
      height:58vmax;
      border-radius:999px;
      opacity:.58;
      filter:blur(14px);
      transform:translate3d(0,0,0);
      will-change:transform;

      animation:
        driftA var(--t, 18s) linear infinite,
        swirl  var(--s, 9s)  ease-in-out infinite;
    }

    .b1{
      left:-18vmax; top:-22vmax;
      --t:14s; --s:7.5s;
      background: radial-gradient(circle at 30% 30%,
        rgba(43,176,255,.95) 0%,
        rgba(43,176,255,.55) 30%,
        rgba(43,176,255,.20) 52%,
        transparent 72%);
      mix-blend-mode:multiply;
    }
    .b2{
      right:-22vmax; top:-16vmax;
      --t:16s; --s:8.5s;
      background: radial-gradient(circle at 40% 40%,
        rgba(124,92,255,.92) 0%,
        rgba(124,92,255,.52) 32%,
        rgba(124,92,255,.20) 54%,
        transparent 74%);
      mix-blend-mode:multiply;
      animation-name: driftB, swirl;
    }
    .b3{
      left:8vmax; bottom:-26vmax;
      --t:18s; --s:9.5s;
      background: radial-gradient(circle at 40% 40%,
        rgba(255,154,60,.92) 0%,
        rgba(255,154,60,.52) 34%,
        rgba(255,154,60,.20) 56%,
        transparent 76%);
      mix-blend-mode:multiply;
      animation-name: driftC, swirl;
    }
    .b4{
      right:10vmax; bottom:-24vmax;
      --t:20s; --s:10.5s;
      background: radial-gradient(circle at 40% 40%,
        rgba(0,194,212,.90) 0%,
        rgba(0,194,212,.48) 34%,
        rgba(0,194,212,.18) 56%,
        transparent 76%);
      mix-blend-mode:multiply;
      animation-name: driftD, swirl;
    }

    @keyframes driftA{
      0%{ transform:translate3d(0,0,0); }
      20%{ transform:translate3d(7%,4%,0); }
      45%{ transform:translate3d(3%,-6%,0); }
      70%{ transform:translate3d(-6%,2%,0); }
      100%{ transform:translate3d(0,0,0); }
    }
    @keyframes driftB{
      0%{ transform:translate3d(0,0,0); }
      18%{ transform:translate3d(-8%,5%,0); }
      44%{ transform:translate3d(-2%,-7%,0); }
      73%{ transform:translate3d(6%,1%,0); }
      100%{ transform:translate3d(0,0,0); }
    }
    @keyframes driftC{
      0%{ transform:translate3d(0,0,0); }
      22%{ transform:translate3d(6%,-5%,0); }
      48%{ transform:translate3d(-7%,-1%,0); }
      76%{ transform:translate3d(2%,7%,0); }
      100%{ transform:translate3d(0,0,0); }
    }
    @keyframes driftD{
      0%{ transform:translate3d(0,0,0); }
      16%{ transform:translate3d(5%,-6%,0); }
      42%{ transform:translate3d(-6%,-2%,0); }
      68%{ transform:translate3d(-1%,7%,0); }
      100%{ transform:translate3d(0,0,0); }
    }
    @keyframes swirl{
      0%{ rotate:0deg;  scale:1; }
      35%{ rotate:10deg; scale:1.04; }
      70%{ rotate:-8deg; scale:0.98; }
      100%{ rotate:0deg; scale:1; }
    }

    .blob::after{
      content:"";
      position:absolute;
      inset:-18%;
      border-radius:999px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 58%),
        radial-gradient(circle at 70% 70%, rgba(255,255,255,.12), transparent 62%);
      opacity:.55;
      filter:blur(10px);
      mix-blend-mode:screen;
      animation: shimmer 6.5s ease-in-out infinite;
      will-change: transform, opacity;
      pointer-events:none;
    }
    @keyframes shimmer{
      0%{ transform:translate3d(0,0,0); opacity:.40; }
      50%{ transform:translate3d(2%,-2%,0); opacity:.70; }
      100%{ transform:translate3d(0,0,0); opacity:.40; }
    }

    .noise{
      position:absolute;
      inset:0;
      opacity:.06;
      mix-blend-mode:multiply;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
    }

    /* Topbar */
    .top{
      position:sticky;
      top:12px;
      z-index:50;

      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;

      padding:12px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.84);
      border-radius:var(--radius2);
      box-shadow:var(--shadow2);
      backdrop-filter:blur(10px);
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }

    .logo{
      width:36px;
      height:36px;
      border-radius:14px;

      display:grid;
      place-items:center;

      border:1px solid var(--line);
      background:
        radial-gradient(16px 16px at 30% 30%, rgba(43,176,255,.35), transparent 60%),
        radial-gradient(18px 18px at 70% 70%, rgba(124,92,255,.28), transparent 60%),
        #fff;
      box-shadow:0 10px 22px rgba(15,23,42,.06);
      font-size:16px;
    }

    .brandText{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
    }

    .brandTitle{
      margin:0;
      letter-spacing:-.02em;
      font-size:14px;
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .brandSub{
      margin:0;
      color:var(--muted);
      font-size:12px;
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .btnRow{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
      justify-content:flex-end;
    }

    .btn{
      appearance:none;
      border:1px solid var(--line);
      background:#fff;
      color:var(--ink);

      padding:10px 12px;
      border-radius:14px;

      cursor:pointer;
      user-select:none;
      white-space:nowrap;

      display:inline-flex;
      align-items:center;
      gap:10px;

      box-shadow:0 8px 18px rgba(15,23,42,.06);
      transition: transform .12s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
    }
    .btn:hover{ transform:translateY(-2px); border-color:#d6dbea; }
    .btn:active{ transform:translateY(0); }

    .btnIcon{
      width:28px;
      height:28px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:rgba(15,23,42,.06);
      font-size:16px;
    }

    .btnPrimary{
      border-color:rgba(43,176,255,.28);
      background: linear-gradient(180deg, rgba(43,176,255,.16), rgba(124,92,255,.10));
    }

    /* Content sections */
    .section{ margin-top:18px; }

    .hero{
      margin-top:18px;
      padding:22px;

      border-radius: calc(var(--radius2) + 4px);
      border:1px solid var(--line);
      background: rgba(255,255,255,.78);
      box-shadow: var(--shadow);

      overflow:hidden;
      position:relative;
    }

    .kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;

      padding:8px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      width:fit-content;
    }

    .kdot{
      width:10px;
      height:10px;
      border-radius:999px;
      background: linear-gradient(135deg, var(--a6), var(--a4));
      box-shadow:0 0 0 4px rgba(34,197,94,.12);
    }

    h1{
      margin:12px 0 0 0;
      font-size:clamp(28px, 3.4vw, 44px);
      line-height:1.05;
      letter-spacing:-.03em;
      max-width:26ch;
      font-weight: 900;
    }

    .lead{
      margin:10px 0 0 0;
      color:var(--muted);
      font-size:14px;
      max-width:75ch;
    }

    .cards{
      margin-top:14px;
      display:grid;
      grid-template-columns:repeat(12, 1fr);
      gap:14px;
      align-items:stretch;
    }

    .card{
      grid-column:span 12;
      border:1px solid var(--line);
      background:#fff;
      border-radius: calc(var(--radius2) + 2px);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    @media (min-width:900px){
      .card{ grid-column:span 6; }
    }

    .accentLine{ height:6px; width:100%; background:var(--a2); }

    .cardBody{
      padding:16px;
      display:grid;
      gap:10px;
    }

    .appTitle{
      margin:0;
      letter-spacing:-.01em;
      font-size:16px;
      line-height:1.15;
    }

    .text{
      margin:0;
      color:var(--muted);
      font-size:12px;
      line-height:1.45;
      font-weight:var(--w-sub);
    }

    .list{
      margin:0;
      padding-left:18px;
      color:var(--muted);
      font-size:12px;
      line-height:1.55;
      font-weight:var(--w-sub);
    }

    .inlineLink{
      text-decoration:underline;
      text-underline-offset:2px;
    }

    /* extra: long legal text readability */
    .legal h2{
      margin:0;
      font-size:14px;
      letter-spacing:-.01em;
      color:var(--ink);
      font-weight:var(--w-bold);
    }
    .legal h3{
      margin:0;
      font-size:13px;
      letter-spacing:-.01em;
      color:var(--ink);
      font-weight:var(--w-bold);
    }
    .legal p{
      margin:0;
      color:var(--muted);
      font-size:12px;
      line-height:1.55;
      font-weight:var(--w-sub);
    }
    .legal a{
      text-decoration:underline;
      text-underline-offset:2px;
    }
    .legal ul{
      margin:0;
      padding-left:18px;
      color:var(--muted);
      font-size:12px;
      line-height:1.55;
      font-weight:var(--w-sub);
    }
    .index{
      list-style:none;
      padding-left:0;
      display:grid;
      gap:8px;
    }
    .index-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:12px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.78);
      box-shadow:0 8px 18px rgba(15,23,42,.05);
    }
    .index-link:hover{ border-color:#d6dbea; }
    .seal{
      margin:0;
      font-size:12px;
      color:var(--muted);
      font-weight:var(--w-sub);
    }

    /* Footer (same vibe as main page) */
    footer{
      margin-top:18px;
      border:1px solid var(--line);
      border-radius: calc(var(--radius2) + 2px);
      background:rgba(255,255,255,.78);
      box-shadow:var(--shadow2);

      padding:16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }

    .footLeft{
      display:flex;
      flex-direction:column;
      gap:4px;

      color:var(--muted);
      font-weight:var(--w-sub);
      font-size:12px;
      max-width:72ch;
    }

    .footRight{ display:flex; gap:10px; flex-wrap:wrap; }

    .linkBtn{
      border:1px solid var(--line);
      background:#fff;
      border-radius:14px;
      padding:10px 12px;

      box-shadow:0 8px 18px rgba(15,23,42,.06);
      cursor:pointer;

      display:inline-flex;
      align-items:center;
      gap:10px;
    }

    @media (prefers-reduced-motion: reduce){
      *{ animation:none !important; transition:none !important; }
      .bg{ background: linear-gradient(180deg, #fff 0%, var(--bg) 60%, #fff 100%); }
    }


/* ===== about.html ===== */
:root{
      --bg:#f6f8fc;
      --card:#ffffff;
      --ink:#0b1220;
      --muted:#4b5563;
      --line:#e6eaf2;
      --shadow: 0 16px 38px rgba(15,23,42,.10);
      --shadow2: 0 10px 22px rgba(15,23,42,.08);
      --radius:18px;
      --radius2:22px;
      --max:1160px;

      --a1:#2bb0ff;
      --a2:#7c5cff;
      --a3:#ff4d7d;
      --a4:#00c2d4;
      --a5:#ff9a3c;
      --a6:#22c55e;

      --ease: cubic-bezier(.2,.8,.2,1);
    }

    *{box-sizing:border-box}
    html,body{height:100%}

    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--ink);
      background: var(--bg);
      line-height:1.35;
      overflow-x:hidden;
    }

    /* Full-viewport Hintergrund-Layer */
    .bg{
      position:fixed;
      inset:0;
      z-index:-2;
      overflow:hidden;
      background: linear-gradient(180deg, #ffffff 0%, var(--bg) 55%, #ffffff 100%);
    }

    /* === Blobs (wie in deinem aktuellen Stand) === */
    .blob{
      position:absolute;
      width: 58vmax;
      height: 58vmax;
      border-radius: 999px;

      opacity: .58;
      filter: blur(14px);
      transform: translate3d(0,0,0);
      will-change: transform;

      animation:
        driftA var(--t, 18s) linear infinite,
        swirl  var(--s, 9s)  ease-in-out infinite;
    }

    .b1{
      left:-18vmax; top:-22vmax;
      --t: 14s; --s: 7.5s;
      background: radial-gradient(circle at 30% 30%,
        rgba(43,176,255,.95) 0%,
        rgba(43,176,255,.55) 30%,
        rgba(43,176,255,.20) 52%,
        transparent 72%);
      mix-blend-mode: multiply;
    }
    .b2{
      right:-22vmax; top:-16vmax;
      --t: 16s; --s: 8.5s;
      background: radial-gradient(circle at 40% 40%,
        rgba(124,92,255,.92) 0%,
        rgba(124,92,255,.52) 32%,
        rgba(124,92,255,.20) 54%,
        transparent 74%);
      mix-blend-mode: multiply;
      animation-name: driftB, swirl;
    }
    .b3{
      left:8vmax; bottom:-26vmax;
      --t: 18s; --s: 9.5s;
      background: radial-gradient(circle at 40% 40%,
        rgba(255,154,60,.92) 0%,
        rgba(255,154,60,.52) 34%,
        rgba(255,154,60,.20) 56%,
        transparent 76%);
      mix-blend-mode: multiply;
      animation-name: driftC, swirl;
    }
    .b4{
      right:10vmax; bottom:-24vmax;
      --t: 20s; --s: 10.5s;
      background: radial-gradient(circle at 40% 40%,
        rgba(0,194,212,.90) 0%,
        rgba(0,194,212,.48) 34%,
        rgba(0,194,212,.18) 56%,
        transparent 76%);
      mix-blend-mode: multiply;
      animation-name: driftD, swirl;
    }

    @keyframes driftA{
      0%   { transform: translate3d(0,0,0); }
      20%  { transform: translate3d(7%,  4%, 0); }
      45%  { transform: translate3d(3%, -6%, 0); }
      70%  { transform: translate3d(-6%, 2%, 0); }
      100% { transform: translate3d(0,0,0); }
    }
    @keyframes driftB{
      0%   { transform: translate3d(0,0,0); }
      18%  { transform: translate3d(-8%,  5%, 0); }
      44%  { transform: translate3d(-2%, -7%, 0); }
      73%  { transform: translate3d( 6%,  1%, 0); }
      100% { transform: translate3d(0,0,0); }
    }
    @keyframes driftC{
      0%   { transform: translate3d(0,0,0); }
      22%  { transform: translate3d( 6%, -5%, 0); }
      48%  { transform: translate3d(-7%, -1%, 0); }
      76%  { transform: translate3d( 2%,  7%, 0); }
      100% { transform: translate3d(0,0,0); }
    }
    @keyframes driftD{
      0%   { transform: translate3d(0,0,0); }
      16%  { transform: translate3d( 5%, -6%, 0); }
      42%  { transform: translate3d(-6%, -2%, 0); }
      68%  { transform: translate3d(-1%,  7%, 0); }
      100% { transform: translate3d(0,0,0); }
    }

    @keyframes swirl{
      0%   { rotate: 0deg;   scale: 1; }
      35%  { rotate: 10deg;  scale: 1.04; }
      70%  { rotate: -8deg;  scale: 0.98; }
      100% { rotate: 0deg;   scale: 1; }
    }

    .blob::after{
      content:"";
      position:absolute;
      inset:-18%;
      border-radius:999px;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 58%),
        radial-gradient(circle at 70% 70%, rgba(255,255,255,.12), transparent 62%);
      opacity:.55;
      filter: blur(10px);
      mix-blend-mode: screen;
      animation: shimmer 6.5s ease-in-out infinite;
      will-change: transform, opacity;
      pointer-events:none;
    }
    @keyframes shimmer{
      0%   { transform: translate3d(0,0,0); opacity:.40; }
      50%  { transform: translate3d(2%, -2%, 0); opacity:.70; }
      100% { transform: translate3d(0,0,0); opacity:.40; }
    }

    .noise{
      position:absolute; inset:0;
      opacity:.06;
      mix-blend-mode: multiply;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
    }

    a{color:inherit; text-decoration:none}
    .wrap{max-width:var(--max); margin:0 auto; padding:22px 16px 80px;}

    /* ===== Topbar ===== */
    .top{
      position:sticky; top:12px; z-index:50;
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      padding:12px 12px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.84);
      border-radius: var(--radius2);
      box-shadow: var(--shadow2);
      backdrop-filter: blur(10px);
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      min-width:0;
    }
    .logo{
      width:36px; height:36px; border-radius:14px;
      display:grid; place-items:center;
      border:1px solid var(--line);
      background:
        radial-gradient(16px 16px at 30% 30%, rgba(43,176,255,.35), transparent 60%),
        radial-gradient(18px 18px at 70% 70%, rgba(124,92,255,.28), transparent 60%),
        #fff;
      box-shadow: 0 10px 22px rgba(15,23,42,.06);
      font-size:16px;
    }
    .brandText{display:flex; flex-direction:column; gap:2px; min-width:0}
    .brandTitle{
      margin:0;
      font-weight:950;
      letter-spacing:-.02em;
      font-size:14px;
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brandSub{
      margin:0;
      color:var(--muted);
      font-weight:750;
      font-size:12px;
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .btnRow{display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end}
    .btn{
      appearance:none;
      border:1px solid var(--line);
      background: #fff;
      color:var(--ink);
      padding:10px 12px;
      border-radius: 14px;
      font-weight:900;
      cursor:pointer;
      transition: transform .12s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
      user-select:none;
      display:inline-flex; align-items:center; gap:10px;
      white-space:nowrap;
      box-shadow: 0 8px 18px rgba(15,23,42,.06);
    }
    .btn:hover{transform: translateY(-2px); border-color:#d6dbea;}
    .btn:active{transform: translateY(0px);}
    .btnIcon{
      width:28px; height:28px; border-radius:10px;
      display:grid; place-items:center;
      background: rgba(15,23,42,.06);
      font-size:16px;
    }
    .btnPrimary{
      border-color: rgba(43,176,255,.28);
      background: linear-gradient(180deg, rgba(43,176,255,.16), rgba(124,92,255,.10));
    }

    /* ===== Layout About ===== */
    .hero{
      margin-top:18px;
      padding:22px;
      border-radius: calc(var(--radius2) + 4px);
      border:1px solid var(--line);
      background: rgba(255,255,255,.78);
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      padding:8px 10px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      width:fit-content;
      font-weight:950;
    }
    .kdot{
      width:10px; height:10px; border-radius:999px;
      background: linear-gradient(135deg, var(--a1), var(--a2));
      box-shadow: 0 0 0 4px rgba(43,176,255,.12);
    }
    h1{
      margin:12px 0 0 0;
      font-size: clamp(28px, 3.4vw, 44px);
      line-height:1.05;
      letter-spacing:-.03em;
      font-weight:950;
      max-width: 26ch;
    }
    .lead{
      margin:10px 0 0 0;
      color:var(--muted);
      font-weight:750;
      font-size:14px;
      max-width: 74ch;
    }

    .heroActions{
      margin-top:14px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }

    .layout{
      margin-top:18px;
      display:grid;
      grid-template-columns: 1fr;
      gap:14px;
      align-items:start;
    }
    @media (min-width: 980px){
      .layout{ grid-template-columns: 1fr 340px; }
    }

    .card{
      border:1px solid var(--line);
      border-radius: calc(var(--radius2) + 2px);
      background:#fff;
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .cardHead{
      padding:14px 16px;
      border-bottom:1px solid var(--line);
      background: #fbfcff;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .cardHead h2{
      margin:0;
      font-size:14px;
      font-weight:950;
      letter-spacing:-.01em;
    }
    .cardBody{ padding:16px; }

    .pill{
      border:1px solid var(--line);
      background:#fff;
      border-radius:999px;
      padding:7px 9px;
      font-weight:900;
      font-size:12px;
      color:var(--muted);
      display:inline-flex; align-items:center; gap:8px;
      white-space:nowrap;
    }
    .pillDot{
      width:10px; height:10px; border-radius:999px;
      background: var(--a4);
    }

    .grid2{
      display:grid;
      grid-template-columns: 1fr;
      gap:12px;
    }
    @media (min-width: 720px){
      .grid2{ grid-template-columns: 1fr 1fr; }
    }

    .miniCard{
      border:1px solid var(--line);
      border-radius: 18px;
      background:#fff;
      box-shadow: 0 10px 18px rgba(15,23,42,.06);
      padding:12px;
    }
    .miniCard strong{display:block; font-weight:950; letter-spacing:-.01em; font-size:13px}
    .miniCard p{margin:6px 0 0 0; color:var(--muted); font-weight:750; font-size:12px; line-height:1.45}

    .callout{
      border:1px solid rgba(43,176,255,.28);
      background: linear-gradient(180deg, rgba(43,176,255,.10), rgba(124,92,255,.06));
      border-radius: 18px;
      padding:12px;
      display:flex;
      gap:12px;
      align-items:flex-start;
    }
    .callIcon{
      width:34px; height:34px; border-radius:14px;
      display:grid; place-items:center;
      background:#fff;
      border:1px solid var(--line);
      box-shadow: 0 10px 18px rgba(15,23,42,.06);
      flex:0 0 auto;
    }
    .callout strong{display:block; font-weight:950; font-size:13px}
    .callout p{margin:4px 0 0 0; color:var(--muted); font-weight:750; font-size:12px; line-height:1.45}

    /* Inhaltsverzeichnis */
    .toc{
      position:sticky;
      top:86px;
      border:1px solid var(--line);
      border-radius: calc(var(--radius2) + 2px);
      background: rgba(255,255,255,.86);
      backdrop-filter: blur(10px);
      box-shadow: var(--shadow2);
      overflow:hidden;
    }
    .tocHead{
      padding:12px 14px;
      border-bottom:1px solid var(--line);
      background:#fbfcff;
      display:flex; align-items:center; justify-content:space-between; gap:10px;
    }
    .tocHead strong{font-weight:950; font-size:13px}
    .tocBody{padding:10px 10px 12px}
    .toc a{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      padding:10px 10px;
      border-radius: 14px;
      border:1px solid transparent;
      font-weight:900;
      font-size:12px;
      color:var(--muted);
      transition: transform .12s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
    }
    .toc a:hover{transform: translateY(-1px); border-color:#d6dbea; background:#fff;}
    .toc a[aria-current="true"]{
      color: var(--ink);
      border-color: rgba(43,176,255,.35);
      background: linear-gradient(180deg, rgba(43,176,255,.10), rgba(124,92,255,.06));
    }

    /* Details/Accordion */
    details{
      border:1px solid var(--line);
      border-radius: 18px;
      background:#fff;
      overflow:hidden;
      box-shadow: 0 10px 18px rgba(15,23,42,.05);
    }
    details + details{margin-top:10px}
    summary{
      list-style:none;
      cursor:pointer;
      padding:12px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-weight:950;
      font-size:13px;
    }
    summary::-webkit-details-marker{display:none}
    .sumRight{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--muted);
      font-weight:900;
      font-size:12px;
    }
    .detailsBody{
      padding:0 12px 12px 12px;
      color:var(--muted);
      font-weight:750;
      font-size:12px;
      line-height:1.55;
    }

    .hr{
      height:1px;
      background: var(--line);
      margin:14px 0;
    }

    .list{
      margin:8px 0 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }
    .li{
      border:1px solid var(--line);
      border-radius: 16px;
      padding:10px 10px;
      background:#fff;
    }
    .li strong{display:block; color:var(--ink); font-weight:950; font-size:12px}
    .li span{display:block; margin-top:4px; color:var(--muted); font-weight:750; font-size:12px; line-height:1.45}

    footer{
      margin-top:14px;
      border:1px solid var(--line);
      border-radius: calc(var(--radius2) + 2px);
      background: rgba(255,255,255,.78);
      box-shadow: var(--shadow2);
      padding:16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
    }
    .footLeft{
      display:flex; flex-direction:column; gap:4px;
      color:var(--muted);
      font-weight:750;
      font-size:12px;
      max-width: 72ch;
    }
    .footRight{display:flex; gap:10px; flex-wrap:wrap}

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce){
      *{animation:none !important; transition:none !important;}
      .bg{background: linear-gradient(180deg, #fff 0%, var(--bg) 60%, #fff 100%);}
    }


/* ===== Shared readability adjustment ===== */
body{ font-size:17px; }