/*
Theme Name: Hafen
Author: hafenstudios
Author URI: https://hafenstudios.com/
Description: Hafen is a block theme for content-led websites. It supports full site editing and includes block patterns for landing pages, posts, timelines and statistics, a magazine-style blog layout, 38 style variations that change colors, typography, shapes and density, a self-hosted variable font, custom colors and logo support, a sticky header with a skip link, and editor styles that match the front end.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hafen
Tags: blog, news, portfolio, one-column, grid-layout, block-styles, wide-blocks, full-site-editing, full-width-template, template-editing, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, translation-ready, style-variations, block-patterns
*/

/* =========================================================
   HAFEN — Front-end + Editor supplemental styles.
   Das Meiste kommt aus theme.json. Hier nur, was theme.json
   (noch) nicht ausdrücken kann: Sticky-Header-Politur,
   Answer-Block-Styles, Reveal-Enhancement, Skip-Link.
   ========================================================= */

/* ---------- Grundlinie: box-sizing (Learning aus dem ersten Live-Einsatz:
   ohne border-box laufen Spalten mit Padding auf Mobilgeräten über) ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* Defensiv gegen Fixbreiten aus Alt-Inhalten (typisch nach einem Umzug von
   einem Classic-Theme: .logo-container img{width:400px}). Ein solcher
   Overflow sprengte auf zwei Kundenseiten den Header samt Hamburger.
   clip statt hidden – hidden würde position:sticky im Header abschalten. */
html, body { overflow-x: clip; }

/* Embed-Airbag (Praxis-Befund 48, flirtuniversity.de): Core deckelt nur
   Bilder auf 100%, nicht iframe/embed/object/video. Alt-Inhalte mit fixen
   Embed-Breiten (560px-YouTube-Boxen) spannen sonst mobile Grids auf und
   der Überstand fällt dem overflow-clip oben zum Opfer. */
.wp-block-post-content :is(iframe, embed, object, video) { max-width: 100%; }

/* Anker-Ziele nicht unter dem Sticky-Header landen lassen (Praxis-Befund 49):
   ohne Versatz verdeckt die Headerleiste die erste Zeile jedes Sprungziels
   (Inhaltsverzeichnis, FAQ-Links). Per Custom Property nachjustierbar,
   wenn eine Site den Header höher baut. */
.wp-block-post-content [id] { scroll-margin-top: var(--hafen-scroll-offset, 88px); }

/* Vertikaler Rhythmus im Fließtext (Exzellenzrunde 1.0.0): Überschriften
   binden an den FOLGENDEN Absatz, nicht an den vorigen. Der uniforme
   blockGap kommt aus einer :where()-Regel ohne Spezifität, diese zwei
   Zeilen gewinnen sicher, und weil style.css auch Editor-Style ist,
   stimmt der Editor automatisch mit. */
.wp-block-post-content > :is(h2, h3, h4):not(:first-child) { margin-top: 2.75rem; }
.wp-block-post-content > :is(h2, h3, h4) + * { margin-top: 0.75rem; }
h1, h2, h3 { text-wrap: balance; }

/* Grundlinie fuer native Controls: hell ist der Standard, die 8 dunklen
   Looks setzen per styles.css ihrer Variation color-scheme: dark. */
:where(body) { color-scheme: light; }

/* Link- und Auswahl-Politur (Exzellenzrunde 1.0.0) */
a { text-underline-offset: 0.15em; }
::selection { background: var(--wp--preset--color--brand-light); }

/* Formulare (Exzellenzrunde 1.0.0): Kommentarformular und Suche waren
   die letzten ungestylten Flaechen. Rahmen bewusst muted statt border,
   dieselbe WCAG-1.4.11-Logik wie beim Menue-Button weiter unten. */
:root { accent-color: var(--wp--preset--color--brand-dark); }
.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea,
.wp-block-search__input {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--small, 12px);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}
.comment-form input:focus, .comment-form textarea:focus, .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--brand-dark);
}

/* Taktile Rueckmeldung beim Klick */
.wp-element-button:active { transform: translateY(1px); }

/* Outline-Button-Hover: die :hover-Angabe einer Block-Style-Variation wird vom
   theme.json-Sanitizer verworfen, deshalb liegt der Hover hier. */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--brand-light);
	color: var(--wp--preset--color--brand-dark);
}

/* Deep-Verlauf: Vollton-Rueckfall fuer Browser ohne color-mix, sonst stuende
   weisser CTA-Text auf weissem Grund. */
