/* Blog: Übersicht (blog/index.html) und Artikelseite (blog/<adresse>/index.html).
   Lädt nach style.css und nur auf diesen Seiten. Die Übersicht braucht kein Skript; die Artikelseite lädt blog.js,
   das im Inhaltsverzeichnis den gelesenen Abschnitt markiert.
   Regeln: docs/gestaltung.md, Zeile „Blog“. Farben, Schrift und Knöpfe kommen aus style.css.
   Die Klassen mit „ls-px-“ stehen so in den Artikeltexten der heutigen Website und bleiben unverändert. */

/* ---------- Rahmen ---------- */

/* Der Text beginnt gleich unter der Kopfzeile. Wo sie mitläuft (style.css), bekommt sie ihr Glas deshalb sofort. */
.nav:has(+ .blog) { animation-range: 0 72px; }

.blog { padding-bottom: clamp(72px, 11vh, 128px); }
.blog-in { max-width: 1120px; margin: 0 auto; padding-inline: 40px; }
/* Übersicht: volle Rasterbreite (1240 px), damit die Schrift in den Titelbildern lesbar bleibt. */
.blog-in.is-wide { max-width: 1320px; }

/* Ruhiger als der Einstieg der Startseite: ein schwaches Licht von oben, kein Strahl, kein weiter Schein. */
.blog-top { position: relative; isolation: isolate; padding-top: 136px; }
.blog-top .bg {
  bottom: auto;
  height: 620px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent);
  mask-image: linear-gradient(180deg, #000 50%, transparent);
}
.blog-top .bg::before { background: radial-gradient(48% 64% at 50% -16%, rgba(70, 128, 255, 0.32) 0%, rgba(58, 116, 255, 0) 72%); }

.blog h1 {
  max-width: 20ch;
  margin: 14px 0 0;
  font-size: clamp(36px, 4.8vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.042em;
  text-wrap: balance;
}
.blog .lede { max-width: 38em; margin-top: 18px; }
.blog-head .kicker, .post-back { animation: rise-in 0.9s var(--ease) 0.05s backwards; }
.blog-top .post-meta { animation: rise-in 0.9s var(--ease) 0.12s backwards; }
.blog h1 { animation: rise-in 1s var(--ease) 0.16s backwards; }
.blog .lede { animation: rise-in 1s var(--ease) 0.28s backwards; }

/* ---------- Karten ---------- */

/* Eine Karte ist nur das Titelbild: Titel und drei Stichpunkte stehen schon im Bild (Janik, 13.11.2026).
   Höchstens zwei nebeneinander und bis 1100 px Breite eine Spalte, sonst wird die Schrift im Bild zu klein. Der Linktext für Vorleseprogramme ist der Artikeltitel (alt). */
.post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
  margin: clamp(40px, 6vh, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.post-card { display: block; border-radius: 18px; }
.post-card:focus-visible { outline-offset: 6px; }
/* Die Bilder haben durchsichtige Außenkanten und stehen frei auf dem Grund. Ganz zeigen, nie beschneiden. */
.post-card img, .post-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: contain;
}
/* Überfahren am Rechner: Das Bild hebt sich, und ein Lichtstreifen zieht einmal über das Glas. Der Streifen hat die
   Form des Bildes selbst (Maske aus dem Bild, „--bild“ steht an der Karte), nicht die eines Rechtecks. Kein Schein. */
.post-bild { position: relative; display: block; transition: translate 0.6s var(--ease), filter 0.6s var(--ease); }
.post-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 58%) no-repeat 140% 0 / 260% 100%;
  -webkit-mask: var(--bild) center / contain no-repeat;
  mask: var(--bild) center / contain no-repeat;
  opacity: 0;
  transition: background-position 1.1s var(--ease), opacity 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .post-card:hover .post-bild { translate: 0 -6px; filter: brightness(1.07); }
  .post-card:hover .post-bild::after { background-position: -40% 0; opacity: 1; }
}

/* ---------- Übersicht ---------- */

/* Der neueste Artikel steht groß im Licht des Einstiegs, wie die Konsole auf der Startseite: leicht nach hinten
   geneigt, beim Scrollen richtet er sich auf (unten, Block „Bewegung“). Überschrift mittig darüber. */
