/*
 * Shouraki -- Ratgeber
 *
 * Gilt ausschliesslich unter .sk-rat. Diese Klasse setzen die beiden neuen
 * Vorlagen: template-parts/ratgeber-einzel-layout.php auf den Artikel eines
 * Ratgeber-Beitrags, template-parts/ratgeber-hub-layout.php auf das main
 * eines der sechs Ratgeber-Hubs, dort zusaetzlich .sk-rat--hub. Beide setzen
 * daneben .sk-inhalt, die Klammer der gemeinsamen Bauteile.
 *
 * KEINE Regel dieser Datei steht ohne .sk-rat. Damit kann keine von ihnen
 * eine Bestandsseite treffen, auch nicht ueber eine Blockklasse wie
 * wp-block-table, die im ganzen Haus vorkommt.
 *
 * Ladereihenfolge -- jede Vorlage meldet ihre Stile selbst an, vor
 * get_header und in function_exists gekapselt:
 *   main.css  ->  inhalt.css  ->  ratgeber-hub.css  ->  ratgeber.css
 * Handle shouraki-ratgeber, Abhaengigkeit shouraki-inhalt. Weil diese Datei
 * zuletzt laeuft, gewinnen ihre Regeln ohne !important; in der ganzen Datei
 * steht kein einziges.
 *
 * WAS SIE BEWUSST NICHT TUT
 *
 *   - Sie baut nichts nach, was in inhalt.css steht: Ausrichtung,
 *     Hervorhebungen, Aufzaehlungshaken, Faktenzeile, .sk-tabelle samt
 *     Umklappen unter 640 px, die Sprungziel-Abstaende.
 *   - Sie fasst die Hub-Gestaltung aus ratgeber-hub.css nicht an. Was dort
 *     gut ist -- Bereichskarten, Hinweiskasten, Kursliste -- bleibt.
 *   - Sie richtet nichts mittig aus. inhalt.css setzt .sk-center unter
 *     .sk-inhalt zurueck, und das ist so gewollt.
 *   - Sie erfindet keine Farbe, keinen Abstand und keinen Schriftgrad. Die
 *     wenigen abgeleiteten Werte stehen in calc oder max aus Tokens und sind
 *     an Ort und Stelle begruendet.
 *   - Sie laedt nichts nach: keine Schrift, kein Bild, kein @import.
 *
 * Aufbau:
 *   1. Mass fuer den Seitenrand und fuer die Lesespalte
 *   2. Kopfbereich
 *   3. Inhaltsverzeichnis
 *   4. Lesespalte des Beitrags
 *   5. Bausteine im Beitragstext
 *   6. Tabellen
 *   7. Inhaltsbilder
 *   8. Karten und Raster
 *   9. Abschlussblock
 *
 * Geprueft wurde von schmal nach breit fuer 390, 768 und 1280 Bildpunkte.
 * Alle Abfragen sind min-width-Abfragen; der schmale Fall ist der
 * Grundzustand. Waagerecht rollen darf allein der Tabellenbereich.
 */

/* ==========================================================================
   1. Mass fuer den Seitenrand

   Der Beitragstext liegt in .entry-content, und das ist ein Inhaltsraster:
   seine content-Spalte ist min(100% - 2 * Rinne, Containerbreite),
   mittig. Kopf, Inhaltsverzeichnis und der Abschnitt mit den verwandten
   Beitraegen stehen AUSSERHALB dieses Rasters -- sie sind Geschwister von
   .entry-content. Ohne ein gemeinsames Mass staenden ihre Kanten neben
   denen des Textes, und genau dieser Versatz war der Befund "wirkt wild".

   --sk-rat-rand rechnet dieselbe Spalte aus zwei Tokens nach: der Rand ist
   die Rinne, sobald der Bildschirm schmaler ist als der Container, und
   sonst die Haelfte des Ueberhangs. 100% loest dabei immer gegen das
   Element auf, das die Eigenschaft benutzt -- als padding am Kopf, als
   margin an den beiden Bloecken darunter. Kein eigener Zahlenwert.
   ========================================================================== */

.sk-rat {
	--sk-rat-rand: max(var(--sk-gutter), calc((100% - var(--sk-container)) / 2));
	/* Grundstellung: kein Einzug. Siehe den Block darunter. */
	--sk-rat-einzug: 0px;
}

/* --- 1.1 Einzug der Lesespalte -------------------------------------------

   Die ganze Lesespalte -- Ueberschriften, Absaetze, Listen, Bilder,
   Kurz-gesagt-Kasten, Inhaltsverzeichnis, Fragenband -- steht um diesen
   Betrag weiter rechts als die Containerkante. Nicht aus Zierde: damit
   bleibt LINKS von der Lesespalte genau so viel Platz, wie die Tabelle
   fuer ihren Ausbruch braucht. Nur so kann der Ausbruch symmetrisch sein
   (Abschnitt 6.1); ohne den Einzug gaebe es links nichts zu ueberhaengen,
   und die Tabelle waere wieder nach einer Seite verzogen.

   36 px, die Summe aus dem linken Innenabstand des Kurz-gesagt-Kastens und
   seiner Goldkante. Der Wert kommt also weiterhin aus dem Kasten, nur ist
   er jetzt das Mass des Ueberhangs und nicht mehr eine Ausgleichsrechnung.
   Negative Raender waren der erste Gedanke und sind verworfen: auf
   schmalen Bildschirmen zieht ein fester Zug das Element ueber die
   Bildschirmkante hinaus.

   Die Kaesten stehen MIT ihrem Rahmen auf der Lesekante, nicht mit ihrem
   Text. Die erste Fassung hatte es umgekehrt gehalten und jeden Kasten um
   seinen Innenabstand nach links gezogen; die Bildschirm-Abnahme zaehlte
   daraufhin drei linke und drei rechte Kanten statt zwei. Ein eingerueckter
   Text im Merkkasten ist gewollt und ueblich, drei Kanten in einer Spalte
   sind es nicht.

   Der Einzug ist erst ab 900 px gesetzt. Darunter gibt es den Ueberhang
   nicht, den er verbraucht, und der Befund trat dort auch nicht auf --
   mit 0px faellt jede Regel darunter auf ihren bisherigen Stand zurueck,
   und alle Kanten fallen auf eine zusammen. Das ist die Absicherung dafuer,
   dass 768 und 390 px unveraendert bleiben.

   Der Hub ist ausgenommen: dort gibt es weder Kurz-gesagt-Kasten noch
   Tabelle, also auch keinen Grund fuer den Versatz. Seine Kanten
   begradigt Abschnitt 8.1.
   ------------------------------------------------------------------------ */

