Homepage/de: Difference between revisions

From BigBro Know
Jump to navigation Jump to search
← Older edit
Admin (talk | contribs)
Bureaucrats, Interface administrators, Administrators
9,027 edits
VisualWikitext
Fix broken internal links: remove erroneous /wiki/ path prefix (articlepath is /$1)
Day mode: cohesive light theme (parity with EN; dark untouched)
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>
<html>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<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 rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Anton&display=swap" rel="stylesheet">
<style>
<style>
    :root{--bg:#0D0D0D;--surface:#1A1A1A;--border:#2E2E2E;--orange:#FF6A21;--text:#FFFFFF;--text-2:#999999;--text-3:#666666;--grad:linear-gradient(135deg,#FF6A21,#FF8C42);}
:root{--bg:#0D0D0D;--bg2:#1A1A1A;--panel:#1A1A1A;--card:#1A1A1A;--cb:#2E2E2E;--line:#2E2E2E;--chov:rgba(255,121,0,.06);--chb:rgba(255,121,0,.45);--or:#FF7900;--or2:#FFA24A;--tx:#FFFFFF;--tx2:#999999;--tx3:#666666;--grad:linear-gradient(135deg,#FF7900 0%,#FFA24A 100%);--glow:0 0 20px rgba(255,121,0,.4);--disp:'Anton',sans-serif;--head:'Archivo',sans-serif;}
    *{margin:0;padding:0;box-sizing:border-box;}
*{margin:0;padding:0;box-sizing:border-box;}
    html{scroll-behavior:smooth;}
html{scroll-behavior:smooth;}
    body{background:var(--bg);color:var(--text);font-family:'Inter',sans-serif;line-height:1.6;}
body{background:var(--bg);color:var(--tx);font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.6;overflow-x:hidden;}
    h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;}
h1,h2,h3,h4{font-family:var(--head),sans-serif;}
    #progress{position:fixed;top:0;left:0;height:2px;background:var(--grad);z-index:9999;width:0;transition:width .1s;}
#prog{position:fixed;top:0;left:0;right:0;height:2px;background:var(--grad);z-index:9999;transform-origin:left;transform:scaleX(0);transition:transform .1s;}
    .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);}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 2.5rem;height:60px;background:rgba(13,13,13,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.05);}
    .nav-link{color:#999;text-decoration:none;font-size:.9rem;font-weight:500;transition:color .2s;}
.nl{color:var(--tx2);text-decoration:none;font-size:.875rem;font-weight:500;transition:color .15s;}
    .nav-link:hover{color:#fff;}
.nl:hover{color:var(--tx);}
    .btn-nav{background:var(--grad);color:white;padding:.45rem 1.1rem;border-radius:8px;font-size:.85rem;font-weight:700;text-decoration:none;}
.nav-right{display:flex;align-items:center;gap:.75rem;}
    .ot{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.btn-p{background:var(--grad);color:#fff;padding:.5rem 1.25rem;border-radius:8px;font-size:.875rem;font-weight:700;text-decoration:none;transition:opacity .15s,transform .15s;}
    .lang-switcher{display:flex;align-items:center;gap:3px;background:#111;border:1px solid #222;border-radius:8px;padding:4px;}
.btn-p:hover{opacity:.9;transform:translateY(-1px);}
    .lang-btn{padding:4px 9px;border-radius:5px;font-size:11px;font-weight:700;text-decoration:none;letter-spacing:.04em;transition:all .15s;}
.lsw{display:flex;gap:2px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:3px;}
    .lang-btn.active{background:var(--orange);color:white;}
.lb{padding:3px 8px;border-radius:5px;font-size:11px;font-weight:700;text-decoration:none;letter-spacing:.05em;transition:all .15s;}
    .lang-btn.available{color:#666;}
.lb.on{background:var(--or);color:#fff;}
    .lang-btn.available:hover{color:#fff;}
.lb.av{color:#555;}
    .lang-btn.soon{color:#2E2E2E;cursor:default;}
.lb.av:hover{color:#aaa;}
    .feat-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.75rem;}
.lb.dim{color:#222;cursor:default;}
    .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;}
.tbtn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:8px;padding:5px 9px;cursor:pointer;font-size:14px;line-height:1;transition:background .15s;color:var(--tx2);}
    .topic-tile:hover{border-color:var(--orange);transform:translateY(-2px);}
.tbtn:hover{background:rgba(255,255,255,.09);}
    .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;}
.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 1rem 80px;position:relative;overflow:hidden;}
    .art-card:hover{border-color:var(--orange);}
.h-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 50%,rgba(255,121,0,.08) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 80% 20%,rgba(255,162,74,.06) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 50% 80%,rgba(255,121,0,.07) 0%,transparent 60%);pointer-events:none;}
    .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;}
.h-grid{position:absolute;inset:0;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:64px 64px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 100%);pointer-events:none;}
    .ed-card:hover{border-color:var(--orange);}
.h-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,121,0,.1);border:1px solid rgba(255,121,0,.25);border-radius:100px;padding:.35rem 1rem;margin-bottom:2rem;font-size:.78rem;font-weight:600;color:var(--or);letter-spacing:.03em;}
    .testi{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2rem;}
.h-dot{width:6px;height:6px;border-radius:50%;background:var(--or);animation:pulse 2s infinite;}
    .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;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
    .path-card:hover{border-color:var(--orange);}
.h-title{font-size:clamp(3rem,7.5vw,6rem);font-weight:900;line-height:.98;letter-spacing:-.04em;margin-bottom:1.5rem;}
    footer a{color:#999;text-decoration:none;font-size:.9rem;transition:color .2s;}
.gt{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
    footer a:hover{color:#fff;}
.h-sub{font-size:clamp(1rem,2vw,1.15rem);color:var(--tx2);line-height:1.75;max-width:520px;margin:0 auto 2.5rem;}
    .fade-up{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s;}
.h-ctas{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;}
    .fade-up.visible{opacity:1;transform:none;}
.hcp{background:var(--grad);color:#fff;padding:.85rem 2.25rem;border-radius:12px;font-weight:700;font-size:1rem;text-decoration:none;box-shadow:0 0 40px rgba(255,121,0,.35);transition:transform .2s,box-shadow .2s;}
    .tag{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);font-weight:600;margin-bottom:.5rem;}
.hcp:hover{transform:translateY(-2px);box-shadow:0 0 60px rgba(255,121,0,.5);}
    .section-label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);font-weight:700;}
.hcs{background:rgba(255,255,255,.07);color:#fff;padding:.85rem 2.25rem;border-radius:12px;font-weight:600;font-size:1rem;text-decoration:none;border:1px solid rgba(255,255,255,.1);transition:background .2s;}
    body.light-mode{--bg:#F7F7F5;--surface:#FFFFFF;--border:#E4E4E0;--text:#111111;--text-2:#555555;--text-3:#888888;}
.hcs:hover{background:rgba(255,255,255,.11);}
    body.light-mode .nav{background:rgba(247,247,245,.95);}
.mq-wrap{overflow:hidden;padding:.75rem 0;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);}
    @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);}}
