/*
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, several style variations, 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.4
Tested up to: 7.0
Requires PHP: 7.4
Version: 0.8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hafen
Tags: blog, portfolio, one-column, grid-layout, block-styles, wide-blocks, full-site-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; }

/* ---------- Skip-Link (a11y) ---------- */
.hafen-skip-link {
	position: absolute; left: -9999px; top: 12px; z-index: 300;
	background: var(--wp--preset--color--brand-dark); color: #fff;
	padding: 11px 18px; border-radius: 10px; 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: 0 1px 2px rgba(12,27,46,.06), 0 2px 6px rgba(12,27,46,.06);
}
.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;
}

/* 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: 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, "Menü");
		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: 12px; color: #fff;
	background: var(--wp--preset--gradient--brand);
	box-shadow: 0 8px 18px -8px rgba(14,147,132,.7);
}
.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: 7px;
}

/* ---------- 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: 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: 0 1px 2px rgba(12,27,46,.06), 0 2px 6px rgba(12,27,46,.06);
}
.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: 18px;
	padding: clamp(1.4rem, 3vw, 1.9rem);
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 2px rgba(12,27,46,.06), 0 2px 6px rgba(12,27,46,.06);
	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: 0 16px 38px -16px rgba(12,27,46,.22);
	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;
}

/* 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: 6px; 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 {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.375rem; line-height: 1.2;
	color: var(--wp--preset--color--brand);
}
.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, #14b8a6 10%, #6d5efc 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%, rgba(20,184,166,.16), transparent 60%),
		radial-gradient(780px 500px at 4% 8%, rgba(109,94,252,.13), transparent 58%);
}
.hafen-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -2; opacity: .5;
	background-image: linear-gradient(rgba(12,27,46,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(12,27,46,.035) 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: 999px; font-size: 0.85rem; font-weight: 700;
	background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 1px 2px rgba(12,27,46,.06), 0 2px 6px rgba(12,27,46,.06);
	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: 6px;
	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: 999px;
}

/* Feature-/Panel-Icon-Box */
.hafen-ic {
	display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none;
	border-radius: 13px; 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: 14px; 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: 12px; background: var(--wp--preset--color--brand-light); }
.hafen-src-text p { margin: 0; }
.hafen-ic-sm { width: 34px; height: 34px; border-radius: 9px; }
.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); }