@media (min-width: 900px) {
	.sk-rat:not(.sk-rat--hub) {
		/* 2rem Innenabstand plus 0.25rem Kante des Kurz-gesagt-Kastens. */
		--sk-rat-einzug: calc(var(--sk-space-lg) + var(--sk-space-3xs));
	}
}

/* --- 1.2 Lesemass, einmal an der Fliesstextschrift ausgerechnet ----------

   HIER LAG DER SCHWERE BEFUND DER ABNAHME, und zwar nicht dort, wo er
   aussah: keine konkurrierende Regel, kein !important, keine fremde
   Rasterspur. Die Regel aus Abschnitt 4 stand im CSSOM als einzige und
   gewinnende Regel auf jeder Ueberschrift. Sie hatte nur keine Wirkung.

   --sk-measure ist in main.css Zeile 164 als 70ch gesetzt. ch ist eine
   schriftbezogene Einheit und loest an JEDEM Element gegen dessen EIGENE
   Schrift auf. Derselbe Deckel bedeutet deshalb an jedem Element etwas
   anderes. Gemessen bei 1280 px Fensterbreite, Spaltenbreite 1144 px:

     Absatz             17,0 px Fliesstextschrift    70ch =  680 px
     H2 im Inhalt       43,8 px Ueberschriftschrift  70ch = 1618 px
     H3 Tabellentitel   29,5 px Ueberschriftschrift  70ch = 1091 px
     Fussnote           14,0 px                      70ch =  560 px

   Am Absatz setzt der Deckel auf, an der Ueberschrift liegt er 474 px
   ueber der Spaltenbreite und kann nie aufsetzen -- die Ueberschrift
   fuellte die Spalte. Der Einzug in derselben Regel ist dagegen eine
   absolute Laenge und griff. Genau daher das geteilte Bild: linke Kante
   verschoben, rechte Kante nicht. Die Fussnote zeigt denselben Fehler nach
   der anderen Seite, sie endete 120 px vor der Tabellenkante.

   Das Mass wird deshalb EINMAL an der Fliesstextschrift ausgerechnet und
   als feste Laenge weitergereicht. Ein gewoehnliches Custom Property kann
   das nicht: sein Wert wird als Zeichenkette eingesetzt und erst am
   benutzenden Element gerechnet -- 70ch bliebe 70ch. Ein mit @property
   angemeldetes Property vom Typ <length> wird dort berechnet, wo es
   DEKLARIERT steht, und vererbt sich als fertige Pixellaenge. Deklariert
   ist es an .sk-rat, also an der Fliesstextschrift des Artikels; jedes
   Kind bekommt dieselbe Zahl, gleich welchen Schriftgrad es selbst traegt.

   Gewonnen wird damit ueber KEINE fremde Regel -- es gibt keine. Gewonnen
   wird gegen die Einheit selbst. Ein !important haette hier gar nichts
   ausgerichtet: es haette dieselben 1618 px noch einmal durchgesetzt.

   @property ist eine Anmeldung, keine Regel: sie waehlt kein Element aus
   und veraendert nichts, solange niemand --sk-rat-spalte benutzt. Der Name
   traegt das Praefix dieser Datei und kommt sonst nirgends vor; die Zusage
   "keine Regel ohne .sk-rat" bleibt gewahrt. Kennt ein Browser @property
   nicht, faellt das Property auf die gewoehnliche Ersetzung zurueck --
   dann steht dort wieder 70ch, also der Stand von vorher, kein Bruch.
   ------------------------------------------------------------------------ */

@property --sk-rat-spalte {
	syntax: "<length>";
	inherits: true;
	initial-value: 0px;
}

.sk-rat {
	--sk-rat-spalte: var(--sk-measure);
}

/* ==========================================================================
   2. Kopfbereich

   Der Kopf ist der Eyecatcher der Seite, ohne laut zu werden: Sinnbild,
   Ueberzeile, Titel, Nebenangaben -- und rechts daneben, erst ab 900 px,
   das Bild.

   Entscheidungen, die hier getroffen sind:

   a) Der Kopf muss OHNE Bild genauso gut aussehen. Ein Beitrag hat bewusst
      kein Beitragsbild, und auf einem Hub ist das Kopfbild freiwillig.
      Deshalb teilt sich der Kopf nur dann in zwei Spalten, wenn die Figur
      wirklich da ist -- die Bedingung steht im Selektor, nicht im Markup.
      Ohne Bild bleibt eine Spalte ueber die volle Breite, kein leerer Platz
      neben dem Titel.

   b) Auf 390 px steht der Text ZUERST und das Bild darunter. Die Vorgabe
      liess Bild oben oder Bild weg; beides haette den Titel und die Antwort
      auf die Suchfrage unter die Bildschirmkante geschoben, und genau das
      sollte die Regel verhindern. Das Bild bleibt sichtbar, nur eben nach
      dem Titel.

   c) Ein einziges Seitenverhaeltnis fuer alle Motive, damit unterschiedlich
      hohe Anhaenge gleich wirken. object-fit deckelt den Rest.
   ========================================================================== */

.sk-rat .sk-rat-kopf {
	/* Raster auch im einspaltigen Fall: dann traegt gap den Abstand
	   zwischen Text und Bild, ohne eigene Randregel. */
	display: grid;
	gap: var(--sk-space-lg);
	/* Ersetzt die Rinne von .sk-page-header durch dasselbe Mass, das der
	   Lesetext benutzt. Der Hintergrund bleibt randlos, weil nur der
	   Innenabstand wechselt. Der Einzug kommt dazu, damit Ueberzeile,
	   Titel und die Zeile aus Datum und Lesezeit auf derselben Kante
	   stehen wie der erste Absatz des Beitrags. */
	padding-inline: calc(var(--sk-rat-rand) + var(--sk-rat-einzug));
}

@media (min-width: 900px) {
	/* Nur mit Bild zwei Spalten. Der Text bekommt den groesseren Anteil:
	   er traegt Titel und Einleitung, das Bild ist die Beigabe. */
	.sk-rat .sk-rat-kopf:has(> .sk-rat-kopf__bild) {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
		column-gap: var(--sk-space-2xl);
		align-items: center;
	}
}

/* Der Kopfinhalt ist im Raster schon auf seine Spalte begrenzt; die
   Containerbreite von .sk-page-header__inner laeuft dann ins Leere. */
.sk-rat .sk-rat-kopf__text {
	min-width: 0;
}

