/* Blog im neuen Look (19.10.2026) – gehört zu build.mjs + templates/. Gleiche Sprache wie About/Work/Contact: Raster 150–1290 (Handy 20 px),
   Schrift 45 px innen, Fraunces-Titel, feine Linien, grün nur als Akzent.
   .bt-  = Artikelseite (Kopf ruhig: Kategorie · Datum · Lesezeit, Titel, Titelbild – Thomas 19.10.: „ja, versuchen wir es mal so“)
   .bk-  = Artikel-Karten (Startseite, Übersicht, Kategorien, Weiterlesen)
   Blocs erzwingt Textfarben mit !important → eigene Farben ebenfalls mit !important. */
.bt-kopf, .bt-bloc, .bt-liste, .bt-weiter { --b-gruen: var(--swatch-var-2425); --b-text: var(--swatch-var-5803); --b-titel: var(--swatch-var-5657);
	--b-linie: rgba(28, 25, 23, .14); --b-innen: 45px; }
@media (max-width: 991.98px) { .bt-kopf, .bt-bloc, .bt-liste, .bt-weiter { --b-innen: 32px; } }
@media (max-width: 575.98px) { .bt-kopf, .bt-bloc, .bt-liste, .bt-weiter { --b-innen: 20px; } }
@media (max-width: 1199.98px) { .bt-bloc .container, .bt-liste .container, .bt-weiter .container { padding-left: 20px; padding-right: 20px; } }

/* ---------- Artikel: Kopf ---------- */
.bt-kopf .seitenkopf.row { border: 0; }
.bt-kopf.sk-bloc { padding-bottom: 0; }
.bt-kopf .sk-titel { max-width: 22ch; }
.bt-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 28px !important; padding-bottom: 0 !important; }
.bt-meta a { color: var(--b-gruen) !important; text-decoration: none !important; }
.bt-meta a:hover { text-decoration: underline !important; text-underline-offset: 4px; }
.bt-meta > * + *::before { content: "·"; margin-right: 12px; opacity: .5; } /* Punkt gehört zum folgenden Teil – bricht nie allein am Zeilenende */
.bt-meta > * { white-space: nowrap; }
.bt-titelbild { border-radius: 6px; overflow: hidden; background: rgba(61, 158, 142, .08); }
.bt-titelbild img { display: block; width: 100%; height: 100%; object-fit: cover; }
html.bew .bt-titelbild[data-bw] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round 6px); transition: clip-path 1.4s var(--bw-kurve); }
html.bew .bt-titelbild[data-bw].da { clip-path: inset(0 0 0 0 round 6px); }

/* ---------- Artikel: Text + Seitenspalte ---------- */
.bt-bloc { padding: 88px 0 120px; }
.bt-raster { display: grid; grid-template-columns: 240px minmax(0, 700px); column-gap: 110px; padding: 0 var(--b-innen); }
.bt-seite-innen { position: sticky; top: 120px; display: flex; flex-direction: column; align-items: flex-start; }
.bt-klein { margin: 0 0 6px !important; font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif !important; font-size: 12px !important; letter-spacing: .1em;
	text-transform: uppercase; color: var(--b-text) !important; opacity: .55; }
.bt-autor { margin: 0 0 28px !important; font-family: "FrauncesFein", Georgia, serif !important; font-weight: 300; font-size: 22px !important; line-height: 1.2 !important; }
.bt-autor a { color: var(--b-titel) !important; text-decoration: none !important; }
.bt-teilen { margin-bottom: 30px; display: flex; gap: 6px; }
.bt-teilen a .a2a_svg { border-radius: 4px !important; background-color: transparent !important; }
.bt-teilen a .a2a_svg path { fill: var(--b-gruen) !important; }
.bt-teilen a { padding: 0 !important; border: 1px solid var(--b-linie); border-radius: 4px; }
.bt-pfeil { font-family: "DMMono-Light", ui-monospace, monospace; font-size: 14px; color: var(--b-gruen) !important; text-decoration: none !important; }
.bt-pfeil:hover { text-decoration: underline !important; text-underline-offset: 4px; }

.bt-text { color: var(--b-text); }
.bt-text p, .bt-text li { font-size: 18.5px !important; line-height: 1.75 !important; color: var(--b-text) !important; }
.bt-text p { margin: 0 0 1.15em !important; }
.bt-einleitung p:first-child { font-size: 22px !important; line-height: 1.6 !important; }
.bt-text h2 { margin: 2.1em 0 .7em !important; font-family: "FrauncesFein", Georgia, serif !important; font-weight: 250 !important; font-size: clamp(28px, 1.2rem + 1.2vw, 38px) !important;
	line-height: 1.15 !important; color: var(--b-titel) !important; text-wrap: balance; }
