/*
 * Shouraki -- gemeinsame Bauteile der Inhaltsseiten
 *
 * Gilt ausschließlich unter .sk-inhalt. Diese Klasse setzt jede Vorlage auf
 * ihren Artikel, die die gemeinsame Gestaltungslinie übernimmt: Säulenseiten,
 * Ratgeber-Beiträge und Hubs, Preise-Seite. Ohne sie greift keine Regel
 * dieser Datei, und keine Bestandsseite kann getroffen werden.
 *
 * Herkunft: herausgelöst aus assets/css/saeule.css. Diese Datei trägt genau
 * das, was mehr als eine Seitenart braucht. Seitenspezifisches bleibt in der
 * eigenen Datei -- saeule.css, ratgeber.css, preise.css. Keine Regel steht in
 * zwei Dateien.
 *
 * Der Vertrag dazu steht in tmp-content/pillar/GESTALTUNGSLINIE.md.
 * Änderungen an dieser Datei macht ausschließlich die Baustelle
 * pillar-seiten.
 *
 * Kein neues Designsystem: Farben, Schriften, Abstände, Radien und
 * Übergänge kommen aus den Tokens von main.css. main.css ist gesperrt.
 *
 * Einbinden -- in der Vorlage, vor get_header(), in function_exists gekapselt:
 * Handle shouraki-inhalt, Abhängigkeit shouraki-main. Die seitenspezifische
 * Datei hängt danach als Abhängigkeit von shouraki-inhalt. Dann laden die
 * Tokens genau einmal, und die eigenen Regeln gewinnen ohne !important.
 *
 * Aufbau:
 *   1. Icon-Tokens
 *   2. Eine Ausrichtung für alles
 *   3. Hervorhebungen im Fließtext
 *   4. Faktenzeile mit Icons
 *   5. Tabelle
 *   6. Feinheiten
 *
 * Icons: Tabler Icons, MIT -- dieselbe Quelle und dasselbe Masken-Verfahren
 * wie --sk-icon-clock und --sk-icon-check in main.css. Die SVG liegen als
 * Quelldateien unter assets/img/icons/, siehe design-ref/ICONS-LIZENZ.md.
 * Keine Unicode-Zeichen und keine Emoji als Ersatz für ein Icon.
 */

/* ==========================================================================
   1. Icon-Tokens
   ========================================================================== */