/* Die Brotkrumenspur des Beitrags steht ausserhalb von .entry-content und
   ausserhalb des Kopfes -- sie ist ein Geschwister des <article>. Ihr
   eigener Container rueckte sie bei 1280 px auf 82 px ein, waehrend der
   Titel darunter bei 50 px begann; das war der Befund "zwei Kanten".
   Sie bekommt deshalb denselben Rand wie der Kopf, Einzug eingerechnet.
   Auf 390 px standen beide schon vorher buendig, und dort ist der Einzug
   0px -- es aendert sich nichts. */
.sk-rat .sk-breadcrumbs .sk-container {
	max-width: none;
	padding-inline: calc(var(--sk-rat-rand) + var(--sk-rat-einzug));
}

/* Die Brotkrumenspur bringt auf dem Hub ihren eigenen Container mit und
   saesse damit um eine Rinne eingerueckt neben dem Titel. Innerhalb des
   Kopfes traegt der Kopf den Rand, nicht die Spur. */
.sk-rat .sk-rat-kopf__text .sk-breadcrumbs .sk-container {
	max-width: none;
	padding-inline: 0;
}

/* Das Sinnbild steht ueber der Ueberzeile. Seine Groesse ist aus Tokens
   abgeleitet statt frei gesetzt: zwei Zeilen Fliesstext, also Grundgroesse
   mal Zeilenhoehe mal zwei. Die Zeichnung erbt ueber currentColor das
   Akzentgold; sie kommt als festes SVG aus der Vorlage, nicht als Zeichen. */
.sk-rat .sk-rat-kopf__icon {
	margin-block-end: var(--sk-space-xs);
	line-height: 0;
}

.sk-rat .sk-rat-icon {
	inline-size: calc(var(--sk-fs-base) * var(--sk-lh-body) * 2);
	block-size: calc(var(--sk-fs-base) * var(--sk-lh-body) * 2);
	color: var(--sk-color-gold);
}

/* Lange Zusammensetzungen -- "Graduierungen", "Selbstverteidigung" -- duerfen
   im Titel umbrechen, statt auf 390 px ueber den Rand zu laufen. */
.sk-rat .sk-rat-kopf .entry-title,
.sk-rat .sk-rat-kopf__titel {
	overflow-wrap: break-word;
}

/* Die Einleitung des Hubs traegt .entry-content und damit das ganze
   Inhaltsraster -- mitten im Kopf ergaebe das einen zweiten Seitenrand und
   den Sektionsabstand von oben. Im Kopf ist sie schlicht ein Absatz. */
.sk-rat .sk-rat-kopf__intro {
	display: block;
	padding-block: 0;
	margin-block-start: var(--sk-space-md);
	/* Dasselbe feste Mass wie der Lesetext, siehe 1.2 -- die Einleitung ist
	   eine Stufe groesser gesetzt, und mit 70ch stuende sie sonst breiter
	   als jeder Absatz darunter. */
	max-width: var(--sk-rat-spalte);
}

/* Datum und Lesezeit: klein und gedaempft. Bis 480 px stehen sie
   untereinander -- der Zeilenumbruch ist damit gesetzt und nicht dem Zufall
   der Textlaenge ueberlassen, und es kann kein Trennstrich am Anfang einer
   zweiten Zeile haengenbleiben. */
.sk-rat .sk-rat-kopf__meta {
	display: flex;
	flex-direction: column;
	gap: var(--sk-space-3xs);
	margin-block-start: var(--sk-space-sm);
	font-size: var(--sk-fs-small);
	color: var(--sk-color-text-dim);
}

.sk-rat .sk-rat-kopf__datum {
	font-variant-numeric: tabular-nums;
}

@media (min-width: 480px) {
	.sk-rat .sk-rat-kopf__meta {
		flex-direction: row;
		align-items: baseline;
		gap: var(--sk-space-sm);
	}

	/* Der Trenner ist eine gezeichnete Linie, kein Schriftzeichen. */
	.sk-rat .sk-rat-kopf__lesezeit {
		border-inline-start: 1px solid var(--sk-color-border);
		padding-inline-start: var(--sk-space-sm);
	}
}

/* Das Kopfbild. Festes Seitenverhaeltnis, damit hoch- und querformatige
   Anhaenge im Kopf gleich gross wirken; 16 zu 10 liegt zwischen dem
   Kartenformat 3 zu 2 und einem Breitbild und bleibt auf 390 px unter
   einem Drittel der Bildschirmhoehe. */
.sk-rat .sk-rat-kopf__bild {
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	border-radius: var(--sk-radius);
	background-color: var(--sk-color-panel);
}

.sk-rat .sk-rat-kopf__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* ==========================================================================
   3. Inhaltsverzeichnis

   Ein ruhiger Kasten ueber dem Lesetext. Die Vorlage gibt ihn als
   Geschwister von .entry-content aus, also steht er ueber dem Text und
   nicht daneben -- daneben waere ohne Umbau der Vorlage nicht zu haben.

   Bewusst KEIN position: sticky. Auf 390 px frisst eine klebende Liste die
   halbe Bildschirmhoehe, und der Kasten steht ohnehin nur einmal am Anfang.
   ========================================================================== */

.sk-rat .sk-rat-toc {
	/* margin statt padding: der Kasten selbst soll auf der Kante des
	   Lesetextes beginnen, nicht die Flaeche um ihn herum. */
	margin-block-start: var(--sk-space-xl);
	/* Der Kasten steht mit seinem RAHMEN auf der Lesekante, genau wie jeder
	   Absatz darunter: linker Rand gleich Seitenrand plus Einzug, rechts nur
	   der Seitenrand, weil der Deckel die rechte Kante setzt. Seine 24 px
	   Innenabstand ruecken den Text im Kasten ein -- gewollt, ein Kasten
	   darf sich absetzen, nur nicht die Spalte ausfransen. */
	margin-inline: calc(var(--sk-rat-rand) + var(--sk-rat-einzug)) var(--sk-rat-rand);
	/* Genau die Lesespalte, kein Zuschlag. Siehe 1.2 zum festen Mass. */
	max-width: var(--sk-rat-spalte);
	padding: var(--sk-space-md);
	background-color: var(--sk-color-panel);
	border: 1px solid var(--sk-color-border);
	border-radius: var(--sk-radius);
}

/* Der Kasten gehoert zum Text darunter. Ohne diese Kuerzung stuenden der
   Sektionsabstand von .entry-content und der Abstand des Kastens
   uebereinander und rissen beide auseinander. */
