/* ============================================================
   Wunschbaum – Gestaltung, Fassung 1.2.0

   Grundsätze:

   1. Das Plugin bringt eigene Farben und Abstände mit, greift aber
      auf die des Themes zu, wenn es welche gibt. So sieht es auf der
      Vereinsseite zu Hause aus und funktioniert trotzdem überall.

   2. Kontrast vor Hübschheit. Die Türchenfarben wurden abgedunkelt,
      bis weiße Schrift darauf mindestens 4,5:1 erreicht – vorher lag
      Orange bei 2,65:1, das war für viele schlicht nicht lesbar.

   3. Alles muss ohne Maus bedienbar sein und ohne JavaScript
      funktionieren. Bewegung nur, wenn das Gerät sie nicht abbestellt.
   ============================================================ */

.wbm-form {
	--wbm-rot:      var(--efh-rot, #9C241F);
	--wbm-ant:      var(--efh-ant, #2B2B2B);
	--wbm-grau:     #5C5C5C;
	--wbm-linie:    var(--efh-linie, #E4E0DA);
	--wbm-flaeche:  var(--efh-creme, #FBF8F4);
	--wbm-weiss:    #FFFFFF;
	--wbm-ok:       #1A7F37;
	--wbm-ok-hell:  #E8F5EC;
	--wbm-fehler:   #B32D2E;
	--wbm-fehler-hell: #FCECEC;

	/* Türchenfarben – dunkel genug für weiße Schrift */
	--wbm-tuer-1: #D41159;
	--wbm-tuer-2: #2F78B2;
	--wbm-tuer-3: #AC6211;
	--wbm-tuer-4: #3C8250;

	--wbm-radius:   14px;
	--wbm-radius-s: 9px;
	--wbm-schatten: 0 2px 10px rgba(0, 0, 0, .07);
	--wbm-schatten-hoch: 0 10px 28px rgba(0, 0, 0, .14);
	--wbm-dauer:    .2s;
	--wbm-kurve:    cubic-bezier(.22, .61, .36, 1);
	--wbm-feder:    cubic-bezier(.34, 1.56, .64, 1);

	max-width: 780px;
	margin: 0 0 2.5em;
	color: var(--wbm-ant);
}

.wbm-auswahl { max-width: 1040px; }

/* ---- Überschriften innerhalb des Plugins ---- */

.wbm-form h3 { margin: 0 0 .3em; line-height: 1.25; }
.wbm-form h4 { margin: 2em 0 .6em; }

/* ============================================================
   Meldungen
   ============================================================ */

.wbm-erfolg,
.wbm-fehler {
	border-radius: var(--wbm-radius-s);
	padding: .85em 1.1em .85em 2.6em;
	position: relative;
	font-weight: 600;
	margin: 0 0 1em;
	line-height: 1.45;
}

.wbm-erfolg,
.wbm-fehler { animation: wbm-meldung .4s var(--wbm-kurve); }

@keyframes wbm-meldung {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.wbm-erfolg { color: #14622B; background: var(--wbm-ok-hell); box-shadow: inset 3px 0 0 var(--wbm-ok); }
.wbm-fehler { color: #8E2222; background: var(--wbm-fehler-hell); box-shadow: inset 3px 0 0 var(--wbm-fehler); }

.wbm-erfolg::before,
.wbm-fehler::before {
	position: absolute;
	left: 1em;
	top: .8em;
	font-weight: 700;
}

.wbm-erfolg::before { content: "✓"; color: var(--wbm-ok); }
.wbm-fehler::before { content: "!"; color: var(--wbm-fehler); }

.wbm-hinweis {
	font-size: .92em;
	color: var(--wbm-grau);
	line-height: 1.5;
}

/* ============================================================
   Formulare
   ============================================================ */

.wbm-form p { margin: 0 0 1.1em; }

.wbm-form label {
	display: block;
	font-weight: 600;
	margin-bottom: .35em;
	line-height: 1.35;
}

.wbm-form small {
	display: block;
	font-weight: 400;
	font-size: .86em;
	color: var(--wbm-grau);
	margin-top: .35em;
	line-height: 1.45;
}

.wbm-form input[type="text"],
.wbm-form input[type="email"],
.wbm-form input[type="url"],
.wbm-form input[type="number"],
.wbm-form input[type="date"],
.wbm-form select,
.wbm-form textarea {
	width: 100%;
	padding: .68em .85em;
	box-sizing: border-box;
	border: 1px solid var(--wbm-linie);
	border-radius: var(--wbm-radius-s);
	background: var(--wbm-weiss);
	color: inherit;
	font: inherit;
	line-height: 1.4;
	transition: border-color var(--wbm-dauer) var(--wbm-kurve),
	            box-shadow var(--wbm-dauer) var(--wbm-kurve);
}

.wbm-form textarea { min-height: 6em; resize: vertical; }

.wbm-form input:hover,
.wbm-form select:hover,
.wbm-form textarea:hover { border-color: #C9C3BA; }

.wbm-form input:focus,
.wbm-form select:focus,
.wbm-form textarea:focus {
	outline: none;
	border-color: var(--wbm-rot);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wbm-rot) 18%, transparent);
}

/* Pflichtfelder erkennbar machen, ohne zu schreien */
.wbm-form .wbm-pflicht { color: var(--wbm-rot); font-weight: 700; }

/* ---- Gruppen im Eingabeformular ---- */

.wbm-gruppe {
	border: 1px solid var(--wbm-linie);
	border-radius: var(--wbm-radius);
	padding: 1.2em 1.4em .4em;
	margin: 0 0 1.4em;
	background: var(--wbm-weiss);
}

.wbm-gruppe > legend {
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wbm-grau);
	padding: 0 .5em;
	margin-left: -.5em;
}

.wbm-zeile-zwei {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1em;
}

@media (max-width: 560px) {
	.wbm-zeile-zwei { grid-template-columns: 1fr; }
}

/* ---- Knöpfe ---- */

.wbm-form button {
	font: inherit;
	font-weight: 700;
	padding: .8em 1.7em;
	border: 0;
	border-radius: 999px;
	background: var(--wbm-rot);
	color: var(--wbm-weiss);
	cursor: pointer;
	line-height: 1.2;
	transition: transform var(--wbm-dauer) var(--wbm-kurve),
	            box-shadow var(--wbm-dauer) var(--wbm-kurve),
	            background-color var(--wbm-dauer) var(--wbm-kurve);
}

.wbm-form button:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px color-mix(in srgb, var(--wbm-rot) 32%, transparent);
}

.wbm-form button:active { transform: translateY(0); }

.wbm-form button[disabled] {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.wbm-form button.wbm-loeschen {
	background: none;
	color: var(--wbm-fehler);
	padding: .3em .5em;
	font-size: .86em;
	font-weight: 600;
	text-decoration: underline;
	border-radius: 6px;
}

.wbm-form button.wbm-loeschen:hover { transform: none; box-shadow: none; background: var(--wbm-fehler-hell); }

/* Tastaturbedienung sichtbar machen – gilt überall im Plugin */
.wbm-form a:focus-visible,
.wbm-form button:focus-visible,
.wbm-form summary:focus-visible,
.wbm-form input:focus-visible,
.wbm-form select:focus-visible,
.wbm-form textarea:focus-visible {
	outline: 3px solid var(--wbm-rot);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Honigtopf gegen Formular-Bots: für Menschen unsichtbar */
.wbm-hp-wrap {
	position: absolute;
	left: -9999px;
	top: -9999px;
	height: 0;
	width: 0;
	overflow: hidden;
}

/* ============================================================
   Kategorie-Auswahl (Schritt 1)
   ============================================================ */

.wbm-frage { font-size: 1.15rem; margin-bottom: .2em; }

.wbm-kategorie-karten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 14px;
	margin: 1em 0 1.6em;
}

.wbm-kategorie-karte {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	border: 2px solid var(--wbm-linie);
	border-radius: var(--wbm-radius);
	padding: 1.1em 1.2em;
	cursor: pointer;
	font-weight: 400;
	background: var(--wbm-weiss);
	transition: border-color var(--wbm-dauer) var(--wbm-kurve),
	            background-color var(--wbm-dauer) var(--wbm-kurve),
	            transform var(--wbm-dauer) var(--wbm-kurve);
}

.wbm-kategorie-karte:hover { transform: translateY(-2px); border-color: #C9C3BA; }

.wbm-kategorie-karte.wbm-gewaehlt {
	border-color: var(--wbm-rot);
	background: color-mix(in srgb, var(--wbm-rot) 5%, var(--wbm-weiss));
}

.wbm-kategorie-karte input { flex: none; width: auto; margin-top: .25em; accent-color: var(--wbm-rot); }
.wbm-kategorie-titel { display: block; font-weight: 700; margin-bottom: .25em; line-height: 1.3; }
.wbm-kategorie-text  { display: block; font-size: .9em; color: var(--wbm-grau); line-height: 1.45; }

/* ============================================================
   Die Türchen (Schritt 2)
   ============================================================ */

.wbm-zurueck { margin: 0 0 .8em; font-size: .93em; }

.wbm-kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .6em;
	margin: 0 0 .3em;
}

.wbm-kopf h4 { margin: 0; font-size: 1.25rem; }
.wbm-verbleibend { font-size: .92em; color: var(--wbm-grau); }

.wbm-tuerchen {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
	gap: 16px;
	margin: 1.3em 0 0;

	/*
	 * Ohne diese Zeile zieht ein geöffnetes Türchen alle anderen in seiner
	 * Reihe auf dieselbe Höhe – die stehen dann als lange leere Farbflächen
	 * daneben. Raster strecken ihre Felder standardmäßig auf Zeilenhöhe.
	 * Jedes Türchen soll aber nur so hoch sein, wie es Inhalt hat.
	 */
	align-items: start;
}

.wbm-tuer {
	border-radius: var(--wbm-radius);
	overflow: hidden;
	background: var(--wbm-tuer, var(--wbm-tuer-1));
	color: var(--wbm-weiss);
	box-shadow: var(--wbm-schatten);

	/* Jedes Türchen hängt eine Spur schief – wie von Hand aufgeklebt. */
	transform: rotate(var(--wbm-neigung, 0deg));
	transform-origin: 50% 8%;

	transition: transform .34s var(--wbm-feder),
	            box-shadow .34s var(--wbm-kurve);

	/* Gestaffeltes Auftauchen beim Laden */
	animation: wbm-auftauchen .55s var(--wbm-kurve) backwards;
	animation-delay: calc(var(--wbm-i, 0) * 45ms);
}

@keyframes wbm-auftauchen {
	from { opacity: 0; transform: translateY(18px) scale(.94) rotate(var(--wbm-neigung, 0deg)); }
	to   { opacity: 1; transform: translateY(0) scale(1) rotate(var(--wbm-neigung, 0deg)); }
}

/* Beim Überfahren richtet sich das Türchen auf und hebt sich an. */
.wbm-tuer:hover,
.wbm-tuer:focus-within {
	transform: rotate(0deg) translateY(-6px) scale(1.025);
	box-shadow: var(--wbm-schatten-hoch);
	z-index: 2;
}

.wbm-tuer[open] { transform: rotate(0deg); }

.wbm-tuer--1 { --wbm-tuer: var(--wbm-tuer-1); }
.wbm-tuer--2 { --wbm-tuer: var(--wbm-tuer-2); }
.wbm-tuer--3 { --wbm-tuer: var(--wbm-tuer-3); }
.wbm-tuer--4 { --wbm-tuer: var(--wbm-tuer-4); }

/* Die Vorderseite: quadratisch, alles mittig, ein feiner Lichtschein */
.wbm-tuer-front {
	list-style: none;
	cursor: pointer;
	aspect-ratio: 1 / 1;
	position: relative;
	overflow: hidden;
	padding: 12px 12px 13px;

	/*
	 * Zwei Zeilen: oben das Geschenkpapier, unten der Anhänger.
	 *
	 * Vorher lagen beide über Prozentwerte auf derselben Fläche. Sobald ein
	 * Anhänger durch Alter und Betrag höher wurde, wuchs er nach oben unter
	 * die Schleife – genau der Fehler aus dem Bild. Mit zwei Rasterzeilen
	 * kann das nicht mehr passieren: Das Papier bekommt, was übrig bleibt,
	 * der Anhänger so viel, wie er braucht.
	 */
	display: grid;
	grid-template-rows: minmax(52px, 1fr) auto;
	gap: 8px;

	/* Nach dem Auspacken fällt die Papierzeile zusammen – aber erst, wenn
	   Schleife und Bänder weg sind. Sonst springt das Bild mittendrin. */
	transition: grid-template-rows .35s var(--wbm-kurve) .6s,
	            gap .35s var(--wbm-kurve) .6s;

	background-image: radial-gradient(circle at 50% 22%, rgba(255, 255, 255, .20) 0%, transparent 62%);
}

/* Die Hülle für Bänder, Schleife und Funken – die obere Rasterzeile. */
.wbm-papier {
	position: relative;
	display: block;
	min-height: 0;
}

/* Ein Lichtwisch, der beim Überfahren einmal über das Türchen streicht. */
.wbm-tuer-front::before {
	content: "";
	position: absolute;
	inset: -40% -60%;
	background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .28) 50%, transparent 58%);
	transform: translateX(-120%);
	transition: transform .7s var(--wbm-kurve);
	pointer-events: none;
	z-index: 4;
}

.wbm-tuer:hover .wbm-tuer-front::before,
.wbm-tuer:focus-within .wbm-tuer-front::before { transform: translateX(120%); }

.wbm-tuer-front::-webkit-details-marker { display: none; }
.wbm-tuer-front::marker { content: ""; }

/*
 * Der Geschenkanhänger. Er löst zwei Dinge auf einmal:
 *
 *   1. Er gibt Name, Alter und Wert eine eigene Fläche. Vorher schwebte
 *      die Schrift frei auf dem Papier und geriet unter die Schleife.
 *   2. Dunkle Schrift auf hellem Grund ist besser lesbar als weiße Schrift
 *      auf Farbe – besonders draußen am Handy.
 */
.wbm-tuer-schild {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: .5em .6em .6em;
	border-radius: 11px;
	background: #FDFBF7;
	color: var(--wbm-ant);
	box-shadow: 0 3px 9px rgba(0, 0, 0, .22);
	transform: rotate(-.8deg);
	transition: transform .3s var(--wbm-kurve), box-shadow .3s var(--wbm-kurve);
}

/* Die Lochung oben – der Anhänger hängt am Band. */
.wbm-tuer-schild::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 50%;
	width: 9px;
	height: 9px;
	margin-left: -4.5px;
	border-radius: 50%;
	background: var(--wbm-tuer);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}

.wbm-tuer:hover .wbm-tuer-schild,
.wbm-tuer:focus-within .wbm-tuer-schild {
	transform: rotate(0deg) translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .26);
}

.wbm-tuer[open] .wbm-tuer-schild { transform: rotate(0deg); }

.wbm-tuer-kind {
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.1;
	overflow-wrap: anywhere;
	hyphens: auto;
	color: var(--wbm-ant);
}

.wbm-tuer-alter {
	font-size: .88rem;
	color: var(--wbm-grau);
	line-height: 1.2;
}

/* Der Wert trägt die Farbe des Türchens – weiß auf Farbe, geprüft auf
   mindestens 4,6:1 Kontrast. */
.wbm-tuer-wert {
	font-size: .9rem;
	font-weight: 700;
	margin-top: .3em;
	padding: .16em .75em;
	border-radius: 999px;
	background: var(--wbm-tuer);
	color: #FFFFFF;
}

.wbm-tuer-oeffnen {
	margin-top: .4em;
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wbm-tuer);
	border: 1px solid color-mix(in srgb, var(--wbm-tuer) 45%, transparent);
	border-radius: 999px;
	padding: .26em .85em;
	transition: background-color var(--wbm-dauer) var(--wbm-kurve);
}

.wbm-tuer:hover .wbm-tuer-oeffnen,
.wbm-tuer:focus-within .wbm-tuer-oeffnen { background: color-mix(in srgb, var(--wbm-tuer) 12%, transparent); }

.wbm-tuer[open] .wbm-tuer-oeffnen { display: none; }
.wbm-tuer[open] .wbm-tuer-front {
	aspect-ratio: auto;
	padding: 13px;
	grid-template-rows: 0px auto;
	gap: 0;
}

/* Ein angekreuztes Türchen hebt sich deutlich ab */
/*
 * Ein ausgewähltes Türchen richtet sich gerade auf und bleibt so. Damit hebt
 * es sich auch dann ab, wenn man weiter unten weiterliest – und die kurze
 * Federbewegung endet nicht in einem Sprung zurück in die Schieflage.
 */
.wbm-tuer.wbm-tuer--gewaehlt {
	box-shadow: 0 0 0 3px var(--wbm-ok), var(--wbm-schatten-hoch);
	transform: rotate(0deg);
	animation: wbm-zugegriffen .42s var(--wbm-feder);
}

@keyframes wbm-zugegriffen {
	0%   { transform: rotate(0deg) scale(1); }
	45%  { transform: rotate(0deg) scale(1.06); }
	100% { transform: rotate(0deg) scale(1); }
}

.wbm-tuer-haken {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;   /* über Papier, Schleife und Lichtwisch – das Häkchen ist eine Information, kein Zierrat */
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--wbm-ok);
	color: #fff;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: .9rem;
	font-weight: 700;
}

.wbm-tuer--gewaehlt .wbm-tuer-haken {
	display: flex;
	animation: wbm-haken .38s var(--wbm-feder) backwards;
}

@keyframes wbm-haken {
	from { opacity: 0; transform: scale(.2) rotate(-40deg); }
	to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ============================================================
   DAS GESCHENK ÖFFNEN

   Der Ablauf, wenn jemand ein Türchen antippt – rund eine Sekunde,
   in der Reihenfolge, in der man ein Päckchen wirklich aufmacht:

     0,00 s  die Schleife zieht sich kurz zusammen (Anlauf)
     0,08 s  die Schlaufen kippen zur Seite weg und werden kleiner
     0,10 s  die Bandenden rutschen nach unten aus dem Bild
     0,22 s  die vier Bandstücke ziehen sich zu ihrem Rand zurück
     0,34 s  der Deckel kippt kurz nach hinten
     0,40 s  drei Funken blitzen auf
     0,46 s  der Inhalt klappt herunter

   Jedes Teil ist ein eigenes Element, weil jedes seinen eigenen Weg
   nimmt. Ein einzelnes Bild könnte das nicht.
   ============================================================ */

/* ---- Die vier Bandstücke ---- */

.wbm-band {
	position: absolute;
	background: rgba(0, 0, 0, .13);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
	pointer-events: none;
	z-index: 1;
	transition: transform .5s var(--wbm-kurve), opacity .4s linear;
}

/* senkrecht, oberhalb und unterhalb des Knotens */
/* senkrecht, über und unter dem Knoten – und über die Zone hinaus,
   damit das Band bis an den Rand des Türchens läuft */
.wbm-band--oben,
.wbm-band--unten { left: calc(50% - 11px); width: 22px; }
.wbm-band--oben  { top: -12px; height: calc(50% + 12px); }
.wbm-band--unten { top: 50%; bottom: -60px; }

/* waagerecht, links und rechts vom Knoten */
.wbm-band--links,
.wbm-band--rechts { top: calc(50% - 11px); height: 22px; }
.wbm-band--links  { left: -12px; width: calc(50% + 12px); }
.wbm-band--rechts { right: -12px; width: calc(50% + 12px); }

/* ---- Die Schleife ---- */

.wbm-schleife {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 74px;
	height: 56px;
	margin: -28px 0 0 -37px;
	z-index: 3;
	pointer-events: none;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .28));
}

.wbm-schleife svg { display: block; overflow: visible; }

.wbm-schleife path,
.wbm-schleife ellipse {
	fill: rgba(255, 255, 255, .94);
	stroke: rgba(0, 0, 0, .12);
	stroke-width: 1.5;
}

.wbm-knoten ellipse { fill: #FFFFFF; }

.wbm-schlaufe,
.wbm-bandende,
.wbm-knoten {
	transform-origin: 60px 46px;
	transition: transform .45s var(--wbm-kurve), opacity .35s linear;
}

/* Beim Überfahren wippt die Schleife – eine kleine Einladung. */
.wbm-tuer:not([open]):hover .wbm-schleife,
.wbm-tuer:not([open]):focus-within .wbm-schleife {
	animation: wbm-wippen 1.1s var(--wbm-kurve) infinite;
}

@keyframes wbm-wippen {
	0%, 100% { transform: rotate(0deg) scale(1); }
	30%      { transform: rotate(-4deg) scale(1.05); }
	65%      { transform: rotate(3deg) scale(1.03); }
}

/* ---- Und jetzt: aufmachen ---- */

.wbm-tuer[open] .wbm-schlaufe--links {
	animation: wbm-schlaufe-links .52s var(--wbm-kurve) .08s forwards;
}

.wbm-tuer[open] .wbm-schlaufe--rechts {
	animation: wbm-schlaufe-rechts .52s var(--wbm-kurve) .08s forwards;
}

@keyframes wbm-schlaufe-links {
	0%   { transform: none; opacity: 1; }
	18%  { transform: scale(.88) rotate(4deg); }
	100% { transform: translate(-46px, -14px) rotate(-52deg) scale(.45); opacity: 0; }
}

@keyframes wbm-schlaufe-rechts {
	0%   { transform: none; opacity: 1; }
	18%  { transform: scale(.88) rotate(-4deg); }
	100% { transform: translate(46px, -14px) rotate(52deg) scale(.45); opacity: 0; }
}

.wbm-tuer[open] .wbm-bandende--links {
	animation: wbm-ende-links .5s var(--wbm-kurve) .10s forwards;
}

.wbm-tuer[open] .wbm-bandende--rechts {
	animation: wbm-ende-rechts .5s var(--wbm-kurve) .10s forwards;
}

@keyframes wbm-ende-links {
	to { transform: translate(-16px, 40px) rotate(-26deg); opacity: 0; }
}

@keyframes wbm-ende-rechts {
	to { transform: translate(16px, 40px) rotate(26deg); opacity: 0; }
}

.wbm-tuer[open] .wbm-knoten {
	animation: wbm-knoten-weg .42s var(--wbm-kurve) .06s forwards;
}

@keyframes wbm-knoten-weg {
	0%   { transform: none; opacity: 1; }
	25%  { transform: scale(1.18); }
	100% { transform: scale(0) rotate(90deg); opacity: 0; }
}

/* Die Bänder ziehen sich zu ihrem jeweiligen Rand zurück. */
.wbm-tuer[open] .wbm-band { opacity: 0; transition-delay: .22s; }
.wbm-tuer[open] .wbm-band--oben   { transform: translateY(-105%); }
.wbm-tuer[open] .wbm-band--unten  { transform: translateY(105%); }
.wbm-tuer[open] .wbm-band--links  { transform: translateX(-105%); }
.wbm-tuer[open] .wbm-band--rechts { transform: translateX(105%); }

/* Der Deckel kippt einmal kurz nach hinten. */
.wbm-tuer[open] .wbm-tuer-front {
	animation: wbm-deckel .55s var(--wbm-kurve) .34s;
	transform-style: preserve-3d;
}

@keyframes wbm-deckel {
	0%   { transform: perspective(700px) rotateX(0deg); }
	40%  { transform: perspective(700px) rotateX(-7deg) translateY(-3px); }
	100% { transform: perspective(700px) rotateX(0deg); }
}

/* ---- Funken, wenn das Papier weg ist ---- */

.wbm-funken {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: transparent;
	opacity: 0;
	z-index: 3;
	pointer-events: none;
}

.wbm-tuer[open] .wbm-funken {
	animation: wbm-funken .6s var(--wbm-kurve) .40s;
}

@keyframes wbm-funken {
	0% {
		opacity: 0;
		box-shadow: 0 0 0 0 #fff, 0 0 0 0 #fff, 0 0 0 0 #fff;
	}
	30% {
		opacity: 1;
		box-shadow: -22px -14px 0 1px #fff, 20px -18px 0 0 #fff, 4px -26px 0 1px #fff;
	}
	100% {
		opacity: 0;
		box-shadow: -40px -30px 0 0 #fff, 38px -34px 0 -1px #fff, 8px -48px 0 0 #fff;
	}
}

/* Beim Zumachen ist alles sofort wieder da – kein Rückwärtsfilm. */
.wbm-tuer:not([open]) .wbm-schlaufe,
.wbm-tuer:not([open]) .wbm-bandende,
.wbm-tuer:not([open]) .wbm-knoten,
.wbm-tuer:not([open]) .wbm-band {
	animation: none;
	transform: none;
	opacity: 1;
	transition-delay: 0s;
}

/* Die Innenseite */
.wbm-tuer-innen {
	background: var(--wbm-weiss);
	color: var(--wbm-ant);
	padding: 1em 1.1em 1.1em;

	/* Klappt beim Öffnen von oben herunter, wie eine Tür nach innen. */
	transform-origin: top center;
	animation: wbm-aufklappen .4s var(--wbm-kurve) .46s backwards;
}

@keyframes wbm-aufklappen {
	from { opacity: 0; transform: translateY(-8px) scaleY(.85); }
	to   { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* Die Inhalte im Türchen kommen einen Hauch später nach. */
.wbm-tuer-innen > * { animation: wbm-innen-rein .4s var(--wbm-kurve) backwards; }
.wbm-tuer-innen > *:nth-child(1) { animation-delay: .54s; }
.wbm-tuer-innen > *:nth-child(2) { animation-delay: .60s; }
.wbm-tuer-innen > *:nth-child(3) { animation-delay: .66s; }
.wbm-tuer-innen > *:nth-child(n+4) { animation-delay: .72s; }

@keyframes wbm-innen-rein {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.wbm-tuer-code {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--wbm-grau);
	margin: 0 0 .45em;
}

.wbm-tuer-stichwort {
	display: inline-block;
	font-size: .76rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--wbm-tuer);
	background: color-mix(in srgb, var(--wbm-tuer) 12%, var(--wbm-weiss));
	border-radius: 999px;
	padding: .25em .8em;
	margin: 0 0 .6em;
}

.wbm-tuer-wunsch { margin: 0 0 .7em; line-height: 1.5; }
.wbm-tuer-link   { margin: 0 0 .8em; font-size: .9em; }

.wbm-tuer-waehlen {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 600;
	cursor: pointer;
	background: var(--wbm-flaeche);
	border: 1px solid var(--wbm-linie);
	border-radius: var(--wbm-radius-s);
	padding: .75em .9em;
	margin: 0;
	line-height: 1.35;
	transition: background-color var(--wbm-dauer) var(--wbm-kurve),
	            border-color var(--wbm-dauer) var(--wbm-kurve);
}

.wbm-tuer-waehlen input { flex: none; width: auto; margin-top: .15em; accent-color: var(--wbm-ok); }

.wbm-tuer-waehlen.wbm-gewaehlt {
	background: var(--wbm-ok-hell);
	border-color: var(--wbm-ok);
	color: #14622B;
}

/* ============================================================
   Abschluss: Zähler und Kontaktdaten
   ============================================================ */

.wbm-abschluss {
	border: 1px solid var(--wbm-linie);
	border-radius: var(--wbm-radius);
	padding: 1.3em 1.5em 1.5em;
	margin-top: 1.8em;
	background: var(--wbm-flaeche);
	max-width: 560px;
}

.wbm-zaehler {
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0 0 1em;
	padding-left: 1.7em;
	position: relative;
}

.wbm-zaehler::before {
	content: "○";
	position: absolute;
	left: 0;
	color: var(--wbm-grau);
}

.wbm-zaehler--aktiv { color: var(--wbm-ok); }

.wbm-zaehler--puls { animation: wbm-puls .4s var(--wbm-feder); }

@keyframes wbm-puls {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.07); }
	100% { transform: scale(1); }
}
.wbm-zaehler--aktiv::before { content: "✓"; color: var(--wbm-ok); }

