/*
Theme Name: Stundenrechner24
Theme URI: https://stundenrechner24.de/
Author: Stundenrechner24
Description: Schlankes, schnelles Theme für Stundenrechner24 – Rechner, Ratgeber und Rechtstexte. Keine Abhängigkeiten, selbst gehostete Schriften.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: sr24
*/

/* ---------- Fonts (self-hosted, latin subset incl. ä ö ü ß) ---------- */
@font-face { font-family: "Schibsted Grotesk"; src: url("assets/fonts/schibsted-grotesk-latin.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/fonts/ibm-plex-mono-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* ---------- Tokens (from the Stundenrechner24 brand kit) ---------- */
:root {
	--ground: #f4f6f5; --surface: #ffffff; --surface-sunk: #e9eeed;
	--ink: #102225; --ink-muted: #4e6166; --line: #d3dcdb; --line-strong: #748a8e;
	--brand: #0f4c5c; --brand-hover: #0b3b48; --on-brand: #ffffff; --brand-soft: #dcebee;
	--panel: #0f4c5c; --on-panel: #ffffff; --on-panel-muted: #b9d6dc;
	--amber: #f2b705; --on-amber: #102225; --positive: #1b7a48; --negative: #b42318; --focus-ring: #0f4c5c;
	--shadow-card: 0 1px 2px rgba(16,34,37,.06), 0 8px 24px rgba(16,34,37,.06);
	--font-sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
	--radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
	--wrap: 1160px; --measure: 720px; --gutter: 16px;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root {
		--ground: #0b1618; --surface: #122124; --surface-sunk: #0e1b1d;
		--ink: #e4eeec; --ink-muted: #9fb2b5; --line: #24383c; --line-strong: #5f777b;
		--brand: #5cb8c8; --brand-hover: #7acad8; --on-brand: #062a31; --brand-soft: #143a42;
		--panel: #0f3f4a; --on-panel: #f2f7f6; --on-panel-muted: #a9c8cf;
		--amber: #f5c33b; --positive: #4cc38a; --negative: #ff7a6e; --focus-ring: #f5c33b;
		--shadow-card: 0 1px 2px rgba(0,0,0,.4);
		color-scheme: dark;
	}
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/27px var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
:where(h1, h2, h3, h4) { color: var(--ink); text-wrap: balance; margin: 0; }
:where(p, ul, ol, dl, table, figure, blockquote) { margin: 0; }
.sr-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto; background: var(--surface); color: var(--brand); padding: 10px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
[hidden] { display: none !important; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Header ---------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; }
.sr-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex: none; }
.sr-logo:hover { color: var(--ink); text-decoration: none; }
.sr-logo svg { width: 32px; height: 32px; flex: none; }
.sr-logo .tile { fill: var(--brand); } .sr-logo .dial { fill: var(--amber); } .sr-logo .pin { fill: var(--on-brand); }
.sr-logo b { font-weight: 800; font-size: 21px; letter-spacing: -.02em; line-height: 1; }
.sr-logo i { font-style: normal; font-family: var(--font-mono); font-weight: 600; font-size: 15px; line-height: 1; background: var(--amber); color: var(--on-amber); padding: 3px 5px; border-radius: 5px; margin-left: 3px; position: relative; top: -1px; }
.nav-toggle { display: none; background: none; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); color: var(--ink); width: 44px; height: 44px; padding: 0; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle svg { width: 22px; height: 22px; }
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.primary-nav a { display: block; padding: 10px 12px; border-radius: var(--radius-md); color: var(--ink-muted); font-weight: 600; font-size: 15px; line-height: 20px; text-decoration: none; }
.primary-nav a:hover { color: var(--ink); background: var(--surface-sunk); }
.primary-nav .current-menu-item > a, .primary-nav a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; }
	.primary-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-card); }
	.primary-nav.is-open { display: block; }
	.primary-nav ul { flex-direction: column; padding: var(--space-2) var(--gutter) var(--space-4); }
	.primary-nav a { padding: 14px 12px; font-size: 17px; }
	.sr-logo b { font-size: 19px; }
}

/* ---------- Page layout ---------- */
.site-main { padding-block: var(--space-6) var(--space-16); }
.page-head { max-width: var(--measure); margin-bottom: var(--space-4); }
@media (min-width: 720px) { .page-head { margin-bottom: var(--space-6); } }
.breadcrumbs { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin-bottom: var(--space-3); }
.breadcrumbs a { color: var(--ink-muted); }
.page-title { font-weight: 800; font-size: 28px; line-height: 32px; letter-spacing: -.02em; }
@media (min-width: 720px) { .page-title { font-size: 44px; line-height: 48px; } .site-main { padding-top: var(--space-12); } }
.page-lead { font-size: 17px; line-height: 25px; color: var(--ink-muted); margin-top: var(--space-2); }
@media (min-width: 720px) { .page-lead { font-size: 19px; line-height: 29px; margin-top: var(--space-3); } }
.page-meta { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin-top: var(--space-3); }

