/*
 * Shouraki -- Design-Paket A1 (25.10.2026)
 *
 * Eigene Datei, laedt nach main.css und den Seitenstilen. Bearbeitet wird
 * nichts an main.css, kursfinder.css, buchungsfenster.css. Abschnitte:
 *   a) Videos   b) Rechtliche Seiten   c) Einbettungen   d) Kartenraster
 *   e) Schrittkarten und Kennzahlen   f) FAQ   g) Complianz-Chevron
 */

/* Textkante: linke Containerkante wie bei den Fliesstextbloecken in main.css */
:root {
	--sk-a1-kante: max(0px, calc((100% - var(--sk-container)) / 2));
}

/* Lesemass einmal an der Fliesstextschrift ausgerechnet (wie --sk-rat-spalte) */
@property --sk-a1-spalte {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}

body {
	--sk-a1-spalte: var(--sk-measure);
}

/* ==========================================================================
   a) Videos (M7)
   Die Ausgabe-Filter in inc/design-a1.php setzen auf jeder Videofigur die
   Klassen sk-vid und sk-vid--hoch bzw. sk-vid--quer, dazu --sk-vid-w/-h.
   ========================================================================== */

html body figure.sk-vid {
	position: relative;
	width: 100%;
	max-width: var(--sk-container-narrow);
	margin-block: var(--sk-space-md) 0;
	margin-inline: var(--sk-a1-kante) auto;
	aspect-ratio: var(--sk-vid-w, 16) / var(--sk-vid-h, 9);
	background-color: var(--sk-color-deep);
	border: 1px solid var(--sk-color-border);
	border-radius: var(--sk-radius-lg);
	overflow: hidden;
}

html body figure.sk-vid > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: var(--sk-color-deep);
	border: 0;
	border-radius: 0;
}

/* Hochformat einzeln: hoechstens 70 % der Fensterhoehe, mittig */
html body figure.sk-vid--hoch {
	width: min(100%, calc(70vh * var(--sk-vid-w, 9) / var(--sk-vid-h, 16)));
	margin-inline: auto;
}

/* Mehrere Videos nebeneinander: einheitliche 16:9-Kacheln, Umbruch statt Schrumpfen */
html body .wp-block-group:has(> .sk-vid ~ .sk-vid) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: var(--sk-space-md);
	align-items: start;
}

html body :has(> .sk-vid ~ .sk-vid) > figure.sk-vid {
	width: 100%;
	max-width: none;
	margin: 0;
	aspect-ratio: 16 / 9;
}

html body :has(> .sk-vid ~ .sk-vid) > figure.sk-vid > video {
	object-fit: cover;
	object-position: 50% 30%;
}

html body :has(> .sk-vid ~ .sk-vid) > figure.sk-vid > video:is([poster*="bodycombat-kampfstellung"], [poster*="bodycombat-schattenboxen"]) {
	object-position: 50% 9%;
}

html body :has(> .sk-vid ~ .sk-vid) > figure.sk-vid.is-gestartet > video {
	object-fit: contain;
}

/* Play-Symbol: nur mit Skript, schluckt keine Klicks */
html.sk-vid-js figure.sk-vid::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	z-index: 2;
	width: 4rem;
	height: 4rem;
	margin: -2rem 0 0 -2rem;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%230b111e' fill-opacity='.82' stroke='%23f7c948' stroke-width='2.5'/%3E%3Cpath d='M26 20l20 12-20 12z' fill='%23f7c948'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: opacity var(--sk-transition);
}

html.sk-vid-js figure.sk-vid.is-spielt::after {
	opacity: 0;
}

html body figure.sk-vid:has(video:focus-visible) {
	outline: var(--sk-focus-ring);
	outline-offset: var(--sk-focus-offset);
}

/* ==========================================================================
   b) Rechtliche Seiten (M6)
   Datenschutz (page-id-32): Textspalte samt Ueberschriften hoechstens 760 px,
   links an der Textkante. Impressum (page-id-31): ab 900 px links Text,
   rechts die sechs Kontaktabsaetze als Karte -- reines CSS auf dem
   bestehenden Markup (Float statt Raster, damit die linke Spalte nicht an
   die Zeilenhoehen der Karte gebunden ist).
   ========================================================================== */

html body.page-id-32 .sk-band:not(.sk-center):not(.sk-faq) > * {
	max-width: min(100%, 760px);
	margin-inline: var(--sk-a1-kante) auto;
}