.wbm-abschicken { width: 100%; }

/*
 * Solange etwas ausgewählt ist, atmet der Knopf ganz leicht. Das ist der
 * einzige Hinweis darauf, dass die Auswahl noch nicht abgeschickt wurde –
 * ohne ihn gehen Leute weg und glauben, sie hätten etwas übernommen.
 */
.wbm-abschicken:not([disabled]) { animation: wbm-atmen 2.6s ease-in-out infinite; }
.wbm-abschicken:not([disabled]):hover { animation: none; }

@keyframes wbm-atmen {
	0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wbm-rot) 34%, transparent); }
	50%      { box-shadow: 0 0 0 9px color-mix(in srgb, var(--wbm-rot) 0%, transparent); }
}

/*
 * Hier stand bis 1.8.0 eine Regel, die den Abschlusskasten beim Scrollen
 * am unteren Bildschirmrand kleben ließ. Der Gedanke war gut, das Ergebnis
 * nicht: Sobald jemand ein Türchen öffnete, lag der Kasten
 * über den Türchen – und die Türchen beim Überfahren wieder über dem Kasten,
 * weil sie im Hover ein z-index bekommen. Auf dem Bildschirm sah das aus wie
 * ein Fehler, und an einer Stelle, an der jemand gleich seine Adresse
 * eintippen soll, darf nichts nach Fehler aussehen.
 *
 * Der Abschluss steht jetzt einfach dort, wo er hingehört: unter den
 * Türchen. Der Zähler darin sagt weiterhin, wie viele gewählt sind.
 */
