/*
Theme Name: Hermanski Immobilien
Theme URI: https://example.de/
Author: Hermanski Immobilien
Description: Schlankes Block-Theme für die Hausverwaltung Hermanski Immobilien. Lädt keine externen Ressourcen, legt beim Aktivieren alle Seiten an.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
Version: 2.4.7
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hermanski-immobilien
*/

:root {
	--hi-ink: var(--wp--preset--color--ink);
	--hi-slate: var(--wp--preset--color--slate);
	--hi-stone: var(--wp--preset--color--stone);
	--hi-line: var(--wp--preset--color--line);
	--hi-plaster: var(--wp--preset--color--plaster);
	--hi-accent: var(--wp--preset--color--accent);
	--hi-accent-light: var(--wp--preset--color--accent-light);
	--hi-grey: var(--wp--preset--color--grey);
	--hi-on-ink: #c9d3d4;
	--hi-panel: var(--wp--preset--color--ink);
	--hi-shadow: 23, 50, 59;
	--hi-todo: #fbf6ea;
	--hi-pyr-1: #ffffff;
	--hi-pyr-2: #e6ebea;
	--hi-pyr-3: #dbe1e0;
	--hi-grotesk: var(--wp--preset--font-family--grotesk);
}

/* ---------- Grundlagen ---------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-variant-numeric: oldstyle-nums proportional-nums;
}

h1, h2, h3, h4, .wp-block-button__link, .wp-block-navigation {
	font-variant-numeric: lining-nums;
	text-wrap: balance;
}

p, li { text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; }
h1, h2, h3 { hyphens: manual; overflow-wrap: break-word; }

::selection { background: var(--hi-accent); color: var(--wp--preset--color--white); }

:focus-visible {
	outline: 3px solid var(--hi-accent);
	outline-offset: 3px;
}
:is(.hi-year, .hi-section--ink, .hi-note--alert) :focus-visible { outline-color: var(--hi-accent-light); }

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

[id] { scroll-margin-top: 1.5rem; }

/* Keine Abstände zwischen Kopf, Inhalt und Fuß bzw. zwischen vollbreiten Abschnitten */
body .wp-site-blocks > * + * { margin-block-start: 0; }
.hi-main .wp-block-post-content > .alignfull { margin-block: 0; }
.hi-main { padding-block: 0; }
.hi-main--plain { padding-block: clamp(3rem, 7vw, 5rem); }

/* ---------- Buttons ---------- */

.wp-block-button__link { text-decoration: none; }

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--hi-ink);
	border: 2px solid var(--hi-ink);
	padding: calc(0.95em - 2px) calc(1.5em - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background: var(--hi-ink);
	color: var(--wp--preset--color--white);
}

/* ---------- Kopfbereich ---------- */

.hi-header {
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--hi-line);
	padding-block: 1.1rem;
	position: relative;
	z-index: 20;
}
.hi-header__inner { gap: 2rem; }

.hi-logo { margin: 0 !important; line-height: 0; }
.hi-logo a { display: inline-block; }
.hi-logo img {
	display: block;
	width: 212px;
	height: auto;
}

.hi-nav .wp-block-navigation__container { gap: 1.9rem; }
.hi-nav .wp-block-navigation-item__content {
	color: var(--hi-ink);
	text-decoration: none;
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
}
.hi-nav .wp-block-navigation-item__content:hover,
.hi-nav .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: var(--hi-accent);
}
.hi-nav .hi-nav__cta > .wp-block-navigation-item__content {
	background: var(--hi-ink);
	color: var(--wp--preset--color--white);
	padding: 0.6rem 1.1rem;
	border-radius: 3px;
	border-bottom: 0;
}
.hi-nav .hi-nav__cta > .wp-block-navigation-item__content:hover { background: var(--hi-slate); }

/* Mobiles Menü */
.hi-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--hi-plaster);
	color: var(--hi-ink);
	padding: 1.5rem var(--wp--preset--spacing--40);
}
.hi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 1.25rem; }
.hi-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.5rem; }
.hi-nav .wp-block-navigation__responsive-container-open svg,
.hi-nav .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; }

/* ---------- Gemeinsame Textbausteine ---------- */

.hi-place {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1.25rem !important;
	font-family: var(--hi-grotesk);
	font-size: 1rem;
	font-weight: 600;
	color: var(--hi-accent);
}
.hi-place::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--hi-accent);
}

.hi-lead {
	font-size: clamp(1.15rem, 1.5vw, 1.35rem);
	line-height: 1.55;
	color: var(--hi-slate);
	max-width: 36em;
}

.hi-intro { font-size: 1.2rem; max-width: 40em; margin-bottom: 2.75rem !important; }

.hi-fit {
	font-family: var(--hi-grotesk);
	font-size: 0.9375rem;
	color: var(--hi-stone);
}

