/* ============================================================
   Hochhäuser Webdesign – Ergänzungen zu theme.json
   Alles, was sich in theme.json nicht sauber ausdrücken lässt.
   ============================================================ */

/* --- Barrierefreiheit --------------------------------------- */

/* Sichtbarer Tastatur-Fokus: 2 px Petrol (nur bei Tastaturbedienung) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--petrol-600);
	outline-offset: 2px;
	border-radius: 2px;
}
/* Auf dunklen Flächen weißer Fokusrahmen */
.has-petrol-600-background-color :focus-visible,
.has-petrol-800-background-color :focus-visible,
.has-petrol-900-background-color :focus-visible {
	outline-color: #fff;
}

/* Sprunglink "Zum Inhalt springen" sichtbar und in CI, wenn fokussiert */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--petrol-900);
	color: #fff;
	font-family: var(--wp--preset--font-family--arial);
	padding: 0.75rem 1.25rem;
	text-decoration: none;
}

/* Bewegung reduzieren, wenn im Betriebssystem eingestellt */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Gold-Akzente (sparsam!) -------------------------------- */
/* Verwendung: Block → Erweitert → Zusätzliche CSS-Klasse(n)     */

/* Feine Goldlinie unter einer Überschrift */
.hw-goldlinie::after {
	content: "";
	display: block;
	width: 3rem;
	height: 2px;
	margin-top: 0.6em;
	background: var(--wp--preset--color--gold-500);
}
.has-text-align-center.hw-goldlinie::after { margin-inline: auto; }

/* Goldene Aufzählungszeichen */
.hw-liste-gold li::marker { color: var(--wp--preset--color--gold-500); }

/* Dachzeile über einer Überschrift (Gold 900 = ausreichender Kontrast) */
.hw-dachzeile {
	color: var(--wp--preset--color--gold-900);
	font-family: var(--wp--preset--font-family--arial);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Kleinigkeiten ------------------------------------------ */

/* Links im Fließtext gut erkennbar unterstreichen */
:where(.wp-block-post-content, .entry-content) a:where(:not(.wp-element-button)) {
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

/* Bilder nie über den Container hinaus */
img { max-width: 100%; height: auto; }

/* --- Navigation (ab 1.1.0) ---------------------------------- */

/* Untermenü breit genug, damit Einträge nicht umbrechen */
.wp-block-navigation .wp-block-navigation__submenu-container {
	min-width: 17rem;
	padding-block: 0.5rem;
	border: 1px solid var(--wp--preset--color--petrol-200);
	border-radius: 4px;
	box-shadow: var(--wp--preset--shadow--karte);
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1rem;
}

/* Menüpunkt als Button: Menüpunkt → Erweitert → CSS-Klasse "hw-nav-button" */
.wp-block-navigation .hw-nav-button > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--petrol-600);
	color: var(--wp--preset--color--weiss);
	padding: 0.55em 1.2em;
	border-radius: 4px;
	font-weight: 700;
	text-decoration: none;
}
.wp-block-navigation .hw-nav-button > .wp-block-navigation-item__content:hover,
.wp-block-navigation .hw-nav-button > .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--petrol-800);
	color: var(--wp--preset--color--weiss);
	text-decoration: none;
}

/* --- Hero (ab 1.1.0) ---------------------------------------- */
.hw-hero .hw-vertrauen { margin-top: var(--wp--preset--spacing--40); }
.hw-hero .hw-hero-bild img { width: 100%; height: auto; display: block; }

/* Kopf, Inhalt und Fuß direkt aneinander (kein weißer Streifen) */
.wp-site-blocks > * { margin-block-start: 0; }

/* --- Symbole (ab 1.2.0) --------------------------------------
   Verwendung: Gruppe/Karte → Erweitert → CSS-Klasse, z. B. "hw-icon-telefon".
   Das Symbol erscheint oben in der Karte (rein dekorativ, für Screenreader unsichtbar).
   Verfügbar: telefon, bildschirm, kompass, uhr, layout, chip, standort, schutz, lupe, gespraech, gebaeude, werkzeug, warenkorb, globus, kalender, schloss, mail, ziel */
