/* ============================================================
   Theme "stickerbook" für die Supporter-Seite (/support)
   ------------------------------------------------------------
   Hell, bunt, freundlich: dicke Outlines, Sticker-Badges, weiche
   Rundungen, kleine Wackel- und Squish-Animationen. Hintergrund ist
   ein Wirbel aus zwei Hellblau-Tönen (bg-swirl.svg).
   Das Markup kommt aus views/support.html und ist theme-neutral;
   hier werden ausschließlich Klassen von dort gestylt.
   Zusatz-Animationen (Spendenglas mit Münzen) liegen in theme.js.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@500;600;700;800;900&display=swap');

:root{
	--bg:#c3e1f8;
	--paper:#ffffff;
	--paper-2:#fffdf6;
	--ink:#1f1a2e;
	--text:#1f1a2e;
	--muted:#6c6680;
	--line:rgba(31,26,46,.14);
	--pink:#ff5c8a;
	--sky:#4cc9ff;
	--sky-soft:rgba(76,201,255,.22);
	--lime:#b8f04a;
	--sun:#ffd23f;
	--grape:#8b5cf6;
	--patreon:#ff424d;
	--youtube:#ff0000;
	--green:#3a9d4b;
	--amber:#d98a00;
	--coral:var(--grape);            /* Fokus-/Akzentfarbe im Markup-Sinne */
	--coral-soft:rgba(139,92,246,.16);
	--shell:1360px;
	--topbar-h:60px;
	--nav-h:54px;
	--r:18px;
	--shadow:5px 5px 0 var(--ink);
	--shadow-sm:3px 3px 0 var(--ink);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
	font-family:'Nunito',system-ui,sans-serif;
	font-weight:600;
	color:var(--text);
	background:var(--bg) url('bg-swirl.svg') center/cover no-repeat fixed;
	min-height:100vh;
	display:flex;flex-direction:column;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--grape);outline-offset:2px;border-radius:10px}
b,strong{font-weight:800}