.wbm-abschluss { margin-top: 2em; }

/* ============================================================
   Liste der eingetragenen Wünsche (Trägerseite)
   ============================================================ */

.wbm-tabelle {
	width: 100%;
	border-collapse: collapse;
	margin-top: 1em;
	font-size: .95em;
}

.wbm-tabelle th,
.wbm-tabelle td {
	border-bottom: 1px solid var(--wbm-linie);
	padding: .7em .6em;
	text-align: left;
	vertical-align: top;
}

.wbm-tabelle thead th {
	font-size: .76rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wbm-grau);
	border-bottom-width: 2px;
}

.wbm-tabelle tbody tr:hover { background: var(--wbm-flaeche); }

.wbm-stand {
	display: inline-block;
	font-size: .8rem;
	font-weight: 700;
	border-radius: 999px;
	padding: .25em .8em;
	white-space: nowrap;
}

.wbm-stand--pruefung  { background: #FFF3D6; color: #8A5B00; }
.wbm-stand--frei      { background: var(--wbm-ok-hell); color: #14622B; }
.wbm-stand--vergeben  { background: #E7EEF6; color: #274C72; }
.wbm-stand--abgelehnt { background: var(--wbm-fehler-hell); color: #8E2222; }

/* Auf schmalen Geräten wird aus jeder Zeile eine kleine Karte */
@media (max-width: 620px) {
	.wbm-tabelle thead { display: none; }

	.wbm-tabelle,
	.wbm-tabelle tbody,
	.wbm-tabelle tr,
	.wbm-tabelle td { display: block; width: 100%; }

	.wbm-tabelle tr {
		border: 1px solid var(--wbm-linie);
		border-radius: var(--wbm-radius-s);
		margin-bottom: .8em;
		padding: .5em .8em;
		background: var(--wbm-weiss);
	}

	.wbm-tabelle td { border: 0; padding: .3em 0; }

	.wbm-tabelle td[data-spalte]::before {
		content: attr(data-spalte) ": ";
		font-weight: 700;
		color: var(--wbm-grau);
	}
}

/* ============================================================
   Leerer Zustand
   ============================================================ */

.wbm-leer {
	text-align: center;
	padding: 2.6em 1.5em;
	border: 2px dashed var(--wbm-linie);
	border-radius: var(--wbm-radius);
	color: var(--wbm-grau);
	background: var(--wbm-flaeche);
}

.wbm-leer strong { display: block; color: var(--wbm-ant); font-size: 1.05rem; margin-bottom: .3em; }

/* ============================================================
   Wer Bewegung abbestellt hat, bekommt keine
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.wbm-form *,
	.wbm-form *::before,
	.wbm-form *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}

	.wbm-tuer,
	.wbm-tuer-innen,
	.wbm-tuer-innen > *,
	.wbm-erfolg,
	.wbm-fehler,
	.wbm-tuer-haken,
	.wbm-abschicken:not([disabled]) { animation: none !important; }

	.wbm-tuer { transform: none; }

	.wbm-tuer:hover,
	.wbm-tuer:focus-within,
	.wbm-kategorie-karte:hover,
	.wbm-form button:hover { transform: none; }

	.wbm-tuer-front::before { display: none; }
	.wbm-tuer-front { transition: none !important; }

	/* Kein Aufreißen: Das Papier verschwindet beim Öffnen einfach. */
	.wbm-schleife,
	.wbm-band,
	.wbm-funken { transition: none !important; }

	.wbm-tuer[open] .wbm-schleife,
	.wbm-tuer[open] .wbm-band,
	.wbm-tuer[open] .wbm-funken { display: none; }

	.wbm-tuer:not([open]):hover .wbm-schleife,
	.wbm-tuer:not([open]):focus-within .wbm-schleife { animation: none; }
}

/* ============================================================
   Schmale Geräte
   ============================================================ */

@media (max-width: 520px) {
	.wbm-tuerchen { grid-template-columns: repeat(2, 1fr); gap: 11px; }
	.wbm-tuer-kind { font-size: 1.05rem; }
	.wbm-tuer-schild { padding: .5em .5em .6em; }
	.wbm-tuer-front { padding: 12px 8px; }
	.wbm-tuer-wert { font-size: .95rem; }
	.wbm-tuer-oeffnen { font-size: .68rem; padding: .25em .7em; }
	.wbm-abschluss { padding: 1.1em 1.1em 1.2em; }
}

/* ============================================================
   Absageseite

   Eine Absage ist ein unangenehmer Moment. Die Seite soll deshalb
   ruhig wirken und nicht nach Formular aussehen: viel Luft, große
   Klickflächen, keine Warnfarben. Wer hier landet, tut etwas
   Richtiges – er sagt rechtzeitig Bescheid.
   ============================================================ */

.wbm-storno h2 {
	margin-top: 0;
}

.wbm-storno-liste {
	list-style: none;
	margin: 22px 0;
	padding: 0;
}

.wbm-storno-liste li + li {
	margin-top: 10px;
}

.wbm-storno-liste label {
	display: flex;
	gap: 12px;
	align-items: flex-start;

	/* Mindestens 44px hoch – eine Fläche, die auch mit dem Daumen
	   sicher zu treffen ist. */
	min-height: 44px;
	padding: 12px 14px;

	border: 1px solid var(--wbm-linie);
	border-radius: var(--wbm-radius-s);
	background: var(--wbm-weiss);
	cursor: pointer;
	transition: border-color var(--wbm-dauer) var(--wbm-kurve),
	            background var(--wbm-dauer) var(--wbm-kurve);
}

.wbm-storno-liste label:hover,
.wbm-storno-liste label:focus-within {
	border-color: var(--wbm-rot);
	background: var(--wbm-flaeche);
}

.wbm-storno-liste input[type="checkbox"] {
	margin-top: 3px;
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
}

.wbm-storno-liste strong {
	font-variant-numeric: tabular-nums;
	margin-right: 6px;
}

.wbm-storno-fertig {
	display: block;
	padding: 12px 14px;
	border-radius: var(--wbm-radius-s);
	background: var(--wbm-ok-hell);
	color: var(--wbm-ok);
}

.wbm-knopf-zurueckgeben {
	min-height: 48px;
}

.wbm-storno .wbm-klein {
	margin-top: 18px;
	font-size: .92em;
	color: var(--wbm-grau);
}


/* ============================================================
   Türchen ohne Kindernamen (ab 1.6.0)

   Beschluss des Vereins vom 25.09.2026: Am Wunschbaum stehen nur
   Geschlecht und Alter. Wo vorher ein Vorname stand, steht jetzt
   „Mädchen" oder „Junge" – kürzer und gleichförmiger, deshalb
   etwas ruhiger gesetzt.
   ============================================================ */

.wbm-tuer-kind {
  letter-spacing: .01em;
}

/* Knopf „Wunsch ansehen" – der Produktlink, bevor man sich
   entscheidet. Vorher war das ein Textlink, den man übersah. */
/*
 * Ein Türchen ist rund 195px breit. Der Knopf war vorher ein großer
 * Rundknopf mit 18px Innenabstand – der passte nicht in eine Zeile und
 * brach in zwei um ("Wunsch / ansehen"). Zwei Zeilen in einem umrandeten
 * Oval sehen aus wie ein Unfall, nicht wie ein Angebot.
 *
 * Jetzt: eine ruhige Fläche über die volle Breite des Türchens, eine
 * Zeile, mittig. Immer noch 44px hoch, damit der Daumen ihn trifft.
 */
.wbm-knopf-ansehen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;

  min-height: 44px;
  padding: 8px 12px;
  box-sizing: border-box;

  background: var(--wbm-flaeche);
  border: 1px solid var(--wbm-linie);
  border-radius: var(--wbm-radius-s);

  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--wbm-ant);
  text-decoration: none;

  transition: background-color var(--wbm-dauer) var(--wbm-kurve),
              border-color var(--wbm-dauer) var(--wbm-kurve);
}

.wbm-knopf-ansehen:hover,
.wbm-knopf-ansehen:focus-visible {
  background: var(--wbm-weiss);
  border-color: var(--wbm-ant);
  text-decoration: none;
}

.wbm-extern {
  font-size: .85em;
  opacity: .7;
}

/* Nur für Screenreader – erklärt, dass sich ein neues Fenster
   öffnet. Sehende erkennen das am Pfeil. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Wohngruppen (Eingabeseite der Einrichtungen)

   Eine Einrichtung kann mehrere Wohngruppen führen. Die Leiste
   zeigt, in welcher Gruppe man gerade ist – das ist die einzige
   Stelle, an der sich das ablesen lässt, und deshalb steht sie
   oben und ist deutlich markiert. Wer nur eine Gruppe hat, sieht
   keine Leiste, sondern nur den Knopf zum Anlegen.
   ============================================================ */

.wbm-wgs {
	margin: 0 0 1.6em;
}

.wbm-wg-leiste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: .9em;
}

