:root {
--bg-main: #09090b;
--bg-panel: #141418;
--bg-panel-alt: #1c1c22;
--bg-header: #141418;
--bg-dark: #0a0a0c;
--element-bg: rgba(255,255,255,0.06);
--element-bg-hover: rgba(255,255,255,0.10);
--element-bg-active: rgba(255,255,255,0.14);
--border: rgba(255,255,255,0.08);
--border-light: rgba(255,255,255,0.12);
--accent: #3b82f6;
--accent-hover: #2563eb;
--accent-red: #ef4444;
--accent-green: #22c55e;
--accent-yellow: #eab308;
--accent-purple: #8b5cf6;
--status-off: #6b7280;
--text-main: #fafafa;
--text-dim: #a1a1aa;
--text-muted: #71717a;
--text-monospace: #a1a1aa;
--overlay-bg: rgba(0, 0, 0, 0.7);
--overlay-bg-light: rgba(0, 0, 0, 0.5);
--table-header-bg: rgba(255,255,255,0.04);
--table-summary-bg: rgba(255,255,255,0.02);
--table-hover-bg: rgba(59,130,246,0.08);
--table-active-bg: rgba(59,130,246,0.12);
--table-active-border: rgba(59,130,246,0.3);
--card-bg: #141418;
--text-primary: #fafafa;
--surface: #1c1c22;
--warning-bg: rgba(234,179,8,0.08);
--warning-border: rgba(234,179,8,0.2);
--warning-text: #eab308;
--primary-bg: rgba(59,130,246,0.08);
--primary: #3b82f6;
--text: #fafafa;
--sidebar-width: 260px;
--r: 12px;
--rs: 8px;
--rl: 16px;
--shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);
--shadow-lg: 0 8px 32px rgba(0,0,0,.4);
--shadow-raised: 0 2px 8px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.04);
--tr: .2s cubic-bezier(.4,0,.2,1);
--glass-bg: rgba(20,20,24,0.8);
--glass-border: rgba(255,255,255,0.06);
--glass-blur: blur(20px);
--gradient-accent: linear-gradient(135deg, #3b82f6, #8b5cf6);
--gradient-accent-hover: linear-gradient(135deg, #2563eb, #7c3aed);
--gradient-success: linear-gradient(135deg, #22c55e, #14b8a6);
--gradient-warn: linear-gradient(135deg, #eab308, #f97316);
--gradient-danger: linear-gradient(135deg, #ef4444, #f97316);
--depth-sunken: rgba(0,0,0,.2);
--depth-flat: transparent;
--depth-raised: rgba(255,255,255,.03);
}
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
transition-delay: 0s !important;
}
* { box-sizing: border-box; }
*:not(input):not(textarea):not(.carousel-track):not(.carousel-slide):not(#obOverlay):not(#obTooltip) {
transition-property: color, background-color, border-color, box-shadow, opacity, transform;
transition-duration: .2s;
transition-timing-function: cubic-bezier(.4,0,.2,1);
}
img, video, canvas, svg, .like-burst, .ptr-indicator, .skeleton-card,
[style*="animation"], .carousel-track,
#mcIntro, #mcIntro *, .vs-all, .vs-all *, .vs-scene, .vs-scene *,
.vs-left, .vs-right, .vs-char, .vs-text, .vs-flash, .vs-line-svg,
.mc-result-overlay, .mc-result-text, #mcConfetti,
.spinner, .feed-skeleton, [id$="Loader"], [id$="Spinner"],
.lightbox-overlay, .streak-reward-popup, .ach-unlock-overlay,
.publish-success-overlay, .quick-actions-overlay { transition: none !important; }
body {
font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
background: var(--bg-main) !important;
color: var(--text-main) !important;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.01em;
scroll-behavior: smooth;
}
a { color: inherit; text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--accent); }
svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; vertical-align: -3px; stroke-linecap: round; stroke-linejoin: round; }
svg text { stroke: none; stroke-width: 0; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
.card { background: var(--bg-panel); border-color: var(--border); color: var(--text-main); }
.card-header { background: var(--bg-header); border-color: var(--border); }
.card-body { background: var(--bg-panel); }
.form-control, .form-select {
background-color: var(--element-bg) !important;
border: 1px solid var(--border-light) !important;
color: var(--text-main) !important;
border-radius: var(--r) !important;
transition: border-color var(--tr), box-shadow var(--tr);
}
.form-control:focus, .form-select:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px rgba(59,130,246,.12), 0 0 16px rgba(59,130,246,.08) !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }
.btn {
border-radius: var(--r) !important;
font-weight: 600;
transition: all var(--tr);
}
.btn:active { transform: scale(0.97); }
.btn-primary {
background: var(--gradient-accent) !important;
border: none !important;
color: #fff !important;
box-shadow: 0 1px 2px rgba(59,130,246,0.2);
transition: all .25s ease !important;
}
.btn-primary:hover {
background: var(--gradient-accent-hover) !important;
box-shadow: 0 0 20px rgba(59,130,246,.2), 0 4px 12px rgba(59,130,246,0.15);
transform: translateY(-1px);
}
.btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; vertical-align: -2px; }
.btn-outline-secondary {
color: var(--text-dim) !important;
border-color: var(--border-light) !important;
}
.btn-outline-secondary:hover {
background-color: var(--element-bg-hover) !important;
color: var(--text-main) !important;
}
.btn-danger { background-color: var(--accent-red) !important; border-color: var(--accent-red) !important; }
.btn-success { background-color: var(--accent-green) !important; border-color: var(--accent-green) !important; }
.btn-warning { background-color: var(--accent-yellow) !important; border-color: var(--accent-yellow) !important; color: #000 !important; }
.table { color: var(--text-dim) !important; border-color: var(--border) !important; }
.table > :not(caption) > * > * { background-color: transparent !important; border-color: var(--border) !important; }
.table thead th { background-color: var(--table-header-bg) !important; color: var(--text-muted) !important; font-size: .75rem; text-transform: uppercase; letter-spacing: .5px; }
.table tbody tr:hover > * { background-color: var(--table-hover-bg) !important; }
.modal-content { background-color: var(--bg-panel); border: 1px solid var(--border); color: var(--text-main); border-radius: var(--rl) !important; overflow: hidden; }
.modal-header { border-color: var(--border); }
.modal-footer { border-color: var(--border); }
.dropdown-menu { background-color: var(--bg-panel-alt); border-color: var(--border); }
.dropdown-item { color: var(--text-dim); }
.dropdown-item:hover { background-color: var(--element-bg-hover); color: var(--text-main); }
.nav-tabs { border-color: var(--border); }
.nav-tabs .nav-link { color: var(--text-muted); border-color: transparent; }
.nav-tabs .nav-link:hover { color: var(--text-main); border-color: var(--border); }
.nav-tabs .nav-link.active { background-color: var(--bg-panel); color: var(--accent); border-color: var(--border) var(--border) var(--bg-panel); }
.alert-success { background-color: rgba(78,189,53,.12); border-color: rgba(78,189,53,.25); color: var(--accent-green); }
.alert-danger { background-color: rgba(209,52,56,.12); border-color: rgba(209,52,56,.25); color: var(--accent-red); }
.badge { font-weight: 600; }
.list-group-item { background-color: var(--bg-panel); border-color: var(--border); color: var(--text-main); }
.list-group-item:hover { background-color: var(--bg-panel-alt); }
@keyframes fadeUp   { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn  { from { opacity:0; transform:scale(.95); } to { opacity:1; transform:scale(1); } }
@keyframes pulse    { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.6; transform:scale(.8); } }
@keyframes heartBeat{ 0%{ transform:scale(1); } 15%{ transform:scale(1.3); } 30%{ transform:scale(1); } 45%{ transform:scale(1.15); } 60%{ transform:scale(1); } }
@keyframes slideIn  { from { opacity:0; transform:translateX(-10px); } to { opacity:1; transform:translateX(0); } }
@keyframes legendGlow{ 0%,100%{ box-shadow:0 0 4px rgba(59,130,246,.2); } 50%{ box-shadow:0 0 14px rgba(59,130,246,.4); } }
@keyframes heartFloat{ 0%{ opacity:1; transform:scale(0) translate(0,0); } 50%{ opacity:1; transform:scale(1.2) translate(0,-20px); } 100%{ opacity:0; transform:scale(.8) translate(0,-60px); } }
.anim-up { animation: fadeUp .5s ease both; }
.anim-in { animation: fadeIn .3s ease both; }
.anim-scale { animation: scaleIn .3s ease both; }
:root { --nav-h: 52px; }
.top-navbar {
position: fixed; top: 0; left: 0; right: 0;
height: var(--nav-h);
background: var(--glass-bg);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border-bottom: 1px solid var(--glass-border);
display: flex; align-items: center;
padding: 0 16px; gap: 10px;
z-index: 110;
}
.top-navbar-hamburger {
display: none;
background: none; border: none;
color: var(--text-main); cursor: pointer; padding: 4px;
flex-shrink: 0;
}
.top-navbar-hamburger svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; }
.top-navbar-logo {
font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
font-size: 20px; color: var(--text-main);
display: flex; align-items: center; gap: 0;
text-decoration: none; line-height: 1;
flex-shrink: 0;
height: 100%;
padding: 0 10px;
transition: background var(--tr), color var(--tr);
}
.top-navbar-logo:hover {
background: #000;
color: #fff;
}
.top-navbar-logo strong { font-weight: 800; letter-spacing: -.3px; }
.logo-mesh { color: var(--text-main); transition: color var(--tr); }
.logo-pro { color: var(--accent); }
.top-navbar-logo:hover .logo-mesh { color: #fff; }
.top-navbar-logo:hover .logo-pro { color: var(--accent); }
.logo-shotmetrix { color: #fff; font-weight: 500; font-size: 14px; margin-left: 5px; transition: color var(--tr); }
[data-theme="light"] .logo-mesh { color: #000; }
[data-theme="light"] .logo-shotmetrix { color: #000; }
[data-theme="light"] .top-navbar-logo:hover .logo-mesh { color: #fff; }
[data-theme="light"] .top-navbar-logo:hover .logo-shotmetrix { color: #fff; }
.beta-badge {
font-size: 8px;
font-weight: 700;
letter-spacing: 0.06em;
background: var(--accent-yellow);
color: #000;
padding: 1px 5px;
border-radius: 3px;
margin-left: 4px;
vertical-align: middle;
line-height: 1.4;
}
.top-navbar-right {
display: flex; align-items: center; gap: 2px;
flex-shrink: 0;
}
.navbar-icon-btn {
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: var(--r);
color: var(--text-muted); text-decoration: none;
transition: all .2s ease; position: relative;
}
.navbar-icon-btn:hover { background: var(--element-bg); color: var(--text-main); transform: scale(1.05); }
.navbar-icon-btn.active { color: var(--accent); background: rgba(59,130,246,.1); box-shadow: 0 0 10px rgba(59,130,246,.1); }
.navbar-icon-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.navbar-badge {
position: absolute; top: 3px; right: 3px;
min-width: 14px; height: 14px;
background: var(--accent-red); color: #fff;
font-size: 8px; font-weight: 700;
border-radius: 7px; padding: 0 3px;
display: flex; align-items: center; justify-content: center;
margin-left: 0;
}
.navbar-points {
display: flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 20px;
background: rgba(240,180,41,.08);
border: 1px solid rgba(240,180,41,.18);
color: var(--accent-yellow); font-size: 12px; font-weight: 700;
text-decoration: none; white-space: nowrap;
transition: all var(--tr);
}
.navbar-points:hover { background: rgba(240,180,41,.15); color: var(--accent-yellow); }
.navbar-points svg { width: 13px; height: 13px; stroke: var(--accent-yellow); fill: none; }
.navbar-avatar { display: flex; align-items: center; border-radius: 50%; margin-left: 4px; text-decoration: none; }
.navbar-avatar:hover { opacity: .85; }
.app-wrapper { display: flex; min-height: 100vh; }
.sidebar {
width: var(--sidebar-width);
background: var(--bg-panel);
border-right: 1px solid var(--border);
padding: 16px 14px 24px;
position: fixed;
top: 52px; left: 0; bottom: 0;
display: flex; flex-direction: column;
z-index: 100;
transition: transform .3s ease;
overflow-y: auto;
scrollbar-width: thin;
}
.main-content {
flex: 1;
margin-left: var(--sidebar-width);
min-height: 100vh;
padding-top: 52px;
overflow-x: hidden;
}
body.ist-gast .main-content { overflow-x: clip; }
.content-area {
max-width: 640px;
width: 100%;
margin: 0 auto;
padding: 28px 18px 20px;
}
.content-area:has(.msg-split) { max-width: 1100px; }
.content-area:has(.explore-section) { max-width: 1100px; }
.content-area:has(.guest-explore-wrap) { max-width: 1100px; padding-left: 24px; padding-right: 24px; }
.content-area:has(.feed-posts-grid) { max-width: 1100px; }
.content-area:has(.perf-split-layout) { max-width: 1400px; }
.perf-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.perf-grid > * { min-width: 0; }
.perf-grid-full { grid-column: 1 / -1; }
.perf-kompass { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.perf-kompass[hidden] { display: none; }
.pk-kopf { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pk-titel { font-size: 15px; font-weight: 700; color: var(--text-main); }
.pk-sub { font-size: 12px; color: var(--text-muted); }
.pk-hinweis { opacity: .8; }
.pk-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pk-kachel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.pk-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pk-wert { font-size: 30px; font-weight: 800; line-height: 1.1; margin: 4px 0 3px; color: var(--text-main); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pk-klein { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.pk-auf .pk-wert { color: var(--accent-green); }
.pk-ab .pk-wert { color: var(--accent-red); }
.pk-leer .pk-wert { color: var(--text-muted); }
.pk-pfeil { font-size: .5em; vertical-align: .32em; margin-right: 6px; }
.pk-neu { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: var(--accent-yellow); color: #1a1405; font-weight: 800; }
.pk-hebel { margin-top: 12px; border-radius: 12px; padding: 14px 16px; border: 1px solid var(--border);
background: var(--surface); background: color-mix(in srgb, var(--accent) 9%, var(--card-bg));
border-color: color-mix(in srgb, var(--accent) 32%, var(--border)); }
.pk-hebel-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 700; margin-bottom: 4px; }
.pk-hebel-kopf { font-size: 17px; font-weight: 700; color: var(--text-main); line-height: 1.35; }
.pk-hebel-text { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; margin-top: 4px; }
.pk-hebel-text b { color: var(--text-main); }
.pk-gedimmt { color: var(--text-muted); }
.pk-tipp { margin-top: 10px; font-size: 13px; color: var(--text-main); line-height: 1.5; display: flex; gap: 8px; align-items: baseline; }
.pk-tipp span { flex: 0 0 auto; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--accent); border-radius: 5px; padding: 2px 6px; }
.pk-balken { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.pk-bz { display: grid; grid-template-columns: 140px minmax(0, 1fr) 74px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text-dim); }
.pk-bz.ist-top { color: var(--text-main); font-weight: 600; }
.pk-bh { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; }
.pk-bh span { display: block; height: 100%; border-radius: 999px; background: var(--text-muted); }
.pk-bz.ist-top .pk-bh span { background: var(--accent); }
.pk-bw { text-align: right; font-variant-numeric: tabular-nums; }
.pk-bfuss { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.pk-ziel { margin-top: 12px; }
.pk-ziel-text { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
.pk-ziel-text b { color: var(--accent-green); font-size: 15px; }
.pk-chart { display: block; width: 100%; height: 170px; margin-top: 10px; }
.pk-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.pk-legende span { display: inline-flex; align-items: center; gap: 6px; }
.pk-legende i { display: inline-block; }
.pk-l-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.pk-l-wk { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent); box-sizing: border-box; }
.pk-l-linie { width: 16px; height: 3px; border-radius: 2px; background: var(--accent); }
.perf-detail-titel { display: flex; align-items: baseline; gap: 8px; margin: 10px 2px 0; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.perf-detail-titel span { font-weight: 400; text-transform: none; letter-spacing: 0; }@media (max-width: 600px){
.pk-kacheln { grid-template-columns: 1fr 1fr; }
.pk-kacheln .pk-kachel:first-child { grid-column: 1 / -1; }
.pk-wert { font-size: 26px; }
.pk-bz { grid-template-columns: 104px minmax(0, 1fr) 62px; gap: 8px; }}@media (min-width: 1000px){
.perf-grid { grid-template-columns: 1fr 1fr; }}
.content-area:has(.profile-posts-grid) { max-width: 100%; padding-left: 20px; padding-right: 20px; }
.content-area:has(.profile-header)     { max-width: 100%; padding-left: 20px; padding-right: 20px; }
.content-area:has(.create-split-wrap) { max-width: 1200px; }
.content-area:has(.mc-vs) { max-width: 100%; padding-left: 24px; padding-right: 24px; }
.content-area:has(.ach-grid) { max-width: 1100px; }
.content-area:has(.about-card) { max-width: 1100px; }
.content-area:has(.articles-page-wrap) { max-width: 1100px; }
.content-area:has(.ev-page-wrap) { max-width: 100%; padding-left: 24px; padding-right: 24px; }@media (max-width: 600px){
.content-area:has(.ev-page-wrap) { padding-left: 10px; padding-right: 10px; }}
.content-area:has(.grp-grid) { max-width: 100%; padding-left: 24px; padding-right: 24px; }
.content-area:has(.grp-chat) { max-width: 100%; padding-left: 24px; padding-right: 24px; }
.content-area:has(.grp-detail-header) { max-width: 100%; padding-left: 24px; padding-right: 24px; }
.content-area:has(.mc-page-wrap) { max-width: 100%; padding-left: 24px; padding-right: 24px; }
.mc-page-columns { display: flex; flex-direction: column; gap: 16px; }@media(min-width:900px){
.mc-page-columns { flex-direction: row; gap: 24px; }
.mc-page-col-left { flex: 0 0 340px; position: sticky; top: 64px; align-self: flex-start; }
.mc-page-col-right { flex: 1; min-width: 0; }}
.explore-layout { display: flex; flex-direction: column; gap: 0; }
.explore-sidebar { }
.explore-main { }
.explore-posts-grid { columns: 2; column-gap: 14px; }
.explore-posts-grid > .post-card { break-inside: avoid; margin-bottom: 14px !important; display: inline-block; width: 100%; }@media (min-width: 1000px){ .explore-posts-grid { columns: 3; }}@media (max-width: 600px){ .explore-posts-grid { columns: 1; }}
.guest-explore-wrap .explore-posts-grid { columns: 2; column-gap: 18px; }@media (max-width: 600px){ .guest-explore-wrap .explore-posts-grid { columns: 1; }}
.feed-posts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.feed-posts-grid > .post-card { margin-bottom: 0 !important; width: 100%; min-width: 0; }@media (max-width: 700px){ .feed-posts-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }}
.group-posts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.group-posts-grid > .post-card { margin-bottom: 0 !important; width: 100%; min-width: 0; }@media (min-width: 1200px){ .group-posts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }}@media (max-width: 700px){ .group-posts-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }}
.sidebar-logo {
font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
font-size: 20px; color: var(--text-main);
margin-bottom: 20px;
display: flex; align-items: flex-end; gap: 0;
text-decoration: none; line-height: 1;
}
.sidebar-logo strong { font-weight: 800; letter-spacing: -.3px; }
.sidebar-group { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.sidebar-group:last-child { border-bottom: none; margin-bottom: 0; }
.sidebar-group-label {
font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
color: var(--text-muted); padding: 8px 14px 4px; opacity: 0.6;
}
details.sidebar-group > summary.sidebar-group-label {
display: flex; align-items: center; gap: 6px;
cursor: pointer; user-select: none; list-style: none;
padding: 10px 14px 6px;
transition: opacity .15s, color .15s;
}
details.sidebar-group > summary.sidebar-group-label::-webkit-details-marker { display: none; }
details.sidebar-group > summary.sidebar-group-label::after {
content: ""; margin-left: auto; width: 7px; height: 7px;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: rotate(45deg) translate(-1px, -1px);
transition: transform .18s ease;
}
details.sidebar-group[open] > summary.sidebar-group-label::after {
transform: rotate(-135deg) translate(-2px, -2px);
}
details.sidebar-group > summary.sidebar-group-label:hover { opacity: 1; color: var(--text-main); }
details.sidebar-group > summary.sidebar-group-label:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
details.sidebar-group:not([open]) { padding-bottom: 4px; }
details.sidebar-group > summary.sidebar-group-label.hat-neu { opacity: 1; }
.sidebar-group-label .sb-sum-badge { letter-spacing: 0; }
details.sidebar-group[open] > summary .sb-sum-badge { display: none; }
.sidebar .nav-link-mesh {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 14px;
color: var(--text-dim);
border-radius: var(--r);
font-size: 13px;
font-weight: 500;
transition: all .2s ease;
position: relative;
}
.sidebar .nav-link-mesh:hover { background: var(--element-bg); color: var(--text-main); }
.sidebar .nav-link-mesh.active {
background: rgba(59,130,246,.1);
color: var(--accent);
font-weight: 600;
}
.sidebar .nav-link-mesh.active svg { stroke: var(--accent); }
.sidebar .nav-link-mesh.active[style*="accent-purple"],
.sidebar .nav-link-mesh[style*="accent-purple"] {
--_c: 139,92,246;
}
.sidebar .nav-link-mesh.active[style*="accent-purple"] {
background: rgba(var(--_c),.1);
color: var(--accent-purple) !important;
}
.sidebar .nav-link-mesh.active[style*="accent-purple"] svg { stroke: var(--accent-purple); }
.sidebar .nav-link-mesh.active[style*="accent-yellow"] {
background: rgba(234,179,8,.08);
color: var(--accent-yellow) !important;
}
.sidebar .nav-link-mesh.active[style*="accent-yellow"] svg { stroke: var(--accent-yellow); }
.sidebar .nav-my10 {
color: #f2483b !important;
font-weight: 600;
background: linear-gradient(90deg, rgba(226,57,44,.12), rgba(226,57,44,.03));
border: 1px solid rgba(226,57,44,.22);
box-shadow: none;
overflow: hidden;
}
.sidebar .nav-my10::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: linear-gradient(180deg, #f2483b, #e2392c);
}
.sidebar .nav-my10:hover {
background: linear-gradient(90deg, rgba(226,57,44,.20), rgba(226,57,44,.06));
color: #e2392c !important;
border-color: rgba(226,57,44,.40);
}
.sidebar .nav-my10.active {
background: linear-gradient(90deg, rgba(226,57,44,.22), rgba(226,57,44,.07));
border-color: rgba(226,57,44,.45);
color: #e2392c !important;
}
.sidebar .nav-my10-ic {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
background: linear-gradient(180deg, #f2483b, #e2392c);
box-shadow: 0 2px 6px rgba(226,57,44,.35);
}
.sidebar .nav-my10-ic svg { width: 15px !important; height: 15px !important; stroke: #fff !important; }
.sidebar .nav-my10-t { flex: 1; }
.sidebar .nav-my10-badge {
font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
color: #e2392c; background: rgba(255,255,255,.92); border: 1px solid rgba(226,57,44,.35);
border-radius: 999px; padding: 2px 7px; flex-shrink: 0;
}
.sidebar .nav-link-mesh svg,
.sidebar svg {
width: 18px; height: 18px;
stroke: currentColor; stroke-width: 1.8; fill: none; flex-shrink: 0;
}
.nav-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px;
background: var(--accent-red); color: #fff;
font-size: 9px; font-weight: 700;
border-radius: 8px; padding: 0 4px;
margin-left: 6px;
}
.pro-chip {
display: inline-flex; align-items: center;
margin-left: auto;
padding: 1px 6px;
font-size: 9px; font-weight: 700; letter-spacing: .5px;
text-transform: uppercase;
color: #fff;
background: linear-gradient(180deg,
color-mix(in srgb, var(--accent) 78%, #fff),
var(--accent));
border-radius: 5px;
}@supports not (background: color-mix(in srgb, red 50%, blue)){
.pro-chip { background: var(--accent); }}
.sidebar-group-label .pro-chip { margin-left: 6px; opacity: 1; }
details.sidebar-group > summary.sidebar-group-label::after { margin-left: auto; }
.sidebar-user {
display: flex; align-items: center; gap: 10px;
margin-top: auto; padding-top: 16px;
border-top: 1px solid var(--border);
border-radius: var(--r);
transition: background var(--tr);
}
.sidebar-user.active { background: rgba(59,130,246,.05); border-top-color: rgba(59,130,246,.15); }
.sidebar-user-profile-link {
display: flex; align-items: center; gap: 10px;
text-decoration: none; color: inherit; flex: 1; min-width: 0;
border-radius: var(--r); padding: 6px;
transition: background .2s, transform .15s;
}
.sidebar-user-profile-link:hover { background: var(--element-bg); transform: translateX(2px); }
.sidebar-user-info { flex: 1; overflow: hidden; min-width: 0; }
.sidebar-user-name { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.sidebar-user-badges { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.avatar {
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--element-bg);
color: var(--text-muted);
font-weight: 700; font-size: 14px;
flex-shrink: 0;
position: relative;
transition: transform .2s ease, box-shadow .2s ease;
}
a:hover > .avatar, button:hover > .avatar {
transform: scale(1.08);
box-shadow: 0 0 0 2px var(--accent), 0 0 12px rgba(59,130,246,.15);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.online-dot {
position: absolute;
bottom: -1px; right: -1px;
width: 10px; height: 10px;
background: var(--accent-green);
border-radius: 50%;
border: 2px solid var(--bg-panel);
z-index: 2;
box-shadow: 0 0 6px rgba(34,197,94,.4);
}
.doc-process-indicator {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: auto;
flex-shrink: 0;
height: 20px;
padding: 0 6px;
border-radius: 10px;
font-family: 'Inter', sans-serif;
line-height: 1;
}
.doc-process-indicator.processing {
background: rgba(78, 168, 255, 0.12);
gap: 5px;
font-size: 9px;
color: var(--accent);
font-weight: 600;
letter-spacing: 0.02em;
}
.doc-process-indicator.processing::before {
content: '';
width: 10px; height: 10px;
border: 1.5px solid rgba(78, 168, 255, 0.25);
border-top-color: var(--accent);
border-radius: 50%;
animation: docSpin 0.7s linear infinite;
flex-shrink: 0;
}
.doc-process-indicator.done {
background: rgba(78, 189, 53, 0.12);
color: var(--accent-green);
font-size: 9px;
font-weight: 600;
gap: 4px;
letter-spacing: 0.02em;
}
.doc-process-indicator.done::before {
content: '✓';
font-size: 11px;
font-weight: 700;
}
@keyframes docSpin { to { transform: rotate(360deg); } }
.mobile-doc-spinner {
display: inline-block;
width: 16px; height: 16px;
border: 2px solid var(--border);
border-top-color: var(--accent);
border-radius: 50%;
animation: docSpin 0.7s linear infinite;
}
.avatar-xs .online-dot { width: 7px; height: 7px; border-width: 1.5px; }
.avatar-sm .online-dot { width: 8px; height: 8px; border-width: 1.5px; }
.avatar-lg .online-dot { width: 12px; height: 12px; }
.avatar-xl .online-dot { width: 14px; height: 14px; border-width: 3px; }
.avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-lg { width: 64px; height: 64px; font-size: 24px; }
.avatar-xl { width: 80px; height: 80px; font-size: 30px; }
.points-badge {
display: inline-flex; align-items: center; gap: 3px;
font-size: 10px; font-weight: 700;
color: var(--accent-yellow);
}
.points-badge svg { width: 12px; height: 12px; stroke: var(--accent-yellow); fill: none; }
.streak-badge {
display: inline-flex; align-items: center; gap: 2px;
font-size: 10px; font-weight: 700;
color: #f97316;
}
.streak-badge svg { width: 12px; height: 12px; stroke: #f97316; fill: none; }
.lvl-badge {
display: inline-flex; align-items: center; gap: 3px;
font-size: 9px; font-weight: 700;
padding: 2px 7px; border-radius: 6px;
}
.lvl-lg { font-size: 11px; padding: 2px 8px; }
.lvl-starter { background: rgba(160,160,160,.1); color: #a0a0a0; }
.lvl-bronze  { background: rgba(205,127,50,.1); color: #cd7f32; }
.lvl-silver  { background: rgba(192,192,192,.1); color: #c0c0c0; }
.lvl-gold    { background: rgba(240,180,41,.1); color: #f0b429; }
.lvl-platinum{ background: rgba(59,130,246,.1); color: var(--accent); }
.lvl-diamond { background: rgba(34,197,94,.1); color: var(--accent-green); }
.lvl-master  { background: rgba(139,92,246,.1); color: var(--accent-purple); }
.lvl-legend  { background: rgba(59,130,246,.12); color: var(--accent); animation: legendGlow 2.5s ease-in-out infinite; }
.badge-verified {
display: inline-flex; font-size: 9px;
color: var(--accent-green);
background: rgba(78,189,53,.1);
padding: 2px 6px; border-radius: 6px;
font-weight: 600;
}
.badge-admin { background: rgba(59,130,246,.12); color: var(--accent); border: 1px solid rgba(59,130,246,.25); }
.badge-banned { background: rgba(255,71,71,.12); color: #ff4747; border: 1px solid rgba(255,71,71,.25); }
.badge-shadow { background: rgba(240,180,41,.12); color: var(--accent-yellow); border: 1px solid rgba(240,180,41,.25); }
.page-title {
font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
font-size: 22px; font-weight: 700;
margin-bottom: 18px;
display: flex; align-items: center; gap: 8px;
letter-spacing: -0.02em;
}
.page-title svg { width: 22px; height: 22px; stroke: var(--accent); stroke-width: 2; fill: none; flex-shrink: 0; }
.page-header .page-title { margin-bottom: 0; }
.admin-card h4 svg { width: 16px; height: 16px; stroke: var(--accent); stroke-width: 2; fill: none; vertical-align: -2px; }
.page-header {
display: flex; align-items: center; gap: 10px;
margin-bottom: 20px;
}
.page-header .page-title { margin-bottom: 0; }
.empty-state {
text-align: center; padding: 56px 20px;
color: var(--text-muted);
}
.empty-state svg { width: 40px; height: 40px; stroke: var(--text-muted); fill: none; margin-bottom: 14px; opacity: 0.4; }
.empty-state h3 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.btn-icon {
background: none; border: none;
color: var(--text-muted);
cursor: pointer; padding: 4px;
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; transition: all var(--tr);
}
.btn-icon:hover { color: var(--text-main); transform: scale(1.1); }
.btn-icon svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; transition: all .2s; }
.btn-icon.liked { color: var(--accent-red); filter: drop-shadow(0 0 6px rgba(239,68,68,.4)); }
.btn-icon.liked svg { stroke: var(--accent-red); fill: var(--accent-red); animation: heartBeat .5s ease; }
.post-card {
background: transparent;
border: none;
border-bottom: 1px solid var(--border);
border-radius: 0;
margin-bottom: 0;
padding-bottom: 4px;
overflow: hidden;
animation: fadeUp .35s ease both;
transition: background .3s;
}
.post-card:hover { background: var(--depth-raised); }
.post-card:nth-child(2) { animation-delay: .04s; }
.post-card:nth-child(3) { animation-delay: .08s; }
.post-card:nth-child(4) { animation-delay: .12s; }
.explore-posts-grid .post-card {
background: var(--bg-panel) !important;
border: 1px solid var(--border) !important;
border-bottom: 1px solid var(--border) !important;
border-radius: var(--rl) !important;
padding-bottom: 0;
overflow: hidden !important;
display: inline-block;
width: 100%;
animation: none !important;
opacity: 1 !important;
transition: border-color .3s, box-shadow .3s, transform .2s;
}
.explore-posts-grid .post-card:hover {
border-color: var(--accent) !important;
box-shadow: var(--shadow-raised);
background: var(--bg-panel) !important;
}
.explore-posts-grid .post-header { padding: 9px 16px 8px; }
.explore-posts-grid .post-actions { padding: 10px 16px; }
.explore-posts-grid .post-caption { padding: 0 16px 12px; }
.explore-posts-grid .post-comments { padding: 0 16px 12px; }
.explore-posts-grid .comment-form { padding: 0 16px 12px; }
.profile-posts-grid .post-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--rl);
margin-bottom: 0;
padding-bottom: 0;
transition: border-color .3s, box-shadow .3s, transform .2s;
}
.profile-posts-grid .post-card:hover {
border-color: var(--accent) !important;
box-shadow: var(--shadow-raised);
}
.post-header {
display: flex; align-items: center; gap: 10px;
padding: 9px 16px 8px;
flex-wrap: nowrap;
max-height: 50px;
overflow: hidden;
}
.post-header > a:first-child { flex: 0 0 auto; }
.post-head-actions {
display: flex; align-items: center; gap: 4px;
flex: 0 0 auto; margin-left: auto;
}
.post-card { container-type: inline-size; container-name: postkarte; }@container postkarte (max-width: 460px){
.post-time { gap: 4px 8px; }
.post-time .pm-item + .pm-item::before { content: none; }}@container postkarte (max-width: 360px){
.btn-view-post .bvp-text { display: none; }
.btn-view-post { padding: 5px 9px; }
.post-header { padding: 8px 12px 7px; gap: 8px; }}
.post-user-info { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.post-username {
font-weight: 600; font-size: 13px;
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-username:hover { color: var(--accent); }
.post-time {
font-size: 10px; color: var(--text-muted);
display: flex; flex-wrap: wrap; align-items: center;
gap: 3px 0; min-width: 0;
max-height: 15px; overflow: hidden;
}
.post-time .pm-item {
display: inline-flex; align-items: center; gap: 4px;
min-width: 0; max-width: 100%;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.post-time .pm-item + .pm-item::before {
content: '·'; margin: 0 7px; opacity: .5; flex: 0 0 auto;
}
.post-time .pm-item svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2; fill: none; flex: 0 0 auto; }
.pm-pill {
display: inline-flex; align-items: center; gap: 3px;
font-size: 10px; padding: 1px 6px; border-radius: 4px;
font-weight: 600; text-decoration: none; white-space: nowrap;
}
.pm-pill-event { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-border); }
.pm-pill-duel  { background: rgba(124,58,237,.1); color: var(--accent-purple, #7c6ef0); border: 1px solid rgba(124,58,237,.3); }@media (max-width: 600px){
.post-time { gap: 4px 8px; }
.post-time .pm-item + .pm-item::before { content: none; }}
.post-image { width: 100%; display: block; cursor: pointer; height: auto; }
.post-image.target-image { height: auto; }
.post-actions {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px;
}
.profile-posts-grid .post-header { padding: 9px 16px 8px; }
.profile-posts-grid .post-actions { padding: 10px 16px; }
.profile-posts-grid .post-caption { padding: 0 16px 12px; }
.profile-posts-grid .post-comments { padding: 0 16px 12px; }
.profile-posts-grid .comment-form { padding: 0 16px 12px; }
.post-caption { padding: 0 16px 12px; font-size: 12px; line-height: 1.5; white-space: pre-line; }
.post-caption strong { font-weight: 600; margin-right: 4px; }
.htag { color: var(--accent); font-weight: 600; }
.htag:hover { text-decoration: underline; }
.post-delete { margin-left: auto; }
.post-comments { padding: 0 16px 12px; }
.comment { display: flex; gap: 7px; margin-bottom: 8px; align-items: flex-start; }
.comment-body { font-size: 11px; line-height: 1.5; padding-top: 1px; flex: 1; }
.comment-username { font-weight: 600; margin-right: 3px; color: var(--text-primary); text-decoration: none; }
.comment-username:hover { color: var(--accent); }
.comment-meta { display: flex; align-items: center; gap: 10px; margin-top: 1px; }
.comment-time { font-size: 9px; color: var(--text-muted); }
.comment-like-btn {
background: none; border: none; cursor: pointer; padding: 0; display: inline-flex;
align-items: center; gap: 2px; font-size: 9px; color: var(--text-muted); transition: color .15s;
}
.comment-like-btn svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; fill: none; }
.comment-like-btn:hover { color: var(--accent-red, #e74c3c); }
.comment-like-btn.liked { color: var(--accent-red, #e74c3c); }
.comment-like-btn.liked svg { fill: currentColor; }
.comment-flag-btn {
background: none; border: none; cursor: pointer; padding: 0;
color: var(--text-muted); opacity: 0; transition: opacity .15s, color .15s;
display: inline-flex; align-items: center;
}
.comment-flag-btn svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2; fill: none; }
.comment:hover .comment-flag-btn { opacity: .4; }
.comment-flag-btn:hover { opacity: 1 !important; color: var(--accent-red, #e74c3c); }
.comment-shadowed { opacity: .5; }
.post-views { font-size: 9px; color: var(--text-muted); }
.post-views svg { width: 10px; height: 10px; stroke: var(--text-muted); stroke-width: 2; fill: none; vertical-align: -1px; }
.view-comments { font-size: 11px; color: var(--accent); cursor: pointer; font-weight: 600; margin-bottom: 6px; }
.view-comments:hover { text-decoration: underline; }
.comment-hidden { display: none; }
.mention-wrap { position: relative; flex: 1; }
.mention-dropdown {
display: none; position: absolute; bottom: 100%; left: 0; right: 0;
background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--rs);
box-shadow: 0 -4px 16px rgba(0,0,0,.2); max-height: 200px; overflow-y: auto;
z-index: 100; margin-bottom: 4px;
}
.mention-item {
display: flex; align-items: center; gap: 8px; padding: 8px 12px;
cursor: pointer; transition: background .1s;
}
.mention-item:hover, .mention-item.active { background: var(--element-bg); }
.mention-av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mention-av-letter {
display: flex; align-items: center; justify-content: center;
background: var(--element-bg); color: var(--text-muted); font-weight: 700; font-size: 11px;
}
.mention-info { display: flex; flex-direction: column; }
.mention-name { font-size: 12px; font-weight: 600; }
.mention-handle { font-size: 10px; color: var(--text-muted); }
.mention-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.mention-link:hover { text-decoration: underline; }
.mention-dropdown-up { bottom: auto; top: 100%; margin-top: 4px; margin-bottom: 0; }
.caption-textarea + .mention-dropdown { bottom: auto; top: 100%; margin-top: 4px; margin-bottom: 0; }
.comment-form {
display: flex; padding: 0 16px 12px; gap: 8px;
}
.comment-form .mention-wrap { flex: 1; min-width: 0; }
.post-archive-btn { opacity: .3; transition: opacity .15s; }
.post-archive-btn:hover { opacity: 1; color: var(--accent-red, #e74c3c) !important; }
.post-archive-btn svg { width: 13px; height: 13px; }
.comment-input {
flex: 1; width: 100%;
background: var(--element-bg); border: none;
color: var(--text-main); font-size: 12px;
outline: none; padding: 8px 12px;
border-radius: 20px;
font-family: inherit;
transition: background var(--tr);
}
.comment-input:focus { background: var(--element-bg-hover); box-shadow: 0 0 12px rgba(59,130,246,.06); }
.comment-submit {
background: none; border: none;
color: var(--accent); font-weight: 600;
font-size: 12px; cursor: pointer;
font-family: inherit;
padding: 8px 4px;
transition: opacity var(--tr);
}
.comment-submit:hover { opacity: 0.8; }
.carousel-mesh { position: relative; overflow: hidden; transition: height .35s ease; width: 100%; min-height: 100px; }
.carousel-track { display: flex; align-items: flex-start; transition: transform .3s ease; transform: translateX(0); flex-wrap: nowrap; }
.carousel-slide { min-width: 100%; width: 100%; flex-shrink: 0; height: auto; display: block; object-fit: contain; }
.carousel-slide.target-image { height: auto; object-fit: contain; }
.carousel-btn {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(0,0,0,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
color: #fff; border: 1px solid rgba(255,255,255,.1);
width: 32px; height: 32px; min-width: 32px; min-height: 32px;
max-width: 32px; max-height: 32px;
border-radius: 50%; font-size: 18px;
cursor: pointer; display: flex;
align-items: center; justify-content: center;
transition: background .2s;
flex-shrink: 0; padding: 0; line-height: 1;
aspect-ratio: 1;
}
.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }
.carousel-dots {
display: flex; gap: 4px;
justify-content: center;
position: absolute; bottom: 8px;
width: 100%;
}
.carousel-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: rgba(255,255,255,.4);
cursor: pointer; transition: all var(--tr);
}
.carousel-dot.active { background: #fff; transform: scale(1.3); }
.post-type-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.post-type-tab {
flex: 1; min-width: 72px;
display: flex; flex-direction: column; align-items: center; gap: 5px;
padding: 10px 8px; border: 2px solid var(--border);
border-radius: var(--r); cursor: pointer;
background: var(--bg-panel-alt); color: var(--text-muted);
transition: all var(--tr); font-family: inherit;
}
.post-type-tab:hover { border-color: var(--border-light); color: var(--text-main); }
:root {
--wk-marke-bg: #eab308;
--wk-marke-fg: #1a1400;
--wk-flaeche: rgba(234,179,8,0.10);
--wk-rand: rgba(234,179,8,0.38);
--wk-schrift: #eab308;
}
[data-theme="light"] {
--wk-marke-bg: #d97706;
--wk-marke-fg: #ffffff;
--wk-flaeche: rgba(245,158,11,0.10);
--wk-rand: rgba(245,158,11,0.40);
--wk-schrift: #a15c07;
}
.post-type-tab { position: relative; }
.post-type-tab.pt-wk:not(.active) { border-color: var(--wk-rand); }
.pt-wk-marke {
position: absolute; top: -8px; right: -7px;
display: flex; align-items: center; justify-content: center;
width: 19px; height: 19px; border-radius: 50%;
background: var(--wk-marke-bg); color: var(--wk-marke-fg);
box-shadow: 0 0 0 2px var(--bg-panel);
}
.pt-wk-marke svg { width: 12px !important; height: 12px !important; stroke: currentColor; stroke-width: 2.6; }
.pt-wk-hinweis {
display: none; align-items: flex-start; gap: 8px;
margin-top: 8px; padding: 10px 12px; border-radius: var(--r);
font-size: 11.5px; line-height: 1.55;
background: var(--wk-flaeche); border: 1px solid var(--wk-rand);
color: var(--text-main);
}
.pt-wk-hinweis.an { display: flex; }
.pt-wk-hinweis svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; stroke: var(--wk-schrift); }
.pt-wk-hinweis b { font-weight: 700; color: var(--wk-schrift); }
.pt-wk-hinweis button {
margin-top: 7px; display: inline-flex; align-items: center; gap: 5px;
background: var(--wk-marke-bg); color: var(--wk-marke-fg);
border: none; border-radius: 6px; padding: 6px 11px;
font-size: 11px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.pt-wk-hinweis button:hover { filter: brightness(1.08); }
.pt-wk-hinweis button svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2.4; margin-top: 0; }
.pt-wk-hinweis button:hover { opacity: .88; }
.post-type-tab.active { border-color: var(--accent); background: rgba(59,130,246,.07); color: var(--accent); }
.post-type-tab.disabled { opacity: .35; cursor: not-allowed; }
.post-type-tab svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.post-type-label { font-size: 11px; font-weight: 600; }
.post-header-top { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.post-header-top > .post-username { flex: 0 1 auto; }
.post-header-top > .lvl-badge,
.post-header-top > .post-type-pill,
.post-header-top > .pb-badge,
.post-header-top > .pin-badge,
.post-header-top > .grp-post-badge { flex: 0 0 auto; white-space: nowrap; }
.post-type-pill {
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 8px; border-radius: 6px; font-size: 9px;
font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
border: none; line-height: 1.4;
}
.post-type-pill svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.post-type-pill-scatt   { color: var(--accent); background: rgba(59,130,246,.1); }
.post-type-pill-meshpro { color: #a78bfa; background: rgba(167,139,250,.1); }
.post-type-pill-print   { color: var(--accent-green); background: rgba(34,197,94,.1); }
.post-type-pill-target  { color: #f59e0b; background: rgba(245,158,11,.08); }
.post-type-pill-qr      { color: #8b5cf6; background: rgba(139,92,246,.1); }
.post-type-pill-lasertarget,
.post-type-pill-multiplayer { color: var(--accent-red, #ef4444); background: rgba(239,68,68,.10); }
.post-type-pill-lasertarget::before,
.post-type-pill-multiplayer::before {
content: ''; width: 6px; height: 6px; border-radius: 50%;
background: currentColor; flex: 0 0 auto;
}
.post-discipline { color: var(--accent); font-weight: 600; text-decoration: none; }
.post-discipline:hover { text-decoration: underline; }
.btn-view-post {
display: flex; align-items: center; gap: 4px;
padding: 5px 12px; border-radius: 20px;
border: 1px solid rgba(59,130,246,.3); color: var(--accent);
background: rgba(59,130,246,.06); font-size: 10px; font-weight: 600;
cursor: pointer; transition: all var(--tr); font-family: inherit;
flex-shrink: 0;
}
.btn-view-post:hover { background: rgba(59,130,246,.12); border-color: var(--accent); box-shadow: 0 0 12px rgba(59,130,246,.2); transform: translateY(-1px); }
.btn-view-post svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }
.scatt-viewer-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.88);
z-index: 2000; display: flex; align-items: stretch; justify-content: center;
overscroll-behavior: contain;
animation: fadeIn .15s ease;
padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0) 0;
}
.scatt-viewer-modal {
position: relative; width: 90%; max-width: 1800px;
display: flex; flex-direction: column; background: var(--bg-main, #0c0e13);
}@media (max-width: 900px){ .scatt-viewer-modal { width: 100%; }}
.scatt-viewer-frames { display: flex; flex: 1; min-height: 0; }
.scatt-viewer-frames.scatt-viewer-split .scatt-viewer-iframe { width: 50%; border-right: 1px solid rgba(255,255,255,.1); }
.scatt-viewer-frames.scatt-viewer-split .scatt-viewer-iframe:last-child { border-right: none; }
.scatt-viewer-iframe { flex: 1; border: none; width: 100%; height: 100%; display: block; }
.viewer-stub-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.7);
z-index: 2000; display: flex; align-items: center; justify-content: center;
}
.viewer-stub-modal {
background: var(--bg-panel); border: 1px solid var(--border);
border-radius: var(--rl); padding: 36px 28px; text-align: center;
max-width: 340px; width: 90%; animation: scaleIn .2s ease;
}
.viewer-stub-modal h3 { margin: 0 0 8px; font-size: 18px; }
.viewer-stub-modal p { color: var(--text-muted); font-size: 13px; margin: 0 0 22px; }
.viewer-stub-modal button {
padding: 9px 24px; background: var(--accent); color: #fff;
border: none; border-radius: var(--r); cursor: pointer; font-size: 13px;
}
.viewer-stub-modal button:hover { opacity: .85; }
.share-wrap { position: relative; }
.share-dropdown {
display: none;
position: absolute; bottom: calc(100% + 6px);
left: 50%; transform: translateX(-50%);
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 6px; min-width: 200px;
z-index: 50; box-shadow: var(--shadow);
animation: scaleIn .15s ease;
}
.share-dropdown.open { display: block; }
.share-apps { display: flex; gap: 4px; justify-content: center; padding: 4px 2px; }
.share-app {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--bg-panel-alt);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all var(--tr); padding: 0;
}
.share-app:hover { transform: scale(1.12); }
.share-app svg { width: 18px; height: 18px; fill: var(--text-muted); stroke: none; }
.share-app:hover svg { fill: #fff; }
.share-app:nth-child(1):hover { background:#25d366; border-color:#25d366; }
.share-app:nth-child(2):hover { background:#0088cc; border-color:#0088cc; }
.share-app:nth-child(3):hover { background:#1d9bf0; border-color:#1d9bf0; }
.share-app:nth-child(4):hover { background:#1877f2; border-color:#1877f2; }
.share-app:nth-child(5):hover { background:var(--accent); border-color:var(--accent); }
.share-divider { height: 1px; background: var(--border); margin: 4px 0; }
.share-opt {
display: flex; align-items: center; gap: 8px;
width: 100%; padding: 8px 10px;
background: none; border: none;
color: var(--text-muted); font-size: 11px;
font-weight: 500; cursor: pointer;
border-radius: var(--rs); transition: all var(--tr);
text-align: left; font-family: inherit;
}
.share-opt:hover { background: var(--bg-panel-alt); color: var(--text-main); }
.share-opt svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; }
.share-toast {
position: fixed; bottom: 80px;
left: 50%; transform: translateX(-50%);
background: var(--accent-green); color: #fff;
padding: 8px 18px; border-radius: 20px;
font-size: 12px; font-weight: 600;
z-index: 999; animation: fadeUp .3s ease;
pointer-events: none;
}
.like-burst {
position: fixed; pointer-events: none;
font-size: 48px; animation: heartFloat .8s ease forwards;
z-index: 9999;
}
.auth-wrap {
min-height: 100vh;
min-height: 100dvh;
display: flex; align-items: center; justify-content: center;
padding: 20px;
padding-top: calc(20px + env(safe-area-inset-top, 0px));
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
background: linear-gradient(135deg, rgba(0,102,204,.08) 0%, transparent 50%, rgba(124,110,240,.06) 100%);
}
.auth-card {
width: 100%; max-width: 380px;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--rl);
padding: 36px 28px;
box-shadow: 0 8px 32px rgba(0,0,0,.3);
animation: scaleIn .4s ease;
}
.auth-title {
font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
font-size: 22px; text-align: center; margin-bottom: 4px;
}
.auth-subtitle { text-align: center; font-size: 12px; color: var(--text-muted); margin-bottom: 24px; }
.auth-links { display: flex; justify-content: center; gap: 16px; margin-top: 16px; font-size: 12px; }
.auth-links a:hover { color: var(--accent); }
.auth-link { text-align: center; margin-top: 16px; font-size: 12px; }
.auth-link a:hover { color: var(--accent); }
.dev-hint { font-size: 10px; color: var(--text-muted); text-align: center; margin-top: 12px; }
.dev-hint code { color: var(--accent); }
.verify-card {
max-width: 400px; margin: 20vh auto;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--rl);
padding: 40px 28px; text-align: center;
animation: scaleIn .4s ease;
}
.verify-card .icon-wrap { margin-bottom: 16px; }
.verify-card .icon-wrap svg { width: 48px; height: 48px; stroke: var(--accent); fill: none; }
.verify-card h2 { font-family: 'Space Grotesk', sans-serif; font-size: 20px; margin-bottom: 8px; }
.verify-card .email-highlight { color: var(--accent); font-weight: 600; font-size: 14px; }
.verify-card .actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.profile-cover-wrap {
position: relative;
width: 100%;
margin-top: -28px;
margin-bottom: 0;
border-radius: 14px;
overflow: hidden;
background: var(--bg);
--cover-h: clamp(160px, 24vw, 300px);
}
[data-theme="light"] .profile-cover-wrap {
background: var(--bg);
}
.profile-cover-wrap::before {
content: '';
display: block;
height: var(--cover-h);
}
.profile-cover-bg {
position: absolute;
top: 0; left: 0; right: 0;
height: var(--cover-h);
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
filter: blur(24px) saturate(1.2) brightness(0.7);
transform: scale(1.15);
z-index: 0;
pointer-events: none;
}
.profile-cover-img {
position: absolute;
top: 0; left: 0; right: 0;
height: var(--cover-h);
width: 100%;
object-fit: contain;
object-position: center center;
z-index: 1;
border-radius: 0;
}
.profile-cover-img.cover-fuellt {
object-fit: cover;
object-position: center 40%;
}
.profile-cover-fade {
position: absolute;
top: 0; left: 0; right: 0;
height: var(--cover-h);
background: linear-gradient(to bottom, rgba(9,9,11,0.22) 0%, transparent 28%, transparent 52%, rgba(9,9,11,0.72) 100%);
z-index: 2;
border-radius: 0;
pointer-events: none;
}
.profile-cover-wrap .profile-header {
position: relative;
z-index: 2;
margin: -60px 16px 0;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--rl);
padding: 0 20px 20px;
}
.profile-header {
position: relative;
z-index: 2;
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 10px; margin-bottom: 20px; padding: 0 0 20px;
}
.profile-avatar-col {
flex-shrink: 0;
position: relative;
padding: 4px;
background: var(--gradient-accent);
border-radius: 50%;
box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 20px rgba(59,130,246,.15);
transition: box-shadow .3s, transform .3s;
margin-top: -56px;
}
.profile-cover-wrap .profile-avatar-col { margin-top: -56px; }
.profile-avatar-col:hover {
box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 28px rgba(59,130,246,.3);
transform: scale(1.03);
}
.profile-avatar-col .avatar-xl {
width: 112px; height: 112px; font-size: 42px;
border: 4px solid var(--bg-main);
}
.profile-avatar-col .avatar-xl .online-dot { width: 18px; height: 18px; border-width: 3.5px; }
.profile-info-col { min-width: 0; width: 100%; padding-top: 8px; }
.profile-name-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.profile-name { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
.profile-handle { font-size: 12px; color: var(--text-muted); margin-top: 2px; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.profile-club {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 6px; padding: 4px 12px 4px 6px;
background: var(--element-bg); border: 1px solid var(--border);
border-radius: 20px; font-size: 11px; color: var(--text-dim);
}
.profile-club img { width: 20px; height: 20px; border-radius: 4px; object-fit: contain; }
.profile-bio {
font-size: 13px; line-height: 1.6; margin-top: 8px; color: var(--text-dim);
max-width: 380px; margin-left: auto; margin-right: auto;
}
.profile-stats {
display: flex; gap: 0; margin-top: 14px; justify-content: center;
background: transparent; border: none;
border-radius: 0; overflow: visible;
}
.profile-stats > div, .profile-stats > a {
flex: 1; padding: 8px 12px; text-decoration: none; color: inherit;
transition: opacity .2s; text-align: center;
}
.profile-stats > a:hover { opacity: 0.7; }
.profile-stats > div + div, .profile-stats > div + a, .profile-stats > a + div, .profile-stats > a + a {
border-left: 1px solid var(--border);
}
.stat-number { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 800; }
.stat-label { font-size: 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .8px; margin-top: 2px; }
.profile-badges-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.profile-badge-card {
display: flex; flex-direction: column; align-items: center; gap: 2px;
background: var(--element-bg); border: 1px solid var(--border);
border-radius: var(--r); padding: 8px 14px;
transition: border-color .2s, transform .2s;
}
.profile-badge-card:hover { border-color: var(--border-light); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.profile-badge-label {
font-size: 9px; color: var(--text-muted);
text-transform: uppercase; letter-spacing: .5px;
}
.profile-actions {
display: flex; gap: 8px; align-items: center; justify-content: center;
margin-top: 12px; flex-wrap: wrap;
}
.profile-actions .btn-follow {
border-radius: 10px; font-size: 12px; padding: 8px 18px; font-weight: 600;
}
.profile-actions .btn-icon {
opacity: 0.4; transition: all .2s;
width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; background: var(--element-bg);
}
.profile-actions .btn-icon:hover { opacity: 1; background: var(--element-bg-hover); }
.profile-tabs {
display: flex; margin-bottom: 16px; gap: 4px; flex-wrap: wrap;
padding: 4px; background: var(--element-bg); border-radius: var(--r);
}
.profile-tab {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 10px 8px; font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: .5px; color: var(--text-muted); background: none; border: none;
border-radius: calc(var(--r) - 2px); cursor: pointer; transition: all .2s;
}
.profile-tab svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.profile-tab:hover { color: var(--text-main); }
.profile-tab.active { color: var(--accent); background: var(--bg-panel); box-shadow: 0 1px 3px rgba(0,0,0,.2), 0 0 8px rgba(59,130,246,.08); }
.profile-tab.active svg { stroke: var(--accent); }
.profile-tab-panel { display: none; }
.profile-tab-panel.active { display: block; }
.profile-posts-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 14px;
align-items: start;
min-width: 0;
}
.profile-posts-grid .post-card {
margin: 0 !important; min-width: 0;
}@media (min-width: 900px){ .profile-posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }}@media (min-width: 1400px){ .profile-posts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }}
.fr-row {
display: flex; align-items: center; gap: 10px; padding: 10px 12px;
background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r);
}
.fr-row .btn { flex-shrink: 0; }@media (max-width: 480px){
.fr-row { flex-wrap: wrap; }
.fr-row .btn { flex: 1; }}@media (max-width: 600px){
.profile-posts-grid { grid-template-columns: minmax(0, 1fr); }
.profile-tab { font-size: 10px; padding: 10px 4px; }
.profile-tabs { flex-wrap: wrap; }
.profile-tab { flex: 1 1 auto; padding: 9px 10px; }}
.btn-follow {
padding: 7px 20px; border-radius: 20px;
font-size: 12px; font-weight: 600;
border: 1px solid var(--accent); cursor: pointer;
font-family: inherit; transition: all var(--tr);
}
.btn-follow:active { transform: scale(0.93); }
.btn-follow.not-following { background: var(--gradient-accent); border-color: transparent; color: #fff; box-shadow: 0 2px 8px rgba(59,130,246,.15); }
.btn-follow.not-following:hover { box-shadow: 0 0 16px rgba(59,130,246,.25), 0 4px 12px rgba(59,130,246,.15); transform: translateY(-1px); }
.btn-follow.following { background: transparent; color: var(--text-dim); border-color: var(--border-light); }
.btn-follow.following:hover { border-color: var(--accent-red); color: var(--accent-red); background: rgba(239,68,68,.06); }
.search-box {
display: flex; align-items: center; gap: 8px;
background: var(--element-bg);
border: 1px solid var(--border);
border-radius: 24px;
padding: 8px 16px; margin-bottom: 20px;
transition: border-color var(--tr);
}
.search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 16px rgba(59,130,246,.12); }
.search-box svg { width: 16px; height: 16px; stroke: var(--text-muted); fill: none; flex-shrink: 0; }
.search-box input {
flex: 1; background: transparent !important; border: none !important;
color: var(--text-main); font-size: 13px;
outline: none; font-family: inherit;
box-shadow: none !important;
}
.explore-section { margin-bottom: 24px; }
.explore-section h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: 15px; font-weight: 700; margin-bottom: 12px;
}
.explore-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.explore-section-head h3 { margin-bottom: 0; }
.suggest-scroll {
display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 8px;
scrollbar-width: none; -ms-overflow-style: none;
}
.suggest-scroll::-webkit-scrollbar { display: none; }
.suggest-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--rl);
padding: 16px; text-align: center;
min-width: 120px; flex-shrink: 0;
display: flex; flex-direction: column; align-items: center;
transition: border-color .2s, transform .2s, box-shadow .2s;
position: relative; z-index: 1;
}
.suggest-card:hover { border-color: var(--border-light); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.15); z-index: 2; }
.suggest-avatar-link { display: flex; justify-content: center; }
.suggest-name { font-weight: 600; font-size: 12px; margin-top: 8px; color: var(--text-primary); text-decoration: none; }
.suggest-name:hover { color: var(--accent); }
.suggest-handle { font-size: 10px; color: var(--text-muted); margin-bottom: 8px; text-decoration: none; }
.suggest-handle:hover { color: var(--accent); }
.trending-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.trending-tag {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 12px; background: var(--element-bg);
border: 1px solid var(--border); border-radius: 20px;
font-size: 12px; font-weight: 600;
color: var(--accent); transition: all var(--tr);
}
.trending-tag:hover { border-color: var(--accent); background: rgba(59,130,246,.08); box-shadow: 0 0 10px rgba(59,130,246,.12); transform: translateY(-1px); }
.trending-count { font-size: 10px; color: var(--text-muted); font-weight: 400; }
.create-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--rl);
padding: 24px;
}
.create-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 18px; margin-bottom: 20px; }
.create-section-label {
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .06em;
color: var(--text-muted); margin-bottom: 8px;
display: flex; align-items: center; gap: 6px;
}
.create-section-label svg {
width: 14px; height: 14px; stroke: var(--text-muted); stroke-width: 2; fill: none; flex-shrink: 0;
}
.create-section-label .scatt-optional { text-transform: none; letter-spacing: 0; }
.create-divider { height: 1px; background: var(--border); margin: 16px 0; }
.upload-area {
border: 2px dashed var(--border-light);
border-radius: var(--r);
padding: 32px; text-align: center;
color: var(--text-muted);
cursor: pointer; position: relative;
transition: all var(--tr); margin-bottom: 16px;
}
.upload-area:hover, .upload-area.drag-over { border-color: var(--accent); background: rgba(59,130,246,.05); }
.upload-area svg { width: 32px; height: 32px; stroke: var(--border-light); fill: none; margin-bottom: 6px; }
.upload-area input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-previews {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
gap: 8px; margin-bottom: 12px;
}
.preview-item {
position: relative; aspect-ratio: 1;
border-radius: var(--r); overflow: hidden;
background: var(--bg); border: 1px solid var(--border);
}
.preview-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s; }
.preview-item:hover .preview-thumb { opacity: .7; }
.preview-remove {
position: absolute; top: 4px; right: 4px;
width: 20px; height: 20px; border-radius: 50%;
background: rgba(0,0,0,.65); border: none;
color: #fff; font-size: 13px; line-height: 1;
display: flex; align-items: center; justify-content: center;
cursor: pointer; opacity: 0; transition: opacity .15s; padding: 0;
}
.preview-item:hover .preview-remove { opacity: 1; }
.upload-add-more {
aspect-ratio: 1; border: 2px dashed var(--border);
border-radius: var(--r);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; color: var(--text-muted); font-size: 11px;
cursor: pointer; position: relative; transition: all var(--tr);
}
.preview-edit {
position: absolute; bottom: 4px; right: 4px;
width: 24px; height: 24px; border-radius: 50%;
background: rgba(0,0,0,.6); color: #fff; border: none;
display: flex; align-items: center; justify-content: center;
cursor: pointer; opacity: 0; transition: opacity .15s;
}
.preview-edit svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 2; fill: none; }
.preview-item:hover .preview-edit { opacity: 1; }
.img-editor-overlay {
display: none; position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,.8); backdrop-filter: blur(4px);
align-items: center; justify-content: center; padding: 16px;
}
.img-editor-overlay.open { display: flex; }
.img-editor {
background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--rl);
padding: 20px; max-width: 760px; width: 100%;
animation: authPopIn .25s ease;
max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
overflow-y: auto; overscroll-behavior: contain;
}@media (max-width: 480px){
.img-editor-overlay { padding: 8px; }
.img-editor { padding: 14px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }}
.img-editor-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.img-editor-title { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; }
.img-editor-canvas {
display: block; margin: 0 auto; border-radius: var(--rs);
cursor: crosshair; max-width: 100%;
}
.img-editor-tools {
display: flex; gap: 8px; align-items: center; justify-content: center;
margin-top: 12px; flex-wrap: wrap;
}
.img-editor-btn {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 12px; background: var(--element-bg); border: 1px solid var(--border);
border-radius: var(--rs); color: var(--text-primary); font-size: 11px;
cursor: pointer; transition: all .15s;
}
.img-editor-btn:hover { border-color: var(--accent); color: var(--accent); }
.img-editor-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.img-editor-btn input[type=range] { width: 80px; height: 3px; margin-left: 4px; vertical-align: middle; }
.img-editor-crop-info {
text-align: center; font-size: 10px; color: var(--text-muted); margin-top: 6px;
font-family: 'JetBrains Mono', monospace;
}
.img-editor-hint {
margin-top: 10px; padding: 8px 10px;
background: rgba(59,130,246,.08);
border: 1px solid rgba(59,130,246,.18);
border-radius: var(--rs, 8px);
font-size: 11.5px; line-height: 1.45; color: var(--text-muted);
text-align: center;
}
.img-editor-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.post-preview-overlay {
display: none; position: fixed; inset: 0; z-index: 9998;
background: rgba(0,0,0,.7); backdrop-filter: blur(4px);
align-items: center; justify-content: center; padding: 20px;
overflow-y: auto;
}
.post-preview-overlay.open { display: flex; }
.post-preview-modal {
width: 100%; max-width: 480px;
background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--rl);
padding: 16px; animation: authPopIn .25s ease;
}
.post-preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.prev-image-area { position: relative; }
.prev-carousel {
display: flex; overflow: hidden; scroll-behavior: smooth;
}
.prev-carousel-img {
min-width: 100%; max-width: 100%; max-height: 400px;
object-fit: contain; flex-shrink: 0;
background: var(--bg-main); display: block;
}
.prev-nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 32px; height: 32px; border-radius: 50%;
background: rgba(0,0,0,.5); color: #fff; border: none;
font-size: 18px; cursor: pointer; display: flex;
align-items: center; justify-content: center;
transition: background .15s; z-index: 2;
}
.prev-nav:hover { background: rgba(0,0,0,.8); }
.prev-nav-left { left: 8px; }
.prev-nav-right { right: 8px; }
.prev-dots {
display: flex; justify-content: center; gap: 5px;
padding: 8px 0 2px; position: absolute; bottom: 6px; left: 0; right: 0;
}
.prev-dot {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(255,255,255,.4); transition: background .15s;
}
.prev-dot.active { background: #fff; }
.upload-add-more:hover { border-color: var(--accent); color: var(--accent); }
.upload-add-more svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
.upload-add-more input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-count { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-bottom: 8px; }
.scatt-upload-area {
border: 2px dashed rgba(124,58,237,.4);
border-radius: var(--r);
padding: 16px 24px; text-align: center;
color: var(--text-muted);
background: rgba(124,58,237,.04);
cursor: pointer; position: relative;
transition: all .2s ease; margin-bottom: 10px;
}
.scatt-upload-area:hover { border-color: #7c3aed; background: rgba(124,58,237,.1); box-shadow: 0 0 0 4px rgba(124,58,237,.08); }
.scatt-upload-area.drag-over { border-color: #7c3aed; background: rgba(124,58,237,.15); box-shadow: 0 0 0 6px rgba(124,58,237,.12); border-style: solid; transform: scale(1.01); }
.scatt-upload-area.scatt-has-file { border-color: #7c3aed; background: rgba(124,58,237,.05); }
.scatt-upload-area svg { width: 24px; height: 24px; stroke: rgba(124,58,237,.5); fill: none; margin-bottom: 4px; }
.scatt-upload-area p { margin: 2px 0; font-size: 13px; }
.scatt-upload-area input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.scatt-optional { font-size: 11px; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.scatt-formats { font-size: 11px; color: var(--text-muted); letter-spacing: .03em; }
.scatt-selected { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #7c3aed; background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.25); border-radius: var(--rs); padding: 6px 10px; margin-bottom: 10px; }
.scatt-selected span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scatt-clear { background: none; border: none; color: var(--text-muted); font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1; }
.scatt-clear:hover { color: var(--text); }
.scatt-processing { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); padding: 8px 0; }
.scatt-processing svg { width: 16px; height: 16px; stroke: var(--accent); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-loading { opacity: 0.7; pointer-events: none; display: inline-flex !important; align-items: center; gap: 6px; justify-content: center; }
.btn-loading svg { width: 16px; height: 16px; stroke: currentColor; animation: spin 1s linear infinite; flex-shrink: 0; }
.scatt-preview-result { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.scatt-preview-result img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--rs); border: 1px solid var(--border); }
.scatt-preview-label { font-size: 11px; color: var(--accent-green); display: flex; align-items: center; gap: 4px; }
.scatt-preview-label svg { width: 14px; height: 14px; stroke: var(--accent-green); }
.target-file-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.target-file-item {
display: flex; align-items: center; gap: 10px;
background: var(--element-bg); border: 1px solid var(--border); border-radius: var(--rs);
padding: 6px 10px;
}
.target-file-item img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--rs); }
.target-file-info { font-size: 11px; color: var(--text-dim); flex: 1; }
.target-file-edit {
display: inline-flex; align-items: center; gap: 4px;
background: var(--surface2); border: 1px solid var(--border); border-radius: 6px;
padding: 5px 10px; cursor: pointer; font-size: 11px; font-weight: 600;
color: var(--text); transition: all 0.15s;
flex-shrink: 0;
}
.target-file-edit:hover { border-color: var(--accent); color: var(--accent); }
.target-file-edit svg { width: 12px; height: 12px; }
.event-comment {
display: flex; gap: 8px; padding: 8px 0;
border-bottom: 1px solid var(--border);
}
.event-comment:last-child { border-bottom: none; }
.event-comment-body { flex: 1; min-width: 0; }
.event-comment-user { font-weight: 600; font-size: 12px; color: var(--text-main); text-decoration: none; }
.event-comment-user:hover { color: var(--accent); }
.event-comment-time { font-size: 10px; color: var(--text-muted); margin-left: 6px; }
.event-comment-text { font-size: 13px; color: var(--text-main); margin-top: 3px; line-height: 1.5; }
.event-comment-actions {
display: flex; gap: 2px; margin-top: 4px;
opacity: 0; transition: opacity 0.15s;
}
.event-comment:hover .event-comment-actions { opacity: 1; }
.event-comment-actions .vc-action-btn {
background: none; border: none; color: var(--text-muted);
font-size: 11px; cursor: pointer; padding: 1px 4px; border-radius: 3px;
transition: color 0.12s, background 0.12s;
}
.event-comment-actions .vc-action-btn:hover { color: var(--text); background: var(--surface2); }
.event-comment-actions .vc-del:hover { color: var(--accent-red); }
.target-file-remove {
background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer;
padding: 0 4px; line-height: 1; transition: color .15s;
}
.target-file-remove:hover { color: var(--accent-red, #e74c3c); }
.caption-wrap { position: relative; }
.caption-wrap .form-control { padding-bottom: 24px; }
.caption-count { position: absolute; bottom: 10px; right: 10px; font-size: 10px; color: var(--text-muted); pointer-events: none; transition: color .15s; }
.caption-count.near-limit { color: #f59e0b; }
.caption-count.at-limit { color: #ef4444; }
.notif-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
transition: background var(--tr);
}
.notif-item:hover { background: var(--bg-panel-alt); }
.notif-item.unread { background: rgba(59,130,246,.05); }
.notif-text { flex: 1; font-size: 12px; }
.notif-text strong a:hover { color: var(--accent); }
.notif-view-post { color: var(--accent); text-decoration: none; font-weight: 600; margin-left: 4px; font-size: 13px; }
.notif-view-post:hover { text-decoration: underline; }
.notif-time { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
a.notif-item, a.notif-item:hover { color: inherit; text-decoration: none; }
.notif-item .notif-text { min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.ms-zeichen { display: flex; align-items: center; justify-content: center; font-size: 16px; background: var(--element-bg); }
.ms-ent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 7px; }
.ms-ent[aria-busy="true"] { opacity: .65; }
.ms-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.ms-knopf {
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
min-height: 30px; padding: 0 13px; border-radius: 8px; border: 1px solid transparent;
font: inherit; font-size: 11.5px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer;
transition: background .15s, border-color .15s, color .15s, transform .1s;
-webkit-tap-highlight-color: transparent;
}
.ms-ja, .ms-ja:hover { background: var(--accent); color: #fff; }
.ms-ja:hover { filter: brightness(1.08); }
.ms-nein, .ms-zweit { background: transparent; color: var(--text-main); border-color: var(--border); }
.ms-nein:hover, .ms-zweit:hover { background: var(--element-bg); color: var(--text-main); }
.ms-knopf:active { transform: scale(.96); }
.ms-knopf:disabled { opacity: .5; cursor: default; transform: none; }
.ms-knopf:focus-visible, .ms-weiter:focus-visible, a.ms-hinweis:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ms-stand { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.ms-stand.ok { color: var(--accent-green); }
.ms-stand svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ms-weiter { font-size: 11.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.ms-weiter:hover { text-decoration: underline; }
.ms-hinweis { flex-basis: 100%; font-size: 11px; color: var(--text-muted); }
a.ms-hinweis { flex-basis: auto; color: var(--text-muted); text-decoration: underline; }
.ms-fehler { flex-basis: 100%; font-size: 11px; font-weight: 600; color: var(--accent-red); }@media (pointer: coarse){ .ms-knopf { min-height: 40px; padding: 0 16px; }}
.notif-popup {
display: none;
position: fixed; top: 52px; right: 8px;
width: 340px; max-width: calc(100vw - 16px);
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--rl);
box-shadow: var(--shadow);
z-index: 120;
animation: scaleIn .15s ease;
overflow: hidden;
}
.notif-popup.open { display: flex; flex-direction: column; }
.notif-popup-header {
display: flex; align-items: center; justify-content: space-between;
padding: 12px 14px 10px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.notif-popup-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 14px; font-weight: 700;
}
.notif-mark-all {
font-size: 11px; color: var(--accent);
background: none; border: none; cursor: pointer;
font-family: inherit; padding: 0;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-popup-body {
overflow-y: auto; max-height: calc(100vh - 120px);
}
.notif-popup-loading {
display: flex; align-items: center; justify-content: center;
padding: 32px; color: var(--text-muted);
}
.notif-popup-loading svg {
width: 28px; height: 28px; stroke: currentColor;
stroke-width: 1.5; fill: none; opacity: .4;
}
.notif-popup-empty {
padding: 32px 14px; text-align: center;
color: var(--text-muted); font-size: 13px;
}
.notif-load-more {
display: block; width: 100%; padding: 10px;
background: none; border: none; border-top: 1px solid var(--border);
color: var(--accent); font-size: 12px; font-weight: 600;
cursor: pointer; transition: background var(--tr);
}
.notif-load-more:hover { background: var(--element-bg); }
.conv-list a { text-decoration: none; }
.conv-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-radius: var(--r);
transition: background var(--tr);
}
.conv-item:hover { background: var(--bg-panel-alt); }
.conv-item.unread { background: rgba(59,130,246,.05); }
.conv-info { flex: 1; overflow: hidden; min-width: 0; }
.conv-name { font-weight: 600; font-size: 13px; }
.conv-preview { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-time { font-size: 9px; color: var(--text-muted); white-space: nowrap; }
.conv-meta {
flex-shrink: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 4px;
min-width: 34px; padding-left: 6px; text-align: right;
}
.conv-unread { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; margin: 0; }
.chat-container {
display: flex; flex-direction: column;
height: calc(100vh - 120px);
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--rl);
overflow: hidden;
}
.chat-header {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.chat-header svg { width: 18px; height: 18px; stroke: var(--text-muted); fill: none; cursor: pointer; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; }
.msg {
max-width: 75%; padding: 8px 12px;
border-radius: var(--rl); margin-bottom: 6px;
font-size: 13px; line-height: 1.5;
overflow-wrap: anywhere;
min-width: 0;
}
.msg-sent { background: var(--accent); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.msg-received { background: var(--bg-panel-alt); color: var(--text-main); border-bottom-left-radius: 4px; }
.msg-time { font-size: 9px; opacity: .7; margin-top: 2px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.msg-action-btn { background: none; border: none; cursor: pointer; opacity: 0; padding: 2px; transition: opacity .15s; color: var(--text-muted); }
.msg-action-btn svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; fill: none; }
.msg:hover .msg-action-btn { opacity: .6; }
.msg-action-btn:hover { opacity: 1; }@media (max-width: 768px){
.msg-action-btn { opacity: .4; padding: 6px; }
.msg-action-btn svg { width: 14px; height: 14px; }}
.msg-deleted { font-style: italic; opacity: .5; font-size: 12px; }
.comment-action-btn { background: none; border: none; cursor: pointer; opacity: .5; padding: 4px; transition: opacity .15s; color: var(--text-muted); }
.comment-action-btn svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }
.comment:hover .comment-action-btn { opacity: .7; }
.comment-action-btn:hover { opacity: 1; }@media (max-width: 768px){
.comment-action-btn { opacity: .6; padding: 6px; }
.comment-action-btn svg { width: 14px; height: 14px; }
.comment-flag-btn { opacity: .5 !important; padding: 6px; }
.comment-flag-btn svg { width: 12px; height: 12px; }}
.chat-input textarea { resize: none; overflow-y: auto; max-height: 120px; line-height: 1.4; }
.chat-input {
display: flex; gap: 8px; padding: 10px 16px;
border-top: 1px solid var(--border);
}
.chat-input input {
flex: 1; background: var(--element-bg); border: 1px solid var(--border);
border-radius: 20px; padding: 8px 14px;
color: var(--text-main); font-size: 13px;
outline: none; font-family: inherit;
}
.chat-input input:focus { border-color: var(--accent); }
.chat-input button {
background: var(--accent); border: none;
border-radius: 50%; width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
}
.chat-input button svg { width: 16px; height: 16px; stroke: #fff; fill: none; }
.lb-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 14px; border-bottom: 1px solid var(--border);
transition: background var(--tr);
}
.lb-row:hover { background: var(--bg-panel-alt); }
.lb-row-me { background: rgba(59,130,246,.06); border-left: 3px solid var(--accent); }
.lb-disc-filter { padding: 8px 14px; }
.lb-disc-filter select { padding: 8px 12px; border-radius: var(--rs); border: 1px solid var(--border); background: var(--element-bg); color: var(--text-main); font-size: 13px; }
.lb-separator { text-align: center; padding: 8px 0; color: var(--text-muted); font-size: 16px; letter-spacing: 4px; }
.lb-rank {
width: 28px; height: 28px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
font-size: 12px; font-weight: 700;
background: var(--element-bg); color: var(--text-muted);
}
.lb-rank.gold { background: rgba(234,179,8,.12); color: var(--accent-yellow); }
.lb-rank.silver { background: rgba(192,192,192,.15); color: #c0c0c0; }
.lb-rank.bronze { background: rgba(205,127,50,.15); color: #cd7f32; }
.lb-info { flex: 1; min-width: 0; overflow: hidden; }
.lb-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-handle { font-size: 10px; color: var(--text-muted); }
.lb-points { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px; color: var(--accent); white-space: nowrap; }
.lb-streak { font-size: 10px; color: #f97316; display: flex; align-items: center; gap: 2px; justify-content: flex-end; white-space: nowrap; }
.lb-streak svg { width: 12px; height: 12px; stroke: #f97316; fill: none; }@media (max-width: 600px){
.lb-row { gap: 8px; padding: 8px 10px; }
.lb-rank { width: 24px; height: 24px; font-size: 10px; }
.lb-name { font-size: 12px; }
.lb-name .lvl-badge { display: none; }
.lb-handle { display: none; }
.lb-points { font-size: 13px; }
.lb-streak { font-size: 9px; }
.lb-row .avatar { width: 32px !important; height: 32px !important; }
.lb-disc-filter { padding: 6px 10px; }
.lb-disc-filter select { font-size: 12px; padding: 6px 8px; }}
.tabs { display: flex; gap: 2px; margin-bottom: 16px; padding: 3px; background: var(--element-bg); border-radius: var(--r); flex-wrap: wrap; }
.tab {
padding: 7px 14px; font-size: 11px; font-weight: 600;
color: var(--text-muted); border-radius: calc(var(--r) - 2px);
transition: all var(--tr);
}
.tab { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.tab.tab-my10 {
display: inline-flex; align-items: center; gap: 7px;
background:
linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 42%),
linear-gradient(135deg, #f2483b, #c9281c);
border: 1px solid rgba(140, 22, 14, .5);
color: #fff; font-weight: 800;
padding: 7px 13px;
box-shadow: 0 1px 2px rgba(120, 18, 10, .35), 0 3px 10px rgba(226, 57, 44, .3);
margin-left: 8px;
}
.tab.tab-my10:hover {
background:
linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 42%),
linear-gradient(135deg, #ff5a4d, #d62f21);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(120, 18, 10, .4), 0 6px 18px rgba(226, 57, 44, .42);
}
.tab.tab-my10:active { transform: translateY(0); }
.tab.tab-my10:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.tab-my10-logo {
height: 15px; width: auto; display: block;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
}
.tab-my10-pfeil {
width: 11px; height: 11px; flex: 0 0 auto;
stroke: currentColor; stroke-width: 2.4; fill: none;
stroke-linecap: round; stroke-linejoin: round;
opacity: .85;
}
.tab.tab-my10:hover .tab-my10-pfeil { opacity: 1; }@media (max-width: 480px){
.tab.tab-my10 { padding: 7px 10px; margin-left: 6px; gap: 5px; }
.tab-my10-logo { height: 13px; }
.tab-my10-pfeil { display: none; }}@media (prefers-reduced-motion: reduce){
.tab.tab-my10:hover { transform: none; }}
.tab svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; }
.tab:hover { color: var(--text-main); }
.tab.active { color: var(--accent); background: var(--bg-panel); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.ach-card {
background: var(--bg-panel-alt); border: 1px solid var(--border);
border-radius: var(--r); padding: 16px; text-align: center;
opacity: .4; transition: all var(--tr);
}
.ach-card.earned { opacity: 1; border-color: var(--accent); }
.ach-icon svg { width: 28px; height: 28px; stroke: var(--accent); fill: none; }
.ach-title { font-weight: 700; font-size: 12px; margin-top: 6px; }
.ach-desc { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.ach-reward { font-size: 10px; color: var(--accent-yellow); font-weight: 700; margin-top: 4px; }
.profile-ach-section { margin-top: 20px; }
.profile-ach-header {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.profile-ach-header h3 {
display: flex; align-items: center; gap: 6px;
font-size: 15px; font-weight: 700; margin: 0;
}
.profile-ach-header h3 svg { width: 16px; height: 16px; stroke: var(--accent); fill: none; }
.profile-ach-count { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.profile-ach-bar {
height: 6px; background: var(--element-bg); border-radius: 3px; overflow: hidden; margin-bottom: 16px;
}
.profile-ach-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s ease; }
.profile-ach-cat { margin-bottom: 14px; }
.profile-ach-cat-label {
font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
color: var(--text-muted); font-weight: 600; margin-bottom: 8px;
}
.profile-ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.points-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 20px;
}
.points-display {
display: flex; align-items: center; gap: 10px;
background: rgba(240,180,41,.08);
border: 1px solid rgba(240,180,41,.2);
border-radius: var(--r); padding: 10px 16px;
}
.points-display svg { width: 22px; height: 22px; stroke: var(--accent-yellow); fill: none; }
.points-number { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; color: var(--accent-yellow); }
.points-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; }
.rewards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.reward-card {
background: var(--bg-panel-alt); border: 1px solid var(--border);
border-radius: var(--rl); padding: 20px; text-align: center;
transition: all var(--tr);
}
.reward-card:hover { border-color: var(--border-light); transform: translateY(-2px); }
.reward-icon svg { width: 28px; height: 28px; stroke: var(--accent); fill: none; }
.reward-title { font-weight: 700; font-size: 14px; margin-top: 8px; }
.reward-desc { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.reward-cost { font-size: 12px; color: var(--accent-yellow); font-weight: 700; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.reward-cost svg { width: 14px; height: 14px; stroke: var(--accent-yellow); fill: none; }
.btn-redeem {
margin-top: 10px; padding: 6px 18px;
border-radius: 20px; font-size: 12px;
font-weight: 600; border: none; cursor: pointer;
font-family: inherit; transition: all var(--tr);
}
.btn-redeem.can-afford { background: var(--accent); color: #fff; }
.btn-redeem.can-afford:hover { background: var(--accent-hover); }
.btn-redeem.cant-afford { background: var(--element-bg); color: var(--text-muted); cursor: not-allowed; }
.redeemed-item {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 0; border-bottom: 1px solid var(--border);
}
.redeemed-code {
font-family: 'Courier New', monospace;
background: var(--element-bg);
padding: 3px 8px; border-radius: 4px;
font-size: 12px; font-weight: 700;
color: var(--accent-green);
}
.redeem-modal-overlay {
display: none; position: fixed; inset: 0; z-index: 9999;
background: rgba(0,0,0,.7); backdrop-filter: blur(6px);
align-items: center; justify-content: center; padding: 20px;
}
.redeem-modal-overlay.open { display: flex; }
.redeem-modal {
width: 100%; max-width: 360px; position: relative;
background: var(--bg-panel); border: 1px solid var(--border);
border-radius: var(--rl); padding: 28px 24px; text-align: center;
animation: redeemPop .3s ease;
}
@keyframes redeemPop { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }
.redeem-modal-icon { margin-bottom: 12px; }
.redeem-modal-icon svg { width: 40px; height: 40px; stroke: var(--accent); fill: none; }
.redeem-modal-title { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.redeem-modal-cost { font-size: 14px; font-weight: 700; color: var(--accent-yellow); margin-bottom: 12px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.redeem-modal-cost svg { width: 16px; height: 16px; stroke: var(--accent-yellow); fill: none; }
.redeem-modal-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.redeem-modal-balance { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--element-bg); border-radius: var(--rs); }
.redeem-modal-balance svg { width: 12px; height: 12px; stroke: var(--accent-yellow); fill: none; }
.redeem-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; vertical-align: middle; }
.redeem-success-banner {
display: flex; align-items: center; gap: 14px; padding: 16px 20px; margin-bottom: 16px;
background: rgba(78,189,53,.08); border: 1px solid rgba(78,189,53,.25); border-radius: var(--rl);
}
.redeem-success-icon { font-size: 28px; }
.redeem-success-text { flex: 1; }
.redeem-success-text strong { font-size: 14px; display: block; margin-bottom: 2px; }
.redeem-success-code {
font-family: 'Courier New', monospace; font-size: 16px; font-weight: 700;
color: var(--accent-green); background: var(--element-bg); padding: 4px 10px;
border-radius: 4px; display: inline-block; margin-top: 4px;
}
.redeem-copy-btn {
display: flex; align-items: center; gap: 4px; padding: 6px 12px;
background: var(--accent-green); color: #fff; border: none; border-radius: var(--rs);
font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.redeem-copy-btn svg { width: 12px; height: 12px; stroke: #fff; fill: none; }
.camera-upload-row { display: flex; margin-top: 8px; }
.btn-camera-upload {
display: flex; align-items: center; gap: 6px; padding: 8px 14px;
background: var(--element-bg); border: 1px solid var(--border); border-radius: var(--rs);
color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer;
transition: all .15s;
}
.btn-camera-upload:hover { border-color: var(--accent); background: rgba(0,102,204,.06); }
.btn-camera-upload svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.level-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--rl);
padding: 24px; text-align: center;
margin-bottom: 20px;
}
.level-card-icon { font-size: 48px; margin-bottom: 6px; }
.level-card-name { font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; }
.level-progress-wrap { margin-top: 16px; max-width: 280px; margin-left: auto; margin-right: auto; }
.level-progress-bar { height: 8px; background: var(--element-bg); border-radius: 4px; overflow: hidden; }
.level-progress-fill { height: 100%; border-radius: 4px; transition: width .5s ease; }
.level-fill-starter  { background: #a0a0a0; }
.level-fill-bronze   { background: #cd7f32; }
.level-fill-silver   { background: #c0c0c0; }
.level-fill-gold     { background: var(--accent-yellow); }
.level-fill-platinum { background: var(--accent); }
.level-fill-diamond  { background: var(--accent-green); }
.level-fill-master   { background: var(--accent-purple); }
.level-fill-legend   { background: linear-gradient(90deg, var(--accent), var(--accent-purple)); }
.level-progress-text { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.level-tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 20px; }
.level-tier-item {
background: var(--bg-panel-alt); border-radius: var(--r);
padding: 12px 8px; text-align: center;
border: 1px solid transparent; transition: all var(--tr);
}
.level-tier-item.current { border-color: var(--accent); background: rgba(59,130,246,.08); }
.level-tier-item.locked { opacity: .35; }
.level-tier-icon { font-size: 22px; margin-bottom: 3px; }
.level-tier-name { font-size: 11px; font-weight: 700; }
.level-tier-pts { font-size: 9px; color: var(--text-muted); }
.settings-tabs {
display: flex; gap: 6px; margin-bottom: 16px;
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none; padding-bottom: 2px;
position: sticky; top: 0; z-index: 20;
background: var(--bg-main, var(--bg-panel)); padding-top: 4px;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
padding: 9px 14px; border-radius: 10px; cursor: pointer;
border: 1px solid var(--border); background: var(--bg-panel);
color: var(--text-muted); font-size: 13px; font-weight: 600;
font-family: inherit; white-space: nowrap; min-height: 40px;
}
.settings-tab svg { width: 16px; height: 16px; flex-shrink: 0; }
.settings-tab:hover { color: var(--text-main); border-color: var(--text-muted); }
.settings-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }@media (max-width: 600px){
.settings-tab span { display: none; }
.settings-tab { padding: 10px 16px; }
.settings-tab svg { width: 19px; height: 19px; }}
.settings-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.settings-grid-full { grid-column: 1 / -1; }@media (min-width: 900px){ .settings-grid { grid-template-columns: 1fr 1fr; }}
.content-area:has(.settings-grid) { max-width: 1100px; }
.settings-section {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--rl);
padding: 20px;
margin-bottom: 12px;
}
.settings-section h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: 15px; font-weight: 700; margin-bottom: 16px;
padding-bottom: 10px; border-bottom: 1px solid var(--border);
}@media (max-width: 600px){
.settings-grid .settings-section h3 { font-size: 14px; margin-bottom: 12px; }
.settings-grid .settings-section input[type="text"],
.settings-grid .settings-section input[type="email"],
.settings-grid .settings-section input[type="url"],
.settings-grid .settings-section input[type="password"],
.settings-grid .settings-section input[type="number"],
.settings-grid .settings-section select,
.settings-grid .settings-section textarea { font-size: 16px; }
.settings-grid .settings-toggle-row { flex-wrap: wrap; gap: 10px; }
.settings-grid .settings-section .btn { min-height: 42px; }
.settings-grid .settings-section form > .btn,
.settings-grid .settings-section > .btn { width: 100%; }}
.settings-grid .settings-section h3 { display: flex; align-items: center; gap: 8px; }
.settings-grid .settings-section h3 svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--accent); }
.set-liste { display: flex; flex-direction: column; }
.set-zeile {
display: flex; align-items: center; gap: 12px;
padding: 11px 0; cursor: pointer; margin: 0;
border-bottom: 1px solid var(--border);
}
.set-liste > .set-zeile:last-child { border-bottom: none; }
.set-liste > .set-zeile:first-child { padding-top: 2px; }
.set-symbol { flex-shrink: 0; display: inline-flex; color: var(--text-muted); }
.set-symbol svg { width: 17px; height: 17px; }
.set-text { flex: 1; min-width: 0; display: block; }
.set-titel { display: block; font-size: 13px; font-weight: 600; color: var(--text-main); }
.set-hinweis { display: block; font-size: 12px; line-height: 1.5; color: var(--text-muted); margin-top: 3px; }
.set-gruppe {
font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
color: var(--text-muted); margin: 16px 0 4px; padding-top: 14px; border-top: 1px solid var(--border);
}
.set-fuss { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.set-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.set-offen { font-size: 12px; font-weight: 600; color: var(--accent-yellow, #f0b429); }
.settings-grid .toggle-slider::before { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.settings-grid .toggle-switch input:focus-visible + .toggle-slider { outline: 2px solid var(--accent); outline-offset: 2px; }
form[data-auto] .set-fuss { margin-top: 0; }
form[data-auto] .set-status:not(:empty) { margin-top: 10px; }
.set-marke {
position: fixed; left: 50%; bottom: 24px; z-index: 900;
transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
padding: 8px 14px; border-radius: 999px; white-space: nowrap;
background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-main);
font-size: 12.5px; font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.28);
transition: opacity .18s, transform .18s;
}
.set-marke.sichtbar { opacity: 1; transform: translate(-50%, 0); }
.set-marke.ok { color: var(--accent-green, #22c55e); }
.set-marke.ok::before { content: '✓ '; }@media (max-width: 768px){ .set-marke { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }}@media (prefers-reduced-motion: reduce){ .set-marke { transition: none; }}
.set-status { font-size: 12px; font-weight: 600; color: var(--text-muted); display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.set-status-fehler { color: var(--accent-red, #e74c3c); }
.set-status .btn { min-width: 0; min-height: 0; width: auto; }@media (max-width: 600px){
.set-zeile { padding: 14px 0; min-height: 52px; }
.set-titel { font-size: 14px; }
.set-hinweis { font-size: 12.5px; }
.set-fuss > .btn, .set-knoepfe .btn { width: 100%; }
.settings-grid .toggle-switch { width: 50px; height: 30px; }
.settings-grid .toggle-slider::before { width: 24px; height: 24px; }
.settings-tabs { gap: 4px; margin-bottom: 12px; }
.settings-tab {
flex: 1 1 0; min-width: 58px; flex-direction: column; gap: 3px;
padding: 8px 2px 7px; min-height: 52px; justify-content: center;
}
.settings-tab span {
display: block; font-size: 10px; font-weight: 600; line-height: 1.2;
max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.settings-tab svg { width: 19px; height: 19px; }
.settings-grid .settings-section input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.settings-grid .settings-section select,
.settings-grid .settings-section textarea { font-size: 16px !important; min-height: 44px; }
.settings-grid .settings-section .form-label { font-size: 12px !important; }
.set-ziel, .set-planzeile { display: grid !important; grid-template-columns: 1fr 1fr; }
.set-ziel > div, .set-planzeile > div { width: auto !important; min-width: 0 !important; }
.set-ziel > div:nth-of-type(3), .set-planzeile > div:first-child { grid-column: 1 / -1; }
.set-ziel > .btn:only-of-type { grid-column: 1 / -1; }
.set-einladung { flex-wrap: wrap; }
.set-einladung code { flex: 1 1 100% !important; }
.set-einladung .btn { flex: 1; }}
.avatar-upload {
display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.avatar-upload-btn {
position: relative; cursor: pointer;
}
.avatar-upload-btn .overlay {
position: absolute; inset: 0; display: flex;
align-items: center; justify-content: center;
background: rgba(0,0,0,.5); border-radius: 50%;
opacity: 0; transition: opacity var(--tr);
}
.avatar-upload-btn:hover .overlay { opacity: 1; }
.avatar-upload-btn .overlay svg { width: 20px; height: 20px; stroke: #fff; fill: none; }
.avatar-upload-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.user-list-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--border);
}
.user-list-info { flex: 1; }
.user-list-name { font-weight: 600; font-size: 13px; }
.user-list-name:hover { color: var(--accent); }
.user-list-handle { font-size: 10px; color: var(--text-muted); }
.admin-header {
background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(124,110,240,.08));
border: 1px solid rgba(59,130,246,.2);
border-radius: var(--rl); padding: 24px;
margin-bottom: 24px; animation: scaleIn .4s ease;
}
.admin-header-toggle {
display: flex; align-items: center; justify-content: space-between;
cursor: pointer; user-select: none;
}
.admin-collapse-btn {
width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
border-radius: var(--r); background: rgba(59,130,246,.1);
transition: transform var(--tr);
}
.admin-collapse-btn::after {
content: ''; display: block; width: 10px; height: 10px;
border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
transform: rotate(135deg); margin-top: 3px;
}
.admin-collapse-btn.collapsed { transform: rotate(180deg); }
.admin-stats-body {
max-height: 1600px; overflow: hidden;
transition: max-height .35s ease, opacity .3s ease;
opacity: 1;
}
.admin-stats-body.collapsed {
max-height: 0; opacity: 0; margin-top: 0;
}
.admin-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 28px; margin-bottom: 4px;
display: flex; align-items: center; gap: 10px;
}
.admin-title svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; }
.admin-subtitle { font-size: 12px; color: var(--text-muted); }
.admin-stats {
display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px; margin-top: 18px;
}
.admin-stat {
background: var(--bg-panel); border: 1px solid var(--border);
border-radius: var(--r); padding: 14px;
text-align: center; transition: all var(--tr);
}
.admin-stat:hover { border-color: var(--border-light); transform: translateY(-1px); }
.admin-stat-num {
font-family: 'Space Grotesk', sans-serif;
font-size: 26px; color: var(--accent);
}
.admin-stat-label {
font-size: 10px; color: var(--text-muted);
text-transform: uppercase; letter-spacing: .5px; margin-top: 2px;
}
.admin-charts-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
margin-bottom: 16px;
}
.admin-chart-card {
background: var(--bg-panel); border: 1px solid var(--border);
border-radius: var(--rl); padding: 16px;
animation: fadeUp .4s ease;
}
.admin-chart-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 13px; font-weight: 600; color: var(--text-dim);
margin-bottom: 10px;
}
.admin-chart {
width: 100%; height: 200px; display: block;
}@media (max-width: 768px){
.admin-charts-grid { grid-template-columns: 1fr; }}
.admin-page .content-area { max-width: 1500px; }
.content-area:has(.my10-manage) { max-width: 1500px; }
.admin-load-more {
display: block; width: 100%; padding: 10px;
margin-top: 12px; background: var(--element-bg);
border: 1px solid var(--border); border-radius: var(--r);
color: var(--accent); font-size: 12px; font-weight: 600;
cursor: pointer; transition: all var(--tr);
}
.admin-load-more:hover { background: var(--element-bg-hover); border-color: var(--border-light); }
.admin-card {
background: var(--bg-panel); border: 1px solid var(--border);
border-radius: var(--rl); padding: 20px;
margin-bottom: 16px; animation: fadeUp .4s ease;
color: var(--text-main);
}
.admin-card h4 {
font-family: 'Space Grotesk', sans-serif;
font-size: 16px; margin-bottom: 14px;
padding-bottom: 10px; border-bottom: 1px solid var(--border);
color: var(--text-main);
}
.admin-card .form-label { color: var(--text-main); }
.admin-card td { color: var(--text-main); }
.admin-modal { color: var(--text-main); }
.admin-modal .form-label { color: var(--text-main); }
.admin-modal h4 { color: var(--text-main); }
.admin-header { color: var(--text-main); }
.admin-title { color: var(--text-main); }
.admin-btn {
padding: 4px 10px; border-radius: 6px;
font-size: 10px; font-weight: 600;
cursor: pointer; border: 1px solid var(--border);
background: var(--bg-panel-alt); color: var(--text-muted);
transition: all var(--tr); white-space: nowrap;
font-family: inherit; display: inline-flex; align-items: center;
}
.admin-btn svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; margin-right: 2px; flex-shrink: 0; }
.admin-btn:hover { border-color: var(--border-light); color: var(--text-main); }
.admin-btn.danger { border-color: rgba(255,71,71,.3); color: #ff4747; background: rgba(255,71,71,.06); }
.admin-btn.danger svg { stroke: #ff4747; }
.admin-btn.success { border-color: rgba(78,189,53,.3); color: var(--accent-green); background: rgba(78,189,53,.06); }
.admin-btn.success svg { stroke: var(--accent-green); }
.admin-btn.warning { border-color: rgba(240,180,41,.3); color: var(--accent-yellow); background: rgba(240,180,41,.06); }
.admin-btn.warning svg { stroke: var(--accent-yellow); }
.admin-btn.primary svg { stroke: var(--accent); }
.admin-modal-overlay {
display: none; position: fixed; inset: 0; z-index: 1000;
background: rgba(0,0,0,.6); align-items: flex-start; justify-content: center;
padding: 40px 16px; overflow-y: auto;
}
.admin-modal-overlay.open { display: flex; }
.admin-modal {
background: var(--bg-panel); border: 1px solid var(--border);
border-radius: var(--rl); padding: 24px;
width: 100%; max-width: 680px;
animation: scaleIn .2s ease; position: relative;
}
.admin-modal-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.admin-modal-header h4 {
font-family: 'Space Grotesk', sans-serif;
font-size: 16px; margin: 0;
}
.admin-modal-close {
background: none; border: none; color: var(--text-muted);
font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.admin-modal-close:hover { color: var(--text-main); }
.admin-reward-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }@media (max-width: 600px){ .admin-reward-grid { grid-template-columns: 1fr; }}
.admin-reward-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--rs); }
.admin-reward-thumb-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--element-bg); border-radius: var(--rs); }
.admin-reward-thumb-icon svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; }
.post-type-desc {
font-size: 11px; color: var(--text-muted); padding: 8px 12px; margin-top: 8px;
background: var(--element-bg); border-radius: var(--rs); border-left: 3px solid var(--accent);
line-height: 1.5;
}
.guest-login-gate {
margin-top: 24px; padding: 32px 20px; text-align: center;
background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--rl);
}
.guest-gate-content svg { width: 32px; height: 32px; stroke: var(--accent); fill: none; margin-bottom: 12px; }
.guest-gate-content h3 { font-family: 'Space Grotesk', sans-serif; font-size: 18px; margin-bottom: 6px; color: var(--text-main); }
.guest-gate-content p { font-size: 12px; color: var(--text-muted); max-width: 320px; margin: 0 auto; line-height: 1.5; }
.sidebar-guest-cta { padding: 12px; border-top: 1px solid var(--border); }
.sgc-karte { position: relative; overflow: hidden; padding: 14px 14px 12px; border-radius: 16px; color: #f4f6fb;
background: radial-gradient(120% 90% at 100% 0%, rgba(59,130,246,.30), transparent 60%), linear-gradient(180deg, #161b28, #0c0f17);
border: 1px solid rgba(255,255,255,.12); box-shadow: 0 16px 34px -18px rgba(59,130,246,.45); }
[data-theme="light"] .sgc-karte { background: radial-gradient(120% 90% at 100% 0%, rgba(59,130,246,.30), transparent 60%), linear-gradient(180deg, #0e1119, #080a10);
border-color: rgba(255,255,255,.09); box-shadow: 0 14px 30px -18px rgba(8,12,24,.8); }
.sgc-karte .sgc-scheibe { position: absolute; right: -14px; top: -14px; width: 74px; height: 74px; stroke: none; opacity: .92; }
.sgc-karte strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -.01em; max-width: 9.5em; }
.sgc-karte p { font-size: 11.5px; line-height: 1.45; color: #a3acbf; margin: 5px 0 11px; max-width: 15em; }
.sgc-knopf { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 10px; background: #3b82f6; color: #fff;
font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); transition: background var(--tr); }
.sgc-knopf:hover { background: #2563eb; color: #fff; }
.sgc-link { display: block; margin-top: 8px; text-align: center; font-size: 11.5px; color: #a3acbf; text-decoration: none; }
.sgc-link:hover { color: #fff; }
html.gl-los .sgc-karte { opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
html.gl-los.gl-hinter-auftakt .sgc-karte { opacity: 1; transform: none; }@media (prefers-reduced-motion: reduce){ html.gl-los .sgc-karte { opacity: 1; transform: none; transition: none; }}
.mobile-nav.gast-cta { display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); justify-content: stretch;
background: var(--bg-main); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--border); z-index: 105; }
[data-theme="light"] .mobile-nav.gast-cta { background: var(--bg-main); backdrop-filter: none; -webkit-backdrop-filter: none; border-top-color: var(--border); }
html.standalone .mobile-nav.gast-cta { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 34px)); background: var(--bg-main); }
.mobile-nav.gast-cta .gast-cta-haupt { flex: 1; min-height: 48px; padding: 0 10px; display: grid; grid-auto-flow: column; place-items: center; gap: 6px; border-radius: 14px; white-space: nowrap;
background: #3b82f6; color: #fff; font: 700 clamp(13px, 3.9vw, 16px) 'Space Grotesk', sans-serif; letter-spacing: -.01em; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.mobile-nav.gast-cta .gast-cta-haupt:hover, [data-theme="light"] .mobile-nav.gast-cta .gast-cta-haupt:hover { background: #2563eb; color: #fff; }
.mobile-nav.gast-cta .gast-cta-haupt:active, [data-theme="light"] .mobile-nav.gast-cta .gast-cta-haupt:active { background: #2563eb; color: #fff; scale: .97; }
.mobile-nav.gast-cta .gast-cta-neben { min-height: 48px; padding: 0 10px; display: grid; place-items: center; border-radius: 12px; color: var(--text-main); font-size: 14.5px; font-weight: 600; white-space: nowrap; text-decoration: none; }
[data-theme="light"] .mobile-nav.gast-cta .gast-cta-neben { color: var(--text-main); }@media (min-width: 769px){ .mobile-nav.gast-cta { display: none; }}
html.gl-los .mobile-nav.gast-cta { transition: transform .3s; }
html.gl-los .mobile-nav.gast-cta.weg { transform: translateY(110%); }@media (prefers-reduced-motion: reduce){ html.gl-los .mobile-nav.gast-cta { transition: none; }}
.top-navbar.ist-gast::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(59,130,246,.65) 30%, rgba(168,85,247,.5) 70%, transparent); }
.navbar-gast { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 2px; margin: 0 12px; }
.navbar-gast a { padding: 7px 12px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--text-dim); text-decoration: none; white-space: nowrap; transition: background var(--tr), color var(--tr); }
.navbar-gast a:hover, .navbar-gast a.an { background: var(--element-bg); color: var(--text-main); }
.navbar-sprache { display: inline-flex; align-items: center; justify-content: center; height: 32px; min-width: 38px; padding: 0 9px; margin-right: 4px; border-radius: 9px;
border: 1px solid var(--border-light); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--text-dim); text-decoration: none; transition: background var(--tr), color var(--tr); }
.navbar-sprache:hover { background: var(--element-bg); color: var(--text-main); }
.navbar-gast-knopf { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 10px; white-space: nowrap;
font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-main); text-decoration: none; transition: background var(--tr), transform var(--tr); }
.navbar-gast-knopf:hover { background: var(--element-bg); color: var(--text-main); }
.navbar-gast-knopf.haupt { margin-left: 4px; font-weight: 700; background: #3b82f6; color: #fff; box-shadow: 0 6px 18px -8px rgba(59,130,246,.9), inset 0 1px 0 rgba(255,255,255,.25); }
.navbar-gast-knopf.haupt:hover { background: #2563eb; color: #fff; }
.navbar-gast-knopf .kurz { display: none; }@media (max-width: 1180px){ .navbar-gast a { display: none; }}@media (max-width: 640px){
.navbar-gast { margin: 0; }
.navbar-gast-knopf { padding: 0 10px; font-size: 12.5px; }
.navbar-gast-knopf .lang { display: none; }
.navbar-gast-knopf .kurz { display: inline; }
.navbar-sprache { min-width: 34px; padding: 0 6px; }}@media (max-width: 445px){ .navbar-gast-knopf:not(.haupt) { display: none; }}
.guest-hero {
border: 1px solid var(--border);
border-radius: var(--rl);
padding: 32px 28px;
margin-bottom: 20px;
text-align: center;
position: relative;
overflow: hidden;
}
.guest-hero-duel { background: linear-gradient(135deg, rgba(124,58,237,0.12), rgba(231,76,60,0.10)); }
.guest-hero-leaderboard { background: linear-gradient(135deg, rgba(234,179,8,0.14), rgba(245,158,11,0.06)); }
.guest-hero-group { background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(180,83,9,0.06)); }
.guest-hero-event { background: linear-gradient(135deg, rgba(6,182,212,0.12), rgba(99,102,241,0.06)); }
[data-theme="light"] .guest-hero-duel { background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(231,76,60,0.08)); }
[data-theme="light"] .guest-hero-leaderboard { background: linear-gradient(135deg, rgba(234,179,8,0.16), rgba(245,158,11,0.10)); }
[data-theme="light"] .guest-hero-group { background: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(180,83,9,0.10)); }
[data-theme="light"] .guest-hero-event { background: linear-gradient(135deg, rgba(6,182,212,0.14), rgba(99,102,241,0.10)); }
.guest-hero-icon {
font-size: 64px;
line-height: 1;
margin-bottom: 14px;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
}
.guest-hero-title {
font-size: 24px;
font-weight: 900;
font-family: 'Space Grotesk', sans-serif;
margin-bottom: 8px;
color: var(--text-main);
line-height: 1.15;
}
.guest-hero-title-duel { color: #8b5cf6; }
.guest-hero-title-leaderboard { color: #b45309; }
.guest-hero-title-group { color: #b45309; }
.guest-hero-title-event { color: #0e7490; }
[data-theme="light"] .guest-hero-title-duel { color: #6d28d9; }
[data-theme="light"] .guest-hero-title-leaderboard { color: #92400e; }
[data-theme="light"] .guest-hero-title-group { color: #92400e; }
[data-theme="light"] .guest-hero-title-event { color: #155e75; }
.guest-hero-text {
font-size: 14px;
color: var(--text-muted);
max-width: 540px;
margin: 0 auto 18px;
line-height: 1.6;
}
.guest-feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
margin-bottom: 24px;
}
.guest-feature-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 18px;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.guest-feature-card:hover {
transform: translateY(-2px);
border-color: var(--border-light, var(--accent));
box-shadow: var(--shadow);
}
.guest-feature-icon { font-size: 28px; margin-bottom: 8px; line-height: 1; }
.guest-feature-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; color: var(--text-main); }
.guest-feature-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.guest-steps-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 20px;
margin-bottom: 20px;
}
.guest-steps-title {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin-bottom: 14px;
}
.guest-steps-list { display: flex; flex-direction: column; gap: 12px; }
.guest-step-row { display: flex; gap: 14px; align-items: flex-start; }
.guest-step-num {
width: 32px; height: 32px; border-radius: 50%;
background: var(--accent);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 13px; flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.guest-step-title { font-weight: 700; font-size: 13px; margin-bottom: 2px; color: var(--text-main); }
.guest-step-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.guest-list-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; margin-bottom: 20px; }
.guest-list-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 14px; }
.guest-list-rows { display: flex; flex-direction: column; gap: 8px; }
.guest-list-row {
display: flex; align-items: center; gap: 14px;
padding: 10px 12px;
background: var(--element-bg);
border-radius: var(--r);
transition: background .15s;
}
.guest-list-row:hover { background: var(--bg-hover, var(--element-bg)); }
.guest-list-icon { font-size: 20px; flex-shrink: 0; width: 32px; text-align: center; }
.guest-list-row-title { font-weight: 700; font-size: 13px; color: var(--text-main); }
.guest-list-row-desc { font-size: 11px; color: var(--text-muted); }
.auth-popup-overlay {
display: none;
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
margin: 0; padding: 20px;
z-index: 9999;
background: rgba(0,0,0,.7);
backdrop-filter: blur(6px);
align-items: center;
justify-content: center;
overflow-y: auto;
}
.auth-popup-overlay.open { display: flex; }
.auth-popup {
width: 100%; max-width: 380px; position: relative;
background: var(--bg-panel); border: 1px solid var(--border);
border-radius: var(--rl); padding: 32px 28px;
animation: authPopIn .25s ease;
max-height: 90vh; overflow-y: auto;
overflow-x: hidden; min-width: 0;
}@media (max-width: 420px){
.auth-popup-overlay { padding: 12px; }
.auth-popup { padding: 24px 16px; border-radius: 14px; }}
@keyframes authPopIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
.auth-popup-close {
position: absolute; top: 12px; right: 14px;
background: none; border: none; color: var(--text-muted); font-size: 22px;
cursor: pointer; line-height: 1; padding: 4px;
}
.auth-popup-close:hover { color: var(--text-primary); }
.auth-popup-title { font-family: 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.auth-popup-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
.auth-popup-links { display: flex; justify-content: space-between; margin-top: 14px; font-size: 12px; }
.auth-popup-links a { color: var(--accent); text-decoration: none; }
.auth-popup-links a:hover { text-decoration: underline; }
.guest-login-gate { cursor: pointer; }
.about-card {
background: var(--bg-panel); border: 1px solid var(--border);
border-radius: var(--rl); padding: 0; margin-bottom: 20px; overflow: hidden;
}
.about-cover { position: relative; height: 280px; overflow: hidden; }
.about-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-cover-overlay { position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,0.75)); }
.about-cover-content { position: absolute; bottom: 24px; left: 28px; right: 28px; }
.about-logo { display: flex; align-items: flex-end; gap: 0; font-family: 'Space Grotesk', sans-serif; }
.about-tagline { font-size: 14px; margin-top: 6px; }
.about-body { padding: 28px; }
.about-section { margin-bottom: 24px; }
.about-section h3 {
display: flex; align-items: center; gap: 8px;
font-size: 16px; font-weight: 700; margin-bottom: 10px; color: var(--text-main);
padding-bottom: 8px; border-bottom: 2px solid var(--accent);
}
.about-section h3 svg { width: 16px; height: 16px; stroke: var(--accent); fill: none; }
.about-section p { font-size: 13px; color: var(--text-dim); line-height: 1.7; margin-bottom: 10px; }
.about-features {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 14px; margin-bottom: 24px;
}
.about-feature {
background: var(--element-bg); border: 1px solid var(--border);
border-radius: var(--r); padding: 20px; text-align: left;
transition: border-color .15s, transform .15s;
}
.about-feature:hover { border-color: var(--accent); transform: translateY(-2px); }
.about-feature-icon { margin-bottom: 10px; width: 40px; height: 40px; border-radius: 10px; background: rgba(0,102,204,0.1); display: flex; align-items: center; justify-content: center; }
.about-feature-icon svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; }
.about-feature h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.about-feature p { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin: 0; }
.about-cta { display: flex; gap: 10px; justify-content: center; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.about-cta .btn { min-width: 140px; padding: 10px 24px; font-size: 14px; }
.about-shop-card {
margin: 24px 0; padding: 20px; border-radius: var(--r); display: flex; align-items: center; gap: 16px;
background: linear-gradient(135deg, rgba(0,102,204,0.06), rgba(124,58,237,0.04));
border: 1px solid var(--accent); transition: border-color .15s, box-shadow .15s;
}
.about-shop-card:hover { box-shadow: 0 4px 16px rgba(0,102,204,0.15); }@media (max-width: 600px){
.about-cover { height: 200px; }
.about-cover-content { bottom: 16px; left: 16px; right: 16px; }
.about-body { padding: 20px; }
.about-features { grid-template-columns: 1fr; }
.about-shop-card { flex-direction: column; text-align: center; gap: 10px; }}
.admin-pt-item { padding: 14px 0; border-bottom: 1px solid var(--border); }
.admin-pt-item:last-of-type { border-bottom: none; }
.admin-pt-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.admin-pt-header svg { width: 16px; height: 16px; stroke: var(--accent); stroke-width: 2; fill: none; }
.admin-reward-img-preview { margin-bottom: 8px; }
.admin-reward-img-preview img { width: 80px; height: 80px; object-fit: cover; border-radius: var(--rs); border: 1px solid var(--border); }
.reward-image { margin-bottom: 8px; }
.reward-image img { width: 100%; max-height: 120px; object-fit: cover; border-radius: var(--rs); }
.reward-type-badge { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); background: rgba(0,102,204,.08); padding: 2px 8px; border-radius: 10px; margin-bottom: 6px; display: inline-block; }
.reward-discount { font-size: 11px; color: var(--accent-green); font-weight: 600; margin-top: 4px; }
.reward-stock { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.reward-card.reward-oos { opacity: 0.5; }
.rw-field-discount, .rw-field-product { transition: all .15s; }
.scatt-viewer-wrap {
width: 100%; aspect-ratio: 4/3;
border-top: 1px solid var(--border);
overflow: hidden;
}
.scatt-viewer-iframe {
width: 100%; height: 100%;
border: none; display: block;
}
.post-qr-bar {
display: flex; align-items: center; gap: 8px; padding: 10px 16px;
background: var(--element-bg); border-top: 1px solid var(--border);
text-decoration: none; color: var(--accent); font-size: 12px;
transition: background .15s;
}
.post-qr-bar:hover { background: var(--bg-panel-alt); }
.post-qr-bar svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; flex-shrink: 0; }
.post-qr-url { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.qr-input-row { display: flex; gap: 8px; align-items: center; }
.qr-input-row .form-control { flex: 1; }
.btn-qr-scan {
display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px;
background: var(--element-bg); border: 1px solid var(--border); border-radius: var(--rs);
color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer;
white-space: nowrap; transition: all .15s;
}
.btn-qr-scan:hover { border-color: var(--accent); }
.btn-qr-scan svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
#qrScanArea {
position: relative; margin-top: 10px; border-radius: var(--rs); overflow: hidden;
background: #000; max-height: 300px;
}
.qr-video { width: 100%; max-height: 300px; object-fit: cover; display: block; }
.qr-scan-overlay {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
pointer-events: none;
}
.qr-scan-frame {
width: 180px; height: 180px; border: 2px solid rgba(139,92,246,.6);
border-radius: 12px; box-shadow: 0 0 0 9999px rgba(0,0,0,.4);
position: relative; overflow: hidden;
}
.qr-scan-frame::after {
content: ''; position: absolute; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, rgba(139,92,246,.8), transparent);
animation: qrScanLine 2s ease-in-out infinite;
}
@keyframes qrScanLine { 0%,100% { top: 0; } 50% { top: 100%; } }
.btn-qr-stop {
position: absolute; top: 8px; right: 8px; width: 28px; height: 28px;
border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff;
font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.qr-result {
display: flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 12px;
background: rgba(78,189,53,.06); border: 1px solid rgba(78,189,53,.2); border-radius: var(--rs);
color: var(--accent-green); font-size: 12px;
}
.qr-result svg { width: 14px; height: 14px; stroke: var(--accent-green); fill: none; }
.qr-insecure { background: rgba(220,53,69,.06); border-color: rgba(220,53,69,.25); color: var(--accent-red); }
.qr-insecure svg { stroke: var(--accent-red); }
.qr-upload-row { margin-top: 8px; }
.btn-qr-upload {
display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px;
background: var(--element-bg); border: 1px solid var(--border); border-radius: var(--rs);
color: var(--text-dim); font-size: 12px; font-weight: 600; cursor: pointer;
white-space: nowrap; transition: all .15s;
}
.btn-qr-upload:hover { border-color: var(--accent); color: var(--accent); }
.btn-qr-upload svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.btn-qr-fetch-unsafe {
display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px;
background: rgba(220,53,69,.1); border: 1px solid rgba(220,53,69,.3); border-radius: var(--rs);
color: var(--accent-red); font-size: 11px; font-weight: 600; cursor: pointer;
white-space: nowrap; transition: all .15s;
}
.btn-qr-fetch-unsafe:hover { background: rgba(220,53,69,.2); }
.btn-qr-fetch-unsafe svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }
.post-qr-insecure { background: rgba(220,53,69,.06); border-color: rgba(220,53,69,.2); color: var(--accent-red); }
.post-qr-insecure svg { stroke: var(--accent-red); }
.admin-btn.primary { border-color: rgba(59,130,246,.3); color: var(--accent); background: rgba(59,130,246,.06); }
.admin-card td svg, .admin-card .table svg, .admin-card a svg {
width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; vertical-align: -2px;
}
.admin-post-thumb { width: 50px; height: 50px; border-radius: var(--rs); object-fit: cover; border: 1px solid var(--border); }
.admin-log { max-height: 300px; overflow-y: auto; }
.admin-log-item {
display: flex; align-items: center; gap: 10px;
padding: 8px; border-bottom: 1px solid var(--border);
font-size: 11px;
}
.admin-log-time { color: var(--text-muted); font-size: 10px; flex-shrink: 0; width: 70px; }
.admin-log-text { flex: 1; color: var(--text-dim); }
.admin-inline-form { display: inline-flex; gap: 4px; align-items: center; }
.admin-inline-form input[type=number],
.admin-inline-form input[type=text] {
width: 90px; padding: 3px 6px;
background: var(--element-bg); border: 1px solid var(--border);
border-radius: 4px; color: var(--text-main);
font-size: 11px; font-family: inherit;
}
.admin-actions-cell { min-width: 160px; }
.sidebar-overlay {
display: none; position: fixed; inset: 0;
background: rgba(0,0,0,.6); z-index: 99;
}
.mobile-nav {
display: none;
position: fixed; bottom: 0; left: 0; right: 0;
background: var(--glass-bg);
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
border-top: 1px solid var(--glass-border);
padding: 4px 0 6px; z-index: 90;
justify-content: space-around;
padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
}
.mobile-nav a {
display: flex; flex-direction: column;
align-items: center; gap: 2px;
color: var(--text-muted); font-size: 9px;
padding: 6px 10px; position: relative;
transition: color var(--tr);
min-width: 0;
text-decoration: none;
border-radius: 10px;
}
.mobile-nav a:active { background: var(--element-bg); }
.mobile-nav a.active { color: var(--accent); filter: drop-shadow(0 0 6px rgba(59,130,246,.3)); }
.mobile-nav svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.mobile-nav .nav-badge { top: -2px; left: 50%; margin-left: 4px; width: 14px; height: 14px; font-size: 8px; }
.app-footer {
max-width: 640px;
margin: 0 auto;
padding: 24px 18px 32px;
border-top: 1px solid var(--border);
display: flex; flex-direction: column; align-items: center; gap: 8px;
opacity: 0.7;
}
.app-footer-links {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap; justify-content: center;
}
.app-footer-links a {
font-size: 11px; color: var(--text-muted);
text-decoration: none; transition: color var(--tr);
}
.app-footer-links a:hover { color: var(--accent); }
.app-footer-sep { color: var(--border-light); font-size: 11px; }
.app-footer-copy { font-size: 10px; color: var(--border-light); }
.legal-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--rl);
padding: 24px;
display: flex; flex-direction: column; gap: 0;
}
.legal-section {
padding: 16px 0;
border-bottom: 1px solid var(--border);
}
.legal-section:first-child { padding-top: 0; }
.legal-section:last-child { border-bottom: none; padding-bottom: 0; }
.legal-section h3 {
font-family: 'Space Grotesk', sans-serif;
font-size: 15px; font-weight: 700;
margin-bottom: 10px;
}
.legal-section h4 {
font-size: 12px; font-weight: 700;
color: var(--text-dim); margin: 10px 0 4px;
}
.legal-section p {
font-size: 12px; color: var(--text-dim);
line-height: 1.7; margin: 0 0 6px;
}
.legal-section a { color: var(--accent); }
.legal-section ul { margin: 6px 0 10px; padding-left: 18px; }
.legal-section li { font-size: 13px; color: var(--text-dim, var(--text-muted)); line-height: 1.7; margin-bottom: 5px; }
.legal-section li strong, .legal-section p strong { color: var(--text-main); }
.legal-section h4 + p, .legal-section p + p { margin-top: 6px; }@media (max-width: 768px){
.sidebar { transform: translateX(-100%); top: 52px; }
.sidebar.open { transform: translateX(0); }
.sidebar { --sb-fuss: env(safe-area-inset-bottom, 0px); padding-bottom: 0; }
.sidebar > .sidebar-user {
position: sticky; bottom: 0; z-index: 3;
margin: auto -14px 0; padding: 12px 10px calc(12px + var(--sb-fuss)) 14px;
background: var(--bg-panel); border-top: 1px solid var(--border); border-radius: 0;
box-shadow: 0 -10px 18px -12px rgba(0,0,0,.55);
}
.sidebar > .sidebar-user.active { background: var(--bg-panel); }
.sidebar > .sidebar-user form .btn-icon { width: 46px; height: 46px; justify-content: center; border-radius: 12px; background: var(--element-bg); }
.sidebar > .sidebar-user form .btn-icon svg { width: 21px; height: 21px; }
.sidebar-overlay.open { display: block; }
.main-content { margin-left: 0; padding-top: 52px; padding-bottom: 52px; }
.top-navbar-hamburger { display: flex; }
.navbar-search { display: none !important; }
.top-navbar-logo { flex: 1; }
.navbar-points { display: none; }
.mobile-nav { display: flex; }
.navbar-avatar { display: none !important; }
.navbar-points { display: none !important; }
.top-navbar { padding: 0 8px; gap: 4px; }
.top-navbar-logo { font-size: 16px; padding: 0 4px; }
.top-navbar-logo strong { display: none; }
.logo-shotmetrix {
display: inline; margin-left: 0;
font-weight: 700; font-size: 17px; letter-spacing: -.2px;
}
.beta-badge { display: inline-block; }
.top-navbar-right { gap: 2px; }
.navbar-icon-btn { width: 40px; height: 40px; min-width: 40px; border-radius: 10px; }
.navbar-icon-btn svg { width: 20px; height: 20px; }
.navbar-flag { font-size: 18px; width: 40px; height: 40px; min-width: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.top-navbar-hamburger { width: 40px; height: 40px; min-width: 40px; display: flex; align-items: center; justify-content: center; }
.top-navbar-hamburger svg { width: 22px; height: 22px; }
.footer-guidelines { display: block; }
.content-area { padding: 14px 0 12px 0 !important; }
.content-area > *:not(.post-card):not(.profile-posts-grid):not(.profile-cover-wrap) { margin-left: 12px; margin-right: 12px; }
.content-area > .post-card { margin-left: 0 !important; margin-right: 0 !important; }
.post-card { border-radius: 0 !important; border-left: none !important; border-right: none !important; margin-bottom: 8px !important; width: 100% !important; }
.profile-posts-grid { gap: 8px; margin-left: 0 !important; margin-right: 0 !important; }
.profile-posts-grid .post-card { border-radius: 0 !important; border-left: none !important; border-right: none !important; width: 100% !important; }
.app-footer { padding: 16px 12px 80px; }
.auth-card { padding: 24px 20px; }
.profile-stats > div, .profile-stats > a { padding: 8px 6px; }
.profile-actions { flex-wrap: wrap; gap: 6px; margin-top: 10px; padding: 0 12px; }
.profile-actions .btn-follow { font-size: 11px; padding: 6px 14px; }
.profile-name { font-size: 20px; }
.profile-badges-row { flex-wrap: wrap; gap: 6px; padding: 0 12px; }
.profile-badge-card { padding: 6px 10px; }
.profile-header { padding: 0 8px 16px; gap: 8px; }
.profile-cover-wrap .profile-header { margin: -48px 8px 0; padding: 0 12px 16px; }
.profile-bio { font-size: 12px; }
.profile-cover-wrap { width: 100% !important; margin-left: 0 !important; margin-top: -14px !important; margin-right: 0 !important; }
.profile-cover-wrap { --cover-h: clamp(140px, 42vw, 200px); }
.profile-avatar-col, .profile-cover-wrap .profile-avatar-col { margin-top: -48px; }
.profile-avatar-col .avatar-xl { width: 96px; height: 96px; font-size: 36px; }
.profile-avatar-col .avatar-xl .online-dot { width: 16px; height: 16px; border-width: 3px; }
.profile-cover-bg { filter: blur(18px) saturate(1.2) brightness(0.7); }
.profile-cover-wrap .profile-header { margin-top: -36px; }
.settings-section { border-radius: 0; border-left: none; border-right: none; margin-left: 0 !important; margin-right: 0 !important; }
.verify-card { margin: 14px 8px; padding: 24px 16px; }
.rewards-grid { grid-template-columns: 1fr; }
.chat-container { height: calc(100dvh - 140px); border-radius: 0; border-left: none; border-right: none; }
.chat-input {
padding: 8px 10px;
padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
gap: 6px;
}
.chat-input input { padding: 10px 14px; font-size: 15px; min-width: 0; flex: 1; }
.chat-input button { width: 40px; height: 40px; min-width: 40px; flex-shrink: 0; }
.chat-input textarea { font-size: 15px; }
.chat-attach-btn { width: 36px; height: 36px; min-width: 36px; }
.chat-messages { padding: 10px; }
.msg { max-width: 85%; font-size: 14px; }
.chat-header { padding: 10px 12px; }
html.standalone .chat-container { height: calc(100dvh - var(--nav-h) - 4px); }
html.standalone .chat-input { padding-bottom: calc(10px + env(safe-area-inset-bottom, 34px)); }
.ach-grid { grid-template-columns: repeat(2, 1fr); }
.level-tier-grid { grid-template-columns: repeat(2, 1fr); }
.admin-stats { grid-template-columns: repeat(2, 1fr); }
.settings-section { padding: 14px 12px; overflow-x: hidden; word-break: break-word; }
.settings-section .form-control, .settings-section input[type="text"], .settings-section input[type="email"],
.settings-section input[type="password"], .settings-section textarea, .settings-section select {
max-width: 100%; box-sizing: border-box;
}
.settings-toggle-row { flex-wrap: wrap; gap: 10px; }
.settings-toggle-row > div:first-child { min-width: 0; }}
html.standalone body {
background: var(--bg-panel);
}
html.standalone { --nav-luft: 0px; --nav-h: calc(48px + var(--nav-luft) + env(safe-area-inset-top, 44px)); }@supports (-webkit-touch-callout: none) and ((anchor-name: --a) or (animation-timeline: scroll())){
html.standalone { --nav-luft: min(20px, env(safe-area-inset-top, 0px)); }}
html.standalone .top-navbar {
top: 0;
padding-top: constant(safe-area-inset-top);
padding-top: calc(env(safe-area-inset-top, 44px) + var(--nav-luft));
height: calc(48px + constant(safe-area-inset-top));
height: var(--nav-h);
padding-left: 12px;
padding-right: 12px;
gap: 6px;
background: var(--bg-panel);
-webkit-backdrop-filter: none; backdrop-filter: none;
}
html.standalone .top-navbar-logo { font-size: 15px; }
html.standalone .top-navbar-logo strong { display: none; }
html.standalone .logo-shotmetrix { display: inline; margin-left: 0; font-weight: 700; font-size: 16px; }
html.standalone .beta-badge { display: inline-block; }
html.standalone .top-navbar-right { gap: 4px; }
html.standalone .navbar-avatar { display: none !important; }
html.standalone .navbar-points { display: none !important; }
html.standalone .main-content {
padding-top: calc(48px + constant(safe-area-inset-top));
padding-top: var(--nav-h);
padding-bottom: calc(80px + constant(safe-area-inset-bottom));
padding-bottom: calc(80px + env(safe-area-inset-bottom, 34px));
}
html.standalone .mobile-nav {
height: auto;
padding: 10px 8px;
padding-bottom: calc(10px + constant(safe-area-inset-bottom));
padding-bottom: calc(10px + env(safe-area-inset-bottom, 34px));
background: var(--bg-panel);
}
html.standalone .mobile-nav a {
font-size: 11px;
padding: 8px 12px;
gap: 4px;
}
html.standalone .mobile-nav svg {
width: 26px; height: 26px; stroke-width: 1.6;
}@media (max-width: 768px){ html.standalone .sidebar { --sb-fuss: env(safe-area-inset-bottom, 34px); }}
html.standalone .sidebar {
top: calc(48px + constant(safe-area-inset-top));
top: var(--nav-h);
}
html.standalone .app-footer {
padding-bottom: calc(90px + constant(safe-area-inset-bottom));
padding-bottom: calc(90px + env(safe-area-inset-bottom, 34px));
}
html.standalone .btn-icon svg { width: 20px; height: 20px; }
html.standalone .post-actions .btn-icon { padding: 6px; }
[data-theme="light"] {
--bg-main: #ffffff;
--bg-panel: #ffffff;
--bg-panel-alt: #fafbfc;
--bg-header: #ffffff;
--bg-dark: #f0f1f3;
--element-bg: #f4f5f7;
--element-bg-hover: #ecedf0;
--element-bg-active: #e2e4e8;
--border: #e2e4e8;
--border-light: #d0d3da;
--text-main: #111827;
--text-dim: #374151;
--text-muted: #6b7280;
--text-monospace: #4b5563;
--overlay-bg: rgba(0,0,0,0.35);
--table-header-bg: #f9fafb;
--table-summary-bg: #fafbfc;
--table-hover-bg: rgba(37,99,235,0.04);
--shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 4px rgba(0,0,0,.03);
--shadow-lg: 0 8px 24px rgba(0,0,0,.08);
--shadow-raised: 0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.02);
--card-bg: #ffffff;
--text-primary: #111827;
--surface: #f4f5f7;
--warning-bg: rgba(245,158,11,0.08);
--warning-border: rgba(245,158,11,0.25);
--warning-text: #d97706;
--primary-bg: rgba(37,99,235,0.04);
--primary: #2563eb;
--accent: #2563eb;
--accent-hover: #1d4ed8;
--accent-red: #ef4444;
--accent-green: #22c55e;
--accent-yellow: #f59e0b;
--accent-purple: #8b5cf6;
--text: #111827;
--glass-bg: rgba(255,255,255,0.97);
--glass-border: #e2e4e8;
--depth-sunken: #f4f5f7;
--depth-raised: #ffffff;
--gradient-accent: linear-gradient(135deg, #2563eb, #7c3aed);
--gradient-accent-hover: linear-gradient(135deg, #1d4ed8, #6d28d9);
}
[data-theme="light"] .sidebar { border-right-color: #e2e4e8; box-shadow: none; background: #fafbfc; }
[data-theme="light"] .sidebar .nav-link-mesh { color: #374151; }
[data-theme="light"] .sidebar .nav-link-mesh:hover { background: #e8eaee; color: #111827; }
[data-theme="light"] .sidebar .nav-link-mesh.active {
background: rgba(37,99,235,.07);
color: #2563eb; font-weight: 600;
}
[data-theme="light"] .sidebar .nav-link-mesh.active[style*="accent-purple"] {
background: rgba(124,58,237,.06);
color: #6d28d9 !important;
}
[data-theme="light"] .sidebar .nav-link-mesh.active[style*="accent-yellow"] {
background: rgba(180,83,9,.06);
color: #92400e !important;
}
[data-theme="light"] .sidebar-group { border-bottom-color: #ecedf0; }
[data-theme="light"] .sidebar-group-label { color: #6b7280; }
[data-theme="light"] .post-card { border-bottom-color: #ecedf0; }
[data-theme="light"] .post-card:hover { background: rgba(37,99,235,.02); }
[data-theme="light"] .explore-posts-grid .post-card { border-color: #e2e4e8; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
[data-theme="light"] .explore-posts-grid .post-card:hover { border-color: #d0d3da; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
[data-theme="light"] .profile-posts-grid .post-card { border-color: #e2e4e8; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
[data-theme="light"] .profile-posts-grid .post-card:hover { background: #ffffff; border-color: #d0d3da; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
[data-theme="light"] .explore-posts-grid .post-card:hover { background: #ffffff; }
[data-theme="light"] .post-card { background: #ffffff; }
[data-theme="light"] .form-control, [data-theme="light"] .form-select { color: #111827 !important; background: #f9fafb !important; border-color: #e2e4e8 !important; }
[data-theme="light"] .form-control:focus, [data-theme="light"] .form-select:focus { border-color: #2563eb !important; box-shadow: 0 0 0 3px rgba(37,99,235,.1), 0 0 12px rgba(37,99,235,.05) !important; }
[data-theme="light"] .btn-close-white { filter: invert(1); }
[data-theme="light"] .comment-input { background: #f4f5f7; color: #111827; border: 1px solid #e2e4e8; }
[data-theme="light"] .comment-input:focus { background: #fff; border-color: #2563eb; }
[data-theme="light"] .comment-input::placeholder { color: #6b7280 !important; }
[data-theme="light"] .btn-primary { background: var(--gradient-accent) !important; border: none !important; }
[data-theme="light"] .btn-primary:hover { background: var(--gradient-accent-hover) !important; }
[data-theme="light"] .btn-follow.not-following { background: var(--gradient-accent); border-color: transparent; box-shadow: 0 1px 4px rgba(37,99,235,.15); }
[data-theme="light"] .btn-follow.following { border-color: #d0d3da; color: #374151; }
[data-theme="light"] .btn-follow.following:hover { border-color: #dc2626; color: #dc2626; background: rgba(220,38,38,.04); }
[data-theme="light"] .btn-outline-secondary { border-color: #e2e4e8 !important; color: #374151 !important; }
[data-theme="light"] .btn-outline-secondary:hover { background: #ecedf0 !important; color: #111827 !important; border-color: #d0d3da !important; }
[data-theme="light"] .search-box { border-color: #e2e4e8; background: #f4f5f7; }
[data-theme="light"] .search-box:focus-within { border-color: #2563eb; box-shadow: 0 0 12px rgba(37,99,235,.06); }
[data-theme="light"] .tabs { background: #f4f5f7; }
[data-theme="light"] .tab { color: #6b7280; }
[data-theme="light"] .tab:hover { color: #111827; background: #ecedf0; }
[data-theme="light"] .tab.active { background: #fff; color: #2563eb; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
[data-theme="light"] .profile-stats { background: transparent; }
[data-theme="light"] .profile-stats > div + div, [data-theme="light"] .profile-stats > div + a, [data-theme="light"] .profile-stats > a + div, [data-theme="light"] .profile-stats > a + a { border-left-color: #e2e4e8; }
[data-theme="light"] .profile-stats > a:hover { background: rgba(37,99,235,.03); }
[data-theme="light"] .profile-badge-card { background: #fff; border-color: #e2e4e8; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
[data-theme="light"] .profile-badge-card:hover { border-color: #d0d3da; box-shadow: 0 4px 12px rgba(0,0,0,.06); }
[data-theme="light"] .profile-club { background: #fff; border-color: #e2e4e8; }
[data-theme="light"] .profile-club:hover { border-color: #d0d3da; }
[data-theme="light"] .profile-avatar-col { box-shadow: 0 4px 20px rgba(0,0,0,.1), 0 0 12px rgba(37,99,235,.06); }
[data-theme="light"] .profile-cover-wrap .profile-header {
background: rgba(255,255,255,.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-color: #e2e4e8; box-shadow: 0 2px 16px rgba(0,0,0,.05);
}
[data-theme="light"] .profile-tabs { background: #f4f5f7; }
[data-theme="light"] .profile-tab { color: #6b7280; }
[data-theme="light"] .profile-tab:hover { color: #111827; }
[data-theme="light"] .profile-tab.active { background: #fff; color: #2563eb; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
[data-theme="light"] .profile-cover-fade { background: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, transparent 26%, transparent 50%, rgba(244,245,247,0.9) 100%); }
[data-theme="light"] .profile-actions .btn-icon { background: #f4f5f7; border: 1px solid #e2e4e8; color: #374151; }
[data-theme="light"] .profile-actions .btn-icon:hover { background: #ecedf0; color: #111827; }
[data-theme="light"] .top-navbar { background: rgba(255,255,255,0.8); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .mobile-nav { background: rgba(255,255,255,0.8); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-top-color: rgba(0,0,0,0.06); }
[data-theme="light"] .settings-section { border-color: #e2e4e8; background: #fff; }
[data-theme="light"] .settings-section:hover { border-color: #d0d3da; }
[data-theme="light"] .suggest-card { border-color: #e2e4e8; background: #fff; }
[data-theme="light"] .suggest-card:hover { border-color: #d0d3da; box-shadow: 0 4px 16px rgba(0,0,0,.05); }
[data-theme="light"] .trending-tag { background: #f4f5f7; border-color: #e2e4e8; color: #2563eb; }
[data-theme="light"] .trending-tag:hover { border-color: #2563eb; background: rgba(37,99,235,.05); }
[data-theme="light"] .disc-filter-pill { background: #f4f5f7; border-color: #e2e4e8; color: #374151; }
[data-theme="light"] .disc-filter-pill:hover { border-color: #2563eb; color: #2563eb; background: rgba(37,99,235,.04); }
[data-theme="light"] .disc-filter-pill.active { background: var(--gradient-accent); color: #fff; border-color: transparent; }
[data-theme="light"] .carousel-btn { background: rgba(255,255,255,.9); color: #111827; border-color: #e2e4e8; }
[data-theme="light"] .carousel-btn:hover { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
[data-theme="light"] .modal-content { border-color: #e2e4e8; box-shadow: 0 16px 48px rgba(0,0,0,.12); }
[data-theme="light"] .heatmap-cell { background: #ecedf0; }
[data-theme="light"] .heatmap-cell.h1 { background: rgba(37,99,235,0.15); }
[data-theme="light"] .heatmap-cell.h2 { background: rgba(37,99,235,0.3); }
[data-theme="light"] .heatmap-cell.h3 { background: rgba(37,99,235,0.5); }
[data-theme="light"] .heatmap-cell.h4 { background: #2563eb; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }
[data-theme="light"] .navbar-icon-btn { color: #6b7280; }
[data-theme="light"] .navbar-icon-btn:hover { background: #e8eaee; color: #111827; }
[data-theme="light"] .navbar-icon-btn.active { background: rgba(37,99,235,.07); color: #2563eb; }
[data-theme="light"] .navbar-badge { box-shadow: 0 1px 3px rgba(220,38,38,.2); }
[data-theme="light"] .online-dot { border-color: #fff; box-shadow: 0 0 4px rgba(22,163,74,.3); }
[data-theme="light"] .mobile-nav a { color: #6b7280; }
[data-theme="light"] .mobile-nav a.active { color: #2563eb; filter: drop-shadow(0 0 3px rgba(37,99,235,.15)); }
[data-theme="light"] .mobile-nav a:hover { background: #e8eaee; }
[data-theme="light"] .mobile-nav a:active { background: #ecedf0; }
[data-theme="light"] a:hover > .avatar, [data-theme="light"] button:hover > .avatar { box-shadow: 0 0 0 2px #2563eb, 0 0 8px rgba(37,99,235,.1); }
[data-theme="light"] .lvl-starter { background: rgba(107,114,128,.08); color: #6b7280; }
[data-theme="light"] .lvl-bronze { background: rgba(217,119,6,.08); color: #b45309; }
[data-theme="light"] .lvl-silver { background: rgba(107,114,128,.08); color: #6b7280; }
[data-theme="light"] .lvl-gold { background: rgba(245,158,11,.1); color: #d97706; }
[data-theme="light"] .lvl-platinum { background: rgba(37,99,235,.08); color: #2563eb; }
[data-theme="light"] .lvl-diamond { background: rgba(22,163,74,.08); color: #15803d; }
[data-theme="light"] .lvl-master { background: rgba(109,40,217,.08); color: #6d28d9; }
[data-theme="light"] .lvl-legend { background: rgba(37,99,235,.1); color: #2563eb; }
[data-theme="light"] .btn-primary:hover { box-shadow: 0 0 14px rgba(37,99,235,.15), 0 4px 12px rgba(37,99,235,.1) !important; }
[data-theme="light"] .btn-follow.not-following:hover { box-shadow: 0 0 12px rgba(37,99,235,.15), 0 4px 8px rgba(37,99,235,.08); }
[data-theme="light"] .btn-view-post:hover { box-shadow: 0 0 8px rgba(37,99,235,.1); }
[data-theme="light"] .points-badge { color: #d97706; }
[data-theme="light"] .points-badge svg { stroke: #d97706; }
[data-theme="light"] .streak-badge { color: #ea580c; }
[data-theme="light"] .streak-badge svg { stroke: #ea580c; }
[data-theme="light"] .pb-badge { background: rgba(245,158,11,.1); color: #d97706; }
[data-theme="light"] .goal-progress-fill { box-shadow: 0 0 6px rgba(37,99,235,.15); }
[data-theme="light"] .navbar-points { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.2); color: #d97706; }
[data-theme="light"] .navbar-points:hover { background: rgba(245,158,11,.14); }
[data-theme="light"] .navbar-points svg { stroke: #d97706; }
[data-theme="light"] .feed-nav-btn { border: 1px solid #e2e4e8; }
[data-theme="light"] .feed-nav-btn:hover { box-shadow: 0 4px 14px rgba(0,0,0,.06); border-color: #d0d3da; }
[data-theme="light"] .post-username:hover { color: #2563eb; }
[data-theme="light"] .htag { color: #2563eb; }
[data-theme="light"] .view-comments { color: #2563eb; }
[data-theme="light"] .comment-submit { color: #2563eb; }
[data-theme="light"] .post-discipline { color: #2563eb; }
[data-theme="light"] .challenge-history-item { background: #fff; border-color: #e2e4e8; }
[data-theme="light"] .challenge-history-item:hover { border-color: #d0d3da; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
[data-theme="light"] .goal-card { background: #fff; border-color: #e2e4e8; }
[data-theme="light"] .goal-card:hover { border-color: #d0d3da; }
[data-theme="light"] .feed-user-bar { background: #fff; border-color: #e2e4e8; }
[data-theme="light"] .feed-user-bar:hover { border-color: #d0d3da; }
[data-theme="light"] .feed-nav-btn { border: 1px solid rgba(0,0,0,.06); }
[data-theme="light"] .feed-nav-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
[data-theme="light"] .profile-cover-wrap .profile-stats { background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); }
[data-theme="light"] .profile-cover-wrap .profile-badge-card { background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); }
[data-theme="light"] .profile-cover-wrap .profile-club { background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border-color: rgba(255,255,255,0.5); }
[data-theme="light"] .profile-cover-wrap .profile-actions .btn-follow { background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border-color: rgba(0,0,0,.15); color: #1a1a2e; }
[data-theme="light"] .profile-cover-wrap .profile-actions .btn-follow.following { background: var(--accent); color: #fff; }
[data-theme="light"] .ev-compare-overlay > div, [data-theme="light"] .scatt-viewer-overlay > div { background: #fff; color: var(--text-main); }
[data-theme="light"] #profChallengeOverlay > div { background: #fff !important; color: var(--text-main); box-shadow: 0 16px 48px rgba(0,0,0,.15) !important; }
.theme-toggle-row {
display: flex; align-items: center; justify-content: space-between;
}
.theme-toggle-btn {
position: relative; width: 56px; height: 28px;
border-radius: 14px;
background: var(--element-bg);
border: 1px solid var(--border);
cursor: pointer; padding: 0;
display: flex; align-items: center;
transition: background .3s;
outline: none;
}
.theme-toggle-btn .theme-icon-sun,
.theme-toggle-btn .theme-icon-moon {
position: absolute; font-size: 13px;
transition: opacity .2s;
}
.theme-toggle-btn .theme-icon-sun { left: 6px; opacity: 0; }
.theme-toggle-btn .theme-icon-moon { right: 6px; opacity: 1; }
[data-theme="light"] .theme-toggle-btn .theme-icon-sun { opacity: 1; }
[data-theme="light"] .theme-toggle-btn .theme-icon-moon { opacity: 0; }
.theme-toggle-knob {
width: 22px; height: 22px;
background: var(--accent);
border-radius: 50%; margin-left: 3px;
transition: transform .3s cubic-bezier(.4,0,.2,1);
flex-shrink: 0;
}
[data-theme="light"] .theme-toggle-knob { transform: translateX(28px); }
.chat-attach-btn {
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; min-width: 36px; flex-shrink: 0;
cursor: pointer; color: var(--text-muted);
background: var(--element-bg); border: 1px solid var(--border);
border-radius: 50%;
transition: all .2s;
}
.chat-attach-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--primary-bg); }
.chat-attach-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.chat-input-wrap { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.msg-img { max-width: 220px; border-radius: 8px; display: block; margin-top: 4px; cursor: pointer; }
.msg-file {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 8px; border-radius: 6px;
background: rgba(255,255,255,.1); font-size: 11px;
color: inherit; margin-top: 4px;
border: 1px solid rgba(255,255,255,.2);
}
.msg-sent .msg-file { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.25); }
.msg-received .msg-file { background: var(--element-bg); border-color: var(--border); }
.msg-attach-preview {
display: flex; align-items: center; gap: 6px;
font-size: 11px; color: var(--accent);
background: rgba(59,130,246,.08);
border-radius: 6px; padding: 3px 8px;
}
.profile-level-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--rl);
padding: 16px; margin-bottom: 20px;
}
.profile-level-header {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 10px;
}
.profile-level-title { font-weight: 700; font-size: 15px; }
.profile-level-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.profile-level-next { font-size: 10px; color: var(--text-muted); margin-top: 4px; text-align: right; }
.perf-section { margin: 16px 0 20px; }
.perf-header {
display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
font-size: 16px; font-weight: 700; color: var(--text-primary);
}
.perf-header svg { width: 18px; height: 18px; stroke: var(--accent); }
.perf-stats-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
gap: 10px; margin-bottom: 14px;
}
.perf-stat-card {
background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
padding: 14px 12px; text-align: center; transition: border-color .2s, box-shadow .2s;
}
.perf-stat-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,102,204,0.08); }
.perf-stat-value { font-size: 22px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; color: var(--text-primary); animation: perfCountUp 0.4s ease-out; }
.perf-stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.perf-stat-accent .perf-stat-value { color: var(--accent); }
.perf-stat-gold .perf-stat-value { color: #f59e0b; }
.perf-chart-card {
background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
padding: 16px; transition: border-color .2s;
}
.perf-chart-card:hover { border-color: color-mix(in srgb, var(--border) 50%, var(--accent) 50%); }
.perf-chart-title {
font-size: 13px; font-weight: 600; color: var(--text-primary);
margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.perf-chart-sub { font-weight: 400; color: var(--text-muted); font-size: 11px; }
#perfChart, .perf-chart-canvas { width: 100%; height: 200px; display: block; }
.perf-history-card {
background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
padding: 16px;
}
.perf-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.perf-table {
width: 100%; border-collapse: collapse; font-size: 12px;
font-family: 'Space Grotesk', sans-serif;
}
.perf-table th {
text-align: left; font-size: 9px; text-transform: uppercase; letter-spacing: .6px;
color: var(--text-muted); padding: 8px 10px; border-bottom: 2px solid var(--border);
position: sticky; top: 0; background: var(--card-bg); z-index: 1;
}
.perf-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-primary); }
.perf-row-link { cursor: pointer; transition: background .12s, transform .1s; }
.perf-row-link:hover { background: var(--element-bg); }
.perf-row-link:active { transform: scale(0.995); }
.perf-row-arrow { display: inline-flex; margin-left: 4px; opacity: 0; transition: opacity .12s; }
.perf-row-arrow svg { width: 11px; height: 11px; stroke: var(--accent); stroke-width: 2; fill: none; }
.perf-row-link:hover .perf-row-arrow { opacity: 1; }
.perf-td-dim { color: var(--text-muted); font-size: 11px; }
.perf-grid { gap: 12px; }
.perf-grid > * { margin-bottom: 0; }
.perf-disc-btn { border-radius: 20px !important; padding: 4px 14px !important; transition: all .15s; }
.perf-disc-btn.btn-primary { box-shadow: 0 2px 6px rgba(0,102,204,0.2); }
.perf-range-btn { border-radius: 20px !important; padding: 3px 12px !important; font-size: 11px !important; }
.perf-sparkline { display: block; margin-top: 4px; width: 100%; height: 28px; opacity: 0.5; }@media (max-width: 600px){
.perf-stats-grid { grid-template-columns: repeat(2, 1fr); }
.perf-chart-card { padding: 12px; }
.perf-stat-card { padding: 10px 8px; }
.perf-stat-value { font-size: 18px; }
#perfChart { height: 180px; }}
.badge-athlete {
display: inline-flex; font-size: 9px;
color: #f97316;
background: rgba(255,107,53,.1);
padding: 2px 6px; border-radius: 6px;
font-weight: 600; border: 1px solid rgba(255,107,53,.25);
}
.badge-athlete-verified {
display: inline-flex; align-items: center;
color: var(--accent); vertical-align: middle;
margin-left: 4px;
filter: drop-shadow(0 0 3px rgba(59,130,246,0.4));
}
.badge-athlete-verified svg {
width: 16px; height: 16px;
stroke: var(--accent); stroke-width: 2.5;
fill: none;
}
.guidelines-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--rl);
padding: 24px;
}
.guidelines-intro { font-size: 13px; color: var(--text-dim); margin-bottom: 20px; line-height: 1.6; }
.guidelines-list { display: flex; flex-direction: column; gap: 0; }
.guideline-item {
display: flex; gap: 14px; align-items: flex-start;
padding: 14px 0; border-bottom: 1px solid var(--border);
}
.guideline-item:last-child { border-bottom: none; }
.guideline-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.guideline-title { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.guideline-desc { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.guideline-section { padding: 16px 0; border-bottom: 1px solid var(--border); }
.guideline-section:last-child { border-bottom: none; }
.guideline-section-title { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.guideline-sub { font-size: 12px; font-weight: 600; color: var(--text-primary); margin: 10px 0 4px; }
.guideline-text { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin-bottom: 4px; }
.guideline-text.guideline-warn { color: var(--accent-red, #e74c3c); font-weight: 600; margin-top: 8px; }
.guideline-list { list-style: none; padding: 0; margin: 4px 0; }
.guideline-list li { font-size: 12px; color: var(--text-dim); line-height: 1.6; padding-left: 16px; position: relative; }
.guideline-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.guidelines-footer {
margin-top: 20px; padding-top: 16px;
border-top: 1px solid var(--border);
font-size: 12px; color: var(--text-muted); line-height: 1.5;
}
.settings-section .btn { min-width: 100px; }
.settings-toggle-row {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.toggle-switch {
position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
position: absolute; inset: 0; background: var(--border); border-radius: 24px;
cursor: pointer; transition: background .2s;
}
.toggle-slider::before {
content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px;
background: var(--text-primary); border-radius: 50%; transition: transform .2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.btn-follow svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; vertical-align: middle; margin-right: 2px; }
.post-card.post-private { border-color: var(--accent-yellow); opacity: .85; }
.post-private-badge {
display: inline-flex; align-items: center; gap: 2px;
font-size: 9px; color: var(--accent-yellow);
font-weight: 600;
}
.post-private-badge svg { width: 9px; height: 9px; stroke: var(--accent-yellow); fill: none; stroke-width: 2; }
.landscape-block {
display: none;
position: fixed; inset: 0;
background: var(--bg-main);
z-index: 99999;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
color: var(--text-main);
font-family: 'Inter', 'Segoe UI', sans-serif;
}
.landscape-block svg { width: 40px; height: 40px; stroke: var(--accent); }
.landscape-block p { font-size: 13px; color: var(--text-muted); text-align: center; max-width: 240px; }@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) and (pointer: coarse){
.landscape-block { display: flex; }}
@keyframes skeleton-pulse {
0% { opacity: 0.6; }
50% { opacity: 0.3; }
100% { opacity: 0.6; }
}
.skeleton-card {
background: var(--bg-panel);
border-radius: var(--r, 12px);
margin-bottom: 12px;
padding: 14px;
animation: skeleton-pulse 1.2s ease-in-out infinite;
}
.skeleton-card::before {
content: '';
display: block;
height: 12px;
width: 40%;
background: var(--element-bg);
border-radius: 6px;
margin-bottom: 10px;
}
.skeleton-card::after {
content: '';
display: block;
height: 180px;
background: var(--element-bg);
border-radius: 8px;
}
.feed-skeleton { padding: 0 4px; }@media (pointer: coarse){
.btn, .btn-follow, .feed-nav-btn, button {
min-height: 44px;
}
.trending-tag {
padding: 8px 14px;
min-height: 40px;
display: inline-flex;
align-items: center;
}
.suggest-card .btn-follow {
min-height: 36px;
padding: 6px 16px;
}}@media (max-width: 380px){
.feed-nav { grid-template-columns: repeat(2, 1fr) !important; }}
.feed-user-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 12px;
}
.feed-user-bar .level-progress {
flex: 1;
height: 6px;
background: var(--element-bg);
border-radius: 3px;
overflow: hidden;
}
.feed-user-bar .level-progress-fill {
height: 100%;
background: var(--accent);
border-radius: 3px;
transition: width 0.4s ease;
}
.challenge-history-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 10px;
}
.challenge-history-item .ch-rank {
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 800;
background: var(--element-bg);
color: var(--text-muted);
}
.challenge-history-item .ch-rank.gold { background: rgba(240,180,41,0.2); color: #f0b429; }
.duel-stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-bottom: 12px;
}
.duel-stat-box {
text-align: center;
padding: 10px 6px;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 10px;
}
.duel-stat-box .ds-value {
font-size: 20px;
font-weight: 800;
font-family: 'Space Grotesk', monospace;
line-height: 1;
}
.duel-stat-box .ds-label {
font-size: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-muted);
margin-top: 4px;
}@media (max-width: 380px){
.duel-stats-grid { grid-template-columns: repeat(2, 1fr); }}
.duel-verlauf {
margin: 14px 0 16px;
padding: 12px 12px 6px;
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: 12px;
}
.duel-verlauf-kopf {
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.duel-verlauf-kopf h4 {
margin: 0; font-size: 13px; font-weight: 700;
display: flex; align-items: center; gap: 6px;
}
.duel-verlauf-kopf h4 svg { width: 14px; height: 14px; }
.duel-verlauf-werte {
display: flex; gap: 12px; font-size: 11px; color: var(--text-muted);
font-family: 'Space Grotesk', monospace;
}
.duel-verlauf-werte b { color: var(--text-main); font-weight: 700; }
.duel-form-reihe {
display: flex; gap: 3px; margin-bottom: 10px;
overflow-x: auto; padding-bottom: 2px; scrollbar-width: none;
}
.duel-form-reihe::-webkit-scrollbar { display: none; }
.duel-form-feld {
flex: 0 0 auto;
width: 18px; height: 18px; border-radius: 5px;
display: flex; align-items: center; justify-content: center;
font-size: 9px; font-weight: 800; line-height: 1;
font-family: 'Space Grotesk', monospace;
cursor: default;
}
.duel-form-S { background: rgba(78,189,53,.16);  color: var(--accent-green, #4caf50); }
.duel-form-N { background: rgba(209,52,56,.14);  color: var(--accent-red, #e74c3c); }
.duel-form-U { background: var(--element-bg);    color: var(--text-muted); }
.duel-chart-canvas { width: 100%; display: block; }
.ptr-indicator {
position: fixed; top: 0; left: 50%; transform: translateX(-50%) translateY(-50px);
z-index: 99990; width: 36px; height: 36px;
background: var(--bg-panel); border: 1px solid var(--border);
border-radius: 50%; display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: transform 0.2s ease;
pointer-events: none;
}
.ptr-indicator.pulling { transform: translateX(-50%) translateY(20px); }
.ptr-indicator.refreshing { transform: translateX(-50%) translateY(20px); }
.ptr-indicator svg { width: 18px; height: 18px; stroke: var(--accent); transition: transform 0.2s; }
.ptr-indicator.pulling svg { transform: rotate(180deg); }
.ptr-indicator.refreshing svg { animation: ptr-spin 0.8s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
.toast-container {
position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
z-index: 99995; display: flex; flex-direction: column; gap: 8px;
pointer-events: none; max-width: 420px; width: calc(100% - 32px);
}
.toast-msg {
padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 600;
display: flex; align-items: center; gap: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3); pointer-events: auto;
animation: toast-in 0.3s ease; transition: opacity 0.3s, transform 0.3s;
}
.toast-msg.toast-error { background: var(--accent-red, #e74c3c); color: #fff; }
.toast-msg.toast-success { background: var(--accent-green, #4ebd35); color: #fff; }
.toast-msg.toast-info { background: var(--accent, #0078d7); color: #fff; }
.toast-msg.toast-warn { background: var(--accent-yellow, #f0b429); color: #1a1a1a; }
.toast-msg .toast-close { background: none; border: none; color: inherit; font-size: 18px; cursor: pointer; padding: 0 4px; opacity: 0.7; margin-left: auto; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.score-counter { font-family: 'Space Grotesk', monospace; font-weight: 800; }
.score-counter.animating { transition: none; }
.onboarding-overlay {
position: fixed; inset: 0; z-index: 99997; background: rgba(0,0,0,0.85);
display: flex; align-items: center; justify-content: center; padding: 20px;
}
.onboarding-card {
background: var(--bg-panel); border: 1px solid var(--border); border-radius: 20px;
padding: 32px 28px; max-width: 380px; width: 100%; text-align: center;
box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
.onboarding-card h2 { font-size: 20px; margin: 0 0 8px; }
.onboarding-card p { font-size: 13px; color: var(--text-muted); margin: 0 0 20px; line-height: 1.6; }
.onboarding-steps { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; }
.onboarding-step { width: 8px; height: 8px; border-radius: 50%; background: var(--element-bg); }
.onboarding-step.active { background: var(--accent); width: 20px; border-radius: 4px; }
.onboarding-card .btn { width: 100%; margin-top: 8px; }
.disc-filter-row {
display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 12px;
scrollbar-width: none; -ms-overflow-style: none;
}
.disc-filter-row::-webkit-scrollbar { display: none; }
.disc-filter-pill {
flex-shrink: 0; padding: 6px 14px; border-radius: 20px; font-size: 11px; font-weight: 600;
background: var(--element-bg); color: var(--text-dim); border: 1px solid var(--border);
cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.disc-filter-pill:hover { border-color: var(--accent); color: var(--accent); }
.disc-filter-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pb-badge {
display: inline-flex; align-items: center; gap: 3px;
font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
color: var(--accent-yellow, #f0b429); background: rgba(240,180,41,0.12);
padding: 2px 8px; border-radius: 4px;
}
.training-heatmap {
display: grid; grid-template-columns: repeat(53, 1fr); gap: 2px;
direction: ltr;
}
.heatmap-cell {
aspect-ratio: 1; border-radius: 2px; background: var(--element-bg);
min-width: 0;
}
.heatmap-cell.h1 { background: rgba(59,130,246,0.25); }
.heatmap-cell.h2 { background: rgba(59,130,246,0.5); }
.heatmap-cell.h3 { background: rgba(59,130,246,0.75); }
.heatmap-cell.h4 { background: var(--accent); }
.heatmap-months { display: flex; justify-content: space-between; font-size: 9px; color: var(--text-muted); padding: 0 2px; margin-top: 4px; }
.goal-card {
background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px;
padding: 14px 16px; margin-bottom: 12px;
}
.goal-progress-bar {
height: 8px; background: var(--element-bg); border-radius: 4px; overflow: hidden; margin-top: 8px;
}
.goal-progress-fill {
height: 100%; border-radius: 4px; transition: width 0.6s ease;
background: linear-gradient(90deg, var(--accent), var(--accent-purple, #7c6ef0));
box-shadow: 0 0 8px rgba(59,130,246,.3);
}
.post-card, .suggest-card, .profile-badge-card, .settings-section,
.challenge-history-item, .goal-card, .feed-user-bar, .trending-tag,
.disc-filter-pill, .btn-view-post, .btn-follow, .btn-outline-secondary,
.form-control, .form-select, .search-box, .comment-input, .profile-club,
.comment, .lb-row, .conv-item, .notif-item, .mc-info-pill, .mc-react-btn,
.ach-card, .ev-entry, .nav-badge, .post-type-pill, .lvl-badge,
.feed-nav-btn, .duel-stat-box, .admin-card, .tab {
transition: border-color .2s, box-shadow .2s, background .2s, color .2s, transform .2s;
}
.comment:hover { background: var(--element-bg); border-radius: var(--rs); box-shadow: 0 0 0 3px var(--element-bg); }
.lb-row:hover { background: var(--element-bg); }
.conv-item:hover { background: var(--element-bg); }
.notif-item:hover { background: var(--element-bg); }
.ev-entry:hover { background: var(--element-bg); }
.suggest-card:hover { border-color: rgba(59,130,246,.2); }
.profile-badge-card:hover { border-color: rgba(59,130,246,.2); }
.challenge-history-item:hover { border-color: rgba(59,130,246,.2); transform: translateY(-1px); }
.goal-card:hover { border-color: rgba(59,130,246,.2); }
.feed-user-bar:hover { border-color: rgba(59,130,246,.15); }
.profile-club:hover { border-color: rgba(59,130,246,.2); }
.duel-stat-box:hover { border-color: rgba(59,130,246,.15); transform: translateY(-1px); }
.ach-card:hover { border-color: rgba(59,130,246,.2); transform: translateY(-1px); }
.admin-card:hover { border-color: var(--border-light); }
.trending-tag:hover { border-color: var(--accent); color: var(--accent); }
.disc-filter-pill:hover { border-color: var(--accent); color: var(--accent); }
.mc-info-pill:hover { border-color: var(--border-light); color: var(--text-main); }
.post-type-pill:hover { transform: scale(1.05); }
.lvl-badge:hover { transform: scale(1.05); }
.nav-badge:hover { transform: scale(1.1); }
.feed-nav-btn:hover { border-color: var(--border-light); }
.post-username:hover, .comment-username:hover, .suggest-name:hover,
.post-discipline:hover, .htag:hover, .view-comments:hover { color: var(--accent); }
[data-theme="light"] .comment:hover { background: #f4f5f7; box-shadow: 0 0 0 3px #f4f5f7; }
[data-theme="light"] .lb-row:hover { background: #f4f5f7; }
[data-theme="light"] .conv-item:hover { background: #f4f5f7; }
[data-theme="light"] .notif-item:hover { background: #f4f5f7; }
[data-theme="light"] .ev-entry:hover { background: #f4f5f7; }
[data-theme="light"] .suggest-card:hover { border-color: #d0d3da; }
[data-theme="light"] .profile-badge-card:hover { border-color: #d0d3da; }
[data-theme="light"] .challenge-history-item:hover { border-color: #d0d3da; }
[data-theme="light"] .goal-card:hover { border-color: #d0d3da; }
[data-theme="light"] .feed-user-bar:hover { border-color: #d0d3da; }
[data-theme="light"] .duel-stat-box:hover { border-color: #d0d3da; }
[data-theme="light"] .ach-card:hover { border-color: #d0d3da; }
[data-theme="light"] .feed-nav-btn:hover { border-color: #d0d3da; }
[data-theme="light"] .disc-filter-pill:hover { background: rgba(37,99,235,.04); }
[data-theme="light"] .trending-tag:hover { background: rgba(37,99,235,.04); }
[data-theme="light"] .mc-info-pill:hover { background: #e8eaee; }
.nav-badge, .navbar-badge {
animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.3); }
50% { box-shadow: 0 0 8px 2px rgba(239,68,68,.2); }
}
.disc-filter-pill.active {
box-shadow: 0 0 12px rgba(59,130,246,.2);
}
.disc-filter-pill:hover { transform: translateY(-1px); }
.feed-nav-btn:hover {
box-shadow: 0 0 20px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.1);
}
.challenge-history-item {
transition: border-color .2s, box-shadow .2s, transform .2s;
}
.challenge-history-item:hover {
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.lvl-legend {
animation: legendGlow 2.5s ease-in-out infinite;
}
.pb-badge {
box-shadow: 0 0 8px rgba(234,179,8,.2);
animation: pbGlow 2s ease-in-out infinite;
}
@keyframes pbGlow {
0%, 100% { box-shadow: 0 0 8px rgba(234,179,8,.2); }
50% { box-shadow: 0 0 14px rgba(234,179,8,.35); }
}
.heatmap-cell.h3:hover, .heatmap-cell.h4:hover {
box-shadow: 0 0 6px rgba(59,130,246,.4);
transform: scale(1.5);
z-index: 1;
position: relative;
}
.heatmap-cell { transition: transform .15s, box-shadow .15s; }
@keyframes goalShimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
.goal-progress-fill {
background-size: 200% 100%;
animation: goalShimmer 3s ease infinite;
}
.settings-section {
transition: border-color .2s, box-shadow .2s;
}
.settings-section:hover {
border-color: var(--border-light);
}
.carousel-btn:hover {
background: rgba(0,0,0,.6);
box-shadow: 0 0 12px rgba(0,0,0,.3);
}
.tab.active {
box-shadow: 0 1px 3px rgba(0,0,0,.15), 0 0 8px rgba(59,130,246,.06);
}
.toast-msg.toast-error { box-shadow: 0 4px 20px rgba(239,68,68,.2); }
.toast-msg.toast-success { box-shadow: 0 4px 20px rgba(34,197,94,.2); }
.toast-msg.toast-info { box-shadow: 0 4px 20px rgba(59,130,246,.2); }
.post-username:hover { text-shadow: 0 0 12px rgba(59,130,246,.2); }
.streak-badge { filter: drop-shadow(0 0 4px rgba(255,107,53,.3)); }
.points-badge { filter: drop-shadow(0 0 4px rgba(234,179,8,.3)); }
.modal.show .modal-content {
box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 0 0 1px var(--border);
}
.badge-athlete-verified svg {
filter: drop-shadow(0 0 4px rgba(59,130,246,.3));
}
a.post-discipline:hover { text-shadow: 0 0 8px rgba(59,130,246,.2); }
.btn-icon[onclick*="share"]:hover { animation: wiggle .4s ease; }
@keyframes wiggle { 0%,100%{transform:rotate(0)} 25%{transform:rotate(8deg)} 75%{transform:rotate(-8deg)} }
.like-count { display: inline-block; transition: transform .15s ease; }
.like-count.bouncing { animation: countBounce .3s ease; }
@keyframes countBounce { 0%{transform:scale(1)} 40%{transform:scale(1.3)} 100%{transform:scale(1)} }
.btn-icon[onclick*="Comment"]:hover svg,
.post-actions .btn-icon:nth-child(2):hover svg { transform: scale(1.15) rotate(-5deg); }
.post-username { position: relative; }
.post-username::after {
content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px;
background: var(--accent); transition: width .2s ease;
}
.post-username:hover::after { width: 100%; }
.carousel-dot.active { box-shadow: 0 0 6px currentColor; }
.post-type-pill { transition: transform .15s ease; }
.post-type-pill:hover { transform: scale(1.05); }
.stat-number { transition: color .2s; }
.profile-stats > a:hover .stat-number { color: var(--accent); }
*:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.content-area { animation: fadeIn .2s ease; }
.table tbody tr { transition: background .15s; }@media (min-width: 769px){
.settings-section:hover { box-shadow: 0 2px 12px rgba(0,0,0,.06); }}
.form-control, .form-select { background: var(--depth-sunken) !important; }
.comment-input { background: var(--depth-sunken); }
.search-box { background: var(--depth-sunken); }
.settings-section,
.suggest-card,
.profile-badge-card,
.challenge-history-item,
.goal-card,
.mc-h2h,
.mc-side,
.duel-stat-box { background: var(--depth-raised); }
.modal-content { background: var(--bg-panel); box-shadow: var(--shadow-lg), 0 0 0 1px var(--border); }
.dropdown-menu { box-shadow: var(--shadow-lg); }
.settings-section,
.challenge-history-item,
.goal-card,
.mc-h2h,
.feed-user-bar,
.onboarding-card {
border: 1px solid var(--border);
border-radius: var(--rl);
transition: border-color .25s, box-shadow .25s;
}
.settings-section:hover,
.challenge-history-item:hover,
.goal-card:hover,
.mc-h2h:hover,
.suggest-card:hover {
border-color: var(--border-light);
}
@keyframes pageSlideIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pageFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.content-area { animation: pageFadeUp .25s ease both; }
.content-area:has(.explore-layout) { animation: pageFadeUp .3s ease both; }
.content-area:has(.profile-header) { animation: pageFadeUp .3s ease both; }
@keyframes staggerFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.challenge-history-item { animation: staggerFadeIn .3s ease both; }
.challenge-history-item:nth-child(1) { animation-delay: 0s; }
.challenge-history-item:nth-child(2) { animation-delay: .05s; }
.challenge-history-item:nth-child(3) { animation-delay: .1s; }
.challenge-history-item:nth-child(4) { animation-delay: .15s; }
.suggest-card { animation: staggerFadeIn .3s ease both; }
.suggest-card:nth-child(1) { animation-delay: 0s; }
.suggest-card:nth-child(2) { animation-delay: .04s; }
.suggest-card:nth-child(3) { animation-delay: .08s; }
.suggest-card:nth-child(4) { animation-delay: .12s; }
.suggest-card:nth-child(5) { animation-delay: .16s; }
.duel-stat-box { animation: staggerFadeIn .3s ease both; }
.duel-stat-box:nth-child(1) { animation-delay: 0s; }
.duel-stat-box:nth-child(2) { animation-delay: .05s; }
.duel-stat-box:nth-child(3) { animation-delay: .1s; }
.duel-stat-box:nth-child(4) { animation-delay: .15s; }
.lb-row { animation: staggerFadeIn .25s ease both; }
.lb-row:nth-child(1) { animation-delay: 0s; }
.lb-row:nth-child(2) { animation-delay: .03s; }
.lb-row:nth-child(3) { animation-delay: .06s; }
.lb-row:nth-child(4) { animation-delay: .09s; }
.lb-row:nth-child(5) { animation-delay: .12s; }
.sidebar .nav-link-mesh { animation: staggerFadeIn .2s ease both; }
.sidebar .nav-link-mesh:nth-child(1) { animation-delay: .02s; }
.sidebar .nav-link-mesh:nth-child(2) { animation-delay: .04s; }
.sidebar .nav-link-mesh:nth-child(3) { animation-delay: .06s; }
.sidebar .nav-link-mesh:nth-child(4) { animation-delay: .08s; }
.sidebar .nav-link-mesh:nth-child(5) { animation-delay: .1s; }
.sidebar .nav-link-mesh:nth-child(6) { animation-delay: .12s; }
.stat-number,
.mc-score,
.score-counter,
.like-count,
.trending-count,
.ds-value,
.ev-score,
.lb-score,
.navbar-points,
.points-badge,
.streak-badge,
.nav-badge,
.navbar-badge {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
.profile-tab.active { background: var(--bg-panel); position: relative; }
.profile-tab.active::after {
content: ''; position: absolute; bottom: 0; left: 20%; right: 20%;
height: 2px; background: var(--gradient-accent); border-radius: 1px;
}
.sidebar .nav-link-mesh.active::before {
content: ''; position: absolute; left: 0; top: 20%; bottom: 20%;
width: 3px; background: var(--gradient-accent); border-radius: 0 2px 2px 0;
}
.sidebar .nav-link-mesh.active[style*="accent-yellow"]::before { background: var(--accent-yellow, #f0b429); }
.sidebar .nav-link-mesh.active[style*="accent-purple"]::before { background: var(--accent-purple, #7c6ef0); }
.sidebar .nav-link-mesh.active[style*="accent-red"]::before    { background: var(--accent-red, #ef4444); }
.sidebar .nav-my10.active::before                              { background: #e2392c; }
[data-theme="light"] .sidebar .nav-link-mesh.active[style*="accent-yellow"]::before { background: #b45309; }
[data-theme="light"] .sidebar .nav-link-mesh.active[style*="accent-purple"]::before { background: #6d28d9; }
.sidebar .nav-link-mesh.active:not(.nav-episch):not(.nav-pro) {
background: linear-gradient(90deg, rgba(59,130,246,.17), rgba(59,130,246,.06));
background: linear-gradient(90deg, color-mix(in srgb, currentColor 17%, transparent), color-mix(in srgb, currentColor 6%, transparent));
box-shadow: inset 0 0 0 1px rgba(59,130,246,.15);
box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 15%, transparent);
}
.sidebar .nav-link-mesh.active:not(.nav-episch):not(.nav-pro)::before {
left: 6px; top: 50%; bottom: auto; height: 18px; margin-top: -9px; border-radius: 3px;
}
[data-theme="light"] .sidebar .nav-link-mesh.active:not(.nav-episch):not(.nav-pro) {
background: linear-gradient(90deg, rgba(37,99,235,.13), rgba(37,99,235,.045));
background: linear-gradient(90deg, color-mix(in srgb, currentColor 13%, transparent), color-mix(in srgb, currentColor 4.5%, transparent));
}
.suggest-card .btn-follow.ajax-follow {
align-self: stretch; position: relative; isolation: isolate; overflow: hidden;
display: inline-flex; align-items: center; justify-content: center;
min-height: 30px; padding: 0 10px; margin-top: 2px;
border-radius: 10px; border: 1px solid transparent;
font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .01em; white-space: nowrap;
box-shadow: none;
}
.suggest-card .btn-follow.ajax-follow::after {
content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
background: var(--gradient-accent); opacity: 0; transition: opacity .18s ease;
}
.suggest-card .btn-follow.ajax-follow.not-following {
background: rgba(59,130,246,.13); border-color: rgba(59,130,246,.30); color: #93bbff;
background: color-mix(in srgb, var(--accent) 14%, transparent);
border-color: color-mix(in srgb, var(--accent) 32%, transparent);
color: color-mix(in srgb, var(--accent) 62%, #fff);
box-shadow: none; transform: none;
}
[data-theme="light"] .suggest-card .btn-follow.ajax-follow.not-following {
background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.22); color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, transparent);
border-color: color-mix(in srgb, var(--accent) 24%, transparent);
box-shadow: none;
}@media (hover: hover){
.suggest-card .btn-follow.ajax-follow.not-following:hover,
[data-theme="light"] .suggest-card .btn-follow.ajax-follow.not-following:hover {
color: #fff; border-color: transparent; transform: none;
box-shadow: 0 4px 14px rgba(59,130,246,.26);
}
.suggest-card .btn-follow.ajax-follow.not-following:hover::after { opacity: 1; }}
.suggest-card .btn-follow.ajax-follow.not-following:active,
[data-theme="light"] .suggest-card .btn-follow.ajax-follow.not-following:active { color: #fff; border-color: transparent; }
.suggest-card .btn-follow.ajax-follow.not-following:active::after { opacity: 1; }
.suggest-card .btn-follow.ajax-follow:active { transform: scale(.96); }
.suggest-card .btn-follow.ajax-follow.following,
[data-theme="light"] .suggest-card .btn-follow.ajax-follow.following {
background: transparent; border-color: var(--border-light); color: var(--text-muted); font-weight: 500;
}
.suggest-card .btn-follow.ajax-follow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }@media (pointer: coarse){
.suggest-card .btn-follow.ajax-follow { min-height: 36px; padding: 0 12px; }}
.mc-score-bar-left { background: var(--gradient-accent) !important; }
.level-progress-fill { background: var(--gradient-accent) !important; }
.feed-user-bar .level-progress-fill { background: var(--gradient-accent) !important; }
.emoji-trigger {
background: none; border: none; cursor: pointer; font-size: 16px;
padding: 4px; opacity: 0.5; transition: opacity .2s;
}
.emoji-trigger:hover { opacity: 1; }
.emoji-popup {
position: absolute; bottom: 100%; left: 0; z-index: 50;
background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--r);
padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
box-shadow: var(--shadow-lg); animation: scaleIn .15s ease;
min-width: 200px;
}
.emoji-item {
font-size: 18px; padding: 4px; border-radius: 6px; cursor: pointer;
text-align: center; transition: background .1s;
}
.emoji-item:hover { background: var(--element-bg); transform: scale(1.2); }
.streak-reward-popup {
position: fixed; inset: 0; z-index: 99998; padding: 16px;
background: rgba(8,8,12,0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none; overscroll-behavior: contain;
}
.streak-reward-popup, .streak-reward-popup * { transition: none !important; }
.streak-reward-popup.show { opacity: 1; pointer-events: auto; animation: srGrund .25s ease both; }
.streak-reward-popup.is-closing { pointer-events: none; animation: srGrundWeg .2s ease both; }
.streak-reward-card {
position: relative; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 24px;
padding: 26px 24px 22px; text-align: center; max-width: 320px; width: 100%;
box-shadow: 0 24px 70px rgba(0,0,0,.35), var(--shadow-lg);
}
.streak-reward-popup.show .streak-reward-card { animation: srKarte .5s cubic-bezier(.2,.9,.25,1.2) both; }
.streak-reward-popup.is-closing .streak-reward-card { animation: srKarteWeg .2s ease both; }
.streak-reward-card.is-bonus {
border-color: rgba(245,158,11,.5);
box-shadow: 0 0 0 1px rgba(245,158,11,.22), 0 24px 70px rgba(245,158,11,.22), var(--shadow-lg);
}
.streak-reward-icon { font-size: 48px; margin-bottom: 8px; }
.streak-reward-flame { position: relative; width: 92px; height: 92px; margin: 0 auto 2px; }
.streak-reward-flame svg {
position: relative; display: block; width: 92px; height: 92px; overflow: visible;
filter: drop-shadow(0 6px 14px rgba(249,115,22,.35));
}
.streak-reward-popup.show .streak-reward-flame svg { animation: srZuenden .6s cubic-bezier(.2,.9,.3,1.35) .12s both; }
.sr-f1, .sr-f2, .sr-f3 { transform-box: fill-box; transform-origin: 50% 100%; }
.sr-f1 { animation: srFlackern 1.9s ease-in-out infinite; }
.sr-f2 { animation: srFlackern 1.3s ease-in-out -.4s infinite reverse; }
.sr-f3 { animation: srFlackern .95s ease-in-out -.2s infinite; }
.streak-reward-glow {
position: absolute; left: 50%; top: 56%; width: 170px; height: 170px; margin: -85px 0 0 -85px; border-radius: 50%;
background: radial-gradient(circle, rgba(251,146,60,.42) 0%, rgba(249,115,22,.16) 38%, rgba(249,115,22,0) 68%);
animation: srGlut 2.6s ease-in-out infinite;
}
.streak-reward-card.is-bonus .streak-reward-glow { width: 214px; height: 214px; margin: -107px 0 0 -107px; }
.streak-reward-ember {
position: absolute; left: 50%; top: 34%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
background: #fbbf24; box-shadow: 0 0 6px rgba(251,191,36,.9); opacity: 0;
animation: srFunke var(--t, 2.5s) ease-out var(--d, 0s) infinite;
}
.streak-reward-count {
position: relative; height: 1.12em; line-height: 1.12; overflow: hidden; margin-top: 2px;
font-size: 60px; font-weight: 900; font-family: 'Space Grotesk', sans-serif; letter-spacing: -.02em;
font-variant-numeric: tabular-nums; color: #f97316;
}
.streak-reward-num {
display: block;
background: linear-gradient(180deg, #f59e0b 10%, #f97316 55%, #ea580c 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.streak-reward-num.is-old { position: absolute; left: 0; right: 0; top: 0; }
.streak-reward-popup.show .streak-reward-num.is-old { animation: srZahlRaus .42s cubic-bezier(.5,0,.8,.4) .62s both; }
.streak-reward-popup.show .streak-reward-num.is-new { animation: srZahlRein .6s cubic-bezier(.2,.9,.3,1.3) .7s both; }
.streak-reward-label { font-size: 16px; font-weight: 700; margin-top: 2px; color: var(--text-main); }
.streak-reward-week { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 16px 0 12px; }
.streak-reward-dot {
position: relative; isolation: isolate; flex: 0 0 auto; width: 14px; height: 14px; border-radius: 999px;
background: var(--element-bg); box-shadow: inset 0 0 0 1.5px var(--border-light);
}
.streak-reward-dot::after {
content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
background: linear-gradient(135deg, #fbbf24, #f97316); transform: scale(0);
}
.streak-reward-dot.is-on::after { transform: scale(1); }
.streak-reward-popup.show .streak-reward-dot.is-on::after {
animation: srPunkt .42s cubic-bezier(.2,.9,.3,1.5) calc(1s + var(--i, 0) * 70ms) both;
}
.streak-reward-dot.is-today::before {
content: ''; position: absolute; inset: -4px; border-radius: inherit;
border: 2px solid rgba(249,115,22,.55); opacity: 0;
}
.streak-reward-popup.show .streak-reward-dot.is-today::before {
animation: srRing 1.8s ease-out calc(1.3s + var(--i, 0) * 70ms) infinite;
}
.streak-reward-dot.is-goal {
display: inline-flex; align-items: center; justify-content: center;
width: auto; min-width: 38px; height: 22px; padding: 0 8px;
font-size: 11px; font-weight: 800; color: var(--text-muted);
}
.streak-reward-dot.is-goal.is-on { color: #fff; }
.streak-reward-popup.show .streak-reward-dot.is-goal.is-on {
animation: srZielText .2s linear calc(1.1s + var(--i, 0) * 70ms) both;
}
.streak-reward-spark {
position: absolute; left: 50%; top: 50%; width: 4px; height: 9px; margin: -4.5px 0 0 -2px; border-radius: 2px;
background: #fbbf24; opacity: 0;
}
.streak-reward-popup.show .streak-reward-spark { animation: srSpritzer .75s cubic-bezier(.15,.8,.3,1) 1.62s both; }
.streak-reward-sub { font-size: 13px; line-height: 1.45; color: var(--text-dim); margin: 0 0 18px; text-wrap: balance; }
.streak-reward-popup.show .streak-reward-sub { animation: srHoch .4s ease .95s both; }
.streak-reward-plus { color: #ea580c; font-weight: 800; }
.streak-reward-card button {
display: block; width: 100%; min-height: 44px;
background: var(--gradient-accent); color: #fff; border: none;
padding: 11px 24px; border-radius: 12px; font-size: 15px; font-weight: 700;
cursor: pointer; font-family: inherit;
}
.streak-reward-card button:hover { filter: brightness(1.07); }
.streak-reward-card button:active { transform: scale(.98); }
.podest-stufen { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 64px; margin: 0 0 12px; }
.podest-stufen span { width: 38px; border-radius: 8px 8px 3px 3px; color: #fff; font-weight: 800; font-size: 15px;
display: flex; align-items: flex-start; justify-content: center; padding-top: 5px; font-variant-numeric: tabular-nums; }
.podest-stufen .s1 { height: 60px; background: linear-gradient(180deg, #f8d24a, #c99212); }
.podest-stufen .s2 { height: 44px; background: linear-gradient(180deg, #d9dee6, #98a2b3); }
.podest-stufen .s3 { height: 34px; background: linear-gradient(180deg, #e6a26a, #a8622c); }
.streak-reward-popup.show .podest-stufen span { animation: srHoch .45s cubic-bezier(.2,.9,.3,1.3) both; }
.streak-reward-popup.show .podest-stufen .s1 { animation-delay: .25s; }
.streak-reward-popup.show .podest-stufen .s2 { animation-delay: .1s; }
.streak-reward-popup.show .podest-stufen .s3 { animation-delay: .4s; }
.podest-sub { margin-bottom: 12px; }
.podest-liste { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; text-align: left; }
.podest-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px;
background: var(--bg-element, rgba(127,127,127,.08)); color: var(--text-main); text-decoration: none; }
.podest-zeile:hover { filter: brightness(1.04); text-decoration: none; color: var(--text-main); }
.streak-reward-popup.show .podest-zeile { animation: srHoch .35s ease both; animation-delay: calc(.5s + var(--i) * .08s); }
.podest-medaille { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 13px; color: #fff; font-variant-numeric: tabular-nums; }
.podest-medaille.is-1 { background: linear-gradient(135deg, #f8d24a, #c99212); }
.podest-medaille.is-2 { background: linear-gradient(135deg, #d9dee6, #98a2b3); }
.podest-medaille.is-3 { background: linear-gradient(135deg, #e6a26a, #a8622c); }
.podest-was { display: flex; flex-direction: column; min-width: 0; }
.podest-was b { font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.podest-was small { font-size: 11px; color: var(--text-dim); }
.podest-mehr { font-size: 11px; color: var(--text-dim); text-align: center; }
.podest-medaille.umfeld-platz { background: var(--surface, rgba(127,127,127,.15)); color: var(--text-main); border: 1px solid var(--border); font-size: 12px; }
.umfeld-ziel { color: var(--text-main) !important; font-weight: 600; }
.umfeld-ueberholt { color: var(--accent-orange, #f97316) !important; font-weight: 600; }
.umfeld-auf { color: var(--accent-green); font-weight: 700; }
.umfeld-ab { color: var(--accent-orange, #f97316); font-weight: 700; }
.streak-badge.is-bump { animation: srBump .6s cubic-bezier(.2,.9,.3,1.3); }
.streak-reward-popup.is-stage {
background: radial-gradient(120% 70% at 50% 36%, #4a1705 0%, #1d0b07 42%, #07070a 100%);
-webkit-backdrop-filter: none; backdrop-filter: none; overflow: hidden; cursor: pointer;
}
.streak-reward-popup.is-stage::before {
content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .8;
background-image:
radial-gradient(1.5px 1.5px at 12% 18%, #fdba74 50%, transparent 51%), radial-gradient(1.5px 1.5px at 84% 12%, #fff 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 72% 70%, #fdba74 50%, transparent 51%), radial-gradient(1.5px 1.5px at 22% 78%, #fff 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 92% 46%, #fb923c 50%, transparent 51%), radial-gradient(1.5px 1.5px at 6% 52%, #fb923c 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 40% 90%, #fdba74 50%, transparent 51%), radial-gradient(1.5px 1.5px at 60% 6%, #fdba74 50%, transparent 51%);
}
.streak-reward-popup.is-stage::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
border-top: 3px solid transparent; border-bottom: 3px solid transparent;
border-image: linear-gradient(90deg, transparent, #f59e0b 30%, #ef4444 70%, transparent) 1;
}
.streak-reward-popup.is-stage .streak-reward-card {
z-index: 1; background: none; border: 0; box-shadow: none; max-width: 360px; padding: 0 12px;
}
.streak-reward-popup.is-stage .streak-reward-flame { width: 156px; height: 156px; margin-bottom: 10px; }
.streak-reward-popup.is-stage .streak-reward-flame svg { width: 156px; height: 156px; filter: drop-shadow(0 0 30px rgba(249,115,22,.8)); }
.streak-reward-popup.is-stage .streak-reward-flame::before {
content: ''; position: absolute; left: 50%; top: 56%; width: 620px; height: 620px; margin: -310px 0 0 -310px; border-radius: 50%;
background: repeating-conic-gradient(from 0deg, rgba(251,146,60,.2) 0deg 5deg, transparent 5deg 18deg);
-webkit-mask: radial-gradient(circle, #000 0%, transparent 60%); mask: radial-gradient(circle, #000 0%, transparent 60%);
animation: srDrehen 30s linear infinite, srGrund .9s ease .1s both;
}
.streak-reward-popup.is-stage .streak-reward-glow { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
.streak-reward-popup.is-stage .streak-reward-ember { width: 6px; height: 6px; margin-left: -3px; top: 26%; }
.streak-reward-popup.is-stage .streak-reward-count { font-size: 124px; margin-top: 0; }
.streak-reward-popup.is-stage .streak-reward-num {
background: linear-gradient(180deg, #fde68a 0%, #f59e0b 38%, #f97316 70%, #dc2626 100%);
-webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 6px 22px rgba(249,115,22,.45));
}
.streak-reward-popup.is-stage .streak-reward-label { color: #fde7cf; text-transform: uppercase; letter-spacing: .34em; font-size: 14px; margin-top: 6px; }
.streak-reward-popup.is-stage .streak-reward-week { margin: 34px 0 16px; gap: 10px; }
.streak-reward-popup.is-stage .streak-reward-dot { width: 17px; height: 17px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.24); }
.streak-reward-popup.is-stage .streak-reward-dot.is-goal { width: auto; min-width: 46px; height: 26px; font-size: 12.5px; }
.streak-reward-popup.is-stage .streak-reward-sub { color: rgba(255,255,255,.74); font-size: 14px; margin-bottom: 46px; }
.streak-reward-popup.is-stage .streak-reward-plus { color: #fbbf24; }
.streak-reward-popup.is-stage .streak-reward-card button {
background: none; color: rgba(255,255,255,.62); letter-spacing: .3em; text-transform: uppercase; font-size: 11.5px;
}
.streak-reward-popup.is-stage .streak-reward-card button::before { content: '◆\00a0\00a0'; color: #f59e0b; }
.streak-reward-popup.is-stage .streak-reward-card button::after { content: '\00a0\00a0◆'; color: #f59e0b; }
.streak-reward-popup.is-stage .streak-reward-card button:hover { filter: none; color: #fff; }@media (max-height: 640px){
.streak-reward-popup.is-stage .streak-reward-flame, .streak-reward-popup.is-stage .streak-reward-flame svg { width: 116px; height: 116px; }
.streak-reward-popup.is-stage .streak-reward-count { font-size: 92px; }
.streak-reward-popup.is-stage .streak-reward-week { margin-top: 22px; }
.streak-reward-popup.is-stage .streak-reward-sub { margin-bottom: 26px; }}
@keyframes srGrund    { from { opacity: 0; } to { opacity: 1; } }
@keyframes srGrundWeg { from { opacity: 1; } to { opacity: 0; } }
@keyframes srKarte    { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes srKarteWeg { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes srZuenden  { 0% { opacity: 0; transform: translateY(14px) scale(.25); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes srFlackern {
0%, 100% { transform: scale(1, 1) skewX(0deg); }
30% { transform: scale(.96, 1.05) skewX(-2deg); }
62% { transform: scale(1.03, .97) skewX(1.5deg); }
82% { transform: scale(.98, 1.04) skewX(2.2deg); }
}
@keyframes srGlut     { 0%, 100% { opacity: .75; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes srFunke    { 0% { opacity: 0; transform: translate(0, 0) scale(.7); } 14% { opacity: .95; } 100% { opacity: 0; transform: translate(var(--x, 0px), -70px) scale(.2); } }
@keyframes srZahlRaus { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-85%); } }
@keyframes srZahlRein { from { opacity: 0; transform: translateY(85%); } to { opacity: 1; transform: translateY(0); } }
@keyframes srPunkt    { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes srRing     { 0% { opacity: .9; transform: scale(.7); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes srZielText { from { color: var(--text-muted); } to { color: #fff; } }
@keyframes srSpritzer {
0% { opacity: 0; transform: rotate(var(--a, 0deg)) translateY(-8px) scaleY(.4); }
20% { opacity: 1; }
100% { opacity: 0; transform: rotate(var(--a, 0deg)) translateY(-40px) scaleY(1); }
}
@keyframes srHoch     { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes srBump     { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes srDrehen   { to { transform: rotate(360deg); } }@media (prefers-reduced-motion: reduce){
.streak-reward-popup, .streak-reward-popup *, .streak-reward-popup *::before, .streak-reward-popup *::after { animation: none !important; }
.streak-reward-ember, .streak-reward-spark { display: none; }
.streak-badge.is-bump { animation: none; }}
.ach-unlock-overlay {
position: fixed; inset: 0; z-index: 99997;
background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .3s; pointer-events: none;
}
.ach-unlock-overlay.show { opacity: 1; pointer-events: auto; }
.ach-unlock-card {
text-align: center; padding: 32px; max-width: 300px;
transform: scale(0.5) rotate(-10deg);
transition: transform .5s cubic-bezier(.2,1,.3,1);
}
.ach-unlock-overlay.show .ach-unlock-card { transform: scale(1) rotate(0); }
.ach-unlock-icon { font-size: 64px; margin-bottom: 12px; filter: drop-shadow(0 0 20px rgba(234,179,8,.4)); }
.ach-unlock-title { font-size: 20px; font-weight: 800; color: var(--accent-yellow); }
.ach-unlock-name { font-size: 14px; color: var(--text-main); margin-top: 8px; font-weight: 600; }
.new-posts-pill {
position: fixed; top: 64px; left: 50%; transform: translateX(-50%) translateY(-20px);
z-index: 200; background: var(--gradient-accent); color: #fff;
padding: 8px 20px; border-radius: 20px; font-size: 12px; font-weight: 700;
cursor: pointer; opacity: 0; transition: opacity .3s, transform .3s;
box-shadow: 0 4px 16px rgba(59,130,246,.3);
}
.new-posts-pill.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.new-posts-pill:hover { box-shadow: 0 4px 20px rgba(59,130,246,.4); }
.msg-seen { font-size: 9px; color: var(--accent); opacity: .7; margin-left: 4px; }
.msg-seen svg { width: 10px; height: 10px; stroke: var(--accent); }
.typing-indicator {
display: inline-flex; gap: 3px; padding: 8px 12px; background: var(--element-bg);
border-radius: var(--r); align-items: center;
}
.typing-dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
animation: typingBounce 1.4s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-4px)} }
.comment-reply { margin-left: 32px; padding-left: 12px; border-left: 2px solid var(--border); }
.comment-reply-btn {
background: none; border: none; color: var(--text-muted); font-size: 9px;
cursor: pointer; padding: 0; font-weight: 600; transition: color .15s;
}
.comment-reply-btn:hover { color: var(--accent); }
.pin-badge {
display: inline-flex; align-items: center; gap: 3px;
font-size: 9px; color: var(--accent); font-weight: 600;
}
.pin-badge svg { width: 10px; height: 10px; stroke: var(--accent); }
.publish-success-overlay {
position: fixed; inset: 0; z-index: 99999;
background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .3s; pointer-events: none;
}
.publish-success-overlay.show { opacity: 1; pointer-events: auto; }
.publish-success-icon {
width: 80px; height: 80px; border-radius: 50%;
background: var(--gradient-accent); color: #fff;
font-size: 36px; font-weight: 900; display: flex; align-items: center; justify-content: center;
transform: scale(0); transition: transform .4s cubic-bezier(.2,1,.3,1);
box-shadow: 0 0 40px rgba(59,130,246,.4);
}
.publish-success-overlay.show .publish-success-icon { transform: scale(1); }
.skeleton-profile { padding: 20px; }
.skeleton-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--element-bg); margin: 0 auto 16px; animation: skeleton-pulse 1.2s ease-in-out infinite; }
.skeleton-line { height: 12px; background: var(--element-bg); border-radius: 6px; margin-bottom: 8px; animation: skeleton-pulse 1.2s ease-in-out infinite; }
.skeleton-line.w60 { width: 60%; margin: 0 auto 8px; }
.skeleton-line.w40 { width: 40%; margin: 0 auto 8px; }
.skeleton-line.w80 { width: 80%; }
.skeleton-stats { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.skeleton-stat { width: 60px; height: 40px; background: var(--element-bg); border-radius: 8px; animation: skeleton-pulse 1.2s ease-in-out infinite; }
.empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.3; }
.empty-state-feed .empty-state-icon::before { content: '📱'; }
.empty-state-duels .empty-state-icon::before { content: '⚔️'; }
.empty-state-messages .empty-state-icon::before { content: '💬'; }
.empty-state-groups .empty-state-icon::before { content: '👥'; }
.empty-state-explore .empty-state-icon::before { content: '🔍'; }
.spinner {
width: 20px; height: 20px; border: 2px solid var(--border);
border-top-color: var(--accent); border-radius: 50%;
animation: ptr-spin 0.6s linear infinite; display: inline-block;
}
.spinner-sm { width: 14px; height: 14px; border-width: 1.5px; }
.spinner-lg { width: 28px; height: 28px; border-width: 2.5px; }
.loading-center { display: flex; justify-content: center; padding: 20px; }
.lightbox-overlay {
position: fixed; inset: 0; z-index: 999999;
background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none; transition: opacity .25s;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lightbox-overlay.open { opacity: 1; pointer-events: auto; }
.lightbox-img {
max-width: 90vw; max-height: 85vh; object-fit: contain;
border-radius: 4px; user-select: none;
transform: scale(0.95); transition: transform .25s;
}
.lightbox-overlay.open .lightbox-img { transform: scale(1); }
.lightbox-close {
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 12px);
right: calc(env(safe-area-inset-right, 0px) + 12px);
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
font-size: 30px; line-height: 1; color: #fff;
background: rgba(0,0,0,.42); border: none; border-radius: 50%;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
cursor: pointer; opacity: .85; transition: opacity .2s, background .2s;
z-index: 6; padding: 0; font-family: inherit;
-webkit-tap-highlight-color: transparent;
}
.lightbox-close:hover, .lightbox-close:focus-visible { opacity: 1; background: rgba(0,0,0,.6); }
.lightbox-prev, .lightbox-next {
position: absolute; top: 50%; transform: translateY(-50%);
font-size: 36px; color: #fff; cursor: pointer; opacity: .5;
transition: opacity .2s; z-index: 5; padding: 12px; user-select: none;
background: none; border: none; font-family: inherit; line-height: 1;
-webkit-tap-highlight-color: transparent;
}
.lightbox-prev:focus-visible, .lightbox-next:focus-visible, .lightbox-close:focus-visible {
outline: 2px solid #fff; outline-offset: 2px;
}
.lightbox-prev { left: calc(env(safe-area-inset-left, 0px) + 8px); }
.lightbox-next { right: calc(env(safe-area-inset-right, 0px) + 8px); }
.lightbox-prev:hover, .lightbox-next:hover { opacity: 1; }
.lightbox-counter {
position: absolute; left: 50%; transform: translateX(-50%);
bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
color: rgba(255,255,255,.5); font-size: 12px; font-weight: 600;
}@media (max-width: 600px){
.lightbox-prev, .lightbox-next { font-size: 28px; padding: 10px; }
.lightbox-img {
max-height: calc(85vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
max-width: 94vw;
}}
.chat-messages, .grp-chat-messages, .msg-list-pane {
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.1) transparent;
}
.chat-messages::-webkit-scrollbar, .grp-chat-messages::-webkit-scrollbar, .msg-list-pane::-webkit-scrollbar {
width: 4px;
}
.chat-messages::-webkit-scrollbar-track, .grp-chat-messages::-webkit-scrollbar-track, .msg-list-pane::-webkit-scrollbar-track {
background: transparent;
}
.chat-messages::-webkit-scrollbar-thumb, .grp-chat-messages::-webkit-scrollbar-thumb, .msg-list-pane::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.08); border-radius: 4px;
}
.chat-messages::-webkit-scrollbar-thumb:hover, .grp-chat-messages::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,.15);
}
[data-theme="light"] .chat-messages, [data-theme="light"] .grp-chat-messages, [data-theme="light"] .msg-list-pane {
scrollbar-color: rgba(0,0,0,.1) transparent;
}
[data-theme="light"] .chat-messages::-webkit-scrollbar-thumb, [data-theme="light"] .grp-chat-messages::-webkit-scrollbar-thumb, [data-theme="light"] .msg-list-pane::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.08);
}
.activity-graph-wrap {
padding: 12px 14px; background: var(--bg-panel); border: 1px solid var(--border);
border-radius: var(--rl); margin-bottom: 12px;
}
.activity-graph-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.activity-graph-header span { font-size: 11px; font-weight: 700; }
.activity-graph-header small { font-size: 10px; color: var(--text-muted); }
.activity-graph canvas { width: 100%; height: 60px; display: block; }
.btn-icon.saved svg { fill: var(--accent); stroke: var(--accent); }
.btn-icon.saved { color: var(--accent); }
.grp-post-badge {
display: inline-flex; align-items: center; gap: 3px;
font-size: 9px; font-weight: 600; color: var(--accent-purple);
background: rgba(139,92,246,.08); padding: 2px 8px; border-radius: 4px;
text-decoration: none; transition: background .15s;
}
.grp-post-badge:hover { background: rgba(139,92,246,.15); color: var(--accent-purple); }
.grp-post-badge svg { width: 10px; height: 10px; }
.quick-actions-overlay {
position: fixed; inset: 0; z-index: 999998;
background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none; transition: opacity .2s;
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.quick-actions-overlay.open { opacity: 1; pointer-events: auto; }
.quick-actions-ring {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
padding: 20px; max-width: 240px;
}
.quick-action-btn {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 14px 8px; border-radius: var(--r); background: var(--bg-panel);
border: 1px solid var(--border); cursor: pointer; transition: all .15s;
text-decoration: none; color: var(--text-main); font-size: 10px; font-weight: 600;
}
.quick-action-btn:hover { border-color: var(--accent); transform: scale(1.05); }
.quick-action-btn svg { width: 20px; height: 20px; stroke: var(--accent); }
.quick-action-btn.danger svg { stroke: var(--accent-red); }
.quick-action-btn.danger:hover { border-color: var(--accent-red); }
.ob-checklist {
background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--rl);
padding: 16px; margin-bottom: 16px;
}
.ob-checklist-title { font-size: 13px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.ob-checklist-progress { height: 4px; background: var(--element-bg); border-radius: 2px; margin-bottom: 12px; overflow: hidden; }
.ob-checklist-fill { height: 100%; background: var(--gradient-accent); border-radius: 2px; transition: width .4s; }
.ob-checklist-items { display: flex; flex-direction: column; gap: 6px; }
.ob-check-item {
display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 6px 8px;
border-radius: var(--rs); transition: background .15s; cursor: pointer; text-decoration: none; color: var(--text-main);
}
.ob-check-item:hover { background: var(--element-bg); }
.ob-check-icon {
width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
font-size: 10px; transition: all .2s;
}
.ob-check-item.done .ob-check-icon { background: var(--accent-green); border-color: var(--accent-green); color: #fff; }
.ob-check-item.done { color: var(--text-muted); text-decoration: line-through; opacity: .6; }
.grp-analytics-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px;
}
.grp-analytics-card {
text-align: center; padding: 14px 8px; background: var(--bg-panel);
border: 1px solid var(--border); border-radius: var(--r); transition: all .2s;
}
.grp-analytics-card:hover { border-color: var(--border-light); transform: translateY(-1px); }
.grp-analytics-val { font-size: 22px; font-weight: 800; font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
.grp-analytics-lbl { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[role="button"] { cursor: pointer; }
img:not([alt]) { outline: 2px solid var(--accent-red); }@media (prefers-reduced-motion: reduce){
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }}@media (max-width: 600px){
.tab { padding: 12px 16px; }}
.post-manual-badge {
display: inline-flex; align-items: center; gap: 3px;
font-size: 9px; font-weight: 700; color: var(--text-muted);
}
.post-manual-badge svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
.gsb-wrap { display: flex; flex-direction: column; gap: 14px; }
.gsb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gsb-title { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.gsb-title svg { width: 17px; height: 17px; color: var(--accent-yellow, #f0b429); }
.gsb-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.gsb-sort { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.gsb-sort-label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.gsb-sort-btn {
border: 1px solid var(--border); background: var(--bg-panel); color: var(--text-muted);
font: inherit; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 8px; cursor: pointer;
}
.gsb-sort-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.gsb-disz { font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 9px; border-radius: 999px;
background: rgba(251,191,36,.16); color: var(--tm-gold-text, #92400e); border: 1px solid rgba(251,191,36,.34); }
.gsb-diszleiste { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 2px; }
.gsb-diszbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600;
padding: 5px 11px; border-radius: 999px; text-decoration: none;
background: var(--element-bg); border: 1px solid var(--border); color: var(--text-muted); }
.gsb-diszbtn:hover { color: var(--text-main); border-color: var(--border-light, var(--border)); }
.gsb-diszbtn.aktiv { background: rgba(251,191,36,.16); border-color: rgba(251,191,36,.45); color: var(--text-main); }
.gsb-diszbtn .n { font-size: 9.5px; font-weight: 700; opacity: .65; }
.gsb-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gsb-pod {
background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--rl);
padding: 14px 10px; text-align: center; position: relative; overflow: hidden;
}
.gsb-pod-1 { border-color: var(--accent-yellow, #f0b429); }
.gsb-pod-1::before, .gsb-pod-2::before, .gsb-pod-3::before {
content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
}
.gsb-pod-1::before { background: var(--accent-yellow, #f0b429); }
.gsb-pod-2::before { background: #c0c6d0; }
.gsb-pod-3::before { background: #cd8b56; }
.gsb-pod.is-me { box-shadow: 0 0 0 2px var(--accent) inset; }
.gsb-pod-medal { font-size: 20px; line-height: 1; margin-bottom: 6px; }
.gsb-pod-av { display: inline-block; margin-bottom: 6px; }
.gsb-pod-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsb-pod-score {
font-family: 'Space Grotesk', monospace; font-size: 22px; font-weight: 800;
color: var(--accent); font-variant-numeric: tabular-nums; margin-top: 4px;
}
.gsb-pod-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.gsb-table { border: 1px solid var(--border); border-radius: var(--rl); overflow: hidden; background: var(--bg-panel); }
.gsb-row {
display: grid; grid-template-columns: 34px 1fr 62px 62px 62px 72px;
align-items: center; gap: 8px; padding: 9px 12px;
border-top: 1px solid var(--border); font-size: 12.5px;
}
.gsb-row:first-child { border-top: none; }
.gsb-row-head {
font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
color: var(--text-muted); background: var(--element-bg); font-weight: 700;
}
.gsb-row.is-me { background: rgba(59, 130, 246, .08); }
.gsb-row.gsb-empty { opacity: .5; }
.gsb-rank { font-family: 'Space Grotesk', monospace; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gsb-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gsb-name-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.gsb-you {
font-size: 9px; text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0;
background: var(--accent); color: #fff; padding: 1px 5px; border-radius: 5px;
}
.gsb-col { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.gsb-strong { color: var(--text-main); font-weight: 700; }
.gsb-note { font-size: 10.5px; color: var(--text-muted); margin: 0; line-height: 1.5; }@media (max-width: 620px){
.gsb-podium { gap: 6px; }
.gsb-pod { padding: 10px 6px; }
.gsb-pod-score { font-size: 18px; }
.gsb-pod-name { font-size: 11px; }
.gsb-hide-s { display: none; }
.gsb-row { grid-template-columns: 26px 1fr 54px 54px; padding: 9px 10px; font-size: 12px; }}@media (max-width: 700px){
.scatt-viewer-overlay {
padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) 0;
}
.scatt-viewer-modal { width: 100%; max-width: 100%; border-radius: 0; }
.scatt-viewer-frames { height: 100%; }
.scatt-viewer-frames.scatt-viewer-split { flex-direction: column; }}
.post-media {
position: relative; display: block; width: 100%;
min-height: 180px; background: var(--element-bg); overflow: hidden;
}
.post-media[style*="aspect-ratio"] { min-height: 0; }
.post-media[style*="aspect-ratio"] > img {
width: 100%; height: 100%; object-fit: contain; display: block;
}
.post-media[style*="aspect-ratio"] > img.target-image { object-fit: contain; }
.post-media[style*="aspect-ratio"] .carousel-slide { height: auto; }
.post-media::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.07) 50%, transparent 100%);
animation: postMediaShimmer 1.4s ease-in-out infinite;
}
.post-media.is-loaded { min-height: 0; background: none; }
.post-media.is-loaded::after { content: none; }
.post-media img { opacity: 0; animation: postMediaNotfall 0s linear 4s forwards; }
@keyframes postMediaNotfall { to { opacity: 1; } }
.post-media.is-loaded img { opacity: 1; animation: fadeIn .28s ease both; }
@keyframes postMediaShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.profile-posts-grid .post-media:not([style*="aspect-ratio"]) { min-height: 120px; }@media (max-width: 700px){ .post-media { min-height: 150px; }}@media (prefers-reduced-motion: reduce){
.post-media::after { animation: none; }
.post-media img { animation: none; opacity: 1; }
.post-media.is-loaded img { animation: none; }}
[data-theme="light"] .post-media::after {
background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.05) 50%, transparent 100%);
}
.posts-view-switch {
display: inline-flex; gap: 2px; margin-bottom: 14px;
padding: 3px; border-radius: 10px;
background: var(--element-bg); border: 1px solid var(--border);
}
.pvs-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border: none; background: none; cursor: pointer;
border-radius: 7px; font-size: 12px; font-weight: 600;
color: var(--text-muted);
}
.pvs-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.pvs-btn.active { background: var(--bg-panel); color: var(--text-main); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.pvs-btn:hover:not(.active) { color: var(--text-main); }
.score-list {
border: 1px solid var(--border); border-radius: 12px;
overflow: hidden; background: var(--bg-panel);
}
.sl-kopf, .sl-zeile {
display: grid;
grid-template-columns: 86px minmax(0,1fr) 68px 58px 52px 58px;
align-items: center; gap: 8px;
padding: 9px 12px;
}
.sl-kopf {
font-size: 9px; text-transform: uppercase; letter-spacing: .5px;
color: var(--text-muted); font-weight: 700;
border-bottom: 1px solid var(--border); background: var(--element-bg);
}
.sl-zeile {
border-bottom: 1px solid var(--border);
text-decoration: none; color: var(--text-main); font-size: 12.5px;
}
.sl-zeile:last-child { border-bottom: none; }
.sl-zeile:hover { background: var(--element-bg); }
.sl-num { text-align: right; font-family: 'Space Grotesk', monospace; }
.sl-ringe { font-weight: 700; }
.sl-datum { color: var(--text-muted); font-size: 11.5px; }
.sl-disz { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-my10 {
font-size: 8px; font-weight: 800; letter-spacing: .3px;
color: #f2483b; border: 1px solid rgba(226,57,44,.3);
border-radius: 4px; padding: 1px 3px; vertical-align: middle;
}@media (max-width: 600px){
.sl-kopf, .sl-zeile { grid-template-columns: 72px minmax(0,1fr) 62px 54px; gap: 6px; padding: 9px 10px; }
.sl-weg, .sl-schuss { display: none; }}
.perf-gruppe {
border: 1px solid var(--border);
border-radius: 12px;
background: var(--bg-panel);
overflow: hidden;
}
.perf-gruppe-kopf {
display: flex; align-items: center; gap: 10px;
padding: 11px 14px; cursor: pointer;
list-style: none; user-select: none;
}
.perf-gruppe-kopf::-webkit-details-marker { display: none; }
.perf-gruppe-kopf:hover { background: var(--element-bg); }
.pg-titel {
display: flex; align-items: center; gap: 7px;
font-size: 13px; font-weight: 700; white-space: nowrap;
}
.pg-titel svg { width: 15px; height: 15px; stroke: var(--accent); stroke-width: 2; fill: none; }
.pg-anzahl {
font-size: 10px; font-weight: 700; color: var(--text-muted);
background: var(--element-bg); border-radius: 20px; padding: 1px 7px;
}
.pg-plot { flex: 1 1 auto; min-width: 60px; max-width: 260px; height: 34px; display: block; }
.pg-trend {
font-size: 11.5px; font-weight: 700; white-space: nowrap;
font-family: 'Space Grotesk', monospace;
}
.pg-besser     { color: var(--accent-green, #4caf50); }
.pg-schlechter { color: var(--accent-red, #e74c3c); }
.pg-neutral    { color: var(--text-muted); }
.pg-pfeil {
width: 0; height: 0; flex-shrink: 0;
border-left: 5px solid transparent; border-right: 5px solid transparent;
border-top: 6px solid var(--text-muted);
transition: transform .2s ease;
}
.perf-gruppe[open] .pg-pfeil { transform: rotate(180deg); }
.perf-gruppe-inhalt { padding: 0 12px 12px; }@media (max-width: 600px){
.perf-gruppe-kopf { gap: 7px; padding: 10px 11px; flex-wrap: wrap; }
.pg-titel { font-size: 12px; }
.pg-plot { max-width: none; height: 28px; }
.perf-gruppe-inhalt { padding: 0 8px 10px; }}
.perf-ob-btn { border-radius: 20px !important; padding: 3px 12px !important; font-size: 11px !important; display: inline-flex; align-items: center; gap: 5px; }
.perf-ob-btn svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }@media (max-width: 600px){ .perf-ob-btn { margin-left: 0 !important; }}
.target-file-item.doc-ohne-ergebnis {
border: 1px solid var(--accent-red, #e74c3c);
background: rgba(231, 76, 60, .07);
border-radius: 10px;
padding: 10px 12px;
}
.target-file-item.doc-ohne-ergebnis .target-file-info {
color: var(--text-main);
font-size: 12px;
line-height: 1.5;
white-space: normal;
}
.target-file-item.doc-ohne-ergebnis strong { color: var(--accent-red, #e74c3c); }
.disc-hinweis {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin: 10px 0; padding: 8px 12px;
background: rgba(59,130,246,.09);
border: 1px solid rgba(59,130,246,.28);
border-radius: 10px;
font-size: 12px; line-height: 1.45;
animation: discHinweisRein .3s ease both;
}
@keyframes discHinweisRein {
0%   { opacity: 0; transform: translateY(-4px); }
100% { opacity: 1; transform: translateY(0); }
}
.dh-symbol { display: inline-flex; flex: 0 0 auto; color: var(--accent); }
.dh-symbol svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2; fill: none; }
.dh-text { flex: 1; min-width: 140px; }
.dh-text b { color: var(--accent); }
.dh-zurueck {
flex: 0 0 auto; border: 1px solid var(--border); background: none;
color: var(--text-muted); border-radius: 20px; padding: 3px 10px;
font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.dh-zurueck:hover { color: var(--text-main); border-color: var(--text-muted); }
.dh-zu {
flex: 0 0 auto; border: none; background: none; cursor: pointer;
color: var(--text-muted); font-size: 17px; line-height: 1; padding: 0 2px;
}
.admin-chart-card {
margin-top: 12px; padding: 12px 14px 8px;
background: var(--card-bg, var(--bg-panel));
border: 1px solid var(--border); border-radius: 10px;
}
.admin-chart-head {
display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.admin-chart-title { font-size: 12px; font-weight: 700; }
.admin-chart-range { display: flex; gap: 3px; }
.admin-range-btn {
border: 1px solid var(--border); background: none; color: var(--text-muted);
border-radius: 20px; padding: 3px 10px; font-size: 10.5px; font-weight: 600;
cursor: pointer; font-family: inherit;
}
.admin-range-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.admin-chart-legend { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.admin-legend-btn {
display: inline-flex; align-items: center; gap: 5px;
border: 1px solid var(--border); background: none;
border-radius: 20px; padding: 3px 9px; font-size: 10.5px; font-weight: 600;
color: var(--text-muted); cursor: pointer; opacity: .45; font-family: inherit;
}
.admin-legend-btn.an { opacity: 1; color: var(--text-main); }
.alb-punkt { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.admin-chart-wrap { position: relative; }
#adminChart { width: 100%; height: 240px; display: block; }
.admin-chart-tip {
position: absolute; display: none; pointer-events: none;
background: var(--bg-panel); border: 1px solid var(--border);
border-radius: 8px; padding: 5px 8px; font-size: 11px; line-height: 1.4;
box-shadow: 0 4px 14px rgba(0,0,0,.35); white-space: nowrap;
}
.mm-stand {
display: flex; align-items: center; gap: 10px;
margin-top: 8px; padding: 7px 10px;
background: rgba(124,110,240,.07);
border: 1px solid rgba(124,110,240,.22);
border-radius: 10px;
}
.mm-stand.mm-leer { opacity: .6; }
.mm-stand-text { flex: 1; min-width: 0; }
.mm-zahl { font-size: 11.5px; color: var(--accent-purple, #7c6ef0); }
.mm-zahl b { font-size: 15px; font-weight: 800; font-family: 'Space Grotesk', monospace; }
.mm-warte { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.mm-puls { animation: mmPuls .7s ease; }
@keyframes mmPuls {
0%   { box-shadow: 0 0 0 0 rgba(124,110,240,.55); }
100% { box-shadow: 0 0 0 12px rgba(124,110,240,0); }
}
.mm-radar { position: relative; width: 26px; height: 26px; flex: 0 0 auto; }
.mm-radar span {
position: absolute; inset: 0; border-radius: 50%;
border: 1.5px solid rgba(124,110,240,.5); opacity: 0;
}
.mm-radar.an span { animation: mmRadar 2.1s cubic-bezier(.2,.6,.3,1) infinite; }
.mm-radar.an span:nth-child(2) { animation-delay: .7s; }
.mm-radar.an span:nth-child(3) { animation-delay: 1.4s; }
.mm-radar::after {
content: ''; position: absolute; top: 50%; left: 50%;
width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
border-radius: 50%; background: var(--accent-purple, #7c6ef0);
}
@keyframes mmRadar {
0%   { opacity: .8; transform: scale(.25); }
100% { opacity: 0;  transform: scale(1); }
}
.mm-gesichter { display: flex; flex: 0 0 auto; }
.mm-kopf {
width: 24px; height: 24px; border-radius: 50%;
margin-left: -7px; overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: #fff;
background: var(--accent-purple, #7c6ef0);
border: 2px solid var(--bg-panel);
animation: mmKopfRein .35s ease both;
}
.mm-kopf:first-child { margin-left: 0; }
.mm-kopf img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-mehr { background: var(--element-bg); color: var(--text-muted); font-size: 9px; }
@keyframes mmKopfRein {
0%   { opacity: 0; transform: scale(.6); }
100% { opacity: 1; transform: scale(1); }
}@media (prefers-reduced-motion: reduce){
.mm-radar.an span { animation: none; }
.mm-kopf { animation: none; }}
.pv-knopfreihe { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pv-zurueck {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
flex: 1 1 120px; min-height: 38px; padding: 0 14px;
border-radius: 9px; border: 1px solid var(--border);
background: var(--element-bg); color: var(--text-main);
font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
transition: background .18s, border-color .18s, opacity .18s;
-webkit-tap-highlight-color: transparent;
}
.pv-zurueck svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; flex: 0 0 auto; }
.pv-zurueck:hover:not(:disabled) { border-color: var(--text-muted); background: var(--bg-panel); }
.pv-zurueck:active:not(:disabled) { transform: scale(.97); }
.pv-zurueck:disabled { opacity: .4; cursor: default; }
.pv-alle { color: var(--accent-red, #e74c3c); border-color: rgba(231,76,60,.3); }
.pv-alle:hover:not(:disabled) { background: rgba(231,76,60,.1); border-color: var(--accent-red, #e74c3c); }
.scroll-hinweis {
position: fixed; left: 50%; transform: translateX(-50%);
bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
z-index: 90;
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 14px; border-radius: 22px;
background: var(--bg-panel); border: 1px solid var(--border);
box-shadow: 0 6px 20px rgba(0,0,0,.3);
font-size: 11.5px; font-weight: 600; color: var(--text-muted);
cursor: pointer; -webkit-tap-highlight-color: transparent;
animation: shRein .3s ease both;
}
.scroll-hinweis[hidden] { display: none; }
.scroll-hinweis:hover { color: var(--text-main); border-color: var(--text-muted); }
.sh-pfeil { display: inline-flex; animation: shTupfen 1.6s ease-in-out infinite; }
.sh-pfeil svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.4; fill: none; }
@keyframes shRein   { 0% { opacity: 0; transform: translate(-50%, 6px); } 100% { opacity: 1; transform: translate(-50%, 0); } }
@keyframes shTupfen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }@media (min-width: 769px){ .scroll-hinweis { bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }}@media (prefers-reduced-motion: reduce){ .sh-pfeil { animation: none; } .scroll-hinweis { animation: none; }}
.train-notiz {
border: 1px solid var(--border); border-radius: 12px;
background: var(--bg-panel); margin-bottom: 12px; overflow: hidden;
}
.tn-kopf {
display: flex; align-items: center; gap: 8px;
padding: 11px 14px; cursor: pointer; list-style: none;
font-size: 13px; font-weight: 700; user-select: none;
}
.tn-kopf::-webkit-details-marker { display: none; }
.tn-kopf:hover { background: var(--element-bg); }
.tn-kopf svg { width: 15px; height: 15px; stroke: var(--accent); stroke-width: 2; fill: none; }
.tn-frei {
font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
color: var(--text-muted); background: var(--element-bg);
border-radius: 20px; padding: 2px 8px;
}
.tn-pfeil {
margin-left: auto; width: 0; height: 0;
border-left: 5px solid transparent; border-right: 5px solid transparent;
border-top: 6px solid var(--text-muted); transition: transform .2s;
}
.train-notiz[open] .tn-pfeil { transform: rotate(180deg); }
.tn-inhalt { padding: 4px 14px 14px; }
.tn-block { margin-bottom: 14px; }
.tn-label { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.tn-wahl { display: flex; flex-wrap: wrap; gap: 5px; }
.tn-pille {
border: 1px solid var(--border); background: var(--element-bg);
color: var(--text-muted); border-radius: 20px;
padding: 5px 12px; font-size: 11.5px; font-weight: 600;
cursor: pointer; font-family: inherit; transition: all .15s;
-webkit-tap-highlight-color: transparent;
}
.tn-pille:hover { color: var(--text-main); border-color: var(--text-muted); }
.tn-pille.an { background: var(--accent); border-color: var(--accent); color: #fff; }
.tn-gefuehl-1.an { background: var(--accent-red, #e74c3c); border-color: var(--accent-red, #e74c3c); }
.tn-gefuehl-2.an { background: #d98324; border-color: #d98324; }
.tn-gefuehl-3.an { background: var(--text-muted); border-color: var(--text-muted); }
.tn-gefuehl-4.an { background: #4a9c4a; border-color: #4a9c4a; }
.tn-gefuehl-5.an { background: var(--accent-green, #4caf50); border-color: var(--accent-green, #4caf50); }
.tn-privat {
display: flex; align-items: flex-start; gap: 9px;
font-size: 11.5px; color: var(--text-muted); cursor: pointer; line-height: 1.45;
}
.tn-privat input { margin-top: 2px; width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--accent); }
.tn-privat span { flex: 1; min-width: 0; }
.post-notiz {
margin: 0 16px 12px; padding: 10px 12px;
background: var(--element-bg); border: 1px solid var(--border);
border-left: 3px solid var(--accent); border-radius: 10px;
}
.post-notiz-privat { border-left-color: var(--text-muted); }
.pn-kopf {
display: flex; align-items: center; gap: 6px;
font-size: 9.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: var(--text-muted);
flex-wrap: wrap;
}
.post-notiz-faltbar > .pn-kopf { cursor: pointer; list-style: none; user-select: none; }
.post-notiz-faltbar > .pn-kopf::-webkit-details-marker { display: none; }
.pn-kopf svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }
.pn-nur-ich { display: inline-flex; align-items: center; gap: 3px; text-transform: none; letter-spacing: 0; }
.pn-pfeil { margin-left: auto; display: inline-flex; transition: transform .2s; }
.post-notiz[open] > .pn-kopf .pn-pfeil { transform: rotate(180deg); }
.pn-inhalt { margin-top: 7px; }
.pn-marken { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.pn-marke { font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 2px 9px; }
.pn-fokus { background: rgba(59,130,246,.13); color: var(--accent); }
.pn-gefuehl-1 { background: rgba(231,76,60,.14); color: var(--accent-red, #e74c3c); }
.pn-gefuehl-2 { background: rgba(217,131,36,.14); color: #d98324; }
.pn-gefuehl-3 { background: var(--bg-panel); color: var(--text-muted); }
.pn-gefuehl-4 { background: rgba(74,156,74,.14); color: #4a9c4a; }
.pn-gefuehl-5 { background: rgba(76,175,80,.16); color: var(--accent-green, #4caf50); }
.pn-text { font-size: 12.5px; line-height: 1.55; overflow-wrap: anywhere; }
.pn-bedingungen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.pn-kopf > span:first-of-type { flex: 0 0 auto; }
.pn-bed { font-size: 9.5px; color: var(--text-muted); background: var(--bg-panel); border-radius: 5px; padding: 2px 7px; }@media (max-width: 600px){ .post-notiz { margin: 0 12px 10px; }}
.ausruestung-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }@media (max-width: 560px){ .ausruestung-raster { grid-template-columns: 1fr; }}
.pa-chips {
display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
margin: 8px auto 0; max-width: 420px;
}
.pa-chip {
display: inline-flex; align-items: baseline; gap: 6px;
max-width: 100%; min-width: 0;
padding: 4px 12px; border-radius: 20px;
background: var(--element-bg); border: 1px solid var(--border);
font-size: 12px; line-height: 1.4; color: var(--text-dim);
}
.pa-chip-l {
flex: 0 0 auto;
font-size: 8.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: var(--text-muted);
}
.pa-chip-w { min-width: 0; overflow-wrap: anywhere; }
.pa-chip-privat { color: var(--text-muted); gap: 4px; align-items: center; font-size: 11px; }
.pa-chip-privat svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2; fill: none; }
.pa-notiz {
margin: 6px auto 0; max-width: 380px;
color: var(--text-muted); font-size: 11.5px; line-height: 1.5;
overflow-wrap: anywhere; text-align: center;
}
.gate-knoepfe {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
margin-top: 16px;
}
.gate-knopf {
display: inline-flex; align-items: center; justify-content: center;
min-height: 40px; padding: 0 22px; border-radius: 22px;
font-size: 13px; font-weight: 700; text-decoration: none;
border: 1px solid var(--border); color: var(--text-main);
background: var(--element-bg);
transition: background .18s, border-color .18s, transform .12s, box-shadow .18s;
-webkit-tap-highlight-color: transparent;
}
.gate-knopf:hover { border-color: var(--text-muted); color: var(--text-main); text-decoration: none; }
.gate-knopf:active { transform: scale(.97); }
.gate-knopf-haupt {
background: var(--gradient-accent); border-color: transparent; color: #fff;
box-shadow: 0 4px 14px rgba(59,130,246,.28);
}
.gate-knopf-haupt:hover { color: #fff; filter: brightness(1.06); }@media (max-width: 400px){
.gate-knoepfe { flex-direction: column; }
.gate-knopf { width: 100%; }}
.ausr-kern { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 12px; flex-wrap: wrap; }
.ausr-gross { text-align: center; }
.ausr-gross b {
display: block; font-family: 'Space Grotesk', monospace;
font-size: 30px; font-weight: 800; line-height: 1;
color: var(--accent-green, #4caf50);
}
.ausr-gross span { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.ausr-ist b { color: var(--text-muted); font-size: 24px; }
.ausr-pfeil { color: var(--text-muted); font-size: 20px; opacity: .5; }
.ausr-satz {
font-size: 12.5px; line-height: 1.55; text-align: center;
color: var(--text-muted); margin-bottom: 12px;
}
.ausr-satz b { color: var(--text-main); }
.ausr-werte { display: flex; flex-wrap: wrap; gap: 8px; }
.ausr-wert {
flex: 1 1 84px; min-width: 0; text-align: center;
padding: 8px 6px; border-radius: 9px;
background: var(--element-bg); border: 1px solid var(--border);
}
.ausr-wert b { display: block; font-size: 15px; font-weight: 700; font-family: 'Space Grotesk', monospace; overflow-wrap: anywhere; }
.ausr-wert span { font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ausr-verlauf {
display: flex; align-items: flex-end; gap: 3px;
height: 46px; margin-top: 12px;
}
.ausr-balken {
flex: 1; min-width: 3px; border-radius: 3px 3px 0 0;
background: linear-gradient(180deg, var(--accent-red, #e74c3c), rgba(231,76,60,.35));
}
.ausr-balken.ausr-null { background: var(--border); }
.ausr-fuss { font-size: 10px; color: var(--text-muted); margin-top: 8px; line-height: 1.45; }
.coach-einstieg { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.coach-einstieg-titel { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.coach-einstieg-titel svg { width: 15px; height: 15px; stroke: var(--accent); stroke-width: 2; fill: none; }
.coach-einstieg-text { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; max-width: 460px; line-height: 1.5; }
.coach-marke {
font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
background: var(--accent-yellow, #f0b429); color: #000;
border-radius: 4px; padding: 1px 5px;
}
.coach-knopf {
flex: 0 0 auto; min-height: 38px; padding: 0 20px; border-radius: 20px; border: none;
background: var(--gradient-accent); color: #fff; font-size: 12.5px; font-weight: 700;
font-family: inherit; cursor: pointer; box-shadow: 0 4px 14px rgba(59,130,246,.28);
}
.coach-knopf:hover { filter: brightness(1.07); }
.coach-knopf:active { transform: scale(.97); }
.coach-overlay {
display: none; position: fixed; inset: 0; z-index: 10050;
background: rgba(0,0,0,.66); backdrop-filter: blur(5px);
align-items: center; justify-content: center; padding: 16px; overflow-y: auto;
}
.coach-overlay.offen { display: flex; }
.coach-fenster {
width: 100%; max-width: 880px;
height: min(92vh, 900px);
display: flex; flex-direction: column;
background: var(--bg-panel); border: 1px solid var(--border);
border-radius: 16px; padding: 16px 18px; animation: authPopIn .22s ease;
}@media (max-width: 700px){
.coach-overlay { padding: 0; }
.coach-fenster {
max-width: none; height: 100vh; height: 100dvh;
border-radius: 0; border: none;
padding: 14px 14px calc(10px + env(safe-area-inset-bottom, 0px));
}}
.coach-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.coach-kopf .coach-frueher { margin-left: auto; }
.coach-kopf .coach-zu { margin-left: 0; }@media (max-width: 420px){
.coach-kopf .coach-marke { display: none; }}
.coach-titel { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; }
.coach-zu { margin-left: auto; background: none; border: none; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.coach-bereich { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 10px; }
.coach-beitrag {
display: none;
grid-template-columns: 92px 1fr;
gap: 12px; align-items: center;
margin-bottom: 12px; padding: 10px;
background: var(--element-bg);
border: 1px solid var(--border);
border-left: 3px solid var(--accent, #6600ff);
border-radius: var(--r, 10px);
}
.coach-beitrag.da { display: grid; }
.coach-beitrag-bild {
width: 92px; height: 92px; border-radius: 8px; overflow: hidden;
background: var(--bg-panel); border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
}
.coach-beitrag-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.coach-beitrag-bild svg { width: 30px; height: 30px; stroke: var(--text-muted); fill: none; stroke-width: 1.6; }
.coach-beitrag-inhalt { min-width: 0; }
.coach-beitrag-titel {
font-size: 13px; font-weight: 700; margin-bottom: 5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.coach-beitrag-zahlen { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.coach-beitrag-zahl { line-height: 1.25; }
.coach-beitrag-wert { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.coach-beitrag-name {
font-size: 9px; text-transform: uppercase; letter-spacing: .06em;
color: var(--text-muted);
}
.coach-beitrag-datum { font-size: 10.5px; color: var(--text-muted); margin-top: 5px; }@media (max-width: 420px){
.coach-beitrag { grid-template-columns: 68px 1fr; gap: 10px; }
.coach-beitrag-bild { width: 68px; height: 68px; }}
.coach-antwort { flex: 1; min-height: 60px; overflow-y: auto; }
.coach-text { font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.coach-quellen { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text-muted); }
.coach-fehler { font-size: 12.5px; color: var(--accent-red, #e74c3c); line-height: 1.5; }
.coach-vorschlagskarte {
margin-top: 14px; padding: 12px 14px;
background: var(--element-bg);
border: 1px solid var(--border);
border-left: 3px solid var(--accent, #6600ff);
border-radius: var(--r);
}
.cv-kopf {
font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--accent, #6600ff); margin-bottom: 7px;
}
.cv-titel  { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.cv-schwer { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
.cv-punkte { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
.cv-punkte li { margin-bottom: 2px; }
.cv-grund {
margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border);
font-size: 11px; color: var(--text-muted); line-height: 1.5;
}
.cv-knoepfe { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cv-knoepfe form { margin: 0; }
.plan-karte {
margin-top: 12px; padding: 14px;
background: var(--bg-panel);
border: 1px solid var(--border);
border-left: 3px solid var(--accent, #6600ff);
border-radius: var(--r);
}
.plan-karte.plan-alt { border-left-color: var(--text-muted); opacity: .75; }
.coach-planentwurf {
margin-top: 14px; padding: 12px 14px;
background: var(--element-bg);
border: 1px solid var(--border);
border-left: 3px solid var(--accent, #6600ff);
border-radius: var(--r);
}
.cpe-kopf {
font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--accent, #6600ff); margin-bottom: 7px;
}
.cpe-titel { font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.cpe-punkte { margin: 0 0 8px; padding-left: 1.1em; list-style: none; }
.cpe-punkte li { position: relative; font-size: 12.5px; line-height: 1.5; margin-bottom: 3px; }
.cpe-punkte li::before {
content: '·'; position: absolute; left: -.75em;
color: var(--accent, #6600ff); font-weight: 700;
}
.cpe-hinweis { font-size: 11px; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px; }
.cpe-form { margin: 0; }
.cpe-knopf {
padding: 8px 14px; border-radius: 8px; border: none; cursor: pointer;
background: var(--accent, #6600ff); color: #fff;
font-size: 12.5px; font-weight: 700; font-family: inherit;
}
.cpe-knopf:hover { filter: brightness(1.1); }
.plan-fortschritt { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.plan-balken {
flex: 1; height: 4px; border-radius: 2px; overflow: hidden;
background: var(--border);
}
.plan-balken-fuell {
height: 100%; background: var(--accent, #6600ff);
transition: width .4s ease;
}
.plan-fortschritt-text {
flex: 0 0 auto; font-size: 10px; color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.plan-punkte li { display: flex; align-items: baseline; gap: 8px; position: relative; }
.plan-punkte li::before {
content: '·'; position: absolute; left: -.75em;
color: var(--accent, #6600ff); font-weight: 700;
}
.plan-zaehler {
flex: 0 0 auto; margin-left: auto;
font-size: 9.5px; font-variant-numeric: tabular-nums;
color: var(--text-muted); opacity: .8;
}
.plan-zaehler-ok { color: var(--accent-green, #22c55e); opacity: 1; font-size: 12px; }
.plan-punkte li.plan-erledigt { color: var(--text-muted); }
.grp-entscheid { display: flex; gap: 6px; flex: 0 0 auto; }
.grp-btn-ja, .grp-btn-nein {
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
min-width: 38px; height: 34px; padding: 0 12px;
border-radius: 9px; border: 1px solid transparent;
font-size: 11px; font-weight: 700; font-family: inherit;
cursor: pointer; transition: background .18s, border-color .18s, color .18s, transform .12s;
-webkit-tap-highlight-color: transparent;
}
.grp-btn-ja, .grp-btn-nein { line-height: 1; }
.grp-btn-ja svg, .grp-btn-nein svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.grp-btn-ja {
background: var(--accent-green, #4caf50); color: #fff;
box-shadow: 0 2px 8px rgba(76,175,80,.28);
}
.grp-btn-ja:hover { filter: brightness(1.08); }
.grp-btn-nein {
background: rgba(231,76,60,.10); color: var(--accent-red, #e74c3c);
border-color: rgba(231,76,60,.34);
}
.grp-btn-nein:hover { background: rgba(231,76,60,.2); border-color: var(--accent-red, #e74c3c); }
.grp-btn-ja:active, .grp-btn-nein:active { transform: scale(.94); }
.grp-btn-ja:disabled, .grp-btn-nein:disabled { opacity: .5; cursor: default; }
.tr-einblick { margin: 8px 0 14px; }
.tr-einblick > summary {
list-style: none; cursor: pointer; display: inline-block;
font-size: 11px; font-weight: 600; color: var(--accent, #6600ff);
text-decoration: underline; text-underline-offset: 3px;
}
.tr-einblick > summary::-webkit-details-marker { display: none; }
.tr-einblick-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.tr-einblick-liste li {
display: flex; align-items: flex-start; gap: 8px;
font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
margin-bottom: 5px;
}
.tr-einblick-liste li svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 2px; }
.liga { max-width: 1280px; margin: 0 auto; }
.content-area:has(.liga) { max-width: 1340px; }
.liga-kopf {
position: relative; overflow: hidden;
border-radius: calc(var(--r) + 6px);
min-height: min(78vh, 720px);
display: flex; flex-direction: column; justify-content: flex-start;
padding: max(24px, calc(47vh - 105px - min(23.76vmin, 201.6px))) 26px 44px;
text-align: center;
background: radial-gradient(120% 90% at 50% 0%, rgba(102,0,255,.28), transparent 62%),
linear-gradient(180deg, #14101f 0%, #0c0c12 100%);
border: 1px solid var(--border);
}
.liga-glut {
position: absolute; left: 50%; top: -120px; width: 620px; height: 420px;
transform: translateX(-50%);
background: radial-gradient(circle, rgba(240,180,41,.20), transparent 62%);
filter: blur(24px); animation: ligaAtem 7s ease-in-out infinite;
}
@keyframes ligaAtem { 0%,100% { opacity:.6; transform: translateX(-50%) scale(1); }
50%     { opacity:1;  transform: translateX(-50%) scale(1.08); } }
.liga-ring { position: absolute; inset: 0; pointer-events: none; }
.liga-ring span {
position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
border: 1px solid rgba(255,255,255,.06); border-radius: 50%;
}
.liga-ring span:nth-child(1) { width: 300px; height: 300px; }
.liga-ring span:nth-child(2) { width: 480px; height: 480px; }
.liga-ring span:nth-child(3) { width: 680px; height: 680px; }
.liga-kopf-inhalt { position: relative; }
.liga-marke {
font-size: 10px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase;
color: var(--accent-yellow, #f0b429); margin-bottom: 10px;
}
.liga-titel {
margin: 0; line-height: 0;
display: flex; justify-content: center;
}
.liga-logo {
display: block; width: min(66vmin, 560px); height: auto;
filter: drop-shadow(0 0 42px rgba(240, 180, 41, .32));
}
.liga-satz {
max-width: 30em; margin: 16px auto 0;
font-size: 14.5px; line-height: 1.6; color: var(--text-muted);
}
.liga-saison { max-width: 30em; margin: 26px auto 0; }
.liga-saison-name {
font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: var(--text-main); margin-bottom: 8px;
}
.liga-balken { height: 5px; border-radius: 3px; background: rgba(255,255,255,.09); overflow: hidden; }
.liga-balken-fuell {
height: 100%; border-radius: 3px;
background: linear-gradient(90deg, var(--accent, #6600ff), var(--accent-yellow, #f0b429));
}
.liga-saison-zeit {
display: flex; justify-content: space-between; gap: 10px; margin-top: 6px;
font-size: 10.5px; color: var(--text-muted);
}
.liga-saison-zeit strong { color: var(--accent-yellow, #f0b429); }
.liga-saison-bald { justify-content: center; gap: 8px; }
.liga-knoepfe { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.liga-knopf {
display: inline-flex; align-items: center; gap: 7px;
padding: 11px 22px; border-radius: 999px; text-decoration: none;
font-size: 13px; font-weight: 700;
border: 1px solid var(--border); color: var(--text-main);
transition: transform .15s ease, filter .15s ease;
}
.liga-knopf svg { width: 15px; height: 15px; }
.liga-knopf:hover { transform: translateY(-1px); filter: brightness(1.12); }
.liga-knopf-haupt {
background: linear-gradient(90deg, var(--accent, #6600ff), #8b5cf6);
border-color: transparent; color: #fff;
box-shadow: 0 6px 22px rgba(102,0,255,.35);
}
.liga-knopf-still {
background: none; cursor: pointer; font-family: inherit;
color: var(--text-muted); border-style: dashed;
}
.liga-knopf-still:hover { color: var(--accent-yellow, #f0b429); border-color: var(--accent-yellow, #f0b429); }
.liga-zahlen {
display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 10px; margin: 18px 0;
}
.liga-zahl {
text-align: center; padding: 14px 10px;
background: var(--element-bg); border: 1px solid var(--border); border-radius: var(--r);
}
.liga-zahl strong {
display: block; font-size: 26px; font-weight: 800; line-height: 1;
font-variant-numeric: tabular-nums; color: var(--text-main);
}
.liga-zahl span {
display: block; margin-top: 5px;
font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--text-muted);
}
.liga-block { margin: 30px 0; }
.liga-block h2 { font-size: 17px; font-weight: 800; margin: 0 0 12px; }
.liga-h2-klein { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-left: 6px; }
.liga-text { font-size: 13px; line-height: 1.65; color: var(--text-muted); max-width: 46em; }
.liga-leer {
font-size: 13px; line-height: 1.6; color: var(--text-muted);
padding: 18px; border: 1px dashed var(--border); border-radius: var(--r);
}
.liga-schritte {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
align-items: stretch;
}
.liga-schritte li { flex-direction: column; }
.liga-schritte li > div { min-width: 0; }
.liga-schritte li {
display: flex; gap: 14px; align-items: flex-start;
padding: 14px 16px; background: var(--element-bg);
border: 1px solid var(--border); border-radius: var(--r);
}
.liga-nr {
flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; color: #fff;
background: linear-gradient(135deg, var(--accent, #6600ff), #8b5cf6);
}
.liga-schritte strong { font-size: 13.5px; }
.liga-schritte p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }
.liga-tab-huelle { overflow-x: auto; }
.liga-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 560px; }
.liga-tab th {
text-align: right; padding: 8px; white-space: nowrap;
font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
color: var(--text-muted); border-bottom: 1px solid var(--border);
}
.liga-tab th:nth-child(2), .liga-tab td:nth-child(2) { text-align: left; }
.liga-tab td { padding: 9px 8px; text-align: right; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.liga-platz { width: 1%; color: var(--text-muted); font-weight: 700; }
.liga-gruppe a { color: inherit; text-decoration: none; font-weight: 600; }
.liga-gruppe a:hover { text-decoration: underline; }
.liga-punkte { font-weight: 800; }
.liga-podest-1 td { background: rgba(240,180,41,.10); }
.liga-podest-2 td { background: rgba(190,190,205,.07); }
.liga-podest-3 td { background: rgba(205,127,50,.08); }
.liga-podest-1 .liga-platz { color: var(--accent-yellow, #f0b429); }
.liga-saisons { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.liga-saison-kachel {
position: relative; padding: 16px 14px; border-radius: var(--r);
background: var(--element-bg); border: 1px solid var(--border);
}
.liga-saison-jetzt { border-color: var(--accent, #6600ff); box-shadow: 0 0 0 1px rgba(102,0,255,.25) inset; }
.liga-saison-nr { font-size: 30px; font-weight: 800; line-height: 1; color: rgba(255,255,255,.10); }
.liga-saison-titel { font-size: 14px; font-weight: 700; margin-top: -14px; }
.liga-saison-spanne { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.liga-saison-jetzt-marke {
position: absolute; top: 12px; right: 12px;
font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--accent, #6600ff);
}
.liga-schluss {
text-align: center; margin: 34px 0 10px; padding: 30px 20px;
border-radius: calc(var(--r) + 4px);
background: radial-gradient(90% 120% at 50% 100%, rgba(102,0,255,.18), transparent 70%);
border: 1px solid var(--border);
}
.liga-schluss h2 { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.liga-schluss p { margin: 0 auto 18px; max-width: 34em; font-size: 13px; line-height: 1.6; color: var(--text-muted); }@media (prefers-reduced-motion: reduce){ .liga-glut { animation: none; }}@media (max-width: 640px){
.liga-kopf { padding: 30px 16px 26px; min-height: 0; }
.liga-logo { width: min(74vw, 380px); }
.liga-ring span:nth-child(3) { display: none; }
.liga-zahlen { grid-template-columns: repeat(2, 1fr); }}
.sf-karte {
margin-top: 12px; padding: 12px 14px;
background: var(--element-bg); border: 1px solid var(--border);
border-left: 2px solid var(--accent, #6600ff); border-radius: var(--r);
}
.sf-kopf {
display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
color: var(--accent, #6600ff);
}
.sf-kopf svg { width: 13px; height: 13px; }
.sf-basis { margin-left: auto; color: var(--text-muted); font-weight: 600; letter-spacing: .04em; }
.sf-wenig { font-size: 12px; line-height: 1.55; color: var(--text-muted); }
.sf-punkt + .sf-punkt { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.sf-text { font-size: 12.5px; line-height: 1.55; }
.sf-tun {
display: flex; align-items: flex-start; gap: 6px; margin-top: 5px;
font-size: 11.5px; line-height: 1.5; color: var(--accent, #6600ff);
}
.sf-tun svg { width: 12px; height: 12px; flex: 0 0 auto; margin-top: 3px; }
.sf-kurve { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--accent, #6600ff); }
.sf-kurve svg { display: block; width: 100%; height: 52px; }
.sf-kurve-fuss {
display: flex; justify-content: space-between; gap: 8px; margin-top: 3px;
font-size: 9.5px; color: var(--text-muted);
}
.tr-post {
margin-bottom: 14px; padding: 11px 13px;
background: var(--element-bg); border: 1px solid var(--border);
border-left: 2px solid var(--accent, #6600ff); border-radius: var(--r);
}
.tr-post-kopf {
display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
color: var(--accent, #6600ff);
}
.tr-post-kopf svg { width: 13px; height: 13px; }
.tr-post-seit { margin-left: auto; color: var(--text-muted); font-weight: 600; letter-spacing: .04em; }
.tr-post-zeile {
display: flex; align-items: baseline; gap: 9px; padding: 5px 0;
color: inherit; text-decoration: none; font-size: 12.5px; line-height: 1.45;
}
.tr-post-zeile + .tr-post-zeile { border-top: 1px solid var(--border); }
.tr-post-zeile:hover .tr-post-text { text-decoration: underline; }
.tr-post-marke { flex: 0 0 auto; width: 14px; text-align: center; font-size: 11px; }
.tr-post-einheit .tr-post-marke { color: var(--accent, #6600ff); }
.tr-post-ja      .tr-post-marke { color: var(--accent-green, #22c55e); }
.tr-post-nein    .tr-post-marke { color: var(--accent-orange, #fb923c); }
.tr-post-gelesen .tr-post-marke { opacity: .6; }
.tr-post-text { flex: 1; overflow-wrap: anywhere; }
.tr-post-zeit { flex: 0 0 auto; font-size: 10px; color: var(--text-muted); }
.aw-karte {
margin-top: 12px; padding: 12px 14px;
background: var(--element-bg); border: 1px solid var(--border);
border-left: 2px solid var(--text-muted); border-radius: var(--r);
}
.aw-kopf {
display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
color: var(--text-muted);
}
.aw-kopf svg { width: 13px; height: 13px; }
.aw-zeile + .aw-zeile { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.aw-was { font-size: 12.5px; }
.aw-datum { color: var(--text-muted); font-size: 10.5px; margin-left: 6px; }
.aw-wert { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; overflow-wrap: anywhere; }
.aw-alt { text-decoration: line-through; opacity: .7; }
.aw-zahlen { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; align-items: baseline; }
.aw-mass {
font-size: 11.5px; color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.aw-mass strong { color: var(--text-main); }
.aw-gut strong      { color: var(--accent-green, #22c55e); }
.aw-schlecht strong { color: var(--accent-orange, #fb923c); }
.aw-n { font-size: 10px; color: var(--text-muted); opacity: .8; margin-left: auto; }
.aw-fuss {
font-size: 10px; color: var(--text-muted); line-height: 1.5;
margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border);
}
.lb-ende {
text-align: center; padding: 12px 8px 4px;
font-size: 11px; color: var(--text-muted);
}
.tr-tabelle-huelle { overflow-x: auto; margin: 0 -4px; }
.tr-tabelle { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 620px; }
.tr-tabelle th {
text-align: right; padding: 7px 8px; white-space: nowrap;
font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
color: var(--text-muted); border-bottom: 1px solid var(--border);
user-select: none;
}
.tr-tabelle th:first-child, .tr-tabelle td:first-child { text-align: left; }
.tr-tabelle th:hover { color: var(--text-main); }
.tr-tabelle th.tr-sortiert { color: var(--accent, #6600ff); }
.tr-tabelle th.tr-sortiert::after { content: ' ↕'; font-size: 9px; }
.tr-tabelle td { padding: 8px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tr-tabelle tbody tr:hover td { background: var(--element-bg); }
.tr-tab-name { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 600; }
.tr-tab-name .avatar { width: 24px; height: 24px; flex: 0 0 auto; }
.tr-still td { opacity: .55; }
.tr-still td:first-child::after {
content: '•'; color: var(--accent-yellow, #f0b429); margin-left: 6px; font-weight: 800;
}
.tr-tab-tun { width: 1%; }
.tr-tab-tun .tr-coach { margin: 0; }
.tr-tab-plan td { border-bottom: 1px solid var(--border); padding: 0 8px 8px; text-align: left; }
.tr-tab-plan .tr-plan { margin: 0 0 2px; }
.tr-plan { margin: -2px 0 10px; }
.tr-plan > summary {
list-style: none; cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 10px; border-radius: 999px;
font-size: 10.5px; font-weight: 700;
color: var(--accent, #6600ff); background: rgba(102,0,255,.08);
border: 1px solid rgba(102,0,255,.25);
}
.tr-plan > summary::-webkit-details-marker { display: none; }
.tr-plan > summary svg { width: 12px; height: 12px; }
.tr-plan[open] > summary { margin-bottom: 8px; }
.tr-plan-form { display: flex; flex-direction: column; gap: 7px; }
.tr-plan-form input[type=text], .tr-plan-form textarea, .tr-plan-form input[type=date] {
width: 100%; padding: 8px 10px; font: inherit; font-size: 12.5px;
background: var(--element-bg); color: var(--text-main);
border: 1px solid var(--border); border-radius: var(--rs);
}
.tr-plan-form textarea { line-height: 1.5; resize: vertical; }
.tr-plan-form input:focus, .tr-plan-form textarea:focus { outline: none; border-color: var(--accent, #6600ff); }
.tr-plan-fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-plan-fuss label { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.tr-plan-fuss input[type=date] { width: auto; font-size: 11.5px; padding: 6px 8px; }
.tr-plan-fuss button { margin-left: auto; }
.tr-plan-hinweis { font-size: 10.5px; color: var(--text-muted); }
.plan-vorschlag {
margin: 0 0 12px; padding: 12px 14px;
background: rgba(102,0,255,.06);
border: 1px solid rgba(102,0,255,.28);
border-left: 3px solid var(--accent, #6600ff);
border-radius: var(--r);
}
.plan-vorschlag .plan-punkte { margin-top: 8px; }
.plan-vorschlag-hinweis {
font-size: 10.5px; color: var(--text-muted); line-height: 1.5; margin-top: 9px;
}
.plan-vorschlag-knoepfe { display: flex; gap: 8px; margin-top: 10px; }
.goal-erreicht { border-color: var(--accent-green, #22c55e) !important; }
.goal-erreicht .goal-progress-fill { background: var(--accent-green, #22c55e); }
.pc-notiz {
margin-top: 10px; padding: 10px 12px;
background: rgba(56,189,248,.06);
border: 1px solid rgba(56,189,248,.22);
border-left: 2px solid var(--accent-blue, #38bdf8);
border-radius: var(--r);
}
.pc-notiz-leer { background: transparent; border-style: dashed; }
.pc-notiz-kopf {
display: flex; align-items: center; gap: 6px; margin-bottom: 7px;
font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
color: var(--accent-blue, #38bdf8);
}
.pc-notiz-kopf svg { width: 12px; height: 12px; }
.pc-notiz-nur { margin-left: auto; color: var(--text-muted); font-weight: 700; letter-spacing: .06em; }
.pc-notiz-zeile + .pc-notiz-zeile { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border); }
.pc-notiz-wer { font-size: 11px; font-weight: 700; }
.pc-notiz-zeit { font-weight: 500; color: var(--text-muted); margin-left: 5px; }
.pc-notiz-text { font-size: 12.5px; line-height: 1.55; margin-top: 3px; overflow-wrap: anywhere; }
.pc-notiz-neu .pc-notiz-wer::before {
content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: var(--accent-blue, #38bdf8); margin-right: 6px; vertical-align: 1px;
}
.pc-notiz-form { margin-top: 9px; }
.pc-notiz-form textarea {
width: 100%; padding: 8px 10px; font: inherit; font-size: 12.5px; line-height: 1.5;
background: var(--element-bg); color: var(--text-main);
border: 1px solid var(--border); border-radius: var(--rs); resize: vertical;
}
.pc-notiz-form textarea:focus { outline: none; border-color: var(--accent-blue, #38bdf8); }
.pc-notiz-knoepfe { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.pc-notiz-weg {
background: none; border: none; padding: 0; cursor: pointer;
font-size: 11px; color: var(--text-muted); text-decoration: underline;
}
.pc-notiz-weg:hover { color: var(--accent-red, #e74c3c); }
.pc-notiz-stand { margin-top: 4px; font-size: 10.5px; color: var(--text-muted); }
.pc-notiz-stand.ist-gelesen { color: var(--accent-green, #22c55e); }
.pc-notiz-verlauf {
margin: 8px 0 0 2px; padding-left: 9px;
border-left: 2px solid var(--border);
}
.pc-antwort + .pc-antwort { margin-top: 7px; }
.pc-antwort-wer { font-size: 10.5px; font-weight: 700; }
.pc-antwort-zeit { font-size: 10.5px; font-weight: 500; color: var(--text-muted); margin-left: 5px; }
.pc-antwort-text { font-size: 12px; line-height: 1.5; margin-top: 2px; overflow-wrap: anywhere; }
.pc-antwort.ist-meine .pc-antwort-wer { color: var(--accent-blue, #38bdf8); }
.pc-antwort-form { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.pc-antwort-feld {
flex: 1; min-width: 0; padding: 6px 10px; font: inherit; font-size: 12px;
background: var(--element-bg); color: var(--text-main);
border: 1px solid var(--border); border-radius: 999px;
}
.pc-antwort-feld:focus { outline: none; border-color: var(--accent-blue, #38bdf8); }
.pc-antwort-senden {
flex: none; display: grid; place-items: center; width: 30px; height: 30px;
background: none; border: none; padding: 0; cursor: pointer;
color: var(--accent-blue, #38bdf8); border-radius: 50%;
}
.pc-antwort-senden:hover { background: rgba(56,189,248,.12); }
.pc-antwort-senden svg { width: 15px; height: 15px; }
.ub-karte {
position: fixed; right: 16px; bottom: 16px; z-index: 9998;
max-width: 340px; width: calc(100% - 32px);
background: var(--card-bg, #16161d); border: 1px solid var(--border);
border-left: 3px solid var(--accent, #6600ff);
border-radius: var(--r); padding: 12px 14px;
box-shadow: 0 8px 28px rgba(0,0,0,.35);
animation: ubRein .35s ease both;
}
@keyframes ubRein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ub-kopf {
display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--accent, #6600ff);
}
.ub-kopf svg { width: 13px; height: 13px; }
.ub-kopf span { flex: 1; }
.ub-kopf button {
background: none; border: none; color: var(--text-muted); font-size: 17px;
line-height: 1; cursor: pointer; padding: 0 2px;
}
.ub-liste { margin: 0; padding-left: 15px; list-style: none; }
.ub-liste li { position: relative; font-size: 12px; line-height: 1.5; margin-bottom: 6px; color: var(--text-main); }
.ub-liste li::before {
content: '·'; position: absolute; left: -13px; top: -.1em;
color: var(--accent, #6600ff); font-weight: 800; font-size: 1.35em; line-height: 1;
}
.ub-liste li:last-child { margin-bottom: 0; }@media (max-width: 640px){ .ub-karte { right: 8px; left: 8px; bottom: 74px; max-width: none; }}
.notif-trainer { display: flex; gap: 6px; margin-top: 6px; }
.notif-trainer button { font-size: 10px; padding: 3px 12px; }
.notif-mail-stand { margin-top: 5px; font-size: 10px; color: var(--text-muted); }
.notif-mail-stand.ok { color: var(--accent-green); font-weight: 600; }
.notif-trainer-was { display: inline-block; margin-top: 5px; font-size: 10px; color: var(--text-muted); text-decoration: underline; }
.plan-hakenform { margin: 0; }
.plan-hakenform .plan-punkte { padding-left: 0; }
.plan-hakenform .plan-punkte li::before { content: none; }
.plan-hakenform .plan-punkte li { align-items: flex-start; gap: 9px; margin-bottom: 5px; }
.plan-haken {
flex: 0 0 auto; width: 15px; height: 15px; margin: 2px 0 0; padding: 0;
border: 1.5px solid var(--border); border-radius: 4px;
background: transparent; color: var(--accent-green, #22c55e);
font-size: 10px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: border-color .15s ease, background .15s ease;
}
.plan-haken:hover { border-color: var(--accent, #6600ff); }
.plan-haken:focus-visible { outline: 2px solid var(--accent, #6600ff); outline-offset: 1px; }
.plan-haken-an { border-color: var(--accent-green, #22c55e); background: rgba(34,197,94,.14); }
.plan-punkt-text { flex: 1 1 auto; overflow-wrap: anywhere; }
.plan-rest { margin-left: 6px; opacity: .8; }
.plan-rest::before { content: '· '; }
.plan-quelle {
font-size: 9px; text-transform: uppercase; letter-spacing: .07em;
color: var(--text-muted); opacity: .8;
margin-left: 8px; margin-right: auto;
}
.plan-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.plan-marke {
display: inline-flex; align-items: center; gap: 5px;
font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
color: var(--accent, #6600ff);
}
.plan-marke svg { width: 12px; height: 12px; }
.plan-bis { font-size: 9.5px; color: var(--text-muted); white-space: nowrap; }
.plan-alt .plan-bis { color: var(--accent-red, #e74c3c); }
.plan-titel { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.plan-schwer { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }
.plan-punkte { margin: 9px 0 0; padding-left: 17px; font-size: 12px; line-height: 1.65; }
.plan-punkte li { margin-bottom: 2px; }
.plan-weg { margin: 10px 0 0; }
.plan-weg-knopf {
background: none; border: none; padding: 0; cursor: pointer;
font-size: 10px; color: var(--text-muted); text-decoration: underline;
}
.plan-weg-knopf:hover { color: var(--accent-red, #e74c3c); }
.coach-laedt { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); }
.coach-laedt span {
width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
animation: coachTupfen 1.1s ease-in-out infinite;
}
.coach-laedt span:nth-child(2) { animation-delay: .15s; }
.coach-laedt span:nth-child(3) { animation-delay: .3s; margin-right: 4px; }
@keyframes coachTupfen { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.coach-vorschlaege { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
.coach-vorschlag {
border: 1px solid var(--border); background: var(--element-bg); color: var(--text-muted);
border-radius: 20px; padding: 5px 11px; font-size: 11px; font-weight: 600;
cursor: pointer; font-family: inherit;
}
.coach-vorschlag:hover { color: var(--text-main); border-color: var(--text-muted); }
.coach-eingabe { display: flex; gap: 8px; }
.coach-eingabe input {
flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: 10px;
border: 1px solid var(--border); background: var(--element-bg);
color: var(--text-main); font-size: 13px; font-family: inherit; outline: none;
}
.coach-eingabe input:focus { border-color: var(--accent); }
.coach-senden {
flex: 0 0 auto; height: 38px; padding: 0 18px; border-radius: 10px; border: none;
background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 700;
font-family: inherit; cursor: pointer;
}
.coach-senden:disabled { opacity: .5; cursor: default; }@media (max-width: 600px){
.coach-einstieg { flex-direction: column; align-items: stretch; }
.coach-einstieg > * { flex: 0 0 auto !important; }
.coach-knopf { width: 100%; }}
.pa-anzahl {
flex: 0 0 auto; font-size: 9.5px; font-weight: 700;
color: var(--text-muted); background: var(--bg-panel);
border-radius: 20px; padding: 1px 6px; white-space: nowrap;
}
.eq-hinweis {
display: flex; align-items: flex-start; gap: 7px;
margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--text-muted);
}
.eq-hinweis svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 2; fill: none; flex: 0 0 auto; margin-top: 1px; }
.ausr-richtung { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.ausr-rose-titel {
font-size: 9px; text-transform: uppercase; letter-spacing: .06em;
color: var(--text-muted); font-weight: 700; margin-bottom: 8px;
}
.ausr-rose-reihe { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ausr-rose {
display: grid; grid-template-columns: repeat(3, 30px); grid-auto-rows: 30px;
gap: 3px; flex: 0 0 auto;
}
.ausr-rose-feld {
display: flex; align-items: center; justify-content: center;
border-radius: 6px; font-size: 11px; font-weight: 700;
font-family: 'Space Grotesk', monospace; color: #fff;
background: rgba(231, 76, 60, calc(0.12 + 0.78 * var(--anteil, 0)));
border: 1px solid rgba(231, 76, 60, .25);
}
.ausr-rose-leer { background: var(--element-bg); border-color: var(--border); color: transparent; }
.ausr-rose-stark { outline: 2px solid var(--accent-red, #e74c3c); outline-offset: 1px; }
.ausr-rose-mitte {
display: flex; align-items: center; justify-content: center;
color: var(--text-muted); font-size: 14px; font-weight: 700;
}
.ausr-rose-text { min-width: 0; }
.ausr-rose-text b { display: block; font-size: 14px; font-weight: 800; text-transform: capitalize; }
.ausr-rose-text span { font-size: 11px; color: var(--text-muted); line-height: 1.45; }
[data-theme="light"] .ausr-rose-feld { color: #1a1a1a; }
[data-theme="light"] .ausr-rose-leer { color: transparent; }@media (max-width: 420px){
.ausr-rose { grid-template-columns: repeat(3, 26px); grid-auto-rows: 26px; }
.ausr-rose-reihe { gap: 10px; }}
.gs-legende {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: 10.5px; color: var(--text-muted); margin: 2px 0 6px;
}
.gs-marke { width: 14px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.gs-marke-kern { background: #3b82f6; }
.gs-marke-voll { background: #e74c3c; margin-left: 10px; }
.gs-deutung {
margin-top: 8px; font-size: 11px; line-height: 1.55; color: var(--text-muted);
}
.gs-deutung strong { color: var(--text-main); }
.gs-deutung em { font-style: normal; font-weight: 700; }
.duell-ablauf {
--accent-purple: #7c6ef0;
margin-bottom: 16px; padding: 16px 18px;
background: linear-gradient(180deg, rgba(124,110,240,.07), transparent 70%), var(--bg-panel);
border: 1px solid rgba(124,110,240,.28); border-radius: 16px;
}
.da-kopf {
display: flex; align-items: center; gap: 6px; margin-bottom: 12px;
font-size: 9.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: .07em; color: var(--text-muted);
}
.da-kopf svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 2; fill: none; }
.da-stufen {
list-style: none; margin: 0 0 12px; padding: 0;
display: flex; align-items: flex-start; gap: 0;
}
.da-stufe {
flex: 1 1 0; min-width: 0; position: relative;
display: flex; flex-direction: column; align-items: center; gap: 5px;
text-align: center;
}
.da-stufe + .da-stufe::before {
content: ''; position: absolute;
left: -50%; right: 50%; top: 14px; height: 3px; border-radius: 2px;
background: var(--border);
}
.da-erledigt + .da-stufe::before { background: #7c6ef0; }
.da-nr {
position: relative; z-index: 1;
flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800;
background: var(--bg-panel); border: 2px solid var(--border); color: var(--text-muted);
}
.da-nr svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 3; fill: none; }
.da-kurz {
font-size: 11px; font-weight: 700; line-height: 1.2;
color: var(--text-muted); overflow-wrap: anywhere;
}
.da-erledigt .da-nr { background: linear-gradient(rgba(124,110,240,.2), rgba(124,110,240,.2)), var(--bg-panel); border-color: #7c6ef0; color: #7c6ef0; }
.da-erledigt .da-kurz { color: var(--text-main); }
.da-jetzt .da-nr {
background: #7c6ef0; border-color: #7c6ef0; color: #fff;
box-shadow: 0 0 0 5px rgba(124,110,240,.2), 0 6px 18px -4px rgba(124,110,240,.7);
}
.da-jetzt .da-kurz { color: var(--accent-purple, #7c6ef0); }
.da-offen .da-kurz { opacity: .6; }
.da-aktuell {
padding: 11px 13px; border-radius: 11px;
background: var(--element-bg); border: 1px solid var(--border); border-left: 3px solid #7c6ef0;
font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
}
.da-aktuell b { display: block; color: var(--text-main); font-size: 14px; margin-bottom: 2px; }
.da-stand {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border);
font-size: 13px; line-height: 1.45; font-weight: 600;
}
.da-stand svg { width: 13px; height: 13px; stroke: var(--accent-purple, #7c6ef0); stroke-width: 2.5; fill: none; flex: 0 0 auto; transform: rotate(90deg); }
.da-stand > span { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.da-knopf {
flex: 0 0 auto; text-decoration: none;
padding: 10px 18px; border-radius: 11px;
background: linear-gradient(135deg, #9d8df7, #5b4fd6); color: #fff;
font-size: 13.5px; font-weight: 700; white-space: nowrap;
box-shadow: 0 8px 22px -8px rgba(124,110,240,.8);
}
.da-knopf:hover { filter: brightness(1.1); }@media (max-width: 480px){
.da-kurz { font-size: 10px; }
.da-nr { width: 28px; height: 28px; }
.da-stufe + .da-stufe::before { top: 13px; }
.da-knopf { flex: 1 1 100%; text-align: center; }}
.nav-link-mesh.nav-duell svg, .nav-link-mesh.nav-duell.active svg { stroke: #7c6ef0 !important; color: #7c6ef0 !important; }
.nav-link-mesh.nav-duell { color: #7c6ef0 !important; }
.nav-link-mesh.nav-duell.active { background: rgba(124,110,240,.1); }
.nav-link-mesh.nav-duell.active::before { background: #7c6ef0; }
.nav-link-mesh.nav-duell .nav-badge { background: #7c6ef0; color: #fff; }
.mm-gruende { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mm-grund {
font-size: 10.5px; line-height: 1.3; color: var(--text-muted);
background: var(--element-bg); border: 1px solid var(--border);
border-radius: 20px; padding: 3px 10px;
}
.mm-grund b { color: var(--accent-purple, #7c6ef0); font-weight: 800; font-size: 11.5px; }
.mm-grund-leer { border-style: dashed; }
.pos-hinweis {
display: flex; align-items: flex-start; gap: 8px;
margin: 10px 0; padding: 9px 12px;
background: var(--element-bg);
border: 1px solid var(--border);
border-left: 3px solid var(--accent-yellow, #f0b429);
border-radius: 10px;
font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
}
.pos-hinweis svg {
width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px;
stroke: var(--accent-yellow, #f0b429); stroke-width: 2; fill: none;
}
.pos-hinweis b { color: var(--text-main); font-weight: 700; }
.pos-hinweis span { min-width: 0; overflow-wrap: anywhere; }
.de-abweichung {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 12px; margin: 0;
background: var(--element-bg);
border-bottom: 1px solid var(--border);
border-left: 3px solid var(--accent-yellow, #f0b429);
font-size: 11.5px; line-height: 1.45; color: var(--text-muted);
}
.de-abweichung svg {
width: 14px; height: 14px; flex: 0 0 auto;
stroke: var(--accent-yellow, #f0b429); stroke-width: 2; fill: none;
}
.de-abweichung > span { flex: 1 1 200px; min-width: 0; }
.de-abweichung b { color: var(--text-main); font-weight: 700; }
.de-abw-knopf {
flex: 0 0 auto; cursor: pointer;
padding: 4px 10px; border-radius: 7px;
background: transparent; border: 1px solid var(--border);
color: var(--text-dim); font-size: 11px; font-weight: 600; font-family: inherit;
}
.de-abw-knopf:hover { border-color: var(--accent-yellow, #f0b429); color: var(--accent-yellow, #f0b429); }
.sd-karte {
display: flex; align-items: center; gap: 10px;
padding: 9px 11px; margin-bottom: 6px;
background: var(--bg-panel);
border: 1px solid var(--border); border-radius: 10px;
cursor: pointer; font-size: 12px;
transition: border-color .15s, background .15s;
}
.sd-karte:last-child { margin-bottom: 0; }
.sd-karte:hover { border-color: var(--accent-yellow, #f0b429); }
.sd-karte input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--accent-yellow, #f0b429); }
.sd-karte:has(input:checked) {
border-color: var(--accent-yellow, #f0b429);
background: rgba(240, 180, 41, .07);
}
.sd-inhalt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sd-paarung { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.sd-team {
font-weight: 700; font-size: 12.5px; line-height: 1.25;
min-width: 0; overflow-wrap: anywhere;
}
.sd-vs {
flex: 0 0 auto;
font-size: 9px; font-weight: 800; letter-spacing: .08em;
color: var(--accent-yellow, #f0b429);
background: rgba(240, 180, 41, .13);
border-radius: 4px; padding: 1px 5px;
}
.sd-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10.5px; color: var(--text-muted); }
.sd-punkt { opacity: .5; }
.sd-frist.sd-knapp { color: var(--accent-red, #e74c3c); font-weight: 700; }
.sd-keiner { color: var(--text-muted); }
.sd-karte-keiner { background: transparent; border-style: dashed; }
.tr-wechsel { margin: 6px 0; }
.tr-wechsel-knopf {
display: flex; align-items: center; gap: 10px; width: 100%;
background: none; border: none; font: inherit; text-align: left; cursor: pointer;
}
.tr-wechsel-knopf.tr-aktiv { color: var(--accent); box-shadow: inset 2px 0 0 var(--accent); font-weight: 700; }
.pc-review {
margin: 10px 14px 0;
padding: 11px 13px;
background: var(--element-bg);
border-left: 2px solid var(--accent, #6600ff);
border-radius: 0 var(--r) var(--r) 0;
}
.pc-review-kopf {
display: flex; align-items: center; gap: 6px;
font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--accent, #6600ff);
cursor: pointer; list-style: none; user-select: none;
}
.pc-review-kopf::-webkit-details-marker { display: none; }
details[data-coach-review][open] > .pc-review-kopf { margin-bottom: 6px; }
.pc-review-pfeil {
margin-left: 4px; width: 0; height: 0;
border-left: 4px solid transparent; border-right: 4px solid transparent;
border-top: 5px solid currentColor; opacity: .7;
transition: transform .15s ease;
}
details[data-coach-review][open] .pc-review-pfeil { transform: rotate(180deg); }
.pc-review-kopf:focus-visible { outline: 2px solid var(--accent, #6600ff); outline-offset: 3px; border-radius: 3px; }
.pc-review-mehr {
margin-top: 10px; background: none; border: none; padding: 0; cursor: pointer;
font-size: 10.5px; font-weight: 600; color: var(--accent, #6600ff); text-decoration: underline;
}
.pc-review-mehr:hover { opacity: .8; }
.pc-review-kopf svg { width: 12px; height: 12px; }
.pc-review-nur {
margin-left: auto; font-weight: 600; letter-spacing: 0;
text-transform: none; color: var(--text-muted); font-size: 9.5px;
}
.pc-review-text { font-size: 12.5px; line-height: 1.6; color: var(--text-main); }
.pc-review-gegliedert { display: flex; flex-direction: column; gap: 12px; }
.pcr-block { display: flex; flex-direction: column; gap: 4px; }
.pcr-titel {
font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: var(--text-muted);
}
.pcr-text { font-size: 12.5px; line-height: 1.62; white-space: pre-wrap; }
.pcr-text strong { font-weight: 700; color: var(--text-main); }
.pcr-text em { font-style: italic; opacity: .9; }
.pcr-text .pcr-zeile { white-space: pre-wrap; }
.pcr-text .pcr-zeile + .pcr-zeile { margin-top: .5em; }
.pcr-liste { margin: .5em 0; padding-left: 1.1em; list-style: none; }
.pcr-liste li { position: relative; padding-left: .2em; margin-bottom: .35em; }
.pcr-liste li::before {
content: '·'; position: absolute; left: -.8em; top: -.12em;
color: var(--accent, #6600ff); font-weight: 800; font-size: 1.35em; line-height: 1;
}
.pcr-zahl {
font-family: 'Space Grotesk', ui-monospace, monospace;
font-variant-numeric: tabular-nums;
font-weight: 700;
color: var(--text-main);
}
.pcr-tun .pcr-zahl { color: var(--accent, #6600ff); }
.pcr-vorspann .pcr-text {
font-size: 11.5px; color: var(--text-muted); font-style: italic;
padding-bottom: 2px;
}
.pc-review-gegliedert { gap: 14px; }
.pcr-tun {
padding: 10px 12px; border-radius: var(--r);
background: rgba(102, 0, 255, .07);
border-left: 2px solid var(--accent, #6600ff);
}
.pcr-tun .pcr-titel { color: var(--accent, #6600ff); }
.pcr-befund  .pcr-titel { color: var(--text-muted); }
.pcr-ursache .pcr-titel { color: var(--text-muted); }
.pcr-frei .pcr-titel { color: var(--text-muted); }
.pcr-schreibt { cursor: pointer; }
.pcr-wartet { display: none !important; }
.pcr-auftritt { animation: pcrAuftritt .34s ease both; }
@keyframes pcrAuftritt {
from { opacity: 0; transform: translateY(5px); }
to   { opacity: 1; transform: none; }
}
.pcr-w { opacity: 0; transition: opacity .22s ease; }
.pcr-w.da { opacity: 1; }
.pcr-w-jetzt::after {
content: '▍';
color: var(--accent, #6600ff);
animation: pcrBlink 1s steps(2) infinite;
margin-left: 1px;
}
@keyframes pcrBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.pcr-ablauf { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.pcr-schritt { display: flex; align-items: baseline; gap: 8px; }
.pcr-schritt:not(:last-child) .pcr-schritt-punkt::after {
content: ''; position: absolute; left: 50%; top: 100%;
width: 1px; height: 9px; margin-left: -.5px;
background: var(--border);
}
.pcr-schritt-punkt {
position: relative;
width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
background: var(--accent, #6600ff); opacity: .45; transform: translateY(-1px);
}
.pcr-schritt-text { font-size: 11px; color: var(--text-muted); line-height: 1.45; }
.pcr-schritt-aktiv .pcr-schritt-punkt {
opacity: 1;
animation: pcrSchrittPuls 1.4s ease-out infinite;
}
.pcr-schritt-aktiv .pcr-schritt-text { color: var(--text-main); }
@keyframes pcrSchrittPuls {
0%   { box-shadow: 0 0 0 0 rgba(102,0,255,.5); }
70%  { box-shadow: 0 0 0 6px rgba(102,0,255,0); }
100% { box-shadow: 0 0 0 0 rgba(102,0,255,0); }
}
.pcr-ablauf-fertig { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); opacity: .75; }
.pcr-ablauf-fertig .pcr-schritt-punkt { opacity: .3; }@media (prefers-reduced-motion: reduce){
.pcr-schritt-aktiv .pcr-schritt-punkt { animation: none; }}
.coach-einstieg-frei {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 14px 16px; margin-bottom: 16px;
background: var(--bg-panel); border: 1px solid var(--border);
border-left: 3px solid var(--accent, #6600ff); border-radius: var(--r);
}
.coach-einstieg-frei > div:first-child { flex: 1 1 240px; min-width: 0; }
.coach-einstieg-frei .coach-knopf { flex: 0 0 auto; }
.content-area:has(.coach-seite) { max-width: 1180px; padding-left: 20px; padding-right: 20px; }
.coach-seite {
display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 16px;
align-items: stretch;
height: calc(100vh - 176px); height: calc(100dvh - 176px);
min-height: 460px;
}
.coach-seite-liste {
background: var(--bg-panel); border: 1px solid var(--border);
border-radius: var(--r); padding: 10px;
min-height: 0; display: flex; flex-direction: column;
}
.coach-seite-listenkopf {
display: flex; align-items: center; gap: 8px; padding: 4px 6px 8px;
font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-muted); border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.coach-seite-listenkopf .coach-neu { margin-left: auto; }
.coach-seite-chats { overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.coach-seite-chats .coach-liste-zeile { padding: 9px 10px; }
.coach-seite-chats .coach-liste-titel { font-size: 12.5px; }
.coach-seite-chats .coach-liste-meta { font-size: 10px; }
.coach-seite-haupt {
background: var(--bg-panel); border: 1px solid var(--border);
border-radius: var(--r); padding: 16px 20px;
display: flex; flex-direction: column; min-width: 0; min-height: 0;
}
.coach-seite-haupt .coach-verlauf { min-height: 0; padding-right: 6px; }
.coach-seite-haupt .coach-verlauf:empty::before {
content: attr(data-leer);
margin: auto; max-width: 420px; text-align: center;
font-size: 13px; line-height: 1.6; color: var(--text-muted);
}
.coach-seite-haupt .coach-nacht { flex: 0 0 auto; max-height: 40%; overflow-y: auto; }
.coach-seite-haupt .coach-vorschlaege { margin: 12px 0; gap: 6px; }
.coach-seite-haupt .coach-vorschlaege:empty { margin: 6px 0; }
.coach-seite-haupt .coach-vorschlag { font-size: 12px; padding: 6px 12px; }
.coach-seite-haupt .coach-eingabe input { height: 44px; font-size: 14px; padding: 0 14px; }
.coach-seite-haupt .coach-senden { height: 44px; padding: 0 22px; font-size: 13.5px; }@media (max-width: 860px){
.content-area:has(.coach-seite) { padding-left: 12px; padding-right: 12px; }
.coach-seite { grid-template-columns: 1fr; height: auto; min-height: 0; }
.coach-seite-liste { max-height: 170px; }
.coach-seite-haupt { min-height: 60vh; padding: 14px; }
.coach-seite-haupt .coach-verlauf { min-height: 280px; max-height: 62vh; }}
.cv-erledigt { margin-top: 10px; font-size: 11.5px; color: var(--text-muted); }
.cv-erledigt a { color: var(--accent, #6600ff); text-decoration: underline; }
.coach-vorschlagskarte.cv-verworfen { opacity: .6; border-left-color: var(--text-muted); }
.coach-recht { margin: 6px 0 2px; text-align: center; }
.coach-recht a { font-size: 10px; color: var(--text-muted); text-decoration: underline; }
.coach-recht a:hover { color: var(--accent, #6600ff); }
.coach-frueher, .coach-neu {
background: none; border: 1px solid var(--border); border-radius: 999px;
color: var(--text-muted); cursor: pointer;
font-size: 10px; font-weight: 700; padding: 3px 9px; line-height: 1.4;
}
.coach-neu { padding: 3px 8px; font-size: 13px; }
.coach-frueher:hover, .coach-neu:hover { color: var(--text-main); border-color: var(--accent, #6600ff); }
.coach-liste { display: none; }
.coach-liste.offen {
display: flex; flex-direction: column; gap: 3px;
max-height: 190px; overflow-y: auto;
margin-bottom: 10px; padding: 6px;
background: var(--element-bg); border: 1px solid var(--border); border-radius: var(--r);
}
.coach-liste-zeile {
display: flex; flex-direction: column; gap: 1px; text-align: left;
background: none; border: none; cursor: pointer;
padding: 7px 9px; border-radius: var(--r); color: var(--text-main);
}
.coach-liste-zeile:hover { background: var(--bg-panel); }
.coach-liste-zeile.aktiv { background: var(--bg-panel); box-shadow: inset 2px 0 0 var(--accent, #6600ff); }
.coach-liste-titel {
font-size: 12px; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.coach-liste-meta { font-size: 9.5px; color: var(--text-muted); }
.coach-liste-laedt, .coach-liste-leer {
padding: 10px; font-size: 11.5px; color: var(--text-muted); text-align: center;
}
.coach-verlauf {
flex: 1 1 auto; min-height: 0; overflow-y: auto;
display: flex; flex-direction: column; gap: 16px;
padding: 2px 2px 4px;
}
.coach-blase-user {
align-self: flex-end; max-width: 82%;
padding: 8px 12px; border-radius: 14px 14px 4px 14px;
background: var(--accent, #6600ff); color: #fff;
font-size: 12.5px; line-height: 1.45;
}
.coach-blase-user .coach-blase-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.coach-blase-coach { align-self: stretch; }
.coach-blase-coach + .coach-blase-user { margin-top: 4px; }
.coach-blase-user + .coach-blase-coach { padding-top: 2px; }
.coach-blase-coach:not(:first-child)::before {
content: ''; display: block; height: 1px; background: var(--border);
margin: 0 0 12px; opacity: .6;
}
.pcr-kennzahlen {
display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
gap: 9px; margin-bottom: 14px;
}
.pcr-kachel {
position: relative; overflow: hidden;
padding: 10px 11px 10px 12px; border-radius: var(--r);
background: var(--element-bg); border: 1px solid var(--border);
display: flex; flex-direction: column; gap: 1px;
}
.pcr-kachel::before {
content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
background: transparent;
}
.pcr-kachel-wert {
font-family: 'Space Grotesk', ui-monospace, monospace;
font-variant-numeric: tabular-nums;
font-size: 17px; font-weight: 800; line-height: 1.15;
color: var(--text-main); overflow-wrap: anywhere;
}
.pcr-kachel-einheit { font-size: 10px; font-weight: 600; color: var(--text-muted); }
.pcr-kachel-pfeil {
display: inline-block; width: 10px; font-size: 9px;
margin-right: 3px; vertical-align: 2px;
}
.pcr-kachel-auf .pcr-kachel-pfeil { color: var(--accent-green, #4caf50); }
.pcr-kachel-ab  .pcr-kachel-pfeil { color: var(--accent-red, #e74c3c); }
.pcr-kachel-auf::before { background: var(--accent-green, #4caf50); }
.pcr-kachel-ab::before  { background: var(--accent-red, #e74c3c); }
.pcr-kachel-auf { border-color: rgba(76,175,80,.3); }
.pcr-kachel-ab  { border-color: rgba(231,76,60,.3); }
.pcr-kachel-label {
font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
color: var(--text-muted); margin-top: 3px;
}
.pcr-kachel-hinweis { font-size: 9.5px; color: var(--text-muted); }
.pcr-bildfach:empty { display: none; }
.pcr-bildfach { margin: 10px 0 2px; }
.pcr-block > .pcr-bild { margin-top: 10px; }
.pcr-block > .pcr-bild + .pcr-bild { margin-top: 8px; }
.pcr-tun > .pcr-bild .pcr-bild-flaeche { background: transparent; border-color: rgba(102,0,255,.25); }
.pcr-bilder { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.pcr-bild { margin: 0; }
.pcr-bild-flaeche {
background: var(--element-bg);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 12px 14px;
color: var(--text-main);
display: flex; align-items: center; justify-content: center;
}
.pcr-bild-flaeche svg { display: block; width: 100%; height: auto; max-height: 390px; }
.pcr-bild-flaeche svg { stroke: none; stroke-width: 1; }
.pcr-bild figcaption { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.pcr-bild-titel {
font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-muted);
display: flex; align-items: center; gap: 6px;
}
.pcr-bild-titel::before {
content: ''; width: 4px; height: 4px; border-radius: 50%; flex: 0 0 auto;
background: var(--accent, #6600ff); opacity: .7;
}
.pcr-bild-text { font-size: 11.5px; line-height: 1.5; color: var(--text-main); opacity: .72; }@media (prefers-reduced-motion: reduce){
.pcr-w { transition: none; }
.pcr-w-jetzt::after { animation: none; }
.pcr-auftritt { animation: none; }}
.pc-review-wartet { border-left-color: var(--text-muted); }
.pc-review-laeuft { color: var(--text-muted); font-style: italic; }
.tr-auff {
margin-bottom: 16px; padding: 14px;
background: var(--bg-panel);
border: 1px solid var(--border);
border-left: 3px solid var(--accent, #6600ff);
border-radius: var(--r);
}
.tr-auff-kopf {
display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--text-muted);
}
.tr-auff-kopf svg { width: 13px; height: 13px; }
.tr-auff-n {
margin-left: auto; padding: 1px 7px; border-radius: 999px;
background: var(--element-bg); font-size: 10px; letter-spacing: 0;
}
.tr-auff-liste { display: flex; flex-direction: column; gap: 4px; }
.tr-auff-zeile {
display: flex; align-items: baseline; gap: 8px;
padding: 8px 10px; border-radius: var(--r);
background: var(--element-bg);
text-decoration: none; color: var(--text-main);
transition: background .15s ease;
}
.tr-auff-zeile:hover { background: var(--border); }
.tr-auff-marke { flex: 0 0 auto; font-size: 10px; width: 12px; text-align: center; }
.tr-auff-ab  .tr-auff-marke { color: var(--accent-red, #e74c3c); }
.tr-auff-auf .tr-auff-marke { color: var(--accent-green, #4caf50); }
.tr-auff-weg .tr-auff-marke { color: var(--text-muted); }
.tr-auff-name { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; overflow-wrap: anywhere; }
.tr-auff-text { flex: 1; min-width: 0; font-size: 11px; color: var(--text-muted); }
.tr-auff-mehr { margin-top: 8px; font-size: 10px; color: var(--text-muted); }@media (max-width: 520px){
.tr-auff-zeile { flex-wrap: wrap; }
.tr-auff-text  { flex-basis: 100%; padding-left: 20px; }}
.tr-code-karte {
display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
padding: 16px; margin-bottom: 16px;
background: var(--bg-panel); border: 1px solid var(--border); border-radius: 14px;
}
.tr-code-bild { flex: 0 0 auto; background: #fff; padding: 8px; border-radius: 10px; line-height: 0; }
.tr-code-text { flex: 1 1 240px; min-width: 0; }
.tr-code-text h3 { margin: 0 0 4px; font-size: 14px; }
.tr-code-text p { margin: 0 0 10px; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
.tr-code-link { display: flex; gap: 6px; flex-wrap: wrap; }
.tr-code-link input {
flex: 1 1 180px; min-width: 0;
padding: 5px 9px; border-radius: 8px;
background: var(--element-bg); border: 1px solid var(--border);
color: var(--text-dim); font-size: 11px; font-family: monospace;
}
.tr-zeile {
display: flex; align-items: center; gap: 10px;
padding: 9px 11px; margin-bottom: 6px;
background: var(--element-bg); border: 1px solid var(--border); border-radius: 10px;
}
.tr-name { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.tr-meta { font-size: 10.5px; color: var(--text-muted); overflow-wrap: anywhere; }
.tr-liste { display: flex; flex-direction: column; gap: 6px; }
.tr-zeile, .tr-auff-reihe { display: flex; align-items: stretch; gap: 6px; }
.tr-zeile > .tr-karte, .tr-auff-reihe > .tr-auff-zeile { flex: 1; min-width: 0; }
.tr-coach {
flex: 0 0 auto; width: 42px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px; cursor: pointer;
background: rgba(102, 0, 255, .10);
border: 1px solid rgba(102, 0, 255, .35);
color: var(--accent, #6600ff);
transition: background .15s ease;
}
.tr-coach:hover { background: rgba(102, 0, 255, .20); }
.tr-coach svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; }@media (max-width: 480px){
.tr-coach { width: 38px; }}
.tr-coach.tr-coach-breit { width: auto; gap: 6px; }@media (max-width: 480px){ .tr-coach.tr-coach-breit { width: auto; }}
.tr-karte {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; text-decoration: none; color: inherit;
background: var(--element-bg); border: 1px solid var(--border); border-radius: 10px;
}
.tr-karte:hover { border-color: var(--accent); }
.tr-karte-haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tr-zahlen { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--text-muted); }
.tr-zahlen b { color: var(--text-main); font-weight: 700; font-family: 'Space Grotesk', monospace; }
.tr-trend { font-weight: 700; }
.tr-steigend { color: #4a9c4a; }
.tr-fallend  { color: var(--accent-red, #e74c3c); }
.tr-gleichbleibend { color: var(--text-muted); }
.tr-pfeil { flex: 0 0 auto; display: inline-flex; transform: rotate(-90deg); opacity: .45; }
.tr-pfeil svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.tr-land { display: flex; justify-content: center; padding: 24px 12px; }
.tr-land-karte {
max-width: 420px; width: 100%; text-align: center;
padding: 26px 22px; background: var(--bg-panel);
border: 1px solid var(--border); border-radius: 16px;
}
.tr-land-karte h2 { margin: 12px 0 2px; font-size: 19px; overflow-wrap: anywhere; }
.tr-land-handle { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.tr-land-karte p { font-size: 12.5px; line-height: 1.55; color: var(--text-dim); margin: 0 0 14px; }
.tr-land-liste { list-style: none; margin: 0 0 16px; padding: 0; text-align: left; }
.tr-land-liste li {
display: flex; align-items: flex-start; gap: 8px;
font-size: 11.5px; line-height: 1.5; color: var(--text-muted); margin-bottom: 6px;
}
.tr-land-liste svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 2px; stroke: currentColor; stroke-width: 2; fill: none; }
.tr-land-knoepfe { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.admin-chart-zeitraum { font-size: 10.5px; color: var(--text-muted); font-weight: 500; }
.qr-code { stroke: none !important; vertical-align: middle; max-width: 100%; height: auto; }
.qr-code rect { fill: #fff; stroke: none; }
.qr-code path { fill: #000; stroke: none; }
.qr-systeme {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
margin: 0 0 10px;
}
.qr-sys {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px; border-radius: 20px;
background: var(--element-bg); border: 1px solid var(--border);
font-size: 11px; font-weight: 600; color: var(--text-muted);
white-space: nowrap;
}
.coach-weiter { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.coach-weiter-knopf {
background: var(--element-bg); border: 1px solid var(--border);
border-radius: 999px; padding: 5px 11px; cursor: pointer;
font-size: 11px; color: var(--text-main); text-align: left;
max-width: 100%; overflow-wrap: anywhere;
}
.coach-weiter-knopf::before { content: '↳ '; color: var(--text-muted); }
.coach-weiter-knopf:hover { border-color: var(--accent, #6600ff); color: var(--accent, #6600ff); }
.coach-fab {
position: fixed; right: 20px; z-index: 80;
bottom: calc(20px + env(safe-area-inset-bottom, 0px));
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 18px; border-radius: 999px; border: none; cursor: pointer;
background: linear-gradient(135deg, #7c3aed, #6600ff);
color: #fff; font-size: 13px; font-weight: 700;
box-shadow: 0 4px 14px rgba(102, 0, 255, .35), 0 2px 4px rgba(0, 0, 0, .2);
transition: transform .15s ease, box-shadow .15s ease;
}
.coach-fab:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(102, 0, 255, .45), 0 3px 6px rgba(0, 0, 0, .25);
}
.coach-fab:active { transform: translateY(0); }
.coach-fab svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.coach-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }@media (max-width: 768px){
.coach-fab {
bottom: calc(74px + env(safe-area-inset-bottom, 0px));
right: 16px;
padding: 13px;
}
.coach-fab-text { display: none; }
.coach-fab svg { width: 20px; height: 20px; }}@media (min-width: 1500px){
.coach-fab { right: max(24px, calc((100vw - var(--sidebar-width, 0px)) / 2 - 570px)); }}@media (prefers-reduced-motion: reduce){
.coach-fab, .coach-fab:hover { transition: none; transform: none; }}
.post-type-pill.post-type-qr-sq {
color: #0d9488;
background: rgba(20, 184, 166, .12);
border: 1px solid rgba(20, 184, 166, .45);
text-transform: none;
letter-spacing: .01em;
padding: 2px 7px;
}
.post-type-pill.post-type-qr-sq svg { stroke: #0d9488; }
.qr-sys-neu {
color: #0d9488;
background: rgba(20, 184, 166, .10);
border-color: rgba(20, 184, 166, .45);
}
.qr-sys-marke {
font-size: 8.5px; font-weight: 800; letter-spacing: .07em;
background: #14b8a6; color: #fff;
border-radius: 4px; padding: 1px 5px;
}
.qr-sys-mehr { font-size: 10.5px; color: var(--text-muted); line-height: 1.4; }
[data-theme="light"] .qr-sys-neu { color: #0f766e; }
.tr-treffer {
position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
margin-top: 4px; padding: 4px;
background: var(--card-bg, var(--bg-panel));
border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,.18);
max-height: 300px; overflow-y: auto;
}
.tr-treffer-zeile {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 7px 9px; border: none; border-radius: 8px;
background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.tr-treffer-zeile:hover, .tr-treffer-zeile.aktiv { background: var(--element-bg); }
.tr-treffer-zeile img, .tr-treffer-kreis {
flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
}
.tr-treffer-kreis {
display: inline-flex; align-items: center; justify-content: center;
background: var(--element-bg); color: var(--text-muted);
font-size: 12px; font-weight: 700;
}
.tr-treffer-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tr-treffer-text b { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.tr-treffer-text i { font-size: 10.5px; font-style: normal; color: var(--text-muted); }
.tr-treffer-bekannt { opacity: .65; }
.tr-treffer-marke {
flex: 0 0 auto; font-size: 9.5px; font-weight: 700;
color: var(--text-muted); background: var(--bg-panel);
border-radius: 20px; padding: 2px 7px; white-space: nowrap;
}
.tr-treffer-leer { padding: 10px; font-size: 12px; color: var(--text-muted); text-align: center; }
.doc-schirmfoto,
.doc-schuss-warnung {
display: flex; align-items: flex-start; gap: 8px;
margin: 8px 0; padding: 9px 12px;
background: var(--element-bg); border: 1px solid var(--border);
border-left: 3px solid var(--accent-yellow, #f0b429);
border-radius: 10px;
font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
}
.doc-schirmfoto svg,
.doc-schuss-warnung svg {
width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px;
stroke: var(--accent-yellow, #f0b429); stroke-width: 2; fill: none;
}
.doc-schirmfoto b,
.doc-schuss-warnung b { color: var(--text-main); font-weight: 700; }
.doc-schirmfoto span,
.doc-schuss-warnung span { min-width: 0; overflow-wrap: anywhere; }
.doc-schuss-warnung {
border-left-color: var(--accent-red, #e74c3c);
background: rgba(231, 76, 60, .06);
}
.doc-schuss-warnung svg { stroke: var(--accent-red, #e74c3c); }
.ob-beispiele {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
margin: 10px 0 8px;
}
.ob-bsp { margin: 0; }
.ob-bsp img {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
border-radius: 8px; border: 2px solid var(--border); display: block;
}
.ob-bsp figcaption {
margin-top: 4px; font-size: 10px; font-weight: 700; text-align: center;
line-height: 1.3;
}
.ob-bsp-schlecht img { border-color: var(--accent-red, #e74c3c); }
.ob-bsp-schlecht figcaption { color: var(--accent-red, #e74c3c); }
.ob-bsp-weniger img { border-color: var(--accent-yellow, #f0b429); }
.ob-bsp-weniger figcaption { color: var(--accent-yellow, #f0b429); }
.ob-bsp-gut img { border-color: #4a9c4a; }
.ob-bsp-gut figcaption { color: #4a9c4a; }
.ob-warum { font-size: 11px; line-height: 1.5; color: var(--text-muted); }
.liga-betrieb {
margin: 44px 0 10px; padding: 22px 20px;
border: 1px dashed var(--border); border-radius: var(--r, 12px);
background: rgba(255,255,255,.02);
}
.liga-betrieb > h2 {
display: flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 800; margin: 0 0 16px; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 1.1px;
}
.liga-betrieb > h2 svg { width: 15px; height: 15px; }
.liga-betrieb > h2 span {
margin-left: auto; font-size: 10px; font-weight: 600;
letter-spacing: .4px; text-transform: none; opacity: .65;
}
.liga-betrieb-zahlen {
display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
.liga-betrieb-kachel {
padding: 15px 10px; text-align: center;
border: 1px solid var(--border); border-radius: var(--r, 12px);
background: var(--element-bg);
}
.liga-betrieb-wert {
font-size: 26px; font-weight: 900; line-height: 1;
font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums;
}
.liga-betrieb-mark {
margin-top: 5px; font-size: 10px; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 1px;
}
.liga-betrieb-warn {
margin-top: 16px; padding: 16px 15px;
border: 1px solid rgba(231,76,60,.35); border-radius: var(--r, 12px);
background: rgba(231,76,60,.05);
}
.liga-betrieb-warn h3 {
display: flex; align-items: center; gap: 7px;
font-size: 13px; font-weight: 800; margin: 0 0 8px; color: var(--accent-red, #e74c3c);
}
.liga-betrieb-warn h3 svg { width: 15px; height: 15px; }
.liga-betrieb-warn > p {
font-size: 12px; line-height: 1.6; color: var(--text-muted); margin: 0 0 12px;
}
.liga-betrieb-zeile {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; margin-top: 6px; font-size: 12px;
background: var(--element-bg); border-radius: var(--r, 12px);
}
.liga-betrieb-zeile > span:first-child { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.liga-betrieb-zeile i { font-style: normal; color: var(--text-muted); }
.liga-betrieb-klein { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.liga-betrieb-seit  { font-size: 10px; color: var(--accent-red, #e74c3c); white-space: nowrap; }
.liga-betrieb-zeile a {
flex: 0 0 auto; padding: 3px 10px; border-radius: 999px;
border: 1px solid var(--border); color: var(--text-main);
font-size: 10px; font-weight: 700; text-decoration: none;
}
.liga-betrieb-zeile a:hover { border-color: var(--accent-yellow, #f0b429); color: var(--accent-yellow, #f0b429); }@media (max-width: 560px){
.liga-betrieb-zeile { flex-wrap: wrap; }
.liga-betrieb-zeile > span:first-child { flex-basis: 100%; }}
.admin-tabgruppen { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.admin-tabgruppe  { display: flex; align-items: flex-start; gap: 10px; }
.admin-tabgruppe-titel {
flex: 0 0 88px; padding-top: 10px; text-align: right;
font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px;
text-transform: uppercase; color: var(--text-muted); opacity: .75;
}
.admin-tabgruppe .tabs { flex: 1; margin-bottom: 0; }@media (max-width: 760px){
.admin-tabgruppe { flex-direction: column; gap: 2px; }
.admin-tabgruppe-titel { flex: none; text-align: left; padding: 4px 0 0 4px; }}
.tr-block { margin-top: 14px; }
.tr-block > h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 12px; }
.tr-block > h3 svg { width: 15px; height: 15px; }
.tr-block-klein { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.tr-hinweis { font-size: 12px; line-height: 1.6; color: var(--text-muted); margin: 8px 0 0; }
.tr-kennzahlen {
display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
gap: 8px; margin: 14px 0 4px;
}
.tr-kz {
padding: 12px 8px; text-align: center;
background: var(--element-bg); border: 1px solid var(--border); border-radius: var(--r);
}
.tr-kz-wert {
font: 800 20px/1 'Space Grotesk', sans-serif;
font-variant-numeric: tabular-nums; color: var(--text-main);
}
.tr-kz-titel {
margin-top: 4px; font-size: 9.5px; letter-spacing: .7px;
text-transform: uppercase; color: var(--text-muted);
}
.tr-verlauf-huelle { width: 100%; }
.tr-verlauf { display: block; width: 100%; height: auto; }
.tr-verlauf-linie  { stroke: var(--accent, #6600ff); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.tr-verlauf-punkt  { fill: var(--accent, #6600ff); }
.tr-verlauf-hilfe  { stroke: var(--border); stroke-width: .5; vector-effect: non-scaling-stroke; }
.tr-verlauf-marke  { fill: var(--text-muted); font-size: var(--svg-schrift, 8px);
font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
font-variant-numeric: tabular-nums; user-select: none; }
.tr-wochen, .tr-tage { display: flex; align-items: flex-end; gap: 4px; }
.tr-wochen { height: 62px; }
.tr-tage   { height: 46px; margin-top: 14px; }
.tr-woche, .tr-tag {
flex: 1; display: flex; flex-direction: column; align-items: center;
justify-content: flex-end; gap: 3px; min-width: 0;
}
.tr-woche-balken, .tr-tag-balken {
width: 100%; max-width: 26px; border-radius: 3px 3px 0 0;
background: var(--accent, #6600ff);
}
.tr-woche-leer .tr-woche-balken, .tr-tag-leer .tr-tag-balken { background: var(--border); }
.tr-woche span, .tr-tag span {
font-size: 9px; color: var(--text-muted); white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.tr-plan-lauf { padding: 12px; background: var(--element-bg); border-radius: var(--r); }
.tr-plan-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.tr-quelle {
font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
padding: 2px 7px; border-radius: 999px;
background: rgba(102,0,255,.14); color: var(--accent, #6600ff);
}
.tr-plan-punkte { margin: 10px 0 0; padding-left: 20px; font-size: 12.5px; line-height: 1.7; }
.tr-einheiten { display: flex; flex-direction: column; gap: 6px; }
.tr-einheit { background: var(--element-bg); border-radius: var(--r); padding: 9px 12px; }
.tr-einheit-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.tr-einheit-datum { font-weight: 600; text-decoration: none; color: var(--text-main); white-space: nowrap; }
.tr-einheit-datum:hover { color: var(--accent, #6600ff); }
.tr-einheit-wert { font-variant-numeric: tabular-nums; }
.tr-einheit-klein { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.tr-einheit-notiz-marke { margin-left: auto; color: var(--accent-yellow, #f0b429); display: flex; }
.tr-einheit-notiz-marke svg { width: 13px; height: 13px; }
.tr-notiz > summary {
cursor: pointer; font-size: 11px; color: var(--text-muted);
margin-top: 6px; list-style: none;
}
.tr-notiz > summary::-webkit-details-marker { display: none; }
.tr-notiz > summary::before { content: '＋ '; }
.tr-notiz[open] > summary::before { content: '－ '; }
.tr-notiz-form { margin-top: 6px; }
.tr-notiz-form textarea {
width: 100%; resize: vertical; font: inherit; font-size: 12.5px;
padding: 8px 10px; border-radius: var(--r);
border: 1px solid var(--border); background: var(--bg-panel); color: var(--text-main);
}
.tr-notiz-fuss { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.tr-tab-spark { margin-top: 2px; line-height: 0; }
.tr-spark { display: block; }
.tr-null { color: var(--text-muted); opacity: .6; }
.tr-planmarke {
display: inline-flex; align-items: center; gap: 3px;
font-size: 10px; font-weight: 700; white-space: nowrap;
color: var(--accent, #6600ff);
}
.tr-planmarke svg { width: 12px; height: 12px; }@media (max-width: 560px){
.tr-kennzahlen { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
.tr-kz-wert { font-size: 17px; }}
.page-header .btn, .page-header .tr-coach { white-space: nowrap; }
.content-area:has(.tr-tabelle-huelle) { max-width: 1500px; }
.content-area:has(.tr-kennzahlen) { max-width: 1100px; }@media (min-width: 1100px){
.tr-kennzahlen { grid-template-columns: repeat(9, 1fr); }
.tr-zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.tr-zwei-spalten > * { margin-top: 0; min-width: 0; }}@media (max-width: 760px){
.tr-tabelle-huelle { overflow-x: visible; margin: 0; }
.tr-tabelle { min-width: 0; display: block; }
.tr-tabelle thead { display: none; }
.tr-tabelle tbody { display: block; }
.tr-tabelle tbody tr {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px;
padding: 12px; margin-bottom: 8px;
background: var(--element-bg); border: 1px solid var(--border);
border-radius: var(--r);
}
.tr-tabelle tbody tr.tr-tab-plan {
margin-top: -9px; margin-bottom: 10px;
border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0;
display: block; padding: 0 12px 12px;
}
.tr-tabelle tbody tr:hover td { background: none; }
.tr-tabelle td {
display: block; padding: 0; border: 0; text-align: left;
white-space: normal; font-size: 13px;
}
.tr-tabelle td[data-sp]::before {
content: attr(data-sp);
display: block; margin-bottom: 1px;
font-size: 9px; font-weight: 800; letter-spacing: .06em;
text-transform: uppercase; color: var(--text-muted);
}
.tr-tabelle td.tr-tab-kopfzelle { grid-column: 1 / -1; }
.tr-tabelle td.tr-tab-tun {
grid-column: 1 / -1; width: auto;
display: flex; justify-content: flex-end;
}
.tr-tabelle td.tr-tab-tun:empty { display: none; }
.tr-tab-name { font-size: 14px; }
.tr-tab-name .avatar { width: 30px; height: 30px; }
.tr-still td { opacity: 1; }
.tr-tabelle tbody tr.tr-still {
border-color: rgba(240,180,41,.45);
background: rgba(240,180,41,.05);
}}@media (max-width: 430px){
.tr-tabelle tbody tr { grid-template-columns: repeat(2, 1fr); }
.tr-kennzahlen { grid-template-columns: repeat(2, 1fr); }}@media (max-width: 560px){
.page-header:has(.tr-kennzahlen ~ *) { flex-wrap: wrap; }
.tr-einheit-kopf { gap: 8px; }
.tr-einheit-notiz-marke { margin-left: 0; }
.tr-block > h3 { flex-wrap: wrap; }
.tr-block-klein { margin-left: 0; flex-basis: 100%; }}
.tr-gr-unten { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }@media (min-width: 780px){ .tr-gr-unten { grid-template-columns: 1fr 1.6fr; }}
.tr-gr-titel {
font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 8px;
}
.tr-gr-titel span { font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .8; margin-left: 6px; }
.tr-gr-reihe { display: flex; gap: 8px; flex-wrap: wrap; }
.tr-gr-marke {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 11px; border-radius: 999px;
background: var(--element-bg); border: 1px solid var(--border);
font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.tr-gr-marke.tr-steigend { color: var(--accent-green, #22c55e); }
.tr-gr-marke.tr-fallend  { color: var(--accent-red, #e74c3c); }
.tr-gr-marke.tr-gleich   { color: var(--text-muted); }
.tr-gr-marke.tr-gr-still { color: var(--accent-yellow, #f0b429); font-weight: 600; font-size: 11.5px; }
.tr-schuss-raster { display: grid; grid-template-columns: 1fr; gap: 18px; }@media (min-width: 720px){ .tr-schuss-raster { grid-template-columns: 280px 1fr; }}
.tr-scheibe-huelle { min-width: 0; }
.tr-scheibe {
display: block; width: 100%; max-width: 280px; height: auto;
aspect-ratio: 1 / 1; margin: 0 auto;
background: var(--element-bg); border-radius: var(--r);
}
.tr-scheibe-ring  { fill: none; stroke: var(--border); stroke-width: 1; }
.tr-scheibe-kreuz { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 4; }
.tr-schuss { fill: var(--accent, #6600ff); opacity: .28; }
.tr-schuss-mitte {
fill: none; stroke: var(--accent-yellow, #f0b429); stroke-width: 2;
}
.tr-ringe { display: flex; flex-direction: column; gap: 4px; }
.tr-ring-zeile { display: flex; align-items: center; gap: 8px; }
.tr-ring-nr {
flex: 0 0 20px; text-align: right; font-size: 12px; font-weight: 700;
font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.tr-ring-balken { flex: 1; height: 14px; background: var(--element-bg); border-radius: 3px; overflow: hidden; }
.tr-ring-balken > div { height: 100%; background: var(--accent, #6600ff); border-radius: 3px; }
.tr-ring-zahl {
flex: 0 0 76px; font-size: 11.5px; font-variant-numeric: tabular-nums;
display: flex; gap: 6px; justify-content: flex-end;
}
.tr-ring-zahl span { color: var(--text-muted); min-width: 30px; text-align: right; }
.admin-ov { display: block; width: 100%; height: auto; }
.admin-ov-linie   { stroke: var(--accent-green, #22c55e); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.admin-ov-flaeche { fill: var(--accent-green, #22c55e); opacity: .12; }
.admin-ov-hilfe   { stroke: var(--border); stroke-width: .5; vector-effect: non-scaling-stroke; }
.admin-ov-marke   { fill: var(--text-muted); font-size: var(--svg-schrift, 9px);
font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
font-variant-numeric: tabular-nums; user-select: none; }
.tr-ziel-reihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.tr-ziel-reihe label { display: flex; flex-direction: column; gap: 3px; flex: 1 1 130px; min-width: 0; }
.tr-ziel-reihe label > span {
font-size: 9.5px; font-weight: 800; letter-spacing: .06em;
text-transform: uppercase; color: var(--text-muted);
}
.tr-ziel-reihe input, .tr-ziel-reihe select {
width: 100%; padding: 7px 9px; font: inherit; font-size: 13px;
border: 1px solid var(--border); border-radius: var(--r);
background: var(--bg-panel); color: var(--text-main);
}@media (max-width: 480px){ .tr-ziel-reihe label { flex-basis: 100%; }}
.tr-verlauf-gruppe {
stroke: var(--accent-yellow, #f0b429); stroke-width: 1.2;
stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; opacity: .8;
}
.tr-legende-gruppe {
display: inline-block; width: 16px; height: 0;
border-top: 2px dashed var(--accent-yellow, #f0b429); flex: 0 0 auto;
}
.tr-vergleich { display: grid; grid-template-columns: 1fr; gap: 14px; }@media (min-width: 640px){ .tr-vergleich { grid-template-columns: 1fr 1fr; }}
.tr-vgl-seite {
min-width: 0; padding: 12px; border-radius: var(--r);
background: var(--element-bg); border: 1px solid var(--border);
}
.tr-vgl-gut     { border-color: rgba(34,197,94,.35); }
.tr-vgl-schwach { border-color: rgba(231,76,60,.35); }
.tr-vgl-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 8px; }
.tr-vgl-kopf a { color: var(--text-muted); text-decoration: none; }
.tr-vgl-kopf strong { margin-left: auto; font-size: 15px; font-variant-numeric: tabular-nums; }
.tr-vgl-marke {
font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
padding: 2px 7px; border-radius: 999px; background: var(--bg-panel); color: var(--text-muted);
}
.tr-vgl-gut     .tr-vgl-marke { color: var(--accent-green, #22c55e); }
.tr-vgl-schwach .tr-vgl-marke { color: var(--accent-red, #e74c3c); }
.tr-vgl-zahlen {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 10px;
margin-top: 10px; font-size: 11.5px; color: var(--text-muted);
}
.tr-vgl-zahlen strong { color: var(--text-main); font-variant-numeric: tabular-nums; }
.tr-mit-zettel {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 22px;
align-items: start;
}
.tr-haupt { min-width: 0; }
.tr-zettel-spalte {
position: sticky; top: calc(var(--nav-h) + 12px);
max-height: calc(100vh - var(--nav-h) - 32px);
overflow-y: auto; overflow-x: hidden;
padding: 2px 6px 10px 2px;
}
.tr-zettel-spalte::-webkit-scrollbar { width: 6px; }
.tr-zettel-spalte::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; }
.tr-zettel-kopf {
display: flex; align-items: center; gap: 8px;
margin-bottom: 12px; padding-left: 2px;
}
.tr-zettel-kopf h3 {
font-size: 13px; font-weight: 600; letter-spacing: .02em;
color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin: 0;
}
.tr-zettel-kopf svg { width: 14px; height: 14px; }
.tr-zettel-neu {
margin-left: auto;
width: 26px; height: 26px; line-height: 1; font-size: 18px;
border-radius: 50%; cursor: pointer;
background: var(--glass-bg); color: var(--text-muted);
border: 1px solid var(--glass-border);
transition: background .15s, color .15s, transform .15s;
}
.tr-zettel-neu:hover { background: var(--accent-yellow, #f0b429); color: #1a1a1a; transform: rotate(90deg); }
.tr-zettel-stapel { display: flex; flex-direction: column; gap: 17px; }
.tr-zettel {
position: relative;
padding: 12px 13px 7px;
border-radius: 2px;
color: #2a2620;
background-color: var(--zettel-papier, #ddc96b);
background-image: linear-gradient(-45deg, rgba(0, 0, 0, .20) 0 50%, transparent 50%);
background-size: 22px 22px;
background-position: right bottom;
background-repeat: no-repeat;
box-shadow: 0 8px 18px rgba(0, 0, 0, .42), 0 1px 3px rgba(0, 0, 0, .3),
inset 0 1px 0 rgba(255, 255, 255, .28);
transform: rotate(-1.8deg);
transition: transform .18s ease, box-shadow .18s ease;
}
.tr-zettel:nth-child(2n) { transform: rotate(1.4deg); }
.tr-zettel:nth-child(3n) { transform: rotate(-.7deg); }
.tr-zettel:nth-child(5n) { transform: rotate(2.1deg); }
.tr-zettel:hover, .tr-zettel:focus-within {
transform: rotate(0) translateY(-2px);
box-shadow: 0 14px 26px rgba(0, 0, 0, .42), 0 2px 4px rgba(0, 0, 0, .25);
z-index: 2;
}
.tr-zettel.ist-gespeichert { box-shadow: 0 0 0 2px rgba(46, 204, 113, .8), 0 7px 15px rgba(0, 0, 0, .34); }
.tr-zettel.ist-neu { animation: zettelAn .32s cubic-bezier(.2, 1.3, .4, 1) both; }
.tr-zettel.ist-weg { opacity: 0; transform: rotate(-6deg) scale(.9); transition: opacity .2s, transform .2s; }
@keyframes zettelAn { from { opacity: 0; transform: rotate(-4deg) scale(.86); } }
.tr-zettel-text {
display: block; width: 100%;
background: none; border: 0; padding: 0; margin: 0;
color: inherit; font: inherit; font-size: 13.5px; line-height: 1.5;
resize: none; overflow: hidden; min-height: 3em;
overflow-wrap: anywhere; word-break: break-word;
}
.tr-zettel-text:focus { outline: none; }
.tr-zettel-text::placeholder { color: rgba(42, 38, 32, .42); }
.tr-zettel-fuss {
display: flex; align-items: center; gap: 6px;
margin-top: 6px; min-height: 18px;
opacity: 0; transition: opacity .15s;
}
.tr-zettel:hover .tr-zettel-fuss, .tr-zettel:focus-within .tr-zettel-fuss { opacity: 1; }@media (hover: none){ .tr-zettel-fuss { opacity: .6; }}
.tr-zettel-farben { display: flex; gap: 4px; }
.tr-farbe, .tr-zettel-weg, .tr-zettel-neu, .tr-zettel-teilen,
.tr-zettel-zu, .tr-zettel-griff, .tr-schub-griff {
-webkit-appearance: none; appearance: none;
-webkit-tap-highlight-color: transparent;
}
.tr-farbe {
flex: 0 0 12px; width: 12px; height: 12px; min-height: 12px;
padding: 0; border-radius: 50%; cursor: pointer;
border: 1px solid rgba(0, 0, 0, .28);
transition: transform .12s, box-shadow .12s;
}@media (hover: none){
.tr-zettel-spalte[data-auf="1"] .tr-farbe { flex-basis: 16px; width: 16px; height: 16px; min-height: 16px; }
.tr-zettel-spalte[data-auf="1"] .tr-zettel-farben { gap: 7px; }}
.tr-farbe:hover { transform: scale(1.25); }
.tr-farbe.ist-an { box-shadow: 0 0 0 2px rgba(42, 38, 32, .55); }
.tr-zettel-weg {
margin-left: auto; width: 18px; height: 18px; line-height: 1;
font-size: 15px; border: 0; border-radius: 50%; cursor: pointer;
background: none; color: rgba(42, 38, 32, .5);
}
.tr-zettel-weg:hover { background: rgba(0, 0, 0, .14); color: #a33; }
.tr-zettel-leer {
font-size: 12px; line-height: 1.55; color: var(--text-muted);
padding: 10px 2px; margin: 0;
}
.tr-zettel-gelb  { --zettel-papier: #ddc96b; }
.tr-zettel-rosa  { --zettel-papier: #e0a8ba; }
.tr-zettel-blau  { --zettel-papier: #9cc0dd; }
.tr-zettel-gruen { --zettel-papier: #a8ce9c; }
.tr-zettel-lila  { --zettel-papier: #bda9d8; }
.tr-farbe-gelb  { background: #ddc96b; }
.tr-farbe-rosa  { background: #e0a8ba; }
.tr-farbe-blau  { background: #9cc0dd; }
.tr-farbe-gruen { background: #a8ce9c; }
.tr-farbe-lila  { background: #bda9d8; }
[data-theme="light"] .tr-zettel-gelb  { --zettel-papier: #fff09f; }
[data-theme="light"] .tr-zettel-rosa  { --zettel-papier: #ffd0dc; }
[data-theme="light"] .tr-zettel-blau  { --zettel-papier: #cfe6f7; }
[data-theme="light"] .tr-zettel-gruen { --zettel-papier: #d6f0c9; }
[data-theme="light"] .tr-zettel-lila  { --zettel-papier: #e4d5f7; }
[data-theme="light"] .tr-zettel {
box-shadow: 0 6px 13px rgba(0, 0, 0, .17), 0 1px 3px rgba(0, 0, 0, .11);
background-image: linear-gradient(-45deg, rgba(0, 0, 0, .13) 0 50%, transparent 50%);
}
[data-theme="light"] .tr-zettel:hover,
[data-theme="light"] .tr-zettel:focus-within { box-shadow: 0 13px 24px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .12); }
.content-area:has(.tr-kennzahlen):has(.tr-zettel-spalte) { max-width: 1340px; }
.tr-zettel-griff, .tr-zettel-zu, .tr-zettel-hg { display: none; }@media (max-width: 1080px){
.tr-mit-zettel { grid-template-columns: minmax(0, 1fr); gap: 0; }
.tr-zettel-spalte {
position: fixed; right: 14px; left: auto;
top: auto;
bottom: calc(80px + env(safe-area-inset-bottom, 0px));
z-index: 88;
width: 132px; height: 96px;
margin: 0; padding: 0; border: 0; max-height: none; overflow: visible;
}
.tr-zettel-spalte:not([data-auf="1"]) .tr-zettel-kopf,
.tr-zettel-spalte:not([data-auf="1"]) .tr-zettel-leer { display: none; }
.tr-zettel-spalte:not([data-auf="1"]) .tr-zettel-stapel {
display: block; position: relative; width: 100%; height: 100%;
pointer-events: none;
}
.tr-zettel-spalte:not([data-auf="1"]) .tr-zettel-stapel > .tr-zettel {
position: absolute; inset: 0; margin: 0;
padding: 9px 10px 8px; overflow: hidden;
}
.tr-zettel-spalte:not([data-auf="1"]) .tr-zettel-stapel > .tr-zettel:nth-child(1) { transform: rotate(-3deg);                        z-index: 3; }
.tr-zettel-spalte:not([data-auf="1"]) .tr-zettel-stapel > .tr-zettel:nth-child(2) { transform: rotate(2.6deg) translate(-6px, 5px);  z-index: 2; }
.tr-zettel-spalte:not([data-auf="1"]) .tr-zettel-stapel > .tr-zettel:nth-child(3) { transform: rotate(-1deg) translate(6px, 9px);    z-index: 1; }
.tr-zettel-spalte:not([data-auf="1"]) .tr-zettel-stapel > .tr-zettel:nth-child(n+4) { display: none; }
.tr-zettel-spalte:not([data-auf="1"]) .tr-zettel-text {
font-size: 10.5px; line-height: 1.34; min-height: 0;
height: auto !important;
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
overflow: hidden;
}
.tr-zettel-spalte:not([data-auf="1"]) .tr-zettel-fuss,
.tr-zettel-spalte:not([data-auf="1"]) .tr-zettel-kopfzeile { display: none; }
.tr-zettel-park {
display: block; position: absolute; z-index: 6;
left: -13px; top: 50%; transform: translateY(-50%);
width: 22px; height: 40px; padding: 0; cursor: pointer;
border: 1px solid var(--glass-border); border-right: 0;
border-radius: 10px 0 0 10px;
background: var(--glass-bg); color: var(--text-muted);
-webkit-appearance: none; appearance: none;
-webkit-tap-highlight-color: transparent;
}
.tr-zettel-park::before {
content: '›'; display: block; font-size: 15px; line-height: 38px; text-align: center;
}
.tr-zettel-spalte[data-park="1"] .tr-zettel-park::before { content: '‹'; }
.tr-zettel-spalte[data-auf="1"] .tr-zettel-park { display: none; }
.tr-zettel-spalte { transition: transform .28s cubic-bezier(.3, .9, .3, 1); }
.tr-zettel-spalte[data-park="1"]:not([data-auf="1"]) {
transform: translateX(calc(100% - 30px));
}
.tr-zettel-griff {
display: block; position: absolute; inset: -8px; z-index: 5;
background: none; border: 0; padding: 0; cursor: pointer;
border-radius: 12px; -webkit-tap-highlight-color: transparent;
}
.tr-zettel-griff:active + .tr-zettel-leer,
.tr-zettel-spalte:not([data-auf="1"]):active .tr-zettel-stapel > .tr-zettel:nth-child(1) {
transform: rotate(-3deg) scale(.96);
}
.tr-zettel-spalte[data-park="1"] .tr-zettel-zahl:not(:empty) { left: auto; right: 4px; top: -7px; }
.tr-zettel-zahl:not(:empty) {
position: absolute; top: -5px; left: -5px;
min-width: 19px; height: 19px; padding: 0 5px;
display: flex; align-items: center; justify-content: center;
border-radius: 10px; background: var(--accent, #3b82f6); color: #fff;
font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.tr-zettel-spalte.ist-leer:not([data-auf="1"]) .tr-zettel-griff {
border: 2px dashed var(--glass-border);
background: var(--glass-bg);
transform: rotate(-3deg);
}
.tr-zettel-spalte.ist-leer:not([data-auf="1"]) .tr-zettel-griff::after {
content: '+'; position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 26px; color: var(--text-muted);
}
.tr-zettel-spalte[data-auf="1"] {
position: fixed; inset: auto 0 0 0;
width: auto; height: auto; max-height: 78vh;
z-index: 121; overflow-y: auto;
background: var(--bg-panel, #141418);
border-top: 1px solid var(--glass-border);
border-radius: 18px 18px 0 0;
box-shadow: 0 -12px 34px rgba(0, 0, 0, .5);
padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px));
animation: zettelBlatt .28s cubic-bezier(.25, .9, .3, 1) both;
}
@keyframes zettelBlatt { from { transform: translateY(100%); } }
.tr-zettel-spalte[data-auf="1"] .tr-zettel-kopf { display: flex; margin-bottom: 14px; }
.tr-zettel-spalte[data-auf="1"] .tr-zettel-griff { display: none; }
.tr-zettel-spalte[data-auf="1"] .tr-zettel-stapel {
display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 17px;
}
.tr-zettel-zu {
display: block; width: 30px; height: 30px; margin-left: 8px;
font-size: 21px; line-height: 1; border-radius: 50%; cursor: pointer;
background: var(--glass-bg); color: var(--text-muted);
border: 1px solid var(--glass-border);
}
.tr-zettel-hg {
display: block; position: fixed; inset: 0; z-index: 120;
background: rgba(0, 0, 0, .5);
opacity: 0; transition: opacity .25s;
}
.tr-zettel-hg[data-an="1"] { opacity: 1; }}@media (max-width: 768px){
.tr-zettel-spalte:not([data-auf="1"]) {
bottom: calc(134px + env(safe-area-inset-bottom, 0px));
right: 16px;
}}
.tr-zettel-kopfzeile {
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
margin: -2px 0 6px; padding-bottom: 5px;
border-bottom: 1px dashed rgba(42, 38, 32, .28);
}
.tr-zettel-wer, .tr-zettel-erg {
display: inline-flex; align-items: center; gap: 4px; min-width: 0;
font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
padding: 1px 6px 1px 4px; border-radius: 7px;
background: rgba(0, 0, 0, .12); color: rgba(42, 38, 32, .82);
text-decoration: none; white-space: nowrap;
}
.tr-zettel-wer span, .tr-zettel-erg span { overflow: hidden; text-overflow: ellipsis; }
.tr-zettel-wer { max-width: 52%; }
.tr-zettel-erg { font-variant-numeric: tabular-nums; }
.tr-zettel-wer svg, .tr-zettel-erg svg {
width: 10px; height: 10px; flex: 0 0 10px;
stroke: currentColor; stroke-width: 2.2; fill: none;
}
.tr-zettel-wer:hover, .tr-zettel-erg:hover { background: rgba(0, 0, 0, .2); color: #2a2620; }
.tr-zettel-marke {
margin-left: auto;
font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
padding: 1px 6px; border-radius: 8px;
background: rgba(46, 125, 50, .9); color: #fff;
}
.tr-zettel.ist-geteilt { box-shadow: 0 0 0 2px rgba(46, 125, 50, .85), 0 8px 18px rgba(0, 0, 0, .42); }
.tr-zettel-teilen {
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
padding: 2px 7px; border-radius: 8px; cursor: pointer;
background: rgba(0, 0, 0, .13); color: rgba(42, 38, 32, .82);
border: 1px solid rgba(0, 0, 0, .18);
}
.tr-zettel-teilen:hover { background: rgba(0, 0, 0, .22); }
.tr-zettel-teilen:disabled { opacity: .5; cursor: default; }
.tr-zettel.ist-geteilt .tr-zettel-teilen { background: rgba(46, 125, 50, .9); color: #fff; border-color: transparent; }
.tr-einheit-zettel {
margin-left: 6px; width: 24px; height: 24px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 6px; cursor: pointer;
background: none; border: 1px solid var(--glass-border); color: var(--text-muted);
transition: background .15s, color .15s, border-color .15s;
}
.tr-einheit-zettel svg { width: 13px; height: 13px; }
.tr-einheit-zettel:hover { background: #ddc96b; border-color: #ddc96b; color: #2a2620; }
.tr-schub {
position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 104;
display: flex; flex-direction: column; align-items: center;
pointer-events: none;
transform: translateY(calc(-100% + 34px));
transition: transform .34s cubic-bezier(.32, .8, .3, 1);
}
.tr-schub[data-offen="1"] { transform: translateY(0); }
.tr-schub-blatt {
pointer-events: auto;
width: min(100%, 980px);
background: var(--card-bg, #1a1a1f);
border: 1px solid var(--glass-border);
border-top: 0;
border-radius: 0 0 20px 20px;
box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
padding: 18px 20px 20px;
max-height: calc(100vh - 140px);
overflow-y: auto;
}
.tr-schub-inhalt {
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 20px; align-items: start;
}
.tr-schub-teil + .tr-schub-teil {
border-left: 1px solid var(--glass-border); padding-left: 20px;
}
.tr-schub-teil h3 {
display: flex; align-items: center; gap: 6px;
font-size: 13.5px; margin: 0 0 8px;
}
.tr-schub-teil h3 svg { width: 15px; height: 15px; }
.tr-schub-teil p { font-size: 11.5px; line-height: 1.5; color: var(--text-muted); margin: 0 0 10px; }
.tr-schub-code { display: flex; gap: 14px; align-items: flex-start; }
.tr-schub-code .tr-code-bild {
flex: 0 0 auto; background: #fff; padding: 7px; border-radius: 8px; line-height: 0;
}
.tr-schub-codetext { min-width: 0; }
.tr-schub-griff {
pointer-events: auto;
display: flex; align-items: center; gap: 5px;
height: 34px; padding: 0 13px;
border: 1px solid var(--glass-border); border-top: 0;
border-radius: 0 0 14px 14px;
background: var(--card-bg, #1a1a1f); color: var(--text-muted);
box-shadow: 0 6px 14px rgba(0, 0, 0, .38);
cursor: pointer;
transition: color .16s, background .16s;
}
.tr-schub-griff:hover { color: var(--text-main); background: var(--glass-bg); }
.tr-schub-qr { fill: currentColor; fill-rule: evenodd; stroke: none; width: 17px; height: 17px; }
.tr-schub-griff:focus-visible { outline: 2px solid var(--accent-yellow, #f0b429); outline-offset: 2px; }
.tr-schub-pfeil {
width: 0; height: 0;
border-left: 4px solid transparent; border-right: 4px solid transparent;
border-top: 5px solid currentColor;
transition: transform .3s ease;
}
.tr-schub[data-offen="1"] .tr-schub-pfeil { transform: rotate(180deg); }
.tr-schub[data-offen="1"] .tr-schub-griff { color: var(--text-main); }
.tr-schub-hg {
position: fixed; inset: 0; z-index: 103;
background: rgba(0, 0, 0, .45);
opacity: 0; transition: opacity .3s;
}
.tr-schub-hg[data-an="1"] { opacity: 1; }
.page-header.tr-kopf-luft { padding-top: 22px; }
.tr-schub .tr-treffer {
position: static; width: 100%; margin-top: 8px; box-shadow: none;
max-height: 240px;
}@media (max-width: 760px){
.tr-schub-inhalt { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.tr-schub-teil + .tr-schub-teil {
border-left: 0; padding-left: 0;
border-top: 1px solid var(--glass-border); padding-top: 16px;
}
.tr-schub-blatt { border-radius: 0 0 16px 16px; padding: 14px 15px 16px; }
.tr-schub-code { gap: 11px; }}
.liga-melden { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }
.liga-melden-zeile {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-radius: 10px;
background: var(--element-bg); border: 1px solid var(--border);
}
.liga-melden-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; }
.liga-sieger { font-size: 15px; margin: 0 0 14px; }
.liga-tab tr.liga-dabei td { background: rgba(240, 180, 41, .07); }
.liga-tab tr.liga-dabei td:first-child { box-shadow: inset 3px 0 0 var(--accent-yellow, #f0b429); }
.liga-baum { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.liga-baum-runde {
flex: 1 0 190px; min-width: 190px; max-width: 360px;
display: flex; flex-direction: column; gap: 10px;
}
.liga-baum-runde h3 {
font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
color: var(--text-muted); margin: 0 0 2px;
}
.liga-partie {
border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
background: var(--element-bg);
}
.liga-partie.ist-fertig { border-color: rgba(240, 180, 41, .35); }
.liga-partie-zeile {
display: flex; align-items: center; gap: 8px;
padding: 7px 10px; font-size: 12px;
color: var(--text-muted);
}
.liga-partie-zeile + .liga-partie-zeile { border-top: 1px solid var(--border); }
.liga-partie-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liga-partie-wert { font-variant-numeric: tabular-nums; font-size: 11.5px; }
.liga-partie-zeile.ist-sieger { color: var(--text-main); font-weight: 700; }
.liga-partie-zeile.ist-sieger .liga-partie-name::after { content: ' ▸'; color: var(--accent-yellow, #f0b429); }
.lb-baum {
--lb-h: 62px;
--lb-g: 14px;
--lb-sp: 46px;
--lb-linie: var(--border-light, #4a4a56);
display: flex; align-items: flex-start;
gap: var(--lb-sp);
min-width: max-content;
padding: 4px 2px 10px;
}
.lb-runde { display: flex; flex-direction: column; }
.lb-runde-kopf {
font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: var(--text-muted); text-align: center;
padding: 5px 10px; margin-bottom: 12px;
background: var(--element-bg); border-radius: 20px; white-space: nowrap;
}
.lb-spalte {
display: flex; flex-direction: column;
padding-top: calc((var(--p) - 1) / 2 * (var(--lb-h) + var(--lb-g)));
gap: calc(var(--p) * (var(--lb-h) + var(--lb-g)) - var(--lb-h));
}
.lb-partie {
position: relative;
width: 216px; height: var(--lb-h);
display: flex; flex-direction: column;
background: var(--bg-panel); border: 1px solid var(--border);
border-radius: 9px;
}
.lb-partie > .lb-zeile:first-child { border-radius: 8px 8px 0 0; }
.lb-partie > .lb-zeile:last-child  { border-radius: 0 0 8px 8px; }
.lb-partie.ist-offen  { border-style: dashed; }
.lb-partie.ist-freilos { opacity: .72; }
.lb-partie::after {
content: ''; position: absolute; top: 50%;
right: calc(-1 * var(--lb-sp) / 2 - 1px);
width: calc(var(--lb-sp) / 2);
border-top: 2px solid var(--lb-linie);
}
.lb-spalte > .lb-partie:nth-child(odd):not(:last-child)::after {
height: calc(var(--p) * (var(--lb-h) + var(--lb-g)));
border-right: 2px solid var(--lb-linie);
border-top-right-radius: 8px;
}
.lb-partie::before {
content: ''; position: absolute; top: 50%;
left: calc(-1 * var(--lb-sp) / 2 - 1px);
width: calc(var(--lb-sp) / 2);
border-top: 2px solid var(--lb-linie);
}
.lb-runde:first-child .lb-partie::before { display: none; }
.lb-runde.ist-pokal   .lb-partie::after  { display: none; }
.lb-zeile {
flex: 1; display: flex; align-items: center; gap: 8px;
padding: 0 10px; font-size: 12px; min-width: 0;
color: var(--text-muted);
}
.lb-zeile + .lb-zeile { border-top: 1px solid var(--border); }
.lb-setz {
flex: 0 0 16px; text-align: center;
font-size: 9px; font-weight: 800; color: var(--text-dim, var(--text-muted));
font-variant-numeric: tabular-nums;
}
.lb-name {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: inherit; text-decoration: none;
}
a.lb-name:hover { text-decoration: underline; }
.lb-wert {
flex: 0 0 auto; font-size: 12px; font-weight: 800;
font-variant-numeric: tabular-nums; font-family: 'Space Grotesk', sans-serif;
}
.lb-zeile.ist-sieger { color: var(--text-main); font-weight: 700; background: rgba(240, 180, 41, .09); }
.lb-zeile.ist-sieger .lb-wert { color: var(--accent-yellow, #f0b429); }
.lb-zeile.ist-raus { opacity: .5; }
.lb-zeile.ist-leer { font-style: italic; opacity: .45; }
.lb-pokal-karte { border-color: rgba(240, 180, 41, .45); }
.lb-pokal-karte .lb-zeile { font-size: 13px; }
.lb-karte-huelle { margin-top: 14px; }
.lb-schiene {
overflow-x: auto; overflow-y: hidden;
padding: 10px 14px;
background: var(--element-bg); border: 1px solid var(--border);
border-radius: var(--rs, 12px);
scrollbar-width: thin;
overscroll-behavior-x: contain;
}
.lb-schiene:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-schiene::-webkit-scrollbar { height: 8px; }
.lb-schiene::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; }
.lb-hinweis { font-size: 10.5px; color: var(--text-muted); margin-top: 6px; padding-left: 2px; }
.lb-saison { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.lb-stand {
display: flex; align-items: baseline; gap: 8px;
font-size: 13px; color: var(--text-muted);
}
.lb-stand strong { color: var(--text-main); font-size: 15px; }
.lb-sieger {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px; border-radius: 14px;
background: linear-gradient(135deg, rgba(240, 180, 41, .16), rgba(240, 180, 41, .04));
border: 1px solid rgba(240, 180, 41, .35);
}
.lb-pokal { font-size: 30px; line-height: 1; }
.lb-sieger-klein { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.lb-sieger-name { font-size: 19px; font-weight: 800; }
.lb-regeln { margin: 0; padding-left: 18px; font-size: 11.5px; line-height: 1.65; color: var(--text-muted); }
.lb-regeln li + li { margin-top: 6px; }
.lb-regeln strong { color: var(--text-main); }
.content-area:has(.lb-baum) { max-width: 1500px; }@media (max-width: 600px){
.lb-baum { --lb-h: 56px; --lb-sp: 34px; }
.lb-partie { width: 176px; }
.lb-zeile { font-size: 11.5px; padding: 0 8px; }
.lb-schiene { padding: 8px; }}
.dbg {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
font: 500 11.5px/1.45 'Inter', 'Segoe UI', Roboto, sans-serif;
color: var(--text-muted);
background: #0d0d12; border-top: 1px solid #2a2a34;
box-shadow: 0 -6px 22px rgba(0, 0, 0, .5);
}
.dbg-griff {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 6px 14px; cursor: pointer;
background: none; border: 0; color: inherit; font: inherit; text-align: left;
}
.dbg-griff:hover { background: rgba(255, 255, 255, .04); }
.dbg-punkt { width: 7px; height: 7px; border-radius: 50%; background: #4ebd35; flex: 0 0 auto; }
.dbg.dbg-warnt .dbg-punkt { background: #e0492f; }
.dbg-z {
font-variant-numeric: tabular-nums; font-size: 11px;
padding: 1px 7px; border-radius: 8px; background: rgba(255, 255, 255, .06);
}
.dbg-z.dbg-rot { background: rgba(224, 73, 47, .22); color: #ff9b86; }
.dbg-pfeil {
margin-left: auto; width: 0; height: 0;
border-left: 4px solid transparent; border-right: 4px solid transparent;
border-bottom: 5px solid currentColor; transition: transform .2s;
}
.dbg[data-offen="1"] .dbg-pfeil { transform: rotate(180deg); }
.dbg-blatt { display: none; max-height: 56vh; overflow-y: auto; padding: 4px 14px 14px; }
.dbg[data-offen="1"] .dbg-blatt { display: block; }
.dbg-reihe { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dbg-kachel {
flex: 1 1 92px; padding: 7px 10px; border-radius: 8px;
background: rgba(255, 255, 255, .04); border: 1px solid #22222c;
}
.dbg-kachel b { display: block; font-size: 15px; color: #e8e8f0; font-variant-numeric: tabular-nums; }
.dbg-kachel span { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; }
.dbg-block { margin-bottom: 12px; }
.dbg-block h4 {
font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: #8a8a99; margin: 0 0 6px;
}
.dbg-hinweis { font-size: 10.5px; color: #7a7a88; margin: 4px 0 0; }
.dbg-zeile {
display: flex; align-items: baseline; gap: 8px;
padding: 4px 8px; border-radius: 6px;
background: rgba(255, 255, 255, .03);
}
.dbg-zeile + .dbg-zeile { margin-top: 3px; }
.dbg-zeile.dbg-rot { background: rgba(224, 73, 47, .12); }
.dbg-marke {
flex: 0 0 auto; font-size: 9px; font-weight: 800; letter-spacing: .05em;
text-transform: uppercase; padding: 1px 6px; border-radius: 7px;
background: rgba(255, 255, 255, .08); color: #a8a8b8;
}
.dbg-marke.dbg-gelb { background: rgba(240, 180, 41, .22); color: #f0b429; }
.dbg-zeile code {
flex: 1; min-width: 0; font-size: 10.5px; color: #c8c8d4;
font-family: ui-monospace, 'SF Mono', Menlo, monospace;
overflow-wrap: anywhere;
}
.dbg-ort { flex: 0 0 auto; font-size: 10px; color: #7a7a88; font-variant-numeric: tabular-nums; }
.dbg-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 10.5px; padding-top: 8px; border-top: 1px solid #22222c; }
.dbg-fuss code { color: #c8c8d4; font-family: ui-monospace, Menlo, monospace; }
.dbg-aus {
padding: 4px 11px; border-radius: 8px; cursor: pointer; font-size: 10.5px; font-weight: 600;
background: rgba(224, 73, 47, .16); color: #ff9b86; border: 1px solid rgba(224, 73, 47, .3);
}
.dbg-aus:hover { background: rgba(224, 73, 47, .28); }
body:has(.dbg) { padding-bottom: 34px; }@media (max-width: 768px){
.dbg { bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
.dbg-blatt { max-height: 46vh; }}
.lv-leiste {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 10px 12px; margin-bottom: 16px;
border: 1px dashed var(--accent, #3b82f6); border-radius: 12px;
background: rgba(59, 130, 246, .06);
}
.lv-marke {
font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
padding: 3px 9px; border-radius: 9px; background: var(--accent, #3b82f6); color: #fff;
}
.lv-knoepfe { display: flex; flex-wrap: wrap; gap: 5px; }
.lv-rechts { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
.lv-knopf {
font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 8px;
background: var(--glass-bg); color: var(--text-muted);
border: 1px solid var(--glass-border); text-decoration: none; white-space: nowrap;
}
.lv-knopf:hover { color: var(--text-main); background: var(--element-bg); }
.lv-knopf.ist-an { background: var(--accent, #3b82f6); color: #fff; border-color: transparent; }
.lv-knopf.lv-raus { color: var(--accent-red, #e0492f); border-color: rgba(224, 73, 47, .35); }
.lv-hinweis { flex: 1 0 100%; font-size: 10.5px; color: var(--text-muted); margin: 2px 0 0; }
.lv-einstieg {
max-width: 620px; margin: 18px 0 0; padding: 12px 14px;
border: 1px dashed var(--glass-border); border-radius: 12px;
background: var(--element-bg); text-align: left;
}
.lv-einstieg-kopf {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
font-size: 11.5px; color: var(--text-muted); margin-bottom: 9px;
}
.lv-einstieg .lv-knoepfe { display: flex; flex-wrap: wrap; gap: 5px; }
.lv-einstieg .lv-hinweis { margin-top: 8px; }
.empty-state + .lv-einstieg { margin-left: auto; margin-right: auto; }
.smart-badge {
display: inline-flex; align-items: center;
padding: 2px 7px; border-radius: 7px;
font-size: 9px; font-weight: 800; letter-spacing: .08em;
background: linear-gradient(135deg, var(--accent, #6600ff), #3b82f6);
color: #fff;
}
.smart-zeile {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 12px; border-radius: var(--r);
background: var(--element-bg); border: 1px solid var(--border);
}
.smart-zeile > span:nth-child(2) { flex: 1; min-width: 150px; font-size: 12.5px; color: var(--text-muted); }
.smart-marke {
padding: 2px 8px; border-radius: 7px;
font-size: 9px; font-weight: 800; letter-spacing: .08em;
background: linear-gradient(135deg, var(--accent, #6600ff), #3b82f6); color: #fff;
}
.smart-frage {
padding: 12px 14px; border-radius: var(--r);
background: rgba(240,180,41,.07); border: 1px solid rgba(240,180,41,.4);
}
.smart-frage-kopf { margin: 0 0 10px; font-size: 13.5px; font-weight: 700; color: var(--accent-yellow, #f0b429); }
.smart-frage-satz { margin: 10px 0 12px; font-size: 11.5px; line-height: 1.6; color: var(--text-muted); }
.smart-frage-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.smart-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.smart-tab th, .smart-tab td { padding: 5px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.smart-tab th:first-child { text-align: left; font-weight: 600; color: var(--text-muted); }
.smart-tab tr:first-child th { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.smart-tab tr + tr { border-top: 1px solid var(--border); }
.smart-tab-anders td { color: var(--accent-yellow, #f0b429); font-weight: 700; }
.smart-marke-scan { background: linear-gradient(135deg, #f0b429, #b47b12); color: #1a1408; }
.liga-melden-fehlt { flex-wrap: wrap; }
.liga-melden-hinweis {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11.5px; line-height: 1.5; color: var(--accent-yellow, #f0b429);
}
.liga-melden-hinweis svg { width: 14px; height: 14px; flex-shrink: 0; }
.liga-text-klein { font-size: 12.5px; color: var(--text-muted); }
.liga-text-klein strong { color: var(--text-main); }
.mh-zeile {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 12px; margin-bottom: 8px;
background: var(--card-bg, var(--element-bg)); color: inherit; text-decoration: none;
border: 1px solid var(--border); border-radius: var(--r);
transition: border-color .15s, background .15s;
}
.mh-zeile:hover { border-color: var(--accent-blue, #38bdf8); }
.mh-zeile.ist-neu { border-left: 2px solid var(--accent-blue, #38bdf8); background: rgba(56,189,248,.05); }
.mh-kopf { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.mh-text { font-size: 12.5px; line-height: 1.5; margin-top: 3px; overflow-wrap: anywhere; }
.mh-fuss { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.mh-zahl {
display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
background: var(--accent-blue, #38bdf8); color: #04121c;
}
.mh-pfeil { flex: none; align-self: center; color: var(--text-muted); }
.mh-pfeil svg { width: 15px; height: 15px; }
.tr-gelesen { color: var(--accent-green, #22c55e); }
.tr-notiz-verlauf {
margin: 8px 0 2px 2px; padding-left: 9px;
border-left: 2px solid var(--border);
}
.tr-antwort + .tr-antwort { margin-top: 7px; }
.tr-antwort-wer { font-size: 11px; font-weight: 700; margin-right: 5px; }
.tr-antwort.ist-meine .tr-antwort-wer { color: var(--accent-blue, #38bdf8); }
.tr-antwort.ist-neu { border-left: 2px solid var(--accent-blue, #38bdf8); margin-left: -11px; padding-left: 9px; }
.tr-antwort-text { font-size: 12px; line-height: 1.5; margin-top: 2px; overflow-wrap: anywhere; }
.tr-antwort-hin {
display: inline-block; margin-top: 7px; font-size: 11px; font-weight: 600;
color: var(--accent-blue, #38bdf8); text-decoration: none;
}
.tr-antwort-hin:hover { text-decoration: underline; }
.ev-tribuene {
padding: 12px 14px 14px;
margin-bottom: 16px;
background: var(--element-bg);
border: 1px solid var(--border);
border-left: 3px solid var(--accent, #007bff);
border-radius: var(--r, 10px);
}
.ev-trib-kopf {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
margin-bottom: 10px; padding-bottom: 8px;
border-bottom: 1px solid var(--border);
}
.ev-trib-name {
display: flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 800; letter-spacing: -.01em;
}
.ev-trib-name svg { width: 14px; height: 14px; color: var(--accent, #007bff); }
.ev-trib-fakten {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
margin-left: auto; font-size: 11px; color: var(--text-muted);
font-family: 'Space Grotesk', ui-monospace, monospace;
}
.ev-trib-soll {
padding: 1px 7px; border-radius: 999px;
background: rgba(0,123,255,.12); color: var(--accent, #007bff);
font-weight: 700;
}@media (max-width: 560px){
.ev-trib-fakten { margin-left: 0; width: 100%; }}
.ss-tribuene { margin-bottom: 14px; }
.ss-tribuene:last-child { margin-bottom: 0; }
.ss-tribuene .ev-trib-kopf { margin-bottom: 8px; padding-bottom: 6px; }
.ss-tribuene .ev-trib-name { font-size: 13px; }
.ev-podium-titel {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
margin: 16px 0 6px;
font-size: 13px; font-weight: 800;
}
.ev-podium-titel .ev-trib-soll { font-size: 10px; }
.ev-podium-feld {
margin-left: auto;
font-size: 11px; font-weight: 500; color: var(--text-muted);
font-family: 'Space Grotesk', ui-monospace, monospace;
}
.ev-podium + .ev-podium-titel { margin-top: 22px; }
.pf-zone {
flex: 1 1 140px; min-width: 130px;
padding: 10px 12px; border-radius: var(--r, 10px);
border: 1px solid var(--border);
}
.pf-zone-gut  { border-color: rgba(34,197,94,.4);  background: rgba(34,197,94,.06); }
.pf-zone-krit { border-color: rgba(231,76,47,.35); background: rgba(231,76,47,.05); }
.pf-zone-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.pf-zone-wert { font-size: 20px; font-weight: 800; font-family: 'Space Grotesk', ui-monospace, monospace; margin-top: 2px; }
.pf-zone-wert span { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.pf-zone-gut  .pf-zone-wert { color: var(--accent-green, #22c55e); }
.pf-zone-krit .pf-zone-wert { color: var(--accent-red, #e0492f); }
.pf-zone-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.pf-baender { display: flex; flex-direction: column; gap: 5px; }
.pf-band { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.pf-band-bpm { flex: 0 0 52px; text-align: right; color: var(--text-muted); font-family: 'Space Grotesk', ui-monospace, monospace; }
.pf-band-bar-huelle { flex: 1; height: 12px; background: var(--element-bg); border-radius: 6px; overflow: hidden; }
.pf-band-bar { height: 100%; border-radius: 6px; background: linear-gradient(90deg, rgba(56,189,248,.5), var(--accent, #38bdf8)); transition: width .4s ease; }
.pf-band.ist-best .pf-band-bar { background: linear-gradient(90deg, rgba(34,197,94,.55), var(--accent-green, #22c55e)); }
.pf-band-wert { flex: 0 0 74px; font-family: 'Space Grotesk', ui-monospace, monospace; font-weight: 700; }
.pf-band-wert span { font-weight: 500; color: var(--text-muted); font-size: 10px; }
.pf-band.ist-best .pf-band-wert { color: var(--accent-green, #22c55e); }
.grp-news-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
background: var(--accent-red, #ef4444); color: #fff;
font-size: 10.5px; font-weight: 800; line-height: 1;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.grp-news-badge.is-corner { position: absolute; top: 10px; right: 10px; z-index: 2; box-shadow: 0 0 0 2px var(--bg-panel, var(--bg)); }
.grp-news-badge.is-btn { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9.5px; box-shadow: 0 0 0 2px var(--bg); }
.ue-knopf { background: none; border: 0; padding: 0 2px; margin-left: 4px; font: inherit; font-size: 10.5px; color: var(--accent); cursor: pointer; text-decoration: underline dotted; white-space: nowrap; }
.ue-knopf.an { color: var(--text-muted); }
.ue-knopf:hover { opacity: .8; }
.ki-bericht-text p { margin: 0 0 .55em; font-size: 13px; line-height: 1.62; }
.ki-bericht-text p:last-child { margin-bottom: 0; }
.ki-marke { font-size: 9.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-left: 4px; }
.coach-nacht { margin-bottom: 14px; padding: 12px 14px; background: var(--bg-panel); border: 1px solid var(--border); border-left: 3px solid var(--accent, #6600ff); border-radius: var(--r); }
.coach-nacht > summary, .coach-nacht-kopf { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; list-style: none; }
.coach-nacht > summary::-webkit-details-marker { display: none; }
.coach-nacht > summary svg, .coach-nacht-kopf svg { width: 14px; height: 14px; }
.coach-nacht .coach-nacht-zeit { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 11px; }
.coach-nacht .ki-bericht-text { margin-top: 8px; }
.post-card { touch-action: manipulation; }
.carousel-mesh { touch-action: pan-y; }
.post-card img.post-image, .post-card img.carousel-slide { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.lk { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.lk[hidden] { display: none; }
.lk.lk-laedt { opacity: .6; transition: opacity .15s; }
.lk-leiste { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; color: var(--text-muted); }
.lk-disz { font-size: 16px; font-weight: 700; color: var(--text-main); margin-right: 2px; }
.lk-leiste > * { order: 3; }
.lk-leiste > .lk-disz, .lk-leiste > .lk-wahl-disz { order: 1; }
.lk-leiste > .lk-hilfe { order: 4; }
.lk-wahl { appearance: none; -webkit-appearance: none; min-width: 0; max-width: 100%; border: 1px solid var(--border); border-radius: 999px; padding: 6px 28px 6px 12px;
background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b8d9c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 11px center;
color: var(--text-main); font-size: 13px; font-family: inherit; line-height: 1.3; cursor: pointer; text-overflow: ellipsis; }
.lk-wahl:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lk-wahl-disz { font-weight: 700; font-size: 14px; }
.lk-chip { border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; font-family: inherit; }
.lk-hilfe { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); font-weight: 700; cursor: pointer; font-family: inherit; line-height: 1; }
.lk-abschnitt + .lk-abschnitt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.lk-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 700; margin: 0 0 8px; }
.lk-gross { font-size: 36px; font-weight: 800; line-height: 1.1; color: var(--text-main); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.lk-gross small { font-size: 15px; font-weight: 600; color: var(--text-muted); letter-spacing: 0; }
.lk-unter { font-size: 13.5px; color: var(--text-dim); line-height: 1.5; margin: 4px 0 0; }
.lk-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.lk-kachel { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.lk-ka-titel { font-size: 11.5px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lk-ka-wert { font-size: 19px; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1.25; }
.lk-ka-zusatz { font-size: 12px; color: var(--text-dim); line-height: 1.4; }
.lk-kachel.lk-auf .lk-ka-wert { color: var(--accent-green); }
.lk-kachel.lk-ab .lk-ka-wert { color: var(--accent-red); }
.lk-kachel.lk-offen .lk-ka-wert { color: var(--text-muted); font-size: 15px; font-weight: 600; line-height: 1.6; }
.lk-kachel.lk-erreicht .lk-ka-zusatz { color: var(--accent-green); font-weight: 600; }
.lk-kachel .lk-link { align-self: flex-start; font-size: 12px; margin-top: 3px; padding: 0; }
.lk-zielform { margin-top: 10px; font-size: 13px; line-height: 2; }
.lk-zielform[hidden] { display: none; }
.lk-mehr { margin-top: 10px; font-size: 13px; }
.lk-mehr summary { cursor: pointer; color: var(--text-dim); }
.lk-mehr p { font-size: 13px; color: var(--text-dim); line-height: 1.55; margin: 6px 0 0; }
.lk-text { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; margin: 6px 0 0; }
.lk-leer { font-size: 13.5px; color: var(--text-muted); margin: 0; }
.lk-neu { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: var(--accent-yellow); color: #1a1405; font-weight: 800; }
.lk-link { border: 0; background: none; color: var(--accent); padding: 0 2px; font-size: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-family: inherit; }
.lk-uebung .lk-link, .lk-fuss .lk-link, .lk-kfuss .lk-link { font-size: 13px; }
.lk-zielform label { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-dim); }
.lk-zielwert { width: 110px; display: inline-block; }
.lk-meldung { color: var(--accent-red); font-size: 12.5px; margin-left: 8px; }
.lk-kurve { display: block; width: 100%; height: 160px; margin-top: 10px; }
.lk-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.lk-legende span { display: inline-flex; align-items: center; gap: 6px; }
.lk-legende i { display: inline-block; }
.lk-l-punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); }
.lk-l-wk { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent); box-sizing: border-box; }
.lk-l-linie { width: 16px; height: 3px; border-radius: 2px; background: var(--accent); }
.lk-hinweis { font-size: 13px; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; line-height: 1.5; margin: 0 0 10px; }
.lk-karte { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); margin-top: 8px; overflow: hidden; }
.lk-karte.offen { border-color: var(--accent); }
.lk-einleitung { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: -2px 0 8px; }
.lk-kkopf { display: block; position: relative; width: 100%; text-align: left; border: 0; background: none; padding: 12px 38px 12px 14px; cursor: pointer; color: inherit; font-family: inherit; }
.lk-kkopf::after { content: ''; position: absolute; right: 16px; top: 17px; width: 7px; height: 7px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform .15s; }
.lk-karte.offen .lk-kkopf::after { transform: rotate(-135deg); top: 21px; }
.lk-kzeile { display: flex; justify-content: space-between; gap: 2px 12px; align-items: baseline; flex-wrap: wrap; }
.lk-ktitel { flex: 1 1 210px; min-width: 0; font-size: 15.5px; font-weight: 700; color: var(--text-main); line-height: 1.35; }
.lk-ringe { font-size: 13px; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lk-kkurz { display: block; font-size: 13.5px; font-weight: 400; color: var(--text-dim); line-height: 1.5; margin-top: 4px; }
.lk-kinhalt { padding: 0 14px 14px; }
.lk-kinhalt[hidden] { display: none; }
.lk-kinhalt > .lk-bild { margin: 0 0 12px; }
.lk-bild { margin: 12px 0 0; }
.lk-frage { border-top: 1px solid var(--border); }
.lk-frage summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 11px 0; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; color: var(--text-main); }
.lk-frage summary::-webkit-details-marker { display: none; }
.lk-frage summary::before { content: '+'; flex: 0 0 16px; text-align: center; color: var(--accent); font-weight: 700; font-size: 17px; line-height: 1; }
.lk-frage[open] summary::before { content: '–'; }
.lk-antwort { padding: 0 0 12px 24px; }
.lk-antwort p { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; margin: 0 0 6px; }
.lk-antwort b { color: var(--text-main); font-weight: 600; }
.lk-antwort .lk-uname { color: var(--text-main); font-weight: 700; }
.lk-kinhalt > .lk-kfuss { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 0; }
.lk-bild svg { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; color: var(--text-main); }
.lk-bild figcaption { font-size: 12px; color: var(--text-muted); line-height: 1.45; margin-top: 6px; text-align: center; }
.lk-block { margin-top: 12px; }
.lk-block h5 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; margin: 0 0 4px; }
.lk-block p { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; margin: 0 0 6px; }
.lk-punkte { letter-spacing: 2px; color: var(--text-muted); font-weight: 400; }
.lk-swort { color: var(--text-dim); font-weight: 400; }
.lk-kfuss { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 12px; font-size: 13px; }
.lk-fuss { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 10px 2px 0; }
.lk-gut { margin-top: 14px; }
.lk-gut h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent-green); font-weight: 700; margin: 0 0 6px; }
.lk-gut ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.lk-gut li { font-size: 13.5px; color: var(--text-main); padding-left: 18px; position: relative; line-height: 1.5; }
.lk-gut li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-green); font-weight: 700; }
.lk-alle { margin-top: 14px; font-size: 13px; }
.lk-alle summary { cursor: pointer; color: var(--text-dim); }
.lk-alle ul { list-style: none; margin: 8px 0 0; padding: 0; }
.lk-alle li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px; padding: 5px 0; border-top: 1px solid var(--border); color: var(--text-dim); }
.lk-p-thema .lk-pmarke { color: var(--accent); }
.lk-p-ok .lk-pmarke { color: var(--accent-green); }
.lk-pwort { color: var(--text-muted); text-align: right; }
.lk-blatt { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; }
.lk-blatt-innen { background: var(--card-bg); color: var(--text-main); width: min(640px, 100%); max-height: 82vh; overflow: auto; border-radius: 16px 16px 0 0; padding: 16px 18px 24px; border: 1px solid var(--border); }
.lk-blatt-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; font-size: 15px; }
.lk-blatt dl { margin: 0; }
.lk-blatt dt { font-weight: 700; font-size: 14px; margin-top: 12px; }
.lk-blatt dd { margin: 3px 0 0; font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }@media (min-width: 700px){ .lk-blatt { align-items: center; } .lk-blatt-innen { border-radius: 16px; }}@media (max-width: 520px){
.lk { padding: 14px 12px; } .lk-gross { font-size: 32px; } .lk-ktitel { font-size: 15px; } .lk-alle li { grid-template-columns: 18px minmax(0, 1fr); } .lk-pwort { grid-column: 2; text-align: left; }
.lk-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lk-kachel:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lk-wahl { padding: 6px 26px 6px 11px; }
.lk-leiste > .lk-hilfe { order: 2; }
.lk-leiste::after { content: ''; order: 2; flex-basis: 100%; height: 0; margin: -4px 0; }
.lk-antwort { padding-left: 0; }}
.lk-blatt-tour { margin: 6px 0 0; }
.lk-fokus { border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--surface); padding: 12px 14px; }
.lk-fokus.lk-u-gewirkt { border-left-color: var(--accent-green); }
.lk-fokus.lk-u-andere { border-left-color: var(--accent-yellow); }
.lk-fkopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lk-ftitel { font-size: 16px; font-weight: 700; color: var(--text-main); line-height: 1.35; }
.lk-furteil { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap; }
.lk-u-gewirkt .lk-furteil { background: var(--accent-green); border-color: var(--accent-green); color: #04130a; }
.lk-fziel { font-size: 13.5px; color: var(--text-main); margin: 6px 0 0; line-height: 1.5; }
.lk-fziel span { color: var(--text-muted); }
.lk-freihe { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; padding: 0; }
.lk-freihe li { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 62px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); font-variant-numeric: tabular-nums; }
.lk-freihe .lk-fok { border-color: var(--accent-green); }
.lk-freihe .lk-foffen { border-style: dashed; color: var(--text-muted); }
.lk-fmarke { font-size: 13px; font-weight: 800; line-height: 1; color: var(--text-muted); }
.lk-fok .lk-fmarke { color: var(--accent-green); }
.lk-fwert { font-size: 12.5px; font-weight: 700; color: var(--text-main); text-align: center; line-height: 1.25; }
.lk-foffen .lk-fwert { font-weight: 500; color: var(--text-muted); }
.lk-fdatum { font-size: 10.5px; color: var(--text-muted); }
.lk-fuebung { font-size: 13px; color: var(--text-dim); margin: 8px 0 0; }
.lk-fmarke-an { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--accent); color: #fff; }
.lk-kfuss a.lk-link { font-size: 13px; }
.lk-eliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lk-e { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
.lk-e.offen { border-color: var(--accent); }
.lk-ekopf { display: grid; grid-template-columns: auto auto 1fr auto; gap: 4px 12px; align-items: baseline; width: 100%; text-align: left; border: 0; background: none; padding: 10px 14px; cursor: pointer; color: inherit; font-family: inherit; font-size: 13.5px; }
.lk-edatum { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lk-eerg { font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lk-eerg small { font-weight: 500; font-size: 11.5px; color: var(--text-muted); }
.lk-emarke { color: var(--text-dim); min-width: 0; }
.lk-e-ueber { color: var(--accent-green); }
.lk-etags { display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.lk-etag { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; }
.lk-etag-best { background: var(--accent-yellow); border-color: var(--accent-yellow); color: #1a1405; }
.lk-etag-auff { text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
.lk-einhalt { padding: 0 14px 14px; }
.lk-einhalt[hidden] { display: none; }
.lk-ezeile, .lk-eserien { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; margin: 0 0 6px; }
.lk-ezeile b, .lk-eserien b { color: var(--text-main); font-variant-numeric: tabular-nums; }
.lk-eserien span { color: var(--text-muted); }
.lk-ewahl { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }
.lk-ewahl .lk-chip.aktiv { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.lk-eauffiel { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
.lk-emuster { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); white-space: nowrap; vertical-align: 1px; }
.lk-em-muster { border-color: var(--accent); color: var(--accent); }
.lk-efokus { font-size: 13.5px; color: var(--text-main); background: var(--card-bg); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 10px; padding: 8px 12px; margin: 12px 0 0; line-height: 1.5; }
.lk-enmarken { display: flex; gap: 6px; flex-wrap: wrap; }
.lk-enmarken span { font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-dim); }
.lk-ehinweis { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 10px 0 0; }@media (max-width: 520px){
.lk-ekopf { grid-template-columns: auto 1fr; }
.lk-emarke { grid-column: 1 / -1; }
.lk-etags { grid-column: 1 / -1; justify-content: flex-start; }}
.lk-woche { font-size: 13px; color: var(--text-dim); margin: 0 0 8px; line-height: 1.5; }
.perf-gruppe-kopf.pg-frage { align-items: center; }
.pg-frage .pg-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.pg-frage .pg-titel { white-space: normal; font-size: 14px; }
.pg-frage .pg-fazit { font-size: 12.5px; color: var(--text-dim); font-weight: 400; line-height: 1.45; }
.pg-frage .pg-fazit:empty { display: none; }
.pg-frage .pg-plot { flex: 0 1 150px; min-width: 60px; }
.perf-hinweis-karte { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }@media (max-width: 600px){ .pg-frage .pg-plot { display: none; }}
.perf-kacheln { display: flex; gap: 8px; flex-wrap: wrap; }
.perf-raster { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 11px; table-layout: fixed; margin-top: 8px; }
.perf-raster th { font-weight: 600; color: var(--text-muted); text-align: center; padding: 2px; font-size: 10.5px; }
.perf-raster th.pr-zeile { text-align: left; width: 86px; }
.perf-raster td { text-align: center; border-radius: 6px; padding: 5px 2px; background: var(--surface); color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1.2; }
.perf-raster td small { display: block; font-size: 9px; color: var(--text-muted); }
.perf-raster td.pr-leer { background: none; color: var(--text-muted); opacity: .35; }
.perf-raster-hinweis { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; margin-top: 8px; }@media (max-width: 520px){
.perf-table th:nth-child(5), .perf-table td:nth-child(5), .perf-table th:nth-child(6), .perf-table td:nth-child(6) { display: none; }
.perf-raster { font-size: 10px; border-spacing: 2px; }
.perf-raster th.pr-zeile { width: 72px; font-size: 10px; }
.perf-raster td { padding: 5px 0; letter-spacing: -0.2px; }}
.lk-trainer { font-size: 12.5px; line-height: 1.5; color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; padding: 9px 12px; margin: 0 0 14px; }
.perf-karten-fuss { font-size: 11.5px; color: var(--text-muted); line-height: 1.5; margin-top: 10px; }
.perf-karten-fuss strong { color: var(--text-main); font-weight: 600; }
.rv-liste { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; }
.rv-zeile { display: grid; grid-template-columns: 38px minmax(0, 1fr) 54px 44px; align-items: center; gap: 8px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rv-ring { font-weight: 700; color: var(--text-main); white-space: nowrap; }
.rv-bahn { height: 12px; background: var(--surface); border-radius: 6px; overflow: hidden; }
.rv-balken { display: block; height: 100%; border-radius: 6px; }
.rv-zahl { text-align: right; font-weight: 600; color: var(--text-main); white-space: nowrap; }
.rv-anzahl { text-align: right; color: var(--text-muted); font-size: 11px; }
.perf-scheiben { display: flex; gap: 12px; justify-content: center; margin-top: 8px; }
.perf-scheiben > div { flex: 0 1 200px; min-width: 0; text-align: center; }
.perf-scheibe { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid var(--border); display: block; }
.perf-scheibe-titel { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; }
.perf-detail-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin: 18px 2px 10px; }
.perf-detail-kopf .perf-detail-titel { margin: 0; }
.perf-detail-kopf .perf-zeitraum { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.perf-detail-kopf .perf-zeitraum > span { font-size: 11px; color: var(--text-muted); }
.perf-filterleiste { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
.pg-frage .pg-bildchen { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); display: block; }
.pg-frage .pg-bildchen[hidden] { display: none; }
.ar-karte { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-areas: "bild kopf" "bild rest"; gap: 4px 22px; align-items: start; }
.ar-karte.ar-ohne-bild { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "rest"; }
.ar-kopf { grid-area: kopf; align-self: end; min-width: 0; }
.ar-rest { grid-area: rest; min-width: 0; }
.ar-rest .perf-karten-fuss { margin-top: 4px; }
.ar-bild { grid-area: bild; min-width: 0; }
.ar-bild .perf-scheibe { max-width: 340px; margin: 0 auto; }
.ar-antwort { font-size: 19px; font-weight: 800; color: var(--text-main); line-height: 1.25; margin: 0 0 4px; }
.ar-antwort:empty { display: none; }
.ar-satz { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; margin: 0 0 6px; }
.ar-satz:empty { display: none; }
.ar-hinweis { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0 0 6px; padding: 8px 10px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 8px 8px 0; }
.ar-hinweis:empty { display: none; }
.ar-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--text-muted); margin-top: 8px; justify-content: center; }
.ar-legende span { display: inline-flex; align-items: center; gap: 6px; }
.ar-legende i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.ar-l-ausr { background: #ff5040; }
.ar-l-rest { background: rgba(0,180,255,.55); }
.ar-l-keil { width: 12px !important; height: 8px !important; border-radius: 2px !important; background: rgba(255,80,64,.28); }
.ar-l-kreis { width: 9px !important; height: 9px !important; background: none; border: 1.5px dashed var(--text-main); box-sizing: border-box; }
.ar-l-rand { width: 14px !important; height: 7px !important; border-radius: 7px 7px 0 0 !important; background: rgba(255,80,64,.7); }
.ar-regler { max-width: 340px; margin: 12px auto 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.ar-regler[hidden], .ar-regler [hidden] { display: none; }
.ar-regler-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; }
.ar-regler-titel { font-size: 11.5px; color: var(--text-muted); }
.ar-regler-wert { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ar-regler-wert b { font-size: 13px; font-weight: 700; color: var(--text-main); }
.ar-regler-wert span:not(:empty)::before { content: " · "; }
.ar-regler input[type=range] { display: block; width: 100%; height: 28px; margin: 4px 0 0; padding: 0; accent-color: #ff5040; cursor: pointer; background: none; }
.ar-regler-fuss { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--text-muted); }
.ar-regler-hilfe { font-size: 11.5px; line-height: 1.45; color: var(--text-muted); margin: 8px 0 0; }
.ar-regler-auto { display: block; margin: 8px auto 0; padding: 5px 12px; min-height: 0; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ar-regler-auto:hover { background: var(--element-bg); }@media (max-width: 640px){ .ar-karte { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "bild" "rest"; gap: 10px; } .ar-kopf { align-self: start; }}
.lk { --lx-bau: #fb923c; --lx-bau-bg: rgba(251,146,60,.14); --lx-wis: #60a5fa; --lx-wis-bg: rgba(96,165,250,.13); --lx-sta: #4ade80; --lx-sta-bg: rgba(74,222,128,.13); --lx-off: var(--text-muted); --lx-off-bg: rgba(148,148,160,.12); }
[data-theme="light"] .lk { --lx-bau: #c2410c; --lx-bau-bg: #fff1e6; --lx-wis: #1d4ed8; --lx-wis-bg: #e8f0fe; --lx-sta: #15803d; --lx-sta-bg: #e7f6ec; --lx-off: #6b7280; --lx-off-bg: #f1f2f4; }
.lx-etikett { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; line-height: 1.5; color: var(--lx-off); background: var(--lx-off-bg); }
.lx-baustelle .lx-etikett { color: var(--lx-bau); background: var(--lx-bau-bg); }
.lx-wissen .lx-etikett { color: var(--lx-wis); background: var(--lx-wis-bg); }
.lx-staerke .lx-etikett, .lk-gut .lx-etikett { color: var(--lx-sta); background: var(--lx-sta-bg); }
.lk-karte.lx-baustelle { border-left: 4px solid var(--lx-bau); }
.lk-karte.lx-wissen { border-left: 4px solid var(--lx-wis); }
.lk-karte .lk-kkopf > .lx-etikett { margin-bottom: 6px; }
.lk-ktun { display: block; font-size: 13px; color: var(--text-main); line-height: 1.45; margin-top: 6px; }
.lk-ktun b { color: var(--lx-bau); font-weight: 700; }
.lk-karte.lx-wissen .lk-ktun b { color: var(--lx-wis); }
.lk-gut li { padding-left: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lk-gut li::before { content: none; }
.lk-kacheln { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lx-linien { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.lx-linie { min-width: 32px; min-height: 28px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 8px; background: none; color: var(--text-dim); font: inherit; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.lx-linie.aktiv { background: var(--accent); border-color: var(--accent); color: #fff; }
.lx-linie:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }@media (pointer: coarse){ .lx-linie { min-height: 36px; min-width: 40px; }}
.lx-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px; }
.lx-karte { border: 1px solid var(--border); border-left: 4px solid var(--lx-off); border-radius: 12px; background: var(--surface); padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lx-karte.lx-baustelle { border-left-color: var(--lx-bau); }
.lx-karte.lx-wissen { border-left-color: var(--lx-wis); }
.lx-karte.lx-staerke { border-left-color: var(--lx-sta); }
.lx-kopf { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lx-titel { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.lx-urteil { font-size: 15px; font-weight: 700; color: var(--text-main); line-height: 1.4; margin: 0; text-wrap: pretty; }
.lx-ursache { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 0; }
.lx-fortschritt { font-size: 12px; color: var(--text-muted); margin: 0; font-variant-numeric: tabular-nums; }
.lx-tun { border-top: 1px solid var(--border); padding-top: 8px; }
.lx-tun summary { cursor: pointer; font-size: 13.5px; color: var(--text-main); line-height: 1.45; list-style: none; }
.lx-tun summary::-webkit-details-marker { display: none; }
.lx-tun summary b { color: var(--lx-bau); }
.lx-wissen .lx-tun summary b { color: var(--lx-wis); }
.lx-tun summary::after { content: ' ›'; color: var(--text-muted); }
.lx-tun[open] summary::after { content: ' ‹'; }
.lx-tun .lk-antwort { padding: 8px 0 0; }
.lx-wie summary { cursor: pointer; font-size: 12px; color: var(--text-muted); }
.lx-wie p { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 4px 0 0; }
.lx-paar { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.lx-wert, .lx-diff { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lx-wert span { font-size: 11.5px; color: var(--text-muted); }
.lx-wert b { font-size: 21px; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1.15; }
.lx-wert small, .lx-diff small { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
.lx-diff { text-align: right; align-items: flex-end; }
.lx-diff b { font-size: 21px; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; line-height: 1.15; }
.lx-diff.lx-ab b { color: var(--lx-bau); }
.lx-diff.lx-auf b { color: var(--lx-sta); }
.lx-balken { display: flex; flex-direction: column; gap: 6px; }
.lx-balken .lx-diff { flex-direction: row; align-items: baseline; gap: 8px; text-align: left; }
.lx-balken svg { width: 100%; max-width: 360px; height: auto; display: block; }
.lx-balken svg *, .lx-radar text { stroke: none; }
.lx-b { fill: var(--lx-wis); opacity: .55; }
.lx-b.lx-b2 { opacity: .9; }
.lx-baustelle .lx-b.lx-b2 { fill: var(--lx-bau); }
.lx-staerke .lx-b { fill: var(--lx-sta); }
.lx-bwert { font-size: 10px; fill: var(--text-dim); text-anchor: middle; font-variant-numeric: tabular-nums; }
.lx-bname { font-size: 10px; fill: var(--text-muted); text-anchor: middle; }
.lx-gruppen { display: flex; flex-direction: column; gap: 6px; }
.lx-gzeile { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr) 44px; gap: 8px; align-items: center; font-size: 12.5px; }
.lx-gname { color: var(--text-dim); line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.lx-gname small { color: var(--text-muted); }
.lx-gbahn { position: relative; height: 12px; border-radius: 6px; background: var(--lx-off-bg); }
.lx-gbahn::after { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--border); }
.lx-gbahn i { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.lx-plus { background: var(--lx-sta); }
.lx-minus { background: var(--lx-bau); }
.lx-gwert { text-align: right; font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; }
.lx-gfuss { font-size: 11px; color: var(--text-muted); margin: 0; }
.lx-radarbox { display: flex; flex-direction: column; gap: 6px; }
.lx-radar { width: 100%; max-width: 280px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.lx-rnetz { fill: none; stroke: var(--border); stroke-width: 1; }
.lx-rachse { stroke: var(--border); stroke-width: 1; }
.lx-rvorher { fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.lx-rjetzt { fill: var(--lx-wis-bg); stroke: var(--lx-wis); stroke-width: 2; }
.lx-baustelle .lx-rjetzt { fill: var(--lx-bau-bg); stroke: var(--lx-bau); }
.lx-staerke .lx-rjetzt { fill: var(--lx-sta-bg); stroke: var(--lx-sta); }
.lx-rpunkt { fill: var(--card-bg); stroke: var(--lx-wis); stroke-width: 2; }
.lx-rpunkt.lx-u-schwaecher { stroke: var(--lx-bau); fill: var(--lx-bau); }
.lx-rpunkt.lx-u-besser { stroke: var(--lx-sta); fill: var(--lx-sta); }
.lx-rname { font-size: 11px; font-weight: 700; fill: var(--text-dim); dominant-baseline: middle; }
.lx-rlegende { display: flex; justify-content: center; gap: 14px; font-size: 11px; color: var(--text-muted); }
.lx-rlegende span { display: inline-flex; align-items: center; gap: 6px; }
.lx-l-jetzt { width: 14px; height: 3px; border-radius: 2px; background: var(--lx-wis); display: inline-block; }
.lx-l-vorher { width: 14px; height: 0; border-top: 2px dashed var(--text-muted); display: inline-block; }
.lx-rliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lx-rliste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 12.5px; align-items: baseline; }
.lx-rl-name { color: var(--text-dim); }
.lx-rl-wert { font-weight: 700; color: var(--text-main); font-variant-numeric: tabular-nums; text-align: right; }
.lx-rl-wert small { font-weight: 400; color: var(--text-muted); }
.lx-rl-urteil { font-size: 11.5px; color: var(--text-muted); min-width: 64px; text-align: right; }
.lx-rl-urteil.lx-u-schwaecher { color: var(--lx-bau); font-weight: 700; }
.lx-rl-urteil.lx-u-besser { color: var(--lx-sta); font-weight: 700; }
.lx-offen { margin-top: 10px; font-size: 13px; }
.lx-offen summary { cursor: pointer; color: var(--text-dim); }
.lx-offen ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lx-offen li { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; padding-left: 10px; border-left: 2px solid var(--border); }
.lx-offen li b { color: var(--text-dim); }@media (max-width: 520px){
.lx-karten { grid-template-columns: minmax(0, 1fr); }
.lx-paar { grid-template-columns: 1fr 1fr; }
.lx-paar .lx-diff { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 8px; justify-content: flex-start; text-align: left; }}
.sidebar .nav-episch {
--ep-a: #3b82f6; --ep-b: #8b5cf6; --ep-rgb: 99,102,241;
--ep-ta: #fff; --ep-tb: #c7d2fe;
gap: 12px; padding: 8px 12px 8px 9px; margin: 2px 0;
font-weight: 700; letter-spacing: .01em;
color: var(--ep-tb) !important;
background: linear-gradient(100deg, rgba(var(--ep-rgb),.16), rgba(var(--ep-rgb),.03) 70%);
border: 1px solid rgba(var(--ep-rgb),.20);
overflow: hidden; isolation: isolate;
transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease, background .2s ease;
}
.sidebar .nav-ep-wk    { --ep-a: #7dd3fc; --ep-b: #6366f1; --ep-rgb: 99,150,255;  --ep-ta: #ffffff; --ep-tb: #a5c4ff; }
.sidebar .nav-ep-liga  { --ep-a: #fcd34d; --ep-b: #f59e0b; --ep-rgb: 245,180,30;  --ep-ta: #fff3c4; --ep-tb: #f5b81e; }
.sidebar .nav-ep-duell { --ep-a: #c084fc; --ep-b: #6d5cf0; --ep-rgb: 139,110,245; --ep-ta: #f0e6ff; --ep-tb: #a594ff; }
.sidebar .nav-ep-my10  { --ep-a: #ff7a5c; --ep-b: #e2392c; --ep-rgb: 235,70,55;   --ep-ta: #ffe1da; --ep-tb: #ff6a55; }
.sidebar .nav-episch .nav-ep-ic {
position: relative; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 9px;
background: linear-gradient(145deg, var(--ep-a), var(--ep-b));
box-shadow: 0 3px 10px rgba(var(--ep-rgb),.38), inset 0 1px 0 rgba(255,255,255,.38);
transition: transform .25s cubic-bezier(.3,1.5,.5,1), box-shadow .25s ease;
}
.sidebar .nav-episch .nav-ep-ic svg {
width: 17px !important; height: 17px !important;
stroke: #fff !important; color: #fff !important; fill: none;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.sidebar .nav-ep-liga .nav-ep-ic svg { stroke: #4a2c00 !important; color: #4a2c00 !important; filter: none; }
.sidebar .nav-episch .nav-ep-t {
flex: 1 1 auto; min-width: 0;
background: linear-gradient(90deg, var(--ep-ta), var(--ep-tb));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.sidebar .nav-episch::after {
content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
z-index: -1; pointer-events: none;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.14), transparent);
transform: skewX(-18deg); opacity: 0;
}
.sidebar .nav-episch:hover::after { animation: navEpStreif .7s ease; }
@keyframes navEpStreif { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
.sidebar .nav-episch:hover {
background: linear-gradient(100deg, rgba(var(--ep-rgb),.26), rgba(var(--ep-rgb),.06) 75%);
border-color: rgba(var(--ep-rgb),.45);
box-shadow: 0 4px 18px rgba(var(--ep-rgb),.16);
transform: translateX(2px);
}
.sidebar .nav-episch:hover .nav-ep-ic {
transform: scale(1.08) rotate(-4deg);
box-shadow: 0 4px 16px rgba(var(--ep-rgb),.6), inset 0 1px 0 rgba(255,255,255,.45);
}
.sidebar .nav-episch.active {
background: linear-gradient(100deg, rgba(var(--ep-rgb),.30), rgba(var(--ep-rgb),.08) 80%);
border-color: rgba(var(--ep-rgb),.55);
box-shadow: 0 0 0 1px rgba(var(--ep-rgb),.12), 0 6px 22px rgba(var(--ep-rgb),.20);
}
.sidebar .nav-episch.active::before { background: linear-gradient(180deg, var(--ep-a), var(--ep-b)) !important; }
.sidebar .nav-episch .nav-badge {
background: linear-gradient(145deg, var(--ep-a), var(--ep-b)); color: #fff;
box-shadow: 0 2px 8px rgba(var(--ep-rgb),.45);
}
.sidebar .nav-ep-wk .nav-badge { font-weight: 800; letter-spacing: .05em; }
.sidebar .nav-ep-liga .nav-badge { color: #3a2200; }
.sidebar .nav-ep-wk.ist-live .nav-ep-ic::after {
content: ''; position: absolute; inset: -1px; border-radius: inherit;
border: 2px solid rgba(var(--ep-rgb),.8);
animation: navEpPuls 2s ease-out infinite; pointer-events: none;
}
@keyframes navEpPuls { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
[data-theme="light"] .sidebar .nav-ep-wk    { --ep-ta: #1e3a8a; --ep-tb: #4f46e5; }
[data-theme="light"] .sidebar .nav-ep-liga  { --ep-ta: #92500a; --ep-tb: #b86e00; }
[data-theme="light"] .sidebar .nav-ep-duell { --ep-ta: #5b21b6; --ep-tb: #6d5cf0; }
[data-theme="light"] .sidebar .nav-ep-my10  { --ep-ta: #a51c12; --ep-tb: #e2392c; }
[data-theme="light"] .sidebar .nav-episch { background: linear-gradient(100deg, rgba(var(--ep-rgb),.20), rgba(var(--ep-rgb),.05) 70%); border-color: rgba(var(--ep-rgb),.34); }
[data-theme="light"] .sidebar .nav-episch::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); }@media (prefers-reduced-motion: reduce){
.sidebar .nav-episch, .sidebar .nav-episch .nav-ep-ic { transition: none; }
.sidebar .nav-episch:hover { transform: none; }
.sidebar .nav-episch:hover .nav-ep-ic { transform: none; }
.sidebar .nav-episch:hover::after,
.sidebar .nav-ep-wk.ist-live .nav-ep-ic::after { animation: none; }}
[data-theme="light"] .sidebar .nav-episch.active,
[data-theme="light"] .sidebar .nav-episch.active[style] {
background: linear-gradient(100deg, rgba(var(--ep-rgb),.34), rgba(var(--ep-rgb),.10) 80%);
border-color: rgba(var(--ep-rgb),.6);
}
.sidebar .nav-ep-my10,
[data-theme="light"] .sidebar .nav-ep-my10 {
padding: 11px 12px 11px 14px; gap: 10px;
background: linear-gradient(135deg, #1a1a1c 0%, #0a0a0b 55%, #000 100%);
border-color: rgba(255,255,255,.10);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.sidebar .nav-ep-my10:hover,
[data-theme="light"] .sidebar .nav-ep-my10:hover {
background: linear-gradient(135deg, #222225 0%, #0d0d0e 55%, #000 100%);
border-color: rgba(var(--ep-rgb),.6);
box-shadow: 0 6px 22px rgba(var(--ep-rgb),.22), inset 0 1px 0 rgba(255,255,255,.08);
}
.sidebar .nav-ep-my10 .nav-my10-logo {
height: 26px; width: auto; flex: 0 0 auto; display: block;
transition: transform .25s cubic-bezier(.3,1.5,.5,1);
}
.sidebar .nav-ep-my10:hover .nav-my10-logo { transform: scale(1.05); }
.sidebar .nav-ep-my10 .nav-my10-ziel {
margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: #fa5252; white-space: nowrap;
}
.sidebar .nav-ep-my10 .nav-my10-ziel svg {
width: 12px !important; height: 12px !important; stroke: currentColor !important; stroke-width: 2.4;
transition: transform .2s ease;
}
.sidebar .nav-ep-my10:hover .nav-my10-ziel svg { transform: translateX(3px); }
.sidebar .nav-pro { gap: 12px; padding: 7px 12px 7px 9px; }
.sidebar .nav-pro .nav-pro-ic {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: 9px;
background: linear-gradient(145deg, rgba(59,130,246,.20), rgba(139,92,246,.14));
box-shadow: inset 0 0 0 1px rgba(99,130,246,.22);
color: #8fb4ff;
transition: background .2s ease, color .2s ease, transform .25s cubic-bezier(.3,1.5,.5,1), box-shadow .2s ease;
}
.sidebar .nav-pro .nav-pro-ic svg {
width: 17px !important; height: 17px !important;
stroke: currentColor !important; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.sidebar .nav-pro:hover .nav-pro-ic,
.sidebar .nav-pro.active .nav-pro-ic {
background: var(--gradient-accent); color: #fff;
box-shadow: 0 3px 12px rgba(99,102,241,.42), inset 0 1px 0 rgba(255,255,255,.3);
}
.sidebar .nav-pro:hover .nav-pro-ic { transform: scale(1.08) rotate(-4deg); }
[data-theme="light"] .sidebar .nav-pro .nav-pro-ic { color: #3b5bdb; background: linear-gradient(145deg, rgba(59,130,246,.16), rgba(139,92,246,.12)); }
[data-theme="light"] .sidebar .nav-pro:hover .nav-pro-ic,
[data-theme="light"] .sidebar .nav-pro.active .nav-pro-ic { color: #fff; background: var(--gradient-accent); }@media (prefers-reduced-motion: reduce){
.sidebar .nav-pro .nav-pro-ic, .sidebar .nav-ep-my10 .nav-my10-logo, .sidebar .nav-ep-my10 .nav-my10-ziel svg { transition: none; }
.sidebar .nav-pro:hover .nav-pro-ic, .sidebar .nav-ep-my10:hover .nav-my10-logo, .sidebar .nav-ep-my10:hover .nav-my10-ziel svg { transform: none; }}
.pt-wahl { container-type: inline-size; container-name: ptwahl; }
.post-type-tabs {
display: grid; gap: 12px 8px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pt-gruppe { grid-column: span var(--n, 1); min-width: 0; }
.pt-gruppe-mit { grid-column: 1 / -1; }
.pt-gruppe-titel {
height: 12px; line-height: 12px; margin-bottom: 6px;
font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-muted); white-space: nowrap;
}
.pt-reihe { display: grid; gap: 8px; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); }
.pt-gruppe-mit .pt-reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); }@container ptwahl (min-width: 560px){
.post-type-tabs { grid-template-columns: repeat(var(--alle, 7), minmax(0, 1fr)); }
.pt-gruppe-mit { grid-column: span var(--n, 4); }
.pt-gruppe-mit .pt-reihe { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }}
.post-type-tab {
min-width: 0; min-height: 64px; justify-content: center; gap: 6px;
padding: 11px 4px 9px; border-width: 1.5px; border-radius: 12px;
}
.post-type-tab .post-type-icon { display: inline-flex; }
.post-type-tab svg { width: 21px; height: 21px; stroke-linecap: round; stroke-linejoin: round; }
.post-type-label {
font-size: 11px; font-weight: 650; line-height: 1.15; text-align: center;
max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.post-type-tab:not(.disabled):not(.active):hover { transform: translateY(-1px); }
.post-type-tab.active {
color: #fff; border-color: transparent;
background: var(--gradient-accent); background-origin: border-box;
box-shadow: 0 6px 18px rgba(99,102,241,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.post-type-tab .pt-ki {
position: absolute; top: 5px; left: 5px;
font-size: 8px; font-weight: 800; letter-spacing: .06em; line-height: 1;
padding: 3px 5px; border-radius: 5px;
color: var(--accent); background: rgba(59,130,246,.14);
}
.post-type-tab.active .pt-ki { color: #fff; background: rgba(255,255,255,.22); }
.post-type-tab.disabled { opacity: .5; border-style: dashed; }
.post-type-tab .pt-bald {
position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
font-size: 8px; font-weight: 800; letter-spacing: .08em; line-height: 1; text-transform: uppercase;
padding: 3px 6px; border-radius: 5px;
color: var(--text-muted); background: var(--bg-panel); border: 1px solid var(--border);
}@container ptwahl (max-width: 300px){
.post-type-tabs, .pt-reihe { column-gap: 5px; }
.post-type-tab { padding-left: 2px; padding-right: 2px; }
.post-type-label { font-size: 9.5px; letter-spacing: -.01em; }}
.pt-auswahl {
margin-top: 12px; overflow: hidden;
border: 1px solid var(--border); border-radius: 12px; background: var(--element-bg);
}
.pt-auswahl-kopf { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; }
.pt-auswahl-ic {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--gradient-accent); color: #fff;
box-shadow: 0 3px 10px rgba(99,102,241,.3), inset 0 1px 0 rgba(255,255,255,.25);
}
.pt-auswahl-ic svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pt-auswahl-text { flex: 1; min-width: 0; }
.pt-auswahl-name {
display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--text-main);
}
.pt-auswahl-chip {
font-size: 9px; font-weight: 700; letter-spacing: .03em; line-height: 1.5;
padding: 1px 7px; border-radius: 999px;
color: var(--text-muted); background: var(--bg-panel); border: 1px solid var(--border);
}
.pt-auswahl-chip:empty { display: none; }
.pt-auswahl-chip[data-art="ki"], .pt-auswahl-chip[data-art="aus"] {
color: var(--accent); background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.35);
}
.pt-auswahl .post-type-desc {
background: none; border: none; border-radius: 0; padding: 0; margin: 3px 0 0;
font-size: 11.5px; line-height: 1.5; color: var(--text-dim);
}
.pt-auswahl-leer .pt-auswahl-kopf { display: none; }
.pt-auswahl-leer:not(:has(.pt-wk-hinweis.an)) { display: none; }
.pt-auswahl .pt-wk-hinweis {
margin: 0; border: none; border-top: 1px solid var(--wk-rand); border-radius: 0;
align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 12px;
}
.pt-auswahl .pt-wk-hinweis > svg { align-self: flex-start; }
.pt-wk-hinweis .pt-wk-text { flex: 1 1 200px; min-width: 0; }
.pt-wk-hinweis .pt-wk-name { quotes: '„' '“'; }
:lang(en) .pt-wk-hinweis .pt-wk-name { quotes: '“' '”'; }
.pt-wk-hinweis .pt-wk-name:not(:empty)::before { content: open-quote; }
.pt-wk-hinweis .pt-wk-name:not(:empty)::after { content: close-quote; }
.pt-wk-hinweis .pt-wk-name:empty::before { content: attr(data-leer); }
.pt-wk-hinweis .pt-wk-weg { color: var(--text-dim); }
.pt-wk-hinweis .pt-wk-weg b { color: var(--text-main); }
.pt-wk-hinweis > button { margin-top: 0; flex: 0 0 auto; padding: 8px 13px; border-radius: 8px; font-size: 11.5px; white-space: nowrap; }@container ptwahl (max-width: 460px){ .pt-auswahl .pt-wk-hinweis > button { margin-left: 22px; }}
.liga-start .liga-kopf { color: #f4f4f8; }
.liga-start .liga-kopf .liga-satz { color: rgba(255,255,255,.74); font-size: 15px; max-width: 34em; }
.liga-start .liga-kopf .liga-satz strong { color: #fff; font-weight: 700; }
.liga-start .liga-kopf .liga-knopf { color: #fff; border-color: rgba(255,255,255,.26); }
.liga-start .liga-kopf .liga-knopf-still { color: rgba(255,255,255,.62); }
.liga-start .liga-kopf .liga-knopf-still:hover { color: var(--accent-yellow, #f0b429); }
.liga-start .liga-knopf.ls-gold {
background: linear-gradient(135deg, #fcd34d, #f59e0b); color: #2a1a00; border-color: transparent;
box-shadow: 0 6px 22px rgba(245,180,30,.36), inset 0 1px 0 rgba(255,255,255,.45);
}
.liga-start .liga-knopf.ls-gold svg { stroke: currentColor; }
.liga-start button.liga-knopf { cursor: pointer; font-family: inherit; }
.liga-start .liga-knopf svg { stroke: currentColor; fill: none; stroke-width: 2; }
.ls-admin {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: 0 0 12px; padding: 9px 12px; border-radius: var(--r);
border: 1px dashed var(--border); font-size: 12px; line-height: 1.5; color: var(--text-muted);
}
.ls-admin svg { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; }
.ls-admin span { flex: 1 1 260px; min-width: 0; }
.ls-admin a { font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.ls-aufruf { scroll-margin-top: 70px; }
.ls-aufruf-kopf h2 { font-size: 22px; letter-spacing: -.01em; margin-bottom: 8px; }
.ls-wege {
list-style: none; margin: 18px 0 0; padding: 0;
display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.ls-weg {
display: flex; flex-direction: column; gap: 9px; min-width: 0;
padding: 18px 18px 16px; border-radius: calc(var(--r) + 2px);
background: var(--bg-panel); border: 1px solid var(--border);
}
.ls-weg:first-child {
border-color: rgba(245,180,30,.42);
background: linear-gradient(165deg, rgba(245,180,30,.10), rgba(245,180,30,0) 55%), var(--bg-panel);
}
.ls-weg-nr {
width: 34px; height: 34px; border-radius: 11px; flex: none;
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 800; color: #2a1a00;
background: linear-gradient(145deg, #fcd34d, #f59e0b);
box-shadow: 0 4px 12px rgba(245,180,30,.3), inset 0 1px 0 rgba(255,255,255,.45);
}
.ls-weg h3 { margin: 2px 0 0; font-size: 15.5px; font-weight: 800; }
.ls-weg p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }
.ls-weg .ls-klein { font-size: 11.5px; }
.ls-tun { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.ls-tun form { margin: 0; }
.ls-link { font-size: 12px; color: var(--text-muted); text-decoration: underline; }
.ls-link:hover { color: var(--text-main); }
.ls-weg .el-code { margin-top: 2px; }
.ls-team {
display: flex; align-items: center; gap: 11px; min-width: 0;
padding: 10px 12px; border-radius: var(--r); text-decoration: none;
background: var(--element-bg); border: 1px solid var(--border); color: var(--text-main);
transition: border-color .15s ease, transform .15s ease;
}
.ls-team:hover { border-color: rgba(245,180,30,.6); transform: translateY(-1px); }
.ls-team-bild {
width: 40px; height: 40px; border-radius: 11px; flex: none; overflow: hidden;
display: flex; align-items: center; justify-content: center;
background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-muted);
}
.ls-team-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-team-bild svg { width: 19px; height: 19px; stroke: currentColor; fill: none; }
.ls-team-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ls-team-text strong { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-team-text span { font-size: 11.5px; color: var(--text-muted); }
.ls-team > svg { width: 15px; height: 15px; flex: none; stroke: var(--text-muted); fill: none; stroke-width: 2; }
.ls-kommt {
display: inline-block; vertical-align: middle; margin-left: 8px;
font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
padding: 3px 9px; border-radius: 999px;
color: var(--wk-schrift, #f0b429); border: 1px solid rgba(245,180,30,.45);
}
.ls-preise { display: grid; gap: 12px; margin-top: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ls-preis {
padding: 20px 18px 18px; border-radius: calc(var(--r) + 2px);
border: 1px solid rgba(245,180,30,.28);
background: linear-gradient(160deg, rgba(245,180,30,.14), rgba(245,180,30,.02) 62%), var(--bg-panel);
}
.ls-preis-ic {
width: 44px; height: 44px; border-radius: 14px;
display: flex; align-items: center; justify-content: center; color: #2a1a00;
background: linear-gradient(145deg, #fcd34d, #f59e0b);
box-shadow: 0 6px 18px rgba(245,180,30,.32), inset 0 1px 0 rgba(255,255,255,.45);
}
.ls-preis-ic svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.ls-preis h3 { margin: 14px 0 4px; font-size: 16px; font-weight: 800; }
.ls-preis p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }
.liga-start .liga-schluss { background: radial-gradient(90% 120% at 50% 100%, rgba(245,180,30,.16), transparent 70%); }
[data-theme="light"] .liga-start .liga-saison-nr { color: rgba(0,0,0,.09); }@media (max-width: 640px){
.ls-aufruf-kopf h2 { font-size: 19px; }
.liga-start .liga-knoepfe .liga-knopf { flex: 1 1 100%; justify-content: center; }}
.liga-start .liga-kopf {
background: radial-gradient(120% 90% at 50% 0%, rgba(245,180,30,.22), transparent 62%),
linear-gradient(180deg, #17120a 0%, #0c0c12 100%);
border-color: rgba(245,180,30,.22);
}
.liga-start .liga-nr { color: #2a1a00; background: linear-gradient(145deg, #fcd34d, #f59e0b); }
.ls-weg .el-code code { flex: 1 1 100%; }
[data-liga-ton] svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-liga-ton] .ton-kreuz { display: none; }
html.liga-ton-aus [data-liga-ton] .ton-wellen { display: none; }
html.liga-ton-aus [data-liga-ton] .ton-kreuz { display: inline; }
.sidebar .nav-ep-reihe { position: relative; display: flex; flex-direction: column; }
.sidebar .nav-ep-reihe > .nav-episch { padding-right: 38px; }
.sidebar .nav-ton {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 1;
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px;
background: transparent; color: rgba(245,184,30,.8); cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.sidebar .nav-ton svg { width: 15px; height: 15px; }
.sidebar .nav-ton:hover { background: rgba(245,180,30,.18); color: #fcd34d; }
.sidebar .nav-ton:focus-visible { outline: 2px solid #fcd34d; outline-offset: 1px; }
html.liga-ton-aus .sidebar .nav-ton { color: var(--text-muted); }
[data-theme="light"] .sidebar .nav-ton { color: #a16207; }
[data-theme="light"] .sidebar .nav-ton:hover { background: rgba(245,180,30,.24); color: #7c4a03; }
html.liga-ton-aus[data-theme="light"] .sidebar .nav-ton { color: var(--text-muted); }
.ls-ton {
position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 85;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-width: 46px; height: 46px; padding: 0 13px; border-radius: 999px;
background: rgba(20,17,10,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid rgba(245,180,30,.5); color: #fcd34d;
box-shadow: 0 8px 26px rgba(0,0,0,.42);
font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1; letter-spacing: .02em;
cursor: pointer;
transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.ls-ton[hidden] { display: none; }
.ls-ton svg { width: 20px; height: 20px; flex: 0 0 auto; }
.ls-ton:hover { background: rgba(40,31,12,.96); border-color: rgba(245,180,30,.9); transform: translateY(-1px); }
.ls-ton:focus-visible { outline: 2px solid #fcd34d; outline-offset: 2px; }
.ls-ton.ist-laut .ton-welle-weit { animation: lsTonWelle 1.5s ease-in-out infinite; }
@keyframes lsTonWelle { 0%, 100% { opacity: 1; } 50% { opacity: .22; } }
.ls-ton-t { display: none; white-space: nowrap; }
.ls-ton.ist-wartend .ls-ton-t { display: inline; }
.ls-ton.ist-wartend { animation: lsTonRuf 1.8s ease-out infinite; }
@keyframes lsTonRuf {
0%   { box-shadow: 0 8px 26px rgba(0,0,0,.42), 0 0 0 0 rgba(245,180,30,.55); }
100% { box-shadow: 0 8px 26px rgba(0,0,0,.42), 0 0 0 14px rgba(245,180,30,0); }
}
html.liga-ton-aus .ls-ton { color: #a1a1aa; border-color: rgba(255,255,255,.2); }
[data-theme="light"] .ls-ton {
background: rgba(255,255,255,.95); color: #92600a; border-color: rgba(180,123,18,.5);
box-shadow: 0 8px 24px rgba(15,23,42,.16);
}
[data-theme="light"] .ls-ton:hover { background: #fff; border-color: rgba(180,123,18,.9); }
html.liga-ton-aus[data-theme="light"] .ls-ton { color: #71717a; border-color: rgba(15,23,42,.18); }@media (max-width: 768px){
.ls-ton { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }}@media (prefers-reduced-motion: reduce){
.ls-ton, .sidebar .nav-ton { transition: none; }
.ls-ton:hover { transform: none; }
.ls-ton.ist-wartend, .ls-ton.ist-laut .ton-welle-weit { animation: none; }}
.liga-start { container-type: inline-size; container-name: ligastart; }
.liga-start .liga-kopf.ls-buehne {
isolation: isolate; padding-bottom: 58px;
background: radial-gradient(70% 55% at 50% 40%, rgba(245,180,30,.16), transparent 62%),
radial-gradient(120% 90% at 50% 0%, rgba(245,180,30,.16), transparent 62%),
linear-gradient(180deg, #181308 0%, #0b0b10 100%);
border-color: rgba(245,180,30,.28);
box-shadow: 0 34px 90px -46px rgba(245,180,30,.45);
}
.ls-marke { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.ls-marke span { color: rgba(255,255,255,.62); }
.ls-marke:hover span { color: #fff; }
.ls-marke i {
width: 7px; height: 7px; border-radius: 50%; flex: none; background: #f59e0b;
animation: lsPuls 1.9s ease-out infinite;
}
@keyframes lsPuls { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.75); } 100% { box-shadow: 0 0 0 9px rgba(245,158,11,0); } }
.ls-logo { position: relative; display: block; line-height: 0; }
.ls-strahlen {
position: absolute; left: 50%; top: 50%; z-index: -1; pointer-events: none;
width: 250%; aspect-ratio: 1; border-radius: 50%;
transform: translate(-50%, -50%);
background: repeating-conic-gradient(from 0deg,
rgba(252,211,77,0) 0deg, rgba(252,211,77,.17) 3deg, rgba(252,211,77,0) 6.5deg, rgba(252,211,77,0) 15deg);
-webkit-mask: radial-gradient(circle, #000 6%, rgba(0,0,0,.5) 26%, transparent 56%);
mask: radial-gradient(circle, #000 6%, rgba(0,0,0,.5) 26%, transparent 56%);
animation: lsDreh 90s linear infinite;
}
@keyframes lsDreh { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ls-glanz {
position: absolute; inset: 0; pointer-events: none;
-webkit-mask: url(../../img/liga-logo-alpha.png) center / 100% 100% no-repeat;
mask: url(../../img/liga-logo-alpha.png) center / 100% 100% no-repeat;
background: linear-gradient(105deg, transparent 45%, rgba(255,205,80,.95) 50%, transparent 55%) no-repeat;
background-size: 300% 100%; background-position: 100% 0;
animation: lsGlanz 8s ease-in-out 4.5s infinite;
}
@keyframes lsGlanz { 0%, 66% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
.ls-funken { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ls-funken i {
position: absolute; left: var(--x); bottom: -12px; width: var(--s); height: var(--s); border-radius: 50%;
background: radial-gradient(circle, #fff3c4 0%, #f5b41e 55%, rgba(245,180,30,0) 75%);
box-shadow: 0 0 8px rgba(252,211,77,.8); opacity: 0;
animation: lsFunke var(--t) linear var(--d) infinite;
}
@keyframes lsFunke {
0%   { transform: translate3d(0, 0, 0); opacity: 0; }
8%   { opacity: .95; }
70%  { opacity: .45; }
100% { transform: translate3d(var(--w), -640px, 0); opacity: 0; }
}
.ls-ruf {
margin: 18px auto 0; color: #fff; text-wrap: balance;
font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; letter-spacing: -.02em;
font-size: clamp(23px, 3.5cqi, 34px); line-height: 1.1;
}
.ls-ruf em, .ls-gross em, .ls-mass-zahl strong, .ls-plakette strong {
font-style: normal;
background: linear-gradient(92deg, #fff3c4 0%, #fcd34d 42%, #f59e0b 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.liga-start .liga-kopf .liga-satz { margin-top: 10px; max-width: 44em; font-size: 14.5px; }
.liga-start .liga-kopf .liga-knoepfe { margin-top: 22px; }
.liga-start .liga-kopf .liga-knopf.ls-gold { animation: lsGlimm 2.8s ease-in-out infinite; }
@keyframes lsGlimm {
0%, 100% { box-shadow: 0 6px 22px rgba(245,180,30,.36), inset 0 1px 0 rgba(255,255,255,.45); }
50%      { box-shadow: 0 6px 34px rgba(245,180,30,.72), 0 0 0 5px rgba(245,180,30,.12), inset 0 1px 0 rgba(255,255,255,.45); }
}
.ls-weiter {
position: absolute; left: 50%; bottom: 12px; width: 34px; height: 34px; margin-left: -17px;
display: grid; place-items: center; border-radius: 50%; color: rgba(255,255,255,.5);
animation: lsWipp 2.2s ease-in-out infinite;
}
.ls-weiter:hover { color: #fcd34d; }
.ls-weiter svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
@keyframes lsWipp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.ls-feld, .ls-vitrine, .liga-start .ls-finale {
position: relative; isolation: isolate; overflow: hidden;
margin: 26px 0; padding: 38px 30px 34px; border-radius: calc(var(--r) + 6px);
color: #f4f4f5; border: 1px solid rgba(245,180,30,.24);
background: radial-gradient(80% 60% at 82% 0%, rgba(245,180,30,.15), transparent 60%),
linear-gradient(180deg, #15110a 0%, #0b0b10 100%);
scroll-margin-top: 70px;
}
.ls-kicker {
display: inline-flex; align-items: center; gap: 9px;
font-size: 10px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: #f5b41e;
}
.ls-kicker::before { content: ''; width: 20px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #fcd34d, #f59e0b); }
.ls-gross {
margin: 10px 0 0; color: #fff; text-wrap: balance;
font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; letter-spacing: -.025em; line-height: 1.05;
font-size: clamp(27px, 4.5cqi, 44px);
}
.ls-feld .liga-knopf, .ls-vitrine .liga-knopf, .liga-start .ls-finale .liga-knopf { color: #fff; border-color: rgba(255,255,255,.26); }
.ls-feld { display: grid; gap: 30px; align-items: center; }
.ls-feld-text, .ls-feld-bild { min-width: 0; }
.ls-feld-satz { margin: 12px 0 0; max-width: 36em; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.72); }
.ls-mass { margin-top: 22px; }
.ls-mass-zahl { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ls-mass-zahl strong {
font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; letter-spacing: -.03em; line-height: .9;
font-size: clamp(50px, 8cqi, 76px); font-variant-numeric: tabular-nums;
}
.ls-mass-zahl span { font-size: 22px; font-weight: 700; color: rgba(255,255,255,.48); }
.ls-mass-zahl small { margin-left: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.ls-mass-balken { margin-top: 12px; height: 8px; border-radius: 6px; background: rgba(255,255,255,.09); overflow: hidden; }
.ls-mass-balken i {
display: block; height: 100%; width: var(--w); border-radius: 6px;
background: linear-gradient(90deg, #f59e0b, #fcd34d); box-shadow: 0 0 14px rgba(252,211,77,.6);
}
.ls-mass-fuss { margin-top: 9px; font-size: 11.5px; line-height: 1.5; color: rgba(255,255,255,.55); }
.ls-feld-tun { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); }
.ls-feld-tun p { margin: 0 0 13px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.76); }
.ls-feld-tun p strong { color: #fff; }
.ls-feld-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.ls-feld-bild { container-type: inline-size; container-name: lsbild; }
.ls-baum { --sitz: 34px; --ast: 26px; --linie: rgba(245,190,60,.38); max-width: 660px; margin: 0 auto; }
.ls-baum.ls-viele { --sitz: 18px; --ast: 20px; }
.ls-gipfel { position: relative; display: grid; justify-items: center; gap: 3px; }
.ls-gipfel::before {
content: ''; position: absolute; left: 50%; top: 40%; z-index: -1; pointer-events: none;
width: 320px; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
background: repeating-conic-gradient(from 0deg,
rgba(252,211,77,0) 0deg, rgba(252,211,77,.2) 4deg, rgba(252,211,77,0) 8deg, rgba(252,211,77,0) 20deg);
-webkit-mask: radial-gradient(circle, #000 10%, rgba(0,0,0,.45) 32%, transparent 62%);
mask: radial-gradient(circle, #000 10%, rgba(0,0,0,.45) 32%, transparent 62%);
animation: lsDreh 60s linear infinite;
}
.ls-pokal { display: block; }
.ls-gipfel .ls-pokal { width: 78px; height: 78px; filter: drop-shadow(0 0 22px rgba(252,211,77,.55)); animation: lsSchweb 4.6s ease-in-out infinite; }
@keyframes lsSchweb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.ls-gipfel-t { padding-bottom: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #fcd34d; }
.ls-reihe { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); justify-items: center; }
.ls-punkt { width: 12px; height: 12px; border-radius: 50%; background: #17130b; border: 1.5px solid var(--linie); }
.ls-punkt.ist-weg { background: #fcd34d; border-color: #fff3c4; box-shadow: 0 0 12px 2px rgba(252,211,77,.75); }
.ls-ast { display: block; width: 100%; height: var(--ast); overflow: visible; }
.ls-ast path { fill: none; stroke: var(--linie); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.ls-ast .ls-ast-weg { stroke: #fcd34d; stroke-width: 2.5; stroke-dasharray: 6 7; animation: lsFluss 1s linear infinite; }
@keyframes lsFluss { to { stroke-dashoffset: -26; } }
.ls-sitz {
position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
width: 100%; min-width: 0; text-decoration: none; color: inherit;
}
.ls-sitz-bild {
position: relative; flex: none; width: var(--sitz); height: var(--sitz); border-radius: 50%;
display: grid; place-items: center; overflow: hidden;
border: 2px solid #f5b41e; color: #fcd34d;
background: linear-gradient(145deg, #3a2d10, #19140a);
box-shadow: 0 0 0 3px rgba(245,180,30,.13), 0 6px 16px rgba(0,0,0,.5);
transition: transform .2s cubic-bezier(.3,1.5,.5,1), border-color .15s ease;
}
.ls-sitz-bild b { font-size: calc(var(--sitz) * .42); font-weight: 800; line-height: 1; }
.ls-sitz-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ls-sitz-bild svg { width: 46%; height: 46%; stroke: currentColor; fill: none; stroke-width: 2.2; }
.ls-sitz:hover .ls-sitz-bild { transform: translateY(-3px) scale(1.07); }
.ls-sitz.ist-frei .ls-sitz-bild {
border: 2px dashed rgba(255,255,255,.3); background: rgba(255,255,255,.03); color: rgba(255,255,255,.5); box-shadow: none;
animation: lsFrei 2.8s ease-in-out infinite; animation-delay: calc(var(--i) * .2s);
}
@keyframes lsFrei { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.ls-sitz.ist-frei:hover .ls-sitz-bild, .ls-sitz.ist-frei.ist-weg .ls-sitz-bild { border-color: #fcd34d; color: #fcd34d; }
.ls-sitz.ist-eigen .ls-sitz-bild { border-color: #fff3c4; box-shadow: 0 0 0 3px rgba(252,211,77,.4), 0 0 26px rgba(252,211,77,.6); }
.ls-sitz.ist-teil .ls-sitz-bild {
border: 3px solid transparent;
background: linear-gradient(145deg, #3a2d10, #19140a) padding-box,
conic-gradient(#fcd34d calc(var(--teil) * 1turn), rgba(255,255,255,.24) 0) border-box;
}
.ls-sitz-name {
display: none; max-width: 100%; padding: 0 3px;
font-size: 10.5px; line-height: 1.25; text-align: center; color: rgba(255,255,255,.74);
-webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.ls-sitz.ist-frei .ls-sitz-name { color: rgba(255,255,255,.45); }
.ls-sitz.ist-eigen .ls-sitz-name { color: #fcd34d; font-weight: 700; }
.ls-sitz.ist-frei.ist-weg .ls-sitz-name { display: block; overflow: visible; white-space: nowrap; color: #fcd34d; font-weight: 700; }
.ls-sitz-marke {
padding: 2px 7px; border-radius: 999px; white-space: nowrap;
font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
color: #2a1a00; background: linear-gradient(135deg, #fcd34d, #f59e0b);
}
.ls-baum-fuss { margin-top: 22px; text-align: center; }
.ls-runden { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.ls-runden span + span::before { content: '→'; margin-right: 8px; color: rgba(245,190,60,.6); }
.ls-runden .ist-titel { color: #fcd34d; }
.ls-baum-fuss p { margin: 9px auto 0; max-width: 38em; font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.58); }
.ls-feld-namen { margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,.55); align-items: center; }
.ls-feld-namen a { padding: 3px 10px; border-radius: 999px; text-decoration: none; color: rgba(255,255,255,.85); background: rgba(255,255,255,.06); border: 1px solid rgba(245,180,30,.26); }
.ls-feld-namen a:hover { border-color: #fcd34d; color: #fff; }@container lsbild (min-width: 520px){
.ls-baum { --sitz: 50px; --ast: 34px; }
.ls-baum.ls-viele { --sitz: 28px; --ast: 26px; }
.ls-baum:not(.ls-viele) .ls-sitz-name { display: -webkit-box; }
.ls-baum:not(.ls-viele) ~ .ls-baum-fuss .ls-feld-namen { display: none; }
.ls-gipfel .ls-pokal { width: 92px; height: 92px; }}@container ligastart (min-width: 880px){
.ls-feld { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 44px; padding: 48px 46px; }}
.ls-vitrine { text-align: center; }
.ls-vit-buehne { display: grid; gap: 16px; margin-top: 26px; }
.ls-vit-titel, .ls-vit-abz {
display: flex; flex-direction: column; align-items: center; min-width: 0;
padding: 28px 22px 24px; border-radius: 18px;
border: 1px solid rgba(245,180,30,.2);
background: linear-gradient(180deg, rgba(245,180,30,.10), rgba(245,180,30,.015));
}
.ls-vit-pokal { min-height: 116px; display: grid; place-items: center; }
.ls-vit-pokal .ls-pokal { width: 108px; height: 108px; filter: drop-shadow(0 0 30px rgba(252,211,77,.55)); animation: lsSchweb 5s ease-in-out infinite; }
.ls-plakette {
margin-top: 8px; padding: 9px 20px 11px; min-width: 210px; max-width: 100%; border-radius: 10px;
background: linear-gradient(180deg, #3a2a0a, #20170a); border: 1px solid rgba(252,211,77,.5);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.45);
}
.ls-plakette small { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(252,211,77,.82); }
.ls-plakette strong { display: block; margin-top: 3px; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 19px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.ls-vitrine h3 { margin: 18px 0 6px; font-size: 16px; font-weight: 800; color: #fff; }
.ls-vitrine p { margin: 0; max-width: 30em; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.7); }
.ls-abz-reihe { display: flex; justify-content: center; align-items: flex-end; min-height: 124px; }
.ls-abz {
position: relative; flex: none; width: 84px; height: 94px; margin: 0 -6px;
filter: drop-shadow(0 8px 18px rgba(245,180,30,.38));
animation: lsSchweb 4.6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s);
}
.ls-abz::before, .ls-abz-in { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.ls-abz::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, #fff3c4, #f59e0b 52%, #92400e); }
.ls-abz-in {
position: absolute; inset: 5px; display: grid; place-items: center; color: #fcd34d;
background: radial-gradient(circle at 50% 28%, #47340c, #17120a 72%);
}
.ls-abz-in svg { width: 50%; height: auto; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ls-abz:nth-child(2):nth-last-child(2) { width: 98px; height: 110px; margin-bottom: 12px; z-index: 1; }
.ls-vitrine .ls-preise { margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); text-align: left; }
.ls-vitrine .ls-preis { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.1); }
.ls-vitrine .ls-preis > div { min-width: 0; }
.ls-vitrine .ls-preis-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; }
.ls-vitrine .ls-preis h3 { margin: 0 0 3px; font-size: 14.5px; }
.ls-vitrine .ls-preis p { font-size: 12.5px; }
.ls-vitrine .ls-kommt { color: #f0b429; }@container ligastart (min-width: 760px){
.ls-vit-buehne { grid-template-columns: 1fr 1fr; gap: 20px; }
.ls-vitrine { padding: 48px 46px 40px; }}
.liga-start .ls-finale { text-align: center; padding: 44px 26px 42px; margin-bottom: 10px; }
.liga-start .ls-finale::before {
content: ''; position: absolute; left: 50%; top: 64px; z-index: -1; pointer-events: none;
width: 900px; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
background: repeating-conic-gradient(from 0deg,
rgba(252,211,77,0) 0deg, rgba(252,211,77,.14) 3deg, rgba(252,211,77,0) 6.5deg, rgba(252,211,77,0) 15deg);
-webkit-mask: radial-gradient(circle, #000 5%, rgba(0,0,0,.4) 26%, transparent 55%);
mask: radial-gradient(circle, #000 5%, rgba(0,0,0,.4) 26%, transparent 55%);
animation: lsDreh 90s linear infinite;
}
.ls-finale-pokal .ls-pokal { width: 66px; height: 66px; margin: 0 auto 12px; filter: drop-shadow(0 0 24px rgba(252,211,77,.6)); }
.liga-start .ls-finale h2 { color: #fff; font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; letter-spacing: -.02em; font-size: clamp(24px, 3.8cqi, 36px); }
.liga-start .ls-finale p { color: rgba(255,255,255,.72); font-size: 14px; }
.liga-start .liga-block { margin: 40px 0; }
.liga-start .liga-block > .ls-kicker, .ls-aufruf-kopf .ls-kicker { margin-bottom: 8px; }
.liga-start .liga-block h2 { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.liga-start .ls-aufruf-kopf h2 { font-size: clamp(24px, 3.4cqi, 32px); }
[data-theme="light"] .liga-start .liga-block .ls-kicker { color: #a16207; }
.liga-start .ls-weg, .liga-start .liga-schritte li, .liga-start .liga-saison-kachel { transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease; }
.liga-start .ls-weg:hover, .liga-start .liga-schritte li:hover {
transform: translateY(-3px); border-color: rgba(245,180,30,.55);
box-shadow: 0 16px 36px -20px rgba(245,180,30,.5);
}
.ls-bewegt .ls-auftritt { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.ls-bewegt .ls-auftritt.ist-da { opacity: 1; transform: none; }
.ls-bewegt .ls-feld .ls-sitz { transition: opacity .4s ease, transform .5s cubic-bezier(.3,1.5,.5,1); transition-delay: calc(.3s + var(--i) * .07s); }
.ls-bewegt .ls-feld:not(.ist-da) .ls-sitz { opacity: 0; transform: translateY(10px) scale(.5); }
.ls-bewegt .ls-feld .ls-ast { clip-path: inset(0 0 0 0); transition: clip-path .5s ease; transition-delay: calc(.95s + var(--t) * .32s); }
.ls-bewegt .ls-feld:not(.ist-da) .ls-ast { clip-path: inset(100% 0 0 0); }
.ls-bewegt .ls-feld .ls-reihe:not(.ls-sitze) { transition: opacity .35s ease; transition-delay: calc(1s + var(--t) * .32s); }
.ls-bewegt .ls-feld:not(.ist-da) .ls-reihe:not(.ls-sitze) { opacity: 0; }
.ls-bewegt .ls-feld .ls-gipfel { transition: opacity .6s ease, transform .8s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(1.3s + var(--stufen) * .32s); }
.ls-bewegt .ls-feld:not(.ist-da) .ls-gipfel { opacity: 0; transform: scale(.6); }
.ls-bewegt .ls-feld .ls-mass-balken i { transition: width 1.3s cubic-bezier(.2,.8,.2,1) .35s; }
.ls-bewegt .ls-feld:not(.ist-da) .ls-mass-balken i { width: 0; }@container ligastart (max-width: 560px){
.ls-feld, .ls-vitrine, .liga-start .ls-finale { padding: 28px 16px 26px; margin: 18px 0; }
.ls-vit-titel, .ls-vit-abz { padding: 22px 14px 20px; }
.liga-start .liga-block { margin: 30px 0; }}@media (max-width: 640px){
.liga-start .liga-kopf.ls-buehne { padding-bottom: 54px; }
.ls-ruf em { display: block; }}@media (prefers-reduced-motion: reduce){
.ls-strahlen, .ls-glanz, .ls-funken i, .ls-marke i, .ls-weiter, .ls-gipfel::before, .ls-gipfel .ls-pokal,
.ls-vit-pokal .ls-pokal, .ls-abz, .ls-ast .ls-ast-weg, .ls-sitz.ist-frei .ls-sitz-bild,
.liga-start .ls-finale::before, .liga-start .liga-kopf .liga-knopf.ls-gold { animation: none; }
.ls-funken { display: none; }
.ls-sitz.ist-frei .ls-sitz-bild { opacity: 1; }
.ls-sitz-bild, .liga-start .ls-weg, .liga-start .liga-schritte li { transition: none; }}
.liga-start .liga-kopf .liga-satz { max-width: 48em; text-wrap: balance; }
.ls-vitrine .ls-gross em { display: block; }
.ls-vit-titel, .ls-vit-abz { justify-content: center; }
.ls-vitrine .ls-preise { grid-template-columns: 1fr; gap: 16px; }@container ligastart (min-width: 760px){ .ls-vitrine .ls-preise { grid-template-columns: 1fr 1fr; gap: 20px; }}
.ls-gross em b { font-weight: inherit; font-variant-numeric: tabular-nums; }
.ls-sitz.ist-teil:not(.ist-eigen) .ls-sitz-bild { color: rgba(252,211,77,.75); box-shadow: 0 6px 16px rgba(0,0,0,.5); }
.ls-sitz-rest {
display: none; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
color: #fcd34d; border: 1px solid rgba(252,211,77,.45);
}
.ls-legende { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; font-size: 10.5px; color: rgba(255,255,255,.62); }
.ls-legende span { display: inline-flex; align-items: center; gap: 6px; }
.ls-legende span::before { content: ''; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; }
.ls-legende .ist-voll::before { border: 2px solid #f5b41e; background: #3a2d10; }
.ls-legende .ist-teil::before { background: conic-gradient(#fcd34d .62turn, rgba(255,255,255,.28) 0); -webkit-mask: radial-gradient(circle, transparent 3px, #000 3.5px); mask: radial-gradient(circle, transparent 3px, #000 3.5px); }
.ls-legende .ist-frei::before { border: 1.5px dashed rgba(255,255,255,.45); }@container lsbild (min-width: 520px){
.ls-baum:not(.ls-viele) .ls-sitz-rest { display: inline-block; }}
.sidebar .nav-ep-liga.laedt { pointer-events: none; animation: navLigaLaedt .9s ease-in-out infinite; }
@keyframes navLigaLaedt { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }@media (prefers-reduced-motion: reduce){ .sidebar .nav-ep-liga.laedt { animation: none; opacity: .7; }}
.ls-marke { flex-wrap: wrap; justify-content: center; gap: 0 9px; }
.ls-marke span { color: inherit; }
.ls-marke-a { display: inline-flex; align-items: center; gap: 9px; }
.ls-marke .ls-marke-b { color: rgba(255,255,255,.62); }
.ls-marke:hover .ls-marke-b { color: #fff; }
.ls-marke-b::before { content: '·'; margin-right: 9px; }@media (max-width: 640px){
.ls-marke { flex-direction: column; align-items: center; gap: 5px; }
.ls-marke-b::before { content: none; }}
.ls-baum.ls-viele .ls-sitz.ist-eigen .ls-sitz-marke { align-self: flex-start; }
.ls-ton { right: auto; left: calc(var(--sidebar-width, 260px) + 20px); }@media (max-width: 768px){ .ls-ton { right: auto; left: 14px; }}
body:has(.liga-start) .navbar-gast-knopf.haupt,
body:has(.liga-start) .mobile-nav.gast-cta .gast-cta-haupt,
body:has(.liga-start) .sgc-knopf {
background: linear-gradient(135deg, #fcd34d, #f59e0b); color: #2a1a00;
box-shadow: 0 6px 18px -8px rgba(245,180,30,.9), inset 0 1px 0 rgba(255,255,255,.45);
}
body:has(.liga-start) .navbar-gast-knopf.haupt:hover,
body:has(.liga-start) .mobile-nav.gast-cta .gast-cta-haupt:hover,
body:has(.liga-start) .mobile-nav.gast-cta .gast-cta-haupt:active,
body:has(.liga-start) .sgc-knopf:hover,
[data-theme="light"] body:has(.liga-start) .mobile-nav.gast-cta .gast-cta-haupt:hover,
[data-theme="light"] body:has(.liga-start) .mobile-nav.gast-cta .gast-cta-haupt:active {
background: linear-gradient(135deg, #fde68a, #fbbf24); color: #2a1a00;
}
body:has(.liga-start) .sgc-karte,
[data-theme="light"] body:has(.liga-start) .sgc-karte {
background: radial-gradient(120% 90% at 100% 0%, rgba(245,180,30,.32), transparent 60%), linear-gradient(180deg, #17120a, #0b0b10);
border-color: rgba(245,180,30,.3);
}
body:has(.liga-start) .sgc-karte { box-shadow: 0 16px 34px -18px rgba(245,180,30,.45); }
.ev-teilen {
display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px;
font-family: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.4; cursor: pointer;
background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.32);
transition: background .15s ease, border-color .15s ease;
}
.ev-teilen:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.6); }
.ev-teilen svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.ev-no-img .ev-teilen { background: var(--element-bg); color: var(--text-main); border-color: var(--border); }
.ev-no-img .ev-teilen:hover { border-color: var(--accent); }
.ev-hero-meta .ev-teilen span { font-size: inherit; color: inherit; }
.mc-arena-header .mc-teilen { margin-left: auto; background: rgba(124,58,237,.14); color: var(--text-main); border-color: rgba(124,58,237,.45); }
.mc-arena-header .mc-teilen:hover { background: rgba(124,58,237,.26); border-color: rgba(124,58,237,.8); }
.liga-start .ls-teilen { background: none; cursor: pointer; font-family: inherit; }
.liga-start .ls-finale .ls-teilen { margin-left: 8px; }
.ls-pokal { stroke: none; stroke-width: 0; fill: none; }
.rk-knopf svg.rk-smiley { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.rk-knopf svg .rk-auge { fill: currentColor; stroke: none; }
.rk-knopf svg .rk-plus { stroke-width: 2.2; }
.rk-knopf[aria-expanded="true"] { color: var(--accent); }
.rk-leiste { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 8px; margin-top: -4px; }
.rk-leiste:empty { display: none; }
.rk-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: 999px; border: 1px solid var(--border);
background: var(--element-bg); color: var(--text-main); font: inherit; font-weight: 600; font-size: 12.5px; line-height: 1.2; font-variant-numeric: tabular-nums; cursor: pointer;
transition: border-color .15s, background .15s, transform .15s; }
.rk-chip .rk-z { font-size: 15px; line-height: 1; }
.rk-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.rk-chip.an { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.rk-chip:focus-visible, .rk-wahl-z:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rk-chip.neu { animation: rkPop .45s cubic-bezier(.34, 1.56, .64, 1); }
.rk-wahl { position: fixed; z-index: 3000; display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: var(--bg-panel);
border: 1px solid var(--border); box-shadow: 0 12px 34px rgba(0,0,0,.28); animation: rkAuf .16s ease-out; }
.rk-wahl-z { width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 24px; line-height: 1; cursor: pointer;
transition: transform .14s, background .14s; }
.rk-wahl-z:hover { transform: translateY(-3px) scale(1.18); background: var(--element-bg); }
.rk-wahl-z.an { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.rk-flug { position: fixed; z-index: 3001; pointer-events: none; font-size: 22px; transform: translate(-50%, 0); animation: rkFlug .7s ease-out forwards; }
@keyframes rkPop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes rkAuf { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes rkFlug { from { opacity: 1; transform: translate(-50%, 0) scale(1); } to { opacity: 0; transform: translate(-50%, -46px) scale(1.4); } }@media (prefers-reduced-motion: reduce){ .rk-chip.neu, .rk-wahl { animation: none; } .rk-wahl-z:hover { transform: none; }}
.rk-leiste.rk-auf-bild { position: absolute; left: 10px; bottom: 10px; z-index: 3; margin: 0; padding: 0; gap: 6px;
max-width: 62%; flex-wrap: wrap-reverse; pointer-events: none; }
.carousel-mesh .rk-leiste.rk-auf-bild { bottom: 24px; }
.rk-auf-bild .rk-chip { pointer-events: auto; padding: 4px 10px 4px 7px; color: #fff; font-size: 13px;
background: rgba(12, 14, 20, .56); border-color: rgba(255, 255, 255, .24);
backdrop-filter: blur(8px) saturate(1.4); -webkit-backdrop-filter: blur(8px) saturate(1.4);
box-shadow: 0 4px 14px rgba(0, 0, 0, .28); text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
animation: rkSchweben 3.6s ease-in-out calc(var(--i, 0) * -0.9s) infinite; will-change: transform; }
.rk-auf-bild .rk-chip .rk-z { font-size: 17px; }
.rk-auf-bild .rk-chip:hover { border-color: rgba(255, 255, 255, .55); animation-play-state: paused; }
.rk-auf-bild .rk-chip.an { color: #fff; background: color-mix(in srgb, var(--accent) 62%, rgba(12, 14, 20, .5));
border-color: color-mix(in srgb, var(--accent) 70%, #fff); }
.rk-auf-bild.rk-warte .rk-chip { opacity: 0; animation: none; }
.rk-auf-bild.rk-da .rk-chip { animation: rkPopAuf .55s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i, 0) * 110ms) both,
rkSchweben 3.6s ease-in-out calc(.65s + var(--i, 0) * .35s) infinite; }
.rk-auf-bild .rk-chip.neu, .rk-auf-bild.rk-da .rk-chip.neu { animation: rkPopAuf .55s cubic-bezier(.34, 1.56, .64, 1) both,
rkSchweben 3.6s ease-in-out .6s infinite; }
.rk-flug.gross { font-size: 30px; animation-duration: .9s; }
@keyframes rkSchweben { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-4px) rotate(1.5deg); } }
@keyframes rkPopAuf { 0% { opacity: 0; transform: translateY(12px) scale(.3); } 60% { opacity: 1; transform: translateY(-4px) scale(1.16); } 100% { opacity: 1; transform: none; } }@media (prefers-reduced-motion: reduce){
.rk-auf-bild .rk-chip, .rk-auf-bild.rk-da .rk-chip, .rk-auf-bild .rk-chip.neu { animation: none; }
.rk-auf-bild.rk-warte .rk-chip { opacity: 1; }}
.rk-wer { display: inline-flex; align-items: center; }
.rk-gesicht { position: relative; width: 18px; height: 18px; flex: none; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center;
background: var(--element-bg); box-shadow: 0 0 0 1.5px var(--element-bg); font-size: 9px; font-weight: 700; line-height: 1; color: #fff; text-shadow: none; }
.rk-gesicht + .rk-gesicht { margin-left: -6px; }
.rk-gesicht:nth-child(1) { z-index: 3; } .rk-gesicht:nth-child(2) { z-index: 2; } .rk-gesicht:nth-child(3) { z-index: 1; }
.rk-gesicht-leer { background: hsl(var(--h, 215) 42% 46%); }
.rk-chip.an .rk-gesicht { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 22%, var(--bg-panel)); }
.rk-auf-bild .rk-gesicht { width: 20px; height: 20px; font-size: 10px; box-shadow: 0 0 0 1.5px rgba(14, 16, 22, .82); }
.rk-auf-bild .rk-chip.an .rk-gesicht { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, #0c0e14); }
.mo-leiste { margin: 0 0 16px; min-width: 0; }
.mo-leiste-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 2px 8px; }
.mo-leiste-kopf h2 { margin: 0; font-size: 15px; font-weight: 700; }
.mo-leiste-kopf span { font-size: 12px; color: var(--text-muted); }
.mo-reihe { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.mo-karte { --mo-farbe: var(--accent); flex: 0 0 236px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 9px; min-width: 0;
padding: 12px 12px 11px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-panel); position: relative; overflow: hidden; }
.mo-bestleistung { --mo-farbe: #e5a800; } .mo-serie { --mo-farbe: #f97316; } .mo-abzeichen { --mo-farbe: #8b5cf6; } .mo-duell { --mo-farbe: var(--accent); }
.mo-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.mo-person { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text-main); text-decoration: none; }
.mo-person b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-zeit { flex: none; font-size: 11px; color: var(--text-muted); }
.mo-inhalt { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: start; color: var(--text-main); text-decoration: none; min-width: 0; }
.mo-zeichen { grid-row: span 3; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
font-size: 21px; line-height: 1; background: color-mix(in srgb, var(--mo-farbe) 15%, transparent); }
.mo-titel { font-size: 14px; font-weight: 700; line-height: 1.25; }
.mo-text { font-size: 12.5px; line-height: 1.4; color: var(--text-main); opacity: .85; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mo-zusatz { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mo-fuss { margin-top: auto; display: flex; align-items: center; min-height: 32px; }
.mo-gratulieren { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 6px 14px; border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
font: inherit; font-weight: 600; font-size: 13px; line-height: 1.2; cursor: pointer; transition: background .15s, transform .15s; }
.mo-gratulieren:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.mo-gratulieren:active { transform: scale(.97); }
.mo-gratulieren.an, .mo-gratulieren-mini.an { border-color: var(--border); background: var(--element-bg); color: var(--text-muted); cursor: default; }
.mo-gratulieren.an { border-color: transparent; background: none; padding-left: 0; padding-right: 0; font-weight: 500; }@media (pointer: coarse){ .mo-gratulieren:not(.an) { min-height: 40px; }}
.mo-gratulieren .mo-gn, .mo-gratulieren-mini .mo-gn { font-variant-numeric: tabular-nums; opacity: .8; }
.mo-gratulieren .mo-gn:not(:empty)::before, .mo-gratulieren-mini .mo-gn:not(:empty)::before { content: '· '; }
.mo-gratulieren:focus-visible, .mo-gratulieren-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mo-eigen { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.mo-gratulieren-mini { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font: inherit; font-weight: 600; font-size: 12.5px; line-height: 1.2; }@media (pointer: coarse){ .mo-gratulieren-mini { min-height: 40px; }}
a.pa-chip-link { color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
a.pa-chip-link:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, var(--element-bg)); }
a.pa-chip-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }