/*
 * Schnurrbartfritz – Designsystem
 * Farben abgeleitet aus Logo, Cover Band 1 und Figur (Umhang, Schal, Fell, Sterne).
 * Keine externen Schriften (Datenschutz): systemeigene, runde Schriftarten.
 */
:root {
	--sbf-night: #13205c;        /* Umhang / Nachthimmel */
	--sbf-night-deep: #0b1440;
	--sbf-sky: #2a4cc4;          /* Logo-Kontur */
	--sbf-gold: #ffc42e;         /* Logo-Schrift, Sterne */
	--sbf-gold-deep: #f2a20c;
	--sbf-orange: #ef8a1f;       /* Fell */
	--sbf-red: #d42a1f;          /* Schal */
	--sbf-cream: #fff8ec;        /* warme Textfläche */
	--sbf-cream-2: #fdeccd;
	--sbf-ink: #1d2340;
	--sbf-muted: #5b6182;
	--sbf-ok: #1a7f37;
	--sbf-radius: 18px;
	--sbf-radius-sm: 10px;
	--sbf-shadow: 0 10px 30px rgba(11, 20, 64, .18);
	--sbf-font: "Nunito", "Quicksand", "Segoe UI Rounded", "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--sbf-space: clamp(16px, 3vw, 28px);
}

/* ---------- Grundbausteine ---------- */
.sbf-card {
	background: var(--sbf-cream);
	color: var(--sbf-ink);
	border-radius: var(--sbf-radius);
	box-shadow: var(--sbf-shadow);
	padding: var(--sbf-space);
	margin: 0 auto 24px;
	font-family: var(--sbf-font);
}
.sbf-auth { max-width: 560px; }
.sbf-auth-logo { display: flex; justify-content: center; margin-bottom: 12px; }
.sbf-logo { display: block; margin: 0 auto; max-width: 280px; width: 80%; height: auto; }

.sbf-btn {
	display: inline-block;
	font-family: var(--sbf-font);
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1.2;
	padding: .8em 1.6em;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none !important;
	transition: transform .15s ease, box-shadow .15s ease;
}
.sbf-btn:hover, .sbf-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(11, 20, 64, .25); }
.sbf-btn-gold { background: var(--sbf-gold); color: var(--sbf-night) !important; }
.sbf-btn-gold:hover { background: var(--sbf-gold-deep); }
.sbf-btn-ghost { background: transparent; color: var(--sbf-night) !important; border-color: var(--sbf-night); }
.sbf-btn:focus-visible, .sbf-form input:focus-visible { outline: 3px solid var(--sbf-sky); outline-offset: 2px; }

/* ---------- Schnurrbartfritz spricht ---------- */
.sbf-speech { display: flex; align-items: flex-start; gap: 14px; margin: 0 0 20px; font-family: var(--sbf-font); }
.sbf-speech-face { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 64px; border: 3px solid var(--sbf-gold); object-fit: cover; }
.sbf-speech-bubble {
	position: relative;
	margin: 0;
	background: #fff;
	color: var(--sbf-ink);
	border: 2px solid var(--sbf-night);
	border-radius: var(--sbf-radius);
	padding: 12px 16px;
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.45;
}
.sbf-speech-bubble::before {
	content: "";
	position: absolute;
	left: -10px; top: 20px;
	border: 8px solid transparent;
	border-right-color: var(--sbf-night);
	border-left: 0;
}

/* ---------- Formulare ---------- */
.sbf-form p { margin: 0 0 14px; }
.sbf-form label { display: block; font-weight: 700; margin-bottom: 4px; }
.sbf-form input[type=text], .sbf-form input[type=email], .sbf-form input[type=password] {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-size: 1rem;
	border: 2px solid #d9cdb5;
	border-radius: var(--sbf-radius-sm);
	background: #fff;
	color: var(--sbf-ink);
}
.sbf-form input:disabled { background: #f1ece2; color: var(--sbf-muted); }
.sbf-form small { color: var(--sbf-muted); }
.sbf-check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.sbf-check label > span { flex: 1 1 auto; min-width: 0; }
.sbf-submit { text-align: center; margin-top: 20px !important; }
.sbf-check input { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 1px; accent-color: var(--sbf-night); }
.sbf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .sbf-row { grid-template-columns: 1fr; } }
.sbf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.sbf-links, .sbf-small { text-align: center; font-size: .95rem; color: var(--sbf-muted); }
.sbf-links a { color: var(--sbf-night); font-weight: 700; }
.sbf-perks { list-style: none; padding: 0; margin: 0 0 16px; }
.sbf-perks li { padding-left: 28px; position: relative; margin-bottom: 6px; font-weight: 600; }
.sbf-perks li::before { content: "★"; color: var(--sbf-gold-deep); position: absolute; left: 4px; }