.wbm-wg {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;

	padding: 9px 14px;
	min-height: 44px;
	box-sizing: border-box;
	align-items: center;

	background: var(--wbm-flaeche);
	border: 1px solid var(--wbm-linie);
	border-radius: 999px;

	font-size: .92rem;
	font-weight: 600;
	color: var(--wbm-ant);
	text-decoration: none;

	transition: background-color var(--wbm-dauer) var(--wbm-kurve),
	            border-color var(--wbm-dauer) var(--wbm-kurve);
}

.wbm-wg:hover,
.wbm-wg:focus-visible {
	border-color: var(--wbm-ant);
	text-decoration: none;
}

/*
 * Die aktive Gruppe wird nicht nur farbig markiert, sondern trägt
 * zusätzlich aria-current. Farbe allein hilft niemandem, der die
 * Seite vorgelesen bekommt.
 */
.wbm-wg--aktiv {
	background: var(--wbm-rot);
	border-color: var(--wbm-rot);
	color: var(--wbm-weiss);
}

.wbm-wg--aktiv:hover,
.wbm-wg--aktiv:focus-visible {
	border-color: var(--wbm-rot);
	color: var(--wbm-weiss);
}

/* Die Trägernummer ist die eigentliche Auskunft – sie steht später
   in jedem Wunschcode. Deshalb sichtbar, aber ruhiger als der Name. */
