/* Meta-Zeile eines Beitrags (single.php): Autor links, Fakten + Google-Button rechts.
   Bewusst AUSSERHALB der Vite/Tailwind-Sammlung: ein Rebuild von main.css würde
   Klassen verlieren, die nur im Beitragsinhalt vorkommen (transition, sm:flex, md:flex).
   Siehe RESUME-preferred-source-button.md. */

/* --- Autorenblock: behält seine natürliche Breite, Name bleibt einzeilig --------- */
.postmeta-author { flex-shrink: 0; }
.postmeta-author__name { white-space: nowrap; }

/* unter sm steht der Autor allein in seiner Zeile — dort darf ein sehr langer
   Name wieder umbrechen, statt aus dem Container zu laufen */
@media (max-width: 39.9375rem) {
	.postmeta-author__name { white-space: normal; }
}

/* --- Fakten + Button: rechtsbündig, auch wenn der Button umbricht ---------------- */
/* unter sm: beide Zeilen linksbündig; ab sm: beide rechtsbündig (s. unten) */
.postmeta-facts { justify-content: flex-start; }

/* --- Google-Button «Als bevorzugte Quelle auf Google hinzufügen» ----------------- */
.gpsrc-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: .3125rem .9375rem .3125rem .3125rem;
	border: 1px solid #1a73e8;
	border-radius: 9999px;
	background: #1a73e8;
	box-shadow: 0 1px 3px rgba(26, 115, 232, .35);
	color: #fff;
	font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.25;
	text-decoration: none;
	transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.gpsrc-btn:hover,
.gpsrc-btn:focus-visible {
	background: #1765cc;
	border-color: #1765cc;
	box-shadow: 0 2px 6px rgba(26, 115, 232, .45);
	color: #fff;
}

.gpsrc-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: #fff;
}

.gpsrc-btn__icon svg { width: 1.0625rem; height: 1.0625rem; display: block; }

@media (max-width: 25.9375rem) {
	.gpsrc-btn { font-size: .75rem; padding-right: .75rem; }
	.gpsrc-btn__icon { width: 1.5rem; height: 1.5rem; }
	.gpsrc-btn__icon svg { width: .9375rem; height: .9375rem; }
}

/* ab sm: Autor links, alles andere rechts. +8px Luft zu «Lesezeit», wenn der
   Button in derselben Zeile steht; bei Umbruch bleibt er rechtsbündig. */
@media (min-width: 40rem) {
	.postmeta-facts { justify-content: flex-end; }
	.gpsrc-btn { margin-left: .5rem; }
}

/* --- CTA unter dem Beitrag: «Artikel gefallen? Helfen Sie uns beim Wachsen» ------ */
/* Steht am Ende des Beitrags (nach dem FAQ-Block, vor der Autorenbox) und wiederholt
   den Google-Button aus der Meta-Zeile – diesmal mittig und mit Begründung. */
