Homepage/de: Difference between revisions
Jump to navigation
Jump to search
Update language switcher to include all 5 languages as active links |
Day mode: cohesive light theme (parity with EN; dark untouched) |
||
| (2 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= | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
<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:# | :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(--tx);font-family:' | 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: | h1,h2,h3,h4{font-family:var(--head),sans-serif;} | ||
#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;} | #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 2.5rem;height:60px;background:rgba( | .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);} | ||
.nl{color:var(--tx2);text-decoration:none;font-size:.875rem;font-weight:500;transition:color .15s;} | .nl{color:var(--tx2);text-decoration:none;font-size:.875rem;font-weight:500;transition:color .15s;} | ||
.nl:hover{color:var(--tx);} | .nl:hover{color:var(--tx);} | ||
| Line 24: | Line 25: | ||
.tbtn:hover{background:rgba(255,255,255,.09);} | .tbtn:hover{background:rgba(255,255,255,.09);} | ||
.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;} | .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;} | ||
.h-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 50%,rgba(255, | .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;} | ||
.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;} | .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;} | ||
.h-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255, | .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;} | ||
.h-dot{width:6px;height:6px;border-radius:50%;background:var(--or);animation:pulse 2s infinite;} | .h-dot{width:6px;height:6px;border-radius:50%;background:var(--or);animation:pulse 2s infinite;} | ||
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}} | @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}} | ||
| Line 33: | Line 34: | ||
.h-sub{font-size:clamp(1rem,2vw,1.15rem);color:var(--tx2);line-height:1.75;max-width:520px;margin:0 auto 2.5rem;} | .h-sub{font-size:clamp(1rem,2vw,1.15rem);color:var(--tx2);line-height:1.75;max-width:520px;margin:0 auto 2.5rem;} | ||
.h-ctas{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;} | .h-ctas{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;} | ||
.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, | .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;} | ||
.hcp:hover{transform:translateY(-2px);box-shadow:0 0 60px rgba(255, | .hcp:hover{transform:translateY(-2px);box-shadow:0 0 60px rgba(255,121,0,.5);} | ||
.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;} | .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;} | ||
.hcs:hover{background:rgba(255,255,255,.11);} | .hcs:hover{background:rgba(255,255,255,.11);} | ||
| Line 45: | Line 46: | ||
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.05);} | .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{background:var(--bg);padding:2.5rem 2rem;text-align:center;} | ||
.stat-n{font-size:2.8rem;font-weight:900;font-family: | .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;} | .stat-l{color:var(--tx2);font-size:.875rem;margin-top:.25rem;} | ||
.sec{padding:100px 1rem;} | .sec{padding:100px 1rem;} | ||
| Line 55: | Line 56: | ||
.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;} | .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{background:var(--bg2);padding:2.25rem;transition:background .2s;} | ||
.bc:hover{background:rgba(255, | .bc:hover{background:rgba(255,121,0,.04);} | ||
.bw{grid-column:span 2;} | .bw{grid-column:span 2;} | ||
.b-ic{font-size:2rem;margin-bottom:1rem;} | .b-ic{font-size:2rem;margin-bottom:1rem;} | ||
.b-ti{font-size:1.05rem;font-weight:700;margin-bottom:.5rem;font-family: | .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;} | .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;} | .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{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, | .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 img{width:100%;height:100%;object-fit:cover;transition:transform .4s;} | ||
.tc:hover img{transform:scale(1.05);} | .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;} | .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: | .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{display:flex;gap:14px;overflow-x:auto;padding-bottom:1rem;scrollbar-width:none;} | ||
.art-sc::-webkit-scrollbar{display:none;} | .art-sc::-webkit-scrollbar{display:none;} | ||
| Line 72: | Line 73: | ||
.ac:hover{border-color:var(--chb);background:var(--chov);transform:translateY(-2px);} | .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;} | .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: | .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;} | .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;} | .edg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;} | ||
| Line 78: | Line 79: | ||
.ec:hover{border-color:var(--chb);background:var(--chov);} | .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;} | .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: | .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;} | .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{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);} | .pc:hover{border-color:var(--chb);background:var(--chov);transform:translateY(-2px);} | ||
.pi{font-size:1.5rem;margin-bottom:.75rem;} | .pi{font-size:1.5rem;margin-bottom:.75rem;} | ||
.pt{font-weight:700;color:var(--tx);font-size:.9rem;margin-bottom:.3rem;font-family: | .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;} | .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:' | .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;} | .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;} | .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{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, | .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;} | .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, | .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: | .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;} | .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: | .cye{color:var(--or);font-size:.9rem;font-weight:700;font-family:var(--head),sans-serif;} | ||
.cyc:hover .cye{color:var(--or2);} | .cyc:hover .cye{color:var(--or2);} | ||
.cyc-w{display:flex;align-items:center;gap:22px;} | .cyc-w{display:flex;align-items:center;gap:22px;} | ||
| Line 103: | Line 104: | ||
.cyc-w .cye{flex-shrink:0;} | .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%;}} | @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, | .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;} | .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;} | .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, | .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;} | .tst{color:var(--tx2);font-size:.95rem;line-height:1.75;margin-bottom:1.5rem;} | ||
.tsa{display:flex;align-items:center;gap:.75rem;} | .tsa{display:flex;align-items:center;gap:.75rem;} | ||
| Line 115: | Line 116: | ||
.nlf{display:flex;gap:.75rem;max-width:440px;margin:2rem auto 0;} | .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{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, | .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{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;} | .nlb:hover{opacity:.9;} | ||
| Line 129: | Line 130: | ||
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s;} | .fade-up{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s;} | ||
.fade-up.in{opacity:1;transform:none;} | .fade-up.in{opacity:1;transform:none;} | ||
body.light-mode{--bg:# | /* ===== DAY MODE — cohesive light theme (mirrors the dark palette; dark mode untouched) ===== */ | ||
body.light-mode .nav{background:rgba( | 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 .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{background:var(--bg2);} | ||
body.light-mode . | body.light-mode .bc:hover{background:var(--chov);box-shadow:inset 0 0 0 1px rgba(255,121,0,.22);} | ||
body.light-mode . | body.light-mode .tc{border-color:rgba(0,0,0,.08);} | ||
body.light-mode .foot{background:var(--bg);} | 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: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;}} | @media(max-width:600px){.nav-links-wrap{display:none;}.fg{grid-template-columns:1fr;}} | ||
/* BigBro Know Banner */ | /* BigBro Know Banner */ | ||
.bigbro-banner{width:100%;background:linear-gradient(135deg,#0D0D0D 0%,#1a0800 50%,#0D0D0D 100%);border-bottom:1px solid rgba(255, | .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, | .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;} | .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-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, | .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-dot{width:6px;height:6px;border-radius:50%;background:var(--or);animation:pulse 2s infinite;} | ||
.ab-logo{font-family: | .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,# | .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-x{color:#fff;} | ||
.ab-logo{margin-bottom:.35rem;} | .ab-logo{margin-bottom:.35rem;} | ||
.ab-know{font-family: | .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-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, | .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, | .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, | .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 */ | /* Enhanced modern styles */ | ||
| Line 163: | Line 207: | ||
.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::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%);} | .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> | ||
| Line 206: | Line 265: | ||
<div class="h-grid"></div> | <div class="h-grid"></div> | ||
<div class="h-badge"><span class="h-dot"></span>500+ Artikel · Immer kostenlos</div> | <div class="h-badge"><span class="h-dot"></span>500+ Artikel · Immer kostenlos</div> | ||
<h1 class="h-title"> | <h1 class="h-title">Alles über<br>das schwule Leben.<br><span class="gt">An einem Ort. Kostenlos.</span></h1> | ||
<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> | <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> | ||
<div class="h-ctas"> | <div class="h-ctas"> | ||
| Line 283: | Line 342: | ||
<a href="/New_and_Just_Curious" class="cyc"> | <a href="/New_and_Just_Curious" class="cyc"> | ||
<div class="cyn">01</div> | <div class="cyn">01</div> | ||
<span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="# | <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> | ||
<div class="cyt">Neu hier / Einfach neugierig</div> | <div class="cyt">Neu hier / Einfach neugierig</div> | ||
<div class="cyd">Grundlagen, Gesundheit, Zustimmung & deine Community finden.</div> | <div class="cyd">Grundlagen, Gesundheit, Zustimmung & deine Community finden.</div> | ||
| Line 290: | Line 349: | ||
<a href="/Exploring_Kink" class="cyc"> | <a href="/Exploring_Kink" class="cyc"> | ||
<div class="cyn">02</div> | <div class="cyn">02</div> | ||
<span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="# | <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="cyt">Ich möchte Kink erkunden</div> | ||
<div class="cyd">BDSM, Fetische, Lederkultur & Machtdynamiken.</div> | <div class="cyd">BDSM, Fetische, Lederkultur & Machtdynamiken.</div> | ||
| Line 297: | Line 356: | ||
<a href="/Improving_Your_Relationship" class="cyc"> | <a href="/Improving_Your_Relationship" class="cyc"> | ||
<div class="cyn">03</div> | <div class="cyn">03</div> | ||
<span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="# | <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="cyt">Meine Beziehung verbessern</div> | ||
<div class="cyd">Kommunikation, Vertrauen, Nicht-Monogamie & Intimität.</div> | <div class="cyd">Kommunikation, Vertrauen, Nicht-Monogamie & Intimität.</div> | ||
| Line 306: | Line 365: | ||
<a href="/Safety_and_Consent" class="cyc cyc-w"> | <a href="/Safety_and_Consent" class="cyc cyc-w"> | ||
<span class="cyn">04</span> | <span class="cyn">04</span> | ||
<span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="# | <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="cyt">Mir ist Sicherheit wichtig</span> | ||
<span class="cyd">Schadensminimierung, sicherer Sex, PrEP, BDSM-Sicherheit & Zustimmung.</span> | <span class="cyd">Schadensminimierung, sicherer Sex, PrEP, BDSM-Sicherheit & Zustimmung.</span> | ||
| Line 313: | Line 372: | ||
<a href="/Advanced_Knowledge" class="cyc cyc-w"> | <a href="/Advanced_Knowledge" class="cyc cyc-w"> | ||
<span class="cyn">05</span> | <span class="cyn">05</span> | ||
<span class="cyi"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="# | <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="cyt">Ich möchte tiefes Wissen</span> | ||
<span class="cyd">Psychologie, fortgeschrittenes BDSM, Identität & queere Geschichte.</span> | <span class="cyd">Psychologie, fortgeschrittenes BDSM, Identität & queere Geschichte.</span> | ||
Latest revision as of 00:06, 13 July 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.
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.
Wissen, das Leben rettet
Jeder verdient Zugang zu ehrlichen, lebensrettenden Informationen über sein eigenes Leben.
Artikel erkundenEntry Points
Wähle deinen Weg
Nicht sicher, wo du anfangen sollst? Wähle den Weg, der zu dir passt.
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.







