Homepage/de: Difference between revisions

From AlphaX Wiki
Jump to navigation Jump to search
Lucy (talk | contribs)
Bots
8,411 edits
VisualWikitext
Copied from English version
 
Lucy (talk | contribs)
Bots
8,411 edits
No edit summary
 
Line 3: Line 3:
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.tailwindcss.com"></script>
<style>
<style>
    /* ── Alpha Orange Design System ───────────────────── */
     :root{--bg:#0D0D0D;--surface:#1A1A1A;--border:#2E2E2E;--orange:#FF6A21;--text:#FFFFFF;--text-2:#999999;--text-3:#666666;--grad:linear-gradient(135deg,#FF6A21,#FF8C42);}
     :root {
    *{margin:0;padding:0;box-sizing:border-box;}
      --bg:       #0D0D0D;
    html{scroll-behavior:smooth;}
      --surface:   #1A1A1A;
    body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;line-height:1.6;}
      --border:   #2E2E2E;
     h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;}
      --orange:   #FF6A21;
     #progress{position:fixed;top:0;left:0;height:2px;background:var(--grad);z-index:9999;width:0;transition:width .1s;}
      --orange2:  #FF8C42;
     .nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;height:64px;background:rgba(13,13,13,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
      --text:     #FFFFFF;
     .nav-link{color:#999;text-decoration:none;font-size:.9rem;font-weight:500;transition:color .2s;}
      --text-2:   #999999;
     .nav-link:hover{color:#fff;}
      --text-3:   #666666;
    .btn-nav{background:var(--grad);color:white;padding:.45rem 1.1rem;border-radius:8px;font-size:.85rem;font-weight:700;text-decoration:none;}
      --text-4:   #888888;
     .ot{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
      --glow-sm:  0 0 20px rgba(255,106,33,.15);
     .lang-switcher{display:flex;align-items:center;gap:3px;background:#111;border:1px solid #222;border-radius:8px;padding:4px;}
      --glow-md:   0 0 20px rgba(255,106,33,.40);
     .lang-btn{padding:4px 9px;border-radius:5px;font-size:11px;font-weight:700;text-decoration:none;letter-spacing:.04em;transition:all .15s;}
      --glow-lg:   0 0 30px rgba(255,106,33,.60);
    .lang-btn.active{background:var(--orange);color:white;}
      --grad:     linear-gradient(135deg, #FF6A21, #FF8C42);
    .lang-btn.available{color:#666;}
    }
    .lang-btn.available:hover{color:#fff;}
    *, *::before, *::after { box-sizing: border-box; margin: 0; }
    .lang-btn.soon{color:#2E2E2E;cursor:default;}
     html { scroll-behavior: smooth; }
     .feat-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.75rem;}
     body {
     .topic-tile{display:block;border-radius:14px;overflow:hidden;background:var(--surface);text-decoration:none;border:1px solid var(--border);transition:transform .2s,border-color .2s;}
      background: var(--bg);
     .topic-tile:hover{border-color:var(--orange);transform:translateY(-2px);}
      font-family: 'Inter', sans-serif;
     .art-card{flex-shrink:0;width:260px;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;text-decoration:none;transition:border-color .2s;}
      color: var(--text);
    .art-card:hover{border-color:var(--orange);}
      overflow-x: hidden;
     .ed-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.25rem;text-decoration:none;transition:border-color .2s;display:block;}
      -webkit-font-smoothing: antialiased;
    .ed-card:hover{border-color:var(--orange);}
    }
    .testi{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2rem;}
     h1,h2,h3,h4,h5 { font-family: 'Space Grotesk', sans-serif; }
    .path-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.5rem;text-decoration:none;display:block;transition:border-color .2s;}
 
     .path-card:hover{border-color:var(--orange);}
    /* ── Scrollbar ─────────────────────────────────── */
     footer a{color:#999;text-decoration:none;font-size:.9rem;transition:color .2s;}
    ::-webkit-scrollbar { width: 4px; }
    footer a:hover{color:#fff;}
    ::-webkit-scrollbar-track { background: transparent; }
     .fade-up{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s;}
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.05); border-radius: 2px; }
    .fade-up.visible{opacity:1;transform:none;}
     ::-webkit-scrollbar-thumb:hover { background: rgba(255,106,33,.20); }
     .tag{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);font-weight:600;margin-bottom:.5rem;}
 
    .section-label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);font-weight:700;}
    /* ── Skip / focus ──────────────────────────────── */
     body.light-mode{--bg:#F7F7F5;--surface:#FFFFFF;--border:#E4E4E0;--text:#111111;--text-2:#555555;--text-3:#888888;}
     .skip { position:fixed;top:-60px;left:12px;background:var(--orange);color:#fff;padding:8px 18px;border-radius:8px;font-weight:700;font-size:.85rem;z-index:9999;transition:top .2s; }
    body.light-mode .nav{background:rgba(247,247,245,.95);}
     .skip:focus { top:12px; }
    @media(prefers-color-scheme:light){body:not(.dark-mode){--bg:#F7F7F5;--surface:#FFFFFF;--border:#E4E4E0;--text:#111111;--text-2:#555555;--text-3:#888888;}body:not(.dark-mode) .nav{background:rgba(247,247,245,.95);}}
    *:focus-visible { outline:2px solid rgba(255,106,33,.7);outline-offset:3px;border-radius:4px; }
 
     /* ── Progress bar ──────────────────────────────── */
    #prog { position:fixed;top:0;left:0;height:2px;z-index:9999;background:var(--grad);width:0;pointer-events:none; }
 
     /* ── Navbar ────────────────────────────────────── */
    .nav {
      position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
      z-index: 50;
      background: rgba(13,13,13,.88);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid var(--border);
      border-radius: 999px;
      display: flex; align-items: center;
      padding: 0 6px 0 16px;
      height: 52px; gap: 6px;
      width: min(calc(100vw - 32px), 800px);
    }
     .nav-logo { display:flex;align-items:center;flex-shrink:0;margin-right:4px; }
     .nav-links { display:flex;align-items:center;gap:2px;flex:1; }
    .nav-link {
      font-size:.83rem;font-weight:500;color:var(--text-2);
      padding:6px 12px;border-radius:999px;text-decoration:none;
      transition:color .2s,background .2s;white-space:nowrap;
    }
     .nav-link:hover { color:var(--text);background:rgba(255,255,255,.05); }
     .nav-right { display:flex;align-items:center;gap:6px;flex-shrink:0; }
    .nav-admin {
      font-size:.76rem;font-weight:600;color:var(--text-3);
      padding:6px 12px;border-radius:999px;
      border:1px solid var(--border);
      text-decoration:none;
      transition:color .2s,border-color .2s;white-space:nowrap;
      display:inline-flex;align-items:center;gap:5px;
    }
     .nav-admin:hover { color:var(--text-2);border-color:rgba(255,106,33,.4); }
    .btn-nav {
      font-size:.83rem;font-weight:700;color:#fff;
      background: var(--grad);
      padding:8px 20px;border-radius:999px;border:none;cursor:pointer;
      text-decoration:none;display:inline-flex;align-items:center;
      transition:opacity .2s,box-shadow .2s;
      box-shadow: var(--glow-sm);
    }
     .btn-nav:hover { opacity:.92;box-shadow:var(--glow-md); }
     @media(max-width:640px){ .nav-links,.nav-admin{display:none;} }
 
    /* ── Orange text gradient ──────────────────────── */
     .ot {
      background: var(--grad);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    }
 
    /* ── Buttons ───────────────────────────────────── */
     .btn-primary {
      display:inline-flex;align-items:center;gap:8px;
      font-size:.92rem;font-weight:700;color:#fff;
      background: var(--grad);
      padding:14px 28px;border-radius:12px;border:none;cursor:pointer;
      text-decoration:none;
      transition:transform .2s,box-shadow .2s,opacity .2s;
      box-shadow: var(--glow-sm);
    }
     .btn-primary:hover { transform:translateY(-1px);box-shadow:var(--glow-md);opacity:.93; }
    .btn-secondary {
      display:inline-flex;align-items:center;gap:8px;
      font-size:.92rem;font-weight:600;color:var(--text-2);
      background: var(--surface);
      border:1px solid var(--border);
      padding:14px 28px;border-radius:12px;cursor:pointer;
      text-decoration:none;
      transition:border-color .2s,color .2s;
    }
    .btn-secondary:hover { border-color:rgba(255,106,33,.5);color:var(--text); }
 
    /* ── Section eyebrow ───────────────────────────── */
    .eyebrow {
      display:inline-flex;align-items:center;gap:8px;
      font-size:.70rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
      color:var(--orange);
    }
    .eyebrow::before { content:'';width:18px;height:1px;background:var(--orange);opacity:.55; }
 
    /* ── Divider ───────────────────────────────────── */
    .div-line { height:1px;background:var(--border); }
 
    /* ── Noise ─────────────────────────────────────── */
    .noise { position:absolute;inset:0;pointer-events:none;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
 
    /* ── Glow orbs ─────────────────────────────────── */
    .orb { position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none; }
    .orb-1 { width:500px;height:500px;background:rgba(255,106,33,.10);top:-160px;left:-80px;animation:drift 20s ease-in-out infinite alternate; }
    .orb-2 { width:400px;height:400px;background:rgba(255,140,66,.07);top:-80px;right:-60px;animation:drift 16s ease-in-out infinite alternate-reverse; }
    @keyframes drift { from{transform:translate(0,0)} to{transform:translate(30px,24px)} }
    @media(prefers-reduced-motion:reduce){ .orb{animation:none!important} }
 
    /* ── Grid lines ────────────────────────────────── */
    .grid-bg {
      position:absolute;inset:0;pointer-events:none;overflow:hidden;
      background-image:
        linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
      background-size:72px 72px;
      mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,black 0%,transparent 80%);
    }
 
    /* ── Feature cards ─────────────────────────────── */
    .feat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 28px;
      display:flex;flex-direction:column;gap:14px;
      transition: border-color .2s, box-shadow .2s, transform .2s;
    }
    .feat-card:hover {
      border-color: rgba(255,106,33,.30);
      box-shadow: 0 8px 32px rgba(0,0,0,.4), var(--glow-sm);
      transform: translateY(-2px);
    }
    .feat-icon {
      width:44px;height:44px;border-radius:10px;
      display:flex;align-items:center;justify-content:center;flex-shrink:0;
      background: rgba(255,106,33,.10);
      border: 1px solid rgba(255,106,33,.20);
    }
    .feat-title { font-size:1rem;font-weight:700;color:var(--text);line-height:1.3; }
    .feat-body { font-size:.855rem;color:var(--text-2);line-height:1.72; }
 
    /* ── Mockup ────────────────────────────────────── */
    .mockup-wrap {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.04), var(--glow-sm);
    }
    .mockup-bar {
      background: #111111;
      border-bottom: 1px solid var(--border);
      padding: 12px 16px;
      display: flex; align-items: center; gap: 10px;
    }
    .dot { width:11px;height:11px;border-radius:50%; }
    .mockup-url {
      flex:1;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:6px;
      padding:5px 12px;font-size:.74rem;color:var(--text-3);font-family:monospace;letter-spacing:.02em;
    }
    .mockup-body { padding:16px;display:flex;flex-direction:column;gap:8px; }
    .mock-search {
      background:rgba(255,255,255,.04);border:1px solid var(--border);
      border-radius:8px;padding:10px 14px;
      display:flex;align-items:center;gap:10px;color:var(--text-3);font-size:.82rem;
      margin-bottom:4px;
    }
    .mock-article {
      background:rgba(255,255,255,.025);
      border:1px solid var(--border);
      border-radius:10px;padding:12px 14px;
      display:flex;align-items:center;gap:12px;
      transition:background .2s,border-color .2s;cursor:default;
    }
    .mock-article:hover { background:rgba(255,106,33,.06);border-color:rgba(255,106,33,.25); }
    .mock-dot { width:34px;height:34px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center; }
    .mock-title { font-size:.81rem;font-weight:600;color:rgba(255,255,255,.82);margin-bottom:3px; }
    .mock-sub { font-size:.73rem;color:var(--text-3); }
    .mock-badge {
      margin-left:auto;flex-shrink:0;
      font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
      padding:3px 9px;border-radius:999px;
      background:rgba(255,106,33,.12);border:1px solid rgba(255,106,33,.25);color:#fff;
    }
    .mock-badge-g {
      font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
      padding:3px 9px;border-radius:999px;margin-left:auto;flex-shrink:0;
      background:rgba(61,220,132,.10);border:1px solid rgba(61,220,132,.22);color:#3DDC84;
    }
 
    /* ── Stats ─────────────────────────────────────── */
    .stat-strip { display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:16px;overflow:hidden; }
    @media(max-width:600px){ .stat-strip{grid-template-columns:repeat(2,1fr);} }
    .stat-cell { padding:2rem 1.5rem;text-align:center;border-right:1px solid var(--border);transition:background .2s; }
    .stat-cell:last-child { border-right:none; }
    .stat-cell:hover { background:rgba(255,106,33,.04); }
    .stat-n { font-family:'Space Grotesk',sans-serif;font-size:clamp(2rem,3.5vw,3rem);font-weight:900;line-height:1;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
 
    /* ── Topic tiles ───────────────────────────────── */
    .topic-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px; }
    .topic-tile {
      background:var(--surface);border:1px solid var(--border);border-radius:12px;
      padding:18px 20px;text-decoration:none;display:flex;flex-direction:column;gap:8px;
      transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;cursor:pointer;
    }
    .topic-tile:hover {
      background:rgba(255,106,33,.05);border-color:rgba(255,106,33,.30);
      transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4),var(--glow-sm);
    }
    .topic-icon { width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center; }
    .topic-name { font-size:.88rem;font-weight:600;color:var(--text); }
    .topic-count { font-size:.75rem;color:var(--text-3); }
 
    /* ── Article cards ─────────────────────────────── */
    .art-card {
      background:var(--surface);border:1px solid var(--border);border-radius:16px;
      padding:26px;text-decoration:none;display:flex;flex-direction:column;gap:12px;
      transition:border-color .2s,box-shadow .2s,transform .2s;cursor:pointer;
    }
    .art-card:hover {
      border-color:rgba(255,106,33,.30);
      box-shadow:0 12px 40px rgba(0,0,0,.5),var(--glow-sm);
      transform:translateY(-2px);
    }
    .art-title { font-family:'Space Grotesk',sans-serif;font-size:1rem;font-weight:700;color:var(--text);line-height:1.35;transition:color .2s; }
    .art-card:hover .art-title { color:var(--orange2); }
    .art-body { font-size:.845rem;color:var(--text-2);line-height:1.70; }
    .art-cta { display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;color:rgba(255,106,33,.65);margin-top:auto; }
    .art-card:hover .art-cta { color:var(--orange); }
 
    /* ── Tag pills ─────────────────────────────────── */
    .tag {
      display:inline-flex;align-items:center;
      font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
      padding:3px 10px;border-radius:999px;
    }
    .t-orange { background:rgba(255,106,33,.12);border:1px solid rgba(255,106,33,.25);color:var(--orange); }
    .t-green  { background:rgba(61,220,132,.10);border:1px solid rgba(61,220,132,.22);color:#3DDC84; }
    .t-white  { background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.65); }
 
    /* ── Quote cards ───────────────────────────────── */
    .q-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
    @media(max-width:900px){ .q-grid{grid-template-columns:1fr;} }
    .q-card {
      background:var(--surface);border:1px solid var(--border);border-radius:16px;
      padding:28px;display:flex;flex-direction:column;gap:20px;
    }
    .q-text { font-size:.895rem;color:var(--text-2);line-height:1.78;font-style:italic; }
 
    /* ── CTA band ──────────────────────────────────── */
    .cta-band {
      position:relative;overflow:hidden;
      background:#111111;
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
    }
    .cta-band::before {
      content:'';position:absolute;right:-100px;top:-100px;
      width:400px;height:400px;border-radius:50%;
      background:radial-gradient(circle,rgba(255,106,33,.12) 0%,transparent 65%);
      pointer-events:none;
    }
    .cta-band::after {
      content:'';position:absolute;left:-80px;bottom:-80px;
      width:300px;height:300px;border-radius:50%;
      background:radial-gradient(circle,rgba(255,140,66,.08) 0%,transparent 65%);
      pointer-events:none;
    }
 
    /* ── Marquee ───────────────────────────────────── */
    .mq-wrap { overflow:hidden; }
    .mq-track { display:flex;width:max-content;animation:mq 40s linear infinite; }
    @keyframes mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
    @media(prefers-reduced-motion:reduce){ .mq-track{animation:none} }
 
    /* ── Newsletter input ──────────────────────────── */
    .nl-in {
      background:var(--surface);border:1px solid var(--border);
      color:var(--text);outline:none;border-radius:10px;
      padding:13px 18px;font-size:.9rem;width:100%;
      transition:border-color .2s,box-shadow .2s;font-family:'Inter',sans-serif;
    }
    .nl-in:focus { border-color:rgba(255,106,33,.55);box-shadow:0 0 0 3px rgba(255,106,33,.12); }
    .nl-in::placeholder { color:var(--text-3); }
 
    /* ── Fade-up ───────────────────────────────────── */
    .fu { opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease; }
    .fu.in { opacity:1;transform:none; }
    .fu[data-d="1"]{transition-delay:.10s}
    .fu[data-d="2"]{transition-delay:.18s}
    .fu[data-d="3"]{transition-delay:.26s}
    .fu[data-d="4"]{transition-delay:.34s}
    .fu[data-d="5"]{transition-delay:.42s}
    .fu[data-d="6"]{transition-delay:.50s}
    @media(prefers-reduced-motion:reduce){ .fu{opacity:1!important;transform:none!important;transition:none!important} }
 
    /* ── Path cards (Choose Your Path) ────────────── */
    .path-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 28px 26px;
      text-decoration: none;
      display: flex; flex-direction: column; gap: 10px;
      transition: border-color .2s, box-shadow .2s, transform .2s;
      cursor: pointer; position: relative; overflow: hidden;
    }
    .path-card::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(255,106,33,.04) 0%, transparent 60%);
      opacity: 0; transition: opacity .2s;
    }
    .path-card:hover { border-color: rgba(255,106,33,.40); box-shadow: 0 8px 32px rgba(0,0,0,.4), var(--glow-sm); transform: translateY(-2px); }
    .path-card:hover::before { opacity: 1; }
    .path-card-wide { flex-direction: row; align-items: center; gap: 20px; }
    .path-card-wide .path-desc { margin-right: auto; }
    .path-num { font-size: .68rem; font-weight: 800; letter-spacing: .12em; color: var(--text-3); font-family: 'Space Grotesk', sans-serif; }
    .path-icon-wrap { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,106,33,.08); border: 1px solid rgba(255,106,33,.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .path-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.3; }
    .path-desc { font-size: .855rem; color: var(--text-2); line-height: 1.65; }
    .path-cta { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: rgba(255,106,33,.55); margin-top: 4px; transition: color .2s; }
    .path-card:hover .path-cta { color: var(--orange); }
    @media(max-width:700px) { .path-card-wide { flex-direction: column; align-items: flex-start; } }
 
    /* ── Latest articles card ──────────────────────── */
    .latest-card {
      flex-shrink: 0; width: 240px; scroll-snap-align: start;
      background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
      padding: 20px; text-decoration: none;
      display: flex; flex-direction: column; gap: 10px;
      transition: border-color .2s, transform .2s, box-shadow .2s;
    }
    .latest-card:hover { border-color: rgba(255,106,33,.30); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.4), var(--glow-sm); }
    .latest-title { font-family: 'Space Grotesk', sans-serif; font-size: .9rem; font-weight: 700; color: var(--text); line-height: 1.35; transition: color .2s; }
    .latest-card:hover .latest-title { color: var(--orange2); }
    .latest-date { font-size: .72rem; color: var(--text-3); margin-top: auto; }
    #latest-deck::-webkit-scrollbar { display: none; }
 
    /* ── Knowledge area cards ──────────────────────── */
    .area-card {
      background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
      padding: 22px 20px; text-decoration: none;
      display: flex; flex-direction: column; gap: 6px;
      transition: border-color .2s, transform .2s, box-shadow .2s, background .2s;
      cursor: pointer; position: relative;
    }
    .area-card:hover { border-color: rgba(255,106,33,.35); background: rgba(255,106,33,.03); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.4), var(--glow-sm); }
    .area-icon { font-size: 1.5rem; line-height: 1; margin-bottom: 4px; }
    .area-name { font-family: 'Space Grotesk', sans-serif; font-size: .92rem; font-weight: 700; color: var(--text); }
    .area-desc { font-size: .78rem; color: var(--text-3); line-height: 1.55; }
    .area-arrow { position: absolute; top: 20px; right: 18px; font-size: 1rem; color: var(--text-3); transition: color .2s, transform .2s; }
    .area-card:hover .area-arrow { color: var(--orange); transform: translateX(3px); }
 
    /* ── Responsive grids ──────────────────────────── */
    @media(max-width:900px){.g3{grid-template-columns:1fr 1fr!important}}
    @media(max-width:560px){.g3,.g2{grid-template-columns:1fr!important}}
    @media(max-width:800px){.gfooter{grid-template-columns:1fr 1fr!important}}
    @media(max-width:460px){.gfooter{grid-template-columns:1fr!important}}
  </style>