.sk-rat .sk-rat-toc + .entry-content {
	padding-block-start: var(--sk-space-xl);
}

/* Die aufklappbare Huelle. display bleibt block, damit <summary> seine
   Listendarstellung und damit sein Aufklapp-Dreieck behaelt. */
.sk-rat .sk-rat-toc__box {
	display: block;
}

/* Die Beschriftung ist die ganze Zeile: Wort und Zaehlung. Sie bleibt
   <summary>, also anklickbar und fuer Vorleseprogramme als Aufklapper
   erkennbar. */
.sk-rat .sk-rat-toc__kopf {
	cursor: pointer;
}

/* Das Dreieck traegt denselben Akzent wie die Nummern der Punkte darunter.
   ::marker nimmt nur wenige Eigenschaften an, color ist eine davon. */
.sk-rat .sk-rat-toc__kopf::marker {
	color: var(--sk-color-gold);
}

/* "Inhalt" ist eine Beschriftung, keine Ueberschrift im Lesefluss -- also
   dieselbe Behandlung wie die Schlagworte der Faktenzeile in inhalt.css. */
.sk-rat .sk-rat-toc__titel {
	font-family: var(--sk-font-heading);
	font-size: var(--sk-fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--sk-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--sk-color-text-dim);
}

/* Die Zahl der Abschnitte. Gedaempft und klein: sie sagt, wie viel im
   zugeklappten Kasten steckt, und soll die Beschriftung nicht ueberholen. */
.sk-rat .sk-rat-toc__zahl {
	margin-inline-start: var(--sk-space-sm);
	font-size: var(--sk-fs-small);
	color: var(--sk-color-text-dim);
}

.sk-rat .sk-rat-toc__liste {
	list-style: none;
	counter-reset: sk-rat-toc;
	margin: var(--sk-space-sm) 0 0;
	padding: 0;
}

.sk-rat .sk-rat-toc__punkt {
	counter-increment: sk-rat-toc;
	position: relative;
	padding-inline-start: var(--sk-space-lg);
	/* Im zweispaltigen Fall darf ein Punkt nicht zwischen den Spalten
	   zerrissen werden. */
	break-inside: avoid;
}

.sk-rat .sk-rat-toc__punkt + .sk-rat-toc__punkt {
	margin-block-start: var(--sk-space-2xs);
}

/* Die Nummer haengt aussen und traegt den Akzent. Sie ist eine Zaehlung,
   kein Ersatz fuer ein Icon. */
.sk-rat .sk-rat-toc__punkt::before {
	content: counter(sk-rat-toc) ".";
	position: absolute;
	inset-inline-start: 0;
	font-family: var(--sk-font-heading);
	font-variant-numeric: tabular-nums;
	color: var(--sk-color-gold);
}

.sk-rat .sk-rat-toc__link {
	color: var(--sk-color-text);
	line-height: var(--sk-lh-body);
	text-decoration: none;
}

.sk-rat .sk-rat-toc__link:hover,
.sk-rat .sk-rat-toc__link:focus-visible {
	color: var(--sk-color-gold);
	text-decoration: underline;
}

/* Ab sieben Kapiteln wird die Liste sonst zu einer langen Leiter vor dem
   Text. Erst ab 768 px, darunter fehlt die Breite fuer zwei Spalten. */
@media (min-width: 768px) {
	.sk-rat .sk-rat-toc__liste:has(> .sk-rat-toc__punkt:nth-child(7)) {
		columns: 2;
		column-gap: var(--sk-space-lg);
	}
}

/* Ab 768 px steht das Verzeichnis offen.

   Auf dem Telefon nahm es bei sieben Eintraegen 428 px ein, also den
   halben Bildschirm vor dem ersten Satz -- dort bleibt es zugeklappt. Ab
   768 px ist Platz genug, und ein Verzeichnis, das man erst aufklappen
   muss, waere dort nur eine zusaetzliche Handlung.

   Geoeffnet wird ueber ::details-content und nicht ueber das Attribut
   open im Markup: open liesse sich per CSS nicht wieder schliessen, und
   die Vorlage wuerde damit eine Darstellungsentscheidung festschreiben,
   die von der Bildschirmbreite abhaengt. Der Browser versteckt den Inhalt
   einer zugeklappten details ueber content-visibility auf genau diesem
   Pseudoelement; Autorenregeln schlagen die Regeln des Browsers, ganz
   ohne !important.

   @supports selector() klammert den ganzen Block, damit ein Browser ohne
   ::details-content nicht das Dreieck verliert und dann mit einem
   zugeklappten Kasten ohne sichtbaren Griff dastuende. Dort bleibt es
   zugeklappt, mit Dreieck, und laesst sich anklicken -- unschoener,
   aber nichts ist kaputt. */
@media (min-width: 768px) {
	@supports selector(::details-content) {
		.sk-rat .sk-rat-toc__box::details-content {
			content-visibility: visible;
			block-size: auto;
		}

		/* Offen und nicht schliessbar: dann ist das Dreieck eine
		   Aufforderung, die ins Leere geht. */
		.sk-rat .sk-rat-toc__kopf {
			list-style: none;
			cursor: default;
		}

		.sk-rat .sk-rat-toc__kopf::-webkit-details-marker {
			display: none;
		}
	}
}

/* ==========================================================================
   4. Lesespalte des Beitrags

   Die content-Spalte des Inhaltsrasters ist bis 1180 px breit. Fuer eine
   Tabelle ist das richtig, fuer Fliesstext nicht: bei 1280 px Bildschirm
   stehen sonst rund 140 Zeichen in einer Zeile. Absaetze und Aufzaehlungen
   bekommen deshalb das Lesemass, Ueberschriften bleiben breit -- dieselbe
   Trennung, die ratgeber-hub.css fuer die Hub-Einleitung trifft.

   Nach der Bildschirm-Abnahme gilt das auch fuer die Ueberschriften. Sie
   liefen bisher ueber die vollen 1180 px und rissen damit eine zweite
   rechte Kante in dieselbe Spalte -- eine Ueberschrift, die 500 px weiter
   rechts endet als ihr eigener Absatz, liest sich nicht als Kopf dieses
   Absatzes. Eine Ausnahme bleibt: die Tabelle, siehe Abschnitt 6.

   Der Deckel ist --sk-rat-spalte und NICHT --sk-measure. Das ist der
   Unterschied zwischen wirkungslos und wirksam: --sk-measure ist 70ch und
   rechnet an der Ueberschrift mit deren 43,8 px grosser Schrift, also auf
   1618 px -- ein Deckel oberhalb der Spaltenbreite setzt nie auf. Die
   Herleitung steht in Abschnitt 1.2.

   Der Einzug aus Abschnitt 1.1 steht an derselben Stelle, damit die linke
   Kante mit der Textkante im Kurz-gesagt-Kasten zusammenfaellt. Unter
   900 px ist er 0px und es bleibt beim bisherigen Stand.

   Die Faktenzeile bleibt aussen vor: inhalt.css stellt sie ab 1100 px
   dreispaltig, und ein Deckel von 70 Zeichen wuerde diese Spalten quetschen.
   ========================================================================== */

