/*
Theme Name: Bühnenkreide
Theme URI: https://www.schul-musicals.de
Author: Tobias Wenkemann
Description: Theme für schul-musicals.de – schwarze Bühne, warmes Licht, Pastellkreide. Mit Vorlagen für Musical-Seiten, Musical-Finder, Hörproben, Preise und Anfrage.
Version: 1.0.2
Requires at least: 6.6
Tested up to: 7.1
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: buehnenkreide
*/

/* ---------- Grundlagen ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
::selection { background: #F4A940; color: #1A1208; }
:where(a) { text-underline-offset: 0.18em; }
img { height: auto; }

/* ---------- Kreide-Notiz (kleine Zeile über Überschriften) ---------- */
.sm-eyebrow {
	font-family: var(--wp--preset--font-family--caveat);
	font-weight: 700;
	font-size: 1.75rem !important;
	line-height: 1.05 !important;
	color: var(--wp--preset--color--spotlight) !important;
	margin-bottom: 0.25rem !important;
}
.sm-eyebrow.is-lila { color: var(--wp--preset--color--lila) !important; }
.sm-eyebrow.is-koralle { color: var(--wp--preset--color--koralle) !important; }

/* ---------- Kreidestrich unter Überschriften ---------- */
.sm-scribble::after {
	content: "";
	display: block;
	width: min(300px, 70%);
	height: 20px;
	margin-top: 0.6rem;
	background: no-repeat left center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20'%3E%3Cpath d='M4 12 C 60 3, 120 17, 180 8 S 270 6, 296 11' fill='none' stroke='%23F4A940' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.sm-scribble.is-lila::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20'%3E%3Cpath d='M4 12 C 60 3, 120 17, 180 8 S 270 6, 296 11' fill='none' stroke='%239C8CF5' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sm-scribble.is-koralle::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20'%3E%3Cpath d='M4 12 C 60 3, 120 17, 180 8 S 270 6, 296 11' fill='none' stroke='%23F27A5E' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* ---------- Aufkleber am Bild ---------- */
.sm-sticker-wrap { position: relative; }
.sm-sticker {
	position: absolute; left: -14px; bottom: -20px; z-index: 2;
	background: var(--wp--preset--color--kreide); color: #1A1520 !important;
	padding: 10px 18px !important; border-radius: 14px; transform: rotate(-3deg);
	font-family: var(--wp--preset--font-family--caveat); font-weight: 700; font-size: 1.6rem !important; line-height: 1.1 !important;
	max-width: 80%;
}
.sm-sticker.is-oben { left: auto; right: -12px; top: 24px; bottom: auto; transform: rotate(3deg); background: var(--wp--preset--color--koralle); color: #1A0B07 !important; }
.sm-sticker.is-oben.is-kinder { background: var(--wp--preset--color--spotlight); }
.sm-sticker.is-oben.is-sonder { background: var(--wp--preset--color--lila); }
@media (max-width: 600px) { .sm-sticker { left: 8px; font-size: 1.35rem !important; } .sm-sticker.is-oben { right: 8px; } }

/* ---------- Kategorie-Chips ---------- */
.sm-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sm-chip {
	display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important;
	font-size: 0.8125rem !important; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	border: 1px solid currentColor; padding: 4px 12px !important; border-radius: 999px; color: var(--wp--preset--color--kreide) !important;
}
.sm-chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.sm-chip.is-kinder { color: var(--wp--preset--color--spotlight) !important; }
.sm-chip.is-jugend { color: var(--wp--preset--color--koralle) !important; }
.sm-chip.is-sonder { color: var(--wp--preset--color--lila) !important; }
.sm-chip.is-plain::before { display: none; }

/* ---------- Statistik-Leiste ---------- */
.sm-stats { border-top: 1px solid var(--wp--preset--color--linie); border-bottom: 1px solid var(--wp--preset--color--linie); }
.sm-stat-zahl { font-family: var(--wp--preset--font-family--bricolage); font-weight: 800; font-size: 2.1rem !important; line-height: 1.15 !important; color: var(--wp--preset--color--spotlight) !important; margin: 0 !important; }
.sm-stat-text { font-size: 0.9375rem !important; color: var(--wp--preset--color--nebentext) !important; margin: 0 !important; }

/* ---------- Karten ---------- */
.sm-card {
	background: var(--wp--preset--color--kulisse); border: 1px solid var(--wp--preset--color--linie);
	border-radius: 18px; overflow: hidden; position: relative;
	transition: transform .18s ease, border-color .18s ease;
}
.sm-card:hover { transform: translateY(-3px); border-color: #4A4256; }
.sm-card > .wp-block-image, .sm-card > figure { margin: 0 !important; }
.sm-card > .wp-block-image img { border-radius: 0 !important; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block; }
.sm-card-body { padding: 20px 22px 24px !important; display: flex; flex-direction: column; gap: 8px; }
.sm-card-body > * { margin: 0 !important; }
.sm-card h3 { font-size: 1.55rem !important; line-height: 1.15 !important; }
.sm-card h3 a { color: var(--wp--preset--color--kreide); text-decoration: none; }
.sm-card h3 a::after { content: ""; position: absolute; inset: 0; } /* ganze Karte klickbar */
.sm-card-kat { font-size: 0.8125rem !important; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.sm-card-kat::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.sm-card.is-kinder .sm-card-kat { color: var(--wp--preset--color--spotlight) !important; }
.sm-card.is-jugend .sm-card-kat { color: var(--wp--preset--color--koralle) !important; }
.sm-card.is-sonder .sm-card-kat { color: var(--wp--preset--color--lila) !important; }
.sm-pills { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; margin-top: auto !important; }
.sm-pill { border: 1px solid #3A3442; border-radius: 999px; padding: 3px 10px !important; font-size: 0.875rem !important; color: var(--wp--preset--color--nebentext) !important; margin: 0 !important; }
.sm-platzhalter { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--wp--preset--color--kulisse-dunkel); font-family: var(--wp--preset--font-family--caveat); font-weight: 700; font-size: 2.6rem; color: var(--wp--preset--color--lila); text-align: center; padding: 0 16px; margin: 0 !important; }

/* ---------- Musical-Finder ---------- */
.sm-filter { display: flex; flex-wrap: wrap; gap: 10px; }
.sm-filter button {
	font-family: var(--wp--preset--font-family--figtree); font-size: 1rem; font-weight: 700;
	min-height: 44px; padding: 10px 20px; border-radius: 999px; cursor: pointer;
	background: transparent; color: var(--wp--preset--color--kreide); border: 2px solid #3A3442;
}
.sm-filter button:hover { border-color: var(--wp--preset--color--kreide); }
.sm-filter button[aria-pressed="true"] { background: var(--wp--preset--color--kreide); color: var(--wp--preset--color--buehne); border-color: var(--wp--preset--color--kreide); }
.sm-filter button:focus-visible { outline: 2px solid var(--wp--preset--color--spotlight); outline-offset: 3px; }
.sm-finder-grid.wp-block-group { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 24px; }
.sm-finder-grid .sm-card[hidden] { display: none !important; }

/* ---------- Flächen und Kästen ---------- */
.sm-band { background: var(--wp--preset--color--kulisse); border-top: 1px solid var(--wp--preset--color--linie); border-bottom: 1px solid var(--wp--preset--color--linie); }
.sm-box { border: 1px solid var(--wp--preset--color--linie); border-radius: 18px; padding: 24px !important; }
.sm-box.is-hell { background: var(--wp--preset--color--kulisse); }
.sm-box.is-dunkel { background: var(--wp--preset--color--buehne); }
.sm-box.is-betont { border: 2px solid var(--wp--preset--color--spotlight); }
.sm-box.is-lila { border: 2px solid var(--wp--preset--color--lila); }
.sm-box > :first-child { margin-top: 0; }
.sm-box h3 { font-size: 1.375rem !important; }
.sm-box.is-kinder h3, .sm-rollen > .sm-box:nth-child(4n+1) h3 { color: var(--wp--preset--color--spotlight); }
.sm-rollen > .sm-box:nth-child(4n+2) h3 { color: var(--wp--preset--color--koralle); }
.sm-rollen > .sm-box:nth-child(4n+3) h3 { color: var(--wp--preset--color--lila); }
.sm-preis { font-family: var(--wp--preset--font-family--bricolage); font-weight: 800; font-size: 2.25rem !important; line-height: 1.15 !important; color: var(--wp--preset--color--kreide) !important; margin: 0.1rem 0 !important; }
.sm-preis-label { color: var(--wp--preset--color--nebentext) !important; font-size: 0.9375rem !important; margin: 0 !important; }
.sm-box .sm-preis + p { font-size: 0.9375rem; margin-top: 0.2rem; }
.sm-merkmal { border-top: 3px solid var(--wp--preset--color--spotlight); padding-top: 16px !important; }
.sm-merkmal:nth-child(2) { border-color: var(--wp--preset--color--koralle); }
.sm-merkmal:nth-child(3) { border-color: var(--wp--preset--color--lila); }
.sm-merkmal:nth-child(4) { border-color: var(--wp--preset--color--kreide); }
.sm-merkmal h3 { font-size: 1.3rem !important; margin-bottom: 0.4rem; }

/* ---------- Steckbrief ---------- */
.sm-steckbrief.wp-block-group { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px !important; background: var(--wp--preset--color--linie); border: 1px solid var(--wp--preset--color--linie); border-radius: 16px; overflow: hidden; }
.sm-steckbrief > .wp-block-group { background: var(--wp--preset--color--kulisse); padding: 14px 18px !important; margin: 0 !important; }
.sm-steckbrief p { margin: 0 !important; }
.sm-steckbrief p:first-child { font-size: 0.8125rem; color: var(--wp--preset--color--nebentext); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.sm-steckbrief p:last-child { font-weight: 700; color: var(--wp--preset--color--kreide); font-size: 1.0625rem; }

/* ---------- Hörproben ---------- */
.sm-hoerproben { background: var(--wp--preset--color--kulisse); border: 1px solid var(--wp--preset--color--linie); border-radius: 20px; padding: 14px 16px !important; }
.sm-hoerproben .wp-block-audio { margin: 0 !important; padding: 10px 0; border-bottom: 1px solid #241F2B; display: flex; flex-direction: column-reverse; gap: 6px; }
.sm-hoerproben .wp-block-audio figcaption { margin: 0; text-align: left; font-weight: 700; font-size: 1rem; color: var(--wp--preset--color--kreide); }
.sm-hoerproben .wp-block-audio audio { width: 100%; height: 40px; color-scheme: dark; }
.sm-hoerproben > p:last-child { font-size: 0.875rem; color: var(--wp--preset--color--nebentext); margin-top: 10px; }

/* ---------- Galerie ---------- */
.sm-galerie.wp-block-gallery img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; }

/* ---------- Häkchen-Liste ---------- */
.sm-check { list-style: none; padding-left: 0 !important; display: flex; flex-direction: column; gap: 12px; }
.sm-check li { position: relative; padding-left: 34px; }
.sm-check li::before {
	content: ""; position: absolute; left: 0; top: 4px; width: 22px; height: 22px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4A940' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}

/* ---------- Schritte ---------- */
.sm-schritt-nr { font-family: var(--wp--preset--font-family--caveat); font-weight: 700; font-size: 4rem !important; line-height: 0.9 !important; color: var(--wp--preset--color--spotlight) !important; margin: 0 !important; }

/* ---------- Zitat ---------- */
.sm-zitat { background: var(--wp--preset--color--kulisse); border: 1px solid var(--wp--preset--color--linie) !important; border-radius: 22px; padding: 36px !important; }
.sm-zitat::before { content: "„"; display: block; font-family: var(--wp--preset--font-family--bricolage); font-weight: 800; font-size: 5rem; line-height: 0.6; color: var(--wp--preset--color--koralle); }
.sm-zitat p { color: var(--wp--preset--color--kreide) !important; }
.sm-zitat cite { display: block; margin-top: 14px; font-family: var(--wp--preset--font-family--figtree); font-style: normal; font-weight: 400; font-size: 1rem; color: var(--wp--preset--color--nebentext); }

/* ---------- Häufige Fragen ---------- */
.wp-block-details summary { cursor: pointer; font-weight: 700; font-size: 1.1875rem; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; color: var(--wp--preset--color--kreide); }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font-size: 1.6rem; color: var(--wp--preset--color--spotlight); flex-shrink: 0; }
.wp-block-details[open] summary::after { content: "–"; }
.wp-block-details > :not(summary) { max-width: 820px; }

/* ---------- Video-Platz ---------- */
.sm-video .wp-block-embed__wrapper, .sm-video iframe { border-radius: 20px; overflow: hidden; }

/* ---------- Abschluss-Band (orange) ---------- */
.sm-cta { background: var(--wp--preset--color--spotlight); color: var(--wp--preset--color--tinte); border-radius: 26px; padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px) !important; }
.sm-cta h2, .sm-cta p { color: var(--wp--preset--color--tinte) !important; }
.sm-cta .wp-block-button__link { background: var(--wp--preset--color--tinte) !important; color: var(--wp--preset--color--kreide) !important; }
.sm-cta .wp-block-button.is-style-outline .wp-block-button__link { background: transparent !important; color: var(--wp--preset--color--tinte) !important; border: 2px solid var(--wp--preset--color--tinte) !important; }

/* ---------- Umriss-Button ---------- */
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--kreide); border: 2px solid var(--wp--preset--color--kreide); padding: calc(0.85rem - 2px) calc(1.6rem - 2px); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--kreide); color: var(--wp--preset--color--buehne); }

/* ---------- Tabelle (Preise) ---------- */
.sm-tabelle table { border-collapse: collapse; min-width: 640px; }
.sm-tabelle { overflow-x: auto; border: 1px solid var(--wp--preset--color--linie); border-radius: 18px; }
.sm-tabelle th, .sm-tabelle td { border: 0 !important; border-top: 1px solid var(--wp--preset--color--linie) !important; padding: 16px 20px !important; text-align: left; }
.sm-tabelle thead th { border-top: 0 !important; font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--nebentext); }
.sm-tabelle thead th:nth-child(2) { color: var(--wp--preset--color--spotlight); }
.sm-tabelle thead th:nth-child(3) { color: var(--wp--preset--color--koralle); }
.sm-tabelle thead th:nth-child(4) { color: var(--wp--preset--color--lila); }
.sm-tabelle tbody td:not(:first-child) { font-family: var(--wp--preset--font-family--bricolage); font-weight: 800; font-size: 1.4rem; }