.blog-list .blog-top { padding-bottom: clamp(52px, 8vh, 88px); }
.blog-list .blog-top .bg { height: 1000px; }
.blog-list .blog-top .bg::before { background: radial-gradient(56% 56% at 50% -8%, rgba(70, 128, 255, 0.4) 0%, rgba(58, 116, 255, 0) 74%); }
.blog-list .blog-head { text-align: center; }
.blog-list .blog-head h1, .blog-list .blog-head .lede { margin-inline: auto; }
.post-first { max-width: 980px; margin: clamp(36px, 5vh, 52px) auto 0; }
.post-first .post-bild { animation: rise-in 1.1s var(--ease) 0.4s backwards; }

.post-rest-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.post-rest-head h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.2; letter-spacing: -0.028em; }
.post-count {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.post-rest .post-grid { margin-top: clamp(28px, 4vh, 44px); }

/* Breites Banner für unser Angebot in den Übersichten, zwischen Kopf und Liste: links Text und Knopf, rechts das breite
   Glasmotiv (3 zu 1). Gleiche Fläche wie das Banner im Artikel: Rand und Lichtkante, kein Schein. */
.list-offer-wrap { margin-bottom: clamp(44px, 7vh, 72px); }
.list-offer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  align-items: center;
  gap: 24px 48px;
  padding: 36px 44px 36px 40px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.list-offer::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, rgba(127, 168, 255, 0), var(--blue-hi) 28%, var(--blue-hi) 46%, rgba(127, 168, 255, 0) 82%); opacity: 0.9; }
