/* ==========================================================================
   BOROSEN – GEMEINSAMES DESIGN FÜR ALLE MODULE
   --------------------------------------------------------------------------
   Diese Datei sorgt dafür, dass Antrag, Quiz, Shop, Ticketwünsche & Co.
   gleich aussehen: gleiche Farben, Rundungen, Knöpfe, Eingabefelder und
   Hinweis-Kästen – passend zum Theme borosenv2.

   Aufbau:
     1. Variablen (Farben, Rundungen, Schatten, Bewegung)
     2. Knöpfe            (.bo-knopf)
     3. Auswahl-Knöpfe    (.bo-wahl – z. B. Stehplatz/Sitzplatz, Größen)
     4. Karten            (.bo-karte)
     5. Eingabefelder     (innerhalb von .bo-modul)
     6. Hinweise          (.bo-hinweis – Erfolg, Fehler, Info)
     7. Kleinteile        (.bo-chip, .bo-haken)
     8. Bewegung          (Auftauchen, Wackeln, Hüpfen)
     9. "Weniger Bewegung" respektieren
    10. Bausteine für Modul-Karten (NEU: Quiz, Tickets, Shop einheitlich)
    11. Dunkles Design (NEU, passend zum Theme)

   Die Farben kommen aus der theme.json des Themes. Falls das Theme einmal
   gewechselt wird, greifen die Ersatzwerte hinter dem Komma.
   ========================================================================== */