<style>@media(max-width:900px){#areas-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){#areas-grid{grid-template-columns:1fr}}</style>
<style>
  .ft-link { font-size:.84rem;color:var(--text-3);text-decoration:none;transition:color .2s; }
  .ft-link:hover { color:var(--orange); }
  .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }
</style>
</style>


<div id="progress"></div>


<div id="prog" aria-hidden="true"></div>
<nav class="nav">
<a href="#main" class="skip">Skip to content</a>
   <a href="https://alphax.wiki/wiki/Homepage/de">
 
     <img src="https://alphax.wiki/images/7/7a/Alphax_Wiki_logo_new.png" alt="AlphaX Wiki" style="height:34px;width:auto;">
<!-- ═══════════════════════════════════════════════════
    NAVBAR
═══════════════════════════════════════════════════ -->
<nav class="nav" role="navigation" aria-label="Main navigation">
   <a href="https://alphax.wiki" class="nav-logo" aria-label="AlphaX Wiki home">
     <img src="https://alphax.wiki/images/7/7a/Alphax_Wiki_logo_new.png" alt="AlphaX Wiki" style="height:34px;width:auto;object-fit:contain">
   </a>
   </a>
   <div class="nav-links">
   <div style="display:flex;gap:2rem;">
     <a href="#features" class="nav-link">Features</a>
     <a href="#funktionen" class="nav-link">Funktionen</a>
     <a href="#topics"   class="nav-link">Topics</a>
     <a href="#themen" class="nav-link">Themen</a>
     <a href="#articles" class="nav-link">Articles</a>
     <a href="#artikel" class="nav-link">Artikel</a>
     <a href="#about"   class="nav-link">About</a>
     <a href="#ueber" class="nav-link">Über uns</a>
   </div>
   </div>
   <div class="nav-right">
   <div style="display:flex;align-items:center;gap:1rem;">
    <a href="https://alphax.wiki/radmin" class="nav-admin" aria-label="Admin login">
    <div class="lang-switcher">
       <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
      <a href="https://alphax.wiki/wiki/Homepage" class="lang-btn available">EN</a>
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0z"/>
      <a href="https://alphax.wiki/wiki/Homepage/de" class="lang-btn active">DE</a>
      </svg>
       <span class="lang-btn soon" title="Demnächst">FR</span>
      Admin
      <span class="lang-btn soon" title="Demnächst">ES</span>
    </a>
      <span class="lang-btn soon" title="Demnächst">PT</span>
     <a href="https://alphax.wiki" class="btn-nav">Explore Free</a>
    </div>
    <button id="theme-toggle" onclick="toggleTheme()" style="background:none;border:1px solid var(--border);border-radius:8px;padding:6px 9px;cursor:pointer;font-size:15px;line-height:1;color:var(--text-2);">🌙</button>
    <a href="https://alphax.wiki/radmin" style="color:#555;text-decoration:none;font-size:.85rem;">Admin</a>
     <a href="#themen" class="btn-nav">Kostenlos erkunden</a>
   </div>
   </div>