.bt-text h3 { margin: 1.8em 0 .5em !important; font-family: "FrauncesFein", Georgia, serif !important; font-weight: 300 !important; font-size: 24px !important; color: var(--b-titel) !important; }
.bt-text section:first-of-type h2 { margin-top: 1.6em !important; }
.bt-text ul, .bt-text ol { margin: 0 0 1.3em; padding-left: 1.3em; }
.bt-text ul { list-style: none; padding-left: 0; }
.bt-text ul li { position: relative; padding-left: 26px; margin-bottom: .45em; }
.bt-text ul li::before { content: ""; position: absolute; left: 2px; top: .78em; width: 7px; height: 7px; border-radius: 50%; background: var(--b-gruen); }
.bt-text ol li { padding-left: 6px; margin-bottom: .45em; }
.bt-text ol li::marker { color: var(--b-gruen); font-family: "FrauncesFein", Georgia, serif; }
.bt-text blockquote { margin: 1.6em 0; padding: 4px 0 4px 26px; border-left: 2px solid var(--b-gruen); }
.bt-text blockquote p { font-family: "FrauncesFein", Georgia, serif !important; font-weight: 300; font-style: italic; font-size: 24px !important; line-height: 1.45 !important; }
.bt-text a { color: var(--b-gruen) !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bt-text strong { font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif; font-weight: 400; color: var(--b-titel); }
.bt-text .bt-bild { display: block; width: 100%; height: auto; border-radius: 6px; margin: 1.6em 0; }
@media (max-width: 991.98px) {
	.bt-bloc { padding: 56px 0 88px; }
	.bt-raster { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
	.bt-seite { order: 2; border-top: 1px solid var(--b-linie); padding-top: 28px; }
	.bt-seite-innen { position: static; }
}
@media (max-width: 575.98px) {
	.bt-text p, .bt-text li { font-size: 17.5px !important; }
	.bt-einleitung p:first-child { font-size: 20px !important; }
}
.bt-kontakt.ab-einzel { padding-bottom: 32px; }

/* ---------- Weiterlesen ---------- */
.bt-weiter { padding: 0 0 104px; }
.bt-weiter-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 28px 0 32px; border-top: 1px solid var(--b-linie); }
.bt-etikett { margin: 0 !important; font-family: "InterTight-Light", "Helvetica Neue", Arial, sans-serif !important; font-weight: 300; font-size: 19.2px !important; color: var(--b-gruen) !important; }

/* ---------- Karten ---------- */
.bk { display: grid; align-content: start; gap: 22px; color: var(--swatch-var-5803) !important; text-decoration: none !important; }
.bk-bild { display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 10; background: rgba(61, 158, 142, .08); }
.bk-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.44, 0, .28, .99); }
.bk-inhalt { display: flex; flex-direction: column; align-items: flex-start; }
.bk-etikett { font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--swatch-var-2425) !important; }
.bk-titel { margin-top: 12px; font-family: "FrauncesFein", Georgia, serif; font-weight: 250; font-size: clamp(25px, 1rem + 1vw, 31px); line-height: 1.16; color: var(--swatch-var-5657) !important;
	text-wrap: balance; }
.bk-text { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--swatch-var-5803) !important; opacity: .85; text-wrap: pretty; }
.bk-mehr { margin-top: 18px; font-family: "DMMono-Light", ui-monospace, monospace; font-size: 14px; color: var(--swatch-var-2425) !important; transition: transform .35s cubic-bezier(.44, 0, .28, .99); }
@media (hover: hover) { .bk:hover .bk-bild img { transform: scale(1.04); } .bk:hover .bk-mehr { transform: translateX(5px); } .bk:hover .bk-titel { color: var(--swatch-var-2425) !important; } }
.bk-titel { transition: color .3s ease; }
.bk-reihe.bk-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; row-gap: 72px; }
.bk-gross { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 64px; align-items: center; }
.bk-gross .bk-bild { aspect-ratio: 16 / 10; }
.bk-gross .bk-titel { font-size: clamp(30px, 1.2rem + 1.9vw, 46px); line-height: 1.1; }
.bk-gross .bk-text { font-size: 18px; }
@media (max-width: 991.98px) { .bk-gross { grid-template-columns: minmax(0, 1fr); row-gap: 22px; } }
@media (max-width: 767.98px) { .bk-reihe.bk-zwei { grid-template-columns: minmax(0, 1fr); row-gap: 56px; } }
.bk-leer { margin: 0 !important; padding: 40px var(--b-innen); font-family: "FrauncesFein", Georgia, serif !important; font-weight: 300; font-size: 26px !important; color: var(--b-titel) !important; }