@media (min-width: 900px) {
	html body.page-id-31 .sk-band {
		display: flow-root;
	}

	html body.page-id-31 .sk-band:not(.sk-center):not(.sk-faq) > p:nth-of-type(-n+6) {
		float: right;
		clear: right;
		box-sizing: border-box;
		width: 22rem;
		max-width: 22rem;
		margin-block: 0;
		margin-inline: var(--sk-space-lg) var(--sk-a1-kante);
		padding: var(--sk-space-xs) var(--sk-space-md);
		background-color: var(--sk-color-panel-raised);
		border-inline: 1px solid var(--sk-color-border);
		border-block-start: 1px solid var(--sk-color-border-soft);
	}

	html body.page-id-31 .sk-band:not(.sk-center):not(.sk-faq) > p:nth-of-type(1) {
		padding-block-start: var(--sk-space-md);
		border-block-start: 1px solid rgba(var(--sk-color-gold-rgb), 0.45);
		border-start-start-radius: var(--sk-radius);
		border-start-end-radius: var(--sk-radius);
	}

	html body.page-id-31 .sk-band:not(.sk-center):not(.sk-faq) > p:nth-of-type(6) {
		padding-block-end: var(--sk-space-md);
		border-block-end: 1px solid var(--sk-color-border);
		border-end-start-radius: var(--sk-radius);
		border-end-end-radius: var(--sk-radius);
	}
}

/* ==========================================================================
   c) Einbettungen auf einer Raster-Linie (M2, 5.2)
   360-Grad-Rundgang, Autorenkasten, Inhaltsverzeichnis und Vergleichstabelle
   stehen an der Kante des Fliesstextes, hoechstens so breit wie dieser, und
   tragen den Kartenradius des Themes. Der Vollbild-Zustand des Rundgangs
   bleibt unberuehrt. Auf /rundgang/ (page-id-1148) und der Startseite ist der Fliesstext selbst
   1180 px breit; dort bleibt die Breite, nur Kante und Radius werden gleich.
   ========================================================================== */

html body .sk-rundgang > .sk-rg:not(.is-vollbild) {
	max-width: var(--sk-a1-spalte);
	margin-inline: var(--sk-a1-kante) auto;
}

html body:is(.page-id-1148, .home) .sk-rundgang > .sk-rg:not(.is-vollbild) {
	max-width: var(--sk-container);
}

html body .sk-rg:not(.is-vollbild):not(:fullscreen) .sk-rg__buehne,
html body .sk-rg:not(.is-vollbild):not(:fullscreen) .sk-rg__platzhalter {
	border-radius: var(--sk-radius);
}

html body .sk-autor-schluss {
	max-width: none;
	padding-inline: var(--sk-gutter);
}

html body .sk-autor-schluss > .sk-autor {
	max-width: var(--sk-a1-spalte);
	margin-inline: var(--sk-a1-kante) auto;
}

html body .sk-band > .sk-rat-toc {
	margin-inline: var(--sk-a1-kante) auto;
}

html body .sk-rat .entry-content > .sk-tabelle__titel,
html body .sk-rat .entry-content > .sk-tabelle__rollbereich,
html body .sk-rat .entry-content > .sk-tabelle__zusatz,
html body .sk-rat .entry-content > figure.wp-block-table {
	max-width: var(--sk-rat-spalte);
	margin-inline-start: var(--sk-rat-einzug);
}

html body .sk-rat .sk-rat-toc {
	max-width: var(--sk-rat-spalte);
	margin-inline-start: calc(var(--sk-rat-rand) + var(--sk-rat-einzug));
}

/* Autorenkasten steht ausserhalb von .sk-rat; Einzug wie dort ab 900 px (2rem + 0.25rem) */
@media (min-width: 900px) {
	html body .sk-rat ~ .sk-autor-schluss > .sk-autor {
		margin-inline-start: calc(var(--sk-a1-kante) + var(--sk-space-lg) + var(--sk-space-3xs));
	}
}

html body .sk-rat .sk-tabelle__rollbereich {
	border-radius: var(--sk-radius);
}

/* ==========================================================================
   d) Kartenraster (M8, 5.3)
   Gleiche Hoehen ohne Magazin-Versatz, Bild 3:2, fuenf Karten als 3+2 mittig,
   Ratgeber-Karten (Bereiche und Verwandtes) als Ganzes klickbar, Ersatzflaeche
   in Seitenfarbe mit Theme-Symbol, wo kein Bild steht, Link am Kartenende.
   ========================================================================== */

html body .sk-grid__cards > .sk-card:has(.sk-card__media) {
	margin-block-start: 0;
	height: 100%;
}

html body .sk-grid__cards:not(.sk-grid--portrait .sk-grid__cards) .sk-card__media {
	aspect-ratio: 3 / 2;
}

