/*
Theme Name: Schnierer
Theme URI: https://example.at/
Author: art-werk Medienproduktions OG
Description: Block-Theme für Samuel Schnierer, Fotograf und Feldornithologe. Große Bilder, Moosgrün, dezenter Vogelschwarm.
Version: 2.0.6
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: schnierer
*/

/* ==========================================================================
   Grundlagen: nur was theme.json nicht ausdrücken kann.
   ========================================================================== */

@view-transition {
	navigation: auto;
}

:root {
	--kopf-hoehe: 4.75rem;
	--schatten-weich: 0 1px 2px rgb(17 26 20 / 0.06), 0 12px 32px -12px rgb(17 26 20 / 0.22);
}

html {
	scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Kopf, Inhalt und Fuß schließen ohne Lücke aneinander an. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.seiteninhalt:has(> .alignfull:last-child) {
	padding-bottom: 0 !important;
}

:where(h1, h2, h3, .has-display-font-size) {
	font-stretch: 88%;
	text-wrap: balance;
}

:where(p, li) {
	text-wrap: pretty;
}

.has-display-font-size {
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 0.94;
}

:where(a, button, input, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--sumpfdotter);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--wp--preset--color--farn);
	color: var(--wp--preset--color--nacht);
}

em,
.wissenschaftlich {
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-size: 1.08em;
	font-style: italic;
	letter-spacing: 0;
}

/* Kleine Überschrift über einem Abschnitt, Satz in normaler Schreibung. */
.vorzeile {
	color: var(--wp--preset--color--moos);
	font-family: var(--wp--preset--font-family--instrument-serif);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	line-height: 1.2;
	margin-bottom: 0.5rem;
}

.has-wald-background-color .vorzeile,
.has-nacht-background-color .vorzeile,
.wp-block-cover .vorzeile {
	color: var(--wp--preset--color--farn);
}

/* ==========================================================================
   Icons: Klasse "icon-<name>" an Absatz, Überschrift oder Button.
   ========================================================================== */

[class*="icon-"]::before {
	background-color: currentColor;
	content: "";
	display: inline-block;
	flex: none;
	height: 1.25em;
	margin-right: 0.5em;
	mask: var(--icon) center / contain no-repeat;
	vertical-align: -0.22em;
	width: 1.25em;
}

.icon-gross::before {
	display: block;
	height: 2.5rem;
	margin: 0 0 1.25rem;
	width: 2.5rem;
}

.icon-gross.icon-farn::before {
	background-color: var(--wp--preset--color--farn);
}

.icon-gross.icon-moos::before {
	background-color: var(--wp--preset--color--moos);
}

.icon-vogel { --icon: url(assets/icons/vogel.svg); }
.icon-fernglas { --icon: url(assets/icons/fernglas.svg); }
.icon-karte { --icon: url(assets/icons/karte.svg); }
.icon-zug { --icon: url(assets/icons/zug.svg); }
.icon-bericht { --icon: url(assets/icons/bericht.svg); }
.icon-vortrag { --icon: url(assets/icons/vortrag.svg); }
.icon-ort { --icon: url(assets/icons/ort.svg); }
.icon-kalender { --icon: url(assets/icons/kalender.svg); }
.icon-uhr { --icon: url(assets/icons/uhr.svg); }
.icon-pfeil { --icon: url(assets/icons/pfeil.svg); }
.icon-pfeil-runter { --icon: url(assets/icons/pfeil-runter.svg); }
.icon-zertifikat { --icon: url(assets/icons/zertifikat.svg); }
.icon-kamera { --icon: url(assets/icons/kamera.svg); }
.icon-auge { --icon: url(assets/icons/auge.svg); }
.icon-blatt { --icon: url(assets/icons/blatt.svg); }
.icon-mail { --icon: url(assets/icons/mail.svg); }
.icon-telefon { --icon: url(assets/icons/telefon.svg); }
.icon-ohr { --icon: url(assets/icons/ohr.svg); }

.wp-block-button[class*="icon-"]::before {
	display: none;
}