</nav>
</nav>


<main>


<main id="main">
<section style="position:relative;padding:160px 1rem 100px;overflow:hidden;text-align:center;">
  <div style="position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(255,106,33,.18) 0%,transparent 70%);pointer-events:none;"></div>
  <div style="max-width:800px;margin:0 auto;position:relative;">
    <div style="display:inline-flex;align-items:center;gap:.5rem;background:#1A1A1A;border:1px solid #2E2E2E;border-radius:100px;padding:.4rem 1rem;margin-bottom:2rem;font-size:.8rem;color:#999;">
      <span style="width:6px;height:6px;border-radius:50%;background:var(--orange);display:inline-block;"></span>
      500+ Artikel · Immer kostenlos
    </div>
    <h1 style="font-size:clamp(2.8rem,6vw,5.2rem);font-weight:900;line-height:1.06;letter-spacing:-.03em;margin-bottom:1.5rem;">
      Alles über das schwule Leben.<br>
      <span class="ot">An einem Ort. Kostenlos.</span>
    </h1>
    <p style="font-size:clamp(1rem,2vw,1.18rem);color:var(--text-2);line-height:1.75;max-width:600px;margin:0 auto 2.5rem;">
      500+ ehrliche, lebensrettende Artikel über Gesundheit, Sicherheit, Kultur, Beziehungen, Nachtleben und mehr — geschrieben für die schwule Community, von der schwulen Community.
    </p>
    <div style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;">
      <a href="#artikel" style="background:var(--grad);color:white;padding:.75rem 1.75rem;border-radius:10px;font-weight:700;font-size:1rem;text-decoration:none;">Jetzt lesen</a>
      <a href="#themen" style="background:#1A1A1A;color:white;padding:.75rem 1.75rem;border-radius:10px;font-weight:700;font-size:1rem;text-decoration:none;border:1px solid #2E2E2E;">Themen erkunden</a>
    </div>
  </div>
</section>


  <!-- ═══════════════════════════════════════════════════
<section style="padding:40px 1rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);">
      HERO
   <div style="max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2rem;text-align:center;">
  ═══════════════════════════════════════════════════ -->
     <div><div class="ot" style="font-size:2.2rem;font-weight:900;font-family:'Space Grotesk',sans-serif;">500+</div><div style="color:var(--text-2);font-size:.9rem;margin-top:.25rem;">Artikel</div></div>
   <section style="position:relative;padding:180px 1rem 100px;overflow:hidden" aria-label="Hero">
     <div><div class="ot" style="font-size:2.2rem;font-weight:900;font-family:'Space Grotesk',sans-serif;">2M+</div><div style="color:var(--text-2);font-size:.9rem;margin-top:.25rem;">Monatliche Leser</div></div>
     <div class="orb orb-1" aria-hidden="true"></div>
     <div><div class="ot" style="font-size:2.2rem;font-weight:900;font-family:'Space Grotesk',sans-serif;">80+</div><div style="color:var(--text-2);font-size:.9rem;margin-top:.25rem;">Themen</div></div>
     <div class="orb orb-2" aria-hidden="true"></div>
     <div><div class="ot" style="font-size:2.2rem;font-weight:900;font-family:'Space Grotesk',sans-serif;">∞</div><div style="color:var(--text-2);font-size:.9rem;margin-top:.25rem;">Immer kostenlos</div></div>
     <div class="grid-bg" aria-hidden="true"></div>
  </div>
     <div class="noise" aria-hidden="true"></div>
</section>


    <div style="max-width:860px;margin:0 auto;text-align:center;position:relative">
<section id="funktionen" style="padding:80px 1rem;">
  <div style="max-width:1100px;margin:0 auto;">
    <div style="text-align:center;margin-bottom:48px;" class="fade-up">
      <div class="section-label">Warum AlphaX.Wiki?</div>
      <h2 style="font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin-top:.5rem;">Wissen, das wirklich zählt</h2>
    </div>
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;">
      <div class="feat-card fade-up"><div style="font-size:1.5rem;margin-bottom:.75rem;">🛡️</div><h3 style="font-size:1.1rem;font-weight:700;margin-bottom:.5rem;">Lebensrettendes Wissen</h3><p style="color:var(--text-2);font-size:.9rem;line-height:1.6;">Von PrEP und STI-Tests bis hin zu Zustimmung und psychischer Gesundheit — Wissen, das im echten Leben einen Unterschied macht.</p></div>
      <div class="feat-card fade-up"><div style="font-size:1.5rem;margin-bottom:.75rem;">📖</div><h3 style="font-size:1.1rem;font-weight:700;margin-bottom:.5rem;">Tiefgehende, ehrliche Artikel</h3><p style="color:var(--text-2);font-size:.9rem;line-height:1.6;">Kein Clickbait, keine Schlagzeilen. Echte, ausführliche Artikel, die komplexe Themen mit Sorgfalt behandeln.</p></div>
      <div class="feat-card fade-up"><div style="font-size:1.5rem;margin-bottom:.75rem;">🔍</div><h3 style="font-size:1.1rem;font-weight:700;margin-bottom:.5rem;">Vollständig durchsuchbar</h3><p style="color:var(--text-2);font-size:.9rem;line-height:1.6;">Finde in Sekunden genau das, was du brauchst — mit leistungsstarker Suche über alle 500+ Artikel.</p></div>
      <div class="feat-card fade-up"><div style="font-size:1.5rem;margin-bottom:.75rem;">✍️</div><h3 style="font-size:1.1rem;font-weight:700;margin-bottom:.5rem;">Community-Autoren</h3><p style="color:var(--text-2);font-size:.9rem;line-height:1.6;">Geschrieben von Menschen, die dieses Leben leben. Geprüft auf Richtigkeit. Nie von außenstehenden Journalisten.</p></div>
      <div class="feat-card fade-up"><div style="font-size:1.5rem;margin-bottom:.75rem;">🔒</div><h3 style="font-size:1.1rem;font-weight:700;margin-bottom:.5rem;">Standardmäßig privat</h3><p style="color:var(--text-2);font-size:.9rem;line-height:1.6;">Kein Konto erforderlich. Kein Tracking. Kein Urteil. Lies, was du brauchst — vollständig privat.</p></div>
      <div class="feat-card fade-up"><div style="font-size:1.5rem;margin-bottom:.75rem;">💙</div><h3 style="font-size:1.1rem;font-weight:700;margin-bottom:.5rem;">Immer kostenlos</h3><p style="color:var(--text-2);font-size:.9rem;line-height:1.6;">Keine Paywalls. Kein Premium-Abo. AlphaX.Wiki ist kostenlos und wird es immer bleiben.</p></div>
    </div>
  </div>
</section>


      <!-- Chip -->
<section id="themen" style="padding:80px 1rem;background:#0A0A0A;">
      <a href="https://alphax.wiki/prep-complete-guide"
  <div style="max-width:1100px;margin:0 auto;">
        style="display:inline-flex;align-items:center;gap:8px;background:rgba(255,106,33,.08);border:1px solid rgba(255,106,33,.22);border-radius:999px;padding:6px 14px 6px 8px;text-decoration:none;margin-bottom:2.5rem;transition:background .2s"
    <div style="text-align:center;margin-bottom:48px;" class="fade-up">
        onmouseover="this.style.background='rgba(255,106,33,.14)'" onmouseout="this.style.background='rgba(255,106,33,.08)'"
      <div class="section-label">Wissensbereiche</div>
        aria-label="New: Understanding PrEP: Role, Impact, and Considerations">
       <h2 style="font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin-top:.5rem;">Nach Kategorie erkunden</h2>
        <span style="background:var(--grad);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:3px 10px;border-radius:999px">New</span>
       <p style="color:var(--text-2);margin-top:.75rem;">Acht Wissensbereiche, die jeden Aspekt des schwulen Lebens abdecken.</p>
        <span style="font-size:.82rem;color:var(--text-2)">Understanding PrEP: Role, Impact, and Considerations — just published</span>
        <svg width="13" height="13" fill="none" stroke="var(--text-3)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
       </a>
 
      <!-- H1 -->
      <h1 style="font-size:clamp(2.8rem,6vw,5.2rem);font-weight:900;line-height:1.06;letter-spacing:-.03em;margin-bottom:1.5rem;color:var(--text)">
        Everything about gay life.<br>
        <span class="ot">In one place. Free.</span>
      </h1>
 
      <!-- Sub -->
       <p style="font-size:clamp(1rem,2vw,1.18rem);color:var(--text-2);line-height:1.75;max-width:560px;margin:0 auto 2.8rem">
        500+ honest, life-saving articles on health, safety, culture, relationships,
        nightlife and more — written for the gay community, by the gay community.
      </p>
 
      <!-- CTAs -->
      <div style="display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:3.5rem">
        <a href="https://alphax.wiki" class="btn-primary">
          Start Reading Free
          <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </a>
        <a href="#topics" class="btn-secondary">Browse Topics</a>
      </div>
 
      <!-- Trust row -->
      <div style="display:flex;flex-wrap:wrap;justify-content:center;gap:28px" role="list" aria-label="Trust indicators">
        <div style="display:flex;align-items:center;gap:7px" role="listitem">
          <svg width="14" height="14" fill="none" stroke="#3DDC84" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
          <span style="font-size:.8rem;color:var(--text-3)">No account required</span>
        </div>
        <div style="display:flex;align-items:center;gap:7px" role="listitem">
          <svg width="14" height="14" fill="none" stroke="#3DDC84" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
          <span style="font-size:.8rem;color:var(--text-3)">Always free</span>
        </div>
        <div style="display:flex;align-items:center;gap:7px" role="listitem">
          <svg width="14" height="14" fill="none" stroke="#3DDC84" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
          <span style="font-size:.8rem;color:var(--text-3)">No judgment</span>
        </div>
        <div style="display:flex;align-items:center;gap:7px" role="listitem">
          <svg width="14" height="14" fill="none" stroke="#3DDC84" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
          <span style="font-size:.8rem;color:var(--text-3)">2M+ monthly readers</span>
        </div>
      </div>
     </div>
     </div>
 
     <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;">
    <!-- Product mockup -->
       <a href="https://alphax.wiki/wiki/Category:Sexuelle_Gesundheit" class="topic-tile"><img src="https://alphax.wiki/images/c/c2/Sexual_health.png" style="width:100%;height:auto;display:block;" loading="lazy"><div style="padding:16px 18px;"><div style="font-weight:700;font-size:.95rem;">Sexuelle Gesundheit</div></div></a>
     <div style="max-width:760px;margin:5rem auto 0;position:relative" class="fu">
      <a href="https://alphax.wiki/wiki/Category:Dating,_Sex_%26_Beziehungen" class="topic-tile"><img src="https://alphax.wiki/images/6/6c/Dating_and_relationships.png" style="width:100%;height:auto;display:block;" loading="lazy"><div style="padding:16px 18px;"><div style="font-weight:700;font-size:.95rem;">Dating, Sex & Beziehungen</div></div></a>
      <!-- Orange glow behind mockup -->
      <a href="https://alphax.wiki/wiki/Category:Kink_und_BDSM" class="topic-tile"><img src="https://alphax.wiki/images/a/a1/Chain-image.png" style="width:100%;height:auto;display:block;" loading="lazy"><div style="padding:16px 18px;"><div style="font-weight:700;font-size:.95rem;">Kink und BDSM</div></div></a>
       <div style="position:absolute;inset:-30px;background:radial-gradient(ellipse 60% 40% at 50% 100%,rgba(255,106,33,.12) 0%,transparent 70%);pointer-events:none" aria-hidden="true"></div>
      <a href="https://alphax.wiki/wiki/Category:Kultur,_Geschichte_%26_Politik" class="topic-tile"><img src="https://alphax.wiki/images/2/25/Culture_History_Politics_Hero.png" style="width:100%;height:auto;display:block;" loading="lazy"><div style="padding:16px 18px;"><div style="font-weight:700;font-size:.95rem;">Kultur, Geschichte & Politik</div></div></a>
      <div class="mockup-wrap" style="position:relative">
      <a href="https://alphax.wiki/wiki/Category:Mode_%26_Visuelle_Signale" class="topic-tile"><img src="https://alphax.wiki/images/8/86/Screenshot_2026-04-26_at_15.06.46.png" style="width:100%;height:auto;display:block;" loading="lazy"><div style="padding:16px 18px;"><div style="font-weight:700;font-size:.95rem;">Mode & Visuelle Signale</div></div></a>
        <div class="mockup-bar">
      <a href="https://alphax.wiki/wiki/Category:Community_%26_Identit%C3%A4t" class="topic-tile"><img src="https://alphax.wiki/images/e/ed/Community_Identity_Hero.png" style="width:100%;height:auto;display:block;" loading="lazy"><div style="padding:16px 18px;"><div style="font-weight:700;font-size:.95rem;">Community & Identität</div></div></a>
          <div class="dot" style="background:#FF5F56"></div>
      <a href="https://alphax.wiki/wiki/Category:Drogen,_Partykultur_%26_Schadensminimierung" class="topic-tile"><img src="https://alphax.wiki/images/3/38/Drugs_Party_Culture_Hero.png" style="width:100%;height:auto;display:block;" loading="lazy"><div style="padding:16px 18px;"><div style="font-weight:700;font-size:.95rem;">Drogen, Partykultur & Schadensminimierung</div></div></a>
          <div class="dot" style="background:#FFBD2E"></div>
      <a href="https://alphax.wiki/wiki/Category:Lebensplanung" class="topic-tile"><img src="https://alphax.wiki/images/7/74/Life_Planning_Hero.jpg" style="width:100%;height:auto;display:block;" loading="lazy"><div style="padding:16px 18px;"><div style="font-weight:700;font-size:.95rem;">Lebensplanung</div></div></a>
          <div class="dot" style="background:#27C93F"></div>
          <div class="mockup-url">alphax.wiki</div>
          <svg width="14" height="14" fill="none" stroke="var(--text-3)" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
        </div>
        <div class="mockup-body">
          <div class="mock-search">
            <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
            Search: PrEP, coming out, darkroom, chemsex…
          </div>
          <div class="mock-article">
            <div class="mock-dot" style="background:rgba(255,106,33,.10);border:1px solid rgba(255,106,33,.20)">
              <svg width="15" height="15" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
            </div>
            <div><div class="mock-title">Understanding PrEP: Role, Impact, and Considerations</div><div class="mock-sub">12 min · Health &amp; Safety</div></div>
            <div class="mock-badge-g">Life-Saving</div>
          </div>
          <div class="mock-article">
            <div class="mock-dot" style="background:rgba(255,255,255,.04);border:1px solid var(--border)">
              <svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
            </div>
            <div><div class="mock-title">Darkroom Etiquette: How to Survive (and Thrive)</div><div class="mock-sub">7 min · Nightlife &amp; Culture</div></div>
            <div class="mock-badge">Culture</div>
          </div>
          <div class="mock-article">
            <div class="mock-dot" style="background:rgba(255,255,255,.04);border:1px solid var(--border)">
              <svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
            </div>
            <div><div class="mock-title">Chemsex: Risks, Support &amp; Getting Help</div><div class="mock-sub">15 min · Harm Reduction</div></div>
            <div class="mock-badge">Safety</div>
          </div>
          <div class="mock-article">
            <div class="mock-dot" style="background:rgba(255,255,255,.04);border:1px solid var(--border)">
              <svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
            </div>
            <div><div class="mock-title">Coming Out to Family: A Practical, Honest Guide</div><div class="mock-sub">10 min · Coming Out</div></div>
            <div class="mock-badge">Guide</div>
          </div>
        </div>
      </div>
     </div>
     </div>
   </section>
   </div>