.has-deep-gradient-background { background-color: var(--wp--preset--color--deep); }

/* Header-CTA auf sehr schmalen Viewports ausblenden, der Menue-Button reicht. */
@media (max-width: 480px) {
	.hafen-header .hafen-header-cta { display: none; }
}

/* ---------- Skip-Link (a11y) ---------- */
.hafen-skip-link {
	position: absolute; left: -9999px; top: 12px; z-index: 300;
	background: var(--wp--preset--color--brand-dark); color: var(--wp--preset--color--base);
	padding: 11px 18px; border-radius: var(--wp--custom--radius--small, 12px); font-weight: 700; text-decoration: none;
}
.hafen-skip-link:focus { left: 12px; }

/* ---------- Sichtbarer Tastaturfokus ----------
   Der Browser-Default verschwindet auf farbigen Flächen. Zwei Ringe
   (Farbe + heller Absatz) sitzen auf hellem wie dunklem Grund.
   :is() statt :where(), damit die Regel Spezifität hat und nicht von
   der erstbesten Block-Regel ausgehebelt wird — ein Fokusring, den
   Core-CSS überschreiben kann, ist keine Grundlinie. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-dark);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--wp--preset--color--base);
	border-radius: 4px;
}

/* ---------- Sticky header ---------- */
.hafen-header {
	position: sticky; top: 0; z-index: 60;
	background: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
	border-bottom: 1px solid transparent;
	transition: border-color .25s ease, box-shadow .25s ease;
}
/* Der Weichzeichner nur dort, wo :has() den Notausgang unten kennt.
   Ohne :has()-Unterstützung bleibt der Header ungefiltert — dann ist er
   auch nie Containing Block und das Mobilmenü kann gar nicht klemmen.
   Die Fläche ist zu 80 % deckend, der Verlust ist rein kosmetisch. */
@supports selector(:has(*)) {
	.hafen-header {
		-webkit-backdrop-filter: saturate(180%) blur(16px);
		backdrop-filter: saturate(180%) blur(16px);
	}
}
.hafen-header.is-scrolled {
	border-bottom-color: var(--wp--preset--color--border);
	box-shadow: var(--wp--preset--shadow--card);
}
.hafen-header { padding-block: 0.85rem; }
.hafen-header .hafen-brand { gap: 0.6rem; }
.hafen-header .wp-block-site-title { margin: 0; }
.hafen-header .wp-block-site-title a { font-weight: 900; letter-spacing: -.03em; text-decoration: none; color: var(--wp--preset--color--contrast); }