@media (min-width: 900px) {
	html body :is(.sk-grid__cards:has(.sk-card__media), .sk-hub__raster):has(> :last-child:nth-child(5)) {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	html body :is(.sk-grid__cards:has(.sk-card__media), .sk-hub__raster):has(> :last-child:nth-child(5)) > * {
		grid-column: span 2;
	}

	html body :is(.sk-grid__cards:has(.sk-card__media), .sk-hub__raster):has(> :last-child:nth-child(5)) > :nth-child(4) {
		grid-column: 2 / span 2;
	}

	html body :is(.sk-grid__cards:has(.sk-card__media), .sk-hub__raster):has(> :last-child:nth-child(5)) > :nth-child(5) {
		grid-column: 4 / span 2;
	}
}

/* Ganze Karte klickbar: Verweis im Titel spannt ueber die Karte */
html body .sk-hub-karte,
html body .sk-rat-karte {
	position: relative;
}

html body .sk-hub-karte__titel a::before,
html body .sk-rat-karte__titel a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

html body .sk-hub-karte__titel a:focus-visible,
html body .sk-rat-karte__titel a:focus-visible {
	outline: none;
}

html body .sk-hub-karte:has(a:focus-visible),
html body .sk-rat-karte:has(a:focus-visible) {
	outline: var(--sk-focus-ring);
	outline-offset: var(--sk-focus-offset);
}

html body .sk-hub-karte:hover,
html body .sk-rat-karte:hover {
	cursor: pointer;
}

/* Link am Kartenende */
html body .sk-hub-karte__meta:last-child,
html body .sk-hub-karte__text:last-child {
	margin-block-start: auto;
}

/* Ersatzflaeche, wo kein Bild steht: Seitenfarbe, Symbol in Gold, 3:2 */
html body .sk-hub-karte::before,
html body .sk-rat-karte:not(:has(.sk-card__media))::before {
	content: "";
	display: block;
	flex: none;
	aspect-ratio: 16 / 5;
	background-color: var(--sk-color-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7c948' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0'/%3E%3Cpath d='M12 7a5 5 0 1 0 5 5'/%3E%3Cpath d='M13 3.055a9 9 0 1 0 7.941 7.945'/%3E%3Cpath d='M15 6v3h3l3 -3h-3v-3l-3 3'/%3E%3Cpath d='M15 9l-3 3'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 2.75rem 2.75rem;
}

html body .sk-hub-karte::before {
	margin: calc(-1 * var(--sk-space-md)) calc(-1 * var(--sk-space-md)) var(--sk-space-2xs);
}

@media (max-width: 599.98px) {
	html body .sk-hub-karte::before {
		margin: calc(-1 * var(--sk-space-sm)) calc(-1 * var(--sk-space-sm)) var(--sk-space-2xs);
	}
}

/* ==========================================================================
   e) Schrittkarten Kindertraining und Kennzahl-Beschriftungen
   Vier Schritte ab 900 px als 2x2 statt vier schmaler Spalten, keine
   Wortbrueche mitten im Wort (lang="de": Silbentrennung statt Zeichenbruch).
   Die Kachel der Kennzahl ist Container (cqi): die Beschriftung passt sich
   der Kachelbreite an, ohne zu brechen.
   ========================================================================== */

html body ol.sk-kk-schritte {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	html body ol.sk-kk-schritte {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	html body ol.sk-kk-schritte > li {
		grid-template-columns: 3rem minmax(0, 1fr);
		gap: 0.9rem;
	}
}

html body ol.sk-kk-schritte :is(.sk-kk-schritt__titel, .sk-kk-schritt__text) {
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

html body .sk-stat__label {
	overflow-wrap: normal;
	word-break: keep-all;
	hyphens: manual;
}

@media (max-width: 599.98px) {
	html body .sk-stat__label {
		font-size: 0.6875rem;
		letter-spacing: 0.04em;
	}
}

/* ==========================================================================
   f) FAQ (M4)
   Kursseiten: Titel und Fragenliste stehen an der Kante des Fliesstextes
   statt mittig versetzt. Ratgeber: das Fragenband wird zum Akkordeon wie auf
   den Kursseiten (details aus dem Ausgabe-Filter, erste Frage offen); der
   Kasten um das Band entfaellt, die Eintraege tragen ihren eigenen Rahmen.
   ========================================================================== */

html body .sk-faq:not(.sk-d-fragen) > * {
	margin-inline: var(--sk-a1-kante) auto;
}

html body .sk-rat .entry-content > .sk-faq-band:has(> details.sk-faq__item) {
	padding: 0;
	background: none;
	border: 0;
}

html body .sk-faq-band > details.sk-faq__item {
	background-color: var(--sk-color-panel);
	border: 1px solid var(--sk-color-border);
	border-radius: var(--sk-radius);
}

html body .sk-faq-band > details.sk-faq__item + details.sk-faq__item {
	margin-block-start: var(--sk-space-2xs);
}

html body .sk-faq-band > details.sk-faq__item > summary {
	padding: var(--sk-space-sm) var(--sk-space-md);
}

html body .sk-faq-band > h2 {
	text-align: start;
	margin-block-end: var(--sk-space-sm);
}

/* ==========================================================================
   g) Complianz-Pfeil auf der Datenschutzseite
   Das Plugin verweist auf assets/css/images/chevron-down.svg (404). Die Datei
   liegt unter assets/images/ (200). Ueberschrieben wird nur das Hintergrundbild,
   nur auf der Datenschutzseite; das Plugin selbst bleibt unveraendert.
   ========================================================================== */

html body.page-id-32 #cmplz-document .cmplz-dropdown summary div:after,
html body.page-id-32 #cmplz-cookies-overview .cmplz-dropdown summary div:after {
	background-image: url("/wp-content/plugins/complianz-gdpr/assets/images/chevron-down.svg");
	background-repeat: no-repeat;
}