.wbm-wg-nr {
	font-variant-numeric: tabular-nums;
	font-size: .82em;
	opacity: .72;
}

.wbm-wg-neu {
	border: 1px dashed var(--wbm-linie);
	border-radius: var(--wbm-radius-s);
	padding: .5em .9em;
	background: transparent;
}

.wbm-wg-neu > summary {
	cursor: pointer;
	font-weight: 600;
	font-size: .92rem;
	color: var(--wbm-rot);
	padding: .45em 0;
	list-style: none;
}

.wbm-wg-neu > summary::-webkit-details-marker { display: none; }
.wbm-wg-neu > summary::marker { content: ""; }

.wbm-wg-neu[open] {
	border-style: solid;
	background: var(--wbm-flaeche);
	padding-bottom: 1em;
}

.wbm-wg-neu form { margin-top: .4em; }

/* Das Angebot, Wohngruppen getrennt zu führen – steht unter dem
   Formular und soll dort nicht um Aufmerksamkeit kämpfen. */
/*
 * Der Hinweis auf die Wohngruppen.
 *
 * Er stand erst unten, dann oben – und wurde beide Male übersehen, weil er
 * aussah wie Kleingedrucktes. Jetzt ist er eine eigene Fläche mit Rahmen in
 * der Hausfarbe: erkennbar als etwas, das man anklicken kann, aber ohne
 * Ausrufezeichen. Er ist ein Angebot, keine Warnung.
 */
.wbm-wg-angebot {
	margin: 0 0 1.8em;
	border: 1px solid color-mix(in srgb, var(--wbm-rot) 28%, var(--wbm-linie));
	border-left: 4px solid var(--wbm-rot);
	border-radius: var(--wbm-radius-s);
	background: var(--wbm-flaeche);
}

.wbm-wg-angebot > details > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;

	/* 44px hoch, damit die Zeile auch am Handy sicher zu treffen ist. */
	min-height: 44px;
	padding: .75em 1.1em;

	font-size: 1rem;
	font-weight: 700;
	color: var(--wbm-rot);
}

.wbm-wg-angebot > details > summary::-webkit-details-marker { display: none; }
.wbm-wg-angebot > details > summary::marker { content: ""; }

/* Ein Pluszeichen, das sich beim Aufklappen zum Minus dreht – zeigt, dass
   sich hier etwas öffnet, ohne ein Wort dafür zu brauchen. */
.wbm-wg-angebot > details > summary::before {
	content: "+";
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wbm-rot);
	color: var(--wbm-weiss);
	font-size: 1rem;
	line-height: 1;
	transition: transform var(--wbm-dauer) var(--wbm-kurve);
}

.wbm-wg-angebot > details[open] > summary::before {
	content: "–";
	transform: rotate(180deg);
}

.wbm-wg-angebot > details > summary:hover { text-decoration: underline; }

.wbm-wg-angebot > details > *:not(summary) {
	padding-left: 1.1em;
	padding-right: 1.1em;
}

.wbm-wg-angebot > details > *:last-child { padding-bottom: 1.1em; }

.wbm-wg-angebot p { max-width: 62ch; }

/* Die einmalige Frage nach den Wohngruppen: zwei Knöpfe untereinander,
   der zweite ruhiger. Beide sind gleichwertige Antworten – der erste ist
   nur die häufigere, nicht die bessere. */
.wbm-gruppenfrage p { margin: 0 0 .7em; }

.wbm-form button.wbm-knopf-still {
	background: var(--wbm-weiss);
	color: var(--wbm-ant);
	border: 1.5px solid var(--wbm-linie);
}

.wbm-form button.wbm-knopf-still:hover {
	border-color: var(--wbm-ant);
	box-shadow: var(--wbm-schatten);
}

/* Hinweis unter dem Eingabeformular: Herzensprojekte gehen per Mail an den
   Verein. Ruhig gesetzt – er richtet sich an die wenigen, die ihn brauchen. */
.wbm-herzensprojekt-hinweis {
	margin: 1.4em 0 0;
	padding: .9em 1.1em;
	border-left: 3px solid var(--wbm-rot);
	background: var(--wbm-flaeche);
	border-radius: 0 var(--wbm-radius-s) var(--wbm-radius-s) 0;
	font-size: .95em;
	line-height: 1.5;
}

.wbm-herzensprojekt-hinweis a {
	font-weight: 700;
	color: var(--wbm-rot);
	white-space: nowrap;
}