/*
Theme Name: HildVision-Blog-Theme-2
Theme URI: https://hildvision.com
Author: Markus
Description: Modernes Blog-Theme im Apple-Stil für hildvision.com – Smart Home, Home Assistant, Anleitungen und Gerätetests. Ohne externe Schriften (DSGVO-freundlich).
Version: 2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hildvision
*/

:root {
	--hv-accent: #4F46E5;
	--hv-accent-soft: rgba(79, 70, 229, 0.10);
	--hv-ground: #F5F5F7;
	--hv-card: #FFFFFF;
	--hv-text: #1D1D1F;
	--hv-text-2: #515154;
	--hv-text-3: #6E6E73;
	--hv-line: #D2D2D7;
	--hv-night: #0B1020;
	--hv-night-2: #151C36;
	--hv-night-line: #263055;
	--hv-night-text: #B6BCD0;
	--hv-sky: #7DD3FC;
	--hv-mint: #2DD4BF;
	--hv-radius: 24px;
	--hv-radius-lg: 32px;
	--hv-shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px -16px rgba(0,0,0,.12);
	--hv-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, system-ui, sans-serif;
	--hv-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
	--hv-max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--hv-ground);
	color: var(--hv-text);
	font-family: var(--hv-font);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--hv-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 .5em; }
:focus-visible { outline: 3px solid var(--hv-accent); outline-offset: 3px; border-radius: 6px; }

.hv-wrap { max-width: var(--hv-max); margin: 0 auto; padding: 0 24px; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto;
	background: #fff; padding: 10px 16px; border-radius: 10px;
}

/* ---------- Buttons ---------- */
.hv-btn {
	display: inline-flex; align-items: center; gap: 6px;
	min-height: 50px; padding: 0 26px; border-radius: 25px;
	font-size: 17px; font-weight: 500; text-decoration: none !important;
	border: 1.5px solid transparent; cursor: pointer; font-family: inherit;
	transition: transform .15s ease, background .15s ease;
}
.hv-btn:hover { transform: translateY(-1px); }
.hv-btn--primary { background: var(--hv-accent); color: #fff; }
.hv-btn--ghost { color: var(--hv-accent); border-color: var(--hv-accent); background: transparent; }
.hv-btn--light { background: #fff; color: var(--hv-night); }
.hv-btn--dark { background: var(--hv-text); color: #fff; min-height: 36px; padding: 0 18px; font-size: 14px; border-radius: 18px; }

.hv-pill {
	display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .02em;
	color: var(--hv-accent); background: var(--hv-accent-soft);
	padding: 6px 12px; border-radius: 999px;
}
.hv-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Header ---------- */
.hv-header {
	position: sticky; top: 0; z-index: 50;
	background: var(--hv-header-bg, rgba(245,245,247,.78));
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(0,0,0,.08);
}
.admin-bar .hv-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .hv-header { top: 0; } }
.hv-header__inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 8px 32px; min-height: 56px;
}
.hv-logo { display: flex; align-items: center; gap: 10px; color: var(--hv-text); min-height: 44px; text-decoration: none !important; }
.hv-logo__mark {
	width: 30px; height: 30px; border-radius: 9px; background: var(--hv-accent);
	display: flex; align-items: center; justify-content: center; color: #fff;
}
.hv-logo__text { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; }
.hv-logo img.custom-logo { max-height: 36px; width: auto; }

.hv-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 26px; }
.hv-nav a { display: block; padding: 12px 0; color: var(--hv-text); font-size: 14px; text-decoration: none; }
.hv-nav a:hover, .hv-nav .current-menu-item > a { color: var(--hv-accent); }
.hv-nav ul ul { display: none; }

.hv-header__actions { display: flex; align-items: center; gap: 8px; }
.hv-icon-btn {
	width: 44px; height: 44px; border: 0; background: transparent; border-radius: 22px;
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--hv-text);
}
.hv-icon-btn:hover { background: rgba(0,0,0,.05); }
.hv-menu-toggle { display: none; }

.hv-search-panel { display: none; padding: 0 0 16px; }
.hv-search-panel.is-open { display: block; }

@media (max-width: 860px) {
	.hv-menu-toggle { display: inline-flex; }
	.hv-nav { display: none; width: 100%; order: 3; }
	.hv-nav.is-open { display: block; }
	.hv-nav ul { flex-direction: column; padding-bottom: 12px; }
	.hv-nav a { font-size: 17px; border-bottom: 1px solid rgba(0,0,0,.06); }
}

/* ---------- Search form ---------- */
.hv-searchform { display: flex; gap: 10px; flex-wrap: wrap; }
.hv-input {
	flex: 1 1 240px; min-width: 0; min-height: 50px; padding: 0 22px; font-size: 17px;
	border: 1px solid var(--hv-line); border-radius: 25px; background: #fff; color: var(--hv-text); font-family: inherit;
}
.hv-input:focus { outline: none; border-color: var(--hv-accent); box-shadow: 0 0 0 4px var(--hv-accent-soft); }