.list-offer::after {
  content: "";
  position: absolute;
  inset: 0 0 0 46%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(70% 90% at 62% 50%, #000 0%, transparent 100%);
  mask-image: radial-gradient(70% 90% at 62% 50%, #000 0%, transparent 100%);
  pointer-events: none;
}
.list-offer-in { position: relative; z-index: 1; max-width: 560px; }
.list-offer-k { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-hi); }
.list-offer-h { margin: 12px 0 0; font-size: clamp(24px, 2.3vw, 30px); line-height: 1.18; letter-spacing: -0.028em; font-weight: 600; color: var(--ink); text-wrap: balance; }
.list-offer-p { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.list-offer .btn { margin-top: 22px; }
.list-offer-art { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
@media (max-width: 1100px) {
  .list-offer { grid-template-columns: minmax(0, 1fr); padding: 30px 30px 32px; }
  .list-offer::after { inset: 0 0 50% 10%; }
  .list-offer-art { order: -1; max-width: 460px; }
}
@media (max-width: 720px) {
  .list-offer { gap: 18px; padding: 24px 20px 22px; border-radius: 16px; }
  .list-offer-h { font-size: 22px; }
  .list-offer-p { font-size: 15px; }
  .list-offer .btn { width: 100%; }
}

/* ---------- Artikel: Kopf ---------- */

.post-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -10px 0 16px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--muted);
  transition: color 0.2s;
}
.post-back svg { transition: translate 0.3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .post-back:hover { color: #fff; }
  .post-back:hover svg { translate: -3px 0; }
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.post-meta .cat { color: var(--blue-hi); }
/* Breite Bildschirme: Überschrift links, Titelbild rechts. So beginnt der Lesetext noch im ersten Bildschirm. */
.post-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); align-items: center; gap: 48px; }
/* Der Text neben dem Titelbild bleibt ruhig und niedriger als das Bild (Janik, 13.11.2026: „zu groß und zu lang“).
   Das Bild trägt den Titel und drei Stichpunkte schon groß. Deshalb steht hier kein Kurztext mehr: Rubrik, Datum,
   Lesezeit, die Überschrift und der Autor. In den Artikel führt der erste Absatz (unten, „.post-body > p:first-child“). */
.post-head h1 { max-width: none; margin-top: 12px; font-size: clamp(27px, 2.35vw, 34px); line-height: 1.14; letter-spacing: -0.03em; }
/* Einstiegssatz unter der Überschrift, nur auf den Branchenseiten (tools/branchen-einstieg.json). */
.post-lead { max-width: 34em; margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: var(--muted); animation: rise-in 1s var(--ease) 0.3s backwards; }
.post-autor { margin: 16px 0 0; font-size: 14px; line-height: 1.4; color: var(--muted); animation: rise-in 1s var(--ease) 0.36s backwards; }
/* Das Titelbild ist ein Bild aus dem Glas-Material und schwebt leise wie die Glas-Bilder der Startseite
   (docs/gestaltung.md, Zeile „Glas-Bilder in Karten“). Ohne zusätzliches Licht. */
.post-cover { margin: 0; animation: rise-in 1.1s var(--ease) 0.3s backwards; }
.post-cover img { animation: glas-float-ruhig 8s ease-in-out -4s infinite alternate; }

/* ---------- Artikel: Inhaltsverzeichnis und Spalte ---------- */

.post-main {
  display: grid;
  grid-template-columns: 220px minmax(0, 700px);
  justify-content: space-between;
  column-gap: 56px;
  margin-top: clamp(44px, 7vh, 72px);
}
.post-toc ol { list-style: none; margin: 0; padding: 0; }
.post-toc a { display: block; font-size: 14px; line-height: 1.4; color: var(--muted); transition: color 0.2s; }
@media (hover: hover) and (pointer: fine) { .post-toc a:hover { color: #fff; } }
.post-toc a:focus-visible { outline-offset: 2px; border-radius: 4px; }

/* Die Seitenspalte läuft mit: oben das Verzeichnis, darunter der Hinweis auf unser Angebot. Wird es eng, rollt das
   Verzeichnis in sich, der Hinweis bleibt stehen. */
.post-side { position: sticky; top: 104px; align-self: start; display: flex; flex-direction: column; gap: 26px; max-height: calc(100vh - 132px); }
.post-toc-side { position: relative; flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }
.post-side-offer {
  flex: none;
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.post-side-art { display: block; width: 150px; max-width: 100%; height: auto; margin: -2px auto 14px; }
.post-side-k { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-hi); }
.post-side-p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--soft); text-wrap: pretty; }
.post-side-offer .btn { width: 100%; height: auto; min-height: 46px; margin-top: 14px; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.25; white-space: normal; text-align: center; }
.post-toc-side.is-long { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent); }
.post-toc-side.is-long ol { padding-bottom: 30px; }
@media (max-height: 810px) { .post-side-art { display: none; } }
@media (max-height: 640px) { .post-side-offer { display: none; } }
.post-toc-h { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.post-toc-side ol { margin-top: 14px; border-left: 1px solid var(--line); }
.post-toc-side a { position: relative; padding: 7px 0 7px 16px; }
/* Der Abschnitt, der gerade gelesen wird (blog.js setzt aria-current): helle Schrift und ein 1 px feiner blauer Strich
   auf der Linie. Fläche und Linie zeigen den Zustand, kein Schein. */
.post-toc-side a::before { content: ""; position: absolute; left: -1px; top: 5px; bottom: 5px; width: 1px; background: var(--blue-hi); scale: 1 0; transition: scale 0.35s var(--ease); }
.post-toc-side a[aria-current] { color: var(--ink); }
.post-toc-side a[aria-current]::before { scale: 1 1; }

/* Schmale Bildschirme: Verzeichnis zum Aufklappen über dem Text. */
.post-toc-top { display: none; margin-bottom: 34px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.025); }
.post-toc-top summary {
  position: relative;
  list-style: none;
  padding: 15px 44px 15px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.post-toc-top summary::-webkit-details-marker { display: none; }
.post-toc-top summary::after { content: "+"; position: absolute; right: 18px; top: 11px; font-size: 20px; font-weight: 400; color: var(--blue-hi); transition: rotate 0.3s var(--ease); }
.post-toc-top[open] summary::after { rotate: 45deg; }
.post-toc-top summary:focus-visible { outline-offset: 2px; border-radius: 12px; }
.post-toc-top ol { padding: 0 18px 12px; }
.post-toc-top a { padding: 8px 0; border-top: 1px solid var(--line); }

/* ---------- Artikel: Lesetext ---------- */

.post-body { font-size: 18px; line-height: 1.72; color: var(--soft); overflow-wrap: break-word; }
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.15em; text-wrap: pretty; }
/* Der erste Absatz führt in den Artikel: etwas größer und heller. */
.post-body > p:first-child { font-size: 20px; line-height: 1.6; color: var(--ink); }
.post-body h2 {
  margin: 1.9em 0 0.6em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line);
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1.16;
  letter-spacing: -0.03em;
  scroll-margin-top: 100px;
}
.post-body h3 { margin: 1.9em 0 0.5em; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; letter-spacing: -0.018em; font-weight: 600; color: var(--ink); text-wrap: balance; }
.post-body h2 + h3 { margin-top: 1.1em; }
.post-body strong { font-weight: 600; color: var(--ink); }
.post-body a { color: var(--blue-hi); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.2s; }
@media (hover: hover) and (pointer: fine) { .post-body a:hover { color: #fff; } }
.post-body a:focus-visible { outline-offset: 2px; border-radius: 3px; }
.post-body ul, .post-body ol { margin: 0 0 1.15em; padding-left: 1.25em; }
.post-body li { margin-top: 0.45em; padding-left: 0.2em; text-wrap: pretty; }
.post-body li::marker { color: var(--dim); }
.post-body ul > li::marker { color: var(--blue-hi); }

/* Das rohe Foto zum Artikel, einmal mitten im Text (Janik, 13.11.2026). Behandlung wie alle Fotos der Seite. */
/* Das rohe Foto im Text, darunter ein Merksatz. Der Rahmen sitzt am Bild, nicht an der ganzen Figur. */
.post-foto { margin: 2.6em 0; }
.post-foto-bild { position: relative; display: block; border-radius: 22px; overflow: hidden; }
.post-foto img { display: block; width: 100%; height: auto; filter: saturate(0.82) brightness(0.9); }
/* Bilder aus den alten Artikeln (Bildschirmfotos, Schaubilder): nie breiter als der Text, mit Rand wie die Kästen. */
.post-body img:not([class]) { display: block; max-width: 100%; height: auto; margin: 0 auto; border: 1px solid var(--line); border-radius: 14px; }
.post-foto .post-foto-bild img { border: 0; border-radius: 0; }
.post-body figure:not(.post-foto) { margin: 2.2em 0; }
.post-body figure:not(.post-foto) > div > p { margin: 0; }
.post-foto-bild::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.06); pointer-events: none; }
.post-foto figcaption { max-width: 34em; margin: 16px auto 0; font-size: 16px; line-height: 1.5; letter-spacing: -0.005em; color: var(--soft); text-align: center; text-wrap: balance; }

