/* Überschriften zuerst an Wortgrenzen umbrechen, ohne automatische Trennstriche.
 * Nur ein Wort, das allein breiter als die ganze Zeile ist, darf im Notfall
 * umbrechen. Die schmale !important-Ausnahme überstimmt auch modulinterne
 * Silbentrennung, ohne deren Schriftgrößen, Breiten oder Farben zu ändern.
 */
body.vs-site main :is(h1, h2, h3, h4, h5, h6) {
	-webkit-hyphens: none !important;
	hyphens: none !important;
	word-break: normal;
	overflow-wrap: break-word;
}

/* Die Lexikonmodule sehen breite Titel vor. Die stärkere Theme-Regel mit
 * 13ch darf diese nicht so verengen, dass einzelne Buchstaben übrig bleiben.
 */
body.vs-site main :is(.vs-food-page-hero, .vs-supp-page-hero, .vs-move-page-hero) h1 {
	max-width: min(100%, 920px);
}

/* Lange Lexikonnamen auf kleinen Displays als vollständige Wörter erhalten.
 * Die übrigen Überschriften und die Desktop-Schriftgrößen bleiben unverändert.
 */
@media (max-width: 600px) {
	body.vs-site main :is(.vs-food-page-hero, .vs-supp-page-hero, .vs-move-page-hero, .vs-sr-page-hero) h1 {
		font-size: clamp(1.5rem, 7.5vw, 2.25rem);
	}
}

/* Interaktive Elemente müssen über rein visuellen Karussell-Ebenen liegen. */
.vssk-carousel :is(a, button, input, select, textarea, label) {
	position: relative;
	z-index: 6;
	pointer-events: auto;
}

/* Kompakte Lexikonzugänge innerhalb der vorhandenen Wissenswerkzeuge. */
.vsru-knowledge-lexicons {
	grid-column: 1 / -1;
	min-width: 0;
	margin-top: 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid #c9d8d0;
}
.vsru-knowledge-lexicons h2 {
	font-size: 1.2rem;
	margin: 0 0 .75rem;
}
.vsru-knowledge-lexicons ul {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.vsru-knowledge-lexicons li {
	max-width: 100%;
	margin: 0;
}
.vsru-knowledge-lexicons a {
	display: block;
	padding: .7rem 1rem;
	border: 1px solid #b8cbc2;
	border-radius: .6rem;
	background: #fff;
	color: #164c3e;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: .2em;
	overflow-wrap: anywhere;
}
.vsru-knowledge-lexicons a:hover {
	background: #edf5f0;
}
.vsru-knowledge-lexicons a:focus-visible {
	outline: 3px solid #164c3e;
	outline-offset: 3px;
}

/* Offizielle KI-Kennzeichnung überall filigran oben rechts anzeigen. */
.vswa-ai-labelled-image .vswa-ai-label {
	top: 12px !important;
	right: 12px !important;
	bottom: auto !important;
	width: 86px !important;
	max-width: 24% !important;
}

@media (max-width: 520px) {
	.vswa-ai-labelled-image .vswa-ai-label {
		top: 10px !important;
		right: 10px !important;
		width: 76px !important;
	}
}

/* Tastaturfokus: deckendes Dunkelgrün plus weißer Abstand auf hellen/dunklen Flächen.
 * !important überstimmt die unterschiedlichen Fokusregeln der bestehenden Module.
 * Nur der aktive Tastaturfokus erhält die Markierung; Maße und Bilder bleiben gleich.
 */
body.vs-site :is(a[href], button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid #164c3e !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 3px #fff !important;
}

/* FAQ-Container schneiden überstehende Inhalte ab: den Ring innen zeichnen. */
body.vs-site .vssk-faq-list summary:focus-visible {
	outline-offset: -6px !important;
	box-shadow: none !important;
}

@media (forced-colors: active) {
	body.vs-site :is(a[href], button, input, select, textarea, summary, [tabindex]):focus-visible {
		outline-color: Highlight !important;
		box-shadow: none !important;
	}
}