.mq-track{display:flex;animation:mq 35s linear infinite;}
.mq-track:hover{animation-play-state:paused;}
.mq-item{flex-shrink:0;padding:.4rem 2rem;font-size:.78rem;font-weight:600;color:var(--tx3);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.mq-dot{flex-shrink:0;width:3px;height:3px;border-radius:50%;background:var(--or);margin:auto;opacity:.35;}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.05);}
.stat{background:var(--bg);padding:2.5rem 2rem;text-align:center;}
.stat-n{font-size:2.8rem;font-weight:900;font-family:var(--head),sans-serif;}
.stat-l{color:var(--tx2);font-size:.875rem;margin-top:.25rem;}
.sec{padding:100px 1rem;}
.sec-in{max-width:1100px;margin:0 auto;}
.sec-hd{text-align:center;margin-bottom:56px;}
.stag{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or);font-weight:700;}
.stitle{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;letter-spacing:-.03em;margin-top:.4rem;}
.ssub{color:var(--tx2);margin-top:.75rem;font-size:1rem;}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05);border-radius:20px;overflow:hidden;}
.bc{background:var(--bg2);padding:2.25rem;transition:background .2s;}
.bc:hover{background:rgba(255,121,0,.04);}
.bw{grid-column:span 2;}
.b-ic{font-size:2rem;margin-bottom:1rem;}
.b-ti{font-size:1.05rem;font-weight:700;margin-bottom:.5rem;font-family:var(--head),sans-serif;}
.b-de{color:var(--tx2);font-size:.875rem;line-height:1.65;}
.tg{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;}
.tc{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;text-decoration:none;border:1px solid rgba(255,255,255,.06);transition:transform .25s,border-color .25s;}
.tc:hover{transform:translateY(-4px);border-color:rgba(255,121,0,.3);}
.tc img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.tc:hover img{transform:scale(1.05);}
.to{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.15) 55%,transparent 100%);display:flex;align-items:flex-end;padding:1.25rem;}
.tn{font-weight:700;font-size:1rem;color:#fff;font-family:var(--head),sans-serif;}
.art-sc{display:flex;gap:14px;overflow-x:auto;padding-bottom:1rem;scrollbar-width:none;}
.art-sc::-webkit-scrollbar{display:none;}
.ac{flex-shrink:0;width:280px;background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:1.5rem;text-decoration:none;transition:border-color .2s,background .2s,transform .2s;}
.ac:hover{border-color:var(--chb);background:var(--chov);transform:translateY(-2px);}
.atag{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or);font-weight:700;margin-bottom:.75rem;}
.ati{font-weight:700;color:var(--tx);font-size:.95rem;line-height:1.4;margin-bottom:.5rem;font-family:var(--head),sans-serif;}
.ade{color:var(--tx2);font-size:.82rem;line-height:1.5;}
.edg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;}
.ec{background:var(--card);border:1px solid var(--cb);border-radius:12px;padding:1.25rem;text-decoration:none;transition:border-color .2s,background .2s;display:flex;flex-direction:column;gap:.5rem;}
.ec:hover{border-color:var(--chb);background:var(--chov);}
.etag{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--or);font-weight:700;}
.eti{font-weight:700;color:var(--tx);font-size:.95rem;line-height:1.4;font-family:var(--head),sans-serif;}
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;}
.pc{background:var(--card);border:1px solid var(--cb);border-radius:14px;padding:1.5rem;text-decoration:none;display:block;transition:border-color .2s,background .2s,transform .2s;}
.pc:hover{border-color:var(--chb);background:var(--chov);transform:translateY(-2px);}
.pi{font-size:1.5rem;margin-bottom:.75rem;}
.pt{font-weight:700;color:var(--tx);font-size:.9rem;margin-bottom:.3rem;font-family:var(--head),sans-serif;}
.ps{color:var(--tx3);font-size:.78rem;line-height:1.4;}
.cyp-sub{color:var(--tx2);font-size:1rem;max-width:600px;margin:1rem auto 0;font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:400;line-height:1.6;}
.cyp{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;}
.cypw{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.cyc{background:var(--card);border:1px solid var(--cb);border-radius:18px;padding:26px;text-decoration:none;display:block;transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;}
.cyc:hover{border-color:var(--chb);background:var(--chov);transform:translateY(-3px);box-shadow:0 12px 40px rgba(255,121,0,.08);}
.cyn{font-size:.8rem;letter-spacing:.14em;color:var(--tx3);font-weight:700;margin-bottom:16px;}
.cyi{display:inline-flex;width:48px;height:48px;border-radius:13px;background:rgba(255,121,0,.1);border:1px solid rgba(255,121,0,.28);align-items:center;justify-content:center;margin-bottom:20px;}
.cyt{font-weight:700;color:var(--tx);font-size:1.18rem;margin-bottom:.6rem;font-family:var(--head),sans-serif;letter-spacing:-.01em;line-height:1.25;}
.cyd{color:var(--tx2);font-size:.92rem;line-height:1.55;margin-bottom:1.1rem;}
.cye{color:var(--or);font-size:.9rem;font-weight:700;font-family:var(--head),sans-serif;}
.cyc:hover .cye{color:var(--or2);}
.cyc-w{display:flex;align-items:center;gap:22px;}
.cyc-w .cyn{margin-bottom:0;}
.cyc-w .cyi{margin-bottom:0;flex-shrink:0;}
.cyc-w .cyt{margin-bottom:0;max-width:170px;flex-shrink:0;}
.cyc-w .cyd{margin-bottom:0;flex:1;}
.cyc-w .cye{flex-shrink:0;}
@media(max-width:820px){.cyp,.cypw{grid-template-columns:1fr;}.cyc-w{flex-wrap:wrap;gap:14px;}.cyc-w .cyt{max-width:none;}.cyc-w .cyd{flex-basis:100%;}}
.ctab{background:linear-gradient(135deg,rgba(255,121,0,.12) 0%,rgba(255,121,0,.05) 100%);border-top:1px solid rgba(255,121,0,.15);border-bottom:1px solid rgba(255,121,0,.15);padding:80px 1rem;text-align:center;}
.tsg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.tsc{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:2rem;}
.tsq{font-size:3.5rem;line-height:.8;color:rgba(255,121,0,.2);font-family:var(--head),sans-serif;font-weight:900;margin-bottom:.5rem;}
.tst{color:var(--tx2);font-size:.95rem;line-height:1.75;margin-bottom:1.5rem;}
.tsa{display:flex;align-items:center;gap:.75rem;}
.tsav{width:40px;height:40px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;flex-shrink:0;}
.tsn{font-weight:700;font-size:.9rem;}
.tsc2{color:var(--tx3);font-size:.8rem;}
.nls{padding:100px 1rem;text-align:center;}
.nlf{display:flex;gap:.75rem;max-width:440px;margin:2rem auto 0;}
.nli{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:.8rem 1.1rem;color:#fff;font-size:.95rem;outline:none;transition:border-color .2s;}
.nli:focus{border-color:rgba(255,121,0,.4);}
.nlb{background:var(--grad);color:#fff;border:none;padding:.8rem 1.4rem;border-radius:10px;font-weight:700;font-size:.95rem;cursor:pointer;transition:opacity .15s;}
.nlb:hover{opacity:.9;}
.foot{border-top:1px solid rgba(255,255,255,.05);padding:4rem 1rem 2rem;background:var(--bg);}
.fg{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:3rem;margin-bottom:3rem;}
.fbp{color:var(--tx2);font-size:.875rem;line-height:1.6;max-width:240px;margin-top:.75rem;}
.fct{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3);font-weight:700;margin-bottom:1rem;}
.fl{display:flex;flex-direction:column;gap:.6rem;}
.fl a{color:var(--tx2);text-decoration:none;font-size:.875rem;transition:color .15s;}
.fl a:hover{color:var(--tx);}
.fb{max-width:1100px;margin:0 auto;border-top:1px solid rgba(255,255,255,.05);padding-top:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
.fb span{color:var(--tx3);font-size:.8rem;}
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s;}
.fade-up.in{opacity:1;transform:none;}
/* ===== DAY MODE — cohesive light theme (mirrors the dark palette; dark mode untouched) ===== */
body.light-mode{--bg:#F7F6F3;--bg2:#FFFFFF;--panel:#FFFFFF;--card:#FFFFFF;--cb:rgba(0,0,0,.09);--line:rgba(0,0,0,.10);--chov:rgba(255,121,0,.05);--chb:rgba(255,121,0,.40);--tx:#161513;--tx2:#575654;--tx3:#8A8985;}
/* Lift the forced-dark MediaWiki canvas to light (beats Common.css body/#content/.mw-parser-output !important via +1 class specificity or source order) */
body.light-mode,
body.light-mode #content,
body.light-mode .mw-body,
body.light-mode .mw-body-content,
body.light-mode #mw-content,
body.light-mode #mw-content-text,
body.light-mode #bodyContent,
body.light-mode .mw-parser-output{background:var(--bg)!important;color:var(--tx)!important;}
/* Homepage section headings: dark ink in day mode (Common.css forces them white) */
body.light-mode .mw-parser-output h1,
body.light-mode .mw-parser-output h2,
body.light-mode .mw-parser-output h3,
body.light-mode .mw-parser-output h4{color:var(--tx)!important;}
/* Chrome + components */
body.light-mode .nav{background:rgba(247,246,243,.9);border-bottom:1px solid var(--line);}
body.light-mode .lsw{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.08);}
body.light-mode .lb.av{color:#8A8985;}
body.light-mode .lb.dim{color:#C9C7C2;}
/* Nav/lang link hover: Common.css forces #fff !important — keep dark ink on light */
body.light-mode .nl:hover{color:var(--tx)!important;}
body.light-mode .lb.av:hover{color:var(--tx)!important;}
body.light-mode .tbtn{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.09);color:var(--tx2);}
body.light-mode .tbtn:hover{background:rgba(0,0,0,.07);}
body.light-mode .mq-wrap{border-top-color:rgba(0,0,0,.07);border-bottom-color:rgba(0,0,0,.07);}
body.light-mode .h-grid{background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);}
body.light-mode .hcs{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);color:var(--tx)!important;}
body.light-mode .hcs:hover{background:rgba(0,0,0,.07);border-color:rgba(255,121,0,.5);}
body.light-mode .stats{background:rgba(0,0,0,.08);}
body.light-mode .stat{background:var(--bg);}
body.light-mode .bento{background:rgba(0,0,0,.08);border-color:rgba(0,0,0,.06);}
body.light-mode .bc{background:var(--bg2);}
body.light-mode .bc:hover{background:var(--chov);box-shadow:inset 0 0 0 1px rgba(255,121,0,.22);}
body.light-mode .tc{border-color:rgba(0,0,0,.08);}
body.light-mode .ac,
body.light-mode .ec,
body.light-mode .pc,
body.light-mode .cyc,
body.light-mode .tsc{box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 16px -8px rgba(0,0,0,.10);}
body.light-mode .ac:hover,
body.light-mode .pc:hover,
body.light-mode .cyc:hover{box-shadow:0 18px 44px -22px rgba(255,121,0,.45);}
body.light-mode .nli{background:#fff;border-color:rgba(0,0,0,.15);color:var(--tx);}
body.light-mode .nli:focus{border-color:rgba(255,121,0,.5);}
body.light-mode .foot{background:var(--bg);border-top-color:rgba(0,0,0,.08);}
body.light-mode .fb{border-top-color:rgba(0,0,0,.08);}
body.light-mode #topics,
body.light-mode #articles{border-top-color:rgba(0,0,0,.06)!important;border-bottom-color:rgba(0,0,0,.06)!important;}
@media(max-width:900px){.bento{grid-template-columns:1fr;}.bw{grid-column:span 1;}.stats{grid-template-columns:repeat(2,1fr);}.fg{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.nav-links-wrap{display:none;}.fg{grid-template-columns:1fr;}}
 
/* BigBro Know Banner */
.bigbro-banner{width:100%;background:linear-gradient(135deg,#0D0D0D 0%,#1a0800 50%,#0D0D0D 100%);border-bottom:1px solid rgba(255,121,0,.2);padding:80px 2rem 80px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-top:60px;}
.bigbro-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(255,121,0,.12) 0%,transparent 70%);pointer-events:none;}
.bigbro-banner::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 10%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 10%,transparent 100%);pointer-events:none;}
.ab-inner{position:relative;z-index:1;text-align:center;max-width:900px;}
.ab-eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,121,0,.1);border:1px solid rgba(255,121,0,.3);border-radius:100px;padding:.3rem .9rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--or);margin-bottom:1.5rem;}
.ab-dot{width:6px;height:6px;border-radius:50%;background:var(--or);animation:pulse 2s infinite;}
.ab-logo{font-family:var(--head),sans-serif;font-size:clamp(3.5rem,8vw,6.5rem);font-weight:900;letter-spacing:-.05em;line-height:.9;margin-bottom:1rem;}
.ab-logo-a{background:linear-gradient(135deg,#FF7900,#FFA24A,#FFC178);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ab-logo-x{color:#fff;}
.ab-logo{margin-bottom:.35rem;}
.ab-know{font-family:var(--head),sans-serif;font-size:clamp(.9rem,2.4vw,1.35rem);font-weight:700;letter-spacing:.55em;text-indent:.55em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:1.4rem;}
.ab-tagline{font-size:clamp(1rem,2.5vw,1.3rem);color:rgba(255,255,255,.55);font-weight:400;letter-spacing:.02em;margin-bottom:2rem;line-height:1.5;}
.ab-cta{display:inline-flex;align-items:center;gap:.6rem;background:var(--grad);color:#fff;padding:.7rem 1.8rem;border-radius:10px;font-weight:700;font-size:.95rem;text-decoration:none;box-shadow:0 0 30px rgba(255,121,0,.3);transition:transform .2s,box-shadow .2s;}
.ab-cta:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(255,121,0,.5);}
.ab-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,121,0,.08) 0%,transparent 70%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;}
 