.hi-small { font-size: 0.9375rem; color: var(--hi-stone); }

.hi-more a {
	font-family: var(--hi-grotesk);
	font-weight: 600;
	text-decoration-color: var(--hi-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

/* ---------- Startseite: Hero ---------- */

.hi-hero {
	background: var(--hi-plaster);
	border-bottom: 1px solid var(--hi-line);
	padding-block: clamp(3rem, 7vw, 6rem) 0;
	overflow: hidden;
}
.hi-hero__cols { gap: clamp(2rem, 5vw, 5rem); align-items: flex-end !important; }
.hi-hero__cols > .wp-block-column:first-child { padding-bottom: clamp(3rem, 6vw, 5.5rem); align-self: center; }
.hi-hero__title {
	font-size: clamp(2.3rem, 4.4vw, 3.6rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-weight: 620;
	max-width: 20ch;
	margin-block: 0 1.5rem !important;
}
.hi-hero__buttons { margin-top: 2.25rem !important; }
.hi-hero__image { margin: 0 !important; }
.hi-hero__image img {
	display: block;
	width: 100%;
	max-width: 440px;
	height: auto;
	margin-inline: auto;
	margin-bottom: -2px;
}

/* ---------- Seiten-Hero ---------- */

.hi-pagehero {
	background: var(--hi-plaster);
	border-bottom: 1px solid var(--hi-line);
	padding-block: clamp(3rem, 7vw, 5.5rem);
}
.hi-pagehero h1 {
	font-size: clamp(2.1rem, 4vw, 3.25rem);
	letter-spacing: -0.02em;
	font-weight: 620;
	max-width: 22ch;
	margin-block: 0 1.5rem !important;
}
.hi-pagehero .wp-block-buttons { margin-top: 2rem !important; }

/* ---------- Abschnitte ---------- */

/*
 * Schmalere Überschriften und Absätze in breiten Abschnitten bleiben links
 * an der Inhaltskante stehen, statt automatisch zentriert zu werden.
 */
.hi-hero, .hi-pagehero, .hi-section, .hi-year, .hi-cta { --hi-box: 1200px; }
.hi-section--narrow { --hi-box: 720px; }
:is(.hi-pagehero, .hi-section, .hi-year, .hi-cta) > :not(.alignfull) {
	margin-left: max(0px, calc((100% - var(--hi-box)) / 2)) !important;
	margin-right: auto !important;
}


.hi-section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.hi-section--tight { padding-block: 2.5rem; }
.hi-section--plaster { background: var(--hi-plaster); }
.hi-section > h2:first-child { margin-top: 0; }
.hi-section h2 { max-width: 24ch; margin-bottom: 2rem; }
.hi-section p, .hi-pagehero p, .hi-cta p { max-width: 42em; }

.hi-section--ink { background: var(--hi-panel); color: var(--hi-on-ink); }
.hi-section--ink :is(h2, h3, strong) { color: #fff; }
.hi-section--ink a { color: #fff; }

/* Dreier-/Vierer-Spalten mit Messinglinie */
.hi-trio { gap: clamp(1.75rem, 3.5vw, 3rem) !important; }
.hi-trio > .wp-block-column {
	border-top: 3px solid var(--hi-accent);
	padding-top: 1.35rem;
}
.hi-trio h3 { margin-top: 0; margin-bottom: 0.75rem; }
.hi-trio p { margin-block: 0.5rem; }
.hi-trio--lists ul { margin-top: 1rem; }
.hi-trio--lists li { margin-block: 0.4rem; }
.hi-trio--lists li::marker { color: var(--hi-accent); }

@media (min-width: 782px) and (max-width: 1100px) {
	.hi-trio--four { flex-wrap: wrap !important; }
	.hi-trio--four > .wp-block-column { flex-basis: calc(50% - 1.5rem) !important; flex-grow: 0 !important; }
}

.hi-split { gap: clamp(2rem, 6vw, 5.5rem) !important; }
.hi-split h2 { margin-top: 0; }

/* Häkchen-Liste */
.hi-checklist {
	list-style: none;
	padding-left: 0 !important;
	margin-top: 0;
}
.hi-checklist li {
	position: relative;
	padding: 0.75rem 0 0.75rem 2.1rem;
	border-bottom: 1px solid var(--hi-line);
}
.hi-checklist li:first-child { border-top: 1px solid var(--hi-line); }
.hi-checklist li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 1.15rem;
	width: 14px;
	height: 7px;
	border-left: 2px solid var(--hi-accent);
	border-bottom: 2px solid var(--hi-accent);
	transform: rotate(-45deg);
}
.hi-section--ink .hi-checklist li::before { border-color: var(--hi-accent-light); }
.hi-section--ink .hi-checklist li,
.hi-section--ink .hi-checklist li:first-child { border-color: rgba(255, 255, 255, 0.16); }

/* Nummerierte Schritte (echter Ablauf) */
.hi-steps {
	list-style: none;
	padding-left: 0 !important;
	margin: 0;
	counter-reset: hi-step;
}
.hi-steps li {
	counter-increment: hi-step;
	position: relative;
	padding: 0 0 1.75rem 3.6rem;
}
.hi-steps li::before {
	content: counter(hi-step);
	position: absolute;
	left: 0;
	top: -0.15rem;
	width: 2.4rem;
	height: 2.4rem;
	display: grid;
	place-items: center;
	border: 2px solid var(--hi-ink);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	font-family: var(--hi-grotesk);
	font-weight: 650;
	font-size: 1rem;
	font-variant-numeric: lining-nums;
}
.hi-steps li::after {
	content: "";
	position: absolute;
	left: calc(1.2rem - 1px);
	top: 2.5rem;
	bottom: 0.25rem;
	width: 2px;
	background: var(--hi-line);
}
.hi-steps li:last-child { padding-bottom: 0; }
.hi-steps li:last-child::after { display: none; }
.hi-steps strong {
	display: block;
	font-family: var(--hi-grotesk);
	font-size: 1.125rem;
	font-weight: 650;
	margin-bottom: 0.2rem;
}

/* Hinweis-Kästen */
.hi-note {
	box-sizing: border-box;
	margin-top: 3rem !important;
	padding: 1.5rem 1.75rem;
	background: var(--hi-plaster);
	border-left: 3px solid var(--hi-accent);
	max-width: 52em;
}
.hi-note > :first-child { margin-top: 0; }
.hi-note > :last-child { margin-bottom: 0; }
.hi-note h3 { margin-bottom: 0.5rem; }

.hi-note--alert {
	margin-top: 0 !important;
	background: var(--hi-panel);
	color: var(--hi-on-ink);
	padding: 2rem;
}
.hi-note--alert :is(h2, a) { color: #fff; }
.hi-note--alert h2 { font-size: var(--wp--preset--font-size--large); margin-bottom: 1rem; }

.hi-note--todo {
	margin: 0 0 2.5rem !important;
	background: var(--hi-todo);
	border: 2px dashed var(--hi-accent);
}

/* ---------- Häufige Fragen ---------- */

.hi-faq {
	border-top: 1px solid var(--hi-line);
	padding-block: 1.15rem;
	margin-block: 0 !important;
}
.hi-faq:last-of-type { border-bottom: 1px solid var(--hi-line); }
.hi-faq summary {
	position: relative;
	cursor: pointer;
	list-style: none;
	padding-right: 2.5rem;
	font-family: var(--hi-grotesk);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.35;
}
.hi-faq summary::-webkit-details-marker { display: none; }
.hi-faq summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: -0.15rem;
	font-size: 1.6rem;
	font-weight: 400;
	color: var(--hi-accent);
}
.hi-faq > p { margin: 0.85rem 0 0.25rem; }

/* ---------- Abschluss-Aufruf ---------- */

.hi-cta {
	background: var(--wp--preset--color--white);
	border-top: 1px solid var(--hi-line);
	padding-block: clamp(4rem, 8vw, 6.5rem);
}
.hi-cta h2 {
	margin-top: 0;
	font-size: clamp(1.75rem, 3vw, 2.4rem);
	letter-spacing: -0.015em;
	max-width: 26ch;
}
.hi-cta .wp-block-buttons { margin-top: 2rem !important; }

/* ---------- Vorstellung Inhaber (Über uns) ---------- */

.hi-person__cols { gap: clamp(2.5rem, 7vw, 6.5rem) !important; }
.hi-portrait {
	position: relative;
	margin: 0 !important;
	max-width: 420px;
}
.hi-portrait::before {
	content: "";
	position: absolute;
	inset: 1.75rem -1.75rem -1.75rem 1.75rem;
	background: var(--hi-plaster);
	border-radius: 22px;
	z-index: 0;
}
.hi-portrait img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 22px;
	box-shadow: 0 30px 60px -30px rgba(var(--hi-shadow), 0.45), 0 2px 6px rgba(var(--hi-shadow), 0.06);
}
.hi-role {
	margin: 0 0 0.5rem !important;
	font-family: var(--hi-grotesk);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--hi-accent);
}
.hi-person__name {
	margin: 0 0 1.5rem !important;
	font-size: clamp(2.2rem, 4.2vw, 3.4rem);
	letter-spacing: -0.025em;
}
.hi-person__lead { font-size: 1.2rem; color: var(--hi-slate); }
.hi-person__motto {
	margin: 1.9rem 0 !important;
	padding-left: 1.15rem;
	border-left: 3px solid var(--hi-accent);
	font-size: 1.35rem;
	font-style: italic;
	line-height: 1.45;
	color: var(--hi-ink);
}
.hi-person__sign {
	margin-top: 1.75rem !important;
	font-style: italic;
	color: var(--hi-slate);
}
.hi-person__sign strong {
	display: inline-block;
	margin-top: 0.35rem;
	font-family: var(--hi-grotesk);
	font-style: normal;
	font-weight: 650;
	color: var(--hi-ink);
}
@media (min-width: 782px) {
	/* Foto bleibt beim Lesen des Textes stehen */
	.hi-person__cols > .wp-block-column:first-child { position: sticky; top: 2rem; }
}
.hi-person__contact {
	margin-top: 2rem !important;
	padding-top: 1.5rem;
	border-top: 1px solid var(--hi-line);
	font-family: var(--hi-grotesk);
	font-size: 1.05rem;
	line-height: 1.9;
}
.hi-person__contact a { text-decoration: none; color: var(--hi-ink); }
.hi-person__contact a:hover { color: var(--hi-accent); }

@media (max-width: 781px) {
	.hi-portrait { max-width: 300px; margin-bottom: 1.5rem !important; }
	.hi-portrait::before { inset: 1rem -1rem -1rem 1rem; }
}

/* ---------- Kontakt ---------- */

.hi-contact { gap: clamp(2rem, 5vw, 4.5rem) !important; }
.hi-contact h2 { margin-top: 0; }
.hi-contact__big {
	font-family: var(--hi-grotesk);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.55;
}
.hi-contact__big a { text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--hi-accent); }

/* ---------- Rechtstexte ---------- */

.hi-legal h1 { font-size: clamp(2.25rem, 4.5vw, 3.25rem); margin-top: 0; }
.hi-legal h2 { font-size: 1.3rem; margin: 2.5rem 0 0.75rem; }
.hi-legal p { margin-block: 0.5rem; }

/* ---------- Fußbereich (Aufbau wie bisherige Website) ---------- */

.hi-footer {
	background: var(--wp--preset--color--white);
	color: var(--hi-ink);
	padding-block: clamp(2.5rem, 5vw, 3.5rem) 0;
	font-family: var(--hi-grotesk);
	font-size: 0.975rem;
	line-height: 1.6;
}
.hi-footer__cols {
	gap: 2.5rem !important;
	padding-top: 2.25rem;
	padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 1px solid var(--hi-accent);
}
.hi-footer p { margin: 0 0 0.5rem; }
.hi-footer a { color: var(--hi-ink); text-decoration: none; }
.hi-footer a:hover,
.hi-footer a:focus-visible { color: var(--hi-accent); text-decoration: underline; text-underline-offset: 4px; }
.hi-footer__logo { margin: 0 !important; }
.hi-footer__logo img { display: block; width: 210px; max-width: 100%; height: auto; }
.hi-footer__name {
	color: var(--hi-accent);
	font-weight: 650;
	letter-spacing: 0.02em;
}
.hi-footer__mail a { color: var(--hi-accent); white-space: nowrap; }
.hi-footer__mail--muted a { color: var(--hi-stone); }
.hi-footer__links a { font-weight: 550; }
.hi-footer__reviews { margin-top: 1rem !important; }
.hi-footer__reviews a {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3rem;
	padding: 0.55rem 0.95rem 0.6rem;
	border: 1px solid var(--hi-line);
	border-radius: 12px;
	font-weight: 550;
	font-size: 0.9rem;
	line-height: 1.2;
	transition: border-color 0.3s ease, color 0.3s ease;
	white-space: nowrap;
	hyphens: manual;
}
/* Fünf Sterne über der Beschriftung */
.hi-footer__reviews a::before {
	content: "";
	width: 85px;
	height: 16px;
	flex: none;
	background: #f4b400;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") 0 0 / 17px 16px repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") 0 0 / 17px 16px repeat-x;
}
.hi-footer__reviews a:hover { border-color: var(--hi-accent); text-decoration: none; }
.hi-footer__badge { margin: 0 !important; }
.hi-footer__badge img { display: block; width: 96px; height: auto; }
.hi-footer__badge a { display: block; width: 96px; line-height: 0; transition: opacity 0.3s ease; }
.hi-footer__badge a:hover { opacity: 0.85; }
/* Partner: eigene Zeile unten rechts, Logo mindestens 64 px hoch */
.hi-footer__partners {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	margin-top: 1.25rem !important;
	padding-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.hi-footer__partners > * { margin: 0 !important; }
.hi-footer__partner-label {
	font-size: 0.85rem;
	font-weight: 550;
	color: var(--hi-stone);
	white-space: nowrap;
}
.hi-footer__partner a { display: block; line-height: 0; border-radius: 3px; transition: opacity 0.3s ease; }
.hi-footer__partner a:hover { opacity: 0.85; }
.hi-footer__partner img { display: block; width: auto; height: 64px; max-width: 100%; }
@media (max-width: 781px) {
	.hi-footer__partners { justify-content: flex-start; flex-wrap: wrap; }
}
.hi-footer__badge figcaption {
	margin: 0.4rem 0 0 !important;
	width: 96px;
	text-align: center;
	font-size: 0.8rem;
	font-weight: 550;
	color: var(--hi-stone);
	white-space: nowrap;
}
.hi-footer__bar {
	background: var(--hi-plaster);
	padding-block: 0.85rem !important;
	margin-top: 0 !important;
}
.hi-footer__bar p {
	margin: 0;
	text-align: center;
	font-size: 0.875rem;
	color: var(--hi-stone);
}

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 1100px) {
	.hi-footer__mail a { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 781px) {
	.hi-footer__cols { gap: 1.5rem !important; }
	.hi-hero__cols > .wp-block-column:first-child { padding-bottom: 0; }
	.hi-hero__image img { max-width: 300px; }
	.hi-logo img { width: 160px; }
	.hi-header__inner { gap: 0.75rem !important; }
	.hi-split > .wp-block-column,
	.hi-hero__cols > .wp-block-column { flex-basis: 100% !important; }
}

@media print {
	.hi-header nav, .hi-hero__buttons, .hi-cta .wp-block-buttons { display: none; }
	.hi-year, .hi-footer, .hi-section--ink { background: #fff; color: #000; }
}

.hi-split h3 + .hi-checklist { margin-top: 1.25rem; }

/* Mobiles Menü: links ausgerichtet, ruhiger Hintergrund */
.hi-nav .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--hi-plaster) !important; color: var(--hi-ink) !important; }
.hi-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.hi-nav .is-menu-open .wp-block-navigation__container,
.hi-nav .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; text-align: left; }
.hi-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 3.5rem; }
.hi-nav .is-menu-open .hi-nav__cta > .wp-block-navigation-item__content { padding: 0.55rem 1.2rem !important; margin-top: 0.75rem; }