/* ---------- Footer (neutral, per CSS gestylt) ---------- */
.hafen-footer {
	background: var(--wp--preset--color--deep); color: #b9c7cf;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}
.hafen-footer .hafen-brand { gap: 0.6rem; margin-bottom: 0.9rem; }
.hafen-footer .wp-block-site-title { margin: 0; }
.hafen-footer .wp-block-site-title a { color: #fff; font-weight: 900; letter-spacing: -.03em; text-decoration: none; }
.hafen-footer .wp-block-site-tagline { color: #8ea3ad; font-size: 0.95rem; margin: 0 0 1.5rem; max-width: 340px; }
.hafen-footer .hafen-footer-copy { margin: 0; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.1); color: #7c9099; font-size: 0.85rem; }
/* Der Credit ist sichtbar. Er stand bis 0.4.0 auf display:none — das Markup
   war da, der Absatz nicht, und wer ihn zeigen wollte, suchte lange.
   Wer ihn nicht will, löscht den Absatz unter Design > Editor > Fußbereich.
   Farben werden geerbt statt festgelegt, damit der Credit auch in einem
   hellen oder umgefärbten Fußbereich lesbar bleibt. */
.hafen-footer .hafen-footer-credit { margin: 0.4rem 0 0; color: inherit; opacity: .75; font-size: 0.8rem; }
.hafen-footer .hafen-footer-credit a { color: inherit; text-decoration: underline; }
.hafen-footer .hafen-footer-credit a:hover { opacity: 1; }
.hafen-footer a { color: #cfe0e6; }
.hafen-footer a:hover { color: #fff; }

/* ---------- Mobile-Menü ----------
   KRITISCH (zwei Kundenseiten): Ein backdrop-filter macht das Element zum
   Containing Block für position:fixed-Nachfahren. Das Core-Overlay
   (position:fixed; inset:0) richtete sich dadurch an der ~72px hohen
   Headerbox aus statt am Viewport — Menü unbenutzbar, Inhalt schien durch.
   Solange das Overlay offen ist, fällt der Filter deshalb weg und der
   Header verlässt seinen eigenen Stacking-Context.
   Die Hintergrundfarbe des Overlays selbst setzt der Navigation-Block
   (overlayBackgroundColor/overlayTextColor in parts/header.html) — ohne
   sie erbt Core "transparent". ---------- */
.hafen-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	z-index: 100000;
}

/* Gurt dazu (Praxis-Befund 9b/49): Ohne eigene Overlay-Farbe malt Core das
   offene Menü fest WEISS mit schwarzem Text (spezifischere Core-Regel als
   jede simple Fallback-Zeile). Auf dunklen Stilvarianten wie Nachtfahrt
   blitzt dann ein weißes Menü auf. Der Selektor spiegelt Cores Form, damit
   die Theme-Farben genau dort gewinnen, wo Cores Weiß-Default gilt, und
   nirgendwo sonst: Navigationen mit eigener Hintergrund- oder Overlay-Farbe
   (auch per Header-Part-Attribut) bleiben unberührt, ebenso Cores
   background-color:inherit für eingefärbte Navigationen. */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.has-background):not(.disable-default-overlay) {
	background-color: var(--wp--preset--color--base, #fff);
}
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.has-text-color):not(.disable-default-overlay) {
	color: var(--wp--preset--color--contrast, #000);
}

/* Overlay-Politur: großzügige Tippziele, eingerücktes Untermenü,
   deutlich sichtbarer Schließen-Knopf. Gilt in jeder Breite, in der
   Core das Overlay überhaupt einblendet. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0.25rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > a {
	display: flex; align-items: center;
	min-height: 44px; font-size: 1.2rem; padding-block: 0.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { padding-left: 1rem; }
.wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; }
.wp-block-navigation__responsive-container-close svg { width: 26px; height: 26px; }

/* Der Standard-Hamburger ist ein blankes, leicht zu übersehendes 24px-Icon.
   Daraus wird ein klarer, tippbarer „Menü"-Button (44px Touch-Ziel).
   Label über --hafen-menu-label überschreibbar. */
@media (max-width: 600px) {
	.hafen-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex; align-items: center; gap: 0.45rem;
		min-height: 44px; padding: 0.35rem 0.8rem;
		/* Rand in brand-dark statt border: als Bedienelement braucht die
		   Umrandung 3:1 (WCAG 1.4.11); border/base liegt bei 1.23:1. */
		border: 1.5px solid var(--wp--preset--color--brand-dark); border-radius: var(--wp--custom--radius--pill, 999px);
		background: var(--wp--preset--color--base); color: var(--wp--preset--color--brand-dark);
	}
	.hafen-header .wp-block-navigation__responsive-container-open:not(.always-shown)::after {
		content: var(--hafen-menu-label, "Menu");
		font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em;
	}
	.hafen-header .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; }

	.hafen-header .wp-block-navigation__responsive-container.is-menu-open { padding-top: 1rem; }
}

/* Brand-Zeile mobil: Logo + langer Site-Title brechen nebeneinander
   unschön um. Gibt es ein Logo, trägt es unter 640px die Marke allein;
   ohne Logo bleibt der Titel selbstverständlich stehen. */
@media (max-width: 640px) {
	.hafen-brand:has(.wp-block-site-logo) .wp-block-site-title { display: none; }
}

/* ---------- Brand mark ---------- */
.hafen-brand-mark {
	display: inline-grid; place-items: center; width: 40px; height: 40px;
	border-radius: var(--wp--custom--radius--small, 12px); color: #fff;
	background: var(--wp--preset--gradient--brand);
	box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--wp--preset--color--brand) 70%, transparent);
}
.hafen-tag {
	font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--ai-dark); background: var(--wp--preset--color--ai-light);
	padding: 4px 8px; border-radius: var(--wp--custom--radius--small, 12px);
}

/* ---------- Eyebrow ---------- */
.hafen-eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
	color: var(--wp--preset--color--brand-dark);
}
.hafen-eyebrow.is-ai { color: var(--wp--preset--color--ai-dark); }
.hafen-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }

/* =========================================================
   Answer-engine block styles (rein visuell, aus Core-Blöcken).
   Die echten schema-emittierenden Custom-Blöcke kommen in
   "Hafen Core". Hier: Gruppen-/Details-Styles für denselben Look.
   ========================================================= */