.sk-inhalt {
	--sk-icon-users-group: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%20%3Cpath%20d='M10%2013a2%202%200%201%200%204%200a2%202%200%200%200%20-4%200'%20/%3E%20%3Cpath%20d='M8%2021v-1a2%202%200%200%201%202%20-2h4a2%202%200%200%201%202%202v1'%20/%3E%20%3Cpath%20d='M15%205a2%202%200%201%200%204%200a2%202%200%200%200%20-4%200'%20/%3E%20%3Cpath%20d='M17%2010h2a2%202%200%200%201%202%202v1'%20/%3E%20%3Cpath%20d='M5%205a2%202%200%201%200%204%200a2%202%200%200%200%20-4%200'%20/%3E%20%3Cpath%20d='M3%2013v-1a2%202%200%200%201%202%20-2h2'%20/%3E%20%3C/svg%3E");
	--sk-icon-calendar-week: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%20%3Cpath%20d='M4%207a2%202%200%200%201%202%20-2h12a2%202%200%200%201%202%202v12a2%202%200%200%201%20-2%202h-12a2%202%200%200%201%20-2%20-2v-12'%20/%3E%20%3Cpath%20d='M16%203v4'%20/%3E%20%3Cpath%20d='M8%203v4'%20/%3E%20%3Cpath%20d='M4%2011h16'%20/%3E%20%3Cpath%20d='M7%2014h.013'%20/%3E%20%3Cpath%20d='M10.01%2014h.005'%20/%3E%20%3Cpath%20d='M13.01%2014h.005'%20/%3E%20%3Cpath%20d='M16.015%2014h.005'%20/%3E%20%3Cpath%20d='M13.015%2017h.005'%20/%3E%20%3Cpath%20d='M7.01%2017h.005'%20/%3E%20%3Cpath%20d='M10.01%2017h.005'%20/%3E%20%3C/svg%3E");
	--sk-icon-target-arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%20%3Cpath%20d='M11%2012a1%201%200%201%200%202%200a1%201%200%201%200%20-2%200'%20/%3E%20%3Cpath%20d='M12%207a5%205%200%201%200%205%205'%20/%3E%20%3Cpath%20d='M13%203.055a9%209%200%201%200%207.941%207.945'%20/%3E%20%3Cpath%20d='M15%206v3h3l3%20-3h-3v-3l-3%203'%20/%3E%20%3Cpath%20d='M15%209l-3%203'%20/%3E%20%3C/svg%3E");
	--sk-icon-shield-check: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%20%3Cpath%20d='M11.46%2020.846a12%2012%200%200%201%20-7.96%20-14.846a12%2012%200%200%200%208.5%20-3a12%2012%200%200%200%208.5%203a12%2012%200%200%201%20-.09%207.06'%20/%3E%20%3Cpath%20d='M15%2019l2%202l4%20-4'%20/%3E%20%3C/svg%3E");
	--sk-icon-barbell: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%20%3Cpath%20d='M2%2012h1'%20/%3E%20%3Cpath%20d='M6%208h-2a1%201%200%200%200%20-1%201v6a1%201%200%200%200%201%201h2'%20/%3E%20%3Cpath%20d='M6%207v10a1%201%200%200%200%201%201h1a1%201%200%200%200%201%20-1v-10a1%201%200%200%200%20-1%20-1h-1a1%201%200%200%200%20-1%201'%20/%3E%20%3Cpath%20d='M9%2012h6'%20/%3E%20%3Cpath%20d='M15%207v10a1%201%200%200%200%201%201h1a1%201%200%200%200%201%20-1v-10a1%201%200%200%200%20-1%20-1h-1a1%201%200%200%200%20-1%201'%20/%3E%20%3Cpath%20d='M18%208h2a1%201%200%200%201%201%201v6a1%201%200%200%201%20-1%201h-2'%20/%3E%20%3Cpath%20d='M22%2012h-1'%20/%3E%20%3C/svg%3E");
	--sk-icon-building: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%20%3Cpath%20d='M3%2021l18%200'%20/%3E%20%3Cpath%20d='M9%208l1%200'%20/%3E%20%3Cpath%20d='M9%2012l1%200'%20/%3E%20%3Cpath%20d='M9%2016l1%200'%20/%3E%20%3Cpath%20d='M14%208l1%200'%20/%3E%20%3Cpath%20d='M14%2012l1%200'%20/%3E%20%3Cpath%20d='M14%2016l1%200'%20/%3E%20%3Cpath%20d='M5%2021v-16a2%202%200%200%201%202%20-2h10a2%202%200%200%201%202%202v16'%20/%3E%20%3C/svg%3E");
	--sk-icon-flag: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%20%3Cpath%20d='M5%205a5%205%200%200%201%207%200a5%205%200%200%200%207%200v9a5%205%200%200%201%20-7%200a5%205%200%200%200%20-7%200v-9'%20/%3E%20%3Cpath%20d='M5%2021v-7'%20/%3E%20%3C/svg%3E");
	--sk-icon-user-star: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20%3E%20%3Cpath%20d='M8%207a4%204%200%201%200%208%200a4%204%200%200%200%20-8%200'%20/%3E%20%3Cpath%20d='M6%2021v-2a4%204%200%200%201%204%20-4h.5'%20/%3E%20%3Cpath%20d='M17.8%2020.817l-2.172%201.138a.392%20.392%200%200%201%20-.568%20-.41l.415%20-2.411l-1.757%20-1.707a.389%20.389%200%200%201%20.217%20-.665l2.428%20-.352l1.086%20-2.193a.392%20.392%200%200%201%20.702%200l1.086%202.193l2.428%20.352a.39%20.39%200%200%201%20.217%20.665l-1.757%201.707l.414%202.41a.39%20.39%200%200%201%20-.567%20.411l-2.172%20-1.138'%20/%3E%20%3C/svg%3E");
}

/* ==========================================================================
   2. Eine Ausrichtung für alles

   Befund aus der Abnahme: die Seiten liefen linksbündig, nur das Fragenband
   und der Schlussabschnitt standen mittig. Dieser Wechsel war der Grund für
   "wirkt wild". Hier gilt genau eine Regel: alles linksbündig. .sk-center
   bleibt für den Rest der Website, was es ist -- unter .sk-inhalt hat es
   keine Wirkung mehr.
   ========================================================================== */

.sk-inhalt .sk-center,
.sk-inhalt .sk-center > *,
.sk-inhalt .sk-faq,
.sk-inhalt .sk-faq > *,
.sk-inhalt .sk-band,
.sk-inhalt .sk-band > *,
.sk-inhalt .sk-grid,
.sk-inhalt .sk-grid > * {
	text-align: start;
}

/* Die Knopfreihe folgt derselben Kante wie der Text darüber. */
.sk-inhalt .wp-block-buttons {
	justify-content: flex-start;
}

/* ==========================================================================
   3. Hervorhebungen im Fließtext

   Befund aus der Abnahme: "keine Fettungen". Die Kursseiten setzen
   Schlüsselbegriffe seit jeher fett (siehe /kickboxen/). Auf Dunkelgrund
   trägt reines Fett allein zu wenig -- die zweite Stufe ist die hellere
   Überschriftenfarbe. Das Gold bleibt den Verweisen und Knöpfen
   vorbehalten, damit fett nicht mit klickbar verwechselt wird.
   ========================================================================== */

