html, body{ margin: 0; padding: 0; background: var(--bg); min-height: 100%; }
:root{
/* Farben und Schriften kommen jetzt aus /assets/theme.css.
Hier stand bis 08/2026 eine Kopie derselben Liste — auf 14 Seiten.
Eine Design-Änderung musste dadurch 14-mal gemacht werden, und das
helle Thema hätte die lokalen Werte nie überschreiben können. */
}
*{ box-sizing: border-box; }
.sub-page{
position: relative;
background: var(--bg); color: var(--text); font-family: var(--font-body);
min-height: 100%; padding: 28px 20px 60px; -webkit-font-smoothing: antialiased;
overflow: hidden; overflow: clip; /* kein Scroll-Container -> kein zweiter Scrollbalken */
}
.sub-page::before{
content:''; position:absolute; top:-200px; left:50%; transform:translateX(-50%);
width:600px; height:400px; border-radius:50%;
background: radial-gradient(circle, rgba(124,252,110,0.18), transparent 70%);
filter: blur(70px); pointer-events:none;
}
.wrap{ position:relative; max-width: 720px; margin: 0 auto; z-index:1; }
.home-link{ display:inline-block; font-size:12.5px; font-weight:600; color:var(--text-faint); text-decoration:none; margin-bottom:18px; }
.home-link:hover{ color:var(--cyan); }
h1{
font-family: var(--font-display); font-weight: 800; font-size: 28px;
margin: 0 0 8px; color: var(--cyan);
text-shadow: 0 0 10px rgba(124,252,110,0.5);
}
.page-sub{ color: var(--text-dim); font-size: 14px; margin: 0 0 26px; line-height:1.5; }
.panel{
background: var(--bg-card); border: 1px solid var(--line); border-radius: 18px;
padding: 26px 24px; margin-bottom: 22px; position:relative; overflow:hidden;
}
.panel::before{
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent);
opacity:.8;
}
.cookie-banner{
position: fixed; left:16px; right:16px; bottom:16px; z-index:200;
max-width: 640px; margin: 0 auto;
background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
padding: 16px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
box-shadow: 0 20px 50px -20px rgba(0,0,0,0.6);
}
.cookie-banner p{ margin:0; font-size:12.5px; color:var(--text-dim); line-height:1.5; flex:1; min-width:200px; }
.cookie-banner a{ color: var(--cyan); }
.cookie-banner button{
font-size:12.5px; font-weight:700; color:var(--auf-gruen);
background: linear-gradient(135deg, var(--cyan), var(--violet));
border:none; border-radius:10px; padding:9px 16px; cursor:pointer; white-space:nowrap;
}
.social-row{ position:relative; display:flex; justify-content:center; gap:12px; margin-top:32px; padding-top:26px; }
.social-row::before{ content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background: linear-gradient(90deg, transparent, rgba(124,252,110,0.4), transparent); }
.social-row a{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--text-dim); background:var(--bg-card); border:1px solid var(--line); transition: all .18s ease; }
.social-row a:hover{ color:var(--cyan); border-color:var(--cyan); transform:translateY(-2px); }
.social-row svg{ width:18px; height:18px; }
.footer-note{ margin-top:22px; font-size:11.5px; color:var(--text-faint); text-align:center; line-height:1.6; }
.footer-note a{ color:var(--text-dim); }
.community-card{
position: relative;
display: flex;
align-items: center;
gap: 14px;
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: 14px;
padding: 16px 18px;
text-decoration: none;
color: var(--text);
transition: all .18s ease;
overflow: hidden;
}
.community-card::before{
content:'';
position: absolute;
top:0; left:0; bottom:0; width:3px;
background: linear-gradient(180deg, var(--cyan), var(--orange));
opacity: 0;
transition: opacity .18s ease;
}
.community-card:hover{
border-color: rgba(124,252,110,0.5);
transform: translateY(-2px);
box-shadow: 0 16px 34px -20px rgba(124,252,110,0.4);
}
.community-card:hover::before{ opacity: 1; }
.community-card:hover .area-arrow{ color: var(--cyan); transform: translateX(2px); }
.community-icon{
width: 44px; height: 44px;
border-radius: 12px;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: #5865F2;
color: #fff;
box-shadow: 0 0 16px -4px rgba(88,101,242,0.6);
}
.community-icon svg{ width: 22px; height: 22px; }
.community-body{ display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.community-name{ font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.community-desc{ font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.area-card:hover .area-arrow{ color: var(--cyan); transform: translateX(2px); }
.area-arrow{
font-family: var(--font-mono);
font-size: 12px;
font-weight: 700;
color: var(--text-faint);
flex-shrink: 0;
transition: all .18s ease;
white-space: nowrap;
}
.schedule-list{ display:flex; flex-direction:column; gap:8px; }
.schedule-row{
display:flex; align-items:center; justify-content:space-between; gap:12px;
background: var(--bg-card); border:1px solid var(--line); border-radius:10px;
padding:11px 16px;
}
.schedule-day{ font-family: var(--font-display); font-weight:700; font-size:13.5px; }
.schedule-time{ font-family: var(--font-mono); font-size:12.5px; color: var(--cyan); }
.schedule-note{ font-size:11.5px; color: var(--text-faint); }
/* ---------- Clips ---------- */
.clips-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:16px; }
.clip-card{ background:#0d1512; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.clip-embed{ position:relative; width:100%; aspect-ratio:16/9; background:#0a0c16; }
.clip-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.clip-title{ padding:11px 14px 13px; font-family:var(--font-display); font-weight:700; font-size:13.5px; line-height:1.35; }
.clip-meta{ padding:0 14px 12px; font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono); display:flex; justify-content:space-between; gap:8px; }
.clips-cta{ display:inline-block; margin-top:6px; font-size:12.5px; font-weight:700; color:var(--cyan); text-decoration:none; }
.clips-note{ font-size:13px; color:var(--text-faint); padding:16px 0; text-align:center; }
/* v139.92 Community Fresh UX */
.community-hero{padding:18px 0 8px}.community-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.09em;font-weight:800;color:var(--cyan)}.community-hero h1{max-width:600px;margin-top:6px}.community-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}.community-actions a{color:var(--text);text-decoration:none;border:1px solid var(--line2);border-radius:10px;padding:9px 12px;font-size:12px;font-weight:800;background:var(--bg-card2)}.community-actions a.community-primary{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 12%,var(--bg-card2))}.clips-grid.is-loading{grid-template-columns:repeat(3,1fr)}.clip-skeleton{aspect-ratio:16/10;border-radius:12px;background:linear-gradient(90deg,var(--bg-card2),var(--line2),var(--bg-card2));background-size:200% 100%;animation:communityShimmer 1.1s infinite}@keyframes communityShimmer{to{background-position:-200% 0}}@media(max-width:700px){.community-actions a{flex:1 1 140px;text-align:center}.clips-grid.is-loading{grid-template-columns:1fr}}