.wp-block-group.is-style-hafen-tldr,
.wp-block-group.is-style-hafen-definition,
.wp-block-group.is-style-hafen-steps {
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--card, 18px);
	padding: clamp(1.1rem, 3vw, 1.5rem);
	/* base statt #fff: sonst steht in der dunklen Variation "Nachtfahrt"
	   heller Text auf einer weißen Karte (gemessen 1.12:1). */
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
}
.wp-block-group.is-style-hafen-definition { border-left-color: var(--wp--preset--color--ai); }
.wp-block-group.is-style-hafen-steps { border-left-color: var(--wp--preset--color--accent-3); }

.wp-block-group.is-style-hafen-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card, 18px);
	padding: clamp(1.4rem, 3vw, 1.9rem);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--card);
	height: 100%;
	/* Ohne overflow schneidet der Radius nichts ab — ein Bild ragte
	   sichtbar über Rand und Ecken hinaus. */
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.wp-block-group.is-style-hafen-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--wp--preset--shadow--lift);
	border-color: color-mix(in srgb, var(--wp--preset--color--brand) 40%, var(--wp--preset--color--border));
}
/* Die Karte ist ein Flex-Container mit align-items:flex-start. Medien darin
   werden dadurch nicht auf Kartenbreite gestreckt, sondern auf ihre
   intrinsische Breite (auf einer Kundenseite 1500px) — das Bild hing aus der
   Karte heraus. Gilt für jedes Medium in der Karte, nicht nur Beitragsbilder. */
.wp-block-group.is-style-hafen-card > * { max-width: 100%; }
.wp-block-group.is-style-hafen-card :where(.wp-block-post-featured-image, .wp-block-image, figure) {
	align-self: stretch; width: 100%; margin: 0;
}
.wp-block-group.is-style-hafen-card :where(.wp-block-post-featured-image, .wp-block-image, figure) img {
	display: block; width: 100%; height: 100%; object-fit: cover;
}

/* ---------- Magazin-Liste (Blog, Archiv, Suche) — neu in 0.9.0 ----------
   Zwei Spalten statt drei, der erste Beitrag der Seite als Aufmacher über
   beide Spalten. Ein 3er-Raster quetscht Titel und Excerpt und macht lange
   Archive monoton (Praxis-Befund 44, flirtuniversity.de). */
.hafen-magazin { row-gap: var(--wp--preset--spacing--50); }
.hafen-magazin > li { min-width: 0; }
.hafen-magazin .is-style-hafen-card { padding: 0 0 1.25rem; }
.hafen-magazin .is-style-hafen-card > :not(.wp-block-post-featured-image) {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}
.hafen-magazin .wp-block-post-featured-image { margin-bottom: 0.9rem; }
/* Karten ohne Beitragsbild: Markenbanderole statt Loch im Raster (Befund 46) */
.hafen-magazin .is-style-hafen-card:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	align-self: stretch;
	height: 10px;
	margin-bottom: 1.1rem;
	background: linear-gradient(90deg, var(--wp--preset--color--brand), var(--wp--preset--color--brand-light));
}
/* Ruhige Titel, Markenfarbe erst beim Hover */
.hafen-magazin .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.hafen-magazin .wp-block-post-title a:hover { color: var(--wp--preset--color--brand); }
/* Aufmacher: erster Beitrag über beide Spalten, Bild links */
@media (min-width: 782px) {
	.hafen-magazin > li:first-child { grid-column: 1 / -1; }
	.hafen-magazin > li:first-child .is-style-hafen-card {
		display: grid;
		grid-template-columns: 1.15fr 1fr;
		column-gap: clamp(1.2rem, 3vw, 2rem);
		align-items: center;
		padding: 0;
	}
	.hafen-magazin > li:first-child .wp-block-post-featured-image {
		grid-row: 1 / span 4;
		height: 100%;
		margin: 0;
	}
	.hafen-magazin > li:first-child .is-style-hafen-card > :not(.wp-block-post-featured-image) {
		grid-column: 2;
		padding-left: 0;
		padding-right: clamp(1.2rem, 3vw, 2rem);
	}
	.hafen-magazin > li:first-child .is-style-hafen-card:not(:has(.wp-block-post-featured-image)) {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		padding: 0 0 1.4rem;
	}
	.hafen-magazin > li:first-child .is-style-hafen-card:not(:has(.wp-block-post-featured-image)) > * {
		padding-left: 1.4rem;
		padding-right: 1.4rem;
	}
	.hafen-magazin > li:first-child .wp-block-post-title { font-size: clamp(1.5rem, 2.6vw, 2rem); }
	.hafen-magazin > li:first-child .wp-block-post-excerpt { font-size: 1.05rem; }
}
@media (max-width: 781px) {
	.hafen-magazin > li:first-child .wp-block-post-title { font-size: 1.35rem; }
}
/* Pagination: echte Tippziele, aktuelle Seite markiert */
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--wp--custom--radius--small, 12px);
}
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--brand-light);
	color: var(--wp--preset--color--brand-dark);
	font-weight: 700;
}

