/*
Theme Name: ThePhotoPort
Theme URI: https://thephotoport.de
Author: Thomas Fritsch
Description: Bildbetontes Block-Theme für ThePhotoPort – Fotografie & Reisen – draußen und mittendrin.
Version: 1.9.0
Requires at least: 6.5
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: thephotoport
*/

/* Breite Groteskschrift wie im Logo */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-site-title,
.wp-block-navigation,
.tpp-display {
	font-stretch: 125%;
}

h1, .tpp-display {
	text-wrap: balance;
}

p { text-wrap: pretty; }


/* Fokus gut sichtbar */
:where(a, button, input, select, textarea, .wp-block-navigation-item__content):focus-visible {
	outline: 3px solid var(--wp--preset--color--signet);
	outline-offset: 3px;
	border-radius: 2px;
}

a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* Kopfbereich */
.tpp-header {
	position: relative;
	z-index: 50;
}
.tpp-header .tpp-logo img {
	height: clamp(38px, 5vw, 52px);
	width: auto;
	display: block;
}

/* Menü-Schalter als Text */
.tpp-header .wp-block-navigation__responsive-container-open,
.tpp-header .wp-block-navigation__responsive-container-close {
	font-family: var(--wp--preset--font-family--archivo);
	font-stretch: 125%;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: 0.02em;
	padding: 0.6rem 1.1rem;
	border: 1.5px solid currentColor;
	border-radius: 999px;
}
.tpp-header .wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--tinte);
	color: var(--wp--preset--color--papier);
}

/* Vollbild-Menü */
.tpp-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(1rem, 4vw, 3rem);
}
.tpp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: clamp(5rem, 12vh, 8rem);
	align-items: flex-start;
}
.tpp-header .is-menu-open .wp-block-navigation__container {
	gap: clamp(0.25rem, 1.2vh, 0.75rem) !important;
	align-items: flex-start !important;
}
.tpp-header .is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(2rem, 6vw, 4.5rem) !important;
	font-weight: 650;
	line-height: 1;
	text-decoration: none;
	transition: color 0.2s ease, padding-left 0.25s ease;
}
.tpp-header .is-menu-open .wp-block-navigation-item__content:hover,
.tpp-header .is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--signet);
	padding-left: 0.15em;
}
.tpp-header .is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--papier);
}

/* Bild + Bildunterschrift im Roadbook-Stil */
.tpp-hero .wp-block-cover {
	min-height: min(88vh, 900px);
}
.tpp-caption {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--schiefer);
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	border-top: 1px solid var(--wp--preset--color--linie);
	padding-top: 0.75rem;
}
.tpp-caption strong { color: var(--wp--preset--color--tinte); font-weight: 700; }

/* Galerie-Kacheln */
.tpp-tile a { text-decoration: none; }
.tpp-tile img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	width: 100%;
	transition: transform 0.6s ease;
}
.tpp-tile .wp-block-image { overflow: hidden; margin-bottom: 0.75rem; }
.tpp-tile:hover img { transform: scale(1.03); }

/* Fußbereich */
.tpp-footer a { color: var(--wp--preset--color--papier); }
.tpp-footer a:hover { color: var(--wp--preset--color--signet); }
.tpp-footer .tpp-logo img { height: 34px; width: auto; }

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

/* Titelbild der Startseite */
.tpp-hero-image { margin-top: 0; margin-bottom: 0.75rem; }
.wp-block-image.tpp-hero-image img {
	width: 100%;
	height: min(82vh, 860px);
	object-fit: cover;
}
.wp-block-post-content > .tpp-caption { margin-top: 0; }

/* Überschriften-Größen absichern */
h2 { font-size: var(--wp--preset--font-size--abschnitt); }
h3 { font-size: var(--wp--preset--font-size--zwischentitel); }
h4 { font-size: var(--wp--preset--font-size--lead); }

/* Zeilenlänge im Inhalt */
.wp-block-post-content p.has-lead-font-size:not(.alignwide) { max-width: 46rem; }
.wp-block-post-content > p.alignwide { box-sizing: border-box; padding-right: max(0px, calc(100% - 46rem)); }
.wp-block-post-content .tpp-caption p { max-width: none; }

/* Handy */
@media (max-width: 781px) {
	.wp-block-image.tpp-hero-image img { height: 62vh; }
	.tpp-caption { gap: 0.25rem 1.25rem; }
}

/* Bilder nicht per Ziehen speichern */
img {
	-webkit-user-drag: none;
	user-select: none;
	-webkit-touch-callout: none;
}

