/*
 * e-vendo Bausteine — Grund-CSS.
 *
 * Gestaltungsneutral: kein Farbwert, keine Schriftfamilie, keine feste Pixelgröße.
 * Alles kommt über Rollen-Variablen aus dem aktiven Theme (docs/23a-token-vertrag.md).
 * tests/test-css.php erzwingt das.
 */

/* --- Textformate --- */
.evendo-zweiton { color: var(--wp--preset--color--schrift-zweiton); }
.has-flaeche-akzent-background-color .evendo-zweiton { color: var(--wp--preset--color--schrift-zweiton-auf-akzent); }
.evendo-akzent { font-family: var(--wp--preset--font-family--akzent); font-style: italic; font-weight: 400; }

/* --- Fokus: Doppelrahmen, eine der beiden Farben erreicht auf jeder Fläche 3 : 1 --- */
:where(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--fokus);
	outline-offset: 2px;
	box-shadow: 0 0 0 0.25rem var(--wp--preset--color--fokus-kontur);
}

/* --- Blockstile. Endzustand ist der sichtbare; ohne Unterstützung steht er sofort da. --- */
@supports (animation-timeline: view()) {
	.is-style-fuellt-sich { animation: evendo-fuellen linear both; animation-timeline: view(); animation-range: entry 15% cover 45%; }
	@keyframes evendo-fuellen { from { color: var(--wp--preset--color--schrift-zweiton); } to { color: var(--wp--preset--color--schrift); } }
	.is-style-enthuellt img { animation: evendo-enthuellen linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
	@keyframes evendo-enthuellen { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
	.is-style-fliegt-ein { animation: evendo-einfliegen linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
	/* Nur Weg, keine Deckkraft: Ein blasser Anfangszustand unterhalb des Sichtbereichs wäre für
	   Kontrastprüfungen (und für Lesende mit gestoppter Animation) ein Kontrastfehler. */
	@keyframes evendo-einfliegen { from { translate: 0 3rem; } to { translate: 0 0; } }
}
.is-style-streifen { position: relative; }
.is-style-streifen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(90deg, var(--wp--preset--color--flaeche-akzent) 0 8%, transparent 8%) 0 0 / 12.5% 100% repeat-x; }

/* --- Bewegung reduzieren / Bewegung anhalten --- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}
[data-bewegung="aus"] *, [data-bewegung="aus"] *::before, [data-bewegung="aus"] *::after {
	animation-play-state: paused !important; transition: none !important;
}
/*
 * Die Scroll-Blockstile nicht anhalten, sondern abschalten: Eine angehaltene
 * Scroll-Animation bliebe bei Elementen, die noch nicht im Bild waren, im Anfangszustand
 * stehen — Bild verdeckt, Gruppe blass. Ohne Animation gilt der sichtbare Endzustand.
 */
[data-bewegung="aus"] .is-style-fuellt-sich,
[data-bewegung="aus"] .is-style-enthuellt img,
[data-bewegung="aus"] .is-style-fliegt-ein { animation: none !important; }

/* --- Kennzahl --- */
.evendo-kennzahl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4em; }
.evendo-kennzahl__wert { font-size: var(--wp--preset--font-size--h-2); font-weight: 500; letter-spacing: -0.05em; }
.evendo-kennzahl__quelle { flex-basis: 100%; font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--schrift-leise); }
.evendo-demo { display: inline-block; background: var(--wp--preset--color--hinweis); color: var(--wp--preset--color--schrift);
	font-size: var(--wp--preset--font-size--klein); padding: 0 0.5em; border-radius: var(--wp--custom--radius--rund); }

/* --- Lösungskachel: ganze Fläche ein Link (Titel-Link mit ::after über die Fläche) --- */
.evendo-kachel { position: relative; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--s); border: 1px solid var(--wp--preset--color--schrift);
	border-radius: var(--wp--custom--radius--gross); background: var(--wp--preset--color--flaeche);
	color: var(--wp--preset--color--schrift); transition: background var(--wp--custom--bewegung--mittel), color var(--wp--custom--bewegung--mittel), translate var(--wp--custom--bewegung--mittel); }
.evendo-kachel__medium { border-radius: var(--wp--custom--radius--mittel); overflow: hidden; aspect-ratio: 16 / 7; }
.evendo-kachel__bild { width: 100%; height: 100%; object-fit: cover; display: block; }
.evendo-kachel__nummer { font-size: var(--wp--preset--font-size--klein); text-transform: uppercase; letter-spacing: 0.08em; }
.evendo-kachel__titel { margin: 0; font-size: var(--wp--preset--font-size--h-3); color: inherit; }
.evendo-kachel__link { color: inherit; text-decoration: none; }
.evendo-kachel__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.evendo-kachel__pfeil { position: absolute; top: var(--wp--preset--spacing--s); right: var(--wp--preset--spacing--s);
	width: 3.25rem; height: 3.25rem; border-radius: var(--wp--custom--radius--rund); display: grid; place-items: center;
	background: var(--wp--preset--color--akzent); color: var(--wp--preset--color--schrift-auf-akzent);
	transition: rotate var(--wp--custom--bewegung--mittel); pointer-events: none; }
.evendo-kachel:hover, .evendo-kachel:focus-within { background: var(--wp--preset--color--flaeche-tief); color: var(--wp--preset--color--schrift-auf-tief); translate: 0 -0.25rem; }
.evendo-kachel:hover .evendo-kachel__pfeil, .evendo-kachel:focus-within .evendo-kachel__pfeil { background: var(--wp--preset--color--flaeche-akzent); color: var(--wp--preset--color--schrift); rotate: -45deg; }
.evendo-kachel:focus-within { outline: 2px solid var(--wp--preset--color--fokus); outline-offset: 0.25rem; box-shadow: 0 0 0 0.375rem var(--wp--preset--color--fokus-kontur); }
.evendo-kachel__link:focus-visible { outline: none; box-shadow: none; }

/* --- Diashow --- */
.evendo-diashow { position: relative; height: 100%; min-height: 7rem; overflow: hidden; border-radius: inherit; }
.evendo-diashow__folie { position: absolute; inset: 0; margin: 0; }
.evendo-diashow:not(.is-wechselnd) .evendo-diashow__folie { position: relative; height: 100%; }
.evendo-diashow__bild { width: 100%; height: 100%; object-fit: cover; display: block; }
.evendo-diashow__etikett { position: absolute; left: var(--wp--preset--spacing--xs); bottom: var(--wp--preset--spacing--xs);
	background: var(--wp--preset--color--flaeche); color: var(--wp--preset--color--schrift);
	font-size: var(--wp--preset--font-size--klein); padding: 0.25em 0.75em; border-radius: var(--wp--custom--radius--rund); }
.evendo-diashow.is-wechselnd .evendo-diashow__folie { opacity: 0; animation: evendo-dia-4 var(--evendo-dia-dauer) infinite;
	animation-delay: calc(var(--evendo-dia-index) * var(--evendo-dia-dauer) / var(--evendo-dia-anzahl) - 1s); }
.evendo-diashow.is-wechselnd .evendo-diashow__folie:first-child { opacity: 1; }
/*
 * Je Anzahl eine Keyframe-Regel: Jede Folie ist 100/N Prozent des Umlaufs sichtbar und blendet
 * in die nächste über. Feste Anteile passten nur zu einer Anzahl — bei weniger Bildern stünde
 * die Fläche zwischendurch leer. (Erzeugt, nicht von Hand gepflegt; Höchstzahl 12 wie in
 * inc/ausgabe/diashow.php.)
 */
