/*
Theme Name: Lehm
Theme URI: https://example.com/lehm
Author: Christian
Description: Block-Theme für Lernort Töpferscheibe. Orange, warmes Gelb und Rostrot, klar aufgebaut.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lehm
*/

/* Sichtbarer Tastaturfokus */
:where(a, button, input, .wp-element-button):focus-visible {
	outline: 2px solid var(--wp--preset--color--kobalt);
	outline-offset: 3px;
}

/* Kursplan als Tabelle */
.wp-block-table.lehm-kursplan table { border-collapse: collapse; width: 100%; }
.wp-block-table.lehm-kursplan th,
.wp-block-table.lehm-kursplan td {
	border: 0;
	text-align: left;
	vertical-align: top;
	padding: 1.25rem 1.5rem 1.25rem 0;
}
.wp-block-table.lehm-kursplan thead { border: 0; }
.wp-block-table.lehm-kursplan th {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--asche);
	padding-bottom: .75rem;
	border-bottom: 1px solid var(--wp--preset--color--engobe);
}
.wp-block-table.lehm-kursplan td { border-bottom: 1px solid var(--wp--preset--color--bisque); }
.wp-block-table.lehm-kursplan td:first-child {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	width: 40%;
}
.wp-block-table.lehm-kursplan td:last-child,
.wp-block-table.lehm-kursplan th:last-child { text-align: right; padding-right: 0; white-space: nowrap; }

@media (max-width: 640px) {
	.wp-block-table.lehm-kursplan thead {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
	}
	.wp-block-table.lehm-kursplan tr {
		display: block;
		padding: 1.25rem 0;
		border-bottom: 1px solid var(--wp--preset--color--bisque);
	}
	.wp-block-table.lehm-kursplan td {
		display: block; width: auto !important; border: 0; padding: 0 0 .25rem; text-align: left !important;
	}
}

/* Ablauf: Schrittnummern */
.lehm-schritt-nr {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 3rem;
	line-height: 1;
	color: var(--wp--preset--color--kobalt);
	margin-bottom: .5rem;
}

/* Beitragsliste */
.lehm-eintrag {
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--bisque);
}

/* Outline-Button */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid currentColor;
	color: var(--wp--preset--color--engobe);
	background: transparent;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--engobe);
	color: var(--wp--preset--color--porzellan);
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
html { scroll-behavior: smooth; }

/* Kursreihe: waagerecht scrollbare Karten */
.lehm-kursreihe {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: 1rem;
}
.lehm-kursreihe > * { margin-block-start: 0 !important; }
.lehm-kursreihe > .lehm-kurskarte {
	flex: 0 0 clamp(200px, 26vw, 270px);
	scroll-snap-align: start;
}
.lehm-kurskarte .wp-block-image { margin: 0 0 .75rem; overflow: hidden; border-radius: 4px; }
.lehm-kurskarte .wp-block-image img { display: block; width: 100%; transition: transform .3s ease; }
.lehm-kurskarte:hover .wp-block-image img { transform: scale(1.04); }
.lehm-kurskarte h3 { margin: 0; font-size: var(--wp--preset--font-size--large); }
.lehm-kurskarte p { margin-top: .25rem; }

.lehm-kursreihe-nav {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin-top: -3rem;
	margin-bottom: 1rem;
}
.lehm-kursreihe-nav[hidden] { display: none; }
.lehm-kursreihe-nav button {
	width: 2.5rem; height: 2.5rem;
	border: 1px solid var(--wp--preset--color--engobe);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--engobe);
	font-size: 1.4rem; line-height: 1;
	cursor: pointer;
}
.lehm-kursreihe-nav button:hover:not(:disabled) {
	background: var(--wp--preset--color--engobe);
	color: var(--wp--preset--color--porzellan);
}
.lehm-kursreihe-nav button:disabled { opacity: .3; cursor: default; }

/* Kurskarten: Titel als Link, ruhig dargestellt */
.lehm-kurskarte h3 a { color: inherit; text-decoration: none; }
.lehm-kurskarte h3 a:hover { text-decoration: underline; }