/* =====================================================================
   Kopfleiste: scrollt normal mit der Seite weg
   ===================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: relative;
	z-index: 100;
}
[id] { scroll-margin-top: 1.5rem; }

/* =====================================================================
   Feine Übergänge bei Interaktion
   ===================================================================== */

.wp-block-button__link,
.hi-nav .wp-block-navigation-item__content {
	transition: background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -12px rgba(var(--hi-shadow), 0.55);
}
.wp-block-button__link:active { transform: translateY(0); box-shadow: none; }
.hi-more a, .hi-contact__big a { transition: text-decoration-color 0.3s ease, color 0.3s ease; }

/* Häufige Fragen: weiches Auf- und Zuklappen (moderne Browser) */
:root { interpolate-size: allow-keywords; }
.hi-faq summary::after {
	content: "+";
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hi-faq[open] summary::after { content: "+"; transform: rotate(45deg); }
.hi-faq::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size 0.5s cubic-bezier(0.22, 1, 0.36, 1), content-visibility 0.5s allow-discrete;
}
.hi-faq[open]::details-content { block-size: auto; }

/* =====================================================================
   Einblend-Animationen beim Scrollen (nur mit JavaScript aktiv)
   ===================================================================== */

@media (prefers-reduced-motion: no-preference) {
	/* Inhalt kurz zurückhalten, bis das Skript die Elemente vorbereitet hat (max. 2,5 s) */
	.hi-js:not(.hi-ready) .hi-main { opacity: 0; }
	/* Versteckter Startzustand – ohne Übergang, damit er sofort gilt */
	.hi-js .hi-reveal {
		opacity: 0;
		transform: translate3d(0, 32px, 0);
	}
	.hi-js .hi-reveal--zoom { transform: scale(0.96); }
	/* Einblenden – nur hier läuft der Übergang */
	.hi-js .hi-reveal.is-visible {
		opacity: 1;
		transform: none;
		transition:
			opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
			transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: var(--hi-delay, 0ms);
	}
	.hi-js .hi-reveal--zoom.is-visible {
		transition:
			opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
			transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
		transition-delay: var(--hi-delay, 0ms);
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* =====================================================================
   Sprachumschalter (rechts oben)
   ===================================================================== */

.hi-header__right { gap: 1.4rem !important; align-items: center; }
.hi-tools { display: flex; align-items: center; gap: 0.5rem; }
.hi-lang { position: relative; margin: 0; }
.hi-lang summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	cursor: pointer;
	padding: 0.45rem 0.7rem 0.45rem 0.6rem;
	border: 1px solid var(--hi-line);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	font-family: var(--hi-grotesk);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hi-ink);
	transition: border-color 0.3s ease, background-color 0.3s ease;
	user-select: none;
}
.hi-lang summary::-webkit-details-marker { display: none; }
.hi-lang summary::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-left: 0.15rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hi-lang summary:hover { border-color: var(--hi-ink); }
.hi-lang[open] summary { border-color: var(--hi-ink); }
.hi-lang[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.hi-lang__icon { flex: none; }
.hi-lang__list {
	position: absolute;
	right: 0;
	top: calc(100% + 0.6rem);
	z-index: 200;
	min-width: 13.5rem;
	margin: 0;
	padding: 0.4rem;
	list-style: none;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--hi-line);
	border-radius: 14px;
	box-shadow: 0 24px 48px -24px rgba(var(--hi-shadow), 0.4), 0 2px 6px rgba(var(--hi-shadow), 0.06);
}
.hi-lang__list li { margin: 0; }
.hi-lang__list a {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.55rem 0.75rem;
	border-radius: 9px;
	font-family: var(--hi-grotesk);
	font-size: 0.95rem;
	color: var(--hi-ink);
	text-decoration: none;
	transition: background-color 0.2s ease;
}
.hi-lang__list a:hover,
.hi-lang__list a:focus-visible { background: var(--hi-plaster); }
.hi-lang__list a[aria-current] { color: var(--hi-accent); font-weight: 600; }
.hi-lang__code {
	width: 1.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--hi-stone);
}
@media (prefers-reduced-motion: no-preference) {
	.hi-lang[open] .hi-lang__list { animation: hi-pop 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
}
@keyframes hi-pop {
	from { opacity: 0; transform: translateY(-6px) scale(0.97); }
	to { opacity: 1; transform: none; }
}
@media (max-width: 781px) {
	.hi-header__right { gap: 0.9rem !important; }
	.hi-lang summary { padding: 0.4rem 0.6rem 0.4rem 0.5rem; }
}
/* Lange Menübezeichnungen in manchen Sprachen: etwas enger setzen */
@media (min-width: 782px) and (max-width: 1180px) {
	.hi-nav .wp-block-navigation__container { gap: 1.2rem; }
	.hi-nav { font-size: 0.95rem; }
}


/* =====================================================================
   Verwalterpyramide (Seite Hausverwaltung)
   Oben das Sichtbare (hell), unten die Arbeit im Hintergrund (dunkel).
   ===================================================================== */

.hi-pyramid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding-top: 2.4rem;
}
.hi-pyramid > * { margin: 0 !important; }
.hi-pyramid__tier {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 1.35rem clamp(1.1rem, 4vw, 3.5rem) 1.5rem;
	text-align: center;
	border-radius: 4px;
	font-family: var(--hi-grotesk);
	line-height: 1.55;
}
.hi-pyramid__tier > * { margin: 0 !important; }
.hi-pyramid__tier { color: var(--hi-ink); }
.hi-pyramid__tier--1 { width: min(100%, 46%); background: var(--hi-pyr-1); box-shadow: 0 1px 0 var(--hi-line); }
.hi-pyramid__tier--2 { width: min(100%, 74%); background: var(--hi-pyr-2); }
.hi-pyramid__tier--3 { background: var(--hi-pyr-3); }