/* Kasten „Das Wichtigste in Kürze“. Die Klassennamen mit Ziffern stammen aus der heutigen Website. */
.post-body :is(.ls-px-inline-a1e09a25d5, .post-box) {
  margin: 2em 0;
  padding: 24px 26px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  font-size: 16.5px;
  line-height: 1.62;
}
.post-body .ls-px-inline-43ea466a03 { display: block; font-size: 17px; }
.post-body .ls-px-inline-52153b0647 { margin: 10px 0 0; }
.post-box > strong { display: block; font-size: 17px; }
.post-box > ul { margin: 10px 0 0; }
.post-box > ul > li:first-child { margin-top: 0; }

/* Banner für unser Angebot im Artikeltext: links Text und Knopf, rechts ein Glas-Bild der Seite, das leise schwebt.
   Fläche, Rand und Lichtkante, kein Schein (docs/gestaltung.md, Zeilen „Leuchten“ und „Glas-Bilder in Karten“).
   Die blaue Linie oben und das Punktraster hinter dem Bild trennen das Banner von den Kästen des Artikels. */
.post-body .post-offer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  align-items: center;
  gap: 20px 30px;
  margin: 2.8em 0;
  padding: 32px 30px 32px 32px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.post-body .post-offer::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, rgba(127, 168, 255, 0), var(--blue-hi) 28%, var(--blue-hi) 46%, rgba(127, 168, 255, 0) 82%); opacity: 0.9; }