.wp-block-button.icon-pfeil .wp-block-button__link::after {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 1.1em;
	margin-left: 0.5em;
	mask: url(assets/icons/pfeil.svg) center / contain no-repeat;
	transition: translate 0.2s ease;
	vertical-align: -0.2em;
	width: 1.1em;
}

.wp-block-button.icon-pfeil .wp-block-button__link:hover::after {
	translate: 3px 0;
}

/* ==========================================================================
   Buttons auf dunklem Grund
   ========================================================================== */

:is(.has-wald-background-color, .has-nacht-background-color, .has-moos-background-color, .wp-block-cover) .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--wp--preset--color--farn);
	color: var(--wp--preset--color--nacht);
}

:is(.has-wald-background-color, .has-nacht-background-color, .has-moos-background-color, .wp-block-cover) .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--nebel);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid currentColor;
	padding: calc(0.8rem - 1px) calc(1.5rem - 1px);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover > * ,
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: var(--wp--preset--color--nacht);
}

:is(.has-wald-background-color, .has-nacht-background-color, .wp-block-cover) .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--nebel);
	border-color: var(--wp--preset--color--nebel);
}

/* ==========================================================================
   Kopfbereich: liegt über dem Bühnenbild, wird beim Scrollen zur Glasleiste.
   ========================================================================== */

.kopf {
	backdrop-filter: blur(14px) saturate(1.2);
	background: rgb(17 26 20 / 0.72);
	color: var(--wp--preset--color--nebel);
	inset-inline: 0;
	min-height: var(--kopf-hoehe);
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

@supports (animation-timeline: scroll()) {
	.kopf {
		animation: kopf-glas linear both;
		animation-range: 0 40vh;
		animation-timeline: scroll(root);
		backdrop-filter: none;
		background: transparent;
	}

	@keyframes kopf-glas {
		to {
			backdrop-filter: blur(14px) saturate(1.2);
			background: rgb(17 26 20 / 0.78);
		}
	}
}

/* Offenes Mobilmenü: Glaseffekt aus, sonst bleibt das Menü im Kopf gefangen. */
.kopf:has(.is-menu-open) {
	animation: none;
	backdrop-filter: none;
	background: var(--wp--preset--color--wald);
}

@media (max-width: 600px) {
	.admin-bar .kopf {
		top: 0;
	}
}

.kopf a {
	color: inherit;
}

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

.kopf .wp-block-site-title a {
	align-items: center;
	display: inline-flex;
}

.kopf .wp-block-site-title a::before {
	background-color: var(--wp--preset--color--farn);
	content: "";
	height: 1.6em;
	margin-right: 0.55em;
	mask: url(assets/icons/vogel.svg) center / contain no-repeat;
	width: 1.6em;
}

.kopf .wp-block-button__link {
	padding: 0.55rem 1.1rem;
}

@media (max-width: 781px) {
	.kopf .kopf-anfrage {
		display: none;
	}
}

.wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-align: flex-start;
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	letter-spacing: -0.02em;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
}

.wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation__container, .wp-block-navigation-item) {
	align-items: flex-start !important;
}

/* ==========================================================================
   Bühnen: Bildflächen am Seitenanfang
   ========================================================================== */

/* Cover-Blöcke mit Bildverlauf bleiben hell beschriftet, auch wenn WordPress
   das eingesetzte Bild als "hell" erkennt und die Schrift schwarz färben würde. */
.wp-block-cover.is-light.buehne,
.wp-block-cover.is-light.tuer {
	color: var(--wp--preset--color--nebel);
}

.buehne {
	padding-top: calc(var(--kopf-hoehe) + var(--wp--preset--spacing--50)) !important;
}

.buehne.wp-block-cover .wp-block-cover__inner-container,
.tuer.wp-block-cover .wp-block-cover__inner-container {
	width: 100% !important;
}

.buehne.wp-block-cover {
	background-color: var(--wp--preset--color--wald);
}