[class*="hw-icon-"]::before {
	content: "";
	display: block;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--gold-50);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.5rem;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--gold-100, #EDE5CC);
}
.hw-icon-telefon::before    { background-image: url(../icons/telefon.svg); }
.hw-icon-bildschirm::before { background-image: url(../icons/bildschirm.svg); }
.hw-icon-kompass::before    { background-image: url(../icons/kompass.svg); }
.hw-icon-uhr::before        { background-image: url(../icons/uhr.svg); }
.hw-icon-layout::before     { background-image: url(../icons/layout.svg); }
.hw-icon-chip::before       { background-image: url(../icons/chip.svg); }
.hw-icon-standort::before   { background-image: url(../icons/standort.svg); }
.hw-icon-schutz::before     { background-image: url(../icons/schutz.svg); }
.hw-icon-lupe::before       { background-image: url(../icons/lupe.svg); }
.hw-icon-gespraech::before  { background-image: url(../icons/gespraech.svg); }
.hw-icon-gebaeude::before   { background-image: url(../icons/gebaeude.svg); }
.hw-icon-werkzeug::before   { background-image: url(../icons/werkzeug.svg); }
.hw-icon-warenkorb::before  { background-image: url(../icons/warenkorb.svg); }
.hw-icon-globus::before     { background-image: url(../icons/globus.svg); }
.hw-icon-kalender::before   { background-image: url(../icons/kalender.svg); }
.hw-icon-schloss::before    { background-image: url(../icons/schloss.svg); }
.hw-icon-mail::before       { background-image: url(../icons/mail.svg); }
.hw-icon-ziel::before       { background-image: url(../icons/ziel.svg); }

/* --- Lesebreite (ab 1.2.0) -----------------------------------
   Klasse "hw-lesebreite" an Absätzen: max. ca. 65 Zeichen pro Zeile */
.hw-lesebreite { max-width: 65ch; }
/* linksbündig an der Inhaltskante (Abschnitte mit 1200px Inhaltsbreite) */
.is-layout-constrained > .hw-lesebreite:not(.has-text-align-center) {
	margin-left: max(0px, calc((100% - var(--hw-inhalt, 1200px)) / 2)) !important;
}
.has-text-align-center.hw-lesebreite { margin-inline: auto; }

/* --- Raster auf dem Handy einspaltig (ab 1.2.0) --------------- */
@media (max-width: 600px) {
	.wp-block-group.is-layout-grid { grid-template-columns: 1fr !important; }
}

/* --- Zitat (ab 1.2.1) ----------------------------------------- */
.wp-block-quote p {
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.3;
}
.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation {
	display: block;
	margin-top: 1rem;
	font-family: var(--wp--preset--font-family--arial);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	line-height: 1.5;
	opacity: 0.85;
}

/* Dachzeile auf dunklem Grund: helles Gold (ausreichender Kontrast) */
.has-petrol-900-background-color .hw-dachzeile,
.has-petrol-800-background-color .hw-dachzeile,
.has-petrol-600-background-color .hw-dachzeile {
	color: #CEB773;
}

/* Links auf dunklem Grund automatisch weiß (ab 1.2.1) */
:where(.has-petrol-900-background-color, .has-petrol-800-background-color, .has-petrol-600-background-color) a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--weiss);
}
:where(.has-petrol-900-background-color, .has-petrol-800-background-color, .has-petrol-600-background-color) a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--petrol-100);
}

/* Abschnitte mit voller Breite stoßen bündig aneinander (ab 1.2.2) */
.wp-block-post-content > .alignfull + .alignfull { margin-block-start: 0; }
.wp-block-post-content > .alignfull:first-child { margin-block-start: 0; }

/* 1.2.2: Absatz unter einem Zitat bündig mit dem Zitattext (Balken 3px + Innenabstand 1.5rem) */
.hw-unter-zitat { padding-left: calc(1.5rem + 3px); }

/* --- Seitenmuster (ab 1.3.0) ---------------------------------- */