/* Spitze der Pyramide */
.hi-pyramid__tier--1::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	transform: translateX(-50%);
	border-style: solid;
	border-width: 0 clamp(2.2rem, 5vw, 3.4rem) 2.2rem;
	border-color: transparent transparent var(--hi-pyr-1);
}

.hi-pyramid__label {
	font-size: 0.78rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	max-width: none !important;
	margin-bottom: 0.55rem !important;
	text-wrap: balance;
	hyphens: manual;
}
.hi-pyramid__label { color: var(--hi-accent); }

.hi-pyramid__items {
	list-style: none;
	padding: 0 !important;
	margin: 0;
	font-size: 0.98rem;
}
.hi-pyramid__items li { display: inline-block; margin: 0.08rem 0; }
.hi-pyramid__items li:not(:last-child)::after {
	content: "\00B7";
	margin: 0 0.5em;
	opacity: 0.55;
}

/* Unterste Stufe: drei Spalten mit Listen */
.hi-pyramid__cols {
	gap: clamp(1.25rem, 3vw, 2.75rem) !important;
	margin-top: 1.1rem !important;
	text-align: left;
}
.hi-pyramid__coltitle {
	font-size: 1.02rem !important;
	font-weight: 650;
	margin: 0 0 0.6rem !important;
	padding-top: 0.75rem;
	border-top: 2px solid var(--hi-accent);
}
.hi-pyramid__list {
	list-style: none;
	padding: 0 !important;
	margin: 0;
	font-size: 0.93rem;
	line-height: 1.5;
}
.hi-pyramid__list li {
	position: relative;
	padding-left: 0.95rem;
	margin: 0 0 0.42rem;
}
.hi-pyramid__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--hi-stone);
}