/* Galerie-Übersicht */
.tpp-tile h3 a { text-decoration: none; }
.tpp-tile h3 a:hover { text-decoration: underline; }
.tpp-tile h3 { margin-bottom: 0.25rem; }
.tpp-tile h3 + p { margin-top: 0; }

/* Kachel ohne Bild (Thema in Vorbereitung) */
.tpp-tile-leer {
	aspect-ratio: 4 / 5;
	justify-content: flex-end;
}
.tpp-tile-leer a { color: var(--wp--preset--color--papier); }
.tpp-tile-leer p { color: var(--wp--preset--color--linie); margin-top: 0; }

/* Fließtext in normaler Breite, Überschriften breit */
body { font-stretch: 100%; font-weight: 400; letter-spacing: 0.005em; }
.has-lead-font-size { font-weight: 400; letter-spacing: 0; }

/* ===== Vorschau: kompaktes Layout ===== */
.tpp-kompakt .tpp-header-k {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	background: var(--wp--preset--color--papier);
	border-bottom: 1px solid var(--wp--preset--color--linie);
}
.tpp-kompakt .tpp-header-k .tpp-logo img { height: clamp(46px, 4.6vw, 62px); }
.tpp-kompakt .tpp-header-k .wp-block-navigation {
	font-stretch: 100%;
	font-weight: 500;
	font-size: 0.9375rem;
	--navigation-layout-justification-setting: flex-end;
}
.tpp-kompakt .tpp-header-k .wp-block-navigation__container { gap: 1.75rem; }
.tpp-kompakt .tpp-header-k .wp-block-navigation-item__content { text-decoration: none; }
.tpp-kompakt .tpp-header-k .wp-block-navigation-item__content:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.tpp-kompakt.home .wp-block-post-content > * + *,
.tpp-kompakt:not(body) .wp-block-post-content > * + * { margin-block-start: var(--wp--preset--spacing--60); }
.tpp-kompakt .tpp-k-hero { margin-top: 0 !important; }
.tpp-kompakt .tpp-k-hero img { width: 100%; height: min(68vh, 720px); object-fit: cover; display: block; }
.tpp-kompakt .tpp-k-intro { margin-top: var(--wp--preset--spacing--50) !important; }
.tpp-kompakt .tpp-k-intro h1 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 0; }
.tpp-kompakt .tpp-k-intro p { margin: 0; max-width: 40rem; }
.tpp-kompakt .tpp-k-label {
	font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em;
	color: var(--wp--preset--color--schiefer); margin: 0 0 1rem;
}
.tpp-kompakt .tpp-tile h3 { font-size: 1.25rem; margin: 0.25rem 0 0; }
.tpp-kompakt .tpp-tile p { font-size: 0.875rem; margin: 0.15rem 0 0; }
.tpp-kompakt .tpp-k-zeile {
	border-top: 1px solid var(--wp--preset--color--linie);
	padding-top: 1.25rem;
}
.tpp-kompakt .tpp-k-zeile h2 { font-size: 1.25rem; margin: 0; }
.tpp-kompakt .tpp-k-zeile p { margin: 0; }
.tpp-kompakt .tpp-footer {
	margin-top: var(--wp--preset--spacing--60) !important;
	padding-top: var(--wp--preset--spacing--50) !important;
	padding-bottom: var(--wp--preset--spacing--40) !important;
}
.tpp-kompakt .tpp-footer .wp-block-paragraph.has-lead-font-size,
.tpp-kompakt .tpp-footer p.has-lead-font-size { font-size: 1rem; }