/* Enhanced modern styles */
.hero{padding-top:0 !important;}
.h-badge{animation:float 3s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hcp{position:relative;overflow:hidden;}
.hcp::after{content:'';position:absolute;top:-50%;left:-60%;width:200%;height:200%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.08),transparent);transform:translateX(-100%);transition:transform .6s;}
.hcp:hover::after{transform:translateX(60%);}
 
/* === bigbro.men unification layer (!important beats Vector skin heading/link rules) === */
h1,h2,h3,h4{font-family:var(--head)!important;letter-spacing:-.012em;}
.h-title{font-family:var(--disp)!important;font-weight:400;text-transform:uppercase;letter-spacing:.015em;line-height:.98;}
.stat-n,.tsq,.ab-logo{font-family:var(--disp)!important;font-weight:400;}
.stitle{color:var(--tx)!important;font-weight:800;}
.btn-p,.hcp,.nlb,.ab-cta,.lb.on{color:#0D0D0D!important;font-weight:800;}
.nav{border-bottom:1px solid var(--line);}
.stag,.atag,.etag,.cyn,.fct,.ab-eyebrow{font-weight:700;}
.ac:hover,.pc:hover,.cyc:hover{box-shadow:0 20px 50px -24px rgba(255,121,0,.5);}
.tc:hover{box-shadow:0 18px 44px -22px rgba(255,121,0,.55);}
.bc:hover{box-shadow:inset 0 0 0 1px rgba(255,121,0,.18);}
.hcp:hover,.ab-cta:hover{box-shadow:0 18px 60px -10px rgba(255,121,0,.6);}
.hcs:hover{border-color:rgba(255,121,0,.5);}
.btn-p:hover{box-shadow:0 12px 36px -12px rgba(255,121,0,.6);}
</style>
</style>


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


<nav class="nav">
<nav class="nav">
   <a href="/Homepage/de">
   <a href="/Homepage">
     <img src="/images/0/0c/BigBro_Know_logo.png" alt="BigBro Know Wiki" style="height:34px;width:auto;">
     <img src="/images/8/80/BigBro_mark.png" alt="BigBro Know" style="height:36px;width:auto;">
   </a>
   </a>
   <div style="display:flex;gap:2rem;">
   <div class="nav-links-wrap" style="display:flex;gap:2.5rem;">
     <a href="#funktionen" class="nav-link">Funktionen</a>
     <a href="#features" class="nl">Funktionen</a>
     <a href="#themen" class="nav-link">Themen</a>
     <a href="#topics" class="nl">Themen</a>
     <a href="#artikel" class="nav-link">Artikel</a>
     <a href="#articles" class="nl">Artikel</a>
     <a href="#ueber" class="nav-link">Über uns</a>
     <a href="#about" class="nl">Über uns</a>
   </div>
   </div>
   <div style="display:flex;align-items:center;gap:1rem;">
   <div class="nav-right">
     <div class="lang-switcher">
     <div class="lsw">
       <a href="/Homepage" class="lang-btn available">EN</a>
       <a href="/Homepage" class="lb av">EN</a>
       <a href="/Homepage/de" class="lang-btn active">DE</a>
       <a href="/Homepage/de" class="lb on">DE</a>
       <span class="lang-btn soon" title="Demnächst">FR</span>
       <a href="/Homepage/fr" class="lb av">FR</a>
       <span class="lang-btn soon" title="Demnächst">ES</span>
       <a href="/Homepage/es" class="lb av">ES</a>
       <span class="lang-btn soon" title="Demnächst">PT</span>
       <a href="/Homepage/pt" class="lb av">PT</a>
     </div>
     </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>
     <button class="tbtn" id="tbtn" onclick="toggleTheme()">🌙</button>
     <a href="/radmin" style="color:#555;text-decoration:none;font-size:.85rem;">Admin</a>
     <a href="/radmin" style="color:var(--tx3);text-decoration:none;font-size:.8rem;">Admin</a>
     <a href="#themen" class="btn-nav">Kostenlos erkunden</a>
     <a href="#topics" class="btn-p">Kostenlos erkunden</a>
   </div>
   </div>
</nav>
</nav>


<main>


<section style="position:relative;padding:160px 1rem 100px;overflow:hidden;text-align:center;">
<div class="bigbro-banner">
   <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 class="ab-glow"></div>
   <div style="max-width:800px;margin:0 auto;position:relative;">
   <div class="ab-inner">
     <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;">
     <div class="ab-eyebrow"><span class="ab-dot"></span> Kostenlos · Unabhängig · Immer offen</div>
      <span style="width:6px;height:6px;border-radius:50%;background:var(--orange);display:inline-block;"></span>
    <img src="/images/f/f9/BigBro_Know_logo_new.png" alt="BigBro Know" style="max-width:480px;width:80%;margin-bottom:1rem;">
      500+ Artikel · Immer kostenlos
    <p class="ab-tagline">Die freie Wissensplattform für die schwule Community</p>
    </div>
    <a href="/Start_Here" class="ab-cta">BigBro Know entdecken →</a>
    <h1 style="font-size:clamp(2.8rem,6vw,5.2rem);font-weight:900;line-height:1.06;letter-spacing:-.03em;margin-bottom:1.5rem;">
  </div>
      Alles über das schwule Leben.<br>
</div>
      <span class="ot">An einem Ort. Kostenlos.</span>
 
    </h1>
<section class="hero">
    <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;">
  <div class="h-bg"></div>
      500+ ehrliche, lebensrettende Artikel über Gesundheit, Sicherheit, Kultur, Beziehungen, Nachtleben und mehr — geschrieben für die schwule Community, von der schwulen Community.
  <div class="h-grid"></div>
    </p>
  <div class="h-badge"><span class="h-dot"></span>500+ Artikel · Immer kostenlos</div>
    <div style="display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;">
  <h1 class="h-title">Alles über<br>das schwule Leben.<br><span class="gt">An einem Ort. Kostenlos.</span></h1>
      <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>
  <p class="h-sub">500+ ehrliche, lebensrettende Artikel über Gesundheit, Sicherheit, Kultur, Beziehungen, Nachtleben und mehr — geschrieben für die schwule Community, von der schwulen Community.</p>
      <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 class="h-ctas">
    </div>
    <a href="#articles" class="hcp">Jetzt lesen</a>
    <a href="#topics" class="hcs">Themen erkunden</a>
   </div>
   </div>
</section>
</section>


<section style="padding:40px 1rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border);">
<div class="mq-wrap">
  <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 class="mq-track">
    <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>
    <span class="mq-item"><a href="/Category:HIV_Prevention_%26_Treatment" style="color:inherit;text-decoration:none;">HIV Prevention & Treatment</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Consent_%26_Negotiation" style="color:inherit;text-decoration:none;">Consent & Negotiation</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Communication_%26_Boundaries" style="color:inherit;text-decoration:none;">Communication & Boundaries</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Aging,_Relevance,_and_Shifting_Identity" style="color:inherit;text-decoration:none;">Aging, Relevance & Shifting Identity</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Culture" style="color:inherit;text-decoration:none;">Culture</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Body_Presentation" style="color:inherit;text-decoration:none;">Body Presentation</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Party_Drugs" style="color:inherit;text-decoration:none;">Party Drugs</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Trauma_%26_Recovery" style="color:inherit;text-decoration:none;">Trauma & Recovery</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Power_Dynamics" style="color:inherit;text-decoration:none;">Power Dynamics</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Hookups_vs._Dating" style="color:inherit;text-decoration:none;">Hookups vs. Dating</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Chosen_Family_and_Social_Belonging" style="color:inherit;text-decoration:none;">Chosen Family & Social Belonging</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:History" style="color:inherit;text-decoration:none;">History</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Style_as_Communication" style="color:inherit;text-decoration:none;">Style as Communication</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:STI_Awareness_%26_Testing" style="color:inherit;text-decoration:none;">STI Awareness & Testing</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Roles_%26_Archetypes" style="color:inherit;text-decoration:none;">Roles & Archetypes</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Sex,_Intimacy_%26_Connection" style="color:inherit;text-decoration:none;">Sex, Intimacy & Connection</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Online_Communities_vs._Physical_Communities" style="color:inherit;text-decoration:none;">Online Communities vs. Physical Communities</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Politics" style="color:inherit;text-decoration:none;">Politics</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Subculture_Aesthetics" style="color:inherit;text-decoration:none;">Subculture Aesthetics</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Body_Image_%26_Self-Perception" style="color:inherit;text-decoration:none;">Body Image & Self-Perception</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Risk_Awareness_%26_Safety" style="color:inherit;text-decoration:none;">Risk Awareness & Safety</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Belonging_Without_Centrality" style="color:inherit;text-decoration:none;">Belonging Without Centrality</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Symbols_%26_Accessories" style="color:inherit;text-decoration:none;">Symbols & Accessories</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Substance_Use_%26_Sexual_Contexts" style="color:inherit;text-decoration:none;">Substance Use & Sexual Contexts</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Digital_Kink_Culture" style="color:inherit;text-decoration:none;">Digital Kink Culture</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Identity_Performance_in_Dating_and_Social_Spaces" style="color:inherit;text-decoration:none;">Identity Performance in Dating & Social Spaces</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Aging_%26_Sexual_Health" style="color:inherit;text-decoration:none;">Aging & Sexual Health</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Emotional_Dynamics_in_Kink" style="color:inherit;text-decoration:none;">Emotional Dynamics in Kink</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Visibility,_Privacy,_and_Being_%22Out%22" style="color:inherit;text-decoration:none;">Visibility, Privacy & Being Out</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Communication_%26_Disclosure" style="color:inherit;text-decoration:none;">Communication & Disclosure</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Kink_in_Relationships" style="color:inherit;text-decoration:none;">Kink in Relationships</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:The_Role_of_Humor,_Irony,_and_Distance" style="color:inherit;text-decoration:none;">The Role of Humor, Irony & Distance</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Sexual_Function_%26_Mental_Health" style="color:inherit;text-decoration:none;">Sexual Function & Mental Health</a></span><span class="mq-dot"></span>
     <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>
     <span class="mq-item"><a href="/Category:HIV_Prevention_%26_Treatment" style="color:inherit;text-decoration:none;">HIV Prevention & Treatment</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Consent_%26_Negotiation" style="color:inherit;text-decoration:none;">Consent & Negotiation</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Communication_%26_Boundaries" style="color:inherit;text-decoration:none;">Communication & Boundaries</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Aging,_Relevance,_and_Shifting_Identity" style="color:inherit;text-decoration:none;">Aging, Relevance & Shifting Identity</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Culture" style="color:inherit;text-decoration:none;">Culture</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Body_Presentation" style="color:inherit;text-decoration:none;">Body Presentation</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Party_Drugs" style="color:inherit;text-decoration:none;">Party Drugs</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Trauma_%26_Recovery" style="color:inherit;text-decoration:none;">Trauma & Recovery</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Power_Dynamics" style="color:inherit;text-decoration:none;">Power Dynamics</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Hookups_vs._Dating" style="color:inherit;text-decoration:none;">Hookups vs. Dating</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Chosen_Family_and_Social_Belonging" style="color:inherit;text-decoration:none;">Chosen Family & Social Belonging</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:History" style="color:inherit;text-decoration:none;">History</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Style_as_Communication" style="color:inherit;text-decoration:none;">Style as Communication</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:STI_Awareness_%26_Testing" style="color:inherit;text-decoration:none;">STI Awareness & Testing</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Roles_%26_Archetypes" style="color:inherit;text-decoration:none;">Roles & Archetypes</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Sex,_Intimacy_%26_Connection" style="color:inherit;text-decoration:none;">Sex, Intimacy & Connection</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Online_Communities_vs._Physical_Communities" style="color:inherit;text-decoration:none;">Online Communities vs. Physical Communities</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Politics" style="color:inherit;text-decoration:none;">Politics</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Subculture_Aesthetics" style="color:inherit;text-decoration:none;">Subculture Aesthetics</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Body_Image_%26_Self-Perception" style="color:inherit;text-decoration:none;">Body Image & Self-Perception</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Risk_Awareness_%26_Safety" style="color:inherit;text-decoration:none;">Risk Awareness & Safety</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Belonging_Without_Centrality" style="color:inherit;text-decoration:none;">Belonging Without Centrality</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Symbols_%26_Accessories" style="color:inherit;text-decoration:none;">Symbols & Accessories</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Substance_Use_%26_Sexual_Contexts" style="color:inherit;text-decoration:none;">Substance Use & Sexual Contexts</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Digital_Kink_Culture" style="color:inherit;text-decoration:none;">Digital Kink Culture</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Identity_Performance_in_Dating_and_Social_Spaces" style="color:inherit;text-decoration:none;">Identity Performance in Dating & Social Spaces</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Aging_%26_Sexual_Health" style="color:inherit;text-decoration:none;">Aging & Sexual Health</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Emotional_Dynamics_in_Kink" style="color:inherit;text-decoration:none;">Emotional Dynamics in Kink</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Visibility,_Privacy,_and_Being_%22Out%22" style="color:inherit;text-decoration:none;">Visibility, Privacy & Being Out</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Communication_%26_Disclosure" style="color:inherit;text-decoration:none;">Communication & Disclosure</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Kink_in_Relationships" style="color:inherit;text-decoration:none;">Kink in Relationships</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:The_Role_of_Humor,_Irony,_and_Distance" style="color:inherit;text-decoration:none;">The Role of Humor, Irony & Distance</a></span><span class="mq-dot"></span><span class="mq-item"><a href="/Category:Sexual_Function_%26_Mental_Health" style="color:inherit;text-decoration:none;">Sexual Function & Mental Health</a></span><span class="mq-dot"></span>
    <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><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>
   </div>
</section>
</div>
 
<div class="stats">
  <div class="stat"><div class="stat-n gt">500+</div><div class="stat-l">Artikel</div></div>
  <div class="stat"><div class="stat-n gt">2M+</div><div class="stat-l">Monatliche Leser</div></div>
  <div class="stat"><div class="stat-n gt">80+</div><div class="stat-l">Themen</div></div>
  <div class="stat"><div class="stat-n gt">∞</div><div class="stat-l">Immer kostenlos</div></div>
</div>


<section id="funktionen" style="padding:80px 1rem;">
<section class="sec" id="features">
   <div style="max-width:1100px;margin:0 auto;">
   <div class="sec-in">
     <div style="text-align:center;margin-bottom:48px;" class="fade-up">
     <div class="sec-hd fade-up">
       <div class="section-label">Warum BigBro Know?</div>
       <div class="stag">Why BigBro Know</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>
       <h2 class="stitle">Wissen, das wirklich zählt</h2>
     </div>
     </div>
     <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;">
     <div class="bento">
       <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="bc bw fade-up"><div class="b-ic">🛡️</div><div class="b-ti">Lebensrettendes Wissen</div><div class="b-de">Von PrEP und STI-Tests bis hin zu Zustimmung und psychischer Gesundheit — Wissen, das im echten Leben einen Unterschied macht.</div></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="bc fade-up"><div class="b-ic">📖</div><div class="b-ti">Tiefgehende, ehrliche Artikel</div><div class="b-de">Kein Clickbait, keine Schlagzeilen. Echte, ausführliche Artikel, die komplexe Themen mit Sorgfalt behandeln.</div></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="bc fade-up"><div class="b-ic">🔒</div><div class="b-ti">Standardmäßig privat</div><div class="b-de">Kein Konto erforderlich. Kein Tracking. Kein Urteil. Lies, was du brauchst — vollständig privat.</div></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="bc fade-up"><div class="b-ic">✍️</div><div class="b-ti">Community-Autoren</div><div class="b-de">Geschrieben von Menschen, die dieses Leben leben. Geprüft auf Richtigkeit. Nie von außenstehenden Journalisten.</div></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="bc fade-up"><div class="b-ic">🔍</div><div class="b-ti">Vollständig durchsuchbar</div><div class="b-de">Finde in Sekunden genau das, was du brauchst — mit leistungsstarker Suche über alle 500+ Artikel.</div></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. BigBro Know ist kostenlos und wird es immer bleiben.</p></div>
       <div class="bc fade-up"><div class="b-ic">💙</div><div class="b-ti">Immer kostenlos</div><div class="b-de">Keine Paywalls. Kein Premium-Abo. BigBro Know ist kostenlos und wird es immer bleiben.</div></div>
     </div>
     </div>
   </div>
   </div>
</section>
</section>


<section id="themen" style="padding:80px 1rem;background:#0A0A0A;">
<section class="sec" id="topics" style="background:var(--bg2);border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);">
   <div style="max-width:1100px;margin:0 auto;">
   <div class="sec-in">
     <div style="text-align:center;margin-bottom:48px;" class="fade-up">
     <div class="sec-hd fade-up">
       <div class="section-label">Wissensbereiche</div>
       <div class="stag">Knowledge Areas</div>
       <h2 style="font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin-top:.5rem;">Nach Kategorie erkunden</h2>
       <h2 class="stitle">Nach Kategorie erkunden</h2>
       <p style="color:var(--text-2);margin-top:.75rem;">Acht Wissensbereiche, die jeden Aspekt des schwulen Lebens abdecken.</p>
       <p class="ssub">Acht Wissensbereiche, die jeden Aspekt des schwulen Lebens abdecken.</p>
     </div>
     </div>
     <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;">
     <div class="tg">
       <a href="/Category:Sexuelle_Gesundheit" class="topic-tile"><img src="/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>
       <a href="/Category:Sexual_Health" class="tc"><img src="/images/c/c2/Sexual_health.png" alt="Sexual Health" loading="lazy"><div class="to"><span class="tn">Sexuelle Gesundheit</span></div></a>
       <a href="/Category:Dating,_Sex_%26_Beziehungen" class="topic-tile"><img src="/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>
       <a href="/Category:Dating,_Sex_%26_Relationships" class="tc"><img src="/images/6/6c/Dating_and_relationships.png" alt="Dating, Sex & Relationships" loading="lazy"><div class="to"><span class="tn">Dating, Sex & Relationships</span></div></a>
       <a href="/Category:Kink_und_BDSM" class="topic-tile"><img src="/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>
       <a href="/Category:Kink_%26_BDSM" class="tc"><img src="/images/a/a1/Chain-image.png" alt="Kink & BDSM" loading="lazy"><div class="to"><span class="tn">Kink & BDSM</span></div></a>
       <a href="/Category:Kultur,_Geschichte_%26_Politik" class="topic-tile"><img src="/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>
       <a href="/Category:Culture,_History_%26_Politics" class="tc"><img src="/images/2/25/Culture_History_Politics_Hero.png" alt="Culture, History & Politics" loading="lazy"><div class="to"><span class="tn">Culture, History & Politics</span></div></a>
       <a href="/Category:Mode_%26_Visuelle_Signale" class="topic-tile"><img src="/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>
       <a href="/Category:Fashion_%26_Visual_Signaling" class="tc"><img src="/images/8/86/Screenshot_2026-04-26_at_15.06.46.png" alt="Fashion & Visual Signaling" loading="lazy"><div class="to"><span class="tn">Fashion & Visual Signaling</span></div></a>
       <a href="/Category:Community_%26_Identit%C3%A4t" class="topic-tile"><img src="/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>
       <a href="/Category:Community_%26_Identity" class="tc"><img src="/images/e/ed/Community_Identity_Hero.png" alt="Community & Identity" loading="lazy"><div class="to"><span class="tn">Community & Identity</span></div></a>
       <a href="/Category:Drogen,_Partykultur_%26_Schadensminimierung" class="topic-tile"><img src="/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>
       <a href="/Category:Drugs,_Party_Culture_%26_Harm_Reduction" class="tc"><img src="/images/3/38/Drugs_Party_Culture_Hero.png" alt="Drugs, Party Culture & Harm Reduction" loading="lazy"><div class="to"><span class="tn">Drugs, Party Culture & Harm Reduction</span></div></a>
       <a href="/Category:Lebensplanung" class="topic-tile"><img src="/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>
       <a href="/Category:Life_Planning" class="tc"><img src="/images/7/74/Life_Planning_Hero.jpg" alt="Life Planning" loading="lazy"><div class="to"><span class="tn">Lebensplanung</span></div></a>
     </div>
     </div>
   </div>
   </div>
</section>
</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 class="ctab">
   <div style="max-width:700px;margin:0 auto;">
   <div style="max-width:600px;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>
     <h2 style="font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;letter-spacing:-.03em;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>
     <p style="color:var(--tx2);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>
     <a href="#articles" class="hcp">Artikel erkunden</a>
   </div>
   </div>
</section>
</div>


<section style="padding:80px 1rem;">
<section class="sec">
   <div style="max-width:1100px;margin:0 auto;">
   <div class="sec-in">
     <div style="text-align:center;margin-bottom:48px;" class="fade-up">
     <div class="sec-hd fade-up">
       <div class="section-label">Einstiegspunkte</div>
       <div class="stag">Entry Points</div>
       <h2 style="font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin-top:.5rem;">Wähle deinen Weg</h2>
       <h2 class="stitle">Wähle deinen Weg</h2>
      <p class="cyp-sub">Nicht sicher, wo du anfangen sollst? Wähle den Weg, der zu dir passt.</p>
     </div>
     </div>
     <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;">
     <div class="cyp fade-up">
       <a href="/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>
       <a href="/New_and_Just_Curious" class="cyc">
       <a href="/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>
        <div class="cyn">01</div>
       <a href="/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 class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF7900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></svg></span>
       <a href="/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>
        <div class="cyt">Neu hier / Einfach neugierig</div>
       <a href="/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>
        <div class="cyd">Grundlagen, Gesundheit, Zustimmung &amp; deine Community finden.</div>
        <div class="cye">Explore &rarr;</div>
      </a>
       <a href="/Exploring_Kink" class="cyc">
        <div class="cyn">02</div>
        <span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF7900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg></span>
        <div class="cyt">Ich möchte Kink erkunden</div>
        <div class="cyd">BDSM, Fetische, Lederkultur &amp; Machtdynamiken.</div>
        <div class="cye">Explore &rarr;</div>
      </a>
       <a href="/Improving_Your_Relationship" class="cyc">
        <div class="cyn">03</div>
        <span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF7900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg></span>
        <div class="cyt">Meine Beziehung verbessern</div>
        <div class="cyd">Kommunikation, Vertrauen, Nicht-Monogamie &amp; Intimität.</div>
        <div class="cye">Explore &rarr;</div>
      </a>
    </div>
    <div class="cypw fade-up">
       <a href="/Safety_and_Consent" class="cyc cyc-w">
        <span class="cyn">04</span>
        <span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF7900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg></span>
        <span class="cyt">Mir ist Sicherheit wichtig</span>
        <span class="cyd">Schadensminimierung, sicherer Sex, PrEP, BDSM-Sicherheit &amp; Zustimmung.</span>
        <span class="cye">Explore &rarr;</span>
      </a>
       <a href="/Advanced_Knowledge" class="cyc cyc-w">
        <span class="cyn">05</span>
        <span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF7900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6M10 22h4"/></svg></span>
        <span class="cyt">Ich möchte tiefes Wissen</span>
        <span class="cyd">Psychologie, fortgeschrittenes BDSM, Identität &amp; queere Geschichte.</span>
        <span class="cye">Explore &rarr;</span>
      </a>
     </div>
     </div>
   </div>
   </div>
</section>
</section>


<section id="artikel" style="padding:80px 1rem;background:#0A0A0A;">
<section class="sec" id="articles" style="background:var(--bg2);border-top:1px solid rgba(255,255,255,.04);">
   <div style="max-width:1100px;margin:0 auto;">
   <div class="sec-in">
     <div style="margin-bottom:32px;" class="fade-up">
     <div class="fade-up" style="margin-bottom:32px;">
       <div class="section-label">Aktuell</div>
       <div class="stag">Latest</div>
       <h2 style="font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin-top:.25rem;">Neueste Artikel</h2>
       <h2 class="stitle" style="text-align:left;">Neueste Artikel</h2>
     </div>
     </div>
     <div style="display:flex;gap:16px;overflow-x:auto;padding-bottom:1rem;scrollbar-width:none;">
     <div class="art-sc">
       <a href="/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="/Entering_the_Gay_Scene_for_the_First_Time" class="ac"><div class="atag">Community</div><div class="ati">Zum ersten Mal in die schwule Szene</div><div class="ade">Was dich erwartet, wie du dich vorbereitest und wo du anfängst.</div></a>
       <a href="/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="/Understanding_PrEP_and_Modern_HIV_Prevention" class="ac"><div class="atag">Health</div><div class="ati">PrEP und moderne HIV-Prävention</div><div class="ade">Ein vollständiger Leitfaden zu PrEP und wie du Zugang bekommst.</div></a>
       <a href="/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>
       <a href="/Body_Image_Pressure_in_Gay_Communities" class="ac"><div class="atag">Identity</div><div class="ati">Körperbild-Druck in schwulen Communities</div><div class="ade">Über Schönheitsideale, Selbstwahrnehmung und Erwartungen.</div></a>
       <a href="/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="/Understanding_Consent_in_Power_Exchange" class="ac"><div class="atag">Kink & BDSM</div><div class="ati">Zustimmung in Machtdynamiken verstehen</div><div class="ade">Was Zustimmung wirklich bedeutet und wie sie praktiziert wird.</div></a>
       <a href="/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>
       <a href="/Loneliness,_Hookup_Culture,_and_Emotional_Well-Being" class="ac"><div class="atag">Relationships</div><div class="ati">Einsamkeit, Hookup-Kultur und Wohlbefinden</div><div class="ade">Über die Spannung zwischen sexueller Freiheit und Verbundenheit.</div></a>
       <a href="/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>
       <a href="/Navigating_Intimacy_After_Sexual_Trauma" class="ac"><div class="atag">Health</div><div class="ati">Intimität nach einem sexuellen Trauma</div><div class="ade">Verarbeitung, Heilung und der Weg zurück zur Verbindung.</div></a>
     </div>
     </div>
   </div>
   </div>
</section>
</section>


<section style="padding:80px 1rem;">
<section class="sec">
   <div style="max-width:1100px;margin:0 auto;">
   <div class="sec-in">
     <div style="text-align:center;margin-bottom:40px;" class="fade-up">
     <div class="sec-hd fade-up">
       <div class="section-label">Kuratiert</div>
       <div class="stag">Curated</div>
       <h2 style="font-size:clamp(1.5rem,3vw,2.2rem);font-weight:800;letter-spacing:-.02em;margin-top:.25rem;">Auswahl der Redaktion</h2>
       <h2 class="stitle">Redaktionsauswahl</h2>
     </div>
     </div>
     <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;">
     <div class="edg">
       <a href="/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="/Sexual_Health_in_the_Gay_Community" class="ec"><div class="etag">Health</div><div class="eti">Sexuelle Gesundheit in der schwulen Community</div></a>
       <a href="/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="/What_Is_BDSM" class="ec"><div class="etag">Kink & BDSM</div><div class="eti">Was ist BDSM?</div></a>
       <a href="/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>
       <a href="/Body_Diversity_and_Attraction_in_Gay_Communities" class="ec"><div class="etag">Identity</div><div class="eti">Körperdiversität und Anziehung in schwulen Communities</div></a>
       <a href="/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="/Understanding_Routine_STI_Testing_in_Gay_Communities" class="ec"><div class="etag">Health</div><div class="eti">Regelmäßige STI-Tests verstehen</div></a>
       <a href="/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>
       <a href="/First_Time_at_a_Private_Gay_Sex_Party" class="ec"><div class="etag">Nightlife</div><div class="eti">Zum ersten Mal auf einer privaten schwulen Sexparty</div></a>
       <a href="/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>
       <a href="/Recovering_Sexual_Confidence_After_Relationship_Breakups" class="ec"><div class="etag">Relationships</div><div class="eti">Sexuelles Selbstvertrauen nach Trennungen zurückgewinnen</div></a>
     </div>
     </div>
   </div>
   </div>
</section>
</section>


<section style="padding:80px 1rem;background:#0A0A0A;">
<section class="sec" style="background:var(--bg2);border-top:1px solid rgba(255,255,255,.04);">
   <div style="max-width:1100px;margin:0 auto;">
   <div class="sec-in">
     <div style="text-align:center;margin-bottom:48px;" class="fade-up">
     <div class="sec-hd fade-up">
       <div class="section-label">Erfahrungsberichte</div>
       <div class="stag">Readers</div>
       <h2 style="font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.02em;margin-top:.5rem;">Was Leser sagen</h2>
       <h2 class="stitle">Was andere sagen</h2>
     </div>
     </div>
     <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;">
     <div class="tsg">
       <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 BigBro Know 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="tsc fade-up"><div class="tsq">"</div><div class="tst">The PrEP article literally saved my life. I didn't even know what it was before I found BigBro Know. Now I'm on it and feel safe.</div><div class="tsa"><div class="tsav">J</div><div><div class="tsn">James</div><div class="tsc2">Manchester, UK</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="tsc fade-up"><div class="tsq">"</div><div class="tst">When I came out I had no idea where to start. The articles on identity and community made me feel less alone — and actually helped me find my people.</div><div class="tsa"><div class="tsav">D</div><div><div class="tsn">Daniel</div><div class="tsc2">Berlin, Germany</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>
       <div class="tsc fade-up"><div class="tsq">"</div><div class="tst">Finally honest information about chemsex and harm reduction — no judgment, no moralising, just practical knowledge that actually helps.</div><div class="tsa"><div class="tsav">A</div><div><div class="tsn">Aviv</div><div class="tsc2">Tel Aviv, Israel</div></div></div></div>
     </div>
     </div>
   </div>
   </div>
</section>
</section>


<section id="ueber" style="padding:80px 1rem;border-top:1px solid var(--border);text-align:center;">
<section class="nls" id="about">
   <div style="max-width:560px;margin:0 auto;">
   <div style="max-width:500px;margin:0 auto;">
     <div class="section-label">Newsletter</div>
     <div class="stag">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>
     <h2 style="font-size:clamp(1.8rem,3vw,2.4rem);font-weight:800;letter-spacing:-.03em;margin-top:.5rem;">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>
     <p style="color:var(--tx2);margin-top:.75rem;">Werde Teil von 50.000+ Lesern. Wöchentliche Highlights, kein Spam, immer kostenlos.</p>
     <form style="display:flex;gap:.75rem;max-width:420px;margin:0 auto;" onsubmit="return false;">
     <form class="nlf" 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;">
       <input type="email" placeholder="your@email.com" class="nli">
       <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>
       <button type="submit" class="nlb">Abonnieren</button>
     </form>
     </form>
   </div>
   </div>
</section>
</section>


</main>
<footer class="foot">
 
   <div class="fg">
<footer style="border-top:1px solid var(--border);padding:3rem 1rem 2rem;background:#0D0D0D;">
   <div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr repeat(3,1fr);gap:3rem;margin-bottom:2.5rem;">
    <div>
      <img src="/images/0/0c/BigBro_Know_logo.png" alt="BigBro Know Wiki" style="height:30px;margin-bottom:1rem;">
      <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>
    </div>
    <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="/Category:Sexuelle_Gesundheit">Sexuelle Gesundheit</a>
        <a href="/Category:HIV-Pr%C3%A4vention_%26_Behandlung">HIV-Prävention</a>
        <a href="/Category:STI-Aufkl%C3%A4rung_%26_Tests">STI-Tests</a>
        <a href="/Category:Psychische_Gesundheit_%26_Sexualit%C3%A4t">Psychische Gesundheit</a>
      </div>
    </div>
    <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="/Category:Dating,_Sex_%26_Beziehungen">Dating & Beziehungen</a>
        <a href="/Category:Kink_und_BDSM">Kink & BDSM</a>
        <a href="/Category:Kultur,_Geschichte_%26_Politik">Kultur & Geschichte</a>
        <a href="/Category:Mode_%26_Visuelle_Signale">Mode & Stil</a>
      </div>
    </div>
     <div>
     <div>
       <div style="font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:1rem;">Website</div>
       <img src="/images/f/f9/BigBro_Know_logo_new.png" alt="BigBro Know Wiki" style="height:28px;">
      <div style="display:flex;flex-direction:column;gap:.6rem;">
      <p class="fbp">Eine kostenlose, unabhängige Wissensplattform für schwule Communities weltweit.</p>
        <a href="/Homepage/de">Startseite</a>
        <a href="/Special:AllPages">Alle Artikel</a>
        <a href="/radmin">Admin</a>
      </div>
     </div>
     </div>
    <div><div class="fct">Health</div><div class="fl"><a href="/Category:Sexual_Health">Sexual Health</a><a href="/Category:HIV_Prevention_%26_Treatment">HIV Prevention</a><a href="/Category:STI_Awareness_%26_Testing">STI Testing</a><a href="/Category:Sexual_Function_%26_Mental_Health">Mental Health</a></div></div>
    <div><div class="fct">Lifestyle</div><div class="fl"><a href="/Category:Dating,_Sex_%26_Relationships">Dating & Relationships</a><a href="/Category:Kink_%26_BDSM">Kink & BDSM</a><a href="/Category:Culture,_History_%26_Politics">Culture & History</a><a href="/Category:Fashion_%26_Visual_Signaling">Fashion & Style</a></div></div>
    <div><div class="fct">Site</div><div class="fl"><a href="/Homepage">Startseite</a><a href="/Topics">Alle Themen</a><a href="/Special:AllPages">Alle Artikel</a><a href="/radmin">Admin</a></div></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 class="fb">
     <div style="color:var(--text-3);font-size:.82rem;">© 2024 BigBro Know · Alle Inhalte dienen ausschließlich Bildungszwecken.</div>
     <span>© 2024 BigBro Know · Alle Inhalte dienen ausschließlich Bildungszwecken.</span>
     <div style="color:var(--text-3);font-size:.82rem;">Kein Konto · Kein Tracking · Immer kostenlos</div>
     <span>Kein Konto · Kein Tracking · Immer kostenlos</span>
   </div>
   </div>
</footer>
</footer>


<script>
<script>
window.addEventListener('scroll',()=>{
window.addEventListener('scroll',()=>{const p=window.scrollY/(document.body.scrollHeight-window.innerHeight);document.getElementById('prog').style.transform=`scaleX(${p})`;});
  const p=(window.scrollY/(document.body.scrollHeight-window.innerHeight))*100;
const obs=new IntersectionObserver(e=>e.forEach(i=>{if(i.isIntersecting){i.target.classList.add('in');obs.unobserve(i.target);}}),{threshold:.1});
  document.getElementById('progress').style.width=p+'%';
});
const obs=new IntersectionObserver(e=>e.forEach(i=>{if(i.isIntersecting)i.target.classList.add('visible');}),{threshold:.1});
document.querySelectorAll('.fade-up').forEach(el=>obs.observe(el));
document.querySelectorAll('.fade-up').forEach(el=>obs.observe(el));
function toggleTheme(){
function toggleTheme(){const l=document.body.classList.toggle('light-mode');document.body.classList.toggle('dark-mode',!l);localStorage.setItem('theme',l?'light':'dark');document.getElementById('tbtn').textContent=l?'☀️':'🌙';}
  const isLight=document.body.classList.toggle('light-mode');
(function(){const s=localStorage.getItem('theme');const pl=window.matchMedia('(prefers-color-scheme:light)').matches;const ul=s?s==='light':pl;document.body.classList.add(ul?'light-mode':'dark-mode');document.addEventListener('DOMContentLoaded',()=>{const b=document.getElementById('tbtn');if(b)b.textContent=ul?'☀️':'🌙';});})();
  document.body.classList.toggle('dark-mode',!isLight);
  localStorage.setItem('theme',isLight?'light':'dark');
  document.getElementById('theme-toggle').textContent=isLight?'☀️':'🌙';
}
(function(){
  const saved=localStorage.getItem('theme');
  const prefersLight=window.matchMedia('(prefers-color-scheme:light)').matches;
  const useLight=saved?saved==='light':prefersLight;
  document.body.classList.add(useLight?'light-mode':'dark-mode');
  document.addEventListener('DOMContentLoaded',function(){
    const btn=document.getElementById('theme-toggle');
    if(btn)btn.textContent=useLight?'☀️':'🌙';
  });
})();
</script>
</script>
</html>
</html>

Latest revision as of 00:06, 13 July 2026

Kostenlos · Unabhängig · Immer offen
BigBro Know

Die freie Wissensplattform für die schwule Community

BigBro Know entdecken →
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.

Jetzt lesen Themen erkunden
HIV Prevention & TreatmentConsent & NegotiationCommunication & BoundariesAging, Relevance & Shifting IdentityCultureBody PresentationParty DrugsTrauma & RecoveryPower DynamicsHookups vs. DatingChosen Family & Social BelongingHistoryStyle as CommunicationSTI Awareness & TestingRoles & ArchetypesSex, Intimacy & ConnectionOnline Communities vs. Physical CommunitiesPoliticsSubculture AestheticsBody Image & Self-PerceptionRisk Awareness & SafetyBelonging Without CentralitySymbols & AccessoriesSubstance Use & Sexual ContextsDigital Kink CultureIdentity Performance in Dating & Social SpacesAging & Sexual HealthEmotional Dynamics in KinkVisibility, Privacy & Being OutCommunication & DisclosureKink in RelationshipsThe Role of Humor, Irony & DistanceSexual Function & Mental Health HIV Prevention & TreatmentConsent & NegotiationCommunication & BoundariesAging, Relevance & Shifting IdentityCultureBody PresentationParty DrugsTrauma & RecoveryPower DynamicsHookups vs. DatingChosen Family & Social BelongingHistoryStyle as CommunicationSTI Awareness & TestingRoles & ArchetypesSex, Intimacy & ConnectionOnline Communities vs. Physical CommunitiesPoliticsSubculture AestheticsBody Image & Self-PerceptionRisk Awareness & SafetyBelonging Without CentralitySymbols & AccessoriesSubstance Use & Sexual ContextsDigital Kink CultureIdentity Performance in Dating & Social SpacesAging & Sexual HealthEmotional Dynamics in KinkVisibility, Privacy & Being OutCommunication & DisclosureKink in RelationshipsThe Role of Humor, Irony & DistanceSexual Function & Mental Health
500+
Artikel
2M+
Monatliche Leser
80+
Themen
∞
Immer kostenlos
Why BigBro Know

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.
🔒
Standardmäßig privat
Kein Konto erforderlich. Kein Tracking. Kein Urteil. Lies, was du brauchst — vollständig privat.
✍️
Community-Autoren
Geschrieben von Menschen, die dieses Leben leben. Geprüft auf Richtigkeit. Nie von außenstehenden Journalisten.
🔍
Vollständig durchsuchbar
Finde in Sekunden genau das, was du brauchst — mit leistungsstarker Suche über alle 500+ Artikel.
💙
Immer kostenlos
Keine Paywalls. Kein Premium-Abo. BigBro Know ist kostenlos und wird es immer bleiben.
Knowledge Areas

Nach Kategorie erkunden

Acht Wissensbereiche, die jeden Aspekt des schwulen Lebens abdecken.

Sexual Health
Sexuelle Gesundheit
 Dating, Sex & Relationships
Dating, Sex & Relationships
 Kink & BDSM
Kink & BDSM
 Culture, History & Politics
Culture, History & Politics
 Fashion & Visual Signaling
Fashion & Visual Signaling
 Community & Identity
Community & Identity
 Drugs, Party Culture & Harm Reduction
Drugs, Party Culture & Harm Reduction
 Life Planning
Lebensplanung

Wissen, das Leben rettet

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

Artikel erkunden
Entry Points

Wähle deinen Weg

Nicht sicher, wo du anfangen sollst? Wähle den Weg, der zu dir passt.

01
Neu hier / Einfach neugierig
Grundlagen, Gesundheit, Zustimmung & deine Community finden.
Explore →
02
Ich möchte Kink erkunden
BDSM, Fetische, Lederkultur & Machtdynamiken.
Explore →
03
Meine Beziehung verbessern
Kommunikation, Vertrauen, Nicht-Monogamie & Intimität.
Explore →
04 Mir ist Sicherheit wichtig Schadensminimierung, sicherer Sex, PrEP, BDSM-Sicherheit & Zustimmung. Explore → 05 Ich möchte tiefes Wissen Psychologie, fortgeschrittenes BDSM, Identität & queere Geschichte. Explore →
Latest

Neueste Artikel

Community
Zum ersten Mal in die schwule Szene
Was dich erwartet, wie du dich vorbereitest und wo du anfängst.
Health
PrEP und moderne HIV-Prävention
Ein vollständiger Leitfaden zu PrEP und wie du Zugang bekommst.
Identity
Körperbild-Druck in schwulen Communities
Über Schönheitsideale, Selbstwahrnehmung und Erwartungen.
Kink & BDSM
Zustimmung in Machtdynamiken verstehen
Was Zustimmung wirklich bedeutet und wie sie praktiziert wird.
Relationships
Einsamkeit, Hookup-Kultur und Wohlbefinden
Über die Spannung zwischen sexueller Freiheit und Verbundenheit.
Health
Intimität nach einem sexuellen Trauma
Verarbeitung, Heilung und der Weg zurück zur Verbindung.
Curated

Redaktionsauswahl

Health
Sexuelle Gesundheit in der schwulen Community
Kink & BDSM
Was ist BDSM?
Identity
Körperdiversität und Anziehung in schwulen Communities
Health
Regelmäßige STI-Tests verstehen
Nightlife
Zum ersten Mal auf einer privaten schwulen Sexparty
Relationships
Sexuelles Selbstvertrauen nach Trennungen zurückgewinnen
Readers

Was andere sagen

"
The PrEP article literally saved my life. I didn't even know what it was before I found BigBro Know. Now I'm on it and feel safe.
J
James
Manchester, UK
"
When I came out I had no idea where to start. The articles on identity and community made me feel less alone — and actually helped me find my people.
D
Daniel
Berlin, Germany
"
Finally honest information about chemsex and harm reduction — no judgment, no moralising, just practical knowledge that actually helps.
A
Aviv
Tel Aviv, Israel
Newsletter

Bleib informiert.

Werde Teil von 50.000+ Lesern. Wöchentliche Highlights, kein Spam, immer kostenlos.

Retrieved from "https://know.bigbro.men/index.php?title=Homepage/de&oldid=24988"