@media (max-width: 700px) {
	.hi-pyramid__tier--1 { width: 82%; }
	.hi-pyramid__tier--2 { width: 91%; }
	.hi-pyramid__items { font-size: 0.93rem; }
}

@media print {
	.hi-pyramid__tier { border: 1px solid #999; background: #fff !important; color: #000 !important; }
	.hi-pyramid__tier--1::before { display: none; }
}


/* =====================================================================
   „Hinter der Fassade“ (Startseite)
   Beim Scrollen bleibt der Abschnitt stehen, das Haus dreht sich um und
   zeigt den Grundriss; rechts leuchten die Eckdaten nacheinander auf.
   Ohne JavaScript oder bei „Bewegung reduzieren“: ruhige Darstellung,
   Haus und Grundriss nebeneinander.
   ===================================================================== */

.hi-turn {
	background: var(--wp--preset--color--white);
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.hi-turn__sticky { box-sizing: border-box; }
.hi-turn__sticky > * { margin-block: 0 !important; }
.hi-turn__eyebrow {
	font-family: var(--hi-grotesk);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--hi-accent);
	margin-bottom: 0.9rem !important;
}
.hi-turn__title,
.hi-turn__subtitle {
	font-family: var(--hi-grotesk);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 650;
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 !important;
	max-width: none !important;
}
.hi-turn__subtitle { color: var(--hi-stone); }

.hi-turn__stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(200px, 270px);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 4rem);
	margin-top: clamp(1.5rem, 3vw, 2.5rem) !important;
}
.hi-turn__stage > * { margin: 0 !important; }