/* Schrittnummer und Jahreszahl in Karten */
.hw-schritt {
	font-family: var(--wp--preset--font-family--georgia);
	line-height: 1;
	margin-bottom: 0.5rem;
}

/* Preisangabe in Paketkarten */
.hw-preis {
	font-family: var(--wp--preset--font-family--georgia);
	color: var(--wp--preset--color--petrol-600);
	margin-block: 0.25rem 0.75rem;
}

/* Häufige Fragen (Block "Details") */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--petrol-200);
	padding-block: 1rem;
}
.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--georgia);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--petrol-900);
	list-style-position: outside;
	margin-left: 1.25rem;
}
.wp-block-details summary::marker { color: var(--wp--preset--color--gold-500); }
.wp-block-details[open] summary { margin-bottom: 0.75rem; }
.wp-block-details > :not(summary) { margin-left: 1.25rem; }

/* Bilder in Karten: volle Kartenbreite */
.wp-block-group .wp-block-image img { width: 100%; }
.wp-block-image.is-resized img { width: auto; }

/* Raster mit 3 oder 4 Spalten: auf Tablets zweispaltig */
@media (min-width: 601px) and (max-width: 1000px) {
	.wp-block-group.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* Untermenü: Einträge nicht umbrechen (ab 1.3.2, stärker als die WP-Vorgabe) */
@media (min-width: 600px) {
	.wp-block-navigation .wp-block-navigation-item .wp-block-navigation__submenu-container {
		min-width: 17rem;
	}
	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		white-space: nowrap;
	}
}

/* --- Formulare: Gravity Forms im Hochhäuser-Stil (ab 1.4.0) ---- */
.gform-theme--orbital,
.gform_wrapper.gform-theme {
	--gf-color-primary: #284860;
	--gf-color-primary-rgb: 40, 72, 96;
	--gf-color-primary-contrast: #FFFFFF;
	--gf-color-primary-darker: #213B4F;
	--gf-color-primary-lighter: #8295A3;
	--gf-ctrl-border-color: #8295A3;
	--gf-radius: 4px;
	--gf-font-family-base: var(--wp--preset--font-family--arial);
	--gf-ctrl-label-color-primary: #2C2C2A;
	--gf-ctrl-desc-color: #5F5E5A;
}
.gform_wrapper .gsection_title,
.gform_wrapper .gform_page_footer + * h3 {
	font-family: var(--wp--preset--font-family--georgia);
	font-weight: 400;
	color: var(--wp--preset--color--petrol-900);
}
.gform_wrapper .gfield_required { color: var(--wp--preset--color--gold-900); }

/* --- Sticky Header (ab 1.5.0) ------------------------------- */
/* Header bleibt beim Scrollen oben stehen – reines CSS, kein JS.  */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
/* Angemeldet: unter der WordPress-Werkzeugleiste andocken */
.admin-bar header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 0px);
}
/* Auf schmalen Bildschirmen scrollt die Werkzeugleiste mit */
@media (max-width: 600px) {
	.admin-bar header.wp-block-template-part { top: 0; }
}
/* Sprungziele und Tastaturfokus nicht unter dem Header verstecken (WCAG 2.4.11) */
html {
	scroll-padding-top: calc(7rem + var(--wp-admin--admin-bar--height, 0px));
}
/* Weiches Scrollen nur, wenn keine reduzierte Bewegung gewünscht ist */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* --- „Nach oben"-Button (ab 1.5.0) -------------------------- */
.hw-nach-oben {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--petrol-800);
	color: #fff;
	box-shadow: 0 2px 8px rgba(24, 43, 58, 0.25);
	text-decoration: none;
	transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.2s ease;
}
.hw-nach-oben:hover {
	background: var(--wp--preset--color--petrol-600);
	color: #fff;
}
.hw-nach-oben:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold-500);
	outline-offset: 3px;
	border-radius: 50%;
}
.hw-nach-oben svg {
	width: 22px;
	height: 22px;
}
.hw-nach-oben.ist-versteckt {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
@media print {
	.hw-nach-oben { display: none; }
}