/* Details block styled as FAQ item */
.wp-block-details.is-style-hafen-faq {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 4px 0;
}
.wp-block-details.is-style-hafen-faq summary { font-weight: 700; cursor: pointer; padding: 10px 0; }

/* ---------- Reveal enhancement (progressive) ----------
   Default: sichtbar. Erst wenn JS die Klasse .hafen-anim setzt,
   wird versteckt + animiert. So bleibt der Inhalt ohne JS da. */
.hafen-reveal { transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); }
.hafen-anim .hafen-reveal { opacity: 0; transform: translateY(24px); }
.hafen-anim .hafen-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Icon-ish list markers for feature lists ----------
   Beide Selektoren: .is-style-hafen-checklist ist der registrierte
   Block-Style (Inserter), .hafen-checklist bleibt für Bestandsinhalte
   erhalten, die die Klasse direkt gesetzt haben. */
.hafen-checklist,
.is-style-hafen-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.hafen-checklist li,
.is-style-hafen-checklist li { position: relative; padding-left: 30px; }
.hafen-checklist li::before,
.is-style-hafen-checklist li::before {
	content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px;
	border-radius: var(--wp--custom--radius--small, 12px); background: var(--wp--preset--color--brand-light);
}
/* Der Haken als Maske statt als eingefärbtes SVG: so nimmt er die
   Markenfarbe der jeweiligen Style-Variation an. Fest kodiertes Petrol
   war in der dunklen Variation auf dunkelgrünem Grund kaum zu sehen. */
.hafen-checklist li::after,
.is-style-hafen-checklist li::after {
	content: ""; position: absolute; left: 0; top: .35em; width: 18px; height: 18px;
	background-color: var(--wp--preset--color--brand-dark);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* ---------- Zeitstrahl (Pattern hafen/timeline) ----------
   Vertikale Linie + Punkte für Projekthistorien. Aufbau aus
   Core-Blöcken, hier nur die Linie/Punkte, die Core nicht kann.
   Farben ausschließlich über Theme-Presets. ---------- */
.hafen-timeline { position: relative; max-width: 760px; margin-left: auto; margin-right: auto; padding-left: 34px; }
.hafen-timeline::before {
	content: ""; position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px;
	background: var(--wp--preset--color--border);
}
.hafen-timeline-item { position: relative; padding: 0 0 2.5rem 26px; }
.hafen-timeline-item:last-child { padding-bottom: 0; }
.hafen-timeline-item::before {
	content: ""; position: absolute; left: -33px; top: 7px; width: 18px; height: 18px;
	border-radius: 50%; background: var(--wp--preset--color--surface);
	border: 3px solid var(--wp--preset--color--brand);
}
.hafen-timeline-item.is-highlight::before {
	background: var(--wp--preset--color--ai);
	border-color: var(--wp--preset--color--ai);
	box-shadow: 0 0 0 4px var(--wp--preset--color--ai-light);
}
.hafen-timeline-year {
	/* brand-dark statt brand: die Jahreszahl ist Text in 22px/400 und
	   braucht 4,5:1. brand liegt im Standard bei 2,66:1 auf Weiss. */
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.375rem; line-height: 1.2;
	color: var(--wp--preset--color--brand-dark);
}
.hafen-timeline-item.is-highlight .hafen-timeline-year { color: var(--wp--preset--color--ai-dark); }

/* =========================================================
   Utility-Klassen für die Patterns (was Core-Blöcke nicht können)
   ========================================================= */

/* Gradient-Text für Headline-Akzente */
.hafen-grad-text {
	background: linear-gradient(115deg, var(--wp--preset--color--brand) 10%, var(--wp--preset--color--ai) 90%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}

/* Hero-Hintergrund: sanftes Mesh + feines Raster */
.hafen-hero { position: relative; isolation: isolate; overflow: hidden; }
.hafen-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background:
		radial-gradient(1100px 540px at 82% -14%, color-mix(in srgb, var(--wp--preset--color--brand) 16%, transparent), transparent 60%),
		radial-gradient(780px 500px at 4% 8%, color-mix(in srgb, var(--wp--preset--color--ai) 13%, transparent), transparent 58%);
}
.hafen-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -2; opacity: .5;
	background-image: linear-gradient(color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent) 1px, transparent 1px);
	background-size: 34px 34px;
	-webkit-mask-image: radial-gradient(860px 520px at 60% 18%, #000, transparent 75%);
	mask-image: radial-gradient(860px 520px at 60% 18%, #000, transparent 75%);
}

/* Badge-Pille (Hero-Eyebrow als Chip) */
.hafen-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 7px 15px; border-radius: var(--wp--custom--radius--pill, 999px); font-size: 0.85rem; font-weight: 700;
	background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--wp--preset--shadow--card);
	color: var(--wp--preset--color--text-soft);
}