/* 1. VARIABLEN ------------------------------------------------------------ */
:root {
	--bo-gelb:        var(--wp--preset--color--bvb-gelb, #FFD800);
	--bo-gelb-hell:   #FFF4B8;
	--bo-schwarz:     var(--wp--preset--color--soft-schwarz, #1A1A1A);
	--bo-weiss:       var(--wp--preset--color--warmweiss, #F9F9F9);
	--bo-flaeche:     #FFFFFF;
	--bo-linie:       rgba(26, 26, 26, 0.12);
	--bo-grau-text:   #555555;

	--bo-gruen:       #2E9D57;
	--bo-gruen-hell:  #E6F5EC;
	--bo-gruen-text:  #1D6B3A;
	--bo-rot:         #C62828;
	--bo-rot-hell:    #FDECEA;
	--bo-rot-text:    #A8231C;
	--bo-blau-hell:   #E9F1FB;
	--bo-blau-text:   #1D4F8F;

	--bo-rundung:     25px;   /* Karten, große Kästen (wie im Theme) */
	--bo-rundung-m:   15px;   /* Auswahl-Knöpfe, Hinweise */
	--bo-rundung-s:   12px;   /* Eingabefelder */
	--bo-schatten:    0 2px 6px rgba(26, 26, 26, 0.08), 0 12px 28px rgba(26, 26, 26, 0.08);

	/* Bewegung: schnell starten, weich abbremsen (wie im Theme) */
	--bo-kurve:       cubic-bezier(0.23, 1, 0.32, 1);
	--bo-kurve-feder: cubic-bezier(0.34, 1.56, 0.64, 1); /* leichtes Überschwingen */
}


/* 2. KNÖPFE ----------------------------------------------------------------
   Standard: schwarz gefüllt, beim Drüberfahren gelb.
   .bo-knopf--gelb   : gelb gefüllt, beim Drüberfahren schwarz
   .bo-knopf--rahmen : nur Rahmen                                         */
.bo-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8rem 1.5rem 0.75rem;
	border: 2px solid var(--bo-schwarz);
	border-radius: 60px;
	background-color: var(--bo-schwarz);
	color: var(--bo-weiss);
	font: inherit;
	font-weight: 800;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 160ms ease-out,
		color 160ms ease-out,
		border-color 160ms ease-out,
		transform 160ms var(--bo-kurve);
}
.bo-knopf:hover,
.bo-knopf:focus-visible {
	background-color: var(--bo-gelb);
	color: var(--bo-schwarz);
}
.bo-knopf:active {
	transform: scale(0.97); /* fühlbares "Drücken" */
}
.bo-knopf:disabled,
.bo-knopf[aria-busy="true"] {
	opacity: 0.55;
	cursor: progress;
}
.bo-knopf--gelb {
	background-color: var(--bo-gelb);
	border-color: var(--bo-gelb);
	color: var(--bo-schwarz);
}
.bo-knopf--gelb:hover,
.bo-knopf--gelb:focus-visible {
	background-color: var(--bo-schwarz);
	border-color: var(--bo-schwarz);
	color: var(--bo-gelb);
}
.bo-knopf--rahmen {
	background-color: transparent;
	color: var(--bo-schwarz);
}
.bo-knopf--klein {
	padding: 0.5rem 1rem 0.45rem;
	font-size: 0.9rem;
}
.bo-knopf:focus-visible,
.bo-wahl:focus-visible {
	outline: 3px solid var(--bo-schwarz);
	outline-offset: 3px;
}


/* 3. AUSWAHL-KNÖPFE ---------------------------------------------------------
   Für "eins von mehreren wählen" (Stehplatz/Sitzplatz, Größe, Quiz-Antwort).
   Gewählt = gelb mit schwarzem Rand (Klasse .is-active oder .active).      */
.bo-wahl {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.85rem 1rem;
	border: 2px solid var(--bo-linie);
	border-radius: var(--bo-rundung-m);
	background-color: var(--bo-flaeche);
	color: var(--bo-schwarz);
	font: inherit;
	font-weight: 800;
	line-height: 1.2;
	cursor: pointer;
	transition:
		border-color 160ms ease-out,
		background-color 160ms ease-out,
		transform 160ms var(--bo-kurve);
}
@media (hover: hover) {
	.bo-wahl:hover {
		border-color: var(--bo-schwarz);
	}
}
.bo-wahl:active {
	transform: scale(0.97);
}
.bo-wahl.is-active,
.bo-wahl.active,
.bo-wahl[aria-pressed="true"] {
	border-color: var(--bo-schwarz);
	background-color: var(--bo-gelb);
}


/* 4. KARTEN ------------------------------------------------------------------ */
.bo-karte {
	--bo-karte-abstand: clamp(1rem, 3vw, 1.5rem); /* Innenabstand – auch für randlose Bilder (Shop) */
	background-color: var(--bo-flaeche);
	border: 2px solid var(--bo-linie);
	border-radius: var(--bo-rundung);
	padding: var(--bo-karte-abstand);
}


/* 5. EINGABEFELDER (gilt für alle Formulare innerhalb eines Moduls) ------- */
.bo-modul input[type="text"],
.bo-modul input[type="email"],
.bo-modul input[type="tel"],
.bo-modul input[type="date"],
.bo-modul input[type="number"],
.bo-modul input[type="search"],
.bo-modul select,
.bo-modul textarea {
	padding: 0.75rem 0.9rem;
	border: 2px solid var(--bo-linie);
	border-radius: var(--bo-rundung-s);
	background-color: var(--bo-flaeche);
	color: var(--bo-schwarz);
	font: inherit;
	font-size: 1rem; /* mind. 16px – sonst zoomt das iPhone beim Antippen hinein */
	transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.bo-modul input:focus,
.bo-modul select:focus,
.bo-modul textarea:focus {
	outline: none;
	border-color: var(--bo-schwarz);
	box-shadow: 0 0 0 4px rgba(255, 216, 0, 0.55); /* gelber Leuchtrand */
}
.bo-modul ::placeholder {
	color: #8a8a8a;
}


/* 6. HINWEISE ---------------------------------------------------------------- */
.bo-hinweis {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
	padding: 1rem 1.2rem;
	border-radius: var(--bo-rundung-m);
	font-size: 0.95rem;
	line-height: 1.5;
	animation: bo-auftauchen 320ms var(--bo-kurve) both;
}
.bo-hinweis--ok     { background: var(--bo-gruen-hell); color: var(--bo-gruen-text); }
.bo-hinweis--fehler { background: var(--bo-rot-hell);   color: var(--bo-rot-text); }
.bo-hinweis--info   { background: var(--bo-blau-hell);  color: var(--bo-blau-text); }


/* 7. KLEINTEILE -------------------------------------------------------------- */

/* Kleine "Pille" für Status, Preise, Zahlen */
.bo-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	background: var(--bo-weiss);
	border: 1px solid var(--bo-linie);
	font-size: 0.8rem;
	font-weight: 800;
	line-height: 1.4;
	white-space: nowrap;
}
.bo-chip--gelb  { background: var(--bo-gelb); border-color: var(--bo-gelb); color: var(--bo-schwarz); }
.bo-chip--gruen { background: var(--bo-gruen-hell); border-color: transparent; color: var(--bo-gruen-text); }

/* Grüner Haken-Kreis, der beim Erscheinen kurz "aufploppt" (Erfolgsmeldungen) */
.bo-haken {
	flex-shrink: 0;
	position: relative;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--bo-gruen);
	animation: bo-huepfen 500ms var(--bo-kurve-feder) both;
}
.bo-haken::after {
	content: "";
	position: absolute;
	left: 0.6rem;
	top: 0.32rem;
	width: 0.42rem;
	height: 0.8rem;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	rotate: 45deg;
}


/* 8. BEWEGUNG ----------------------------------------------------------------
   Nur als Antwort auf eine Aktion (Klick, Abschicken) – nie "einfach so".   */
@keyframes bo-auftauchen {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}
/* Kurzes Hüpfen: z. B. richtige Quiz-Antwort, gespeicherter Wunsch */
@keyframes bo-huepfen {
	0%   { transform: scale(0.6); opacity: 0; }
	100% { transform: scale(1);   opacity: 1; }
}
.bo-huepft {
	animation: bo-huepfen-klein 420ms var(--bo-kurve-feder);
}
@keyframes bo-huepfen-klein {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.04); }
	100% { transform: scale(1); }
}
/* Kurzes Wackeln: z. B. falsche Quiz-Antwort */
.bo-wackelt {
	animation: bo-wackeln 380ms ease-out;
}
@keyframes bo-wackeln {
	0%, 100% { transform: translateX(0); }
	20%      { transform: translateX(-6px); }
	40%      { transform: translateX(5px); }
	60%      { transform: translateX(-3px); }
	80%      { transform: translateX(2px); }
}