.sk-rat .entry-content > p,
.sk-rat .entry-content > ul:not(.sk-fakten),
.sk-rat .entry-content > ol,
.sk-rat .entry-content > dl,
.sk-rat .entry-content > blockquote,
.sk-rat .entry-content > h2,
.sk-rat .entry-content > h3,
.sk-rat .entry-content > h4 {
	margin-inline-start: var(--sk-rat-einzug);
	max-width: var(--sk-rat-spalte);
}

/* ==========================================================================
   5. Bausteine im Beitragstext

   Diese Klassen stehen im gespeicherten Inhalt der zwoelf Beitraege. Sie
   sind Blockklassen, kein Markup der Vorlage -- deshalb haengen sie hier
   zusaetzlich an .entry-content, damit klar bleibt, wo sie vorkommen.
   ========================================================================== */

/* --- 5.1 Kurz gesagt --------------------------------------------------------

   Der Antwortabsatz direkt unter der Ueberschrift. Er beantwortet die
   Suchfrage und muss beim Ueberfliegen gefunden werden, ohne den Text zu
   uebertoenen: Panelflaeche, ein goldener Strich an der linken Kante, mehr
   Innenabstand -- und kein Rahmen ringsum, der ihn zu einem Kasten unter
   vielen machen wuerde.

   Die Strichstaerke ist der kleinste Abstandsschritt und damit eine Stufe
   kraeftiger als die 3 px der Zitatkante in main.css. Das ist gewollt: von
   allen Kaesten der Seite ist dieser der eine, der gefunden werden soll. */

.sk-rat .entry-content > .sk-kurz-gesagt {
	/* Genau die Lesespalte, kein Zuschlag: die Goldkante steht auf derselben
	   Linie wie der erste Buchstabe jedes Absatzes, die rechte Kante des
	   Kastens auf derselben wie deren Zeilenende. Sein Innenabstand rueckt
	   den Text im Kasten ein -- so soll ein Merkkasten aussehen. Die erste
	   Fassung hatte den Kasten stattdessen nach links gezogen, damit sein
	   TEXT auf der Lesekante sitzt; das ergab eine dritte linke und eine
	   dritte rechte Kante in derselben Spalte. */
	max-width: var(--sk-rat-spalte);
	margin-inline-start: var(--sk-rat-einzug);
	padding-block: var(--sk-space-md);
	padding-inline: var(--sk-space-lg) var(--sk-space-md);
	background-color: var(--sk-color-panel);
	border-inline-start: var(--sk-space-3xs) solid var(--sk-color-gold);
	/* Ecken nur rechts: links sitzt die Kante, dort waere eine Rundung ein
	   ausgefranster Strich. */
	border-start-end-radius: var(--sk-radius);
	border-end-end-radius: var(--sk-radius);
}

/* Eine Stufe groesser als der Fliesstext. Die Fettung von "Kurz gesagt:"
   bringt inhalt.css mit, hier ist nichts nachzubauen. */
.sk-rat .entry-content > .sk-kurz-gesagt p {
	font-size: var(--sk-fs-lead);
	max-width: none;
}

/* --- 5.2 Fragenband ---------------------------------------------------------

   Der Fragenblock am Textende. Er ist ein eigener Abschnitt und wird als
   solcher abgesetzt: eigene Flaeche, Goldkante oben als Zaesur -- dieselbe
   Zaesur, die .sk-band--panel im Theme benutzt.

   Die H3 bleiben sichtbarer Text. Sie werden NICHT zu Aufklappern: ihr
   Wortlaut steht wortgleich im FAQ-Schema, und was eingeklappt ist, liest
   weder ein Besucher noch eine Maschine zuverlaessig. */

.sk-rat .entry-content > .sk-faq-band {
	margin-block-start: var(--sk-space-2xl);
	/* Dieselbe Kante wie das Inhaltsverzeichnis und wie der Lesetext: der
	   Kasten steht mit seinem Rahmen in der Lesespalte, sein Innenabstand
	   rueckt den Text darin ein. */
	margin-inline-start: var(--sk-rat-einzug);
	max-width: var(--sk-rat-spalte);
	padding: var(--sk-space-md);
	background-color: var(--sk-color-panel);
	border-block-start: 1px solid rgba(var(--sk-color-gold-rgb), 0.24);
	border-radius: var(--sk-radius);
}

/* "Haeufige Fragen zu ..." ist die Ueberschrift des Bandes, nicht die der
   Seite -- eine Stufe kleiner als eine H2 im Lesefluss. */
.sk-rat .sk-faq-band > h2 {
	font-size: var(--sk-fs-h3);
	margin-block-start: 0;
}

/* Jede Frage bekommt Luft nach oben, ihre Antwort haengt dicht darunter --
   so liest sich der Block als Paare und nicht als Liste. */
.sk-rat .sk-faq-band > h3 {
	position: relative;
	margin-block-start: var(--sk-space-lg);
	padding-inline-start: var(--sk-space-md);
	font-size: var(--sk-fs-h5);
	color: var(--sk-color-heading);
}

.sk-rat .sk-faq-band > h2 + h3 {
	margin-block-start: var(--sk-space-md);
}

/* Der goldene Strich vor der Frage ist eine gezeichnete Flaeche aus zwei
   Abstands-Tokens, kein Schriftzeichen und kein Icon. */
.sk-rat .sk-faq-band > h3::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.6em;
	inline-size: var(--sk-space-xs);
	block-size: var(--sk-space-3xs);
	background-color: var(--sk-color-gold);
}

/* Die Antwort steht auf der Kante der Frage, nicht auf der des Kastens. */
.sk-rat .sk-faq-band > p {
	margin-block-start: var(--sk-space-2xs);
	padding-inline-start: var(--sk-space-md);
	/* Der Kasten deckelt schon; dieser Deckel wird nur wirksam, wenn der
	   Kasten breiter stuende. Er benutzt trotzdem das feste Mass, damit er
	   sich nicht am Schriftgrad der Antwort festmacht. Siehe 1.2. */
	max-width: var(--sk-rat-spalte);
}