.post-body .post-offer::after {
  content: "";
  position: absolute;
  inset: 0 0 0 44%;
  background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(70% 90% at 72% 50%, #000 0%, transparent 100%);
  mask-image: radial-gradient(70% 90% at 72% 50%, #000 0%, transparent 100%);
  pointer-events: none;
}
.post-body .post-offer-in { position: relative; z-index: 1; }
/* Bewusst schwächer als die drei Zeilen darunter, sonst gehen deren Abstände verloren. */
.post-offer p { margin: 0; }
.post-body .post-offer-k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-hi); }
.post-body .post-offer-h { margin-top: 12px; font-size: 23px; line-height: 1.22; letter-spacing: -0.025em; font-weight: 600; color: var(--ink); text-wrap: balance; }
.post-body .post-offer-p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.post-body .post-offer .btn { margin-top: 20px; color: #fff; text-decoration: none; }
.post-offer-art { position: relative; z-index: 1; display: block; justify-self: center; width: var(--b, 220px); max-width: 100%; height: auto; transition: scale 0.7s var(--ease); }
@media (prefers-reduced-motion: no-preference) {
  .post-offer-art, .post-side-art { animation: glas-float 6.5s ease-in-out -2s infinite alternate; }
  .post-side-art { animation-name: glas-float-ruhig; animation-duration: 8s; }
}
@media (hover: hover) and (pointer: fine) { .post-offer:hover .post-offer-art { scale: 1.06; } }

/* Tabellen */
:is(.ls-px-tbl-wrap, .post-tbl-wrap) { margin: 2em 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.022); scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }
:is(.ls-px-tbl, .post-tbl) { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; font-variant-numeric: tabular-nums; }
:is(.ls-px-tbl, .post-tbl) th, :is(.ls-px-tbl, .post-tbl) td { padding: 13px 18px; text-align: left; vertical-align: top; }
:is(.ls-px-tbl, .post-tbl) th { font-size: 13.5px; font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, 0.04); }
:is(.ls-px-tbl, .post-tbl) td { border-top: 1px solid var(--line); }
:is(.ls-px-tbl, .post-tbl) td:first-child { font-weight: 600; color: var(--ink); }
:is(.ls-px-tbl, .post-tbl) tr.ls-px-hl td { background: rgba(47, 107, 255, 0.1); }

