/*
Theme Name: Hilfsbiene
Theme URI: https://hilfsbiene.de
Author: Hilfsbiene
Description: Eigenes, schlankes Theme für Hilfsbiene.de – Wegweiser für pflegende Angehörige.
Version: 1.0.0
Text Domain: hilfsbiene
*/

/* ---------- Tokens ---------- */
:root {
	--hb-petrol: #2C4A52;
	--hb-petrol-light: #375C66;
	--hb-honig: #F5A623;
	--hb-honig-dark: #D9910F;
	--hb-wald: #4A7C59;
	--hb-wald-dark: #3C6548;
	--hb-bg: #FAF7F2;
	--hb-bg-card: #FFFFFF;
	--hb-text: #24333A;
	--hb-text-muted: #5B6B71;
	--hb-border: #E4DFD4;
	--hb-radius: 16px;
	--hb-radius-sm: 10px;
	--hb-shadow: 0 4px 20px rgba(44, 74, 82, 0.08);
	--hb-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--hb-font-display: Georgia, "Times New Roman", serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--hb-font-body);
	color: var(--hb-text);
	background: var(--hb-bg);
	line-height: 1.6;
	font-size: 17px;
}

img { max-width: 100%; height: auto; display: block; }

svg { width: 1em; height: 1em; }

a { color: inherit; text-decoration: none; }

.hb-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

em { font-family: var(--hb-font-display); font-style: italic; color: var(--hb-wald); }

h1, h2, h3, h4 {
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.5em;
}

.hb-eyebrow {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hb-wald);
	margin-bottom: 12px;
}

.hb-section { padding: 72px 0; }
.hb-section--tight { padding: 48px 0; }

/* ---------- Header ---------- */
.hb-header {
	background: var(--hb-petrol);
	position: sticky;
	top: 0;
	z-index: 50;
}

.hb-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px 24px;
	max-width: 1180px;
	margin: 0 auto;
}

.hb-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--hb-font-display);
	font-weight: 700;
	font-size: 22px;
	color: #fff;
}

.hb-logo__icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.hb-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}

.hb-nav a {
	color: rgba(255,255,255,0.88);
	font-size: 15px;
	font-weight: 500;
	transition: color 0.15s;
}

.hb-nav a:hover { color: var(--hb-honig); }

.hb-nav ul {
	display: flex;
	list-style: none;
	gap: 28px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.hb-header__cta {
	background: var(--hb-honig);
	color: var(--hb-petrol);
	font-weight: 700;
	font-size: 14px;
	padding: 10px 20px;
	border-radius: 999px;
	white-space: nowrap;
	transition: background 0.15s;
}

.hb-header__cta:hover { background: var(--hb-honig-dark); color: #fff; }

.hb-nav-toggle {
	display: none;
	background: none;
	border: none;
	color: #fff;
	font-size: 26px;
	cursor: pointer;
}

/* ---------- Hero ---------- */
.hb-hero {
	background: var(--hb-petrol);
	background: linear-gradient(160deg, var(--hb-petrol) 0%, var(--hb-petrol-light) 100%);
	color: #fff;
	padding: 88px 0 96px;
}

.hb-hero__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: center;
}

.hb-badge svg { width: 14px; height: 14px; }

.hb-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(245, 166, 35, 0.15);
	border: 1px solid rgba(245, 166, 35, 0.4);
	color: var(--hb-honig);
	font-size: 13px;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 999px;
	margin-bottom: 24px;
}

.hb-hero h1 {
	font-family: var(--hb-font-display);
	font-size: 44px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 20px;
}

.hb-hero h1 em { color: var(--hb-honig); }

.hb-hero p.hb-lead {
	font-size: 18px;
	color: rgba(255,255,255,0.82);
	max-width: 560px;
	margin-bottom: 32px;
}

.hb-trust-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0;
	padding: 0;
}

.hb-trust-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: rgba(255,255,255,0.85);
}

.hb-trust-list svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--hb-honig); }

.hb-hero__image {
	border-radius: var(--hb-radius);
	overflow: hidden;
	aspect-ratio: 4/3;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
}

/* ---------- Buttons ---------- */
.hb-btn svg { width: 16px; height: 16px; }

.hb-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--hb-wald);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	padding: 13px 24px;
	border-radius: var(--hb-radius-sm);
	transition: background 0.15s, transform 0.15s;
}

.hb-btn:hover { background: var(--hb-wald-dark); }

.hb-btn--ghost {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.3);
	color: #fff;
}

.hb-btn--ghost:hover { background: rgba(255,255,255,0.08); }