.evendo-diashow.is-wechselnd.is-anzahl-2 .evendo-diashow__folie { animation-name: evendo-dia-2; }
@keyframes evendo-dia-2 { 0% { opacity: 0; } 5% { opacity: 1; } 50% { opacity: 1; } 55% { opacity: 0; } 100% { opacity: 0; } }
.evendo-diashow.is-wechselnd.is-anzahl-3 .evendo-diashow__folie { animation-name: evendo-dia-3; }
@keyframes evendo-dia-3 { 0% { opacity: 0; } 5% { opacity: 1; } 33.33% { opacity: 1; } 38.33% { opacity: 0; } 100% { opacity: 0; } }
.evendo-diashow.is-wechselnd.is-anzahl-4 .evendo-diashow__folie { animation-name: evendo-dia-4; }
@keyframes evendo-dia-4 { 0% { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } }
.evendo-diashow.is-wechselnd.is-anzahl-5 .evendo-diashow__folie { animation-name: evendo-dia-5; }
@keyframes evendo-dia-5 { 0% { opacity: 0; } 5% { opacity: 1; } 20% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
.evendo-diashow.is-wechselnd.is-anzahl-6 .evendo-diashow__folie { animation-name: evendo-dia-6; }
@keyframes evendo-dia-6 { 0% { opacity: 0; } 4.17% { opacity: 1; } 16.67% { opacity: 1; } 20.83% { opacity: 0; } 100% { opacity: 0; } }
.evendo-diashow.is-wechselnd.is-anzahl-7 .evendo-diashow__folie { animation-name: evendo-dia-7; }
@keyframes evendo-dia-7 { 0% { opacity: 0; } 3.57% { opacity: 1; } 14.29% { opacity: 1; } 17.86% { opacity: 0; } 100% { opacity: 0; } }
.evendo-diashow.is-wechselnd.is-anzahl-8 .evendo-diashow__folie { animation-name: evendo-dia-8; }
@keyframes evendo-dia-8 { 0% { opacity: 0; } 3.12% { opacity: 1; } 12.5% { opacity: 1; } 15.62% { opacity: 0; } 100% { opacity: 0; } }
.evendo-diashow.is-wechselnd.is-anzahl-9 .evendo-diashow__folie { animation-name: evendo-dia-9; }
@keyframes evendo-dia-9 { 0% { opacity: 0; } 2.78% { opacity: 1; } 11.11% { opacity: 1; } 13.89% { opacity: 0; } 100% { opacity: 0; } }
.evendo-diashow.is-wechselnd.is-anzahl-10 .evendo-diashow__folie { animation-name: evendo-dia-10; }
@keyframes evendo-dia-10 { 0% { opacity: 0; } 2.5% { opacity: 1; } 10% { opacity: 1; } 12.5% { opacity: 0; } 100% { opacity: 0; } }
.evendo-diashow.is-wechselnd.is-anzahl-11 .evendo-diashow__folie { animation-name: evendo-dia-11; }
@keyframes evendo-dia-11 { 0% { opacity: 0; } 2.27% { opacity: 1; } 9.09% { opacity: 1; } 11.36% { opacity: 0; } 100% { opacity: 0; } }
.evendo-diashow.is-wechselnd.is-anzahl-12 .evendo-diashow__folie { animation-name: evendo-dia-12; }
@keyframes evendo-dia-12 { 0% { opacity: 0; } 2.08% { opacity: 1; } 8.33% { opacity: 1; } 10.42% { opacity: 0; } 100% { opacity: 0; } }
.evendo-diashow.is-angehalten .evendo-diashow__folie { animation-play-state: paused; }
.evendo-diashow__pause { position: absolute; right: var(--wp--preset--spacing--xs); bottom: var(--wp--preset--spacing--xs); z-index: 2;
	min-height: 1.5rem; min-width: 1.5rem; padding: 0.25em 0.75em; border: 0; border-radius: var(--wp--custom--radius--rund);
	background: var(--wp--preset--color--flaeche-tief); color: var(--wp--preset--color--schrift-auf-tief); font: inherit;
	font-size: var(--wp--preset--font-size--klein); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .evendo-diashow.is-wechselnd .evendo-diashow__folie:not(:first-child) { display: none; } }
/* Angehalten wird auf der ersten Folie, nicht mitten in einer Überblendung (dort wäre sie womöglich unsichtbar). */
[data-bewegung="aus"] .evendo-diashow.is-wechselnd .evendo-diashow__folie:not(:first-child) { display: none; }
[data-bewegung="aus"] .evendo-diashow.is-wechselnd .evendo-diashow__folie:first-child { opacity: 1; animation: none !important; }

/* --- Verbundenes Paar --- */
.evendo-verbindung__titel { margin: 0; font-size: var(--wp--preset--font-size--gehoben); }
.evendo-verbindung__zeile { margin: 0 0 var(--wp--preset--spacing--s); font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--schrift-leise); }
.evendo-verbindung__paar { display: grid; grid-template-columns: 1fr 6rem 1fr; align-items: start; }
.evendo-verbindung__bild { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--wp--custom--radius--gross); display: block; margin-bottom: var(--wp--preset--spacing--xs); }
.evendo-verbindung__link { display: block; color: var(--wp--preset--color--schrift); font-size: var(--wp--preset--font-size--h-4); font-weight: 500; text-decoration: none; }
.evendo-verbindung__link:hover { text-decoration: underline; }
.evendo-verbindung__unterzeile { font-size: var(--wp--preset--font-size--klein); color: var(--wp--preset--color--schrift-leise); }
.evendo-verbindung__mitte { position: relative; align-self: stretch; }
.evendo-verbindung__band { position: absolute; left: 50%; top: 30%; translate: -50% 0; width: 10.5rem; height: 5.5rem; overflow: visible; max-width: none; }
.evendo-verbindung__linie { fill: none; stroke: var(--wp--preset--color--schrift); stroke-width: 3; stroke-dasharray: 8 8; animation: evendo-fliessen 1.4s linear infinite; }
.evendo-verbindung__punkt { fill: var(--wp--preset--color--flaeche-akzent); stroke: var(--wp--preset--color--schrift); stroke-width: 2; }
@keyframes evendo-fliessen { to { stroke-dashoffset: -32; } }
.evendo-verbindung__etikett { position: absolute; left: 50%; top: calc(30% + 5.5rem); translate: -50% 0; white-space: nowrap;
	background: var(--wp--preset--color--flaeche-akzent); color: var(--wp--preset--color--schrift); font-size: var(--wp--preset--font-size--klein);
	padding: 0.2em 0.7em; border-radius: var(--wp--custom--radius--rund); }