/* Karten und Schritte */
.ls-px-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 2em 0; }
.ls-px-card, .ls-px-step { padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.028); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.post-body .ls-px-card p, .post-body .ls-px-step p, .post-body .ls-px-flow-title, .post-body .ls-px-prompt p { margin: 0; }
.post-body .ls-px-card-head, .post-body .ls-px-step-head { font-size: 16.5px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.post-body .ls-px-card-text, .post-body .ls-px-step-text { margin-top: 8px; font-size: 15px; line-height: 1.58; }
.ls-px-card-label { font-weight: 600; color: var(--ink); }
.ls-px-flow { margin: 2em 0; }
.post-body .ls-px-flow-title { margin-bottom: 14px; font-size: 16.5px; font-weight: 600; color: var(--ink); }
.ls-px-flow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ls-px-step-nr {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1;
  color: var(--soft);
}
.ls-px-step-blue { border-color: rgba(127, 168, 255, 0.34); background: rgba(47, 107, 255, 0.09); }
/* Etwas dunkler als --blue, damit die weiße Ziffer sicher lesbar ist (Kontrast über 4,5 zu 1). */
.ls-px-step-blue .ls-px-step-nr { border-color: transparent; background: color-mix(in srgb, var(--blue) 86%, #000); color: #fff; }

/* Vorlage zum Kopieren (Prompt): Mono, weil es Text für eine Maschine ist. */
.ls-px-prompt { margin: 2em 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0, 0, 0, 0.34); }
.post-body .ls-px-prompt-tag { margin-bottom: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue-hi); }
.post-body .ls-px-prompt-line { font-family: var(--mono); font-size: 14px; line-height: 1.7; color: var(--soft); }
.post-body .ls-px-prompt-line + .ls-px-prompt-line { margin-top: 12px; }

/* ---------- Übersicht: Filter nach Thema ----------
   Auswahlknöpfe ohne Skript (tools/blog-vorlage-bauen.py, THEMEN). :has() blendet die Karten anderer Themen aus.
   Ohne :has() bleibt alles sichtbar. Die Kürzel hier und in THEMEN müssen gleich sein. */
.post-filter { margin: 0 0 30px; padding: 0; border: 0; min-width: 0; }
.post-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.post-chip { position: relative; cursor: pointer; }
.post-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.post-chip span { display: inline-flex; align-items: baseline; gap: 7px; min-height: 38px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.03); font-size: 14px; line-height: 1.3; color: var(--soft); transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.post-chip b { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--dim); }
.post-chip:hover span { border-color: rgba(255, 255, 255, 0.22); color: var(--ink); }
.post-chip input:checked + span { border-color: rgba(127, 168, 255, 0.55); background: rgba(127, 168, 255, 0.12); color: var(--ink); }
.post-chip input:checked + span b { color: var(--blue-hi); }
.post-chip input:focus-visible + span { outline: 2px solid var(--blue-hi); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.blog-list:has(.post-chip input[value="strategie"]:checked) .post-grid > li:not([data-thema="strategie"]) { display: none; }
.blog-list:has(.post-chip input[value="akquise"]:checked) .post-grid > li:not([data-thema="akquise"]) { display: none; }
.blog-list:has(.post-chip input[value="leads"]:checked) .post-grid > li:not([data-thema="leads"]) { display: none; }
.blog-list:has(.post-chip input[value="daten"]:checked) .post-grid > li:not([data-thema="daten"]) { display: none; }
.blog-list:has(.post-chip input[value="ki"]:checked) .post-grid > li:not([data-thema="ki"]) { display: none; }
.blog-list:has(.post-chip input[value="tools"]:checked) .post-grid > li:not([data-thema="tools"]) { display: none; }
.blog-list:has(.post-chip input[value="automatisierung"]:checked) .post-grid > li:not([data-thema="automatisierung"]) { display: none; }

/* ---------- Branchen: Übersicht von A bis Z ----------
   Alle Branchen als Sprungliste unter der Überschrift. Am Handy rollt die Liste in einem Kasten, damit die Bilder
   darunter nicht erst nach langem Scrollen kommen. */
.branchen-index ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 1080px; margin: 36px auto 0; padding: 0; list-style: none; }
.post-chip-link { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.03); font-size: 14px; line-height: 1.3; color: var(--soft); text-decoration: none; transition: border-color 0.2s, color 0.2s, background-color 0.2s; }
.post-chip-link:hover { border-color: rgba(127, 168, 255, 0.5); background: rgba(127, 168, 255, 0.1); color: var(--ink); }
.post-chip-link:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 2px; }

/* ---------- Abschluss ---------- */

/* Die Karte „Nächster Schritt“ ist die der Startseite (style.css), mit Norwegen-Bild, Bewertungen und beiden Knöpfen.
   Hier nur der Platz: Sie steht in der Breite der Blog-Spalte. */
.blog .closing { padding: clamp(64px, 10vh, 108px) 0 0; }
/* Die Karte kommt wörtlich von der Startseite. Dort sind zwei Zeilen am Handy 10 und 11 px groß; im Blog gilt die Regel Kleinste Schrift (12 px). */
.blog .closing-proof > *, .blog .review-count span { font-size: 12px; }

.post-more { margin-top: clamp(64px, 10vh, 108px); }
.post-more h2 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.03em; }
.post-more .post-grid { margin-top: 30px; }

/* ---------- Breiten ---------- */