/* ── Topbar ── */
.topbar{
	position:sticky;top:0;z-index:60;
	background:rgba(255,255,255,.92);
	-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
	border-bottom:3px solid var(--ink);
}
.topbar-in{
	max-width:var(--shell);margin:0 auto;
	min-height:var(--topbar-h);padding:9px 18px;
	display:flex;align-items:center;gap:12px;
}
.brand{
	display:flex;align-items:center;gap:9px;min-width:0;
	font-family:'Fredoka',sans-serif;font-weight:700;font-size:19px;color:var(--ink);
}
.brand .dot{
	width:14px;height:14px;border-radius:50%;flex:0 0 auto;
	background:var(--pink);border:2.5px solid var(--ink);
	animation:sbBeat 1.4s ease-in-out infinite;
}
@keyframes sbBeat{0%,100%{transform:scale(1)}30%{transform:scale(1.25)}45%{transform:scale(1)}60%{transform:scale(1.15)}}
.brand .brand-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-spacer{flex:1 1 auto}
.conn{
	display:inline-flex;align-items:center;gap:7px;
	font-size:12.5px;font-weight:800;color:var(--muted);
	background:var(--paper);border:2.5px solid var(--ink);
	border-radius:999px;padding:5px 12px;white-space:nowrap;
	box-shadow:2px 2px 0 var(--ink);
}
.conn .cdot{width:9px;height:9px;border-radius:50%;background:var(--muted);transition:background .25s}
.conn.on{color:var(--ink);background:var(--lime)}
.conn.on .cdot{background:var(--ink);animation:sbBlink 1.2s infinite}
@keyframes sbBlink{50%{opacity:.25}}
.me{display:flex;align-items:center;gap:9px;min-width:0}
.me-pic{
	width:32px;height:32px;border-radius:50%;flex:0 0 auto;object-fit:cover;
	background:var(--sun);border:2.5px solid var(--ink);
}
.me-name{font-size:14px;font-weight:800;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.top-btn{
	display:inline-flex;align-items:center;justify-content:center;
	min-height:38px;padding:8px 15px;border-radius:14px;
	font-family:'Fredoka',sans-serif;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;
	color:var(--ink);background:var(--paper);border:2.5px solid var(--ink);
	box-shadow:var(--shadow-sm);
	transition:transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
}
.top-btn:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--ink)}
.top-btn:active{transform:translate(2px,3px);box-shadow:0 0 0 var(--ink)}
.top-btn.primary{background:var(--pink);color:#fff}
.top-btn.primary:hover{background:var(--pink)}

/* ── Sprung-Navigation (mobil) ── */
.qnav{
	display:none;position:sticky;top:var(--topbar-h);z-index:55;
	background:rgba(255,255,255,.92);
	-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
	border-bottom:3px solid var(--ink);
}
.qnav-in{
	max-width:var(--shell);margin:0 auto;padding:8px 14px;
	display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
}
.qnav-in::-webkit-scrollbar{display:none}
.qnav-chip{
	display:inline-flex;align-items:center;justify-content:center;
	min-height:38px;padding:8px 16px;border-radius:999px;
	font-family:'Fredoka',sans-serif;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;
	color:var(--ink);background:var(--paper);border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
}
.qnav-chip:hover{background:var(--sun)}

/* ── Inhalt ── */
.shell{
	width:100%;max-width:var(--shell);margin:0 auto;flex:1 1 auto;
	padding:24px 18px 44px;
	display:flex;flex-direction:column;gap:22px;
}
#donate-wrap,#bingo-wrap,#vote-wrap,#account-wrap,#join-wrap{scroll-margin-top:calc(var(--topbar-h) + var(--nav-h) + 12px)}

/* ── Sandbox-Hinweis ── */
.sandbox-bar{
	display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
	padding:10px 16px;border-radius:14px;
	background:var(--sun);border:2.5px solid var(--ink);box-shadow:var(--shadow-sm);
	color:var(--ink);font-size:13.5px;font-weight:800;
}
.sandbox-bar a{color:var(--ink);font-weight:800}

/* ── Karten-Grundform ── */
.panel{
	background:var(--paper);
	border:3px solid var(--ink);
	border-radius:22px;
	padding:20px 22px;
	box-shadow:var(--shadow);
	min-width:0;position:relative;
}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.panel-title{
	display:flex;align-items:center;gap:8px;min-width:0;
	font-family:'Fredoka',sans-serif;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
	color:var(--muted);font-weight:600;
}
.live-dot{
	width:10px;height:10px;border-radius:50%;flex:0 0 auto;
	background:var(--pink);border:2px solid var(--ink);
	animation:sbBlink 1.2s infinite;
}

/* ── Sticker-Badges (per CSS an Karten geheftet, ohne Markup-Änderung) ── */
.hero::after,#steamkey-wrap::after,#bingo-wrap::after,#vote-wrap::after{
	position:absolute;top:-15px;right:20px;z-index:2;
	font-family:'Fredoka',sans-serif;font-weight:700;font-size:12.5px;
	padding:6px 13px;border:2.5px solid var(--ink);border-radius:999px;
	background:var(--sun);color:var(--ink);box-shadow:2px 2px 0 var(--ink);
	transform:rotate(6deg);animation:sbWiggle 3s ease-in-out infinite;
	pointer-events:none;
}
.hero::after{content:'Danke! 💖';background:var(--pink);color:#fff}
#steamkey-wrap::after{content:'Beta 🎮';background:var(--sky)}
#bingo-wrap::after{content:'Läuft gerade 🔴'}
#vote-wrap::after{content:'Abstimmen ✋';background:var(--grape);color:#fff}
@keyframes sbWiggle{0%,100%{transform:rotate(6deg)}50%{transform:rotate(-3deg) scale(1.05)}}

/* ── Obere Zeile: Spenden-Hero + Seitenkarte ── */
.hero-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);gap:22px;align-items:stretch}
.hero-row.solo{grid-template-columns:minmax(0,1fr)}
.hero-side{display:flex;flex-direction:column;gap:22px;min-width:0}
.hero-side > .panel{flex:1 1 auto;display:flex;flex-direction:column}
.hero-side .sk-box{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.hero-side .guest{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-start}
.hero-side .guest .guest-btns{margin-top:auto;padding-top:16px}

/* ── Spenden-Hero ── */
.hero{
	position:relative;
	background:var(--paper);
	border:3px solid var(--ink);
	border-radius:26px;
	padding:26px 28px;
	box-shadow:var(--shadow);
	display:flex;flex-direction:column;
}
.hero-title{
	font-family:'Fredoka',sans-serif;font-weight:700;
	font-size:clamp(26px,3.4vw,38px);line-height:1.05;letter-spacing:-.01em;margin:0;
	text-wrap:balance;
}
.hero-title::after{
	/* Marker-Unterstreichung unter der Überschrift */
	content:'';display:block;width:120px;height:10px;margin-top:6px;border-radius:6px;
	background:var(--sun);
}
.hero-sub{font-size:14.5px;color:var(--muted);margin:10px 0 0;line-height:1.55;font-weight:600;max-width:64ch}
.hero-sub b{color:var(--ink)}
.hero-form{margin-top:18px;display:flex;flex-direction:column;gap:12px;flex:1 1 auto}

/* Spendenziel: Glas (Theme-JS) links, Titel + Balken rechts */
.goal{margin-top:20px;display:flex;gap:16px;align-items:center}
.goal-visual{flex:0 0 auto;display:flex;align-items:flex-end}
.goal-visual:empty{display:none}
.goal-main{flex:1 1 auto;min-width:0}
.goal-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.goal-title{font-family:'Fredoka',sans-serif;font-size:18px;font-weight:700;color:var(--ink);min-width:0}
.goal-nums{font-size:13px;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.goal-track{
	position:relative;
	height:18px;border-radius:999px;overflow:hidden;
	background:#fff;border:2.5px solid var(--ink);
}
.goal-bar{
	height:100%;width:0;border-radius:999px;
	background:var(--sky);
	transition:width .6s cubic-bezier(.2,.9,.3,1.1);
}
.goal-bar-preview{
	position:absolute;top:0;left:0;height:100%;width:0;
	background:repeating-linear-gradient(135deg,var(--lime) 0 5px,#fff 5px 10px);
	border-left:2px dashed var(--ink);
	transition:left .3s ease,width .3s ease;
}
.goal-preview-txt{color:var(--green);font-weight:800;margin-left:6px}

/* ── Direkt spenden ── */
.don-amounts{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.don-amt{
	border:2.5px solid var(--ink);background:#fff;color:var(--ink);
	font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;border-radius:14px;
	min-height:44px;padding:9px 17px;cursor:pointer;box-shadow:var(--shadow-sm);
	transition:transform .15s cubic-bezier(.34,1.56,.64,1), background .15s;
}
.don-amt:hover{transform:scale(1.07) rotate(-2deg)}
.don-amt.sel{background:var(--pink);color:#fff;transform:rotate(2deg) scale(1.05)}
.don-custom{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:15px;font-weight:800}
.don-custom input{
	width:100px;height:44px;border-radius:14px;border:2.5px solid var(--ink);
	background:#fff;color:var(--ink);padding:0 12px;font-size:15px;font-weight:800;font-family:inherit;
}
.don-custom input:focus{outline:none;box-shadow:0 0 0 4px var(--sky-soft)}
.don-fields{display:flex;flex-direction:column;gap:10px;flex:1 1 auto}
.don-fields textarea{flex:1 1 auto;min-height:100px}
.don-fields input[type=text],.don-fields textarea{
	width:100%;border-radius:14px;border:2.5px solid var(--ink);
	background:#fff;color:var(--ink);padding:12px 14px;font-size:14.5px;font-weight:700;
	font-family:inherit;resize:vertical;min-height:46px;
}
.don-fields input[type=text]::placeholder,.don-fields textarea::placeholder,.don-custom input::placeholder{color:#a19cb3;font-weight:600}
.don-fields input[type=text]:focus,.don-fields textarea:focus{outline:none;box-shadow:0 0 0 4px var(--sky-soft)}
.don-btn-row{display:flex;gap:10px;flex-wrap:wrap}
.don-btn{
	flex:1 1 200px;cursor:pointer;
	display:inline-flex;align-items:center;justify-content:center;gap:9px;
	background:var(--pink);color:#fff;border:2.5px solid var(--ink);
	font-family:'Fredoka',sans-serif;font-weight:600;font-size:17px;
	border-radius:18px;min-height:54px;padding:14px 20px;box-shadow:var(--shadow-sm);
	transition:transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
}
.don-btn svg{width:20px;height:20px;fill:currentColor;flex:0 0 auto}
.don-btn:hover:not(:disabled){animation:sbSquish .5s cubic-bezier(.34,1.56,.64,1) both}
.don-btn:active:not(:disabled){transform:translate(2px,3px);box-shadow:0 0 0 var(--ink);animation:none}
.don-btn:disabled{background:#eee;color:var(--muted);cursor:default;box-shadow:none}
.don-btn.stripe{background:var(--pink)}
.don-btn.paypal{background:var(--sun);color:var(--ink)}
@keyframes sbSquish{30%{transform:scale(1.06,.9)}60%{transform:scale(.96,1.06)}100%{transform:translate(-1px,-2px)}}
.don-hint{font-size:12.5px;color:var(--muted);line-height:1.5}
.hero-info{
	margin-top:18px;padding-top:16px;border-top:2.5px dashed var(--line);
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
}
.hi-item{display:flex;gap:10px;align-items:flex-start;min-width:0}
.hi-ico{
	flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
	background:var(--paper-2);border:2.5px solid var(--ink);font-size:16px;box-shadow:2px 2px 0 var(--ink);
}
.hi-item b{display:block;font-size:13px;font-weight:800;margin-bottom:2px}
.hi-item span{display:block;font-size:12.5px;color:var(--muted);line-height:1.45}
.don-foot{font-size:12.5px;color:var(--muted);min-height:16px}
.don-foot.err{color:var(--pink);font-weight:800}
.don-opt{
	display:flex;align-items:flex-start;gap:11px;cursor:pointer;
	padding:11px 13px;border-radius:14px;
	background:var(--paper-2);border:2.5px dashed var(--ink);
	transition:opacity .15s ease;
}
.don-opt input{position:absolute;opacity:0;width:0;height:0}
.don-opt-box{
	flex:0 0 auto;width:22px;height:22px;margin-top:1px;border-radius:7px;
	border:2.5px solid var(--ink);background:#fff;
	display:grid;place-items:center;transition:background .15s ease;
}
.don-opt-box::after{
	content:'';width:6px;height:11px;border:solid var(--ink);border-width:0 3px 3px 0;
	transform:rotate(45deg) translate(-1px,-1px);opacity:0;
}
.don-opt input:checked + .don-opt-box{background:var(--lime)}
.don-opt input:checked + .don-opt-box::after{opacity:1}
.don-opt input:focus-visible + .don-opt-box{box-shadow:0 0 0 4px var(--sky-soft)}
.don-opt.disabled{opacity:.5;cursor:not-allowed}
.don-opt-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.don-opt-title{font-size:14px;font-weight:800}
.don-opt-sub{font-size:12.5px;color:var(--muted);line-height:1.45}
.don-opt-sub b{color:var(--ink)}
/* Wunschname fürs Klingelschild (unter der Checkbox) */
.don-opt-extra{display:flex;flex-direction:column;gap:5px;margin:-4px 0 0 32px}
.don-opt-extra input[type=text]{
	width:100%;border-radius:12px;border:2.5px solid var(--ink);
	background:#fff;color:var(--ink);padding:9px 12px;font-size:13.5px;font-weight:700;font-family:inherit;
}
.don-opt-extra input[type=text]::placeholder{color:#a19cb3;font-weight:600}
.don-opt-extra input[type=text]:focus{outline:none;box-shadow:0 0 0 4px var(--sky-soft)}
.don-opt-extra-sub{font-size:11.5px;color:var(--muted);line-height:1.4}
.don-note{border-radius:14px;padding:11px 14px;font-size:13.5px;font-weight:800;border:2.5px solid var(--ink);box-shadow:var(--shadow-sm)}
.don-note.ok{background:var(--lime);color:var(--ink)}
.don-note.warn{background:var(--sun);color:var(--ink)}

/* ── Live-Bereich ── */
.live-zone{display:grid;grid-template-columns:2fr 1fr;gap:22px;align-items:start}
.live-zone.calm{grid-template-columns:minmax(0,1fr)}
.live-col{display:flex;flex-direction:column;gap:22px;min-width:0}
.live-idle{
	display:flex;align-items:center;gap:10px;
	border:2.5px dashed var(--ink);border-radius:16px;
	padding:14px 16px;color:var(--muted);font-size:13.5px;line-height:1.45;font-weight:700;
	background:rgba(255,255,255,.7);
}
.live-idle svg{width:18px;height:18px;fill:var(--muted);flex:0 0 auto}

/* ── Supporter-Status-Banner ── */
.sup-banner{
	display:flex;align-items:center;gap:13px;
	padding:13px 15px;border-radius:16px;margin-bottom:14px;
	border:2.5px solid var(--ink);background:var(--paper-2);box-shadow:var(--shadow-sm);
}
.sup-banner.ok{background:var(--lime)}
.sup-banner.warn{background:var(--sun)}
.sup-banner .ico{font-size:24px;line-height:1;flex:0 0 auto}
.sup-banner .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}
.sup-banner .val{font-family:'Fredoka',sans-serif;font-size:17px;font-weight:700;margin-top:2px}
.sup-banner.ok .val,.sup-banner.warn .val{color:var(--ink)}
.sup-banner .why{font-size:12.5px;color:var(--muted);margin-top:2px}

/* ── Dienst-Verbindungen ── */
.svc-lbl{font-family:'Fredoka',sans-serif;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;margin-bottom:10px}
.svc{display:flex;flex-direction:column;gap:9px}
.svc-row{
	display:flex;align-items:center;gap:12px;flex-wrap:wrap;
	padding:11px 13px;border-radius:14px;
	background:#fff;border:2.5px solid var(--ink);
}
.svc-ico{
	width:34px;height:34px;border-radius:10px;flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;border:2px solid var(--ink);
}
.svc-ico.patreon{background:var(--patreon)}
.svc-ico.youtube{background:var(--youtube)}
.svc-ico svg{width:18px;height:18px;fill:#fff}
.svc-ico.patreon svg,.svc-ico.youtube svg{fill:#fff}
.svc-main{flex:1 1 120px;min-width:0}
.svc-name{font-size:14.5px;font-weight:800}
.svc-sub{font-size:12.5px;color:var(--muted);margin-top:2px;word-break:break-word}
.svc-badge{
	flex:0 0 auto;font-size:12px;font-weight:800;border-radius:999px;border:2px solid var(--ink);
	padding:4px 10px;white-space:nowrap;
}
.svc-badge.ok{background:var(--lime);color:var(--ink)}
.svc-badge.warn{background:var(--sun);color:var(--ink)}
.svc-badge.off{background:#eee;color:var(--muted)}
.svc-login{
	flex:0 0 auto;text-decoration:none;cursor:pointer;
	display:inline-flex;align-items:center;justify-content:center;
	font-family:'Fredoka',sans-serif;font-size:14px;font-weight:600;color:#fff;
	border:2.5px solid var(--ink);border-radius:12px;min-height:42px;padding:9px 14px;white-space:nowrap;
	box-shadow:var(--shadow-sm);transition:transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
}
.svc-login:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--ink)}
.svc-login:active{transform:translate(2px,3px);box-shadow:0 0 0 var(--ink)}
.svc-login.patreon{background:var(--patreon)}
.svc-login.google{background:#4285f4}

.divider{height:0;border-top:2.5px dashed var(--line);margin:18px 0}

/* ── Chat-Code-Schritte ── */
.steps{display:flex;flex-direction:column;gap:15px}
.step{display:flex;gap:12px}
.step .num{
	flex:0 0 auto;width:28px;height:28px;border-radius:50%;
	background:var(--sun);color:var(--ink);border:2.5px solid var(--ink);
	font-family:'Fredoka',sans-serif;font-weight:700;font-size:14px;
	display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.step .txt{font-size:13.5px;line-height:1.5;min-width:0}
.step .txt b{color:var(--ink)}
.step .txt .hint{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.code-row{display:flex;gap:10px;flex-wrap:wrap;margin:13px 0 4px}
.code{
	flex:1 1 190px;min-width:0;
	display:flex;align-items:center;justify-content:center;
	font-family:ui-monospace,'Roboto Mono',monospace;
	font-size:clamp(15px,4vw,19px);font-weight:800;letter-spacing:.5px;
	color:var(--ink);background:var(--paper-2);
	border:2.5px dashed var(--ink);border-radius:14px;
	padding:12px 14px;user-select:all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.copy-btn{
	flex:1 1 100px;cursor:pointer;
	background:var(--sky);color:var(--ink);border:2.5px solid var(--ink);
	font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;
	border-radius:14px;min-height:44px;padding:11px 16px;box-shadow:var(--shadow-sm);
	transition:transform .12s cubic-bezier(.34,1.56,.64,1), background .2s ease, box-shadow .12s;
}
.copy-btn:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--ink)}
.copy-btn:active{transform:translate(2px,3px);box-shadow:0 0 0 var(--ink)}
.copy-btn.done{background:var(--lime)}
.validity{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:13px;line-height:1.45}
.validity svg{width:15px;height:15px;fill:var(--muted);flex:0 0 auto}

/* ── Verknüpft-Box ── */
.linked-box{
	display:flex;align-items:center;gap:13px;
	padding:13px 15px;border-radius:16px;
	background:var(--sky-soft);border:2.5px solid var(--ink);
}
.linked-ico{font-size:26px;line-height:1;flex:0 0 auto}
.linked-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}
.linked-name{font-family:'Fredoka',sans-serif;font-size:17px;font-weight:700;color:var(--ink);margin-top:2px;word-break:break-word}
.linked-hint{font-size:12.5px;color:var(--muted);margin-top:11px;line-height:1.5}

/* ── Vote-Farbe ── */
.color-box{
	display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
	margin-top:14px;padding:13px 15px;border-radius:16px;
	background:#fff;border:2.5px solid var(--ink);
}
.color-box .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}
.color-box .hint{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4}
.color-pick{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.color-swatch{
	position:relative;width:46px;height:46px;border-radius:14px;flex:0 0 auto;
	border:2.5px solid var(--ink);overflow:hidden;cursor:pointer;box-shadow:2px 2px 0 var(--ink);
}
.color-swatch input[type=color]{
	position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);
	padding:0;border:none;background:none;cursor:pointer;opacity:0;
}
.color-val{
	font-family:ui-monospace,'Roboto Mono',monospace;font-size:13px;font-weight:800;
	color:var(--ink);min-width:74px;text-align:left;
}
.color-foot{font-size:12.5px;color:var(--muted);margin-top:9px;min-height:15px}
.color-foot.ok{color:var(--green);font-weight:800}
.color-foot.err{color:var(--pink);font-weight:800}

/* ── Live-Vote-Panel ── */
.vote-q{font-family:'Fredoka',sans-serif;font-size:20px;font-weight:700;margin-bottom:13px;line-height:1.25}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{
	position:relative;display:flex;align-items:center;gap:11px;
	padding:11px 14px;border-radius:16px;cursor:pointer;min-height:50px;
	background:#fff;border:2.5px solid var(--ink);box-shadow:var(--shadow-sm);
	color:var(--ink);font-family:inherit;font-size:14.5px;font-weight:800;text-align:left;width:100%;
	transition:transform .15s cubic-bezier(.34,1.56,.64,1), background .15s;
	overflow:hidden;
}
.opt:hover{transform:translateX(3px)}
.opt:active{transform:scale(.99)}
.opt .fill{position:absolute;inset:0;background:var(--sky);opacity:.4;width:0;transition:width .45s cubic-bezier(.2,.9,.3,1.1);z-index:0}
.opt > *{position:relative;z-index:1}
.opt .idx{
	flex:0 0 auto;width:26px;height:26px;border-radius:8px;
	background:var(--paper-2);color:var(--ink);border:2px solid var(--ink);
	display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;
}
.opt .otext{flex:1 1 auto;min-width:0}
.opt .cnt{flex:0 0 auto;font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}
.opt.sel{background:var(--sun)}
.opt.sel .fill{background:var(--pink);opacity:.45}
.opt.sel .idx{background:var(--pink);color:#fff}
.opt:disabled{cursor:default}
.opt:disabled:hover{transform:none}
.opt.sel:disabled:hover{transform:none}
.opts.locked .opt:not(.sel){opacity:.55}
.vote-empty{
	background:var(--paper-2);border:2.5px dashed var(--ink);border-radius:14px;
	padding:16px;text-align:center;color:var(--muted);font-size:13.5px;font-weight:700;
}
.vote-foot{font-size:12.5px;color:var(--muted);margin-top:11px;text-align:center;min-height:16px}
.vote-foot.ok{color:var(--green);font-weight:800}
.vote-foot.err{color:var(--pink);font-weight:800}
.emotes{display:flex;gap:12px;justify-content:center;margin-top:14px}
.emote-btn{
	width:54px;height:54px;border-radius:50%;cursor:pointer;
	border:2.5px solid var(--ink);background:#fff;box-shadow:var(--shadow-sm);
	font-size:25px;line-height:1;display:flex;align-items:center;justify-content:center;
	transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.emote-btn:hover{transform:scale(1.15) rotate(10deg)}
.emote-btn:active{transform:scale(.9)}
.emote-btn.pop{transform:scale(1.25) rotate(-10deg)}

/* ── Stream-Bingo ── */
.bg-lock{
	display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;
	color:var(--ink);background:var(--sun);border:2px solid var(--ink);border-radius:999px;padding:4px 10px;white-space:nowrap;
}
.bg-hint{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:12px}
/* Hinweis-Box: Login/Supporter nötig bzw. Bedienung */
.bg-note{
	font-size:13px;line-height:1.5;padding:10px 12px;border-radius:14px;margin-bottom:12px;
	background:var(--sky-soft);border:2.5px solid var(--ink);color:var(--ink);font-weight:600;
}
.bg-note b{font-weight:800}
.bg-note a{color:var(--ink);text-decoration:underline;font-weight:800}
.bg-view{display:inline-flex;background:#fff;border:2.5px solid var(--ink);border-radius:999px;padding:3px;gap:2px}
.bg-view-btn{
	border:none;cursor:pointer;background:transparent;color:var(--muted);font-family:'Fredoka',sans-serif;
	font-size:13px;font-weight:600;border-radius:999px;min-height:32px;padding:5px 14px;white-space:nowrap;
	transition:background .15s, color .15s;
}
.bg-view-btn.on{background:var(--sky);color:var(--ink)}
.bg-grid{display:grid;gap:9px}
.bg-cell{
	position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
	min-height:68px;padding:8px 6px;border-radius:14px;cursor:pointer;user-select:none;
	background:#fff;border:2.5px solid var(--ink);box-shadow:var(--shadow-sm);
	font-size:12px;font-weight:800;line-height:1.25;word-break:break-word;
	transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .15s, box-shadow .15s;
}
.bg-cell:hover{transform:rotate(-2deg) scale(1.04);z-index:2}
.bg-cell:nth-child(even):hover{transform:rotate(2deg) scale(1.04)}
.bg-cell.sel{background:var(--sky);transform:scale(.96);box-shadow:1px 1px 0 var(--ink)}
.bg-cell.drop{border-style:dashed;background:var(--sky-soft)}
.bg-cell.free{background:var(--sun);font-family:'Fredoka',sans-serif;font-size:14px;font-weight:700}
.bg-cell.done{background:var(--lime)}
.bg-cell.done .mark{font-weight:800}
.bg-cell.win{background:var(--pink);color:#fff;animation:sbWiggle 1s ease-in-out infinite}
.bg-cell.locked{cursor:default}
.bg-cell.locked:hover{transform:none}
.bg-cell .mark{position:absolute;top:3px;right:6px;font-size:12px;line-height:1}
.bg-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.bg-btn{
	flex:1 1 120px;cursor:pointer;
	background:#fff;color:var(--ink);border:2.5px solid var(--ink);box-shadow:var(--shadow-sm);
	font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;border-radius:14px;min-height:46px;padding:11px 16px;
	transition:transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
}
.bg-btn:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--ink)}
.bg-btn:active{transform:translate(2px,3px);box-shadow:0 0 0 var(--ink)}
.bg-empty{
	background:var(--paper-2);border:2.5px dashed var(--ink);border-radius:14px;
	padding:16px;text-align:center;color:var(--muted);font-size:13.5px;font-weight:700;
}
.bg-win{
	background:var(--sun);border:2.5px solid var(--ink);box-shadow:var(--shadow-sm);
	border-radius:14px;padding:13px 15px;margin-bottom:12px;
	font-family:'Fredoka',sans-serif;font-size:17px;font-weight:700;color:var(--ink);text-align:center;
	animation:sbWiggle 1.6s ease-in-out infinite;
}
.bg-foot{font-size:12.5px;color:var(--muted);margin-top:11px;text-align:center;min-height:16px}
.bg-foot.ok{color:var(--green);font-weight:800}
.bg-foot.err{color:var(--pink);font-weight:800}

/* ── Steam-Key ── */
.sk-box{background:var(--paper-2);border:2.5px solid var(--ink);border-radius:16px;padding:15px 17px}
.sk-text{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:14px}
.sk-btn{
	width:100%;cursor:pointer;
	background:var(--sky);color:var(--ink);border:2.5px solid var(--ink);box-shadow:var(--shadow-sm);
	font-family:'Fredoka',sans-serif;font-weight:600;font-size:16px;
	border-radius:14px;min-height:48px;padding:13px 18px;
	transition:transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
}
.sk-btn:hover:not(:disabled){transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--ink)}
.sk-btn:active:not(:disabled){transform:translate(2px,3px);box-shadow:0 0 0 var(--ink)}
.sk-btn:disabled{background:#eee;color:var(--muted);cursor:default;box-shadow:none}
.sk-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;margin-bottom:9px}
.sk-key-row{display:flex;gap:10px;flex-wrap:wrap}
.sk-key{
	flex:1 1 190px;min-width:0;
	display:flex;align-items:center;justify-content:center;
	font-family:ui-monospace,'Roboto Mono',monospace;
	font-size:clamp(14px,3.8vw,18px);font-weight:800;letter-spacing:.5px;
	color:var(--ink);background:var(--lime);
	border:2.5px solid var(--ink);border-radius:14px;box-shadow:var(--shadow-sm);
	padding:12px 14px;user-select:all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sk-copy{
	flex:1 1 100px;cursor:pointer;
	background:#fff;color:var(--ink);border:2.5px solid var(--ink);box-shadow:var(--shadow-sm);
	font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;
	border-radius:14px;min-height:44px;padding:11px 16px;
	transition:transform .12s cubic-bezier(.34,1.56,.64,1), background .2s ease, box-shadow .12s;
}
.sk-copy:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--ink)}
.sk-copy:active{transform:translate(2px,3px);box-shadow:0 0 0 var(--ink)}
.sk-copy.done{background:var(--lime)}
.sk-hint{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.5}
.sk-teaser{font-size:13.5px;color:var(--muted);line-height:1.55}
.sk-foot{font-size:12.5px;color:var(--muted);margin-top:10px;text-align:center;min-height:16px}
.sk-foot.ok{color:var(--green);font-weight:800}
.sk-foot.err{color:var(--pink);font-weight:800}
.sk-confetti{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;will-change:transform,opacity}

/* ── Upgrade-Hinweis ── */
.upgrade{padding:2px 0}
.upgrade h2{font-family:'Fredoka',sans-serif;font-size:18px;font-weight:700;margin:0 0 7px}
.upgrade p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0 0 14px}
.join-row{display:flex;gap:10px;flex-wrap:wrap}
.join-btn{
	display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
	color:#fff;font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;flex:1 1 160px;
	border:2.5px solid var(--ink);border-radius:14px;min-height:46px;padding:11px 18px;box-shadow:var(--shadow-sm);
	transition:transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
}
.join-btn.patreon{background:var(--patreon)}
.join-btn.youtube{background:var(--youtube)}
.join-btn:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--ink)}
.join-btn:active{transform:translate(2px,3px);box-shadow:0 0 0 var(--ink)}
.upgrade .small{font-size:12.5px;color:var(--muted);margin-top:12px}

/* ── Zuletzt unterstützt ── */
.hero-side > .panel.recent{flex:0 0 auto}
.rd-empty{font-size:13.5px;color:var(--muted);font-weight:700}
.rd-donors{display:flex;flex-wrap:wrap;margin-bottom:12px;padding-left:4px}
.rd-chip{
	display:inline-flex;align-items:center;gap:7px;max-width:100%;
	padding:4px 11px 4px 4px;border-radius:999px;margin:0 6px 6px 0;
	background:#fff;border:2.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
	font-size:12.5px;font-weight:800;
	animation:sbBob 2.6s ease-in-out infinite;
}
.rd-chip:nth-child(2){animation-delay:-.5s}.rd-chip:nth-child(3){animation-delay:-1s}
.rd-chip:nth-child(4){animation-delay:-1.5s}.rd-chip:nth-child(5){animation-delay:-2s}
@keyframes sbBob{50%{transform:translateY(-4px)}}
.rd-chip.new{animation:sbPop .5s cubic-bezier(.34,1.56,.64,1), sbBob 2.6s ease-in-out .5s infinite}
@keyframes sbPop{0%{transform:scale(.6) rotate(-8deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.rd-ava{
	width:24px;height:24px;border-radius:50%;flex:0 0 auto;object-fit:cover;
	background:var(--sky);color:var(--ink);border:2px solid var(--ink);
	display:grid;place-items:center;font-size:11px;font-weight:900;
}
.rd-chip:nth-child(2n) .rd-ava{background:var(--sun)}
.rd-chip:nth-child(3n) .rd-ava{background:var(--pink);color:#fff}
.rd-chip:nth-child(4n) .rd-ava{background:var(--lime)}
.rd-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.rd-msgs{display:flex;flex-direction:column;gap:12px}
.rd-msg{
	position:relative;
	font-size:13.5px;line-height:1.45;padding:9px 13px;border-radius:16px;
	background:#fff;border:2.5px solid var(--ink);overflow-wrap:anywhere;font-weight:600;
}
.rd-msg::after{
	/* Sprechblasen-Zipfel */
	content:'';position:absolute;left:18px;bottom:-9px;width:12px;height:12px;background:#fff;
	border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(45deg);
}
.rd-msg b{color:var(--grape)}
.rd-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;margin-bottom:8px}

/* ── Gast-Karte „Mitmachen als Supporter" ── */
.guest h2{font-family:'Fredoka',sans-serif;font-size:20px;font-weight:700;margin:0 0 6px}
.guest-intro{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0 0 14px}
.perks{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:10px}
.perks li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.45;color:var(--ink);font-weight:700}
.perks svg{width:20px;height:20px;fill:var(--ink);background:var(--lime);border:2px solid var(--ink);border-radius:50%;padding:2px;flex:0 0 auto;margin-top:0}
.guest-btns{display:flex;flex-direction:column;gap:10px}
.guest-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
	font-family:'Fredoka',sans-serif;font-weight:600;font-size:15px;
	border:2.5px solid var(--ink);border-radius:14px;min-height:48px;padding:12px 18px;box-shadow:var(--shadow-sm);
	transition:transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
}
.guest-btn svg{width:18px;height:18px;flex:0 0 auto}
.guest-btn:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--ink)}
.guest-btn:active{transform:translate(2px,3px);box-shadow:0 0 0 var(--ink)}
.guest-btn.patreon{background:var(--patreon);color:#fff}
.guest-btn.patreon svg{fill:#fff}
.guest-btn.google{background:#fff;color:var(--ink)}
.guest-btn.google svg{fill:var(--ink)}
.guest-note{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.5}

/* ── Fußzeile ── */
.foot{
	border-top:3px solid var(--ink);padding:16px 18px 26px;
	background:rgba(255,255,255,.9);
	font-size:13px;font-weight:700;color:var(--muted);text-align:center;line-height:1.7;
}
.foot b{color:var(--ink);font-weight:800}
.foot a{color:var(--muted)}

/* ── Spendenglas mit Münzen (Canvas aus theme.js) ── */
/* Das Canvas ragt seitlich (20px) und unten (30px) über das Glas hinaus,
   damit übergelaufene Münzen sichtbar außen herunterfallen. Werte müssen zu
   PAD_X/PAD_B in theme.js passen. */
.sb-jar{position:relative;width:88px;height:112px;flex:0 0 auto}
.sb-jar canvas{display:block;position:absolute;left:-20px;top:0;width:calc(100% + 40px);height:calc(100% + 30px);pointer-events:none}

/* ── Rechtsseiten (Impressum, Datenschutz) ── */
.legal-page{
	display:flex;align-items:center;justify-content:center;
	padding:32px 18px;
}
.legal-card{
	width:100%;max-width:1100px;
	background:var(--paper);
	border:3px solid var(--ink);
	border-radius:22px;
	box-shadow:var(--shadow);
	padding:28px 32px 32px;
}
.legal-card h1{
	font-family:'Fredoka',sans-serif;font-size:22px;font-weight:700;margin:0 0 4px;color:var(--ink);
}
.legal-sub{font-size:13px;color:var(--muted);margin-bottom:24px;font-weight:700}
.legal-card h2{
	font-family:'Fredoka',sans-serif;font-size:15px;font-weight:700;margin:26px 0 8px;color:var(--ink);
}
.legal-card h3{font-size:13.5px;font-weight:800;margin:16px 0 6px;color:var(--ink)}
.legal-card p,.legal-card li{font-size:13.5px;line-height:1.65;color:var(--muted)}
.legal-card p{margin:0 0 10px}
.legal-card ul{margin:0 0 10px;padding-left:20px}
.legal-card p b,.legal-card li b{color:var(--ink)}
.legal-card a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.legal-link{margin-top:22px}
.legal-card code{font-size:12.5px;padding:1px 5px;border-radius:5px;background:rgba(127,127,127,.15)}
/* Spezifischer als `.legal-card a`, sonst gewinnt dessen Linkfarbe und die
   Schrift verschwindet auf dem Button-Hintergrund. */
.legal-card .legal-back{
	display:inline-block;margin-top:26px;text-decoration:none;
	font-family:'Fredoka',sans-serif;font-size:14px;font-weight:600;
	color:#fff;background:var(--ink);
	border:2.5px solid var(--ink);border-radius:14px;padding:10px 18px;
	box-shadow:var(--shadow-sm);
	transition:transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .12s;
}
.legal-card .legal-back:hover{transform:translate(-1px,-2px);box-shadow:5px 6px 0 var(--ink);color:#fff}
.legal-card .legal-back:active{transform:translate(2px,3px);box-shadow:0 0 0 var(--ink)}

/* ── Mobil ── */
@media (max-width:1099px){
	.hero-row{grid-template-columns:minmax(0,1fr)}
	.live-zone,.live-zone.calm{grid-template-columns:minmax(0,1fr)}
	.qnav{display:block}
	.hero{padding:20px 18px;border-radius:20px}
	.panel{padding:16px 16px}
	.shell{padding:16px 14px 32px;gap:18px}
	.live-col{gap:18px}
	.me-name{display:none}
}
@media (max-width:760px){
	.hero-info{grid-template-columns:1fr}
	.don-btn{flex:1 1 100%}
	.goal{flex-direction:column;align-items:stretch}
	.goal-visual{justify-content:center}
	.sb-jar{width:120px;height:90px}
}
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}