/* --- 5.3 Quellenhinweis -----------------------------------------------------

   Ein Absatz mit einem Verweis nach draussen. Klein, gedaempft, mit Luft
   davor -- und kein Kasten: er ist eine Fussnote im Lesefluss, keine
   Aussage fuer sich. Der Verweis selbst behaelt seine Theme-Farbe, sonst
   waere er als Verweis nicht mehr zu erkennen. */

.sk-rat .entry-content > .sk-quelle {
	margin-block-start: var(--sk-space-lg);
	font-size: var(--sk-fs-small);
	color: var(--sk-color-text-dim);
}

/* ==========================================================================
   6. Tabellen

   Die Tabellen der Beitraege heissen heute nur wp-block-table sk-vergleich
   beziehungsweise sk-altersgruppen. Ein anderer Arbeitsgang bringt sie auf
   das Muster .sk-tabelle mit __rollbereich, scope und data-spalte; das
   gestaltet inhalt.css dann vollstaendig, einschliesslich des Umklappens
   unter 640 px.

   Bis dahin muss die alte Form tragen. Die beiden Regeln hier sind so
   gebaut, dass sie dem neuen Markup nicht im Weg stehen:

     - Der Rollbereich sitzt an der Figur. Kommt spaeter der eigene
       __rollbereich hinzu, rollt der, und die Figur hat nichts mehr zu tun.
     - Die Mindestbreite gilt ausdruecklich NUR fuer eine Tabelle ohne
       .sk-tabelle. Mit dem neuen Markup klappt die Tabelle unter 640 px in
       Bloecke um, und eine Mindestbreite wuerde genau dann einen
       waagerechten Ueberlauf erzwingen.
   ========================================================================== */

/* --- 6.1 Ausbruch aus der Lesespalte ------------------------------------

   Die einzige Ausnahme von der einen Lesekante. Eine Vergleichstabelle
   braucht Breite: drei Spalten deutschen Textes auf 680 px ergeben
   Stichwoerter statt Saetzen.

   Der Ausbruch ist SYMMETRISCH -- links wie rechts genau ein Einzug
   Ueberhang. Darin liegt der Unterschied zum Befund: vorher lief die
   Tabelle ueber die vollen 1180 px und ragte damit 0 px nach links und
   500 px nach rechts ueber den Text hinaus. Das sah nicht nach Absicht
   aus, sondern nach Versehen. Mit gleichem Ueberhang auf beiden Seiten
   ist es erkennbar eine Entscheidung.

   Volle Bandbreite kam deshalb NICHT in Frage: symmetrisch kann der
   Ueberhang hoechstens so gross sein wie der Platz links von der
   Lesespalte, und das ist genau der Einzug. Wer mehr will, muss die
   Lesespalte wieder nach links schieben -- und damit den Befund
   zurueckholen.

   Die Fussnote steht in derselben Regel und bekommt deshalb die Kante der
   Tabelle, nicht die des Fliesstextes. Ihr eigener, engerer Deckel aus
   inhalt.css wird hier bewusst ueberschrieben: eine Fussnote, die 200 px
   vor dem Tabellenrand endet, sieht aus wie ein dritter Rand.

   Auch hier ist der Deckel --sk-rat-spalte und nicht --sk-measure. Titel
   und Fussnote tragen andere Schriftgrade als der Fliesstext -- 29,5 und
   14 px --, und mit 70ch stuende der Titel 1163 px breit und die Fussnote
   632 px schmal, waehrend der Rollbereich dazwischen bei 752 px liegt.
   Drei Kanten an einer einzigen Tabelle. Siehe Abschnitt 1.2.

   Unter 900 px ist der Einzug 0px. Die Tabelle steht dann genau so breit
   wie der Fliesstext -- dieselbe Kante, kein Ausbruch, kein Ueberlauf.
   ------------------------------------------------------------------------ */

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

/* --- 6.2 Altes Markup ---------------------------------------------------

   Ein anderer Arbeitsgang bringt die letzten Tabellen auf das Muster
   .sk-tabelle mit __rollbereich, scope und data-spalte; das gestaltet
   inhalt.css dann vollstaendig, einschliesslich des Umklappens unter
   640 px. Bis dahin muss die alte Form tragen.
   ------------------------------------------------------------------------ */

.sk-rat .entry-content > figure.wp-block-table {
	overflow-x: auto;
	scrollbar-color: var(--sk-color-gold-deep) var(--sk-color-panel);
	scrollbar-width: thin;
}

/* Ohne Mindestbreite quetschen sich drei Spalten deutschen Textes auf
   390 px in zwei Woerter je Zeile, statt zu rollen. Das Lesemass der engen
   Variante ist die Grenze, ab der die Spalten wieder lesbar sind. */
.sk-rat .entry-content > figure.wp-block-table > table:not(.sk-tabelle) {
	min-width: var(--sk-measure-tight);
}

/* Die Bildunterschrift der Tabelle: klein, gedaempft -- und linksbuendig,
   weil unter .sk-inhalt alles linksbuendig steht. Cores Blockstil setzt sie
   mittig. */
.sk-rat .entry-content .wp-block-table__caption {
	margin-block-start: var(--sk-space-2xs);
	font-size: var(--sk-fs-small);
	line-height: var(--sk-lh-body);
	color: var(--sk-color-text-dim);
	text-align: start;
}

/* ==========================================================================
   7. Inhaltsbilder
   ========================================================================== */

/* Das Bild steht auf der Kante des Lesetextes, damit Text und Bild eine
   gemeinsame Spalte bilden -- Einzug eingerechnet, sonst waere es das
   einzige Element, das links aus der Spalte herausfaellt. */
.sk-rat .entry-content > .sk-inhaltsbild {
	margin-inline-start: var(--sk-rat-einzug);
	max-width: var(--sk-rat-spalte);
}

/* Der Radius kommt in main.css von .wp-block-image img. Er steht hier noch
   einmal, weil nach main.css noch Plugin-Stile laden, die genau diese Regel
   ueberschreiben -- siehe die Notiz zu height: auto in main.css. Diese
   Datei laeuft zuletzt. */
.sk-rat .entry-content > .sk-inhaltsbild img {
	border-radius: var(--sk-radius);
}

/* Dieselbe Behandlung wie die Bildunterschrift der Tabelle. Cores Blockstil
   setzt sie mittig, unter .sk-inhalt steht alles linksbuendig. */