/* Kursübersicht: Kachelraster */
.lehm-kursuebersicht-raster { gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--40); }
.lehm-kurskachel .wp-block-image { margin: 0 0 .75rem; overflow: hidden; border-radius: 4px; }
.lehm-kurskachel .wp-block-image img { display: block; width: 100%; transition: transform .3s ease; }
.lehm-kurskachel:hover .wp-block-image img { transform: scale(1.04); }
.lehm-kurskachel h3 { margin: 0; font-size: var(--wp--preset--font-size--large); }
.lehm-kurskachel h3 a { color: inherit; text-decoration: none; }
.lehm-kurskachel h3 a:hover { text-decoration: underline; }
.lehm-kurskachel p { margin-top: .25rem; }
.lehm-kursuebersicht-raster > .has-kobalt-background-color {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--wp--preset--spacing--40);
	border-radius: 4px;
	min-height: 12rem;
}
.lehm-kursuebersicht-raster > .has-kobalt-background-color > * { margin: 0; }
.lehm-kursuebersicht-raster > .has-kobalt-background-color h3 { font-size: var(--wp--preset--font-size--large); }
.lehm-kursuebersicht-raster > .has-kobalt-background-color a { color: inherit; text-decoration: none; }
.lehm-kursuebersicht-raster > .has-kobalt-background-color:hover a { text-decoration: underline; }

/* Farbwelt der bisherigen Seite */
header.wp-block-template-part a,
footer.wp-block-template-part a { color: var(--wp--preset--color--engobe); }
footer.wp-block-template-part { margin-top: var(--wp--preset--spacing--60); }
.wp-block-gallery .wp-block-image img { border: 1px solid var(--wp--preset--color--rand); }
.wp-block-separator { border-color: var(--wp--preset--color--rand); }
.lehm-kursplan th { border-bottom-color: var(--wp--preset--color--rand) !important; }
.lehm-kursreihe-nav button { background: var(--wp--preset--color--bisque); }
.lehm-kursuebersicht-raster > .has-kobalt-background-color { color: var(--wp--preset--color--weiss); }

/* Logo im Kopfbereich */
.wp-block-image.lehm-logo { margin: 0; }
.wp-block-image.lehm-logo img {
	display: block;
	width: clamp(210px, 28vw, 340px);
	height: auto;
	border: 0 !important;
}

/* Galerie-Stil „Karussell“: Bilder in einer wischbaren Reihe.
   Die Galerie-Einstellung „Spalten“ legt fest, wie viele Bilder gleichzeitig sichtbar sind. */
.wp-block-gallery.is-style-karussell.has-nested-images {
	--lehm-sichtbar: 3;
	--lehm-abstand: var(--wp--style--unstable-gallery-gap, 16px);
	flex-wrap: nowrap;
	align-items: flex-start;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: 1rem;
}
.wp-block-gallery.is-style-karussell.columns-1 { --lehm-sichtbar: 1; }
.wp-block-gallery.is-style-karussell.columns-2 { --lehm-sichtbar: 2; }
.wp-block-gallery.is-style-karussell.columns-3 { --lehm-sichtbar: 3; }
.wp-block-gallery.is-style-karussell.columns-4 { --lehm-sichtbar: 4; }
.wp-block-gallery.is-style-karussell.columns-5 { --lehm-sichtbar: 5; }
.wp-block-gallery.is-style-karussell.columns-6 { --lehm-sichtbar: 6; }
.wp-block-gallery.is-style-karussell.columns-7 { --lehm-sichtbar: 7; }
.wp-block-gallery.is-style-karussell.columns-8 { --lehm-sichtbar: 8; }
.wp-block-gallery.is-style-karussell.has-nested-images figure.wp-block-image:not(#individual-image) {
	flex: 0 0 auto;
	width: calc((100% - (var(--lehm-sichtbar) - 1) * var(--lehm-abstand)) / var(--lehm-sichtbar));
	scroll-snap-align: start;
	margin: 0;
}
/* Mit „Bilder zuschneiden“: alle Bilder im gleichen 4:3-Format */
.wp-block-gallery.is-style-karussell.is-cropped figure.wp-block-image img {
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
}
/* Auf schmalen Bildschirmen höchstens zwei, auf dem Handy ein großes Bild */
@media (max-width: 900px) {
	.wp-block-gallery.is-style-karussell.has-nested-images { --lehm-sichtbar: 2 !important; }
}
@media (max-width: 600px) {
	.wp-block-gallery.is-style-karussell.has-nested-images figure.wp-block-image:not(#individual-image) { width: 82%; }
}

/* Formulare (Contact Form 7) */
.lehm-formular {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1.1rem 1.25rem;
}
.lehm-formular > * { grid-column: span 3; margin: 0; }
.lehm-formular > .breit { grid-column: 1 / -1; }
.lehm-formular > .plz { grid-column: span 2; }
.lehm-formular > .ort { grid-column: span 4; }
@media (max-width: 640px) {
	.lehm-formular > *, .lehm-formular > .plz, .lehm-formular > .ort { grid-column: 1 / -1; }
}
.lehm-formular label {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
.lehm-formular .wpcf7-form-control-wrap { display: block; }
.lehm-formular input[type="text"],
.lehm-formular input[type="email"],
.lehm-formular input[type="tel"],
.lehm-formular select,
.lehm-formular textarea {
	box-sizing: border-box;
	width: 100%;
	padding: .7rem .85rem;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 4px;
	background: #FFFBF2;
	color: var(--wp--preset--color--engobe);
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}
.lehm-formular input:focus,
.lehm-formular select:focus,
.lehm-formular textarea:focus {
	outline: 2px solid var(--wp--preset--color--kobalt);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--kobalt);
}
.lehm-formular .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.lehm-formular .wpcf7-acceptance label {
	flex-direction: row;
	align-items: flex-start;
	gap: .6rem;
	font-weight: 400;
	font-size: var(--wp--preset--font-size--medium);
}
.lehm-formular .wpcf7-acceptance input { width: 1.2rem; height: 1.2rem; margin-top: .2rem; accent-color: var(--wp--preset--color--kobalt); }
.lehm-formular .wpcf7-submit {
	padding: .9rem 1.8rem;
	border: 0;
	border-radius: 2px;
	background: var(--wp--preset--color--kobalt);
	color: var(--wp--preset--color--weiss);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.lehm-formular .wpcf7-submit:hover { background: var(--wp--preset--color--engobe); }
.lehm-formular .wpcf7-submit:disabled { opacity: .5; cursor: not-allowed; }
.wpcf7-not-valid-tip { margin-top: .3rem; color: var(--wp--preset--color--kobalt); font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.lehm-formular .wpcf7-not-valid { border-color: var(--wp--preset--color--kobalt); border-width: 2px; }
.wpcf7 form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: .8rem 1rem;
	border: 2px solid var(--wp--preset--color--rand);
	border-radius: 4px;
	background: #FFFBF2;
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #2E7D32; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--wp--preset--color--kobalt); }

/* Links auf rostrotem Hintergrund lesbar halten */
.has-kobalt-background-color a { color: inherit; }

/* Umrandete Buttons auf rostrotem Hintergrund */
.has-kobalt-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--weiss);
	border-color: var(--wp--preset--color--weiss);
}
.has-kobalt-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--kobalt);
}

