/* Blog-Übersicht /blog (22.10.2026) im Stil der Startseite "A poliert". Grundstil, Farben, Schriften, Knöpfe, Gruppe/Newsletter und Fuß
   kommen aus lcb-startseite/assets/sp.css (body.lcb-sp); hier nur die Bausteine dieser Seite. Handy zuerst, ab 600 px Tablet, ab 900 px PC.
   Keine Pillen-Knöpfe und keine gerahmten Karten (Lehre Startseite 05.10.: Baukasten-Optik). */

/* 1 Einstieg */
.bl-held { padding: 18px 0 26px; background: var(--sp-papier); }
.bl-held__raster { display: flex; flex-direction: column; gap: 18px; }
.lcb-sp .bl-held__gruss { margin: 0 0 2px; font-family: var(--sp-hand); font-weight: 700; font-size: 22px; line-height: 1.3; color: var(--sp-marke-text); }
.lcb-sp .bl-held .sp-h1 { margin-bottom: 8px; }
.lcb-sp .bl-held__lead { margin: 0; font-size: 16px; line-height: 1.6; color: var(--sp-weich); max-width: 640px; }
.lcb-sp .bl-held__lead strong { color: var(--sp-tinte); }
.lcb-sp .bl-autorbox { margin: 0; background: var(--sp-weiss); }

/* Sprungleiste zu den Themen (Entwurf a): Textlinks mit Emoji, gestrichelt getrennt wie die drei Wege der Startseite */
.bl-sprung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin-top: 18px; border-top: 2px dashed var(--sp-linie); padding-top: 6px; }
.lcb-sp .bl-sprung a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 0; border-bottom: 1px solid var(--sp-linie); color: var(--sp-tinte); font-weight: 700; font-size: 15px; line-height: 1.25; text-decoration: none; }
.lcb-sp .bl-sprung a:hover { text-decoration: underline; text-underline-offset: 3px; }
.bl-sprung span { font-size: 18px; }

/* 2 Hier anfangen */
.bl-start { background: var(--sp-weiss); }
.bl-start__raster { display: flex; flex-direction: column; margin-top: 8px; }
.lcb-sp .bl-start__karte { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--sp-linie); color: var(--sp-tinte); text-decoration: none; }
.bl-start__karte img, .bl-start__karte .bl-karte__ohne { grid-row: 1 / span 2; width: 96px; height: 72px; object-fit: cover; border-radius: 8px; }
.bl-start__notiz { font-family: var(--sp-hand); font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--sp-marke-text); }
.bl-start__titel { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-weight: 800; font-size: 17px; line-height: 1.3; }
.bl-start__titel .sp-pfeil { margin-top: 2px; color: var(--sp-marke-text); }
.lcb-sp .bl-start__karte:hover .bl-start__titel { text-decoration: underline; text-underline-offset: 3px; }
/* großer Einstieg: Bild oben, gelber Aufkleber wie "-30 kg" der Startseite */
.lcb-sp .bl-start__karte--gross { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding-top: 4px; }
.bl-start__karte--gross img, .bl-start__karte--gross .bl-karte__ohne { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.bl-start__karte--gross .bl-start__titel { font-size: 20px; }
.bl-start__karte--gross::before {
	content: "Hier starten!"; position: absolute; left: 12px; top: 14px; z-index: 1; background: var(--sp-sonne); color: var(--sp-tinte); font-family: var(--sp-hand);
	font-weight: 700; font-size: 20px; line-height: 1.3; padding: 2px 12px; border-radius: 6px; transform: rotate(-4deg); box-shadow: 0 6px 16px rgba(31, 40, 64, .15);
}

/* 3 Beiträge: Karten. Handy Entwurf a als Liste (Bild links), Entwurf b als zwei Spalten mit Bild oben */
.bl-thema { background: var(--sp-papier); }
.bl-thema--weiss { background: var(--sp-weiss); }
.bl-thema .sp-text { margin-bottom: 4px; }
.bl-raster { display: flex; flex-direction: column; }
.lcb-sp .bl-karte { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--sp-linie); color: var(--sp-tinte); text-decoration: none; min-width: 0; }
.bl-karte:last-child { border-bottom: 0; }
.bl-karte img, .bl-karte__ohne { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; background: #efe8da; display: block; }
.bl-karte__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl-karte__titel { font-weight: 800; font-size: 16px; line-height: 1.3; }
.bl-karte__thema { font-size: 12px; font-weight: 700; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--sp-gruen); }
.lcb-sp .bl-karte:hover .bl-karte__titel { text-decoration: underline; text-underline-offset: 3px; }

.lcb-blog--b .bl-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; margin-top: 14px; }
.lcb-blog--b .bl-karte { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border: 0; }
.lcb-blog--b .bl-karte img, .lcb-blog--b .bl-karte__ohne { width: 100%; height: auto; aspect-ratio: 3 / 2; }
.lcb-blog--b .bl-karte__titel { font-size: 15px; -webkit-hyphens: auto; hyphens: auto; }   /* zwei schmale Spalten am Handy: deutsche Silbentrennung statt Bruch mitten im Wort */
.lcb-blog--b .bl-alle { background: var(--sp-papier); }