/* ---------- Hero ---------- */
.hv-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding-top: 88px; padding-bottom: 56px; }
.hv-hero__text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.hv-hero__title { font-size: clamp(44px, 6vw, 76px); line-height: 1.03; font-weight: 800; letter-spacing: -0.035em; margin: 0; }
.hv-hero__title span { color: var(--hv-accent); }
.hv-hero__lead { font-size: 21px; line-height: 1.45; color: var(--hv-text-2); max-width: 520px; margin: 0; }
.hv-hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.hv-featured {
	flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column;
	background: var(--hv-night); color: #fff; border-radius: var(--hv-radius-lg); overflow: hidden;
	text-decoration: none !important; box-shadow: 0 30px 60px -30px rgba(11,16,32,.55);
	transition: transform .2s ease;
}
.hv-featured:hover { transform: translateY(-3px); }
.hv-featured__media { height: 300px; background: var(--hv-night-2); }
.hv-featured__media img { width: 100%; height: 100%; object-fit: cover; }
.hv-featured__body { padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 10px; }
.hv-featured__body .hv-eyebrow { color: var(--hv-sky); }
.hv-featured__title { font-size: 28px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: #fff; }
.hv-featured__excerpt { margin: 0; font-size: 16px; color: var(--hv-night-text); }
.hv-featured__meta { font-size: 14px; color: var(--hv-night-text); margin-top: 6px; }

/* Placeholder when no image */
.hv-placeholder {
	width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px; padding: 16px; text-align: center; font-size: 14px; font-weight: 600;
}

/* ---------- Sections ---------- */
.hv-section { padding-top: 48px; padding-bottom: 48px; }
.hv-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.hv-section__title { font-size: 32px; font-weight: 700; margin: 0; }
.hv-more { font-size: 17px; min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- Topic tiles ---------- */
.hv-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.hv-topic {
	border-radius: var(--hv-radius); padding: 28px; min-height: 200px;
	display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
	color: var(--hv-text); text-decoration: none !important; transition: transform .2s ease;
}
.hv-topic:hover { transform: translateY(-3px); }
.hv-topic__icon { width: 52px; height: 52px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; }
.hv-topic__name { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.hv-topic__desc { display: block; font-size: 15px; color: #3A3A3C; line-height: 1.4; margin-top: 6px; }
.hv-tone--blue   { background: #E6F0FF; --hv-tone: #0058C2; }
.hv-tone--mint   { background: #DDF6F1; --hv-tone: #0A6B5F; }
.hv-tone--violet { background: #EEE9FF; --hv-tone: #5B3FD1; }
.hv-tone--amber  { background: #FFF1DE; --hv-tone: #9A4508; }
.hv-tone--blue .hv-ico, .hv-tone--mint .hv-ico, .hv-tone--violet .hv-ico, .hv-tone--amber .hv-ico { color: var(--hv-tone); }

/* ---------- Post cards ---------- */
.hv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.hv-card {
	background: var(--hv-card); border-radius: var(--hv-radius); overflow: hidden;
	display: flex; flex-direction: column; box-shadow: var(--hv-shadow); transition: transform .2s ease;
}
.hv-card:hover { transform: translateY(-3px); }
.hv-card--blue   { --hv-tone: #0058C2; --hv-tone-bg: #E6F0FF; }
.hv-card--mint   { --hv-tone: #0A6B5F; --hv-tone-bg: #DDF6F1; }
.hv-card--violet { --hv-tone: #5B3FD1; --hv-tone-bg: #EEE9FF; }
.hv-card--amber  { --hv-tone: #9A4508; --hv-tone-bg: #FFF1DE; }
.hv-card__media { height: 200px; display: block; background: var(--hv-tone-bg, #E6F0FF); }
.hv-card__media img { width: 100%; height: 100%; object-fit: cover; }
.hv-card__body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hv-card__cat { font-size: 13px; font-weight: 600; color: var(--hv-tone, var(--hv-accent)); }
.hv-card__title { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.hv-card__title a { color: var(--hv-text); }
.hv-card__excerpt { margin: 0; font-size: 16px; color: var(--hv-text-2); }
.hv-card__excerpt p { margin: 0; }
.hv-card__meta { font-size: 14px; color: var(--hv-text-3); margin-top: auto; padding-top: 8px; }

/* ---------- Automation of the week ---------- */
.hv-dark {
	background: var(--hv-night); color: #fff; border-radius: var(--hv-radius-lg); padding: 56px;
	display: flex; flex-wrap: wrap; align-items: center; gap: 48px;
}
.hv-dark__text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.hv-dark__text .hv-eyebrow { color: var(--hv-mint); }
.hv-dark__title { font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; margin: 0; color: #fff; }
.hv-dark__lead { margin: 0; font-size: 18px; color: var(--hv-night-text); }
.hv-code { flex: 1 1 420px; min-width: 0; background: var(--hv-night-2); border: 1px solid var(--hv-night-line); border-radius: 20px; overflow: hidden; }
.hv-code__bar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--hv-night-line); }
.hv-code__dot { width: 11px; height: 11px; border-radius: 6px; }
.hv-code__file { font-size: 13px; color: var(--hv-night-text); margin-left: 10px; }
.hv-code pre {
	margin: 0; padding: 22px 24px; font-family: var(--hv-mono); font-size: 14px; line-height: 1.7;
	color: #E2E8F0; overflow-x: auto; white-space: pre;
}
.hv-code .k { color: var(--hv-sky); }
.hv-code .v { color: var(--hv-mint); }
.hv-code .n { color: #FDBA74; }
@media (max-width: 600px) { .hv-dark { padding: 32px 24px; } .hv-dark__title { font-size: 32px; } }

/* ---------- Newsletter ---------- */
.hv-newsletter {
	background: #fff; border-radius: var(--hv-radius-lg); padding: 64px 32px;
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
}
.hv-newsletter__icon { width: 60px; height: 60px; border-radius: 18px; background: var(--hv-accent-soft); color: var(--hv-accent); display: flex; align-items: center; justify-content: center; }
.hv-newsletter h2 { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.hv-newsletter p { margin: 0; font-size: 18px; color: var(--hv-text-2); max-width: 520px; }
.hv-newsletter form { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; width: 100%; max-width: 520px; }
.hv-newsletter .hv-input { background: var(--hv-ground); }
.hv-nl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hv-newsletter p.hv-newsletter__hinweis { font-size: 14px; color: var(--hv-text-3); margin-top: 4px; }
.hv-newsletter__hinweis a { color: var(--hv-accent); }
.hv-newsletter p.hv-newsletter__msg { font-size: 16px; font-weight: 600; padding: 12px 18px; border-radius: 14px; margin-top: 4px; max-width: 520px; }
.hv-newsletter p.hv-newsletter__msg.is-ok { background: var(--hv-accent-soft); color: var(--hv-text); }
.hv-newsletter p.hv-newsletter__msg.is-error { background: #fdeceb; color: #8a2a22; }
html[data-theme="dark"] .hv-newsletter p.hv-newsletter__msg.is-error { background: #4a2420; color: #ffd9d4; }

/* ---------- Footer ---------- */
.hv-footer { border-top: 1px solid var(--hv-line); margin-top: 32px; }
.hv-footer__inner { padding-top: 40px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 24px; }
.hv-footer__note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--hv-text-3); max-width: 820px; }
.hv-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-top: 20px; border-top: 1px solid var(--hv-line); font-size: 13px; color: var(--hv-text-3); }
.hv-footer__bottom ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.hv-footer__bottom a { color: #424245; display: block; padding: 12px 0; }

/* ---------- Archive / list header ---------- */
.hv-page-head { padding-top: 72px; padding-bottom: 24px; }
.hv-page-head h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 800; letter-spacing: -0.035em; margin: 12px 0 8px; }
.hv-page-head p { color: var(--hv-text-2); font-size: 19px; margin: 0; max-width: 640px; }

.hv-pagination { margin-top: 40px; }
.hv-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hv-pagination .page-numbers {
	min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 22px; background: #fff;
	display: inline-flex; align-items: center; justify-content: center; color: var(--hv-text); box-shadow: var(--hv-shadow);
}
.hv-pagination .page-numbers.current { background: var(--hv-accent); color: #fff; }

/* ---------- Single post / page ---------- */
.hv-article { padding-top: 64px; padding-bottom: 32px; }
.hv-article__head { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hv-article__title { font-size: clamp(36px, 5.2vw, 60px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; margin: 0; }
.hv-article__meta { font-size: 15px; color: var(--hv-text-3); }
.hv-article__media { max-width: 1040px; margin: 40px auto 0; border-radius: var(--hv-radius-lg); overflow: hidden; }
.hv-article__media img { width: 100%; }
.hv-content {
	max-width: 720px; margin: 48px auto 0; font-size: 19px; line-height: 1.7; color: #2C2C2E;
}
.hv-content > * { margin-top: 0; margin-bottom: 1.2em; }
.hv-content h2 { font-size: 32px; margin-top: 1.6em; color: var(--hv-text); }
.hv-content h3 { font-size: 24px; margin-top: 1.4em; color: var(--hv-text); }
.hv-content a { text-decoration: underline; text-underline-offset: 3px; }
.hv-content img, .hv-content .wp-block-image img { border-radius: 18px; }
.hv-content blockquote { margin-left: 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--hv-accent); font-size: 22px; color: var(--hv-text); }
.hv-content pre, .hv-content .wp-block-code {
	background: var(--hv-night); color: #E2E8F0; padding: 22px 24px; border-radius: 18px;
	font-family: var(--hv-mono); font-size: 15px; line-height: 1.6; overflow-x: auto;
}
.hv-content code { font-family: var(--hv-mono); font-size: .88em; background: rgba(0,0,0,.05); padding: 2px 6px; border-radius: 6px; }
.hv-content pre code { background: none; padding: 0; }
.hv-content table { width: 100%; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; }
.hv-content th, .hv-content td { border-bottom: 1px solid var(--hv-line); padding: 10px 12px; text-align: left; }
.hv-content .wp-block-button__link { background: var(--hv-accent); color: #fff; border-radius: 25px; padding: 14px 26px; text-decoration: none; }
.alignwide { max-width: 1040px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.wp-caption-text, figcaption { font-size: 14px; color: var(--hv-text-3); text-align: center; margin-top: 8px; }

.hv-tags { max-width: 720px; margin: 32px auto 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hv-tags a { font-size: 14px; background: #fff; color: var(--hv-text-2); padding: 8px 14px; border-radius: 999px; }

.hv-postnav { max-width: 720px; margin: 48px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.hv-postnav a { display: block; background: #fff; border-radius: 20px; padding: 20px 24px; color: var(--hv-text); box-shadow: var(--hv-shadow); text-decoration: none; }
.hv-postnav span { display: block; font-size: 13px; color: var(--hv-text-3); margin-bottom: 4px; }

/* ---------- Comments ---------- */
.hv-comments { max-width: 720px; margin: 56px auto 0; }
.hv-comments ol { list-style: none; padding: 0; }
.hv-comments .comment-body { background: #fff; border-radius: 20px; padding: 20px 24px; margin-bottom: 16px; }
.hv-comments textarea, .hv-comments input[type="text"], .hv-comments input[type="email"], .hv-comments input[type="url"] {
	width: 100%; border: 1px solid var(--hv-line); border-radius: 16px; padding: 12px 16px; font: inherit; background: #fff;
}
.hv-comments .submit { background: var(--hv-accent); color: #fff; border: 0; border-radius: 25px; min-height: 50px; padding: 0 26px; font: inherit; cursor: pointer; }

/* ---------- 404 / empty ---------- */
.hv-empty { text-align: center; padding: 96px 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hv-empty h1 { font-size: clamp(40px, 6vw, 64px); font-weight: 800; margin: 0; }
.hv-empty p { color: var(--hv-text-2); font-size: 19px; margin: 0 0 8px; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Logo ---------- */
.hv-logo__img { height: 40px; width: auto; display: block; }
.hv-footer__logo { display: inline-block; align-self: flex-start; }
.hv-footer__logo img { height: 32px; width: auto; }
@media (max-width: 480px) { .hv-logo__img { height: 34px; } }

/* ---------- Farbschema: Logo-Farben (Standard) ---------- */
body.hv-scheme-logo {
	--hv-accent: #8F5530;
	--hv-accent-soft: rgba(143, 85, 48, 0.10);
	--hv-ground: #F6F3EE;
	--hv-header-bg: rgba(246, 243, 238, .80);
	--hv-text: #2A2420;
	--hv-text-2: #5A4F47;
	--hv-text-3: #6E625A;
	--hv-line: #DDD4C9;
	--hv-night: #2A2420;
	--hv-night-2: #352D28;
	--hv-night-line: #4A3F37;
	--hv-night-text: #D9CEC3;
	--hv-sky: #E0A27A;
	--hv-mint: #A9C2A9;
	background: var(--hv-ground);
	color: var(--hv-text);
}
body.hv-scheme-logo .hv-code .n { color: #F3ECE3; }
body.hv-scheme-logo .hv-content { color: #3A322C; }
body.hv-scheme-logo .hv-topic__desc { color: #4A413A; }

/* Themen-Kacheln & Karten in Logo-Tönen */
body.hv-scheme-logo .hv-tone--blue   { background: #E9EFE8; --hv-tone: #46604A; }
body.hv-scheme-logo .hv-tone--mint   { background: #E6EDF2; --hv-tone: #3D5A6E; }
body.hv-scheme-logo .hv-tone--violet { background: #FAE8DB; --hv-tone: #8A4B22; }
body.hv-scheme-logo .hv-tone--amber  { background: #EEE7DD; --hv-tone: #5E4B3C; }
body.hv-scheme-logo .hv-card--blue   { --hv-tone: #46604A; --hv-tone-bg: #E9EFE8; }
body.hv-scheme-logo .hv-card--mint   { --hv-tone: #3D5A6E; --hv-tone-bg: #E6EDF2; }
body.hv-scheme-logo .hv-card--violet { --hv-tone: #8A4B22; --hv-tone-bg: #FAE8DB; }
body.hv-scheme-logo .hv-card--amber  { --hv-tone: #5E4B3C; --hv-tone-bg: #EEE7DD; }

/* ==========================================================
   DARK MODE (30.10.2026) – Standard: Systemeinstellung.
   Schalter im Header merkt sich die Wahl im Browser.
   Gilt für das Farbschema „logo“.
   ========================================================== */
html[data-theme="dark"] body.hv-scheme-logo {
	--hv-accent: #C8875A;
	--hv-accent-soft: rgba(200, 135, 90, 0.16);
	--hv-ground: #1C1815;
	--hv-card: #26201C;
	--hv-header-bg: rgba(28, 24, 21, 0.82);
	--hv-text: #F1EBE4;
	--hv-text-2: #CFC4B8;
	--hv-text-3: #A89C90;
	--hv-line: #3F362F;
	--hv-night: #26201C;
	--hv-night-2: #302823;
	--hv-night-line: #4A3F37;
	--hv-night-text: #D9CEC3;
	--hv-sky: #E9B48C;
	--hv-mint: #B8CDB8;
	--hv-shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -16px rgba(0,0,0,.6);
	background: var(--hv-ground);
	color: var(--hv-text);
	color-scheme: dark;
}
html[data-theme="dark"] body.hv-scheme-logo .hv-content { color: #E6DDD3; }
html[data-theme="dark"] body.hv-scheme-logo .hv-topic__desc { color: #CFC4B8; }
html[data-theme="dark"] body.hv-scheme-logo .hv-footer__bottom a { color: #D9CEC3; }
html[data-theme="dark"] body.hv-scheme-logo .hv-tone--blue   { background: #2A2F29; --hv-tone: #B9CDB2; }
html[data-theme="dark"] body.hv-scheme-logo .hv-tone--mint   { background: #242C31; --hv-tone: #A9C1D1; }
html[data-theme="dark"] body.hv-scheme-logo .hv-tone--violet { background: #33261E; --hv-tone: #E9B48C; }
html[data-theme="dark"] body.hv-scheme-logo .hv-tone--amber  { background: #2E2823; --hv-tone: #D8C3AA; }
html[data-theme="dark"] body.hv-scheme-logo .hv-card--blue   { --hv-tone: #B9CDB2; --hv-tone-bg: #2A2F29; }
html[data-theme="dark"] body.hv-scheme-logo .hv-card--mint   { --hv-tone: #A9C1D1; --hv-tone-bg: #242C31; }
html[data-theme="dark"] body.hv-scheme-logo .hv-card--violet { --hv-tone: #E9B48C; --hv-tone-bg: #33261E; }
html[data-theme="dark"] body.hv-scheme-logo .hv-card--amber  { --hv-tone: #D8C3AA; --hv-tone-bg: #2E2823; }
html[data-theme="dark"] body.hv-scheme-logo .hv-topic__icon,
html[data-theme="dark"] body.hv-scheme-logo .hv-input,
html[data-theme="dark"] body.hv-scheme-logo .hv-newsletter,
html[data-theme="dark"] body.hv-scheme-logo .hv-pagination .page-numbers,
html[data-theme="dark"] body.hv-scheme-logo .hv-tags a,
html[data-theme="dark"] body.hv-scheme-logo .hv-postnav a,
html[data-theme="dark"] body.hv-scheme-logo .hv-comments .comment-body,
html[data-theme="dark"] body.hv-scheme-logo .hv-comments textarea,
html[data-theme="dark"] body.hv-scheme-logo .hv-comments input[type="text"],
html[data-theme="dark"] body.hv-scheme-logo .hv-comments input[type="email"],
html[data-theme="dark"] body.hv-scheme-logo .hv-comments input[type="url"] { background: var(--hv-card); }
html[data-theme="dark"] body.hv-scheme-logo .hv-btn--primary,
html[data-theme="dark"] body.hv-scheme-logo .hv-content .wp-block-button__link,
html[data-theme="dark"] body.hv-scheme-logo .hv-comments .submit,
html[data-theme="dark"] body.hv-scheme-logo .hv-pagination .page-numbers.current { color: #1C1815; }
html[data-theme="dark"] body.hv-scheme-logo .hv-btn--dark { background: #F1EBE4; color: #1C1815; }

/* Logo: helle Variante im Dark Mode */
.hv-logo__img--dark, .hv-footer__img--dark { display: none; }
html[data-theme="dark"] .hv-logo__img--light, html[data-theme="dark"] .hv-footer__img--light { display: none; }
html[data-theme="dark"] .hv-logo__img--dark, html[data-theme="dark"] .hv-footer__img--dark { display: block; }

/* Schalter Hell/Dunkel */
.hv-theme-toggle .hv-ico--moon { display: none; }
html[data-theme="dark"] .hv-theme-toggle .hv-ico--sun { display: none; }
html[data-theme="dark"] .hv-theme-toggle .hv-ico--moon { display: block; }

/* ---------- Social-Media-Symbole ---------- */
.hv-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.hv-social a { display: block; border-radius: 7px; color: var(--hv-accent); transition: transform .15s ease, opacity .15s ease; }
.hv-footer .hv-social a { color: var(--hv-accent); }
.hv-social a:hover { transform: translateY(-2px); opacity: .8; }
.hv-social a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.hv-social svg { display: block; width: 28px; height: 28px; }
.hv-social--page svg { width: 36px; height: 36px; }
.hv-content .hv-social { padding: 0; }
.hv-content .hv-social li { margin: 0; }
.hv-social-block { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hv-line); }
.hv-social-block__label { margin: 0 0 12px; font-size: 15px; color: var(--hv-text-3); }
.hv-footer__inner > .hv-footer__logo + .hv-social { margin-top: -8px; }

/* ---------- Suche (Pagefind, nur auf der Live-Seite) ---------- */
.hv-pagefind {
	width: 100%;
	--pagefind-ui-scale: .9;
	--pagefind-ui-primary: var(--hv-accent);
	--pagefind-ui-text: var(--hv-text);
	--pagefind-ui-background: var(--hv-card, #fff);
	--pagefind-ui-border: var(--hv-line);
	--pagefind-ui-tag: var(--hv-accent-soft);
	--pagefind-ui-border-width: 1px;
	--pagefind-ui-border-radius: 12px;
	--pagefind-ui-font: var(--hv-font);
}
.hv-search-panel .hv-pagefind .pagefind-ui__drawer { max-height: 60vh; overflow-y: auto; }
.hv-pagefind .pagefind-ui__result-link { color: var(--hv-text); }
.hv-pagefind .pagefind-ui__result-excerpt { color: var(--hv-text-2); }
.hv-pagefind mark { background: var(--hv-accent-soft); color: inherit; }

/* ---------- Produktivitäts-Tipps (Startseite) – seit 01.11.2026 ---------- */
.hv-tips {
	background: var(--hv-card); border: 2px solid var(--hv-accent); border-radius: var(--hv-radius-lg);
	padding: 44px; box-shadow: var(--hv-shadow), 0 28px 56px -24px rgba(143, 85, 48, .45);
}
.hv-tips__head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.hv-tips__head .hv-eyebrow { display: block; color: var(--hv-accent); margin-bottom: 4px; }
.hv-tips__icon { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; background: var(--hv-accent-soft); color: var(--hv-accent); display: flex; align-items: center; justify-content: center; }
.hv-tips__lead { margin: 0 0 28px; font-size: 18px; line-height: 1.5; color: var(--hv-text-2); max-width: 640px; }
.hv-tips__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.hv-tip {
	display: flex; gap: 14px; align-items: flex-start; height: 100%; box-sizing: border-box; padding: 18px 20px;
	border-radius: 20px; background: var(--hv-ground); color: var(--hv-text) !important; text-decoration: none !important;
	transition: transform .2s ease, box-shadow .2s ease;
}
.hv-tip:hover { transform: translateY(-2px); box-shadow: var(--hv-shadow); }
.hv-tip__num {
	flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--hv-accent); color: #fff;
	font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.hv-tip__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hv-tip__title { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--hv-text); }
.hv-tip__excerpt { font-size: 15px; line-height: 1.45; color: var(--hv-text-2); }
.hv-tips__more { margin-top: 24px; }
.hv-tips__empty { margin: 0; font-size: 17px; color: var(--hv-text-2); }
@media (max-width: 600px) {
	.hv-tips { padding: 28px 20px; border-radius: var(--hv-radius); }
	.hv-tips__icon { width: 44px; height: 44px; border-radius: 14px; }
	.hv-tips__lead { font-size: 17px; }
}

/* ---------- Tipps als schlanke Zeilen (Startseite und Sammelseite) – 01.11.2026 ---------- */
.hv-tips__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hv-line); }
.hv-tips__rows li { border-bottom: 1px solid var(--hv-line); }
.hv-tips__row {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 4px;
	font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--hv-text) !important; text-decoration: none !important;
}
.hv-tips__row .hv-ico { flex: 0 0 auto; color: var(--hv-accent); transition: transform .2s ease; }
.hv-tips__row:hover span { color: var(--hv-accent); }
.hv-tips__row:hover .hv-ico { transform: translateX(3px); }
.hv-tips-group { margin-bottom: 44px; }
.hv-tips-group__title { font-size: 26px; font-weight: 700; margin: 0 0 10px; letter-spacing: -0.01em; }

/* ---------- Produktivitäts-Tipps als Kacheln (Variante A, mit Schlagschatten) – 01.11.2026 ---------- */
.hv-tips {
	--hv-tile-bg: #F4EDE3; --hv-tag-bg: #E6ECE3; --hv-tag: #4F6853; --hv-drop: #E4D3BD;
	box-shadow: 10px 12px 0 var(--hv-drop), 0 18px 40px rgba(42, 36, 32, .14);
}
html[data-theme="dark"] .hv-tips { --hv-tile-bg: rgba(255, 255, 255, .06); --hv-tag-bg: #26302A; --hv-tag: #A9C2A9; --hv-drop: #3A2C22; }
.hv-tips__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.hv-tips__top .hv-tips__head { align-items: flex-start; gap: 20px; margin-bottom: 0; }
.hv-tips__top .hv-tips__lead { margin: 8px 0 0; font-size: 17px; line-height: 1.6; }
.hv-tips__all {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px;
	border-radius: 999px; border: 1.5px solid var(--hv-accent); color: var(--hv-accent) !important; font-size: 16px; font-weight: 500;
	text-decoration: none !important; transition: background .15s ease, color .15s ease;
}
.hv-tips__all:hover { background: var(--hv-accent); color: #fff !important; }
.hv-tips__all--bottom { display: none; }
.hv-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.hv-tiles li { display: flex; }
.hv-tile {
	flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 20px; background: var(--hv-tile-bg);
	color: var(--hv-text) !important; text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease;
}
.hv-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(42, 36, 32, .10); }
.hv-tile__top { display: flex; align-items: center; justify-content: space-between; }
.hv-tile__icon { width: 48px; height: 48px; border-radius: 14px; background: var(--hv-card); color: var(--hv-accent); display: flex; align-items: center; justify-content: center; }
.hv-tile__new { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--hv-accent); color: #fff; }
.hv-tile__tag { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--hv-tag-bg); color: var(--hv-tag); }
.hv-tile__title { flex: 1; font-size: 18px; line-height: 1.35; font-weight: 600; }
.hv-tile__meta { display: flex; align-items: center; justify-content: space-between; font-size: 14px; color: var(--hv-text-2); }
.hv-tile__arrow { font-size: 20px; color: var(--hv-accent); transition: transform .15s ease; }
.hv-tile:hover .hv-tile__arrow { transform: translateX(3px); }
@media (max-width: 1000px) {
	.hv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.hv-tips { box-shadow: 6px 8px 0 var(--hv-drop), 0 12px 28px rgba(42, 36, 32, .12); }
	.hv-tips__top { margin-bottom: 20px; }
	.hv-tips__top .hv-tips__head { gap: 14px; }
	.hv-tips__all--top { display: none; }
	.hv-tips__all--bottom { display: flex; margin-top: 20px; min-height: 48px; }
	.hv-tiles { gap: 12px; }
	.hv-tile { padding: 16px; gap: 10px; border-radius: 18px; }
	.hv-tile__icon { width: 40px; height: 40px; border-radius: 12px; }
	.hv-tile__title { font-size: 15px; }
	.hv-tile__meta { display: none; }
}

/* Kacheln: Feinschliff – 01.11.2026, 17:00 Uhr */
html[data-theme="dark"] .hv-tile__new,
html[data-theme="dark"] .hv-tips__all:hover { color: #1B1815 !important; }
@media (max-width: 600px) {
	.hv-tile__tag { border-radius: 8px; font-size: 11px; padding: 3px 8px; line-height: 1.35; }
}


/* ==========================================================
   MOTION DESIGN STARTSEITE (01.11.2026) – Variante B „Punkt-Raster“
   Haus aus Punkten, Welle läuft durch, braune Punkte = Sensoren.
   Bei „Bewegung reduzieren“ (macOS/iOS) steht alles still.
   ========================================================== */
.hv-house { flex: 1 1 420px; min-width: 0; max-width: 560px; position: relative; aspect-ratio: 640 / 520;
	--hv-dot: #D9CAB4; --hv-dot-on: var(--hv-text); }
html[data-theme="dark"] .hv-house { --hv-dot: #4A3F37; }
.hv-house svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hv-house__outline { fill: none; stroke: var(--hv-text); stroke-width: 2; stroke-linejoin: round;
	stroke-dasharray: 1300; animation: hvHouseDraw 2.4s cubic-bezier(.6,0,.2,1) both; }
@keyframes hvHouseDraw { from { stroke-dashoffset: 1300; } to { stroke-dashoffset: 0; } }
.hv-house__dot, .hv-house__sensor { position: absolute; border-radius: 999px; opacity: 0; }
.hv-house__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--hv-dot);
	animation: hvDotIn .6s ease-out var(--in) forwards, hvDotWave 5s ease-in-out var(--wave) infinite; }
.hv-house__sensor { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--hv-accent);
	animation: hvDotIn .6s ease-out var(--in) forwards; }
.hv-house__sensor::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid var(--hv-accent);
	opacity: 0; animation: hvDotRing 2.4s ease-out var(--ring) infinite; }
@keyframes hvDotIn { to { opacity: 1; } }
@keyframes hvDotWave { 0%, 70%, 100% { background: var(--hv-dot); transform: scale(1); } 80% { background: var(--hv-dot-on); transform: scale(1.35); } }
@keyframes hvDotRing { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }

.hv-hero__text > * { opacity: 0; transform: translateY(16px); animation: hvHeroIn .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hv-hero__text > *:nth-child(2) { animation-delay: .15s; }
.hv-hero__text > *:nth-child(3) { animation-delay: .3s; }
.hv-hero__text > *:nth-child(4) { animation-delay: .45s; }
@keyframes hvHeroIn { to { opacity: 1; transform: none; } }

/* Empfohlener Artikel als breite Karte unter dem Hero */
.hv-featured-row { padding-bottom: 32px; }
.hv-featured-row .hv-featured { flex-direction: row; }
.hv-featured-row .hv-featured__media { flex: 0 0 46%; height: auto; min-height: 280px; }
.hv-featured-row .hv-featured__body { justify-content: center; padding: 36px 40px; }
@media (max-width: 760px) {
	.hv-featured-row .hv-featured { flex-direction: column; }
	.hv-featured-row .hv-featured__media { flex: none; height: 220px; min-height: 0; }
	.hv-featured-row .hv-featured__body { padding: 24px 24px 28px; }
	.hv-house { max-width: 420px; margin: 0 auto; }
	.hv-house__dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
	.hv-house__sensor { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
}

@media (prefers-reduced-motion: reduce) {
	.hv-house__outline, .hv-house__dot, .hv-house__sensor, .hv-house__sensor::after, .hv-hero__text > * { animation: none !important; }
	.hv-house__dot, .hv-house__sensor, .hv-hero__text > * { opacity: 1; transform: none; }
}


/* ==========================================================
   ICON-BEWEGUNG THEMEN-KACHELN (01.11.2026) – Variante B
   Icons ruhig; beim Darüberfahren (oder Tab-Fokus) spielt jedes
   Icon seine eigene kleine Bewegung. Klassen kommen aus hv_icon().
   ========================================================== */
.hv-ico { overflow: visible; }
.hv-ico .i-rays { opacity: 0; transition: opacity .25s ease; }
.hv-ico .i-glass, .hv-ico .i-screen { transition: fill .3s ease; }
.hv-ico .i-roof { stroke-dasharray: 32; }
.hv-ico .i-dot { transform-box: fill-box; transform-origin: center; }
.hv-ico .i-page { transform-origin: 13px 12px; }
.hv-topic__icon { transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.hv-topic:hover .hv-topic__icon, .hv-topic:focus-visible .hv-topic__icon { transform: scale(1.06); }
.hv-topic:hover .i-rays, .hv-topic:focus-visible .i-rays { opacity: 1; }
.hv-topic:hover .i-glass, .hv-topic:focus-visible .i-glass { fill: rgba(242,199,154,.9); }
.hv-topic:hover .i-screen, .hv-topic:focus-visible .i-screen { fill: color-mix(in srgb, currentColor 16%, transparent); }
.hv-topic:hover .i-roof, .hv-topic:focus-visible .i-roof { animation: hvIcoRoof .8s ease-out; }
.hv-topic:hover .i-dot, .hv-topic:focus-visible .i-dot { animation: hvIcoPulse 1.2s ease-in-out infinite; }
.hv-topic:hover .i-led, .hv-topic:focus-visible .i-led { animation: hvIcoLed .6s steps(1) infinite; }
.hv-topic:hover .i-led--2, .hv-topic:focus-visible .i-led--2 { animation-delay: .3s; }
.hv-topic:hover .i-page, .hv-topic:focus-visible .i-page { animation: hvIcoPage .7s ease-in-out; }
@keyframes hvIcoRoof { from { stroke-dashoffset: 32; } to { stroke-dashoffset: 0; } }
@keyframes hvIcoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
@keyframes hvIcoLed { 50% { opacity: .15; } }
@keyframes hvIcoPage { 0%, 100% { transform: scaleX(1); } 45% { transform: scaleX(.3); } }
@media (prefers-reduced-motion: reduce) {
	.hv-topic__icon, .hv-ico .i-rays, .hv-ico .i-glass, .hv-ico .i-screen { transition: none; }
	.hv-topic:hover .hv-ico *, .hv-topic:focus-visible .hv-ico * { animation: none !important; }
	.hv-topic:hover .hv-topic__icon { transform: none; }
}


/* ==========================================================
   ICON-BEWEGUNG PRODUKTIVITÄTS-TIPPS (01.11.2026)
   Wie bei den Themen-Kacheln: Bewegung nur beim Darüberfahren
   oder Tab-Fokus einer Kachel. Blitz im Kopf blitzt einmal auf,
   wenn die Maus in den Bereich kommt.
   ========================================================== */
.hv-tile__icon { transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.hv-tile:hover .hv-tile__icon, .hv-tile:focus-visible .hv-tile__icon { transform: scale(1.06); }
.hv-ico .i-check { stroke-dasharray: 6; }
.hv-ico .i-wave { transform-origin: 12px 11px; }
.hv-tile:hover .i-key, .hv-tile:focus-visible .i-key { animation: hvIcoKey 1.2s ease-in-out infinite; }
.hv-tile:hover .i-key--2, .hv-tile:focus-visible .i-key--2 { animation-delay: .15s; }
.hv-tile:hover .i-key--3, .hv-tile:focus-visible .i-key--3 { animation-delay: .3s; }
.hv-tile:hover .i-key--4, .hv-tile:focus-visible .i-key--4 { animation-delay: .45s; }
.hv-tile:hover .i-space, .hv-tile:focus-visible .i-space { animation: hvIcoSpace 1.2s ease-in-out .6s infinite; }
.hv-tile:hover .i-wave, .hv-tile:focus-visible .i-wave { animation: hvIcoWave 1s ease-in-out infinite; }
.hv-tile:hover .i-lens, .hv-tile:focus-visible .i-lens { animation: hvIcoLens 1.4s ease-in-out infinite; }
.hv-tile:hover .i-split, .hv-tile:focus-visible .i-split { animation: hvIcoSplit 1.6s ease-in-out infinite; }
.hv-tile:hover .i-ring, .hv-tile:focus-visible .i-ring { animation: hvIcoRing .9s ease-in-out infinite; }
.hv-tile:hover .i-check, .hv-tile:focus-visible .i-check { animation: hvIcoCheck .5s ease-out both; }
.hv-tile:hover .i-check--2, .hv-tile:focus-visible .i-check--2 { animation-delay: .2s; }
.hv-tile:hover .i-check--3, .hv-tile:focus-visible .i-check--3 { animation-delay: .4s; }
.hv-tile:hover .i-tray, .hv-tile:focus-visible .i-tray { animation: hvIcoTray .9s ease-in-out infinite; }
.hv-tips:hover .hv-tips__icon .i-bolt { animation: hvIcoBolt .6s ease-out; }
@keyframes hvIcoKey { 0%, 60%, 100% { transform: translateY(0); } 20% { transform: translateY(1.5px); } }
@keyframes hvIcoSpace { 0%, 60%, 100% { transform: translateY(0); } 20% { transform: translateY(1px); } }
@keyframes hvIcoWave { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .55; } }
@keyframes hvIcoLens { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-1.5px, -1px); } 66% { transform: translate(1.5px, .5px); } }
@keyframes hvIcoSplit { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@keyframes hvIcoRing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes hvIcoCheck { from { stroke-dashoffset: 6; } to { stroke-dashoffset: 0; } }
@keyframes hvIcoTray { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.5px); } }
@keyframes hvIcoBolt { 0%, 100% { fill: transparent; } 35% { fill: currentColor; } }
@media (prefers-reduced-motion: reduce) {
	.hv-tile__icon { transition: none; }
	.hv-tile:hover .hv-tile__icon { transform: none; }
	.hv-tile:hover .hv-ico *, .hv-tile:focus-visible .hv-ico *, .hv-tips:hover .i-bolt { animation: none !important; }
}