.sk-inhalt .entry-content strong,
.sk-inhalt .entry-content b {
	font-weight: 700;
	color: var(--sk-color-heading);
}

/* In Karten und Panels steht der Text ohnehin heller -- dort reicht das
   Gewicht, sonst kippt die Karte ins Schreiende. */
.sk-inhalt .sk-card strong,
.sk-inhalt .sk-faq strong {
	color: inherit;
}

/* Aufzaehlungen tragen denselben goldenen Haken wie auf den Kursseiten.
   main.css macht das dort ueber eine Liste aus Seiten-IDs (Abschnitt 10.20);
   die Inhaltsseiten waren dort nicht dabei. Statt die Bestandsregel zu
   erweitern -- main.css ist fuer diese Baustelle gesperrt -- steht dieselbe
   Behandlung hier im eigenen Geltungsbereich. .sk-fakten bringt eigene
   Icons mit und bleibt aussen vor. */
.sk-inhalt .entry-content ul.wp-block-list:not(.sk-fakten) {
	list-style: none;
	padding-inline-start: 0;
}

.sk-inhalt .entry-content ul.wp-block-list:not(.sk-fakten) > li {
	position: relative;
	padding-inline-start: 2rem;
}

.sk-inhalt .entry-content ul.wp-block-list:not(.sk-fakten) > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.42em;
	inline-size: 1.05em;
	block-size: 1.05em;
	background-color: var(--sk-color-gold);
	-webkit-mask: var(--sk-icon-check) center / contain no-repeat;
	mask: var(--sk-icon-check) center / contain no-repeat;
}

/* Die Textspalte eines Bandes behaelt ihr Lesemass, auch bei langen Listen. */
.sk-inhalt .sk-band--split > .sk-band__text > ul.wp-block-list {
	max-width: var(--sk-measure-tight, 62ch);
}

/* ==========================================================================
   4. Faktenzeile mit Icons

   Eine Liste aus kurzen Tatsachen -- Alter, Tage, Ziel -- direkt unter der
   Einleitung eines Abschnitts. Jedes li trägt eine Modifikatorklasse, die
   das Icon wählt. Ohne Modifikator erscheint der Haken, das ist der
   Rückfall.
   ========================================================================== */

.sk-inhalt .sk-fakten {
	display: grid;
	gap: var(--sk-space-xs) var(--sk-space-lg);
	margin-block: var(--sk-space-md) 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.sk-inhalt .sk-fakten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.sk-inhalt .sk-fakten {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sk-inhalt .sk-fakten > li {
	position: relative;
	margin: 0;
	padding-inline-start: calc(1.5rem + var(--sk-space-2xs));
	font-size: var(--sk-fs-small);
	line-height: 1.55;
	color: var(--sk-color-text-muted);
}

/* Der Aufzählungspunkt von main.css darf hier nicht zusätzlich erscheinen. */
.sk-inhalt .sk-fakten > li::marker {
	content: "";
}

.sk-inhalt .sk-fakten > li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.1em;
	inset-inline-start: 0;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--sk-color-gold);
	-webkit-mask: var(--sk-icon-check) center / contain no-repeat;
	mask: var(--sk-icon-check) center / contain no-repeat;
}

.sk-inhalt .sk-fakt--alter::before {
	-webkit-mask-image: var(--sk-icon-users-group);
	mask-image: var(--sk-icon-users-group);
}

.sk-inhalt .sk-fakt--tage::before {
	-webkit-mask-image: var(--sk-icon-calendar-week);
	mask-image: var(--sk-icon-calendar-week);
}

.sk-inhalt .sk-fakt--zeit::before {
	-webkit-mask-image: var(--sk-icon-clock);
	mask-image: var(--sk-icon-clock);
}

.sk-inhalt .sk-fakt--ziel::before {
	-webkit-mask-image: var(--sk-icon-target-arrow);
	mask-image: var(--sk-icon-target-arrow);
}

.sk-inhalt .sk-fakt--schutz::before {
	-webkit-mask-image: var(--sk-icon-shield-check);
	mask-image: var(--sk-icon-shield-check);
}

.sk-inhalt .sk-fakt--kraft::before {
	-webkit-mask-image: var(--sk-icon-barbell);
	mask-image: var(--sk-icon-barbell);
}

.sk-inhalt .sk-fakt--ort::before {
	-webkit-mask-image: var(--sk-icon-building);
	mask-image: var(--sk-icon-building);
}

.sk-inhalt .sk-fakt--start::before {
	-webkit-mask-image: var(--sk-icon-flag);
	mask-image: var(--sk-icon-flag);
}

.sk-inhalt .sk-fakt--trainer::before {
	-webkit-mask-image: var(--sk-icon-user-star);
	mask-image: var(--sk-icon-user-star);
}