/* Seitenköpfe: Höhe richtet sich nach dem Inhalt, wie bei Termine und Fotografie. */
.buehne.wp-block-cover:not(.buehne-voll) {
	min-height: 0;
}

.buehne-voll {
	min-height: 100svh !important;
}

.buehne-voll .wp-block-cover__image-background {
	animation: buehne-atem 24s ease-in-out infinite alternate;
}

@keyframes buehne-atem {
	from { scale: 1; }
	to { scale: 1.06; }
}

.buehne-lead {
	max-width: 40rem;
}

.buehne-bildinfo {
	opacity: 0.85;
}

.buehne-bildinfo .wp-block-post-title {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0;
}

.scroll-hinweis {
	animation: scroll-hinweis 2.4s ease-in-out infinite;
	opacity: 0.8;
}

@keyframes scroll-hinweis {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 6px; }
}

/* ==========================================================================
   Vogelschwarm (assets/js/vogelschwarm.js)
   ========================================================================== */

.is-style-vogelschwarm {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

.vogelschwarm {
	height: 100%;
	inset: 0;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 1;
}

.wp-block-group.is-style-vogelschwarm > :not(.vogelschwarm) {
	position: relative;
	z-index: 2;
}

/* Medien-Text ohne Bild (z. B. Porträt noch nicht gesetzt): Text nimmt die ganze Breite. */
.wp-block-media-text:has(> .wp-block-media-text__media:empty) {
	grid-template-columns: 100% !important;
}

.wp-block-media-text > .wp-block-media-text__media:empty {
	display: none;
}

.wp-block-media-text:has(> .wp-block-media-text__media:empty) > .wp-block-media-text__content {
	grid-column: 1;
	padding: 0;
}

/* ==========================================================================
   Türen: zwei große Bildkarten, die ganze Karte ist klickbar.
   ========================================================================== */

.tuer {
	border-radius: 6px;
	overflow: hidden;
}

.tuer .wp-block-cover__image-background {
	transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tuer:hover .wp-block-cover__image-background {
	scale: 1.04;
}

.tuer .tuer-link a::after {
	content: "";
	inset: 0;
	position: absolute;
	z-index: 3;
}

.tuer .tuer-link a {
	text-decoration: none;
}

/* ==========================================================================
   Fotoraster: redaktioneller Rhythmus mit großen Bildern.
   Muster je 7 Fotos: groß + zwei kleine, drei gleiche, ein Panorama.
   ========================================================================== */

.fotoraster .wp-block-post-template {
	display: grid;
	gap: clamp(0.5rem, 0.3rem + 0.6vw, 1rem);
	grid-auto-flow: dense;
	grid-auto-rows: clamp(15rem, 10rem + 14vw, 24rem);
	grid-template-columns: repeat(12, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.fotoraster .wp-block-post-template > li {
	grid-column: span 4;
	margin: 0;
	min-width: 0;
}

.fotoraster .wp-block-post-template > li:nth-child(7n + 1) {
	grid-column: span 8;
	grid-row: span 2;
}

.fotoraster .wp-block-post-template > li:nth-child(7n) {
	grid-column: span 12;
	grid-row: span 2;
}

@media (max-width: 781px) {
	.fotoraster .wp-block-post-template {
		grid-auto-rows: 62vw;
	}

	.fotoraster .wp-block-post-template > li,
	.fotoraster .wp-block-post-template > li:nth-child(7n + 1),
	.fotoraster .wp-block-post-template > li:nth-child(7n) {
		grid-column: span 12;
		grid-row: span 1;
	}

	.fotoraster .wp-block-post-template > li:nth-child(7n + 1) {
		grid-row: span 2;
	}
}

.foto-karte {
	border-radius: 4px;
	height: 100%;
	overflow: hidden;
	position: relative;
}

.foto-karte .wp-block-post-featured-image {
	height: 100%;
	margin: 0;
}

.foto-karte .wp-block-post-featured-image :is(a, img) {
	display: block;
	height: 100% !important;
	width: 100%;
}

.foto-karte .wp-block-post-featured-image img {
	aspect-ratio: auto !important;
	object-fit: cover;
	transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.foto-karte:hover img {
	scale: 1.04;
}

.foto-info {
	background: linear-gradient(180deg, rgb(17 26 20 / 0) 0%, rgb(17 26 20 / 0.82) 100%);
	bottom: 0;
	color: var(--wp--preset--color--nebel);
	inset-inline: 0;
	padding: 3rem 1.25rem 1rem !important;
	pointer-events: none;
	position: absolute;
}

.foto-info a {
	pointer-events: auto;
}

.foto-info .wp-block-post-title {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	letter-spacing: -0.01em;
	margin: 0;
}

.foto-info .wp-block-post-terms {
	color: var(--wp--preset--color--farn);
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}

@media (hover: hover) {
	.foto-info {
		opacity: 0;
		transition: opacity 0.3s ease, translate 0.3s ease;
		translate: 0 0.5rem;
	}

	.foto-karte:hover .foto-info,
	.foto-karte:focus-within .foto-info {
		opacity: 1;
		translate: 0 0;
	}
}

/* ==========================================================================
   Artenregister (Filter) auf dunkler Bühne
   ========================================================================== */

.artenregister .wp-block-term-template {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.artenregister .wp-block-term-template li,
.artenregister .wp-block-term-template p,
.artenregister__alle {
	margin: 0;
}

.artenregister :is(.wp-block-term-template a, .artenregister__alle a) {
	border: 1px solid rgb(238 242 234 / 0.28);
	border-radius: 999px;
	color: var(--wp--preset--color--nebel);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	padding: 0.4rem 0.95rem;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.artenregister :is(.wp-block-term-template a, .artenregister__alle a):hover {
	border-color: var(--wp--preset--color--farn);
}

.artenregister a[aria-current],
.post-type-archive-bird_photo .artenregister__alle a {
	background-color: var(--wp--preset--color--farn);
	border-color: var(--wp--preset--color--farn);
	color: var(--wp--preset--color--nacht);
}

.artenregister__arten {
	margin-top: 0.75rem;
}

.artenregister__arten :is(.wp-block-term-template a) {
	border-style: dashed;
}

.artenregister .wp-block-search__input {
	background: rgb(238 242 234 / 0.08);
	border: 1px solid rgb(238 242 234 / 0.28);
	border-radius: 999px;
	color: var(--wp--preset--color--nebel);
	padding: 0.6rem 1.1rem;
}

.artenregister .wp-block-search__input::placeholder {
	color: rgb(238 242 234 / 0.6);
}

.artenregister .wp-block-search__button {
	background: var(--wp--preset--color--farn);
	border: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--nacht);
	font-weight: 600;
	margin-left: 0.5rem;
	padding: 0.6rem 1.25rem;
}

/* ==========================================================================
   Einzelfoto: dunkler Betrachtungsraum, Bild in voller Wirkung
   ========================================================================== */

.bildbuehne {
	text-align: center;
}

.bildbuehne img {
	border-radius: 2px;
	height: auto;
	margin-inline: auto;
	max-height: calc(100svh - var(--kopf-hoehe) - 3rem);
	object-fit: contain;
	width: auto !important;
}

.foto-navigation .post-navigation-link__label {
	color: var(--wp--preset--color--farn);
	display: block;
	font-size: var(--wp--preset--font-size--small);
}

.foto-navigation .post-navigation-link-next {
	text-align: right;
}

.foto-navigation a {
	color: var(--wp--preset--color--nebel);
	text-decoration: none;
}

.foto-navigation a:hover {
	color: var(--wp--preset--color--farn);
}

/* ==========================================================================
   Leistungen, Schritte, Zertifikat
   ========================================================================== */

.leistung {
	border-top: 1px solid currentColor;
	border-color: rgb(127 140 120 / 0.35);
	padding-top: var(--wp--preset--spacing--40);
}

.leistung h3 {
	margin-top: 0;
}

.schritt-nr {
	align-items: center;
	border: 1px solid currentColor;
	border-radius: 999px;
	display: inline-flex;
	font-weight: 600;
	height: 2.5rem;
	justify-content: center;
	width: 2.5rem;
}

.zertifikat {
	border-radius: 6px;
}

/* ==========================================================================
   Termine
   ========================================================================== */

.terminliste .wp-block-post-template {
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.terminzeile {
	border-top: 1px solid var(--wp--preset--color--flechte);
	padding-block: var(--wp--preset--spacing--40) !important;
	position: relative;
	transition: background-color 0.2s ease;
}

.terminzeile:hover {
	background-color: rgb(207 216 194 / 0.35);
}

.terminzeile p {
	margin: 0;
}

.terminzeile p:empty,
.termin-angaben p:empty {
	display: none;
}

.terminzeile .wp-block-post-title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.termin-blatt {
	line-height: 1;
	min-width: 5.5rem;
	text-align: left;
}

.termin-tag {
	font-size: var(--wp--preset--font-size--x-large);
	font-stretch: 80%;
	font-weight: 600;
	letter-spacing: -0.04em;
}

.termin-monat {
	color: var(--wp--preset--color--moos);
	font-weight: 600;
	margin-top: 0.25rem !important;
}

.termin-datum {
	font-weight: 600;
}

.ist-vergangen .termin-anmeldung {
	display: none;
}

.terminliste--vergangen .terminzeile {
	opacity: 0.72;
}

/* ==========================================================================
   Feldtagebuch
   ========================================================================== */

.tagebuch-karte .wp-block-post-featured-image img {
	transition: scale 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.tagebuch-karte .wp-block-post-featured-image {
	overflow: hidden;
}

.tagebuch-karte:hover .wp-block-post-featured-image img {
	scale: 1.04;
}

/* ==========================================================================
   Saisonkalender: Tabellen-Block, jede befüllte Zelle wird zum Balken.
   ========================================================================== */

.saisonkalender table {
	border-collapse: separate;
	border-spacing: 0 0.5rem;
	table-layout: fixed;
	width: 100%;
}

.saisonkalender th,
.saisonkalender td {
	border: 0;
	font-size: var(--wp--preset--font-size--small);
	padding: 0.3rem 0;
	text-align: center;
}

.saisonkalender th:first-child,
.saisonkalender td:first-child {
	padding-right: 1rem;
	text-align: left;
	width: 28%;
}

.saisonkalender tbody td:not(:first-child) {
	background: var(--wp--preset--color--flechte);
}

.saisonkalender tbody td:nth-child(2) {
	border-radius: 999px 0 0 999px;
}

.saisonkalender tbody td:last-child {
	border-radius: 0 999px 999px 0;
}

.saisonkalender tbody td:not(:first-child):not(:empty) {
	background: var(--wp--preset--color--moos);
	color: transparent;
}

.saisonkalender tbody td:nth-child(n + 3) {
	border-left: 2px solid var(--wp--preset--color--nebel);
}

@media (max-width: 40rem) {
	.saisonkalender thead tr,
	.saisonkalender tbody tr {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
	}

	.saisonkalender th:first-child {
		display: none;
	}

	.saisonkalender td:first-child {
		grid-column: 1 / -1;
		width: auto;
	}

	.saisonkalender th {
		font-size: 0.6875rem;
	}

	.saisonkalender tbody td:not(:first-child) {
		min-height: 1.25rem;
	}
}

/* ==========================================================================
   Fußbereich
   ========================================================================== */

.fuss a {
	text-decoration-color: rgb(238 242 234 / 0.35);
	text-underline-offset: 0.25em;
}

.fuss a:hover {
	color: var(--wp--preset--color--farn);
}

.fuss-marke {
	font-stretch: 78%;
	letter-spacing: -0.05em;
	line-height: 0.9;
}

/* ==========================================================================
   Bewegung reduzieren
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}

	.kopf {
		backdrop-filter: blur(14px);
		background: rgb(17 26 20 / 0.78);
	}
}