/* ---------- Section headers ---------- */
.hb-section__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}

.hb-section__head h2 {
	font-family: var(--hb-font-display);
	font-size: 32px;
	color: var(--hb-petrol);
}

.hb-section__head p {
	color: var(--hb-text-muted);
	max-width: 520px;
	margin: 8px 0 0;
}

/* ---------- Rubriken-Grid ---------- */
.hb-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.hb-card {
	background: var(--hb-bg-card);
	border: 1px solid var(--hb-border);
	border-radius: var(--hb-radius);
	padding: 28px;
	box-shadow: var(--hb-shadow);
	transition: transform 0.18s, box-shadow 0.18s;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hb-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(44, 74, 82, 0.14);
}

.hb-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(74, 124, 89, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hb-wald);
}

.hb-card__icon svg { width: 24px; height: 24px; }

.hb-card h3 {
	font-size: 19px;
	color: var(--hb-petrol);
	margin-bottom: 0;
}

.hb-card__meta {
	font-size: 13px;
	color: var(--hb-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}

.hb-card p {
	color: var(--hb-text-muted);
	font-size: 15px;
	margin: 0;
	flex-grow: 1;
}

.hb-card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 14px;
	color: var(--hb-wald);
}

.hb-card__link svg { width: 16px; height: 16px; transition: transform 0.15s; }
.hb-card:hover .hb-card__link svg { transform: translateX(3px); }

/* ---------- Mission / Split ---------- */
.hb-split {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 56px;
	align-items: center;
}

.hb-split__image {
	border-radius: var(--hb-radius);
	overflow: hidden;
	aspect-ratio: 4/5;
}

.hb-split h2 {
	font-family: var(--hb-font-display);
	font-size: 30px;
	color: var(--hb-petrol);
}

.hb-split p { color: var(--hb-text-muted); font-size: 16px; }

.hb-mini-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 28px;
}

.hb-mini-card {
	background: var(--hb-bg-card);
	border: 1px solid var(--hb-border);
	border-radius: var(--hb-radius-sm);
	padding: 18px;
}

.hb-mini-card strong { display: block; color: var(--hb-petrol); margin-bottom: 4px; font-size: 15px; }
.hb-mini-card span { font-size: 13px; color: var(--hb-text-muted); }

/* ---------- Artikel-Grid ---------- */
.hb-articles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.hb-article-card {
	background: var(--hb-bg-card);
	border: 1px solid var(--hb-border);
	border-radius: var(--hb-radius);
	overflow: hidden;
	box-shadow: var(--hb-shadow);
	transition: transform 0.18s, box-shadow 0.18s;
}

.hb-article-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(44, 74, 82, 0.14); }

.hb-article-card__image { aspect-ratio: 16/10; background: var(--hb-border); overflow: hidden; }
.hb-article-card__image img { width: 100%; height: 100%; object-fit: cover; }

.hb-article-card__body { padding: 20px; }

.hb-article-card__badge {
	display: inline-block;
	background: rgba(74, 124, 89, 0.1);
	color: var(--hb-wald-dark);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 10px;
}

.hb-article-card__date { font-size: 12px; color: var(--hb-text-muted); margin-left: 8px; }

.hb-article-card h3 { font-size: 18px; color: var(--hb-petrol); margin-bottom: 8px; }

.hb-article-card p { color: var(--hb-text-muted); font-size: 14px; margin: 0; }

/* ---------- FAQ ---------- */
.hb-faq { max-width: 780px; margin: 0 auto; }

.hb-faq details {
	background: var(--hb-bg-card);
	border: 1px solid var(--hb-border);
	border-radius: var(--hb-radius-sm);
	padding: 18px 22px;
	margin-bottom: 12px;
}

.hb-faq summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--hb-petrol);
	font-size: 16px;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hb-faq summary::-webkit-details-marker { display: none; }

.hb-faq summary::after {
	content: "+";
	font-size: 22px;
	color: var(--hb-wald);
	transition: transform 0.15s;
}

.hb-faq details[open] summary::after { transform: rotate(45deg); }

.hb-faq details p { color: var(--hb-text-muted); margin: 14px 0 0; font-size: 15px; }

/* ---------- Newsletter ---------- */
.hb-newsletter {
	background: var(--hb-honig);
	border-radius: var(--hb-radius);
	padding: 48px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: center;
}

.hb-newsletter h2 { font-family: var(--hb-font-display); font-size: 28px; color: var(--hb-petrol); }
.hb-newsletter p { color: rgba(44,74,82,0.75); }

.hb-newsletter form { display: flex; gap: 10px; }