/* Zitat-Pille im AI-Panel */
.hafen-cited {
	display: inline; font-weight: 700; color: var(--wp--preset--color--ai-dark);
	background: var(--wp--preset--color--ai-light); padding: 1px 8px; border-radius: var(--wp--custom--radius--small, 12px);
	box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Kleiner Marker-Punkt für Panel-Kopfzeilen */
.hafen-panel-tag {
	font-size: 0.75rem; font-weight: 700; color: var(--wp--preset--color--brand-dark);
	background: var(--wp--preset--color--brand-light); padding: 4px 10px; border-radius: var(--wp--custom--radius--pill, 999px);
}

/* Feature-/Panel-Icon-Box */
.hafen-ic {
	display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none;
	border-radius: var(--wp--custom--radius--small, 12px); color: #fff; background: var(--wp--preset--gradient--brand);
}
.hafen-ic svg { width: 24px; height: 24px; }
.hafen-ic.is-ai { background: var(--wp--preset--gradient--ai); }
.hafen-ic.is-accent-3 { background: var(--wp--preset--gradient--accent-3); }
.hafen-ic.is-accent-2 { background: var(--wp--preset--gradient--accent-2); }

/* Große Kennzahl (Performance) */
.hafen-stat { font-size: clamp(2.75rem, 6vw, 3.75rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; }

/* Hero-Trust-Zeile */
.hafen-trust { color: var(--wp--preset--color--muted); font-size: 0.9rem; font-weight: 600; }
.hafen-trust p { margin: 0; }

/* Hero-KI-Panel (Boxen per Klasse, damit das Block-Markup gültig bleibt) */
.hafen-ml-auto { margin-left: auto; }
.hafen-qbubble { background: var(--wp--preset--color--surface); border-radius: var(--wp--custom--radius--small, 12px); padding: 0.8rem 1rem; }
.hafen-qbubble p { margin: 0; }
.hafen-src { padding: 0.75rem 0.9rem; border: 1px dashed var(--wp--preset--color--brand); border-radius: var(--wp--custom--radius--small, 12px); background: var(--wp--preset--color--brand-light); }
.hafen-src-text p { margin: 0; }
.hafen-ic-sm { width: 34px; height: 34px; border-radius: var(--wp--custom--radius--small, 12px); }
.hafen-ic-sm svg { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
	.hafen-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.hafen-header { transition: none; }
}

/* ponytail: Kompat für Alt-Inhalte (boeasy.de, Stand 0.5.0) — entfernen, sobald Inhalte migriert sind */
:root {
	--wp--preset--color--memberjet: var(--wp--preset--color--accent-2);
	--wp--preset--color--adjet: var(--wp--preset--color--accent-3);
	--wp--preset--gradient--memberjet: var(--wp--preset--gradient--accent-2);
	--wp--preset--gradient--adjet: var(--wp--preset--gradient--accent-3);
}
.has-memberjet-color { color: var(--wp--preset--color--accent-2); }
.has-memberjet-background-color { background-color: var(--wp--preset--color--accent-2); }
.has-adjet-color { color: var(--wp--preset--color--accent-3); }
.has-adjet-background-color { background-color: var(--wp--preset--color--accent-3); }
.has-memberjet-gradient-background { background: var(--wp--preset--gradient--accent-2); }
.has-adjet-gradient-background { background: var(--wp--preset--gradient--accent-3); }
.hafen-ic.is-memberjet { background: var(--wp--preset--gradient--accent-2); }
.hafen-ic.is-adjet { background: var(--wp--preset--gradient--accent-3); }