</section>


<section style="padding:60px 1rem;background:linear-gradient(135deg,#1A0A00,#0D0D0D);border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:center;">
  <div style="max-width:700px;margin:0 auto;">
    <h2 style="font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;letter-spacing:-.02em;margin-bottom:.75rem;">Wissen, das Leben rettet</h2>
    <p style="color:var(--text-2);font-size:1.05rem;margin-bottom:2rem;">Jeder verdient Zugang zu ehrlichen, lebensrettenden Informationen über sein eigenes Leben.</p>
    <a href="#artikel" style="background:var(--grad);color:white;padding:.8rem 2rem;border-radius:10px;font-weight:700;font-size:1rem;text-decoration:none;">Artikel erkunden</a>
  </div>
</section>


  <!-- ═══════════════════════════════════════════════════
<section style="padding:80px 1rem;">
      MARQUEE
   <div style="max-width:1100px;margin:0 auto;">
  ═══════════════════════════════════════════════════ -->
    <div style="text-align:center;margin-bottom:48px;" class="fade-up">
   <div class="mq-wrap" style="border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0" aria-hidden="true">
      <div class="section-label">Einstiegspunkte</div>
    <div class="mq-track">
       <h2 style="font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin-top:.5rem;">Wähle deinen Weg</h2>
       <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Health &amp; Safety</span><span style="color:rgba(255,255,255,.06)">·</span>
    </div>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">PrEP &amp; HIV Prevention</span><span style="color:rgba(255,255,255,.06)">·</span>
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;">
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Darkroom Culture</span><span style="color:rgba(255,255,255,.06)">·</span>
       <a href="https://alphax.wiki/wiki/Category:Sexuelle_Gesundheit" class="path-card"><div style="font-size:1.4rem;margin-bottom:.5rem;">🏥</div><div style="font-weight:700;color:var(--text);font-size:.95rem;margin-bottom:.3rem;">Ich möchte gesund bleiben</div><div style="color:var(--text-3);font-size:.82rem;">Gesundheit, PrEP, STI-Tests, psychische Gesundheit</div></a>
       <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Coming Out</span><span style="color:rgba(255,255,255,.06)">·</span>
       <a href="https://alphax.wiki/wiki/Category:Dating,_Sex_%26_Beziehungen" class="path-card"><div style="font-size:1.4rem;margin-bottom:.5rem;">💬</div><div style="font-weight:700;color:var(--text);font-size:.95rem;margin-bottom:.3rem;">Ich navigiere Beziehungen</div><div style="color:var(--text-3);font-size:.82rem;">Dating, Intimität, Kommunikation, Grenzen</div></a>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Gay Relationships</span><span style="color:rgba(255,255,255,.06)">·</span>
       <a href="https://alphax.wiki/wiki/Category:Kink_und_BDSM" class="path-card"><div style="font-size:1.4rem;margin-bottom:.5rem;">🔗</div><div style="font-weight:700;color:var(--text);font-size:.95rem;margin-bottom:.3rem;">Ich erkunde Kink & BDSM</div><div style="color:var(--text-3);font-size:.82rem;">Zustimmung, Sicherheit, Rollen, Praktiken</div></a>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Mental Wellness</span><span style="color:rgba(255,255,255,.06)">·</span>
       <a href="https://alphax.wiki/wiki/Category:Community_%26_Identit%C3%A4t" class="path-card"><div style="font-size:1.4rem;margin-bottom:.5rem;">🏳️‍🌈</div><div style="font-weight:700;color:var(--text);font-size:.95rem;margin-bottom:.3rem;">Ich suche Community</div><div style="color:var(--text-3);font-size:.82rem;">Identität, Zugehörigkeit, Sichtbarkeit</div></a>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Chemsex Safety</span><span style="color:rgba(255,255,255,.06)">·</span>
       <a href="https://alphax.wiki/wiki/Category:Drogen,_Partykultur_%26_Schadensminimierung" class="path-card"><div style="font-size:1.4rem;margin-bottom:.5rem;">🌙</div><div style="font-weight:700;color:var(--text);font-size:.95rem;margin-bottom:.3rem;">Ich gehe feiern</div><div style="color:var(--text-3);font-size:.82rem;">Nachtleben, Schadensminimierung, Chemsex</div></a>
       <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">LGBTQ+ Rights</span><span style="color:rgba(255,255,255,.06)">·</span>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Nightlife &amp; Saunas</span><span style="color:rgba(255,255,255,.06)">·</span>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Identity &amp; Community</span><span style="color:rgba(255,255,255,.06)">·</span>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Dating &amp; Hookups</span><span style="color:rgba(255,255,255,.06)">·</span>
       <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Gay Travel</span><span style="color:rgba(255,255,255,.06)">·</span>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Health &amp; Safety</span><span style="color:rgba(255,255,255,.06)">·</span>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">PrEP &amp; HIV Prevention</span><span style="color:rgba(255,255,255,.06)">·</span>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Darkroom Culture</span><span style="color:rgba(255,255,255,.06)">·</span>
       <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Coming Out</span><span style="color:rgba(255,255,255,.06)">·</span>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Gay Relationships</span><span style="color:rgba(255,255,255,.06)">·</span>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Mental Wellness</span><span style="color:rgba(255,255,255,.06)">·</span>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Chemsex Safety</span><span style="color:rgba(255,255,255,.06)">·</span>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">LGBTQ+ Rights</span><span style="color:rgba(255,255,255,.06)">·</span>
       <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Nightlife &amp; Saunas</span><span style="color:rgba(255,255,255,.06)">·</span>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Identity &amp; Community</span><span style="color:rgba(255,255,255,.06)">·</span>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Dating &amp; Hookups</span><span style="color:rgba(255,255,255,.06)">·</span>
      <span style="margin:0 28px;font-size:.78rem;color:var(--text-3);font-weight:500">Gay Travel</span><span style="color:rgba(255,255,255,.06)">·</span>
     </div>
     </div>
   </div>
   </div>