/* Übersicht + Kategorien */
.bt-liste { padding: 0 0 120px; }
.bk-kategorien { display: flex; flex-wrap: wrap; gap: 6px 30px; margin: 0 0 56px; padding: 0 0 18px; border-bottom: 1px solid var(--b-linie); }
.bk-kategorien a { position: relative; font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif; font-size: 15px; color: var(--b-text) !important; text-decoration: none !important; padding: 4px 0; }
.bk-kategorien a span { margin-left: 6px; font-family: "FrauncesFein", Georgia, serif; font-size: 13px; color: var(--b-gruen) !important; }
.bk-kategorien a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -19px; height: 1px; background: var(--b-gruen); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.44, 0, .28, .99); }
.bk-kategorien a.an, .bk-kategorien a:hover { color: var(--b-gruen) !important; }
.bk-kategorien a.an::after, .bk-kategorien a:hover::after { transform: none; }
.bk-erster { margin-bottom: 88px; }
.bk-kat > .bk-gross { grid-column: 1 / -1; }
@media (max-width: 575.98px) { .bk-kategorien { gap: 4px 22px; margin-bottom: 40px; } .bk-kategorien a { font-size: 14.5px; } .bk-erster { margin-bottom: 56px; } }
.bt-kat-kopf .sk-einleitung:empty { display: none; }
.bt-kat-kopf .sk-etikett a { color: inherit !important; text-decoration: none !important; }

/* Startseite: Karten unter „Thinking out loud.“ */
#bloc-18-42451 .bk-reihe { margin-top: 8px; }
.bk-alle { grid-column: 1 / -1; justify-self: start; font-family: "DMMono-Light", ui-monospace, monospace; font-size: 14px; color: var(--swatch-var-2425) !important; text-decoration: none !important; margin-top: -24px; }
.bk-alle:hover { text-decoration: underline !important; text-underline-offset: 4px; }
.bt-kat-kopf .sk-zeichen .balken { transform-origin: bottom !important; } /* Balken wachsen vom Boden (Villa-Zeichnung Hospitality) */
@media (max-width: 575.98px) { .bt-meta a { flex-basis: 100%; } .bt-meta a + *::before { content: none; } } /* Handy: Kategorie eigene Zeile, darunter „Monat Jahr · Lesezeit“ – kein Punkt am Zeilenanfang */

/* ---------- Artikelkopf fest B (Thomas 19.10.: „es ist auf alle fälle B“): Bild rechts im Seitenkopf-Rahmen, Titel unten links wie alle Unterseiten;
   Handy: Bild oben im Rahmen, darunter Kategorie/Datum/Titel. Ersetzt die Regeln „Artikel: Kopf“ oben, wo sie sich widersprechen. ---------- */
.bt-kopf-innen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border: 1px solid var(--swatch-var-2425); border-radius: 6px; }
.bt-kopf .seitenkopf .sk-inhalt { min-height: var(--sk-h); padding: 40px 0 48px 44px; }
.bt-kopf .sk-titel { font-size: clamp(36px, 1.4rem + 2.4vw, 64px) !important; }
.bt-kopf .bt-meta { margin-bottom: auto !important; padding-bottom: 32px !important; }
.bt-titelbild { align-self: center; margin: 40px 44px 40px 0; aspect-ratio: 4 / 3; }
@media (max-width: 991.98px) {
	.bt-kopf-innen { grid-template-columns: minmax(0, 1fr); }
	.bt-titelbild { order: -1; margin: 24px 24px 0; aspect-ratio: 3 / 2; }
	.bt-kopf .seitenkopf .sk-inhalt { min-height: 0; padding: 28px 24px 32px; }
	.bt-kopf .bt-meta { margin-bottom: 0 !important; padding-bottom: 22px !important; }
}
@media (max-width: 575.98px) { .bt-titelbild { margin: 16px 16px 0; } .bt-kopf .seitenkopf .sk-inhalt { padding: 22px 16px 26px; } }
/* Titel darf nie ins Bild laufen (Thomas 19.10., Test „Das ist ein Test-Blogbeitrag“: langes Wort lief bis an das Bild): Abstand zur Bildspalte,
   Spalte darf schrumpfen, lange Wörter brechen (mit Trennstrich, wo der Browser kann) */