.sk-rat .entry-content > .sk-inhaltsbild > figcaption {
	margin-block-start: var(--sk-space-2xs);
	font-size: var(--sk-fs-small);
	line-height: var(--sk-lh-body);
	color: var(--sk-color-text-dim);
	text-align: start;
}

/* ==========================================================================
   8. Karten und Raster

   Zwei Listen mit derselben Karte: die Beitraege eines Hubs
   (.sk-rat-liste) und die verwandten Beitraege unter einem Text
   (.sk-rat-verwandt).

   Beide Raster tragen zusaetzlich .sk-grid. Im Theme ist .sk-grid aber eine
   SEKTION -- eigener Sektionsabstand, eigene Rinne, Kinder auf
   Containerbreite und untereinander. Als Raster muss es deshalb erst
   zurueckgesetzt werden; das ist die Luecke, die diese Datei schliesst.

   Die Karten tragen .sk-card. Von dort kommen Rahmen, Radius, der
   Bildausschnitt im Verhaeltnis 3 zu 2 und der langsame Bildzoom beim
   Ueberfahren. Was fehlt, ist der Innenabstand: dieses Markup hat kein
   .sk-card__body, das ihn sonst traegt.
   ========================================================================== */

/* --- 8.1 Abschnitte ---------------------------------------------------- */

/* Drei Kanten in einem Abschnitt.

   Die Bildschirm-Abnahme mass auf beiden Hubs im Abschnitt "Passende Kurse
   in Aachen" drei verschiedene linke Kanten: die Ueberschrift bei 50, der
   erklaerende Satz bei 300, die Kursliste bei 32 Bildpunkten. Derselbe
   Versatz im Abschnitt "Beitraege in diesem Bereich".

   Die Ursache steckt in zwei Regeln aus ratgeber-hub.css, die zusammen
   nicht aufgehen: der Abschnitt bekommt die Rinne als Innenabstand (32 px
   bei 1280), und alle seine Kinder bekommen Containerbreite mit
   margin-inline auto. Fuer ein Kind, das die volle Containerbreite
   ausschoepft, ist auto gleich null -- fuer eines mit eigenem Lesemass
   aber nicht: der Satz mit 680 px Deckel wurde mittig in 1216 px
   gestellt und landete so bei 300. Und die Rinne ist schmaler als der
   Rand, den die Ueberschrift ueber ihren Container bekommt: daher 32
   gegen 50.

   Das Markup kommt aus ratgeber-hub.php und bleibt unangetastet. Beide
   Regeln lassen sich hier von aussen geraderuecken, ohne der alten
   Hub-Darstellung etwas zu nehmen -- diese Datei laedt nach
   ratgeber-hub.css, und .sk-rat davor macht die Auswahl spezifischer.

   Ausdruecklich NICHT gesetzt wird max-width: none auf die Kinder. Der
   Deckel von .sk-hub__kurse-text und .sk-hub__hinweis ist richtig; falsch
   war allein, dass er mittig ausgerichtet wurde. */
.sk-rat .sk-hub__abschnitt {
	padding-inline: var(--sk-rat-rand);
}

.sk-rat .sk-hub__abschnitt > * {
	margin-inline: 0;
}

/* Der Abschnitt auf dem Hub sitzt in .sk-hub__abschnitt und hat seinen Rand
   von dort. Der Abschnitt im Beitrag steht frei im Artikel und bekommt ihn
   hier -- samt einer Haarlinie, die ihn vom Text darueber trennt. Der
   Einzug ist eingerechnet, damit Ueberschrift und Karten auf derselben
   Kante stehen wie der Beitragstext darueber. */
.sk-rat .sk-rat-verwandt {
	margin-inline: calc(var(--sk-rat-rand) + var(--sk-rat-einzug));
	padding-block: var(--sk-space-xl) var(--sk-space-2xl);
	border-block-start: 1px solid var(--sk-color-border);
}

/* Ohne diese Kuerzung stuenden der Sektionsabstand des Textes und der
   Abstand ueber der Haarlinie uebereinander -- bis zu 8 rem Leere zwischen
   letztem Absatz und Trennstrich. */
.sk-rat .entry-content:has(+ .sk-rat-verwandt) {
	padding-block-end: var(--sk-space-md);
}

/* Beide Beschriftungen sind Zwischenueberschriften, nicht der Titel der
   Seite -- eine Stufe unter einer H2 im Lesefluss. */
.sk-rat .sk-rat-liste__titel,
.sk-rat .sk-rat-verwandt__titel {
	font-size: var(--sk-fs-h3);
	margin-block-end: var(--sk-space-md);
}

/* --- 8.2 Raster -------------------------------------------------------- */

.sk-rat .sk-rat-liste__raster,
.sk-rat .sk-rat-verwandt__raster {
	display: grid;
	/* 16 rem ist derselbe Umbruchpunkt wie bei .sk-hub__raster in
	   ratgeber-hub.css: Bereichs- und Beitragskarten sollen auf demselben
	   Bildschirm gleich oft umbrechen. Auf 390 px bleibt es bei einer
	   Spalte, auf 768 px sind es zwei.

	   auto-fill und nicht auto-fit. Der Unterschied zeigt sich genau dann,
	   wenn weniger Karten da sind als Spalten passen: auto-fit klappt die
	   leeren Spuren zusammen, und die eine verbliebene Karte waechst auf
	   die volle Breite des Abschnitts. Genau das stand in der Abnahme --
	   eine einzelne Karte 1180 px breit, ihr Bild 1180 mal 790. Das ist
	   kein Sonderfall, sondern der Normalfall beim Einschalten: elf der
	   zwoelf Beitraege sind noch Entwuerfe.

	   auto-fill laesst die leeren Spuren stehen. Die einzelne Karte behaelt
	   damit genau die Breite, die sie in einer vollen Reihe haette, und
	   steht links -- kein Zentrieren, keine Sonderregel fuer den Einerfall,
	   und nichts aendert sich, sobald die uebrigen Beitraege erscheinen. */
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: var(--sk-space-md);
	/* Sektionsabstand und Rinne von .sk-grid nehmen -- den Rand traegt der
	   Abschnitt, nicht das Raster. */
	margin: 0;
	padding: 0;
	list-style: none;
}

/* .sk-grid gibt seinen Kindern Containerbreite, mittige Raender und einen
   Abstand nach oben. Im Raster sind die Kinder Karten. */
.sk-rat .sk-rat-liste__raster > *,
.sk-rat .sk-rat-verwandt__raster > * {
	max-width: none;
	margin-inline: 0;
	margin-block-start: 0;
	min-width: 0;
}