@media (max-width: 781px) { .evendo-verbindung__paar { grid-template-columns: 1fr; } .evendo-verbindung__mitte { min-height: 8rem; } }
/* Der Punkt läuft per SMIL, das weder prefers-reduced-motion noch CSS-Animationsregeln kennt —
   ohne JavaScript bliebe er sonst in Bewegung. Das Band steht auch ohne ihn. */
@media (prefers-reduced-motion: reduce) { .evendo-verbindung__punkt { display: none; } }
[data-bewegung="aus"] .evendo-verbindung__punkt { display: none; }

/* --- Referenzkarte. Das Bild liegt abgedunkelt auf flaeche-tief; den echten Kontrast prüft der a11y-Lauf. --- */
.evendo-referenz { position: relative; min-height: 26rem; display: flex; align-items: flex-end; gap: var(--wp--preset--spacing--s); padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--s) 0 var(--wp--preset--spacing--m); border-radius: var(--wp--custom--radius--gross); overflow: hidden; isolation: isolate;
	background: var(--wp--preset--color--flaeche-tief); color: var(--wp--preset--color--schrift-auf-tief); }
.evendo-referenz__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0.55;
	animation: evendo-zoom 18s ease-in-out infinite alternate; }
@keyframes evendo-zoom { from { scale: 1.02; } to { scale: 1.1; } }
/* Im Fluss statt absolut: Mit mehreren Kennzahlen wächst die Karte, statt oben Text abzuschneiden. */
.evendo-referenz__inhalt { flex: 1 1 58%; min-width: 0; padding-bottom: var(--wp--preset--spacing--m); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--xs); }
.evendo-referenz .evendo-kennzahl__wert { font-size: var(--wp--preset--font-size--h-3); }
.evendo-referenz__linie { font-size: var(--wp--preset--font-size--klein); text-transform: uppercase; letter-spacing: 0.08em; }
.evendo-referenz__name { margin: 0; font-size: var(--wp--preset--font-size--h-2); color: inherit; }
.evendo-referenz .evendo-kennzahl__quelle { color: inherit; }
.evendo-referenz__person { flex: 0 0 38%; display: flex; flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--xs); }
.evendo-referenz__schild { background: var(--wp--preset--color--flaeche); color: var(--wp--preset--color--schrift); border-radius: var(--wp--custom--radius--mittel);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s); display: flex; flex-direction: column; font-size: var(--wp--preset--font-size--klein); }
.evendo-figur { width: 100%; max-width: 14rem; }
.evendo-figur__koerper path { fill: var(--wp--preset--color--flaeche-akzent); }
.evendo-figur__kopf rect, .evendo-figur__kopf ellipse:not(.evendo-figur__augen ellipse) { fill: var(--wp--preset--color--flaeche); }
.evendo-figur__augen ellipse { fill: var(--wp--preset--color--schrift); }
.evendo-figur__mund { stroke: var(--wp--preset--color--schrift); stroke-width: 3.5; stroke-linecap: round; }
.evendo-figur__kopf { transform-origin: 50% 64%; animation: evendo-nicken 5s ease-in-out infinite; }
.evendo-figur__augen { transform-origin: 50% 38%; animation: evendo-blinzeln 4.5s infinite; }
@keyframes evendo-nicken { 0%, 100% { rotate: 0deg; } 30% { rotate: -3deg; } 60% { rotate: 2deg; } }
@keyframes evendo-blinzeln { 0%, 92%, 100% { scale: 1 1; } 95% { scale: 1 0.1; } }
/* Schmal (320 px, WCAG 1.4.10): Text und Figur untereinander statt nebeneinander, nichts wird abgeschnitten. */
@media (max-width: 600px) {
	.evendo-referenz { flex-direction: column; align-items: stretch; justify-content: flex-end; padding: var(--wp--preset--spacing--m) var(--wp--preset--spacing--s) 0; }
	.evendo-referenz__inhalt { flex: 0 0 auto; }
	.evendo-referenz__person { flex: 0 0 auto; flex-direction: row; align-items: flex-end; }
	.evendo-figur { max-width: 7rem; }
}