/* Der erste Begriff einer Tatsache benennt sie, der Rest trägt den Wert. */
.sk-inhalt .sk-fakten > li > strong {
	display: block;
	font-family: var(--sk-font-heading);
	font-size: var(--sk-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sk-color-text-dim);
}

/* ==========================================================================
   5. Tabelle

   Ab 640 px eine Tabelle, darunter gestapelte Zeilen mit dem Spaltennamen
   aus data-spalte. Vergleichen ist die Aufgabe, deshalb keine Karten.

   Pflichtteile des Markups:
     .sk-tabelle__rollbereich  umschließt die Tabelle. Der einzige Ort auf
                               der Seite, an dem waagerecht gerollt wird.
     data-spalte               auf jeder td. Unter 640 px trägt dieses
                               Attribut den Spaltennamen vor dem Wert.
     .sk-tabelle__titel        Überschrift oder caption über der Tabelle.
     .sk-tabelle__zusatz       Absatz darunter für Fußnoten.

   Der Kursplan aus [sk_saeule_kursplan] trägt diese Klassen zusätzlich zu
   seinen eigenen sk-kursplan*-Klassen; was nur ihn betrifft, steht in
   saeule.css.
   ========================================================================== */

.sk-inhalt .sk-tabelle__titel {
	font-size: var(--sk-fs-h3);
	margin-block-end: var(--sk-space-3xs);
	scroll-margin-block-start: calc(var(--sk-header-height) + var(--sk-space-md));
}

.sk-inhalt .sk-tabelle__zusatz {
	margin-block: 0 var(--sk-space-md);
	font-size: var(--sk-fs-small);
}

.sk-inhalt .sk-tabelle__rollbereich {
	overflow-x: auto;
	scrollbar-color: var(--sk-color-gold-deep) var(--sk-color-panel);
	scrollbar-width: thin;
}

.sk-inhalt .sk-tabelle {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sk-fs-small);
}

.sk-inhalt .sk-tabelle th,
.sk-inhalt .sk-tabelle td {
	border-block-end: 1px solid var(--sk-color-border);
	padding: var(--sk-space-xs);
	text-align: start;
	vertical-align: top;
}

.sk-inhalt .sk-tabelle thead th {
	font-family: var(--sk-font-heading);
	font-size: var(--sk-fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sk-color-text-dim);
	background-color: transparent;
	border-block-end-color: var(--sk-color-gold);
	white-space: nowrap;
}

.sk-inhalt .sk-tabelle tbody th {
	font-family: var(--sk-font-heading);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--sk-color-heading);
}

.sk-inhalt .sk-tabelle tbody tr:hover {
	background-color: var(--sk-color-panel);
}

/* Schmale Bildschirme: gestapelte Zeilen statt Seitwärtsrollen. Der
   Spaltenname steht dann vor dem Wert, die Kopfzeile entfällt. */
@media (max-width: 639px) {
	.sk-inhalt .sk-tabelle thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.sk-inhalt .sk-tabelle,
	.sk-inhalt .sk-tabelle tbody,
	.sk-inhalt .sk-tabelle tr,
	.sk-inhalt .sk-tabelle th,
	.sk-inhalt .sk-tabelle td {
		display: block;
	}

	.sk-inhalt .sk-tabelle tr {
		border-block-end: 1px solid var(--sk-color-border);
		padding-block: var(--sk-space-sm);
	}

	.sk-inhalt .sk-tabelle th,
	.sk-inhalt .sk-tabelle td {
		border: 0;
		padding: 0;
	}

	.sk-inhalt .sk-tabelle tbody th {
		margin-block-end: var(--sk-space-2xs);
	}

	.sk-inhalt .sk-tabelle td + td {
		margin-block-start: var(--sk-space-3xs);
	}

	.sk-inhalt .sk-tabelle td[data-spalte]::before {
		content: attr(data-spalte) ": ";
		font-family: var(--sk-font-heading);
		font-size: var(--sk-fs-eyebrow);
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--sk-color-text-dim);
	}
}

/* ==========================================================================
   6. Feinheiten
   ========================================================================== */

/* Sprungziele dürfen nicht unter dem festen Kopf landen. */
.sk-inhalt :is(h2, h3)[id] {
	scroll-margin-block-start: calc(var(--sk-header-height) + var(--sk-space-md));
}

/* Zahlen in Zeitangaben laufen auf einer Linie. */
.sk-inhalt .sk-card__time-hours,
.sk-inhalt .sk-fakt--zeit {
	font-variant-numeric: tabular-nums;
}

/* Bilder in Bändern und Karten bleiben im Rahmen, auch wenn ein Anhang
   einmal quer hochformatig ist. */
.sk-inhalt .sk-band__photo img,
.sk-inhalt .sk-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}