/* Variante dunkel */
.tpp-dunkel { background: #161D24; color: var(--wp--preset--color--papier); }
.tpp-dunkel a { color: var(--wp--preset--color--papier); }
.tpp-dunkel .tpp-header-k { background: #161D24; border-bottom-color: #2B353F; }
.tpp-dunkel .tpp-k-label,
.tpp-dunkel .tpp-tile p,
.tpp-dunkel .has-schiefer-color { color: #A9B0B6 !important; }
.tpp-dunkel .tpp-k-zeile { border-top-color: #2B353F; }
.tpp-dunkel .tpp-footer { background: #10161B !important; }
.tpp-dunkel .tpp-header .wp-block-navigation__responsive-container-open:hover { background: var(--wp--preset--color--papier); color: #161D24; }

@media (max-width: 781px) {
	.tpp-kompakt .tpp-k-hero img { height: 56vh; }
}

/* ===== Dunkles Layout als Standard (ab 1.3.0) ===== */
body.tpp-dunkel { background: #161D24; color: var(--wp--preset--color--papier); }
.tpp-dunkel .tpp-caption strong { color: var(--wp--preset--color--papier); }
.tpp-dunkel .tpp-caption { border-top-color: #2B353F; color: #A9B0B6; }
.tpp-dunkel .wp-block-separator { color: #2B353F; border-color: #2B353F; }
.tpp-dunkel .wp-element-button,
.tpp-dunkel .wp-block-button__link { background: var(--wp--preset--color--papier); color: #161D24 !important; }
.tpp-dunkel .wp-element-button:hover,
.tpp-dunkel .wp-block-button__link:hover { background: var(--wp--preset--color--signet); color: #161D24 !important; }
.tpp-dunkel .tpp-tile-leer { background: #1F2A33 !important; }
.tpp-dunkel .tpp-footer { margin-top: var(--wp--preset--spacing--60) !important; }
.tpp-dunkel .has-tinte-color { color: var(--wp--preset--color--papier) !important; }

/* Logo im Fuß etwas größer */
.tpp-kompakt .tpp-footer .tpp-logo img { height: 46px; }

/* Kontaktformular auf dunklem Grund */
.tpp-dunkel .wp-block-jetpack-contact-form { max-width: 40rem; gap: 1.25rem; }
.tpp-dunkel .wp-block-jetpack-contact-form label,
.tpp-dunkel .wp-block-jetpack-contact-form .grunion-field-label { color: var(--wp--preset--color--papier); font-weight: 500; font-size: 0.9375rem; }
.tpp-dunkel .wp-block-jetpack-contact-form input:not([type=checkbox]):not([type=radio]),
.tpp-dunkel .wp-block-jetpack-contact-form textarea {
	background: #10161B !important; color: var(--wp--preset--color--papier) !important;
	border: 1px solid #2B353F !important; border-radius: 4px !important; padding: 0.75rem 0.9rem !important;
	font-family: inherit; font-size: 1rem;
}
.tpp-dunkel .wp-block-jetpack-contact-form input:focus,
.tpp-dunkel .wp-block-jetpack-contact-form textarea:focus { border-color: var(--wp--preset--color--signet) !important; outline: none; }
.tpp-dunkel .wp-block-jetpack-contact-form textarea { min-height: 10rem; }
.tpp-k-hinweis { color: #A9B0B6; }

/* Video auf der Startseite */
.tpp-k-video .wp-block-embed { margin: 0; }
.tpp-k-video iframe, .tpp-k-video .embed-privacy-container { width: 100%; aspect-ratio: 16 / 9; height: auto; }

/* Lockfeld gegen Spam: unsichtbar, aber nicht display:none */
.tpp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ===== Kompakter Fußbereich (ab 1.6.0) ===== */
.tpp-footer-k { font-size: 0.875rem; }
.tpp-footer-k p { margin: 0; }
.tpp-footer-k .tpp-f-marke { gap: 0.75rem 1.5rem; }
.tpp-kompakt .tpp-footer-k .tpp-logo img,
.tpp-footer-k .tpp-logo img { height: 38px; }
.tpp-footer-k .tpp-f-claim { color: #A9B0B6; }
.tpp-footer-k .tpp-f-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.tpp-footer-k .tpp-f-links a { text-decoration: none; }
.tpp-footer-k .tpp-f-links a:hover { text-decoration: underline; color: var(--wp--preset--color--papier); }
.tpp-footer-k .tpp-f-unten {
	margin-top: 1.75rem !important; padding-top: 1rem;
	border-top: 1px solid #2B353F; color: #A9B0B6; font-size: 0.8125rem;
}
.tpp-footer-k .tpp-f-unten a { color: #A9B0B6; }
.tpp-kompakt .tpp-footer.tpp-footer-k { padding-top: 2.25rem !important; padding-bottom: 1.25rem !important; }
@media (max-width: 781px) {
	.tpp-footer-k .tpp-f-oben { gap: 1.25rem; }
}

/* ===== Slider auf der Startseite (ab 1.8.0) ===== */
.tpp-slider { position: relative; height: min(72vh, 760px); overflow: hidden; margin-top: 0 !important; background: #10161B; }
.tpp-slider > figure { position: absolute; inset: 0; margin: 0 !important; opacity: 0; transition: opacity 1.2s ease; }
.tpp-slider > figure:first-of-type { opacity: 1; }
.tpp-slider.ist-bereit > figure { opacity: 0; }
.tpp-slider.ist-bereit > figure.ist-aktiv { opacity: 1; }
.tpp-slider > figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tpp-slider-punkte { position: absolute; left: 0; right: 0; bottom: 1.1rem; display: flex; justify-content: center; gap: 0.6rem; z-index: 2; }
.tpp-slider-punkte button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(237,238,234,0.45); cursor: pointer; }
.tpp-slider-punkte button[aria-current="true"] { background: var(--wp--preset--color--signet); }
.tpp-slider-pfeil {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 44px; height: 44px; border: 0; border-radius: 50%;
	background: rgba(16,22,27,0.45); color: var(--wp--preset--color--papier);
	font-size: 1.75rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity 0.3s ease;
}
.tpp-slider-zurueck { left: 1rem; }
.tpp-slider-weiter { right: 1rem; }
.tpp-slider:hover .tpp-slider-pfeil, .tpp-slider-pfeil:focus-visible { opacity: 1; }
.tpp-slider-pfeil:hover { background: rgba(16,22,27,0.75); }
@media (max-width: 781px) {
	.tpp-slider { height: 58vh; }
	.tpp-slider-pfeil { display: none; }
}

/* Menü: invers bei Mouseover (ab 1.8.1) */
@media (min-width: 600px) {
	.tpp-kompakt .tpp-header-k .wp-block-navigation__container { gap: 0.35rem; }
	.tpp-kompakt .tpp-header-k .wp-block-navigation-item__content {
		padding: 0.45rem 0.8rem; border-radius: 3px;
		transition: background-color 0.18s ease, color 0.18s ease;
	}
	.tpp-kompakt .tpp-header-k .wp-block-navigation-item__content:hover,
	.tpp-kompakt .tpp-header-k .wp-block-navigation-item__content:focus-visible {
		background: var(--wp--preset--color--papier); color: #161D24 !important; text-decoration: none;
	}
}

/* Alle Textlinks: invers bei Mouseover (ab 1.8.2) – ohne Bilder, Logo, Buttons und Menü */
.tpp-dunkel a:not(.tpp-logo):not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(:has(img)) {
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
	border-radius: 2px;
}
.tpp-dunkel a:not(.tpp-logo):not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(:has(img)):hover,
.tpp-dunkel a:not(.tpp-logo):not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content):not(:has(img)):focus-visible {
	background: var(--wp--preset--color--papier);
	color: #161D24 !important;
	box-shadow: 0 0 0 0.22em var(--wp--preset--color--papier);
	text-decoration: none !important;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ===== Weltkarte mit Galerie-Vorschaubildern (ab 1.9.0) ===== */
.tpp-weltkarte { --s: 1; position: relative; width: 100%; aspect-ratio: 1000 / 470; margin-block: 1rem 2rem; }
.tpp-weltkarte > img.tpp-karte-land { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.tpp-ort { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; text-decoration: none !important; z-index: 1; }
.tpp-ort:hover, .tpp-ort:focus-visible { z-index: 5; background: none !important; box-shadow: none !important; }
.tpp-ort-punkt { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--signet); }
.tpp-ort-linie {
	position: absolute; left: 0; top: 0; height: 1px; width: calc(var(--len) * var(--s));
	background: rgba(237,238,234,0.35); transform-origin: 0 0; transform: rotate(var(--rot));
}
.tpp-ort-bild {
	position: absolute; left: calc(var(--dx) * var(--s)); top: calc(var(--dy) * var(--s));
	transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
}
.tpp-ort-bild img {
	width: calc(64px * var(--s)); height: calc(64px * var(--s)); border-radius: 50%; object-fit: cover; display: block;
	border: 2px solid var(--wp--preset--color--papier); box-shadow: 0 4px 14px rgba(0,0,0,0.45);
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.tpp-ort-name {
	font-size: calc(0.75rem * var(--s) + 0.1rem); font-weight: 600; white-space: nowrap; line-height: 1.2;
	color: var(--wp--preset--color--papier); padding: 0.1rem 0.35rem; border-radius: 2px; background: rgba(22,29,36,0.7);
}
.tpp-ort:hover .tpp-ort-bild img, .tpp-ort:focus-visible .tpp-ort-bild img { transform: scale(1.18); border-color: var(--wp--preset--color--signet); }
.tpp-ort:hover .tpp-ort-name, .tpp-ort:focus-visible .tpp-ort-name { background: var(--wp--preset--color--papier); color: #161D24; }
@media (max-width: 900px) { .tpp-weltkarte { --s: 0.62; } }
@media (max-width: 560px) { .tpp-weltkarte { --s: 0.42; } .tpp-ort-name { display: none; } }