/* ---------- Kopf- und Fußbereich ---------- */
.sm-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--wp--preset--color--kreide) !important; font-family: var(--wp--preset--font-family--bricolage); font-weight: 800; font-size: 1.45rem; letter-spacing: -0.01em; }
.sm-logo span { color: var(--wp--preset--color--spotlight); }
.sm-logo svg { flex-shrink: 0; }
.sm-header { border-bottom: 1px solid var(--wp--preset--color--linie); }
.sm-header .wp-block-navigation a { text-decoration: none; }
.sm-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--spotlight); }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--buehne) !important; color: var(--wp--preset--color--kreide) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.5rem; }
.sm-footer { border-top: 1px solid var(--wp--preset--color--linie); }
.sm-footer a { color: var(--wp--preset--color--nebentext); }
.sm-footer a:hover { color: var(--wp--preset--color--kreide); }

/* ---------- Formular (Contact Form 7) ---------- */
.wpcf7 label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: var(--wp--preset--color--kreide); }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="number"], .wpcf7 select, .wpcf7 textarea {
	font-family: var(--wp--preset--font-family--figtree); font-size: 1.0625rem; color: var(--wp--preset--color--kreide);
	background: var(--wp--preset--color--buehne); border: 1px solid #3A3442; border-radius: 12px; padding: 12px 14px; width: 100%; box-sizing: border-box;
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: 2px solid var(--wp--preset--color--spotlight); outline-offset: 1px; border-color: transparent; }
.wpcf7 .wpcf7-list-item { display: flex; margin: 0 0 8px; }
.wpcf7 .wpcf7-list-item label { flex-direction: row; align-items: center; gap: 12px; font-weight: 400; color: var(--wp--preset--color--fliesstext); }
.wpcf7 input[type="checkbox"] { width: 22px; height: 22px; accent-color: #F4A940; }
.wpcf7 input[type="submit"] { background: var(--wp--preset--color--spotlight); color: var(--wp--preset--color--tinte); border: 0; border-radius: 999px; padding: 15px 28px; font-weight: 700; font-size: 1.0625rem; cursor: pointer; }
.wpcf7 input[type="submit"]:hover { background: #FFC266; }
.sm-formular { background: var(--wp--preset--color--kulisse); border: 1px solid var(--wp--preset--color--linie); border-radius: 22px; padding: clamp(20px, 4vw, 32px) !important; }

/* ---------- Kleine Helfer ---------- */
.sm-nebentext { color: var(--wp--preset--color--nebentext) !important; font-size: 0.9375rem !important; }
.sm-breadcrumb { font-size: 0.9375rem; color: var(--wp--preset--color--nebentext); }
.sm-breadcrumb a { color: var(--wp--preset--color--nebentext); }
.sm-rund img { border-radius: 20px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .sm-card { transition: none; } .sm-card:hover { transform: none; } }

/* ---------- Abschnitts-Abstände ---------- */
.sm-sec-60 { padding-top: var(--wp--preset--spacing--60) !important; padding-bottom: var(--wp--preset--spacing--60) !important; }
.sm-sec-40 { padding-top: var(--wp--preset--spacing--50) !important; padding-bottom: var(--wp--preset--spacing--50) !important; }
.sm-sec-oben { padding-top: var(--wp--preset--spacing--60) !important; padding-bottom: 0 !important; }
.sm-sec-unten { padding-top: 0 !important; padding-bottom: var(--wp--preset--spacing--60) !important; }
.sm-sec-klein { padding-top: 1.6rem !important; padding-bottom: 1.6rem !important; }
main > .wp-block-post-content > .alignfull:first-child.sm-sec-60 { padding-top: var(--wp--preset--spacing--50) !important; }

/* ---------- Zweispaltige Abschnitte (Bild + Text) ---------- */
.sm-zwei.wp-block-group { display: flex !important; flex-wrap: wrap; gap: clamp(28px, 5vw, 56px); align-items: center; }
.sm-zwei > * { flex: 1 1 440px; min-width: 0; margin: 0 !important; }
.sm-zwei.is-oben { align-items: flex-start; }
.sm-zwei > .sm-breit { flex: 1.25 1 520px; }
.sm-hero h1 { font-size: clamp(2.5rem, 5.2vw, 4rem); }
.sm-titel-gross { font-size: var(--wp--preset--font-size--giant) !important; line-height: 0.98 !important; letter-spacing: -0.03em !important; }
.sm-unterzeile { font-family: var(--wp--preset--font-family--bricolage); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.625rem) !important; line-height: 1.3 !important; color: var(--wp--preset--color--kreide) !important; }
.sm-lead { font-size: 1.25rem !important; }

/* ---------- Bildband oben (Über uns) ---------- */
.sm-banner .wp-block-image { margin: 0 !important; }
.sm-banner .wp-block-image img { width: 100%; height: clamp(200px, 28vw, 380px); object-fit: cover; border-radius: 0 !important; display: block; }

/* ---------- Korrekturen 1.0.2 ---------- */
.sm-logo-text { white-space: nowrap; }
.sm-logo-text span { color: var(--wp--preset--color--spotlight); }
.wp-block-post-content.alignfull { max-width: none; }