/* Ausdruck - feine Anpassungen ergaenzend zu theme.json */

/* Sanfte, ruhige Uebergaenge fuer eine wertige Anmutung */
a,
.wp-block-button__link,
.wp-block-image img,
.wp-block-cover {
	transition: all 0.25s ease;
}

/*
 * Buttons: keine willkürlichen Wortumbrüche. WordPress-Core setzt auf den
 * Button-Block "word-break: break-word", das trennt lange Wörter an beliebiger
 * Stelle ohne Bindestrich (z. B. "Planungsges präch"). Stattdessen bleiben
 * Wörter ganz und werden, falls nötig, mit korrekter deutscher Silbentrennung
 * getrennt (setzt lang="de" voraus, ist gesetzt).
 */
.wp-block-button__link,
.wp-element-button {
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Sicherheitsnetz: Ein einzelner ueberlanger String ohne Leerzeichen (etwa
   eine lange URL oder ein versehentlich durchgereichter Platzhalter) darf nie
   die Seitenbreite sprengen. Sonst zoomt Mobile-Safari die ganze Seite heraus
   und der 600px-Breakpoint der Navigation kippt (Hamburger verschwindet).
   Textelemente brechen im Notfall hart um. */
p, li, dd, dt, figcaption, blockquote, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

/* Buttons: dezenter Lift plus Glanz-Streifen beim Hover */
.wp-block-button__link {
	position: relative;
	overflow: hidden;
}

.wp-block-button__link::after {
	content: "";
	position: absolute;
	top: 0;
	left: -130%;
	width: 60%;
	height: 100%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
	transform: skewX(-20deg);
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-button__link:hover,
	.wp-block-button__link:focus-visible {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(23, 24, 28, 0.18);
	}

	.wp-block-button__link::after {
		transition: left 0.6s ease;
	}

	.wp-block-button__link:hover::after {
		left: 170%;
	}
}

/* Zaehlende Bewertungszahlen: gleichbleibende Ziffernbreite, kein Zittern */
.cv-count {
	font-variant-numeric: tabular-nums;
}

/* Galerie: Bilder leicht anheben beim Hover, dezenter Schatten */
.wp-block-gallery .wp-block-image {
	overflow: hidden;
}

.wp-block-gallery .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wp-block-image img:hover {
	transform: scale(1.02);
}

/* Portraits im Portfolio: einheitliches Hochformat */
.is-style-portrait img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
}

/* Bildrahmen-Stil */
.is-style-frame img {
	border: 1px solid rgba(23, 24, 28, 0.12);
}

/* Rundes Profilbild (z. B. auf „Über mich") */
.cv-avatar {
	max-width: 220px;
	margin-inline: auto;
}

.cv-avatar img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	width: 100%;
	height: auto;
}

/* Navigation: dezenter, ruhiger Look */
.wp-block-navigation {
	font-size: 1rem;
	letter-spacing: 0.01em;
}

.wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent);
}

/* ==================================================================
 * Mobiles Overlay-Menü (Variante B: helle, linksbündige Zeilen)
 *
 * WordPress-Core legt das Overlay als zentriertes Flex-Layout an und
 * steuert Ausrichtung/Breite über Inline-Variablen (--navigation-layout-*).
 * Damit die Menüpunkte als volle, linksbündige Zeilen erscheinen, setzen
 * wir Layout und Breite bewusst zurück und geben danach die Optik vor.
 * Das !important ist hier nötig, weil die Core-Inline-Styles sonst gewinnen.
 * ================================================================== */

/* 1) Layout-Reset: alles als volle, gestapelte Spalte */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: flex !important;
	flex-direction: column !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	left: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100% !important;
	margin: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

/* Aufklapp-Pfeile der Untermenüs ausblenden (alles ist offen sichtbar) */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	display: none !important;
}

/* 2) Optik: Inhalt oben ausrichten, angenehmer Innenabstand */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	justify-content: flex-start !important;
	padding: 3.5rem 0 2rem !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
	align-items: stretch !important;
	gap: 0 !important;
}

/* Top-Level-Zeilen mit feiner Trennlinie */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list > .wp-block-navigation-item {
	border-bottom: 1px solid rgba(23, 24, 28, 0.08) !important;
}