/* --- 8.3 Karte --------------------------------------------------------- */

.sk-rat .sk-rat-karte {
	background-color: var(--sk-color-panel);
	gap: var(--sk-space-2xs);
	padding-block-end: var(--sk-space-sm);
}

/* Den Innenabstand tragen die Kinder, weil das Bild randlos bleiben muss
   und es kein .sk-card__body gibt, in dem er sonst stuende. */
.sk-rat .sk-rat-karte > * {
	padding-inline: var(--sk-space-sm);
}

.sk-rat .sk-rat-karte > :first-child {
	padding-block-start: var(--sk-space-sm);
}

.sk-rat .sk-rat-karte__bild {
	padding-inline: 0;
}

.sk-rat .sk-rat-karte__bild:first-child {
	padding-block-start: 0;
}

/* Der Verweis um das Bild ist von Haus aus inline; eine Hoehe von 100 %
   liefe dann ins Leere und das Bild spraenge aus dem festen
   Seitenverhaeltnis von .sk-card__media. */
.sk-rat .sk-rat-karte__bild > a {
	display: block;
	block-size: 100%;
}

.sk-rat .sk-rat-karte__titel {
	font-size: var(--sk-fs-h4);
	line-height: var(--sk-lh-heading);
	/* Lange Kampfsportnamen brechen um, statt die Karte zu sprengen. */
	overflow-wrap: anywhere;
}

.sk-rat .sk-rat-karte__titel a {
	color: var(--sk-color-heading);
	text-decoration: none;
}

.sk-rat .sk-rat-karte__titel a:hover,
.sk-rat .sk-rat-karte__titel a:focus-visible {
	color: var(--sk-color-gold);
}

/* Hoechstens drei Zeilen. Die Kurzbeschreibungen kommen aus der
   Rank-Math-Beschreibung und sind unterschiedlich lang; ohne Deckel
   bestimmt die laengste die Hoehe der ganzen Reihe.

   Der Deckel bleibt, obwohl seit der Abnahme schon die Vorlage kuerzt
   (shouraki_ratgeber_kurzbeschreibung, 16 Woerter am Wortende). Beides
   zusammen ist kein Widerspruch, sondern Reihenfolge: die Vorlage
   entscheidet, WO abgeschnitten wird -- immer hinter einem ganzen Wort,
   mit Auslassungszeichen --, der Deckel faengt nur noch den Fall ab, dass
   sechzehn ungewoehnlich lange Woerter in einer sehr schmalen Spalte doch
   ueber drei Zeilen laufen. Dann schuetzt er die Reihenhoehe. Im
   Regelfall greift er gar nicht mehr, und ohne ihn haette eine einzige zu
   lange Beschreibung wieder die ganze Reihe auseinandergezogen. */
.sk-rat .sk-rat-karte__text {
	font-size: var(--sk-fs-small);
	line-height: var(--sk-lh-body);
	color: var(--sk-color-text-muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.sk-rat .sk-rat-karte__meta {
	font-size: var(--sk-fs-small);
	color: var(--sk-color-text-dim);
}

.sk-rat .sk-rat-karte__link {
	font-size: var(--sk-fs-small);
}

/* Der Fuss sitzt unten, damit die Unterkanten einer Reihe auf einer Linie
   enden -- was von beiden zuerst kommt, traegt ihn. */
.sk-rat .sk-rat-karte__meta,
.sk-rat .sk-rat-karte__link {
	margin-block-start: auto;
}

/* Steht die Lesezeit schon unten, folgt der Verweis dicht darunter. */
.sk-rat .sk-rat-karte__meta + .sk-rat-karte__link {
	margin-block-start: 0;
}

.sk-rat .sk-rat-karte__meta:empty {
	display: none;
}

/* Ruhiger Ueberfahr-Zustand. Die deutlichere Rahmenfarbe bringt .sk-card
   schon mit; hier kommt nur die hellere Flaeche dazu. */
.sk-rat .sk-rat-karte:hover,
.sk-rat .sk-rat-karte:focus-within {
	background-color: var(--sk-color-panel-raised);
}

/* Keine Anhebung beim Ueberfahren. main.css hat das Springen der Karten im
   Bestand ausdruecklich abgeschafft; die Bewegung traegt dort der Bildzoom.
   Eine Ratgeberkarte, die als einzige Karte der Website hochfaehrt, waere
   ein Bruch mit dieser Entscheidung. Es bleibt der Farbwechsel darueber,
   und der braucht einen weichen Uebergang. */
@media (prefers-reduced-motion: no-preference) {
	.sk-rat .sk-rat-karte {
		transition:
			border-color var(--sk-transition),
			background-color var(--sk-transition);
	}
}

/* ==========================================================================
   9. Abschlussblock

   .sk-rat-cta traegt sk-band sk-band--panel sk-center. Die Ausrichtung
   bleibt, wie inhalt.css sie setzt: linksbuendig. Hier wird sie nicht
   angefasst.

   Was fehlt, ist das Lesemass. main.css nimmt zentrierte Sektionen von
   seiner Lesemass-Regel aus, und mit der Ruecknahme der Zentrierung stehen
   die Saetze des Abschlusses sonst ueber die volle Containerbreite. Der
   Rand links ist derselbe Ausdruck wie in main.css Abschnitt 5.1: die
   Textspalte beginnt an der Containerkante, nicht an der Sektionskante, und
   steht damit genau unter der Ueberschrift.

   Der Einzug aus Abschnitt 1.1 gilt hier BEWUSST NICHT. Er ordnet die
   Lesespalte, und ein randloses Band ist keine Lesespalte: es zieht sich
   ueber die volle Bildschirmbreite, hat eine eigene Flaeche und beginnt
   seinen Text an der Containerkante -- genauso wie der Kursfinder, der im
   Beitragstext als .sk-booking randlos steht. Der Kurz-gesagt-Kasten ist
   seit der zweiten Abnahme kein Vergleich mehr: er steht jetzt IN der
   Lesespalte, samt Einzug. Bekaeme der Abschlussblock den Einzug, der
   Kursfinder aber nicht, stuende am Ende des Beitrags genau die eine
   abweichende Kante, die dieser Umbau beseitigen soll. Randlose Baender
   sind eine eigene Ebene und liegen alle auf derselben.
   ========================================================================== */

.sk-rat .sk-rat-cta > p {
	max-width: var(--sk-rat-spalte);
	margin-inline: max(0px, calc((100% - var(--sk-container)) / 2)) auto;
}