.gpsrc-cta {
	margin-top: 3rem;
	padding: 1.75rem 1.25rem;
	border: 1px solid #d8e7dc;
	border-radius: 1rem;
	background: linear-gradient(180deg, #f5faf6 0%, #edf5ef 100%);
	text-align: center;
}

.gpsrc-cta__title {
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	color: #111827;
}

.gpsrc-cta__text {
	margin: 0 auto 1.25rem;
	max-width: 34rem;
	font-size: .9375rem;
	line-height: 1.6;
	color: #4b5563;
}

.gpsrc-cta__action { display: flex; justify-content: center; }

.gpsrc-cta__note {
	margin: .875rem 0 0;
	font-size: .75rem;
	line-height: 1.5;
	color: #6b7280;
}

/* im CTA darf der Button etwas grösser sein als in der Meta-Zeile; die
   margin-left-Regel ab sm wird hier bewusst überschrieben (mittig!).
   text-decoration: none muss hier wiederholt werden — innerhalb von .prose
   gewinnt sonst die Typography-Regel für Links gegen .gpsrc-btn. */
.gpsrc-cta .gpsrc-btn {
	margin: 0;
	text-decoration: none;
	max-width: 100%;
	font-size: .875rem;
	padding: .375rem 1.125rem .375rem .375rem;
}

.gpsrc-cta .gpsrc-btn__icon { width: 1.875rem; height: 1.875rem; }
.gpsrc-cta .gpsrc-btn__icon svg { width: 1.125rem; height: 1.125rem; }

@media (min-width: 40rem) {
	.gpsrc-cta { padding: 2.25rem 2rem; }
}

@media (max-width: 25.9375rem) {
	.gpsrc-cta { padding: 1.5rem 1rem; }
	.gpsrc-cta__title { font-size: 1.0625rem; }
	.gpsrc-cta .gpsrc-btn { font-size: .8125rem; padding-right: 1rem; }
}

/* ================================================================================
   KOKON-SCHIEBER im Fuß des Artikels (parts/kokon-slider.php)
   ================================================================================
   Steht hier und nicht in einer eigenen Datei: post-meta.css wird bei genau
   derselben Bedingung geladen (is_single), eine zweite Datei wäre ein fünfter
   render-blockierender Stylesheet-Request im <head> für 1,5 KB gzip.

   KEIN JAVASCRIPT. Die Spur ist ein Grid mit waagerechtem Überlauf und
   CSS scroll-snap: am Telefon wird gewischt, am Rechner stehen vier Karten
   nebeneinander, der Rest wird gescrollt. Der Block steht im Fuß der Seite —
   jede nachgeladene Bibliothek wäre dort reiner Verlust. */

.kokon-slider {
	margin-block: 2.5rem 3rem;
	padding-inline: .75rem;
}

/* --- die Spur ------------------------------------------------------------ */

.kokon-slider__spur {
	display: grid;
	grid-auto-flow: column;
	/* vier Karten und der Anfang der fuenften: der angeschnittene Rand ist der
	   einzige Hinweis darauf, dass es weitergeht – Pfeile gaebe es nur mit JS.
	   Die Breite ist FEST und hängt nicht an der Zahl der Karten: ein Schieber
	   sieht auf jeder Seite gleich aus, ob nun zwei Karten darin stehen oder
	   zwölf. Zwischenzeitlich stand hier minmax(..., 1fr), damit kleine Kokons
	   die Reihe füllen — dabei wurden zwei Karten aber 480 px breit und trugen
	   Fotos, die größer waren als die Bilder im Artikel darüber. Anton hat sich
	   am 12.09.2026 für die feste Breite entschieden: lieber rechts Platz als
	   von Seite zu Seite wechselnde Kartengrößen. */
	grid-auto-columns: calc((100% - 4 * 1.5rem) / 4.35);
	gap: 1.5rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;       /* kein Zurückblättern des Browsers */
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Platz für den Schatten der Karten und für die Bildlaufleiste */
	padding-block-end: 1rem;
	/* Block und Karten stehen bündig zum Fließtext des Artikels: dessen Spalte
	   beginnt 12 px rechts vom Containerrand, der Block stand vorher linksbündig
	   am Container. scroll-padding hält dieselbe Kante beim Einrasten ein. */
	scroll-padding-inline-start: .75rem;
	scrollbar-width: thin;
	scrollbar-color: var(--color-primary-300, #9ec5a5) transparent;
}

/* Ziehen mit der Maus: js/kokon-slider.js setzt --ziehbar, wenn die Reihe
   ueberhaupt ueber das Fenster hinausgeht, und --zieht fuer die Dauer der Geste.
   Ohne Skript bleibt alles wie zuvor — gewischt, gescrollt und getastet wird
   auch dann. */
.kokon-slider__spur--ziehbar {
	cursor: grab;
}

.kokon-slider__spur--zieht {
	cursor: grabbing;
	/* sonst markiert das Ziehen die Überschriften der Karten */
	user-select: none;
	-webkit-user-select: none;
	/* beide würden gegen die Maus arbeiten: smooth animiert jede Zuweisung an
	   scrollLeft, snap zöge sofort auf die nächste Karte zurück */
	scroll-behavior: auto;
	scroll-snap-type: none;
}

.kokon-slider__spur:focus-visible {
	outline: 2px solid var(--color-primary-500, #3d8b4f);
	outline-offset: 4px;
}

.kokon-slider__zelle {
	scroll-snap-align: start;
	min-width: 0; /* sonst sprengt langer Text die Spalte */
	display: flex;
}

.kokon-slider__zelle > * {
	width: 100%;
}

/* Die Bildlaufleiste wird oben ueber scrollbar-width/scrollbar-color gestaltet.
   Zusaetzliche ::-webkit-scrollbar-Regeln standen hier und waren wirkungslos:
   Chrome ignoriert sie seit Version 121, sobald die Standard-Eigenschaften
   gesetzt sind. */

/* --- Karte auf die Rubrik Geburtsblumen ---------------------------------- */

.kokon-slider__rubrik {
	background: var(--color-primary-100, oklch(95% .04 145));
}

.kokon-slider__rubrik-flaeche {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .5rem;
	height: 100%;
	padding: 1.75rem 1.5rem;
	text-decoration: none;
	color: inherit;
}

.kokon-slider__rubrik-zeichen {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	/* -600 statt -500: auf dem hellgruenen Grund der Karte kommt -500 nur auf
	   2,97:1 und verfehlt die geforderten 3:1 fuer grosse Schrift um Haaresbreite.
	   -600 liegt bei 4,5:1. */
	color: var(--color-primary-600, #2f7a3d);
}

.kokon-slider__rubrik-titel {
	font-weight: 700;
	font-size: 1.0625rem;
}

.kokon-slider__rubrik-flaeche:hover .kokon-slider__rubrik-titel,
.kokon-slider__rubrik-flaeche:focus-visible .kokon-slider__rubrik-titel {
	text-decoration: underline;
}

.kokon-slider__rubrik-text {
	font-size: .875rem;
	line-height: 1.45;
	color: #4b5563;
}

/* --- schmalere Fenster --------------------------------------------------- */

@media (max-width: 64rem) { /* 1024px: drei Karten */
	.kokon-slider__spur {
		grid-auto-columns: calc((100% - 3 * 1.25rem) / 3.3);
		gap: 1.25rem;
	}
}

@media (max-width: 48rem) { /* 768px: zwei Karten */
	.kokon-slider__spur {
		grid-auto-columns: calc((100% - 2 * 1.25rem) / 2.25);
	}
}

@media (max-width: 34rem) { /* 544px: eine Karte, die nächste lugt hervor —
	                            das zeigt ohne Pfeile, dass es weitergeht */
	.kokon-slider__spur {
		grid-auto-columns: 82%;
		gap: 1rem;
	}
}

/* Wer Bewegung reduziert haben will, bekommt kein weiches Scrollen. */
@media (prefers-reduced-motion: reduce) {
	.kokon-slider__spur {
		scroll-behavior: auto;
	}
}

/* ================================================================================
   INHALTSVERZEICHNIS: der Abschnitt, den der Leser gerade vor Augen hat
   ================================================================================
   Die Marke setzt js/toc-aktiv.js (Klasse .kamatoc-aktiv + aria-current). Ohne
   das Skript bleibt die Liste genau so, wie sie vorher war.

   Gestaltet ist die Marke als kleines Dreieck vor dem Eintrag, dazu das
   dunklere Grün des Hauses. KEIN Fettdruck und KEIN Balken an der Seite: der
   Eintrag soll sich abheben, ohne dass die Liste bei jedem Abschnittswechsel
   ihr Gewicht verschiebt und die Zeilen neu umbrechen.

   Der Platz für das Dreieck ist bei ALLEN Einträgen reserviert (padding-left),
   sonst rückte der Text beim Wechsel um ein paar Pixel zur Seite. */

.kamatoc a {
	position: relative;
	padding-left: 1rem;
}

.kamatoc .kamatoc-aktiv {
	color: var(--color-primary-700, #245f30);
	/* die Vorlage legt border-l-2 an; er bleibt unsichtbar */
	border-left-color: transparent;
	font-weight: inherit;
}

/* Reines CSS-Dreieck aus Rahmen: keine Schrift, kein Symbolzeichen, das je nach
   System anders aussähe. currentColor nimmt die Linkfarbe von oben mit. */
.kamatoc .kamatoc-aktiv::before {
	content: "";
	position: absolute;
	left: .0625rem;
	top: .5em;
	width: 0;
	height: 0;
	border-top: .3em solid transparent;
	border-bottom: .3em solid transparent;
	border-left: .4em solid currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.kamatoc a {
		transition: none;
	}
}