/* Top-Level-Beschriftung: Manrope, kräftig, linksbündig */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	text-align: left !important;
	font-family: var(--wp--preset--font-family--serif, Manrope), sans-serif !important;
	font-size: 1.2rem !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--contrast, #17181c) !important;
	padding: 1rem 1.5rem !important;
}

/* Ein Hauptpunkt mit Untermenü (z. B. „Leistungen") bekommt seine Trennlinie
   direkt unter der Beschriftung. Ohne diese Regel säße die Linie am Eltern-
   Element, also erst unterhalb des gesamten aufgeklappten Untermenüs. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	border-bottom: 1px solid rgba(23, 24, 28, 0.08) !important;
}

/* Untermenü: leicht abgesetzte Sandfläche.
   Das padding-top kommt aus dem WordPress-Core (24px) und reisst im offenen
   Menue eine unnoetige Luecke zwischen Hauptpunkt und erstem Untereintrag. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	align-items: stretch !important;
	background: var(--wp--preset--color--surface, #f5f4f2) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-bottom: 1px solid rgba(23, 24, 28, 0.05) !important;
}

/* Untermenü-Einträge: Inter, ruhiger, mit goldenem Akzentbalken */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--sans, Inter), sans-serif !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	color: #4a4c50 !important;
	padding: 0.7rem 1.5rem 0.7rem 2.5rem !important;
	border-left: 3px solid var(--wp--preset--color--accent, #8a6d3b) !important;
}

/* Schließen-Kreuz sichtbar und ruhig positioniert */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1.4rem !important;
	right: 1.4rem !important;
	color: var(--wp--preset--color--contrast, #17181c) !important;
}

/* Kopfbereich: bleibt beim Scrollen sichtbar (sticky) mit Milchglas-Effekt.
   Fallback ohne color-mix: deckende Basisfarbe. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--wp--preset--color--base);
	background: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	transition: box-shadow 0.3s ease;
}

/* Wichtig fuer das mobile Menue: Ein backdrop-filter erzeugt einen eigenen
   Containing-Block fuer position:fixed-Kinder. Dadurch wuerde das Vollbild-
   Overlay-Menue nur so hoch wie der Header (ca. 60px) und die Menuepunkte
   waeren abgeschnitten. Solange das Menue offen ist, heben wir den Filter
   deshalb auf, damit das Overlay wieder am Viewport haengt und den ganzen
   Bildschirm fuellt. */
header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open) {
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* Kopfbereich vom Inhalt absetzen */
.site-header {
	border-bottom: 1px solid rgba(23, 24, 28, 0.08);
	transition: padding 0.3s ease;
}

/* Beim Scrollen: Header kompakter plus dezenter Schatten (Klasse setzt experience.js) */
.cv-scrolled header.wp-block-template-part {
	box-shadow: 0 6px 24px rgba(23, 24, 28, 0.08);
}

.cv-scrolled .site-header {
	padding-top: 0.55rem !important;
	padding-bottom: 0.55rem !important;
}

/* Anker-Sprungziele nicht unter dem sticky Header verstecken */
html {
	scroll-padding-top: 84px;
}

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

/* Eyebrow-/Kicker-Text ueber Ueberschriften.
   Standardtextgroesse (Christians Wunsch, 16.07.2026); Sperrung dafuer
   leicht reduziert, damit die Versalien nicht zerfallen. */
.kicker {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 1.05rem;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/* Sterne-Bewertung (Kundenstimmen) */
.cv-rating {
	color: var(--wp--preset--color--accent);
	font-size: 1.6rem;
	letter-spacing: 0.15em;
	line-height: 1;
	margin-bottom: 0.35rem;
}

/* Kundenstimmen-Karten */
.testimonial-card {
	height: 100%;
}

.testimonial-card cite {
	color: var(--wp--preset--color--muted);
	font-style: normal;
	font-size: 0.95rem;
}

/* Paket-/Preiskarten */
.package-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}

/* Kicker in den Paketkarten auf einheitliche Höhe (zwei Zeilen),
   damit ein- und zweizeilige Labels die Preise auf gleicher Linie halten.
   Rechnung: 2 Zeilen x line-height 1.3 x font-size 1.05rem = 2.73rem */
.package-card .kicker {
	line-height: 1.3;
	min-height: 2.75rem;
	margin-top: 0;
	margin-block-start: 0;
}

.package-card .price {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--accent);
	margin: 0.25rem 0 0;
}