/* 10. BAUSTEINE FÜR MODUL-KARTEN ---------------------------------------------
   NEU (Plugin 1.2): Quiz, Ticketwünsche und Shop sind jetzt aus denselben
   Bausteinen gebaut. So sieht jede Karte gleich aus und fühlt sich gleich an:

     ┌──────────────────────────────────────────┐
     │ KICKER (z. B. „Bundesliga – 10. Spieltag“) ✿ │ ← Rose oben rechts
     │ Titel (groß und fett)                    │
     │ Meta-Zeile (Datum, Preis, Anzahl …)      │
     │ [ Auswahl ] [ Auswahl ]                  │ ← .bo-wahl
     │ [        Haupt-Knopf        ]            │ ← .bo-knopf
     │ ┌ Box: Deine Bestellungen / Wünsche ┐    │ ← .bo-box
     └──────────────────────────────────────────┘
*/

/* Mehrere Karten nebeneinander (passt sich der Breite an) */
.bo-raster {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--bo-raster-min, 300px)), 1fr));
}

/* Karte mit Innenleben untereinander */
.bo-karte--modul {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}
/* Die Rose oben rechts – wie in den grauen Überschrift-Kästen des Themes */
.bo-karte--rose::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -38px;
	right: -38px;
	width: 150px;
	aspect-ratio: 1;
	background: var(--bo-gelb);
	opacity: 0.35;
	-webkit-mask: url('rose-linie.svg') center / contain no-repeat;
	        mask: url('rose-linie.svg') center / contain no-repeat;
	pointer-events: none;
}

/* Kopf der Karte: Kicker, Titel, Meta */
.bo-karte__kopf {
	display: grid;
	gap: 0.35rem;
	padding-right: 3rem; /* Platz für die Rose */
}
.bo-modul .bo-kicker {
	margin: 0;
	color: var(--bo-grau-text);
	font-size: 0.85rem;
	font-weight: 800;
	line-height: 1.3;
}
.bo-modul .bo-titel {
	margin: 0;
	font-size: clamp(1.25rem, 3vw, 1.6rem);
	font-weight: 800;
	line-height: 1.15;
}
.bo-modul .bo-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: 0.95rem;
}
.bo-modul .bo-text {
	margin: 0;
	color: var(--bo-grau-text);
	line-height: 1.5;
}

/* Ein Auswahl-Bereich mit Überschrift (z. B. „Farbe“, „Größe“) */
.bo-feld {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	border: 0;
}
.bo-modul .bo-feld__label {
	padding: 0;
	font-size: 0.9rem;
	font-weight: 800;
}

/* Auswahl-Knöpfe in einer Reihe */
.bo-wahl-reihe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--bo-wahl-min, 130px), 1fr));
	gap: 0.6rem;
}
.bo-wahl-reihe--klein {
	--bo-wahl-min: 3.4rem;
}
.bo-wahl--klein {
	padding: 0.6rem 0.7rem;
}
.bo-wahl--links {
	justify-content: flex-start;
	text-align: left;
}
/* Farbpunkt in einem Auswahl-Knopf */
.bo-farbe {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	border: 1px solid rgba(26, 26, 26, 0.25);
	border-radius: 50%;
	background: var(--bo-farbe, #d9d9d9);
}

/* Breiter Knopf (füllt die Karte) */
.bo-knopf--breit {
	width: 100%;
}

/* Hellgraue Box innerhalb einer Karte (Ergebnisse, „Deine Bestellungen“) */
.bo-box {
	padding: 1rem;
	border-radius: var(--bo-rundung-m);
	background: var(--bo-weiss);
	font-size: 0.95rem;
	line-height: 1.5;
}
.bo-modul .bo-box__titel {
	margin: 0 0 0.6rem;
	font-size: 0.9rem;
	font-weight: 800;
}
.bo-liste {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bo-liste > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.6rem;
	margin: 0;
}

/* Kleiner runder Knopf mit × (z. B. Bestellung stornieren) */
.bo-x {
	display: inline-grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bo-rot-text);
	font: inherit;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 160ms ease-out, transform 160ms var(--bo-kurve);
}
.bo-x:hover {
	background: var(--bo-rot-hell);
}
.bo-x:active {
	transform: scale(0.9);
}