.bt-kopf-innen > .seitenkopf { min-width: 0; }
.bt-kopf .seitenkopf .sk-inhalt { padding-right: 48px; }
.bt-kopf .sk-titel { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
@media (max-width: 991.98px) { .bt-kopf .seitenkopf .sk-inhalt { padding-right: 24px; } }
@media (max-width: 575.98px) { .bt-kopf .seitenkopf .sk-inhalt { padding-right: 16px; } }
/* Meta im Artikelkopf immer zweizeilig (Spalte neben dem Bild ist schmal): Kategorie, darunter „Monat Jahr · Lesezeit“ – nie ein Punkt am Zeilenanfang */
.bt-meta a { flex-basis: 100%; }
.bt-meta a + *::before { content: none; }
.bt-meta { row-gap: 2px; }
/* Meta im Artikelkopf ruhiger (Thomas 19.10.: Handy „nicht schön“): kleiner, gleichmäßige Abstände; Entwurf als kleines Etikett statt „· DRAFT“ am Datum */
.bt-kopf .bt-meta { font-size: 16px !important; line-height: 1.5 !important; column-gap: 10px; }
.bt-meta > * + *::before { margin-right: 10px; }
.bt-meta .bt-entwurf::before { content: none; }
.bt-entwurf { align-self: center; margin-left: 4px; padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px; font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; }
@media (max-width: 575.98px) { .bt-kopf .bt-meta { font-size: 14.5px !important; } }
/* Kategorien-Leiste (Thomas 19.10., Handy: Linien lagen beim Umbruch quer über der nächsten Zeile, Hover blieb beim Antippen hängen):
   immer einzeilig, am Handy seitlich wischbar; Linie direkt auf der Grundlinie der Leiste; Hover nur mit Maus */
.bk-kategorien { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 0; }
.bk-kategorien::-webkit-scrollbar { display: none; }
.bk-kategorien a { flex: none; white-space: nowrap; padding: 4px 0 16px; }
.bk-kategorien a::after { bottom: 0; }
.bk-kategorien a:hover { color: var(--b-text) !important; }
.bk-kategorien a:hover::after { transform: scaleX(0); }
.bk-kategorien a.an, .bk-kategorien a.an:hover { color: var(--b-gruen) !important; }
.bk-kategorien a.an::after { transform: none; }
@media (hover: hover) and (pointer: fine) { .bk-kategorien a:hover { color: var(--b-gruen) !important; } .bk-kategorien a:hover::after { transform: none; } }
@media (max-width: 575.98px) { .bk-kategorien { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; scroll-padding-left: 20px; } }
/* „More in …“ in der Seitenspalte (Thomas 19.10.: „more in digital marketing managment bricht in 2 zeilen“): klein „More in“ wie „Written by“, darunter die Kategorie */
.bt-raster { grid-template-columns: 260px minmax(0, 700px); column-gap: 90px; }
.bt-kat-link { font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif; font-size: 15px; color: var(--b-gruen) !important; text-decoration: none !important;
	white-space: nowrap; }
.bt-kat-link:hover { text-decoration: underline !important; text-underline-offset: 4px; }
@media (max-width: 991.98px) { .bt-raster { grid-template-columns: minmax(0, 1fr); } }
/* Kategorie im Artikelkopf in Versalien wie auf den Karten (Thomas 19.10.: „kategorie in capital letters, dann hebt es sich besser ab“) – nur Darstellung, Name bleibt */
.bt-kopf .bt-meta a { font-family: "InterTight-Regular", "Helvetica Neue", Arial, sans-serif; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 4px; }
/* Kategorie war kleiner als „August 2026 · 3 min read“ (Thomas 19.10.) → Kategorie führt, Datum/Lesezeit ruhiger */
.bt-kopf .bt-meta a { font-size: 15px; letter-spacing: .08em; margin-bottom: 6px; }
.bt-kopf .bt-meta { font-size: 14.5px !important; }
@media (max-width: 575.98px) { .bt-kopf .bt-meta a { font-size: 13.5px; } .bt-kopf .bt-meta { font-size: 13.5px !important; } }