/* Ruhige Darstellung: Haus und Grundriss nebeneinander */
.hi-turn__object {
	display: flex;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2.5rem);
}
.hi-turn__object > figure { margin: 0 !important; flex: 0 1 300px; }
.hi-turn__object img { display: block; width: 100%; height: auto; }

.hi-turn__facts {
	list-style: none;
	padding: 0 !important;
	margin: 0;
	font-family: var(--hi-grotesk);
}
.hi-turn__facts li {
	margin: 0;
	padding: 0.95rem 0;
	border-top: 1px solid var(--hi-line);
	font-size: 0.92rem;
	line-height: 1.4;
	color: var(--hi-stone);
}
.hi-turn__facts li:last-child { border-bottom: 1px solid var(--hi-line); }
.hi-turn__facts strong {
	font-size: 1.12rem;
	font-weight: 650;
	color: var(--hi-ink);
}
.hi-turn__note {
	max-width: 36em;
	margin: clamp(1.25rem, 3vw, 2rem) auto 0 !important;
	text-align: center;
	font-size: 0.98rem;
	color: var(--hi-slate);
}

/* Mit Bewegung: Abschnitt bleibt stehen, Haus dreht sich */
.hi-turn-on .hi-turn {
	height: 280vh;
	padding-block: 0;
}
.hi-turn-on .hi-turn__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 2rem;
}
.hi-turn-on .hi-turn__stage { perspective: 1600px; }
.hi-turn-on .hi-turn__object {
	display: block;
	position: relative;
	justify-self: center;
	width: min(100%, 440px, calc((100svh - 300px) / 1.2));
	aspect-ratio: 600 / 720;
	transform-style: preserve-3d;
	transform: rotateY(var(--hi-rot, 0deg)) scale(var(--hi-scale, 1));
	will-change: transform;
}
.hi-turn-on .hi-turn__object > figure {
	position: absolute;
	inset: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.hi-turn-on .hi-turn__object img { height: 100%; object-fit: contain; }
.hi-turn-on .hi-turn__back { transform: rotateY(180deg); }

.hi-turn-on .hi-turn__facts li {
	opacity: 0.2;
	transform: translate3d(0, 6px, 0);
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hi-turn-on .hi-turn__facts li.is-past { opacity: 0.5; transform: none; }
.hi-turn-on .hi-turn__facts li.is-on { opacity: 1; transform: none; }
.hi-turn-on .hi-turn__note {
	opacity: 0;
	transform: translate3d(0, 10px, 0);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hi-turn-on .hi-turn.is-done .hi-turn__note { opacity: 1; transform: none; }

@media (max-width: 781px) {
	.hi-turn__stage { grid-template-columns: 1fr; }
	.hi-turn__facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
	.hi-turn__facts li { padding: 0.6rem 0; font-size: 0.8rem; }
	.hi-turn__facts li:nth-last-child(2) { border-bottom: 1px solid var(--hi-line); }
	.hi-turn__facts strong { font-size: 0.98rem; }
	.hi-turn-on .hi-turn__sticky { padding-block: 1.25rem; }
	.hi-turn-on .hi-turn__object { width: min(64vw, calc((100svh - 400px) / 1.2)); }
	.hi-turn-on .hi-turn__note { font-size: 0.85rem; margin-top: 0.9rem !important; }
}

@media print {
	.hi-turn-on .hi-turn { height: auto; }
	.hi-turn-on .hi-turn__sticky { position: static; height: auto; }
}


/* =====================================================================
   Dunkler Modus
   Umschalter oben rechts; ohne gespeicherte Wahl gilt die Einstellung
   des Geräts. Gilt nur am Bildschirm, gedruckt wird immer hell.
   ===================================================================== */

@media screen {
	:root[data-theme="dark"] {
		color-scheme: dark;
		--wp--preset--color--white: #0f1b20;
		--wp--preset--color--plaster: #15252b;
		--wp--preset--color--ink: #e6ecec;
		--wp--preset--color--slate: #b9c8cc;
		--wp--preset--color--stone: #a3b0b4;
		--wp--preset--color--line: #2a3d45;
		--wp--preset--color--accent: #ec8b7f;
		--wp--preset--color--accent-light: #f0b2aa;
		--wp--preset--color--grey: #98a3a6;
		--hi-panel: #1b3038;
		--hi-shadow: 0, 0, 0;
		--hi-todo: #2a2516;
		--hi-pyr-1: #2b4049;
		--hi-pyr-2: #223740;
		--hi-pyr-3: #1c2f37;
	}
	/* Ohne JavaScript: Geräteeinstellung direkt übernehmen */
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme]) {
			color-scheme: dark;
			--wp--preset--color--white: #0f1b20;
			--wp--preset--color--plaster: #15252b;
			--wp--preset--color--ink: #e6ecec;
			--wp--preset--color--slate: #b9c8cc;
			--wp--preset--color--stone: #a3b0b4;
			--wp--preset--color--line: #2a3d45;
			--wp--preset--color--accent: #ec8b7f;
			--wp--preset--color--accent-light: #f0b2aa;
			--wp--preset--color--grey: #98a3a6;
			--hi-panel: #1b3038;
			--hi-shadow: 0, 0, 0;
			--hi-todo: #2a2516;
			--hi-pyr-1: #2b4049;
			--hi-pyr-2: #223740;
			--hi-pyr-3: #1c2f37;
		}
	}
	/* Logo: Farben umkehren, Rot bleibt rötlich (nur das mitgelieferte Logo). */
	:root[data-theme="dark"] img[src*="logo-hermanski.svg"] { filter: invert(1) hue-rotate(180deg); }
	:root[data-theme="dark"] .hi-portrait img { filter: brightness(0.92); }

	/* Hauszeichnung: dieselbe Zeichnung in hellen Linien auf dem dunklen Hintergrund.
	   Die dunkle Fassung wird über das Originalbild gelegt (greift nicht bei eigenen Fotos). */
	:root[data-theme="dark"] img[src*="stadthaus-augsburg.svg"] {
		object-position: -99999px 0;
		background: url("assets/img/stadthaus-augsburg-dunkel.svg") center / contain no-repeat;
	}
	:root[data-theme="dark"] img[src*="grundriss.svg"] {
		object-position: -99999px 0;
		background: url("assets/img/grundriss-dunkel.svg") center / contain no-repeat;
	}
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme]) img[src*="logo-hermanski.svg"] { filter: invert(1) hue-rotate(180deg); }
		:root:not([data-theme]) img[src*="stadthaus-augsburg.svg"] {
			object-position: -99999px 0;
			background: url("assets/img/stadthaus-augsburg-dunkel.svg") center / contain no-repeat;
		}
		:root:not([data-theme]) img[src*="grundriss.svg"] {
			object-position: -99999px 0;
			background: url("assets/img/grundriss-dunkel.svg") center / contain no-repeat;
		}
	}
}

/* Sanfter Farbwechsel beim Umschalten */
:root.hi-theme-switching,
:root.hi-theme-switching body,
:root.hi-theme-switching body * {
	transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, fill 0.45s ease, filter 0.45s ease !important;
}

/* Umschalter */
.hi-theme {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	margin: 0;
	border: 1px solid var(--hi-line);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--hi-ink);
	cursor: pointer;
	transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hi-theme[hidden] { display: none; }
.hi-theme:hover { border-color: var(--hi-ink); }
.hi-theme:active { transform: scale(0.92); }
.hi-theme svg { grid-area: 1 / 1; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.hi-theme__sun { opacity: 0; transform: rotate(-90deg) scale(0.6); }
:root[data-theme="dark"] .hi-theme__moon { opacity: 0; transform: rotate(90deg) scale(0.6); }
:root[data-theme="dark"] .hi-theme__sun { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.hi-theme svg { transition: none; }
}
@media print { .hi-theme { display: none; } }