/* Fortschrittsbalken (Quiz) */
.bo-fortschritt {
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--bo-linie);
}
.bo-fortschritt > span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--bo-gelb);
	transition: width 450ms var(--bo-kurve);
}

/* Kurze Rückmeldung unter einem Knopf ("Gespeichert", "Bitte Größe wählen") */
.bo-rueckmeldung {
	min-height: 1.4em;
	margin: 0;
	font-size: 0.9rem;
	font-weight: 800;
}
.bo-rueckmeldung--ok     { color: var(--bo-gruen-text); animation: bo-auftauchen 300ms var(--bo-kurve) both; }
.bo-rueckmeldung--fehler { color: var(--bo-rot-text);   animation: bo-wackeln 380ms ease-out; }

/* Weitere Chip-Farben */
.bo-chip--dunkel { background: var(--bo-schwarz); border-color: var(--bo-schwarz); color: var(--bo-gelb); }
.bo-chip--hell   { background: var(--bo-gelb-hell); border-color: transparent; color: #6b5300; }



/* 11. DUNKLES DESIGN (DARKMODE) ----------------------------------------------
   NEU (Plugin 1.3): Schaltet das Theme borosenv2 auf dunkel um (am <html>
   steht dann data-farbschema="dunkel"), bekommen auch die Module dunkle
   Farben. Gelbe Flächen bleiben gelb – Schrift darauf bleibt dunkel.     */
:root[data-farbschema="dunkel"] {
	--bo-schwarz:     #F9F9F9;   /* Schrift wird hell */
	--bo-flaeche:     #232323;   /* Karten */
	--bo-weiss:       #2D2D2D;   /* graue Box in Karten, Schrift auf hellen Knöpfen */
	--bo-linie:       rgba(255, 255, 255, 0.14);
	--bo-grau-text:   #B3B3B3;
	--bo-gelb-hell:   #3A3200;
	--bo-gruen-hell:  #12301F;
	--bo-gruen-text:  #7DDBA3;
	--bo-rot-hell:    #3A1715;
	--bo-rot-text:    #FF9A92;
	--bo-blau-hell:   #14253A;
	--bo-blau-text:   #9CC3F5;
	--bo-schatten:    0 2px 6px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.4);
}
/* Schrift auf Gelb bleibt dunkel */
:root[data-farbschema="dunkel"] :is(
	.bo-knopf:hover,
	.bo-knopf:focus-visible,
	.bo-knopf--gelb,
	.bo-wahl.is-active,
	.bo-wahl.active,
	.bo-wahl[aria-pressed="true"],
	.bo-chip--gelb
) {
	color: #1A1A1A;
}
:root[data-farbschema="dunkel"] .bo-wahl:is(.is-active, .active, [aria-pressed="true"]) .bo-farbe {
	border-color: rgba(26, 26, 26, 0.35);
}
:root[data-farbschema="dunkel"] .bo-chip--dunkel {
	border-color: var(--bo-gelb);
	background: #1A1A1A;
}
:root[data-farbschema="dunkel"] .bo-chip--hell {
	color: #FFE680;
}
/* Rose oben rechts in den Karten etwas zurückhaltender */
:root[data-farbschema="dunkel"] .bo-karte--rose::before {
	opacity: 0.15;
}
/* Fokus-Rahmen hell statt schwarz */
:root[data-farbschema="dunkel"] :is(.bo-knopf, .bo-wahl):focus-visible {
	outline-color: var(--bo-gelb);
}

/* 9. "WENIGER BEWEGUNG" ------------------------------------------------------
   Wer das im Betriebssystem eingestellt hat, sieht alles sofort und ohne
   Animation. */
@media (prefers-reduced-motion: reduce) {
	.bo-hinweis,
	.bo-haken,
	.bo-huepft,
	.bo-wackelt {
		animation: none !important;
	}
	.bo-knopf,
	.bo-wahl,
	.bo-fortschritt > span {
		transition: none;
	}
	.bo-rueckmeldung--ok,
	.bo-rueckmeldung--fehler {
		animation: none !important;
	}
}