/* --- Einstieg mit Weiche. Kopplung Rolle → Kachel per :has(), auch bei Tastaturfokus. --- */
.evendo-einstieg { display: grid; grid-template-columns: minmax(14rem, 27%) 1fr; padding-inline: var(--wp--preset--spacing--m); background: var(--wp--preset--color--flaeche-akzent); color: var(--wp--preset--color--schrift); }
.evendo-einstieg__links { border-right: 1px solid var(--wp--preset--color--schrift); padding: var(--wp--preset--spacing--l) var(--wp--preset--spacing--m) var(--wp--preset--spacing--l) 0; }
.evendo-einstieg__frage { display: inline-flex; gap: 0.4em; align-items: center; border: 1px solid currentColor; border-radius: var(--wp--custom--radius--rund); padding: 0.1em 0.7em; font-size: var(--wp--preset--font-size--klein); }
.evendo-einstieg__rollen { list-style: none; margin: var(--wp--preset--spacing--s) 0 0; padding: 0; font-size: var(--wp--preset--font-size--gehoben); }
.evendo-einstieg__rollen li { border-bottom: 1px solid currentColor; }
.evendo-einstieg__rolle > span:first-child { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.evendo-einstieg__rolle { display: flex; justify-content: space-between; gap: 0.75em; padding: 0.7em 0; min-height: 1.5rem; color: inherit; text-decoration: none; }
.evendo-einstieg__nr { flex-shrink: 0; align-self: flex-start; font-size: var(--wp--preset--font-size--klein); border: 1px solid currentColor; border-radius: var(--wp--custom--radius--rund); padding: 0 0.5em; }
.evendo-einstieg__rechts { padding: var(--wp--preset--spacing--l) 0 var(--wp--preset--spacing--l) var(--wp--preset--spacing--l); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--m); }
.evendo-einstieg__ueberschrift { margin: 0; hyphens: auto; overflow-wrap: break-word; font-size: var(--wp--preset--font-size--h-1); color: inherit; }
.evendo-einstieg .evendo-zweiton { color: var(--wp--preset--color--schrift-zweiton-auf-akzent); }
/* So viele Spalten, wie Kacheln mit mindestens 15rem nebeneinander passen — zwei, drei oder vier Wege. */
.evendo-einstieg__kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--wp--preset--spacing--s); }
.evendo-einstieg__kacheln > .evendo-kachel { background: var(--wp--preset--color--flaeche-akzent); }
.evendo-einstieg:has(.evendo-einstieg__rolle[data-familie="01"]:is(:hover, :focus-visible)) .evendo-kachel[data-familie="01"],
.evendo-einstieg:has(.evendo-einstieg__rolle[data-familie="02"]:is(:hover, :focus-visible)) .evendo-kachel[data-familie="02"],
.evendo-einstieg:has(.evendo-einstieg__rolle[data-familie="03"]:is(:hover, :focus-visible)) .evendo-kachel[data-familie="03"],
.evendo-einstieg:has(.evendo-einstieg__rolle[data-familie="04"]:is(:hover, :focus-visible)) .evendo-kachel[data-familie="04"],
.evendo-einstieg:has(.evendo-einstieg__rolle[data-familie="05"]:is(:hover, :focus-visible)) .evendo-kachel[data-familie="05"] {
	background: var(--wp--preset--color--flaeche-tief); color: var(--wp--preset--color--schrift-auf-tief); translate: 0 -0.25rem; }
@media (max-width: 1000px) { .evendo-einstieg { grid-template-columns: minmax(0, 1fr); } .evendo-einstieg__links { border-right: 0; border-bottom: 1px solid currentColor; padding-right: 0; }
	.evendo-einstieg__rechts { padding-left: 0; } .evendo-einstieg__kacheln { grid-template-columns: 1fr; } }

/* --- Dunkle und farbige Flächen: Überschriften und Links erben die Schriftfarbe der Fläche.
   theme.json setzt Überschriften und Links auf „schrift" — auf flaeche-tief wäre das Schwarz auf Schwarz. --- */
:where(.has-text-color) :is(h1, h2, h3, h4, h5, h6):not(.has-text-color),
:where(.has-text-color) a:not(.wp-element-button):not(.has-text-color) { color: inherit; }

/* --- Vorlagen --- */
.evendo-kachel__medium:empty { background: var(--wp--preset--color--linie); }
.evendo-hinweisband a { text-decoration: none; }
.evendo-hinweisband a:hover { text-decoration: underline; }
.evendo-schritte { list-style: none; counter-reset: evendo-schritt; padding: 0; display: grid; gap: var(--wp--preset--spacing--m); }
.evendo-schritte > li { counter-increment: evendo-schritt; display: grid; grid-template-columns: 3rem 1fr; gap: var(--wp--preset--spacing--s); align-items: start; }
.evendo-schritte > li::before { content: counter(evendo-schritt); display: grid; place-items: center; width: 3rem; height: 3rem;
	border-radius: var(--wp--custom--radius--rund); background: var(--wp--preset--color--flaeche-akzent); color: var(--wp--preset--color--schrift); font-weight: 500; grid-row: span 2; }
.evendo-schritte > li strong { display: block; font-size: var(--wp--preset--font-size--h-4); }

/* --- Umbruch (WCAG 1.4.10): Große Überschriften trennen lange deutsche Wörter statt über den
   Rand zu laufen — bei 320 px und breiteren Schriften (Montserrat) sonst etwa „Konstellation." --- */
.wp-block-heading, .evendo-einstieg__ueberschrift, .evendo-referenz__name { hyphens: auto; overflow-wrap: break-word; }
/* Tabellen brechen in den Zellen um, statt in einem Scrollbereich zu stehen, den die Tastatur
   nicht erreicht (axe scrollable-region-focusable, WCAG 2.1.1) — der Kernblock hat kein tabindex. */
.wp-block-table :is(th, td) { overflow-wrap: anywhere; hyphens: auto; }

/* --- Varianten (Ü-261006-varianten-baustein). Live nur ein schlichter Behälter; Marker und Leiste
       gibt es nur in der Präsentation eines Entwurfs. Eckig und flach (radius klein). --- */