@media (max-width: 1100px) {
  .blog-in, .blog-in.is-wide { max-width: 780px; }
  .post-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .post-top { display: block; }
  .post-cover { margin-top: clamp(30px, 5vh, 44px); }
  .post-main { display: block; }
  .post-side { display: none; }
  .post-toc-top { display: block; }
}
@media (max-width: 720px) {
  .post-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
  .branchen-index ul { justify-content: flex-start; max-height: 252px; margin-top: 28px; padding-bottom: 28px; overflow-y: auto; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }
  .post-chip-link { min-height: 34px; padding: 6px 12px; font-size: 13.5px; }
  .post-chip { flex: none; }
  .blog-in { padding-inline: 20px; }
  .blog-top { padding-top: 112px; }
  .blog h1 { font-size: clamp(31px, 8.6vw, 40px); }
  .post-head h1 { font-size: clamp(25px, 6.9vw, 31px); }
  .post-body > p:first-child { font-size: 18.5px; }
  .post-first { margin-inline: -6px; }
  .post-grid { gap: 28px; margin-inline: -6px; }
  .blog h1, .post-body h2, .post-body h3 { overflow-wrap: break-word; hyphens: auto; }
  .post-cover { margin: 28px -6px 0; }
  .post-body { font-size: 17px; line-height: 1.7; }
  .post-foto-bild { border-radius: 16px; }
  .post-body .post-offer { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 20px 22px; border-radius: 16px; }
  .post-body .post-offer::after { inset: 0 0 46% 20%; -webkit-mask-image: radial-gradient(80% 90% at 70% 30%, #000 0%, transparent 100%); mask-image: radial-gradient(80% 90% at 70% 30%, #000 0%, transparent 100%); }
  .post-offer-art { order: -1; justify-self: start; width: calc(var(--b, 220px) * 0.72); }
  .post-body .post-offer .btn { width: 100%; }
  .post-body .post-offer-h { font-size: 21px; }
  .post-foto figcaption { margin-top: 12px; font-size: 15px; }
  .post-body :is(.ls-px-inline-a1e09a25d5, .post-box) { padding: 20px 20px 18px; font-size: 16px; }
  .ls-px-cards, .ls-px-flow-grid { grid-template-columns: minmax(0, 1fr); }
  .ls-px-prompt { padding: 18px; }
  .post-body .ls-px-prompt-line { font-size: 13.5px; }
}
/* Tabellen am Handy: jede Zeile als Block, die Spaltenüberschrift steht über dem Wert (data-label im Artikeltext). */
@media (max-width: 640px) {
  :is(.ls-px-tbl-wrap, .post-tbl-wrap) { overflow-x: visible; }
  :is(.ls-px-tbl, .post-tbl) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  :is(.ls-px-tbl, .post-tbl), :is(.ls-px-tbl, .post-tbl) tbody, :is(.ls-px-tbl, .post-tbl) tr, :is(.ls-px-tbl, .post-tbl) td { display: block; }
  :is(.ls-px-tbl, .post-tbl) tr { padding: 16px 18px; border-top: 1px solid var(--line); }
  :is(.ls-px-tbl, .post-tbl) tbody tr:first-child { border-top: 0; }
  :is(.ls-px-tbl, .post-tbl) td { padding: 0; border-top: 0; }
  :is(.ls-px-tbl, .post-tbl) td + td { margin-top: 12px; }
  :is(.ls-px-tbl, .post-tbl) td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
  :is(.ls-px-tbl, .post-tbl) tr.ls-px-hl { background: rgba(47, 107, 255, 0.1); }
  :is(.ls-px-tbl, .post-tbl) tr.ls-px-hl td { background: none; }
}

/* ---------- Bewegung am Scrollen ---------- */

/* Feine Linie am oberen Rand der Artikelseite: wie weit der Artikel gelesen ist. */
.post-progress { display: none; }
@keyframes post-progress { from { scale: 0 1; } to { scale: 1 1; } }
/* Das rohe Foto zieht beim Vorbeiscrollen ein Stück in seinem Rahmen mit. */
@keyframes foto-zug { from { translate: 0 -4%; } to { translate: 0 4%; } }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .post-progress {
      display: block;
      position: fixed;
      z-index: 60;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: var(--blue-hi);
      transform-origin: 0 50%;
      animation: post-progress linear both;
      animation-timeline: scroll(root);
    }
    .post-foto img { scale: 1.12; animation: foto-zug linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
  /* Der neueste Artikel lehnt wie die Konsole der Startseite leicht nach hinten und richtet sich beim Scrollen auf. */
  @media (prefers-reduced-motion: no-preference) and (min-width: 721px) {
    .post-first .post-card {
      --persp: 1800px;
      transform: perspective(var(--persp)) rotateX(11deg);
      transform-origin: 50% 100%;
      animation: console-flat cubic-bezier(0.3, 0, 0.2, 1) both;
      animation-timeline: scroll(root);
      animation-range: 0 56vh;
    }
  }
}