/*
Theme Name: Entdeckerlokal Schwellbrunn
Theme URI: https://entdeckerlokal.ch
Author: Verein Entdeckerlokal Schwellbrunn
Description: Schlichtes Block-Theme für das Entdeckerlokal im Gästehaus Kreuz, Schwellbrunn. Einseitige Startseite mit Angebot, Terminen, Projekten, Verein und Kontakt. Schriften sind lokal eingebunden (keine Verbindung zu Google).
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: entdeckerlokal
*/

:root {
	--el-papier: var(--wp--preset--color--papier, #F4F6F3);
	--el-brett: var(--wp--preset--color--steckbrett, #E2E8E0);
	--el-tinte: var(--wp--preset--color--tinte, #1B2138);
	--el-rot: var(--wp--preset--color--kabel-rot, #C7362A);
	--el-blau: var(--wp--preset--color--kabel-blau, #2458B8);
	--el-gelb: var(--wp--preset--color--kabel-gelb, #F0B31A);
	--el-gruen: var(--wp--preset--color--led-gruen, #1F9D55);
	--el-loecher: radial-gradient(circle at 50% 50%, #c9d1c6 0 2px, transparent 2.5px) 0 0 / 16px 16px;
}

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

:where(a, button, [role="button"], input, summary):focus-visible {
	outline: 3px solid var(--el-gelb);
	outline-offset: 3px;
	border-radius: 4px;
}

.el-main > * { margin-block: 0; }
.el-main { margin-block-start: 0; }

/* Kopfzeile ------------------------------------------------------------ */
.el-header {
	padding-block: 1rem;
	border-bottom: 2px solid var(--el-tinte);
	background: var(--el-papier);
}
.el-header__innen { gap: 1rem 2rem; }
.el-logo {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.2rem;
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: 0.55rem;
}
.el-logo a { color: var(--el-tinte); text-decoration: none; }
.el-logo::before {
	content: "";
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background: var(--el-gruen);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--el-gruen) 25%, transparent);
	flex: none;
}
.el-nav { font-family: var(--wp--preset--font-family--display); font-weight: 600; gap: 1.5rem; }
.el-nav a { text-decoration: none; color: var(--el-tinte); }
.el-nav a:hover { color: var(--el-blau); text-decoration: underline; text-underline-offset: 0.3em; }

/* Abschnitte ------------------------------------------------------------ */
.el-section { padding-block: var(--wp--preset--spacing--60); }
.el-section h2 { margin-block-end: 0.5em; }
.el-intro { font-size: var(--wp--preset--font-size--large); line-height: 1.45; }
.el-angebot .el-intro { padding-right: max(0px, calc(100% - 34em)); }
.el-hinweis { font-size: var(--wp--preset--font-size--small); }

/* Hero ------------------------------------------------------------------ */
.el-hero {
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	position: relative;
}
.el-hero__spalten { gap: clamp(2rem, 5vw, 4.5rem); }
.el-hero__ort {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	color: var(--el-rot);
	margin-block-end: 0.75rem;
}
.el-hero h1 { margin-block: 0 0.4em; max-width: 11ch; text-wrap: balance; }
.el-hero__lead { max-width: 34em; font-size: 1.1875rem; }
.el-hero .wp-block-buttons { margin-block-start: 1.75rem; gap: 0.75rem; }

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid var(--el-tinte);
	color: var(--el-tinte);
	background: transparent;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--el-tinte);
	color: var(--el-papier);
}

/* Die Schaltung ---------------------------------------------------------- */
.el-circuit { margin: 0; }
.el-circuit svg { width: 100%; height: auto; display: block; overflow: visible; }
.el-circuit__brett { fill: var(--el-brett); }
.el-circuit__kabel .rot { stroke: var(--el-rot); }
.el-circuit__kabel .blau { stroke: var(--el-blau); }
.el-circuit__kabel .gelb { stroke: var(--el-gelb); }
.el-circuit__signal path {
	stroke: #fff;
	stroke-dasharray: 4 16;
	opacity: 0;
	transition: opacity .2s;
}
.el-circuit__knopf { cursor: pointer; outline: none; }
.el-circuit__knopf .sockel { fill: var(--el-tinte); }
.el-circuit__knopf .kappe { fill: var(--el-rot); transition: transform .12s ease; transform-origin: 87px 113px; }
.el-circuit__knopf:hover .kappe { fill: #d8463a; }
.el-circuit__knopf .fokus { fill: none; stroke: var(--el-gelb); stroke-width: 0; }
.el-circuit__knopf:focus-visible .fokus { stroke-width: 5; }
.el-circuit__knopf:active .kappe { transform: scale(.9); }

.el-circuit__rechner .platine { fill: var(--el-tinte); }
.el-circuit__rechner .leds circle { fill: #39405c; transition: fill .2s ease .25s; }

.el-circuit__led .schein { fill: var(--el-gruen); opacity: 0; transition: opacity .3s ease .5s; filter: blur(10px); }
.el-circuit__led .kuppel { fill: #c4dfcd; stroke: #97b9a2; stroke-width: 2; transition: fill .2s ease .5s; }
.el-circuit__led .rand { fill: #97b9a2; }
.el-circuit__led .bein { stroke: #8a938b; stroke-width: 4; }

.el-circuit__beschriftung text {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 17px;
	fill: var(--el-tinte);
}

.el-circuit.is-on .el-circuit__signal path { opacity: .9; animation: el-strom .7s linear infinite; }
.el-circuit.is-on .leds circle.an { fill: var(--el-rot); }
.el-circuit.is-on .el-circuit__led .schein { opacity: .55; }
.el-circuit.is-on .el-circuit__led .kuppel { fill: var(--el-gruen); stroke: #177a42; }

@keyframes el-strom { to { stroke-dashoffset: -40; } }

@media (prefers-reduced-motion: reduce) {
	.el-circuit * { transition: none !important; animation: none !important; }
}

.el-circuit__status {
	margin-top: 0.9rem;
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
	min-height: 1.6em;
}

/* Angebot: jede Spalte hängt an einem Kabel ------------------------------ */
.el-angebot { background: var(--el-papier); border-top: 2px solid var(--el-tinte); }
.el-angebot__spalten { margin-top: var(--wp--preset--spacing--40); gap: clamp(1.5rem, 3vw, 2.5rem); }
.el-kabel { --kabel: var(--el-tinte); position: relative; padding-top: 1.6rem; }
.el-kabel::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 7px;
	border-radius: 7px;
	background: var(--kabel);
}
.el-kabel::after {
	content: "";
	position: absolute;
	top: -3px; left: 0;
	width: 14px; height: 13px;
	border-radius: 2px;
	background: var(--el-tinte);
}
.el-kabel--rot { --kabel: var(--el-rot); }
.el-kabel--blau { --kabel: var(--el-blau); }
.el-kabel--gelb { --kabel: var(--el-gelb); }
.el-kabel--gruen { --kabel: var(--el-gruen); }
.el-kabel h3 { margin-block: 0 0.4em; }
.el-kabel p { margin: 0; }

/* Termine --------------------------------------------------------------- */
.el-termine { background: var(--el-brett); }
.el-termine__spalten { gap: clamp(2rem, 5vw, 4.5rem); }
.el-brett {
	background: var(--el-papier);
	border: 2px solid var(--el-tinte);
	border-radius: 18px;
	padding: clamp(1.4rem, 4vw, 2.5rem);
}
.el-terminliste { list-style: none; padding: 0; margin-block: 1.5rem; }
.el-terminliste li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	padding: 0.85rem 0 0.85rem 1.6rem;
	border-bottom: 1px dashed #a9b3a6;
	position: relative;
}
.el-terminliste li::before {
	content: "";
	position: absolute;
	left: 0; top: 1.2rem;
	width: 0.7rem; height: 0.7rem;
	border-radius: 50%;
	background: var(--el-gruen);
}
.el-terminliste li:first-child { border-top: 1px dashed #a9b3a6; }
.el-terminliste strong { font-family: var(--wp--preset--font-family--display); font-weight: 700; }

.el-ablauf { list-style: none; counter-reset: schritt; padding: 0; margin-block: 1.25rem 2.25rem; }
.el-ablauf li {
	counter-increment: schritt;
	position: relative;
	padding-left: 3.1rem;
	margin-bottom: 1.1rem;
}
.el-ablauf li::before {
	content: counter(schritt);
	position: absolute;
	left: 0; top: -0.1rem;
	width: 2.1rem; height: 2.1rem;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--el-tinte);
	color: var(--el-papier);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
}

/* Projekte -------------------------------------------------------------- */
.el-projekte .wp-block-post-template { gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: var(--wp--preset--spacing--40); }
.el-projekte .wp-block-post-featured-image img,
.el-seite .wp-block-post-featured-image img { border-radius: 14px; }
.wp-block-post-title a { color: var(--el-tinte); text-decoration: none; }
.wp-block-post-title a:hover { color: var(--el-blau); text-decoration: underline; }

/* Verein ---------------------------------------------------------------- */
.el-verein { background: var(--el-papier); border-top: 2px solid var(--el-tinte); }
.el-verein h3 { margin-top: 2.25rem; }

/* Kontakt --------------------------------------------------------------- */
.el-kontakt { background: var(--el-tinte); color: var(--el-papier); }
.el-kontakt h2 { color: var(--el-papier); }
.el-kontakt a { color: #fff; text-decoration-color: var(--el-gelb); text-underline-offset: .2em; }
.el-kontakt a:hover { color: var(--el-gelb); }
.el-kontakt .wp-block-button__link { background: var(--el-gelb); color: var(--el-tinte); }
.el-kontakt .wp-block-button__link:hover { background: #fff; color: var(--el-tinte); }
.el-adresse { font-size: var(--wp--preset--font-size--large); line-height: 1.4; }

/* Fusszeile ------------------------------------------------------------- */
.el-footer {
	padding-bottom: 3rem;
	font-size: var(--wp--preset--font-size--small);
	background: var(--el-papier);
	position: relative;
	padding-top: calc(32px + 2rem);
}
.el-footer::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0;
	height: 32px;
	background: var(--el-loecher), var(--el-brett);
}
.el-footer a { color: var(--el-tinte); }

/* Unterseiten ----------------------------------------------------------- */
.el-seite { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.el-seite h1 { font-size: var(--wp--preset--font-size--x-large); margin-bottom: .75em; }
.el-datum { font-size: var(--wp--preset--font-size--small); color: #525a73; }

@media (max-width: 781px) {
	.el-hero h1 { max-width: none; }
}