.hb-newsletter input[type="email"] {
	flex: 1;
	padding: 13px 16px;
	border-radius: var(--hb-radius-sm);
	border: 1px solid rgba(44,74,82,0.2);
	font-size: 15px;
	font-family: inherit;
}

.hb-newsletter button {
	background: var(--hb-petrol);
	color: #fff;
	border: none;
	padding: 13px 22px;
	border-radius: var(--hb-radius-sm);
	font-weight: 700;
	cursor: pointer;
}

/* ---------- Footer ---------- */
.hb-footer {
	background: var(--hb-petrol);
	color: rgba(255,255,255,0.75);
	padding: 64px 0 32px;
	margin-top: 72px;
}

.hb-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 40px;
	margin-bottom: 48px;
}

.hb-footer h4 { color: #fff; font-size: 15px; margin-bottom: 16px; }

.hb-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.hb-footer a { font-size: 14px; color: rgba(255,255,255,0.7); }
.hb-footer a:hover { color: var(--hb-honig); }

.hb-footer__brand { display: flex; align-items: center; gap: 10px; font-family: var(--hb-font-display); font-size: 20px; color: #fff; margin-bottom: 14px; }

.hb-footer__bottom {
	border-top: 1px solid rgba(255,255,255,0.12);
	padding-top: 24px;
	font-size: 13px;
	color: rgba(255,255,255,0.5);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---------- Single / Page content ---------- */
.hb-content-wrap { max-width: 760px; margin: 0 auto; padding: 64px 24px; }

.hb-content-wrap .hb-eyebrow { display: block; }

.hb-content-wrap h1 {
	font-family: var(--hb-font-display);
	font-size: 36px;
	color: var(--hb-petrol);
	margin-bottom: 16px;
}

.hb-post-meta { color: var(--hb-text-muted); font-size: 14px; margin-bottom: 32px; }

.hb-entry-content { font-size: 17px; color: var(--hb-text); }
.hb-entry-content h2 { font-family: var(--hb-font-display); color: var(--hb-petrol); font-size: 26px; margin-top: 40px; }
.hb-entry-content h3 { color: var(--hb-petrol); font-size: 20px; margin-top: 28px; }
.hb-entry-content p { margin-bottom: 20px; }
.hb-entry-content ul, .hb-entry-content ol { margin-bottom: 20px; padding-left: 24px; }
.hb-entry-content a { color: var(--hb-wald); text-decoration: underline; }
.hb-entry-content img { border-radius: var(--hb-radius-sm); margin: 24px 0; }
.hb-entry-content blockquote {
	border-left: 4px solid var(--hb-honig);
	margin: 24px 0;
	padding: 4px 20px;
	color: var(--hb-text-muted);
	font-style: italic;
}

/* ---------- Archive ---------- */
.hb-archive-head { background: var(--hb-petrol); color: #fff; padding: 56px 0; }
.hb-archive-head h1 { font-family: var(--hb-font-display); font-size: 34px; margin-bottom: 8px; }
.hb-archive-head p { color: rgba(255,255,255,0.75); margin: 0; }

.hb-pagination { display: flex; justify-content: center; gap: 10px; margin-top: 48px; }
.hb-pagination a, .hb-pagination span {
	padding: 10px 16px;
	border-radius: var(--hb-radius-sm);
	border: 1px solid var(--hb-border);
	font-size: 14px;
	font-weight: 600;
	color: var(--hb-petrol);
}
.hb-pagination .current { background: var(--hb-petrol); color: #fff; border-color: var(--hb-petrol); }

.hb-empty { text-align: center; padding: 60px 0; color: var(--hb-text-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.hb-hero__grid, .hb-split { grid-template-columns: 1fr; }
	.hb-hero__image, .hb-split__image { order: -1; }
	.hb-grid, .hb-articles { grid-template-columns: repeat(2, 1fr); }
	.hb-newsletter { grid-template-columns: 1fr; text-align: center; }
	.hb-newsletter form { flex-direction: column; }
	.hb-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
	.hb-nav { display: none; }
	.hb-nav.is-open {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--hb-petrol);
		padding: 16px 24px 24px;
	}
	.hb-nav.is-open ul { flex-direction: column; gap: 16px; }
	.hb-nav-toggle { display: block; }
	.hb-hero h1 { font-size: 32px; }
	.hb-grid, .hb-articles, .hb-mini-grid { grid-template-columns: 1fr; }
	.hb-footer__grid { grid-template-columns: 1fr; }
	.hb-section { padding: 48px 0; }
	.hb-newsletter { padding: 32px 24px; }
}