.sbf-msg { border-radius: var(--sbf-radius-sm); padding: 12px 16px; margin: 0 0 16px; font-weight: 600; font-family: var(--sbf-font); }
.sbf-msg ul { margin: 0; padding-left: 18px; }
.sbf-msg-error { background: #fde5e3; border: 2px solid var(--sbf-red); color: #7d1510; }
.sbf-msg-ok { background: #e3f5e8; border: 2px solid var(--sbf-ok); color: #0d4a20; }

/* ---------- Konto ---------- */
.sbf-account { max-width: 960px; margin: 0 auto; font-family: var(--sbf-font); color: var(--sbf-ink); }
.sbf-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.sbf-tabs a {
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--sbf-cream-2);
	color: var(--sbf-night);
	font-weight: 700;
	text-decoration: none;
}
.sbf-tabs a.is-active { background: var(--sbf-night); color: var(--sbf-gold); }
.sbf-tabs .sbf-tab-logout { margin-left: auto; background: transparent; text-decoration: underline; }
@media (max-width: 640px) { .sbf-tabs a { flex: 1 1 calc(50% - 8px); text-align: center; } .sbf-tabs .sbf-tab-logout { margin-left: 0; } }

.sbf-library { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.sbf-library-item { display: grid; grid-template-columns: 110px 1fr; gap: 16px; background: var(--sbf-cream); border-radius: var(--sbf-radius); padding: 14px; box-shadow: var(--sbf-shadow); }
.sbf-library-cover img { width: 110px; height: auto; border-radius: 8px; display: block; }
.sbf-cover-placeholder { display: grid; place-items: center; width: 110px; aspect-ratio: 2 / 3; background: var(--sbf-night); color: var(--sbf-gold); font-size: 2rem; border-radius: 8px; }
.sbf-library-body h3 { margin: 2px 0 6px; font-size: 1.25rem; color: var(--sbf-night); }
.sbf-kicker { margin: 0; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; font-weight: 800; color: var(--sbf-red); }
.sbf-meta { color: var(--sbf-muted); font-size: .92rem; margin: 0 0 10px; }
.sbf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.sbf-list { padding-left: 20px; }
@media (max-width: 480px) { .sbf-library-item { grid-template-columns: 80px 1fr; } .sbf-library-cover img, .sbf-cover-placeholder { width: 80px; } }

/* Funktionsseiten: Theme-Titel ausblenden, Schnurrbartfritz begrüßt selbst. */
.sbf-page .entry-header, .sbf-page .page-title { display: none; }
.sbf-page .site-main, .sbf-page .content-area { background: linear-gradient(180deg, var(--sbf-night) 0, var(--sbf-night-deep) 100%); }
.sbf-page .entry-content-wrap, .sbf-page .entry.content-bg { background: transparent !important; box-shadow: none !important; }
.sbf-page .sbf-account h2 { color: var(--sbf-gold); }
.sbf-page .sbf-account h3 { color: var(--sbf-cream); }
.sbf-page .sbf-account .sbf-card h3, .sbf-page .sbf-library-body h3 { color: var(--sbf-night); }

/* ---------- Bewertungen ---------- */
.sbf-review { max-width: 760px; margin: 0 auto; font-family: var(--sbf-font); color: var(--sbf-ink); }
.sbf-review-head { display: flex; gap: 18px; align-items: center; }
.sbf-review-cover img { width: 96px; height: auto; border-radius: 8px; display: block; }
.sbf-review-title { margin: 4px 0 0; font-size: clamp(1.4rem, 4vw, 2rem); color: var(--sbf-night); line-height: 1.2; }
.sbf-rating, .sbf-choice { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.sbf-rating legend, .sbf-choice legend { padding: 0; margin-bottom: 6px; display: block; }
.sbf-rating legend span { display: block; font-weight: 400; color: var(--sbf-muted); font-size: .95rem; }
/* Sterne: Reihenfolge 5→1 im DOM, per row-reverse als 1→5 dargestellt, damit :checked ~ label die linken Sterne füllt. */
.sbf-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.sbf-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sbf-stars label { font-size: 2.4rem; line-height: 1; color: #d9cdb5; cursor: pointer; transition: transform .1s ease, color .1s ease; margin: 0; }
.sbf-stars label:hover, .sbf-stars label:hover ~ label, .sbf-stars input:checked ~ label { color: var(--sbf-gold-deep); }
.sbf-stars label:hover { transform: scale(1.15); }
.sbf-stars input:focus-visible + label { outline: 3px solid var(--sbf-sky); outline-offset: 2px; border-radius: 4px; }
.sbf-na { display: inline-flex !important; gap: 6px; align-items: center; font-weight: 600 !important; font-size: .92rem; color: var(--sbf-muted); margin-left: 6px; }
.sbf-choice label { display: flex; gap: 10px; align-items: center; font-weight: 600; margin-bottom: 6px; }
.sbf-choice input { width: 20px; height: 20px; accent-color: var(--sbf-night); }
.sbf-form textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 1rem; border: 2px solid #d9cdb5; border-radius: var(--sbf-radius-sm); font-family: inherit; }
.sbf-center { text-align: center; }
.sbf-lead { font-size: 1.1rem; }
.sbf-page .sbf-review > h2, .sbf-page .sbf-review > .sbf-lead, .sbf-on-dark { color: var(--sbf-cream); }
.sbf-page .sbf-review > h2 { color: var(--sbf-gold); }
.sbf-reward-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.sbf-reward { display: flex; flex-direction: column; margin: 0; }
.sbf-reward h3 { margin: 4px 0; color: var(--sbf-night); }
.sbf-reward .sbf-submit { margin-top: auto !important; }
.sbf-reward-cover img { width: 90px; height: auto; border-radius: 6px; display: block; margin: 0 auto 10px; }
@media (max-width: 480px) { .sbf-review-head { flex-direction: column; text-align: center; } .sbf-stars label { font-size: 2.1rem; } }