/*
 * Styles for the "Wie bewerte ich ein Bild?" page (see Jafo_Pages::bewertung_content()).
 * Enqueued as a real stylesheet rather than an inline <style> block in the page content, same
 * reasoning as jafo-help.css (some hosts strip <style> tags from saved post content).
 */
.jafo-bewertung {
	--jb-ink: #1A1D21;
	--jb-muted: #6B7280;
	--jb-line: #E6E7E9;
	--jb-panel: #FFFFFF;
	--jb-bg: #F7F8FA;
	--jb-accent: #2F5D8A;
	--jb-accent-ink: #FFFFFF;
	--jb-accent-soft: #E4ECF3;
	--jb-good: #2F7A4F;
	--jb-good-soft: #E4F1E8;
	--jb-warn: #9A6A1E;
	--jb-warn-soft: #F4EAD8;
	--jb-bad: #A23B2E;
	--jb-bad-soft: #F5E3E0;
	max-width: 980px;
	margin: 0 auto;
	color: var(--jb-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.55;
}
.jafo-bewertung * { box-sizing: border-box; }
.jafo-bewertung h1, .jafo-bewertung h2, .jafo-bewertung h3 { line-height: 1.25; }

.jb-hero {
	background: linear-gradient(135deg, var(--jb-accent-soft), var(--jb-good-soft));
	border: 1px solid var(--jb-line);
	border-radius: 16px; padding: 40px 36px; margin-bottom: 28px;
}
.jb-hero h1 { margin: 0 0 10px; font-size: 30px; font-weight: 800; letter-spacing: -0.01em; }
.jb-hero p { margin: 0; font-size: 16px; color: #3A3F46; max-width: 68ch; }

.jb-jump {
	display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; padding: 0; list-style: none;
}
.jb-jump li { margin: 0; }
.jb-jump a {
	display: inline-block; background: var(--jb-panel); border: 1px solid var(--jb-line);
	border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700;
	color: var(--jb-accent); text-decoration: none;
}
.jb-jump a:hover { background: var(--jb-accent-soft); }

.jb-section { margin-bottom: 44px; }
.jb-section h2 { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.jb-section > p.jb-lead { margin: 0 0 20px; color: var(--jb-muted); font-size: 14.5px; max-width: 70ch; }

/* Schritte */
.jb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .jb-steps { grid-template-columns: 1fr; } }
.jb-step {
	background: var(--jb-panel); border: 1px solid var(--jb-line); border-radius: 12px;
	padding: 18px 18px 20px; position: relative;
}
.jb-step-num {
	width: 30px; height: 30px; border-radius: 50%; background: var(--jb-accent); color: #fff;
	display: grid; place-items: center; font-weight: 800; font-size: 14px; margin-bottom: 10px;
}
.jb-step h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.jb-step p { margin: 0; font-size: 13.5px; color: #3A3F46; }

/* 1-9 Punkteskala */
.jb-scale {
	display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; margin-bottom: 10px;
}
@media (max-width: 900px) { .jb-scale { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .jb-scale { grid-template-columns: repeat(2, 1fr); } }
.jb-scale-card {
	background: hsl(var(--jb-h) 68% 95%);
	border: 1px solid hsl(var(--jb-h) 40% 78%);
	border-radius: 10px; padding: 12px 8px; text-align: center;
}
.jb-scale-num {
	width: 30px; height: 30px; border-radius: 50%; margin: 0 auto 8px;
	background: hsl(var(--jb-h) 62% 42%); color: #fff;
	display: grid; place-items: center; font-weight: 800; font-size: 14px;
}
.jb-scale-label { font-size: 12px; font-weight: 700; color: var(--jb-ink); line-height: 1.3; }
.jb-scale-note { margin: 8px 0 0; font-size: 12.5px; color: var(--jb-muted); }

/* Kategorien (nicht in Ordnung / Gut / Überdurchschnittlich) */
.jb-bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .jb-bands { grid-template-columns: 1fr; } }
.jb-band {
	border-radius: 12px; padding: 18px 20px; border: 1px solid var(--jb-line);
}
.jb-band--bad { background: var(--jb-bad-soft); }
.jb-band--warn { background: var(--jb-warn-soft); }
.jb-band--good { background: var(--jb-good-soft); }
.jb-band-range { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75; }
.jb-band--bad .jb-band-range { color: var(--jb-bad); }
.jb-band--warn .jb-band-range { color: var(--jb-warn); }
.jb-band--good .jb-band-range { color: var(--jb-good); }
.jb-band h3 { margin: 4px 0 4px; font-size: 17px; font-weight: 800; }
.jb-band .jb-band-quote { margin: 0 0 12px; font-size: 13.5px; font-style: italic; color: #3A3F46; }
.jb-band ul { margin: 0; padding-left: 18px; font-size: 13px; color: #3A3F46; }
.jb-band li { margin-bottom: 4px; }

/* BIT-Kriterien */
.jb-bit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .jb-bit { grid-template-columns: 1fr; } }
.jb-bit-card {
	background: var(--jb-panel); border: 1px solid var(--jb-line); border-radius: 12px;
	padding: 18px 20px;
}
.jb-bit-letter {
	display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
	background: var(--jb-accent-soft); color: var(--jb-accent); font-weight: 800; font-size: 16px;
	margin-bottom: 10px;
}
.jb-bit-card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.jb-bit-card p { margin: 0; font-size: 13.5px; color: #3A3F46; }

/* Kreativitäts-Bonus */
.jb-creativity {
	display: flex; align-items: center; gap: 20px; background: var(--jb-panel);
	border: 1px solid var(--jb-line); border-radius: 12px; padding: 20px 24px; flex-wrap: wrap;
}
.jb-creativity-badges { display: flex; gap: 10px; flex-shrink: 0; }
.jb-creativity-badge {
	width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
	font-weight: 800; font-size: 15px; color: #fff;
}
.jb-creativity-badge--plus { background: var(--jb-good); }
.jb-creativity-badge--zero { background: var(--jb-warn); }
.jb-creativity-badge--minus { background: var(--jb-bad); }
.jb-creativity p { margin: 0; font-size: 13.5px; color: #3A3F46; flex: 1; min-width: 240px; }

/* Kompositionsregeln */
.jb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.jb-rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 640px) { .jb-rules { grid-template-columns: 1fr; } }
.jb-rule {
	display: flex; align-items: flex-start; gap: 10px; background: var(--jb-panel);
	border: 1px solid var(--jb-line); border-radius: 10px; padding: 12px 14px; font-size: 13.5px;
}
.jb-rule-check {
	flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; color: var(--jb-good);
	stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.jb-source { margin: 10px 0 0; font-size: 12px; color: var(--jb-muted); }
.jb-source a { color: var(--jb-accent); }

/* Selbstcheck */
.jb-checklist { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.jb-checklist li {
	background: var(--jb-panel); border: 1px solid var(--jb-line); border-radius: 10px;
	padding: 11px 14px; font-size: 13.5px; color: #3A3F46; display: flex; gap: 10px;
}
.jb-checklist li::before { content: "?"; flex-shrink: 0; font-weight: 800; color: var(--jb-accent); }

/* Goldene Regeln */
.jb-golden { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.jb-golden li {
	background: var(--jb-accent-soft); border-radius: 10px; padding: 12px 16px 12px 42px;
	font-size: 13.5px; color: var(--jb-ink); position: relative;
}
.jb-golden li::before {
	content: "\201C"; position: absolute; left: 14px; top: 6px; font-size: 26px; font-weight: 800;
	color: var(--jb-accent); font-family: Georgia, serif; line-height: 1;
}

.jb-callout {
	background: var(--jb-ink); color: #fff; border-radius: 14px; padding: 26px 30px;
	text-align: center; margin-top: 6px;
}
.jb-callout p { margin: 0; font-size: 16px; font-weight: 700; }
.jb-callout span { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; opacity: 0.7; }