</section>


 
<section id="artikel" style="padding:80px 1rem;background:#0A0A0A;">
  <!-- ═══════════════════════════════════════════════════
  <div style="max-width:1100px;margin:0 auto;">
      STATS
    <div style="margin-bottom:32px;" class="fade-up">
  ═══════════════════════════════════════════════════ -->
      <div class="section-label">Aktuell</div>
  <section style="padding:80px 1rem" aria-label="Statistics">
      <h2 style="font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin-top:.25rem;">Neueste Artikel</h2>
    <div style="max-width:900px;margin:0 auto">
      <div class="stat-strip fu" role="list">
        <div class="stat-cell" role="listitem"><div class="stat-n">500+</div><div style="font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;margin-top:.5rem">Articles</div></div>
        <div class="stat-cell" role="listitem"><div class="stat-n">2M+</div><div style="font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;margin-top:.5rem">Monthly Readers</div></div>
        <div class="stat-cell" role="listitem"><div class="stat-n">80+</div><div style="font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;margin-top:.5rem">Topics</div></div>
        <div class="stat-cell" role="listitem"><div class="stat-n">Free</div><div style="font-size:.74rem;color:var(--text-3);text-transform:uppercase;letter-spacing:.10em;margin-top:.5rem">Always</div></div>
      </div>
     </div>
     </div>
  </section>
    <div style="display:flex;gap:16px;overflow-x:auto;padding-bottom:1rem;scrollbar-width:none;">
 
      <a href="https://alphax.wiki/wiki/Entering_the_Gay_Scene_for_the_First_Time/de" class="art-card"><div style="padding:1.25rem;"><div class="tag">Community</div><div style="font-weight:700;font-size:.95rem;line-height:1.4;margin-bottom:.5rem;">Zum ersten Mal in die schwule Szene</div><div style="color:var(--text-2);font-size:.82rem;">Was dich erwartet, wie du dich vorbereitest und wo du anfängst.</div></div></a>
 
       <a href="https://alphax.wiki/wiki/Understanding_PrEP_and_Modern_HIV_Prevention/de" class="art-card"><div style="padding:1.25rem;"><div class="tag">Gesundheit</div><div style="font-weight:700;font-size:.95rem;line-height:1.4;margin-bottom:.5rem;">PrEP und moderne HIV-Prävention</div><div style="color:var(--text-2);font-size:.82rem;">Ein vollständiger Leitfaden zu PrEP und wie du Zugang bekommst.</div></div></a>
  <!-- ═══════════════════════════════════════════════════
      <a href="https://alphax.wiki/wiki/Body_Image_Pressure_in_Gay_Communities/de" class="art-card"><div style="padding:1.25rem;"><div class="tag">Identität</div><div style="font-weight:700;font-size:.95rem;line-height:1.4;margin-bottom:.5rem;">Körperbild-Druck in schwulen Communities</div><div style="color:var(--text-2);font-size:.82rem;">Über Schönheitsideale, Selbstwahrnehmung und Erwartungen.</div></div></a>
      FEATURES
      <a href="https://alphax.wiki/wiki/Understanding_Consent_in_Power_Exchange/de" class="art-card"><div style="padding:1.25rem;"><div class="tag">Kink & BDSM</div><div style="font-weight:700;font-size:.95rem;line-height:1.4;margin-bottom:.5rem;">Zustimmung in Machtdynamiken verstehen</div><div style="color:var(--text-2);font-size:.82rem;">Was Zustimmung wirklich bedeutet und wie sie praktiziert wird.</div></div></a>
  ═══════════════════════════════════════════════════ -->
      <a href="https://alphax.wiki/wiki/Loneliness,_Hookup_Culture,_and_Emotional_Well-Being/de" class="art-card"><div style="padding:1.25rem;"><div class="tag">Beziehungen</div><div style="font-weight:700;font-size:.95rem;line-height:1.4;margin-bottom:.5rem;">Einsamkeit, Hookup-Kultur und Wohlbefinden</div><div style="color:var(--text-2);font-size:.82rem;">Über die Spannung zwischen sexueller Freiheit und Verbundenheit.</div></div></a>
  <section style="padding:80px 1rem" id="features" aria-labelledby="feat-h">
      <a href="https://alphax.wiki/wiki/Navigating_Intimacy_After_Sexual_Trauma/de" class="art-card"><div style="padding:1.25rem;"><div class="tag">Gesundheit</div><div style="font-weight:700;font-size:.95rem;line-height:1.4;margin-bottom:.5rem;">Intimität nach einem sexuellen Trauma</div><div style="color:var(--text-2);font-size:.82rem;">Verarbeitung, Heilung und der Weg zurück zur Verbindung.</div></div></a>
    <div style="max-width:1100px;margin:0 auto">
      <div style="text-align:center;margin-bottom:56px" class="fu">
        <div class="eyebrow" style="justify-content:center;margin-bottom:16px">Why AlphaX Wiki</div>
        <h2 id="feat-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:800;color:var(--text);letter-spacing:-.025em;line-height:1.15">
          Built for the community.<br><span class="ot">Not an afterthought.</span>
        </h2>
      </div>
       <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px" class="g3 fu" data-d="1">
        <div class="feat-card fu" data-d="1">
          <div class="feat-icon"><svg width="20" height="20" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg></div>
          <div class="feat-title">Life-Saving Knowledge</div>
          <div class="feat-body">From HIV prevention to chemsex harm reduction — some articles don't just inform, they protect. Written with clinical accuracy and zero shame.</div>
        </div>
        <div class="feat-card fu" data-d="2">
          <div class="feat-icon"><svg width="20" height="20" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg></div>
          <div class="feat-title">Deep, Honest Articles</div>
          <div class="feat-body">No watered-down advice. Rich long-form articles that treat the reader as an intelligent adult navigating a real life — without heteronormative assumptions.</div>
        </div>
        <div class="feat-card fu" data-d="3">
          <div class="feat-icon"><svg width="20" height="20" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-4.35-4.35"/></svg></div>
          <div class="feat-title">Find What You Need Fast</div>
          <div class="feat-body">Search 500+ articles instantly. From PrEP to polyamory, darkroom etiquette to coming out at 40 — it's all indexed and searchable.</div>
        </div>
        <div class="feat-card fu" data-d="4">
          <div class="feat-icon"><svg width="20" height="20" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div>
          <div class="feat-title">Built for the Community</div>
          <div class="feat-body">Written by people who live this life. No journalists parachuting in. Real knowledge from real experience, reviewed for accuracy.</div>
        </div>
        <div class="feat-card fu" data-d="5">
          <div class="feat-icon"><svg width="20" height="20" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div>
          <div class="feat-title">Private by Default</div>
          <div class="feat-body">No account. No tracking your reads. No social logins. Come, read what you need, and leave. Your business stays your business.</div>
        </div>
        <div class="feat-card fu" data-d="6">
          <div class="feat-icon"><svg width="20" height="20" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div>
          <div class="feat-title">Forever Free</div>
          <div class="feat-body">No paywalls. No premium tiers. No "unlock for $9/month." Every article, available to everyone — because this knowledge shouldn't have a price tag.</div>
        </div>
      </div>
     </div>
     </div>
   </section>
   </div>
 
</section>


  <!-- ═══════════════════════════════════════════════════
<section style="padding:80px 1rem;">
      TOPICS
  <div style="max-width:1100px;margin:0 auto;">
  ═══════════════════════════════════════════════════ -->
    <div style="text-align:center;margin-bottom:40px;" class="fade-up">
  <section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" id="topics" aria-labelledby="top-h">
      <div class="section-label">Kuratiert</div>
    <div style="max-width:1100px;margin:0 auto">
      <h2 style="font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin-top:.25rem;">Auswahl der Redaktion</h2>
      <div style="display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:44px" class="fu">
        <div>
          <div class="eyebrow" style="margin-bottom:14px">Browse Topics</div>
          <h2 id="top-h" style="font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--text);letter-spacing:-.025em">80+ subjects covered</h2>
        </div>
        <a href="https://alphax.wiki/topics" style="font-size:.85rem;color:var(--text-3);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .2s"
          onmouseover="this.style.color='var(--orange)'" onmouseout="this.style.color='var(--text-3)'">
          View all topics <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </a>
      </div>
      <div class="topic-grid fu" data-d="1">
        <a href="https://alphax.wiki/health-safety" class="topic-tile" aria-label="Health and Safety — 68 articles">
          <div class="topic-icon" style="background:rgba(255,106,33,.10);border:1px solid rgba(255,106,33,.20)"><svg width="15" height="15" fill="none" stroke="var(--orange)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg></div>
          <div class="topic-name">Health &amp; Safety</div><div class="topic-count">68 articles</div>
        </a>
        <a href="https://alphax.wiki/relationships" class="topic-tile" aria-label="Relationships — 54 articles">
          <div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg></div>
          <div class="topic-name">Relationships &amp; Dating</div><div class="topic-count">54 articles</div>
        </a>
        <a href="https://alphax.wiki/nightlife" class="topic-tile" aria-label="Nightlife — 41 articles">
          <div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg></div>
          <div class="topic-name">Nightlife &amp; Culture</div><div class="topic-count">41 articles</div>
        </a>
        <a href="https://alphax.wiki/coming-out" class="topic-tile" aria-label="Coming Out — 37 articles">
          <div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg></div>
          <div class="topic-name">Coming Out</div><div class="topic-count">37 articles</div>
        </a>
        <a href="https://alphax.wiki/mental-health" class="topic-tile" aria-label="Mental Wellness — 48 articles">
          <div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.5 12.75l6 6 9-13.5"/></svg></div>
          <div class="topic-name">Mental Wellness</div><div class="topic-count">48 articles</div>
        </a>
        <a href="https://alphax.wiki/identity" class="topic-tile" aria-label="Community and Identity — 44 articles">
          <div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg></div>
          <div class="topic-name">Community &amp; Identity</div><div class="topic-count">44 articles</div>
        </a>
        <a href="https://alphax.wiki/chemsex" class="topic-tile" aria-label="Chemsex — 31 articles">
          <div class="topic-icon" style="background:rgba(255,106,33,.08);border:1px solid rgba(255,106,33,.18)"><svg width="15" height="15" fill="none" stroke="var(--orange)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg></div>
          <div class="topic-name">Chemsex &amp; Harm Reduction</div><div class="topic-count">31 articles</div>
        </a>
        <a href="https://alphax.wiki/rights" class="topic-tile" aria-label="Legal Rights — 29 articles">
          <div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/></svg></div>
          <div class="topic-name">Legal &amp; Rights</div><div class="topic-count">29 articles</div>
        </a>
        <a href="https://alphax.wiki/dating-apps" class="topic-tile"><div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg></div><div class="topic-name">Dating Apps</div><div class="topic-count">22 articles</div></a>
        <a href="https://alphax.wiki/sex-education" class="topic-tile"><div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg></div><div class="topic-name">Sex Education</div><div class="topic-count">35 articles</div></a>
        <a href="https://alphax.wiki/travel" class="topic-tile"><div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div class="topic-name">Gay Travel</div><div class="topic-count">19 articles</div></a>
        <a href="https://alphax.wiki/found-family" class="topic-tile"><div class="topic-icon" style="background:rgba(255,255,255,.05);border:1px solid var(--border)"><svg width="15" height="15" fill="none" stroke="var(--text-2)" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/></svg></div><div class="topic-name">Found Family</div><div class="topic-count">17 articles</div></a>
      </div>
     </div>
     </div>
  </section>
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;">
 
      <a href="https://alphax.wiki/wiki/Sexual_Health_in_the_Gay_Community/de" class="ed-card"><div class="tag">Gesundheit</div><div style="font-weight:700;font-size:.95rem;line-height:1.4;color:var(--text);">Sexuelle Gesundheit in der schwulen Community</div></a>
 
      <a href="https://alphax.wiki/wiki/What_Is_BDSM/de" class="ed-card"><div class="tag">Kink & BDSM</div><div style="font-weight:700;font-size:.95rem;line-height:1.4;color:var(--text);">Was ist BDSM?</div></a>
  <!-- ═══════════════════════════════════════════════════
      <a href="https://alphax.wiki/wiki/Body_Diversity_and_Attraction_in_Gay_Communities/de" class="ed-card"><div class="tag">Identität</div><div style="font-weight:700;font-size:.95rem;line-height:1.4;color:var(--text);">Körpervielfalt und Anziehung in schwulen Communities</div></a>
      LIFE-SAVING CALLOUT
       <a href="https://alphax.wiki/wiki/Understanding_Routine_STI_Testing_in_Gay_Communities/de" class="ed-card"><div class="tag">Gesundheit</div><div style="font-weight:700;font-size:.95rem;line-height:1.4;color:var(--text);">Routinemäßige STI-Tests in schwulen Communities</div></a>
  ═══════════════════════════════════════════════════ -->
      <a href="https://alphax.wiki/wiki/First_Time_at_a_Private_Gay_Sex_Party/de" class="ed-card"><div class="tag">Nachtleben</div><div style="font-weight:700;font-size:.95rem;line-height:1.4;color:var(--text);">Erstes Mal auf einer privaten schwulen Sexparty</div></a>
  <section class="cta-band" style="padding:80px 1rem" id="about" aria-labelledby="ls-h">
       <a href="https://alphax.wiki/wiki/Recovering_Sexual_Confidence_After_Relationship_Breakups/de" class="ed-card"><div class="tag">Beziehungen</div><div style="font-weight:700;font-size:.95rem;line-height:1.4;color:var(--text);">Sexuelles Selbstvertrauen nach einer Trennung</div></a>
    <div style="max-width:820px;margin:0 auto;text-align:center;position:relative" class="fu">
      <div style="width:52px;height:52px;border-radius:14px;background:rgba(255,106,33,.12);border:1px solid rgba(255,106,33,.22);display:flex;align-items:center;justify-content:center;margin:0 auto 22px">
        <svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
        </svg>
       </div>
      <h2 id="ls-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--text);letter-spacing:-.025em;margin-bottom:14px;line-height:1.15">
        Knowledge that saves lives.
      </h2>
      <p style="font-size:1.05rem;color:var(--text-2);max-width:540px;margin:0 auto 34px;line-height:1.75">
        From HIV prevention to recognising the risks of chemsex — some of these articles can change the course of a night, a relationship, or a life. No account. No judgment. Ever.
      </p>
       <a href="https://alphax.wiki/articles" class="btn-primary" style="margin:0 auto">
        Start Reading Free
        <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
      </a>
     </div>
     </div>
   </section>
   </div>
 