.package-card .price-note {
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	margin: 0.35rem 0 0;
}

.package-card ul {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.package-card ul li {
	position: relative;
	padding-left: 1.5rem;
	font-size: 0.95rem;
	line-height: 1.5;
}

.package-card ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.package-card .wp-block-buttons {
	margin-top: auto;
	padding-top: 1.5rem;
}

/* Buttons in den Paketkarten (nicht im einzelnen Angebots-Band):
   volle Kartenbreite, exakt gleiche Hoehe und mittiger Text.
   Wichtig: Der Buttons-CONTAINER selbst schrumpft im constrained
   Layout auf Inhaltsbreite und wird zentriert; er braucht die volle
   Breite, sonst laufen die width-100%-Regeln der Kinder ins Leere. */
.package-card:not(.offer) .wp-block-buttons {
	width: 100%;
}

.package-card:not(.offer) .wp-block-buttons .wp-block-button {
	width: 100%;
}

.package-card:not(.offer) .wp-block-buttons .wp-block-button__link {
	width: 100%;
	height: 3.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 0.95rem;
	line-height: 1.25;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

/* Detail-Links unter den Buttons: duerfen umbrechen (sonst laufen sie
   ueber den Kartenrand), reservieren aber einheitlich zwei Zeilen,
   damit die Buttons aller Karten auf derselben Linie stehen. */
.package-card:not(.offer) .has-small-font-size {
	line-height: 1.4;
	min-height: 2.8em;
}

/* Mittlere Bildschirmbreiten: drei Paketkarten nebeneinander werden zu
   schmal (Buttons und Listen brechen unschoen um). Dann untereinander.
   Unterhalb von 782px stapelt WordPress ohnehin selbst. */
@media (max-width: 1080px) and (min-width: 782px) {
	.wp-block-columns:has(> .wp-block-column .package-card:not(.offer)) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:has(> .wp-block-column .package-card:not(.offer)) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

.package-badge {
	position: absolute;
	top: -0.8rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	white-space: nowrap;
	margin: 0;
}

.package-card.is-featured {
	border-color: var(--wp--preset--color--accent) !important;
	box-shadow: 0 10px 30px rgba(23, 24, 28, 0.08);
}

/*
 * Farbige Sektions-Bänder in Inhaltsbreite brauchen horizontalen Innenabstand,
 * sonst kleben Texte und Überschriften direkt am Rand des Hintergrunds.
 * Full-width-Bänder (.alignfull) bringen ihren Abstand selbst mit und sind ausgenommen.
 * Zentrale Regel, damit nicht jedes Pattern einzeln geflickt werden muss.
 */
section.wp-block-group.has-background:not(.alignfull) {
	padding-left: clamp(0.75rem, 2.5vw, 1.5rem);
	padding-right: clamp(0.75rem, 2.5vw, 1.5rem);
}

/* Angebots-Band auf den Landingpages (einzelnes Paket, zentriert) */
.offer {
	max-width: 620px;
	margin-inline: auto;
}

.offer .price {
	font-size: 2.6rem;
}

/* Nummerierte Ablauf-Schritte auf Landingpages */
.step .kicker {
	font-size: 1.6rem;
	line-height: 1;
	margin-bottom: 0.5rem;
}

/* Lightbox etwas abdunkeln */
.wp-lightbox-overlay {
	background: rgba(12, 12, 14, 0.94);
}

/* Fokus gut sichtbar (Barrierefreiheit) */
:where(a, button, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ==================================================================
 * Erlebnis-Schicht (gehoert zu assets/js/experience.js)
 *
 * Alle Regeln greifen nur, wenn JavaScript die Klasse "cv-js" setzt
 * bzw. der Nutzer keine reduzierte Bewegung wuenscht. Ohne JS bleibt
 * jeder Inhalt sofort sichtbar (Progressive Enhancement).
 * ================================================================== */

/* Scroll-Reveal: Inhalte gleiten sanft nach oben ein */
.cv-js .cv-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition:
		opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cv-js .cv-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Hero-Inszenierung: gestaffelter Auftritt beim Laden */
@keyframes cv-rise {
	from {
		opacity: 0;
		transform: translateY(22px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Ken-Burns: langsamer Zoom mit optionaler Drift auf dem Hero-Bild.
   Parametrierbar ueber CSS-Variablen (Werte im Parameter-Block darunter):
   --cv-kenburns-duration  Dauer der Fahrt (z. B. 16s)
   --cv-kenburns-scale     Ziel-Zoom (1.0 = kein Zoom, 1.08 = 8 %)
   --cv-kenburns-x / -y    Drift in Prozent (negativ = nach links/oben)
   --cv-kenburns-origin    Zoom-Zentrum (z. B. 50% 30% = oberes Drittel) */
@keyframes cv-kenburns {
	from {
		transform: scale(1) translate(0, 0);
	}
	to {
		transform: scale(var(--cv-kenburns-scale, 1.06))
			translate(var(--cv-kenburns-x, 0%), var(--cv-kenburns-y, 0%));
	}
}

/* Ken-Burns-Parameter fuer den Hero der Startseite: hier stellen.
   Drift folgt der Blickrichtung (links unten). Das Zoom-Zentrum liegt
   auf der Augenpartie, und die Drift bleibt deutlich unter der
   Sicherheitsreserve des Zooms (bei Scale 1.08 ca. 4 % je Seite),
   damit die Augen waehrend der ganzen Fahrt vollstaendig im Bild sind. */
.home main > .wp-block-cover {
	--cv-kenburns-duration: 16s;
	--cv-kenburns-scale: 1.08;
	--cv-kenburns-x: -1.5%;
	--cv-kenburns-y: 1.25%;
	--cv-kenburns-origin: 42% 30%;
}

/* Hero-Text bleibt auch auf dem helleren Bild (dim 40 statt 60) gut lesbar */
.wp-block-cover .wp-block-cover__inner-container h1,
.wp-block-cover .wp-block-cover__inner-container p {
	text-shadow: 0 1px 22px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-cover .wp-block-cover__inner-container .kicker {
		animation: cv-rise 0.7s ease-out 0.15s both;
	}

	.wp-block-cover .wp-block-cover__inner-container h1 {
		animation: cv-rise 0.8s ease-out 0.3s both;
	}

	.wp-block-cover .wp-block-cover__inner-container p:not(.kicker) {
		animation: cv-rise 0.8s ease-out 0.45s both;
	}

	.wp-block-cover .wp-block-cover__inner-container .wp-block-buttons {
		animation: cv-rise 0.8s ease-out 0.6s both;
	}

	.wp-block-cover__image-background {
		transform-origin: var(--cv-kenburns-origin, 50% 35%);
		animation: cv-kenburns var(--cv-kenburns-duration, 18s) ease-out both;
	}

}

/* Sicherheitsnetz: reduzierte Bewegung schaltet alles ab */
@media (prefers-reduced-motion: reduce) {
	.cv-js .cv-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Seitenuebergaenge: weicher Cross-Fade beim Seitenwechsel.
   View Transitions API (rein deklarativ, Progressive Enhancement):
   Browser ohne Unterstuetzung wechseln die Seite wie bisher. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	::view-transition-old(root) {
		animation-duration: 0.25s;
	}

	::view-transition-new(root) {
		animation-duration: 0.35s;
	}

	/* Der Header bleibt beim Wechsel stehen, statt mitzublenden */
	header.wp-block-template-part {
		view-transition-name: cv-header;
	}
}

/* Social-Media-Icons im Footer */
.cv-social {
	display: flex;
	gap: 1.1rem;
	margin-top: 1.25rem;
}

.cv-social a {
	color: inherit;
	line-height: 0;
	opacity: 0.9;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.cv-social a:hover {
	opacity: 1;
	transform: translateY(-2px);
	color: var(--wp--preset--color--accent);
}