/* Preisraster: Titel, Dauer, Preis, Text und Link in allen Kacheln auf gleicher Höhe */
.lehm-preisraster > .wp-block-group {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 5;
	row-gap: .6rem;
	align-content: start;
}
.lehm-preisraster > .wp-block-group > * { margin: 0 !important; }
.lehm-preisraster > .wp-block-group > :last-child { align-self: end; }

/* Video-Popup */
.wp-block-image.is-style-video-popup a { position: relative; display: block; }
.wp-block-image.is-style-video-popup a::after {
	content: "";
	position: absolute; inset: 0; margin: auto;
	width: 4.5rem; height: 4.5rem; border-radius: 50%;
	background: var(--wp--preset--color--kobalt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") 55% 50% / 45% no-repeat;
	box-shadow: 0 2px 10px rgba(0,0,0,.35);
	transition: transform .2s ease;
}
.wp-block-image.is-style-video-popup a:hover::after { transform: scale(1.08); }
.wp-block-button.is-style-video-popup .wp-block-button__link::before { content: "▶\00a0"; }

.lehm-video-dialog {
	width: min(960px, 94vw);
	max-height: 94vh;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--engobe);
	color: var(--wp--preset--color--weiss);
	overflow: visible;
}
.lehm-video-dialog::backdrop { background: rgba(26, 18, 8, .8); }
.lehm-video-rahmen { aspect-ratio: 16 / 9; display: grid; place-items: center; }
.lehm-video-rahmen iframe { width: 100%; height: 100%; border: 0; border-radius: 6px; }
.lehm-video-hinweis { max-width: 34rem; padding: 2rem; text-align: center; }
.lehm-video-hinweis a { color: inherit; }
.lehm-video-start { cursor: pointer; border: 0; }
.lehm-video-schliessen {
	position: absolute; top: -.9rem; right: -.9rem; z-index: 1;
	width: 2.4rem; height: 2.4rem; border-radius: 50%;
	border: 2px solid var(--wp--preset--color--weiss);
	background: var(--wp--preset--color--kobalt);
	color: var(--wp--preset--color--weiss);
	font-size: 1.4rem; line-height: 1; cursor: pointer;
}
@media (max-width: 600px) { .lehm-video-schliessen { top: -2.8rem; right: 0; } }