</section>
 
  <!-- ═══════════════════════════════════════════════════
      CHOOSE YOUR PATH
  ═══════════════════════════════════════════════════ -->
  <section style="padding:80px 1rem" id="articles" aria-labelledby="path-h">
    <div style="max-width:1100px;margin:0 auto">
 
      <div style="text-align:center;margin-bottom:56px" class="fu">
        <div class="eyebrow" style="justify-content:center;margin-bottom:16px">Start Here</div>
        <h2 id="path-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--text);letter-spacing:-.025em;margin-bottom:12px">
          Choose Your Path
        </h2>
        <p style="color:var(--text-2);font-size:1rem;max-width:480px;margin:0 auto;line-height:1.7">
          Not sure where to begin? Pick the path that fits where you are right now.
        </p>
      </div>
 
      <!-- 5 path cards: 3 top + 2 bottom -->
      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px" class="g3 fu" data-d="1">
 
        <a href="https://alphax.wiki/Entering_the_Gay_Scene_for_the_First_Time" class="path-card" aria-label="I'm New — Just Curious">
          <div class="path-num">01</div>
          <div class="path-icon-wrap">
            <svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
          </div>
          <div class="path-title">I'm New / Just Curious</div>
          <div class="path-desc">Community basics, health, consent &amp; finding your people.</div>
          <div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
        </a>
 
        <a href="https://alphax.wiki/Fetish_%26_Kink_Library" class="path-card" aria-label="I Want to Explore Kink">
          <div class="path-num">02</div>
          <div class="path-icon-wrap">
            <svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z"/></svg>
          </div>
          <div class="path-title">I Want to Explore Kink</div>
          <div class="path-desc">BDSM, fetishes, leather culture &amp; power dynamics.</div>
          <div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
        </a>
 
        <a href="https://alphax.wiki/Dynamics_%26_Relationships" class="path-card" aria-label="Improve My Relationship">
          <div class="path-num">03</div>
          <div class="path-icon-wrap">
            <svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
          </div>
          <div class="path-title">Improve My Relationship</div>
          <div class="path-desc">Communication, trust, non-monogamy &amp; intimacy.</div>
          <div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
        </a>
 
      </div>
 
      <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:14px" class="g2 fu" data-d="2">
 
        <a href="https://alphax.wiki/Safety_%26_Consent" class="path-card path-card-wide" aria-label="I Care About Safety">
          <div class="path-num">04</div>
          <div class="path-icon-wrap">
            <svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
          </div>
          <div class="path-title">I Care About Safety</div>
          <div class="path-desc">Harm reduction, safe sex, PrEP, BDSM safety &amp; consent.</div>
          <div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
        </a>


        <a href="https://alphax.wiki/Advanced_Practices" class="path-card path-card-wide" aria-label="I Want Advanced Knowledge">
<section style="padding:80px 1rem;background:#0A0A0A;">
          <div class="path-num">05</div>
  <div style="max-width:1100px;margin:0 auto;">
          <div class="path-icon-wrap">
    <div style="text-align:center;margin-bottom:48px;" class="fade-up">
            <svg width="22" height="22" fill="none" stroke="var(--orange)" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
      <div class="section-label">Erfahrungsberichte</div>
          </div>
      <h2 style="font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin-top:.5rem;">Was Leser sagen</h2>
          <div class="path-title">I Want Advanced Knowledge</div>
          <div class="path-desc">Psychology, advanced BDSM, identity &amp; queer history.</div>
          <div class="path-cta">Explore <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
        </a>
 
      </div>
     </div>
     </div>
  </section>
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;">
 
       <div class="testi fade-up"><p style="color:var(--text-2);font-size:.95rem;line-height:1.7;margin-bottom:1.25rem;">"Der Artikel über PrEP hat mir buchstäblich das Leben gerettet. Ich wusste nicht mal, was es war, bevor ich AlphaX.Wiki gefunden habe."</p><div style="display:flex;align-items:center;gap:.75rem;"><div style="width:38px;height:38px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;">M</div><div><div style="font-weight:600;font-size:.9rem;">Markus</div><div style="color:var(--text-3);font-size:.8rem;">Berlin, Deutschland</div></div></div></div>
 
      <div class="testi fade-up"><p style="color:var(--text-2);font-size:.95rem;line-height:1.7;margin-bottom:1.25rem;">"Als ich mich geoutet habe, wusste ich nicht, wo ich anfangen sollte. Die Artikel über Identität haben mir geholfen, mich weniger allein zu fühlen."</p><div style="display:flex;align-items:center;gap:.75rem;"><div style="width:38px;height:38px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;">T</div><div><div style="font-weight:600;font-size:.9rem;">Thomas</div><div style="color:var(--text-3);font-size:.8rem;">Hamburg, Deutschland</div></div></div></div>
  <!-- ═══════════════════════════════════════════════════
      <div class="testi fade-up"><p style="color:var(--text-2);font-size:.95rem;line-height:1.7;margin-bottom:1.25rem;">"Endlich ehrliche Informationen über Chemsex — kein Urteil, kein Moralisieren, nur praktisches Wissen, das wirklich hilft."</p><div style="display:flex;align-items:center;gap:.75rem;"><div style="width:38px;height:38px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;">F</div><div><div style="font-weight:600;font-size:.9rem;">Florian</div><div style="color:var(--text-3);font-size:.8rem;">Wien, Österreich</div></div></div></div>
      LATEST ARTICLES  –  horizontal scroll
  ═══════════════════════════════════════════════════ -->
  <section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" aria-labelledby="latest-h">
    <div style="max-width:1100px;margin:0 auto">
 
       <div style="display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px">
        <div>
          <div style="font-size:.73rem;font-weight:700;color:var(--orange);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px">&#8212; Fresh &amp; Recent</div>
          <h2 id="latest-h" style="font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--text);letter-spacing:-.025em">Latest Articles</h2>
        </div>
        <div style="display:flex;align-items:center;gap:8px">
          <div style="position:relative">
            <input id="latest-search-input" type="text" placeholder="Search latest…" style="background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 14px 9px 36px;color:var(--text);font-size:.88rem;width:200px;outline:none" />
            <svg style="position:absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.5" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35"/></svg>
          </div>
          <button onclick="scrollLatest(-1)" style="width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center">&#8249;</button>
          <button onclick="scrollLatest(1)" style="width:38px;height:38px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center">&#8250;</button>
        </div>
      </div>
 
      <div id="latest-deck" style="display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:none">
        <a href="https://alphax.wiki/Impact_of_Dating_Apps_on_Gay_Life" class="latest-card">
          <div class="latest-title">Impact of Dating Apps on Gay Life</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Dating</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/The_Loneliness_Epidemic_No_One_Talks_About_%E2%80%94_and_Why_It%E2%80%99s_Killing_Us" class="latest-card">
          <div class="latest-title">The Loneliness Epidemic No One Talks About — and Why It’s Killing Us</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Identity</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Food_Play" class="latest-card">
          <div class="latest-title">Food Play</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Kink</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Neoprene_Fetish" class="latest-card">
          <div class="latest-title">Neoprene Fetish</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Watersports" class="latest-card">
          <div class="latest-title">Watersports</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Boots_Fetish" class="latest-card">
          <div class="latest-title">Boots Fetish</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Tattoos_Fetish" class="latest-card">
          <div class="latest-title">Tattoos Fetish</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Piercings_Fetish" class="latest-card">
          <div class="latest-title">Piercings Fetish</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Spandex_and_Lycra_Fetish" class="latest-card">
          <div class="latest-title">Spandex and Lycra Fetish</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Masks_Fetish" class="latest-card">
          <div class="latest-title">Masks Fetish</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Uniforms_Fetish" class="latest-card">
          <div class="latest-title">Uniforms Fetish</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Socks_and_Used_Clothing_Fetish" class="latest-card">
          <div class="latest-title">Socks and Used Clothing Fetish</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Hands_and_Gloves_Fetish" class="latest-card">
          <div class="latest-title">Hands and Gloves Fetish</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Muscle_Worship" class="latest-card">
          <div class="latest-title">Muscle Worship</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Armpits_Fetish" class="latest-card">
          <div class="latest-title">Armpits Fetish</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Hair_Fetish" class="latest-card">
          <div class="latest-title">Hair Fetish</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Sneakers_and_Sportswear_Fetish" class="latest-card">
          <div class="latest-title">Sneakers and Sportswear Fetish</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Underwear_Fetish" class="latest-card">
          <div class="latest-title">Underwear Fetish</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Sweat_and_Musk_Fetish" class="latest-card">
          <div class="latest-title">Sweat and Musk Fetish</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
        <a href="https://alphax.wiki/Latex_and_Rubber_Fetish" class="latest-card">
          <div class="latest-title">Latex and Rubber Fetish</div>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto">
            <span class="tag t-white">Fetish</span>
            <div class="latest-date">2026</div>
          </div>
        </a>
      </div>
 
     </div>
     </div>
   </section>
   </div>
</section>


<section id="ueber" style="padding:80px 1rem;border-top:1px solid var(--border);text-align:center;">
  <div style="max-width:560px;margin:0 auto;">
    <div class="section-label">Newsletter</div>
    <h2 style="font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin-top:.5rem;margin-bottom:.75rem;">Bleib informiert.</h2>
    <p style="color:var(--text-2);margin-bottom:2rem;">Tritt 50.000+ Lesern bei. Wöchentliche Highlights, kein Spam, immer kostenlos.</p>
    <form style="display:flex;gap:.75rem;max-width:420px;margin:0 auto;" onsubmit="return false;">
      <input type="email" placeholder="Deine E-Mail" style="flex:1;background:#1A1A1A;border:1px solid var(--border);border-radius:8px;padding:.7rem 1rem;color:white;font-size:.95rem;outline:none;">
      <button type="submit" style="background:var(--grad);color:white;border:none;padding:.7rem 1.4rem;border-radius:8px;font-weight:700;cursor:pointer;">Abonnieren</button>
    </form>
  </div>
</section>


  <!-- ═══════════════════════════════════════════════════
</main>
      EDITOR'S SELECTION
  ═══════════════════════════════════════════════════ -->
  <section style="padding:80px 1rem" aria-labelledby="editor-h">
    <div style="max-width:1100px;margin:0 auto">


      <div style="display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:44px" class="fu">