/* Tagebuch: schlichte nummerierte Liste */
.bl-tagebuch { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: bl-tag; }
.bl-tagebuch li { counter-increment: bl-tag; margin: 0; border-bottom: 1px dashed var(--sp-linie); }
.lcb-sp .bl-tagebuch a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 0; color: var(--sp-tinte); font-weight: 700; font-size: 16px; line-height: 1.35; text-decoration: none; }
.bl-tagebuch a::before { content: counter(bl-tag); flex: none; width: 28px; font-family: var(--sp-hand); font-weight: 700; font-size: 20px; color: var(--sp-marke-text); }
.lcb-sp .bl-tagebuch a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Filter (Entwurf b): Text-Reiter mit Unterstrich statt Pillen; am Handy seitlich wischbar */
.bl-filter { display: flex; gap: 4px 18px; overflow-x: auto; overscroll-behavior-x: contain; margin: 6px calc(-1 * var(--sp-rand)) 0; padding: 0 var(--sp-rand); border-bottom: 1px solid var(--sp-linie); scrollbar-width: none; }
.bl-filter[hidden] { display: none; }
.bl-filter::-webkit-scrollbar { display: none; }
.lcb-sp .bl-filter__knopf {
	flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; margin: 0; padding: 0 2px; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
	background: transparent; color: var(--sp-weich); font-family: var(--sp-text); font-weight: 700; font-size: 15px; line-height: 1.2; white-space: nowrap; cursor: pointer; box-shadow: none;
}
.lcb-sp .bl-filter__knopf:hover, .lcb-sp .bl-filter__knopf:focus { background: transparent; color: var(--sp-tinte); }
.lcb-sp .bl-filter__knopf[aria-pressed="true"] { color: var(--sp-tinte); border-bottom-color: var(--sp-marke); }
.lcb-sp .bl-filter__stand { margin: 10px 0 0; min-height: 21px; }
.bl-karte[hidden] { display: none !important; }

/* Gruppe/Newsletter: wie Startseite */
.bl-gruppe { background: var(--sp-weiss); }

@media (min-width: 600px) {
	.bl-held { padding: 32px 0 40px; }
	.bl-sprung { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.bl-start__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
	.lcb-sp .bl-start__karte, .lcb-sp .bl-start__karte--gross { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 0; border: 0; }
	.bl-start__karte img, .bl-start__karte .bl-karte__ohne { width: 100%; height: auto; aspect-ratio: 3 / 2; }
	.bl-start__karte--gross { grid-column: 1 / -1; }
	.bl-start__karte--gross img, .bl-start__karte--gross .bl-karte__ohne { aspect-ratio: 21 / 9; }
	.bl-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; margin-top: 16px; }
	.lcb-sp .bl-karte { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border: 0; }
	.bl-karte img, .bl-karte__ohne { width: 100%; height: auto; aspect-ratio: 3 / 2; }
	.lcb-blog--b .bl-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
	.lcb-blog--b .bl-karte__titel { font-size: 16px; }
	.bl-tagebuch { columns: 2; column-gap: 32px; }
	.bl-tagebuch li { break-inside: avoid; }
}

@media (min-width: 900px) {
	.bl-held { padding: 48px 0 56px; }
	.bl-held__raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
	.lcb-sp .bl-held__gruss { font-size: 28px; }
	.lcb-sp .bl-held__lead { font-size: 19px; }
	.bl-sprung { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; margin-top: 28px; }
	.lcb-sp .bl-sprung a { font-size: 16px; }
	/* PC: großer Einstieg links, die drei weiteren als Liste rechts (Bild links, Notiz und Titel daneben) */
	.bl-start__raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: repeat(3, auto); gap: 0 48px; align-items: center; }
	.bl-start__karte--gross { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
	.bl-start__karte--gross img, .bl-start__karte--gross .bl-karte__ohne { aspect-ratio: 16 / 10; }
	.lcb-sp .bl-start__karte:not(.bl-start__karte--gross) { grid-column: 2; display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px dashed var(--sp-linie); }
	.lcb-sp .bl-start__karte:not(.bl-start__karte--gross):last-child { border-bottom: 0; }
	.bl-start__karte:not(.bl-start__karte--gross) img, .bl-start__karte:not(.bl-start__karte--gross) .bl-karte__ohne { grid-row: 1 / span 2; width: 150px; height: 112px; aspect-ratio: auto; }
	.bl-start__karte--gross .bl-start__titel { font-size: 26px; }
	.bl-start__karte--gross::before { font-size: 26px; left: 18px; top: 18px; }
	.bl-start__notiz { font-size: 19px; }
	.bl-start__titel { font-size: 18px; }
	.bl-raster, .lcb-blog--b .bl-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
	.bl-karte__titel, .lcb-blog--b .bl-karte__titel { font-size: 17px; }
	.lcb-sp .bl-filter__knopf { font-size: 16px; }
	.bl-filter { margin: 10px 0 0; padding: 0; flex-wrap: wrap; overflow: visible; }
}