/* ---------- Article content (Gutenberg output) ---------- */
.entry { max-width: var(--measure); }
.entry.is-wide { max-width: none; }
.entry > * + * { margin-top: 18px; }
.entry > :where(h2) { font-weight: 700; font-size: 26px; line-height: 32px; letter-spacing: -.01em; margin-top: var(--space-12); }
.entry > :where(h3) { font-weight: 700; font-size: 20px; line-height: 28px; margin-top: var(--space-8); }
.entry > :where(h2, h3) + * { margin-top: 10px; }
@media (min-width: 720px) { .entry > :where(h2) { font-size: 28px; line-height: 34px; } }
.entry :where(ul, ol) { padding-left: 1.3em; }
.entry li + li { margin-top: 6px; }
.entry li::marker { color: var(--brand); }
.entry strong { font-weight: 700; }
.entry code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-sunk); padding: 1px 6px; border-radius: 4px; }
.entry :where(.wp-block-table, figure.wp-block-table) { overflow-x: auto; }
.entry table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 24px; background: var(--surface); border-radius: var(--radius-md); overflow: hidden; }
.entry th { text-align: left; font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunk); }
.entry :where(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.entry tbody th { text-transform: none; letter-spacing: 0; font-size: 16px; line-height: 24px; color: var(--ink); background: none; font-variant-numeric: tabular-nums; }
@media (max-width: 719px) { .entry :where(.wp-block-table) { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } .entry table { font-size: 15px; } }
.entry td { font-variant-numeric: tabular-nums; }
.entry figcaption { font-size: 14px; color: var(--ink-muted); margin-top: 6px; }
.entry blockquote, .entry .sr-note { background: var(--brand-soft); border-radius: var(--radius-md); padding: var(--space-4) var(--space-6); }
.entry blockquote p + p { margin-top: 8px; }
.entry hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--space-8); }

/* Answer box ("Kurz erklärt") */
.entry .sr-answer { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); }
.entry .sr-answer > * + * { margin-top: 10px; }
.entry .sr-answer h2 { margin: 0; font-size: 20px; line-height: 28px; }

/* Rank Math FAQ block */
.entry .rank-math-block { margin-top: var(--space-4); border-top: 1px solid var(--line); }
.entry .rank-math-list-item { border-bottom: 1px solid var(--line); padding-block: var(--space-4); }
.entry .rank-math-question { font-size: 19px; line-height: 27px; font-weight: 700; margin: 0; }
.entry .rank-math-answer { margin-top: 8px; }
.entry .rank-math-answer > * + * { margin-top: 10px; }

/* Related tools */
.sr-related { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-4); padding: 0; list-style: none; }
@media (min-width: 640px) { .sr-related { grid-template-columns: repeat(2, 1fr); } }
.sr-related a { display: block; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); text-decoration: none; color: var(--ink); }
.sr-related a:hover { border-color: var(--brand); }
.sr-related b { display: block; color: var(--brand); }
.sr-related span { font-size: 15px; line-height: 22px; color: var(--ink-muted); }

/* Author / review box */
.sr-review { display: flex; gap: var(--space-4); align-items: flex-start; margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--line); font-size: 15px; line-height: 23px; color: var(--ink-muted); max-width: var(--measure); }
.sr-review svg { width: 40px; height: 40px; flex: none; }
.sr-review strong { color: var(--ink); }

/* Ad slots (reserved height prevents layout shift) */
.sr-ad { margin-block: var(--space-8); min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sr-ad::before { content: "Anzeige"; font-size: 12px; line-height: 16px; color: var(--ink-muted); align-self: flex-start; margin-bottom: 4px; }
.sr-ad:empty { display: none; }

/* ---------- Buttons (shared with the calculator plugin) ---------- */
.sr-btn { font: 600 16px/20px var(--font-sans); border-radius: var(--radius-md); padding: 12px 18px; border: 1.5px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; text-decoration: none; }
.sr-btn-primary { background: var(--brand); color: var(--on-brand); }
.sr-btn-primary:hover { background: var(--brand-hover); color: var(--on-brand); }
.sr-btn-secondary { background: var(--surface); color: var(--brand); border-color: var(--line-strong); }
.sr-btn-secondary:hover { border-color: var(--brand); }

/* ---------- Footer ---------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding-block: var(--space-12) var(--space-8); font-size: 15px; line-height: 23px; }
.footer-grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand p { color: var(--ink-muted); margin-top: var(--space-3); max-width: 36ch; }
.footer-col h2 { font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-3); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-col a { color: var(--ink); text-decoration: none; }
.footer-col a:hover { color: var(--brand); text-decoration: underline; }
.footer-mail { font-family: var(--font-mono); font-size: 14px; word-break: break-all; }
.footer-bottom { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }

/* ---------- 404 ---------- */
.sr-404 { max-width: var(--measure); }
.sr-404 .sr-btn { margin-top: var(--space-6); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .site-header, .site-footer, .sr-ad, .nav-toggle { display: none !important; } body { background: #fff; color: #000; } }