<footer style="border-top:1px solid var(--border);padding:3rem 1rem 2rem;background:#0D0D0D;">
        <div>
  <div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:3rem;margin-bottom:2.5rem;">
          <div class="eyebrow" style="margin-bottom:14px">Curated Reads</div>
    <div>
          <h2 id="editor-h" style="font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--text);letter-spacing:-.025em">Editor's Selection</h2>
      <img src="https://alphax.wiki/images/7/7a/Alphax_Wiki_logo_new.png" alt="AlphaX Wiki" style="height:30px;margin-bottom:1rem;">
        </div>
      <p style="color:var(--text-2);font-size:.9rem;line-height:1.6;max-width:260px;">Eine freie, unabhängige Wissensplattform für die schwule Community.</p>
        <a href="https://alphax.wiki/Start_Here" style="font-size:.85rem;color:var(--text-3);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .2s"
          onmouseover="this.style.color='var(--orange)'" onmouseout="this.style.color='var(--text-3)'">
          View all <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </a>
      </div>
 
      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px" class="g3 fu" data-d="1">
 
        <a href="https://alphax.wiki/Aftercare_in_BDSM" class="art-card">
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
            <span class="tag t-orange">Editor's Pick</span>
            <span style="font-size:.73rem;color:var(--text-3)">Safety</span>
          </div>
          <div class="art-title">Aftercare in BDSM</div>
          <div class="art-body">Why aftercare matters, what it looks like in practice, and how to give and receive it properly.</div>
          <div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
        </a>
 
        <a href="https://alphax.wiki/Hookup_Culture_in_Gay_Communities" class="art-card">
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
            <span class="tag t-orange">Editor's Pick</span>
            <span style="font-size:.73rem;color:var(--text-3)">Culture</span>
          </div>
          <div class="art-title">Hookup Culture in Gay Communities</div>
          <div class="art-body">The sociology, the psychology, and the real-world dynamics of hookup culture in gay life.</div>
          <div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
        </a>
 
        <a href="https://alphax.wiki/Leather_Culture_%26_Community" class="art-card">
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
            <span class="tag t-orange">Editor's Pick</span>
            <span style="font-size:.73rem;color:var(--text-3)">Culture</span>
          </div>
          <div class="art-title">Leather Culture &amp; Community</div>
          <div class="art-body">History, codes, events and how leather culture shaped gay identity across decades.</div>
          <div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
        </a>
 
        <a href="https://alphax.wiki/Chosen_Family" class="art-card">
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
            <span class="tag t-orange">Editor's Pick</span>
            <span style="font-size:.73rem;color:var(--text-3)">Community</span>
          </div>
          <div class="art-title">Chosen Family</div>
          <div class="art-body">What chosen family means, how to build one, and why it's one of the most powerful forces in queer life.</div>
          <div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
        </a>
 
        <a href="https://alphax.wiki/Chemsex_%E2%80%94_A_Complete_Guide" class="art-card">
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
            <span class="tag t-orange">Editor's Pick</span>
            <span style="font-size:.73rem;color:var(--text-3)">Harm Reduction</span>
          </div>
          <div class="art-title">Chemsex — A Complete Guide</div>
          <div class="art-body">Everything you need to know about chemsex: the substances, the risks, the scene, and how to get help.</div>
          <div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
        </a>
 
        <a href="https://alphax.wiki/Why_Most_%E2%80%9CSubs%E2%80%9D_Fail_%E2%80%94_And_What_Real_Submission_Actually_Looks_Like" class="art-card">
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px">
            <span class="tag t-orange">Editor's Pick</span>
            <span style="font-size:.73rem;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em">BDSM</span>
          </div>
          <div class="art-title">Why Most "Subs" Fail — And What Real Submission Actually Looks Like</div>
          <div class="art-body">Most guys who call themselves "submissive" aren't submissive at all. What real submission actually requires — and why most people avoid it.</div>
          <div class="art-cta">Read <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg></div>
        </a>
 
      </div>
     </div>
     </div>
  </section>
     <div>
 
       <div style="font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:1rem;">Gesundheit</div>
 
       <div style="display:flex;flex-direction:column;gap:.6rem;">
  <!-- ═══════════════════════════════════════════════════
         <a href="https://alphax.wiki/wiki/Category:Sexuelle_Gesundheit">Sexuelle Gesundheit</a>
      EXPLORE ALL KNOWLEDGE AREAS
         <a href="https://alphax.wiki/wiki/Category:HIV-Pr%C3%A4vention_%26_Behandlung">HIV-Prävention</a>
  ═══════════════════════════════════════════════════ -->
         <a href="https://alphax.wiki/wiki/Category:STI-Aufkl%C3%A4rung_%26_Tests">STI-Tests</a>
  <section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" aria-labelledby="areas-h">
         <a href="https://alphax.wiki/wiki/Category:Psychische_Gesundheit_%26_Sexualit%C3%A4t">Psychische Gesundheit</a>
     <div style="max-width:1100px;margin:0 auto">
 
       <div style="text-align:center;margin-bottom:52px" class="fu">
        <div class="eyebrow" style="justify-content:center;margin-bottom:16px">Full Library</div>
        <h2 id="areas-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--text);letter-spacing:-.025em;margin-bottom:12px">
          Explore All Knowledge Areas
        </h2>
        <p style="color:var(--text-2);font-size:1rem;max-width:440px;margin:0 auto;line-height:1.7">
          Eight pillars covering every corner of gay life — from safety to culture, kink to identity.
        </p>
      </div>
 
       <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px" class="fu" data-d="1" id="areas-grid">
        <style>@media(max-width:900px){#areas-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){#areas-grid{grid-template-columns:1fr}}</style>
 
        <a href="https://alphax.wiki/Safety_%26_Consent" class="area-card">
          <div class="area-icon">🛡️</div>
          <div class="area-name">Safety &amp; Consent</div>
          <div class="area-desc">PrEP, harm reduction, safe sex, consent frameworks</div>
          <div class="area-arrow">→</div>
        </a>
 
         <a href="https://alphax.wiki/Fetish_%26_Kink_Library" class="area-card">
          <div class="area-icon">🔥</div>
          <div class="area-name">Fetish &amp; Kink Library</div>
          <div class="area-desc">BDSM, leather, fetishes, gear and play</div>
          <div class="area-arrow">→</div>
        </a>
 
         <a href="https://alphax.wiki/Dynamics_%26_Relationships" class="area-card">
          <div class="area-icon">💑</div>
          <div class="area-name">Dynamics &amp; Relationships</div>
          <div class="area-desc">Non-monogamy, communication, intimacy, trust</div>
          <div class="area-arrow">→</div>
        </a>
 
         <a href="https://alphax.wiki/Psychology_%26_Identity" class="area-card">
          <div class="area-icon">🧠</div>
          <div class="area-name">Psychology &amp; Identity</div>
          <div class="area-desc">Mental health, shame, self-acceptance, coming out</div>
          <div class="area-arrow">→</div>
        </a>
 
        <a href="https://alphax.wiki/Advanced_Practices" class="area-card">
          <div class="area-icon">⚡</div>
          <div class="area-name">Advanced Practices</div>
          <div class="area-desc">Deep BDSM, edge play, queer theory, history</div>
          <div class="area-arrow">→</div>
        </a>
 
        <a href="https://alphax.wiki/Culture_%26_Nightlife" class="area-card">
          <div class="area-icon">🌃</div>
          <div class="area-name">Culture &amp; Nightlife</div>
          <div class="area-desc">Bars, saunas, darkrooms, pride, gay scenes</div>
          <div class="area-arrow">→</div>
        </a>
 
        <a href="https://alphax.wiki/Drugs_%26_Harm_Reduction" class="area-card">
          <div class="area-icon">💊</div>
          <div class="area-name">Drugs &amp; Harm Reduction</div>
          <div class="area-desc">Chemsex, substance risks, support resources</div>
          <div class="area-arrow">→</div>
        </a>
 
         <a href="https://alphax.wiki/Fashion_%26_Visual_Signaling" class="area-card">
          <div class="area-icon">👗</div>
          <div class="area-name">Fashion &amp; Visual Signaling</div>
          <div class="area-desc">Dress codes, hanky codes, identity through style</div>
          <div class="area-arrow">→</div>
        </a>
 
      </div>
 
      <div style="text-align:center;margin-top:36px" class="fu" data-d="1">
        <a href="https://alphax.wiki/Start_Here" class="btn-primary" style="margin:0 auto">
          Browse the Full Library
          <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
        </a>
       </div>
       </div>
     </div>
     </div>
  </section>
     <div>
 
       <div style="font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:1rem;">Lebensstil</div>
 
      <div style="display:flex;flex-direction:column;gap:.6rem;">
  <!-- ═══════════════════════════════════════════════════
         <a href="https://alphax.wiki/wiki/Category:Dating,_Sex_%26_Beziehungen">Dating & Beziehungen</a>
      TESTIMONIALS
        <a href="https://alphax.wiki/wiki/Category:Kink_und_BDSM">Kink & BDSM</a>
  ═══════════════════════════════════════════════════ -->
        <a href="https://alphax.wiki/wiki/Category:Kultur,_Geschichte_%26_Politik">Kultur & Geschichte</a>
  <section style="padding:80px 1rem;background:#111111;border-top:1px solid var(--border);border-bottom:1px solid var(--border)" aria-labelledby="voices-h">
        <a href="https://alphax.wiki/wiki/Category:Mode_%26_Visuelle_Signale">Mode & Stil</a>
     <div style="max-width:1100px;margin:0 auto">
       <div style="text-align:center;margin-bottom:48px" class="fu">
        <div class="eyebrow" style="justify-content:center;margin-bottom:14px">Community Voices</div>
        <h2 id="voices-h" style="font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;color:var(--text);letter-spacing:-.025em">What readers say</h2>
      </div>
      <div class="q-grid fu" data-d="1">
        <figure class="q-card">
          <blockquote><p class="q-text">"The PrEP article was the first time I fully understood how it worked. I started taking it the following week. This site genuinely changed how I protect myself."</p></blockquote>
          <figcaption style="display:flex;align-items:center;gap:12px">
            <div style="width:36px;height:36px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;color:#fff;flex-shrink:0;box-shadow:var(--glow-sm)" aria-hidden="true">M</div>
            <div><div style="font-weight:700;font-size:.87rem;color:var(--text)">Marco, 24</div><div style="font-size:.75rem;color:var(--text-3)">Berlin</div></div>
          </figcaption>
         </figure>
        <figure class="q-card">
          <blockquote><p class="q-text">"When I first came out I was completely lost. AlphaX gave me the vocabulary, the context, and the confidence to start building my life in the gay community."</p></blockquote>
          <figcaption style="display:flex;align-items:center;gap:12px">
            <div style="width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;color:var(--text-2);flex-shrink:0" aria-hidden="true">J</div>
            <div><div style="font-weight:700;font-size:.87rem;color:var(--text)">James, 19</div><div style="font-size:.75rem;color:var(--text-3)">Manchester</div></div>
          </figcaption>
        </figure>
        <figure class="q-card">
          <blockquote><p class="q-text">"I sent the chemsex article to a friend who was struggling. He called the next day to say he'd booked a support session. No other resource did that for us."</p></blockquote>
          <figcaption style="display:flex;align-items:center;gap:12px">
            <div style="width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;color:var(--text-2);flex-shrink:0" aria-hidden="true">R</div>
            <div><div style="font-weight:700;font-size:.87rem;color:var(--text)">Rafi, 31</div><div style="font-size:.75rem;color:var(--text-3)">Tel Aviv</div></div>
          </figcaption>
        </figure>
       </div>
       </div>
     </div>
     </div>
  </section>
     <div>
 
       <div style="font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:1rem;">Website</div>
 
       <div style="display:flex;flex-direction:column;gap:.6rem;">
  <!-- ═══════════════════════════════════════════════════
         <a href="https://alphax.wiki/wiki/Homepage/de">Startseite</a>
      NEWSLETTER
         <a href="https://alphax.wiki/wiki/Special:AllPages">Alle Artikel</a>
  ═══════════════════════════════════════════════════ -->
         <a href="https://alphax.wiki/radmin">Admin</a>
  <section style="padding:100px 1rem" aria-labelledby="nl-h">
     <div style="max-width:480px;margin:0 auto;text-align:center" class="fu">
       <div style="width:2px;height:40px;background:var(--grad);margin:0 auto 28px;border-radius:1px;box-shadow:var(--glow-sm)" aria-hidden="true"></div>
      <div class="eyebrow" style="justify-content:center;margin-bottom:16px">Weekly Newsletter</div>
      <h2 id="nl-h" style="font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;color:var(--text);letter-spacing:-.025em;line-height:1.12;margin-bottom:12px">
        Stay in the <span class="ot">know.</span>
      </h2>
      <p style="color:var(--text-2);font-size:.95rem;line-height:1.72;margin-bottom:30px">
        New articles every week. Health guides, deep-dives, community stories. No spam, unsubscribe anytime.
      </p>
       <form onsubmit="handleSub(event)" novalidate style="display:flex;flex-direction:column;gap:10px">
        <label for="nl" class="sr-only">Email address</label>
        <input id="nl" type="email" placeholder="your@email.com" class="nl-in" required aria-required="true" autocomplete="email">
         <button type="submit" class="btn-primary" style="justify-content:center;width:100%">
          <span id="nl-span">Subscribe Free</span>
        </button>
      </form>
      <p style="font-size:.74rem;color:var(--text-3);margin-top:12px">Join 50,000+ readers. Free forever.</p>
    </div>
  </section>
 
</main>
 
 
<!-- ═══════════════════════════════════════════════════
    FOOTER
═══════════════════════════════════════════════════ -->
<footer style="border-top:1px solid var(--border);padding:3rem 1rem 2rem;background:#0D0D0D" aria-label="Footer">
  <div style="max-width:1100px;margin:0 auto">
    <div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:3rem" class="gfooter">
      <div>
         <a href="https://alphax.wiki" style="display:inline-flex;margin-bottom:16px" aria-label="AlphaX Wiki">
          <img src="https://alphax.wiki/images/7/7a/Alphax_Wiki_logo_new.png" alt="AlphaX Wiki" style="height:42px;width:auto;object-fit:contain">
        </a>
         <p style="font-size:.82rem;color:var(--text-3);line-height:1.7;max-width:240px">
          The world's biggest free gay lifestyle knowledge hub. Life-saving articles for everyone, always free.
        </p>
       </div>
       </div>
      <nav aria-label="Health">
        <div style="font-size:.68rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px">Health</div>
        <ul style="list-style:none;display:flex;flex-direction:column;gap:9px">
          <li><a href="https://alphax.wiki/prep"          class="ft-link">PrEP Guide</a></li>
          <li><a href="https://alphax.wiki/hiv"          class="ft-link">HIV &amp; AIDS</a></li>
          <li><a href="https://alphax.wiki/sti"          class="ft-link">STI Prevention</a></li>
          <li><a href="https://alphax.wiki/chemsex"      class="ft-link">Chemsex Safety</a></li>
          <li><a href="https://alphax.wiki/mental-health" class="ft-link">Mental Health</a></li>
        </ul>
      </nav>
      <nav aria-label="Lifestyle">
        <div style="font-size:.68rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px">Lifestyle</div>
        <ul style="list-style:none;display:flex;flex-direction:column;gap:9px">
          <li><a href="https://alphax.wiki/coming-out"    class="ft-link">Coming Out</a></li>
          <li><a href="https://alphax.wiki/relationships"  class="ft-link">Relationships</a></li>
          <li><a href="https://alphax.wiki/nightlife"      class="ft-link">Nightlife</a></li>
          <li><a href="https://alphax.wiki/dating-apps"    class="ft-link">Dating Apps</a></li>
          <li><a href="https://alphax.wiki/travel"        class="ft-link">Gay Travel</a></li>
        </ul>
      </nav>
      <nav aria-label="Site">
        <div style="font-size:.68rem;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px">Site</div>
        <ul style="list-style:none;display:flex;flex-direction:column;gap:9px">
          <li><a href="https://alphax.wiki/about"    class="ft-link">Our Mission</a></li>
          <li><a href="https://alphax.wiki/write"    class="ft-link">Contribute</a></li>
          <li><a href="https://alphax.wiki/privacy"  class="ft-link">Privacy</a></li>
          <li><a href="https://alphax.wiki/sitemap"  class="ft-link">Sitemap</a></li>
          <li><a href="https://alphax.wiki/radmin"  class="ft-link">Admin Login</a></li>
        </ul>
      </nav>
    </div>
    <div class="div-line" style="margin-bottom:20px"></div>
    <div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px">
      <p style="font-size:.78rem;color:var(--text-3)">&copy; 2025 AlphaX Wiki. Free knowledge for everyone. Always.</p>
      <p style="font-size:.78rem;color:var(--text-3)">Made with love for the community</p>
     </div>
     </div>
  </div>
  <div style="border-top:1px solid var(--border);padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;">
    <div style="color:var(--text-3);font-size:.82rem;">© 2024 AlphaX.Wiki · Alle Inhalte dienen ausschließlich Bildungszwecken.</div>
    <div style="color:var(--text-3);font-size:.82rem;">Kein Konto · Kein Tracking · Immer kostenlos</div>
   </div>
   </div>
</footer>
</footer>
<style>
  .ft-link { font-size:.84rem;color:var(--text-3);text-decoration:none;transition:color .2s; }
  .ft-link:hover { color:var(--orange); }
  .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }
</style>
<script>
  /* Progress bar */
  const prog = document.getElementById('prog');
  window.addEventListener('scroll', () => {
    const h = document.documentElement;
    prog.style.width = (h.scrollTop / (h.scrollHeight - h.clientHeight) * 100) + '%';
  }, { passive: true });
  /* Fade-up */
  const io = new IntersectionObserver(entries => {
    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
  }, { threshold: 0.06, rootMargin: '0px 0px -36px 0px' });
  document.querySelectorAll('.fu').forEach(el => io.observe(el));
  /* Smooth anchor scroll */
  document.querySelectorAll('a[href^="#"]').forEach(a => {
    a.addEventListener('click', e => {
      const t = document.querySelector(a.getAttribute('href'));
      if (!t) return;
      e.preventDefault();
      window.scrollTo({ top: t.getBoundingClientRect().top + scrollY - 80, behavior: 'smooth' });
    });
  });
  /* Newsletter */
  function handleSub(e) {
    e.preventDefault();
    const inp = document.getElementById('nl');
    const span = document.getElementById('nl-span');
    if (!inp.value) return;
    span.textContent = 'Subscribed!';
    e.target.querySelector('button').style.background = 'linear-gradient(135deg,#3DDC84,#2BB870)';
    e.target.querySelector('button').style.boxShadow = '0 0 20px rgba(61,220,132,.3)';
    inp.value = '';
    setTimeout(() => {
      span.textContent = 'Subscribe Free';
      e.target.querySelector('button').style.background = '';
      e.target.querySelector('button').style.boxShadow = '';
    }, 3500);
  }
  /* Latest deck scroll */
  function scrollLatest(dir) {
    document.getElementById('latest-deck').scrollBy({ left: dir * 520, behavior: 'smooth' }
  function filterLatestCards(query) {
    const q = query.toLowerCase().trim();
    const cards = document.querySelectorAll('#latest-deck .latest-card');
    cards.forEach(function(card) {
      const title = card.querySelector('.latest-title');
      const text = title ? title.textContent.toLowerCase() : '';
      card.style.display = (!q || text.includes(q)) ? '' : 'none';
    });
  // Attach search to latest input
  document.addEventListener('DOMContentLoaded', function() {
    var inp = document.getElementById('latest-search-input');
    if (inp) inp.addEventListener('input', function() { filterLatestCards(this.value); });
  });
  });
  }
</script>


<script>
<script>
  /* Progress bar */
window.addEventListener('scroll',()=>{
  const prog = document.getElementById('prog');
  const p=(window.scrollY/(document.body.scrollHeight-window.innerHeight))*100;
  window.addEventListener('scroll', () => {
  document.getElementById('progress').style.width=p+'%';
    const h = document.documentElement;
});
    prog.style.width = (h.scrollTop / (h.scrollHeight - h.clientHeight) * 100) + '%';
const obs=new IntersectionObserver(e=>e.forEach(i=>{if(i.isIntersecting)i.target.classList.add('visible');}),{threshold:.1});
  }, { passive: true });
document.querySelectorAll('.fade-up').forEach(el=>obs.observe(el));
 
function toggleTheme(){
  /* Fade-up */
   const isLight=document.body.classList.toggle('light-mode');
  const io = new IntersectionObserver(entries => {
   document.body.classList.toggle('dark-mode',!isLight);
    entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
  localStorage.setItem('theme',isLight?'light':'dark');
  }, { threshold: 0.06, rootMargin: '0px 0px -36px 0px' });
  document.getElementById('theme-toggle').textContent=isLight?'☀️':'🌙';
  document.querySelectorAll('.fu').forEach(el => io.observe(el));
}
 
(function(){
   /* Smooth anchor scroll */
  const saved=localStorage.getItem('theme');
   document.querySelectorAll('a[href^="#"]').forEach(a => {
  const prefersLight=window.matchMedia('(prefers-color-scheme:light)').matches;
    a.addEventListener('click', e => {
  const useLight=saved?saved==='light':prefersLight;
      const t = document.querySelector(a.getAttribute('href'));
  document.body.classList.add(useLight?'light-mode':'dark-mode');
      if (!t) return;
  document.addEventListener('DOMContentLoaded',function(){
      e.preventDefault();
    const btn=document.getElementById('theme-toggle');
      window.scrollTo({ top: t.getBoundingClientRect().top + scrollY - 80, behavior: 'smooth' });
     if(btn)btn.textContent=useLight?'☀️':'🌙';
     });
   });
   });
 
})();
  /* Newsletter */
  function handleSub(e) {
    e.preventDefault();
    const inp = document.getElementById('nl');
    const span = document.getElementById('nl-span');
    if (!inp.value) return;
    span.textContent = 'Subscribed!';
    e.target.querySelector('button').style.background = 'linear-gradient(135deg,#3DDC84,#2BB870)';
    e.target.querySelector('button').style.boxShadow = '0 0 20px rgba(61,220,132,.3)';
    inp.value = '';
    setTimeout(() => {
      span.textContent = 'Subscribe Free';
      e.target.querySelector('button').style.background = '';
      e.target.querySelector('button').style.boxShadow = '';
    }, 3500);
  }
 
  /* Latest deck scroll */
  function scrollLatest(dir) {
    document.getElementById('latest-deck').scrollBy({ left: dir * 520, behavior: 'smooth' });
  }
 
 
</script>
</script>
</html>
</html>

Latest revision as of 10:55, 8 May 2026

500+ Artikel · Immer kostenlos

Alles über das schwule Leben.
An einem Ort. Kostenlos.

500+ ehrliche, lebensrettende Artikel über Gesundheit, Sicherheit, Kultur, Beziehungen, Nachtleben und mehr — geschrieben für die schwule Community, von der schwulen Community.

500+
Artikel
2M+
Monatliche Leser
80+
Themen
∞
Immer kostenlos
Warum AlphaX.Wiki?

Wissen, das wirklich zählt

🛡️

Lebensrettendes Wissen

Von PrEP und STI-Tests bis hin zu Zustimmung und psychischer Gesundheit — Wissen, das im echten Leben einen Unterschied macht.

📖

Tiefgehende, ehrliche Artikel

Kein Clickbait, keine Schlagzeilen. Echte, ausführliche Artikel, die komplexe Themen mit Sorgfalt behandeln.

🔍

Vollständig durchsuchbar

Finde in Sekunden genau das, was du brauchst — mit leistungsstarker Suche über alle 500+ Artikel.

✍️

Community-Autoren

Geschrieben von Menschen, die dieses Leben leben. Geprüft auf Richtigkeit. Nie von außenstehenden Journalisten.

🔒

Standardmäßig privat

Kein Konto erforderlich. Kein Tracking. Kein Urteil. Lies, was du brauchst — vollständig privat.

💙

Immer kostenlos

Keine Paywalls. Kein Premium-Abo. AlphaX.Wiki ist kostenlos und wird es immer bleiben.

Wissen, das Leben rettet

Jeder verdient Zugang zu ehrlichen, lebensrettenden Informationen über sein eigenes Leben.

Artikel erkunden
Erfahrungsberichte

Was Leser sagen

"Der Artikel über PrEP hat mir buchstäblich das Leben gerettet. Ich wusste nicht mal, was es war, bevor ich AlphaX.Wiki gefunden habe."

M
Markus
Berlin, Deutschland

"Als ich mich geoutet habe, wusste ich nicht, wo ich anfangen sollte. Die Artikel über Identität haben mir geholfen, mich weniger allein zu fühlen."

T
Thomas
Hamburg, Deutschland

"Endlich ehrliche Informationen über Chemsex — kein Urteil, kein Moralisieren, nur praktisches Wissen, das wirklich hilft."

F
Florian
Wien, Österreich
Newsletter

Bleib informiert.

Tritt 50.000+ Lesern bei. Wöchentliche Highlights, kein Spam, immer kostenlos.

Retrieved from "https://alphax.wiki/index.php?title=Homepage/de&oldid=18407"