.evendo-varianten { position: relative; }
.evendo-varianten > :not(.evendo-varianten__marker) { margin-block: 0; }
/* Marker über der oberen Kante (im Blockabstand), damit er keinen Inhalt verdeckt. */
.evendo-varianten__marker { position: absolute; z-index: 2; inset-block-end: calc(100% + 0.125rem); inset-inline-end: 0;
	display: inline-flex; align-items: center; gap: 0.35em; min-height: 1.5rem; min-width: 1.5rem; padding: 0.1em 0.5em;
	font: inherit; font-size: var(--wp--preset--font-size--klein); line-height: 1.2; font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--schrift); background: var(--wp--preset--color--flaeche);
	border: 1px solid var(--wp--preset--color--schrift); border-radius: var(--wp--custom--radius--klein); cursor: pointer; }
/* Verschachtelt: innerer Marker neben den äußeren, nicht darüber. */
.evendo-varianten .evendo-varianten > .evendo-varianten__marker { inset-inline-end: 4.5rem; }
.evendo-varianten .evendo-varianten .evendo-varianten > .evendo-varianten__marker { inset-inline-end: 9rem; }
.evendo-varianten__marker:hover { background: var(--wp--preset--color--flaeche-akzent); }
/* Vorgabe: kleines gefülltes Quadrat vor der Zahl (Text dazu nur für Bildschirmleser). */
.evendo-varianten__marker.is-vorgabe::before { content: ""; width: 0.5em; height: 0.5em; background: currentColor; }
/* Ausgeblendeter Abschnitt (leere Variante): schmaler Platzhalter, Platz für den Marker rechts. */
.evendo-varianten__leer { min-height: 1.5rem; padding: 0.1em 0.5em; font-size: var(--wp--preset--font-size--klein);
	border: 1px dashed currentColor; border-radius: var(--wp--custom--radius--klein); }
.evendo-varianten-leiste { position: sticky; z-index: 100; inset-block-start: var(--wp-admin--admin-bar--height, 0);
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
	padding: 0.35em var(--wp--preset--spacing--s); font-size: var(--wp--preset--font-size--klein);
	background: var(--wp--preset--color--flaeche-tief); color: var(--wp--preset--color--schrift-auf-tief); }
.evendo-varianten-leiste__titel { font-weight: 600; }
.evendo-varianten-leiste a { color: inherit; }
.evendo-varianten-leiste__kopieren { min-height: 1.5rem; padding: 0.1em 0.6em; font: inherit; color: inherit; background: transparent;
	border: 1px solid currentColor; border-radius: var(--wp--custom--radius--klein); cursor: pointer; }
.evendo-varianten-leiste__kopieren:hover { text-decoration: underline; }
.evendo-varianten-leiste [hidden] { display: none; }
.evendo-varianten-leiste__beenden { margin-inline-start: auto; }

/* --- Namen aus Platzhaltern (inc/platzhalter.php): nicht trennen, nicht umbrechen. --- */
.evendo-name { white-space: nowrap; hyphens: manual; }

/* --- Slogan-Umschalter im Einstieg (nur Vorschau von Entwürfen, Ü-261006-slogan-umschalter) --- */
.evendo-einstieg__unterzeile { margin: 0; max-width: 38ch; font-size: var(--wp--preset--font-size--h-4); line-height: 1.35; color: inherit; }
.evendo-einstieg__unterzeile[hidden] { display: none; }
.evendo-einstieg__slogan-umschalter { display: flex; align-items: center; gap: var(--wp--preset--spacing--xs); }
.evendo-slogan-knopf { display: inline-flex; align-items: center; gap: 0.35em; min-height: 1.75rem; padding: 0.25em 0.75em;
	font: inherit; font-size: var(--wp--preset--font-size--klein); color: inherit; background: transparent;
	border: 1px solid currentColor; border-radius: var(--wp--custom--radius--klein); cursor: pointer; }
.evendo-slogan-knopf:hover { text-decoration: underline; }
/* Nur für Bildschirmleser sichtbar (Slogan-Umschalter, Varianten). */
.evendo-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evendo-unsichtbar[hidden] { display: none; }