@charset "UTF-8";

/* =====================================================================
   GREEN CAREERS · BLOG
   ---------------------------------------------------------------------
   Eine bildgeführte, mobile-first Artikelfläche. Die Übersicht nutzt
   bewusst eine Titelgeschichte und redaktionelle Zeilen statt eines
   gleichförmigen Kartenrasters. Der Artikel teilt dieselben Bausteine.
   ===================================================================== */

.public-blog {
  /* Gemeinsamer Außenrahmen mit Navigation und Footer; die lesbare
     Textbreite wird weiterhin separat über --blog-copy begrenzt.
     Nachtrag 1, 17.09.2026: --blog-wide stand auf --breite (--gc-
     container + 2 x --gc-gutter, 1216 px bei 1280 px Fenster). Die
     geteilte Regel public-hero.css:169-181 (.aligned-hero ~ * >
     :first-child) zentriert .blog-wrap aber über eine Randformel, die
     von einer Breite gc-container-WIDE + 2 x gutter ausgeht, derselben
     Formel wie .kopf__inner und .footer > .wrap (public-brand.css:373-
     375). Die schmalere Box stand deshalb nicht mittig: 0/64 px Rand
     bei 1280, 12/212 px bei 1440 (B9). Jetzt dieselbe Formel wie Kopf
     und Fuß, damit .blog-wrap (und darin .blog-cta__inner) exakt so
     breit ist wie der Rahmen, an dem die geteilte Regel sie ausrichtet. */
  --blog-wide: calc(var(--gc-container-wide) + 2 * var(--gc-gutter));
  --blog-copy: 66ch;
  /* Waren drei freie oklch-Werte und damit eine zweite, leicht andere
     Palette neben der Marke. Jetzt Markenrollen. */
  --blog-line: var(--gc-line);
  --blog-soft: var(--gc-canvas-2);
  --blog-surface: var(--gc-surface);
  background: var(--sand);
  font-family: var(--schrift-text);
}

.public-blog.menu-is-open {
  overflow: hidden;
}

.public-blog .blog-main {
  min-width: 0;
  padding-top: var(--kopf-h-mobil);
}

.public-blog .blog-wrap {
  width: 100%;
  max-width: var(--blog-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Gemeinsame Orientierung -------------------------------------------- */

/* W2 (19.09.2026, Patric): Schriftgröße 14px statt 15,36px, damit die
   Brotkrume auf blog-artikel.html und software-baumschule-
   bewerbermanagement.html (beide ohne aligned-hero__breadcrumb, siehe
   Kommentar oben bei .blog-article-hero) dieselbe Größe trägt wie auf
   kontakt.html, faq.html und den drei Rechtsseiten (.aligned-hero__
   breadcrumb, public-hero.css, 14px). blog.html und blog-archiv.html
   sind nicht betroffen: dort gewinnt ohnehin die später geladene
   aligned-hero-Regel (dieselbe Spezifität, siehe Kommentar oben in
   dieser Datei). Der Abstand zur Überschrift bleibt unverändert
   (.blog-article-hero__grid margin-top, unten), er lag mit 54px bei
   1440px bereits nah an den 40px der Content-Seiten. */
.public-blog .blog-breadcrumb {
  min-width: 0;
  max-width: 100%;
  color: var(--auf-dunkel-still);
  font-size: var(--gc-nav-font-size);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.public-blog .blog-breadcrumb ol {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  list-style: none;
}

.public-blog .blog-breadcrumb li {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.public-blog .blog-breadcrumb li + li::before {
  content: "/";
  margin-right: 10px;
  color: var(--gc-on-dark-faint);
}

.public-blog .blog-breadcrumb a {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  min-height: 44px;
  margin-block: -10px;
  color: var(--auf-dunkel-leise);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
  hyphens: auto;
  transition: color var(--t-basis) var(--public-ease),
              text-decoration-color var(--t-basis) var(--public-ease);
}

.public-blog .blog-breadcrumb a:hover {
  color: var(--auf-dunkel);
  text-decoration-color: currentColor;
}

/* Der Kicker über der Schlagzeile lief auf 15,2 px in Gemischtschreibung
   und stand damit neben, nicht in der Label-Ebene der Marke. Metrik
   kommt jetzt aus .gc-label im Quelltext; lokal bleiben Anordnung,
   Punktmarke und die Mint-Farbe auf der dunklen Fläche. */
.public-blog .blog-topic {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  color: var(--marker-licht);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.public-blog .blog-topic::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: currentColor;
}

.public-blog .blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  color: inherit;
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
}

.public-blog .blog-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.public-blog .blog-meta svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.public-blog .blog-arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  width: fit-content;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color var(--t-basis) var(--public-ease);
}

.public-blog .blog-arrow-link::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-basis) var(--public-ease);
}

/* Übersichtshero ----------------------------------------------------- */

/* D6-N2 Punkt 3, 18.09.2026, vollständig mit getComputedStyle
   gegengeprüft (vorher und nachher, Playwright gegen Port 8962/8960).
   .blog-hero trägt zusätzlich die Klasse .aligned-hero, .blog-wrap
   zusätzlich .aligned-hero__inner (siehe blog.html-Markup). public-
   hero.css lädt im HTML-Kopf nach dieser Datei; bei gleicher Selektor-
   Spezifität gewinnt seither immer die später geladene Regel, für
   jede hier einst eigene Eigenschaft:
   - .blog-hero: padding-block (eigene clamp-Formel) UND padding-inline
     (var(--gutter)) wurden beide von .aligned-hero überschrieben
     (padding-block: var(--gc-section-y-wide)/-y, padding-inline: 0;
     gemessen 0px links/rechts auf .blog-hero selbst).
   - .blog-wrap: die eigene padding-Zeile (zuletzt versucht:
     clamp(20px,3.5vw,40px), davor 62px) wurde von .aligned-hero__inner
     überschrieben (padding-block: 0, padding-inline: var(--gc-gutter);
     gemessen 0px oben/unten auf .blog-wrap selbst zu jeder Zeit).
   Damit war die "eigene Panel-Hülle" mit doppeltem Innenabstand, die
   Codex-Bericht 148 als Ursache vermutete, nie die tatsächliche
   Ursache. Höhe und horizontale Fläche folgen hier bereits demselben
   Vertrag wie Kontakt/FAQ (public-hero.css). Die tatsächliche Ursache
   für 760,5/942,2px gegen Kontakts 559/483px ist ausschließlich der
   zusätzliche Rasterinhalt dieser Seite (die Titelgeschichte-Karte,
   Text/Struktur, nicht Teil dieses Auftrags), siehe LIEFERUNG.md.
   Die vier folgenden Zeilen sind seit jeher wirkungslos und bleiben nur
   dokumentiert stehen, statt sie ersatzlos zu streichen: eine
   verschachtelte Fläche ohne die zwei Vertragsklassen zu verwenden wäre
   ein Strukturumbau, den dieser Auftrag nicht vorsieht. */
.public-blog .blog-hero {
  position: relative;
  background: var(--sand);
  color: var(--auf-dunkel-leise);
  padding-inline: var(--gutter);
}

.public-blog .blog-hero > .blog-wrap {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3.5vw, 40px);
  border-radius: var(--public-radius-panel);
  background: var(--dunkel);
}

.public-blog .blog-hero > .blog-wrap::after {
  content: "";
  position: absolute;
  right: -18vw;
  bottom: -42%;
  width: min(72vw, 780px);
  aspect-ratio: 1;
  border: 1px solid var(--gc-line-dark);
  border-radius: 50%;
  pointer-events: none;
}

.public-blog .blog-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(34px, 7vw, 76px);
  margin-top: clamp(30px, 6vw, 58px);
}

.public-blog .blog-hero__copy {
  min-width: 0;
  align-self: center;
}

/* D6-N2 Punkt 3, 18.09.2026: font-size/line-height/letter-spacing waren
   hier auf eine eigene clamp(2.2rem,8.8vw,4.75rem)-Formel gesetzt
   (76px bei 1440px). Aus demselben Ladereihenfolge-Grund wie am
   .blog-hero-Kommentar oben galten sie nie: .blog-hero__title trägt
   auch .aligned-hero__title, dessen Regel (public-hero.css, später
   geladen) gewinnt seit jeher (var(--gc-fs-page)/600/var(--gc-lh-hero)/
   var(--gc-ls-hero), 60px bei 1440px, 36px bei 390px, identisch mit
   Kontakt/FAQ). Jetzt ausdrücklich dieselben Werte statt eines toten,
   von der Dateireihenfolge abhängigen Ersatzes. */
.public-blog .blog-hero__title {
  max-width: 13ch;
  color: var(--auf-dunkel);
  font-size: var(--gc-fs-page);
  font-weight: 600;
  line-height: var(--gc-lh-hero);
  letter-spacing: var(--gc-ls-hero);
  overflow-wrap: break-word;
}

.public-blog .blog-hero__lede {
  max-width: 48ch;
  margin-top: clamp(20px, 4vw, 30px);
  color: var(--auf-dunkel-leise);
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.35rem);
  line-height: 1.6;
}

.public-blog .blog-hero__copy .blog-topic {
  margin-bottom: 18px;
}

.public-blog .blog-feature {
  min-width: 0;
}

.public-blog .blog-feature__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: var(--dunkel-tief);
}

.public-blog .blog-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 480ms var(--public-ease);
}

/* Verbundene Inhalte verwenden echte img-Elemente. Der Client löst den
   von Supabase gelieferten cover_key zentral auf; damit bleibt dasselbe
   Motiv in Übersicht, Detailansicht und Weiterlesen-Karten erhalten. */

.public-blog .blog-demo-media img,
.public-blog .blog-demo-related-media img,
.public-blog .blog-demo-article-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-blog .blog-feature__flag {
  position: absolute;
  left: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding-inline: 13px;
  border-radius: 999px;
  background: var(--orange);
  /* D1 Design 05: Weiß auf Waldgrün (7,19:1); die dunkle Tinte hielte 1,72:1. */
  color: var(--gc-action-ink);
  font-size: 0.88rem;
  font-weight: 600;
}

.public-blog .blog-feature__content {
  padding-top: 24px;
}

.public-blog .blog-feature__content .blog-meta {
  color: var(--auf-dunkel-still);
}

.public-blog .blog-feature__title {
  max-width: 30ch;
  margin-top: 14px;
  color: var(--auf-dunkel);
  font-size: clamp(1.55rem, 1.25rem + 1.4vw, 2.35rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
}

.public-blog .blog-feature__title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color var(--t-basis) var(--public-ease),
              text-decoration-color var(--t-basis) var(--public-ease);
}

.public-blog .blog-feature__title a:hover {
  color: var(--marker-licht);
  text-decoration-color: currentColor;
}

.public-blog .blog-feature__excerpt {
  max-width: 58ch;
  margin-top: 16px;
  color: var(--auf-dunkel-leise);
  font-size: 1.04rem;
  line-height: 1.65;
}

.public-blog .blog-feature .blog-arrow-link {
  margin-top: 16px;
  color: var(--marker-licht);
}

/* Artikelliste -------------------------------------------------------- */

.public-blog .blog-index {
  padding-block: clamp(58px, 11vw, 116px);
}

.public-blog .blog-index__head {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: clamp(34px, 7vw, 68px);
}

.public-blog .blog-index__title {
  max-width: 15ch;
  color: var(--ink-hell-900);
  font-size: clamp(2rem, 1.55rem + 2vw, 3.45rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.public-blog .blog-index__intro {
  min-width: 0;
  max-width: 55ch;
  color: var(--ink-hell-600);
  font-size: 1.08rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.public-blog .blog-list {
  border-bottom: 1px solid var(--blog-line);
}

.public-blog .article-teaser {
  display: grid;
  gap: 24px;
  padding-block: clamp(30px, 7vw, 58px);
  border-top: 1px solid var(--blog-line);
}

.public-blog .article-teaser__media {
  display: block;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: var(--blog-soft);
}

.public-blog .article-teaser__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--public-ease);
}

@media (hover: hover) and (pointer: fine) {
  .public-blog .blog-arrow-link:hover::after {
    transform: translateX(4px) rotate(45deg);
  }

  .public-blog .blog-feature:hover .blog-feature__media img,
  .public-blog .article-teaser__media:hover img {
    transform: scale(1.025);
  }
}

.public-blog .article-teaser__body {
  min-width: 0;
  align-self: center;
}

.public-blog .article-teaser .blog-meta {
  color: var(--ink-hell-600);
}

.public-blog .article-teaser__title {
  max-width: 35ch;
  margin-top: 14px;
  color: var(--ink-hell-900);
  font-size: clamp(1.45rem, 1.25rem + 0.8vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.public-blog .article-teaser__title a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--t-basis) var(--public-ease),
              text-decoration-color var(--t-basis) var(--public-ease);
}

.public-blog .article-teaser__title a:hover {
  color: var(--marker);
  text-decoration-color: currentColor;
}

.public-blog .article-teaser__excerpt {
  max-width: 61ch;
  margin-top: 14px;
  color: var(--ink-hell-700);
  font-size: 1.04rem;
  line-height: 1.67;
}

.public-blog .article-teaser .blog-arrow-link {
  margin-top: 15px;
  color: var(--ink-hell-900);
}

.public-blog .blog-index__more {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-top: clamp(36px, 7vw, 64px);
}

.public-blog .blog-index__more p {
  max-width: 55ch;
  color: var(--ink-hell-600);
  line-height: 1.65;
}

/* Artikelhero --------------------------------------------------------- */

.public-blog .blog-reading-progress {
  position: fixed;
  z-index: 110;
  top: calc(var(--kopf-h-mobil) - 3px);
  left: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
}

.public-blog .blog-reading-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.public-blog .blog-article-hero {
  background: var(--dunkel);
  color: var(--auf-dunkel-leise);
  padding-block: clamp(34px, 8vw, 72px) clamp(46px, 8vw, 82px);
  /* Nachtrag 1, 17.09.2026: eigene dunkle Bühne, nicht die geteilte
     .aligned-hero (public-hero.css, D5a-Dateibesitz). .blog-breadcrumb
     a:focus-visible nutzte ohne diese Bindung den globalen hellen
     --fokus, gemessen 1,72:1 gegen rgb(23,59,43) auf Blogartikeln.
     --fokus-dunkel hält hier wie überall sonst auf .dunkel. */
  --fokus: var(--fokus-dunkel);
}

.public-blog .blog-article-hero .blog-breadcrumb {
  margin-bottom: clamp(28px, 5vw, 48px);
}

.public-blog .blog-article-hero__kicker {
  margin: 0 0 14px;
  color: var(--marker-licht);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.public-blog .blog-article-hero .blog-meta {
  gap: 8px 14px;
  margin-top: clamp(22px, 4vw, 34px);
  color: var(--auf-dunkel-still);
  font-size: 0.94rem;
}

.public-blog .blog-article-hero .blog-meta > span {
  padding: 7px 11px;
  border: 1px solid var(--gc-line-dark-ui);
  border-radius: var(--gc-radius-pill);
  background: rgb(244 241 232 / 0.08);
}

.public-blog .blog-article-hero__grid {
  display: grid;
  gap: clamp(26px, 4vw, 58px);
  margin-top: clamp(30px, 6vw, 54px);
}

.public-blog .blog-article-hero__copy {
  position: relative;
  min-width: 0;
  align-self: center;
}

.public-blog .blog-article-hero__copy .blog-topic {
  margin-bottom: 18px;
}

.public-blog .blog-article-hero__title {
  max-width: none;
  color: var(--auf-dunkel);
  font-size: var(--gc-fs-section);
  line-height: var(--gc-lh-title);
  letter-spacing: var(--gc-ls-section);
  overflow-wrap: break-word;
  hyphens: auto;
}

.public-blog .blog-article-hero__lede {
  max-width: 62ch;
  min-height: calc(3 * 1.62em);
  margin-top: 22px;
  color: var(--auf-dunkel-leise);
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.62;
}

.public-blog .blog-article-hero__meta {
  min-height: 1.5em;
  margin-top: 28px;
  color: var(--auf-dunkel-still);
}

.public-blog .blog-article-hero__meta [hidden] {
  display: none !important;
}

/* Gemessen am 06.09.2026: Die Statuszeile liegt unter der Spalte im
   Rasterabstand über dem Bildplatzhalter. Sie nimmt keinen Platz ein,
   damit ihr Verschwinden nichts verschiebt. */
.public-blog .blog-article-hero__copy .supabase-demo-status {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  color: var(--auf-dunkel-leise);
}

.public-blog .blog-article-hero__image {
  min-width: 0;
  align-self: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--gc-radius-card);
  background: var(--dunkel-tief);
}

.public-blog .blog-article-hero__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Artikelkoerper ------------------------------------------------------ */

.public-blog .blog-article-media {
  background: var(--sand);
}

.public-blog .blog-article-image {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin: clamp(-34px, -3vw, -64px) 0 0;
  border-radius: var(--public-radius-panel);
  background: var(--dunkel-tief);
  box-shadow: var(--gc-shadow-card);
}

.public-blog .blog-article-image img {
  display: block;
  width: 100%;
  max-height: min(66vh, 760px);
  object-fit: cover;
}

.public-blog .blog-article-body {
  padding-block: clamp(54px, 9vw, 96px) clamp(48px, 8vw, 82px);
}

.public-blog .blog-article-layout {
  display: grid;
  min-width: 0;
  gap: clamp(34px, 7vw, 76px);
}

.public-blog .blog-article-aside {
  order: 2;
  min-width: 0;
}

.public-blog .blog-toc {
  display: none;
}

.public-blog .blog-toc__title {
  margin: 0 0 8px;
  color: var(--ink-hell-900);
  font-size: var(--gc-fs-small);
  font-weight: 700;
}

.public-blog .blog-toc__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--blog-line);
  list-style: none;
}

.public-blog .blog-toc__list li {
  margin: 0;
  border-bottom: 1px solid var(--blog-line);
}

.public-blog .blog-toc__list a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  min-height: 44px;
  padding: 9px 0;
  color: var(--ink-hell-600);
  font-size: var(--gc-fs-small);
  line-height: 1.3;
  transition: background var(--t-basis) var(--public-ease),
              color var(--t-basis) var(--public-ease);
}

.public-blog .blog-toc__list a:hover {
  color: var(--ink-hell-900);
}

.public-blog .blog-toc__list a[aria-current="location"] {
  color: var(--ink-hell-900);
  font-weight: 650;
}

.public-blog .blog-toc__list a > span {
  color: var(--marker);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.public-blog .blog-prose {
  order: 1;
  min-width: 0;
  max-width: var(--blog-copy);
  color: var(--ink-hell-700);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.public-blog .blog-prose > :first-child {
  margin-top: 0;
}

.public-blog .blog-prose p,
.public-blog .blog-prose li {
  max-width: var(--blog-copy);
  margin-top: 1.15em;
  font-size: clamp(1.06rem, 1rem + 0.2vw, 1.17rem);
  line-height: 1.78;
}

.public-blog .blog-prose .blog-standfirst {
  margin-bottom: clamp(34px, 7vw, 58px);
  color: var(--ink-hell-900);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

.public-blog .blog-prose h2 {
  max-width: 24ch;
  margin-top: clamp(48px, 9vw, 78px);
  color: var(--ink-hell-900);
  font-size: clamp(1.65rem, 1.35rem + 1.2vw, 2.4rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  scroll-margin-top: calc(var(--kopf-h-mobil) + 22px);
}

/* Artikelquelle: klare Lesetakte zwischen Fließtext, Listen und Zwischen-
   überschriften. Die Werte folgen den vorhandenen Blog-Abständen, damit der
   von der Quelle erzeugte Inhalt nicht an den allgemeinen Reset-Margen hängt. */
.public-blog .blog-prose__inhalt :is(h2, h3, h4) {
  margin-top: clamp(30px, 6vw, 54px);
  margin-bottom: clamp(18px, 2.5vw, 28px);
}

.public-blog .blog-article-section {
  margin-top: clamp(44px, 8vw, 72px);
  padding-top: clamp(32px, 6vw, 54px);
  border-top: 1px solid var(--blog-line);
}

.public-blog .blog-article-section + .blog-article-section {
  margin-top: clamp(42px, 7vw, 64px);
}

.public-blog .blog-article-section::before {
  display: block;
  margin-bottom: 11px;
  color: var(--marker);
  content: attr(data-blog-nummer);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.public-blog .blog-prose__inhalt .blog-section-title {
  max-width: 24ch;
  margin: 0 0 clamp(18px, 2.5vw, 28px);
  color: var(--ink-hell-900);
  font-size: clamp(1.45rem, 1.25rem + 0.8vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  scroll-margin-top: calc(var(--kopf-h-mobil) + 22px);
}

.public-blog .blog-prose__inhalt .blog-section-title::after {
  content: ".";
  color: var(--marker);
}

.public-blog .blog-article-section--fazit {
  padding: clamp(24px, 5vw, 38px);
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--gc-radius-card);
  background: var(--gc-canvas-2);
}

.public-blog .blog-prose__inhalt :is(p, ul, ol) {
  margin-top: 0;
  margin-bottom: clamp(18px, 2.5vw, 28px);
}

.public-blog .blog-prose__inhalt li {
  margin-top: 0;
  margin-bottom: 0.55em;
}

/* Hinweis aus dem Quellblock job_list: steht im hellen Textbereich,
   erbt deshalb die Textfarbe der Artikelspalte statt der dunklen CTA. */
.public-blog .blog-stellenhinweis {
  order: 2;
  margin-top: clamp(38px, 7vw, 64px);
  padding: clamp(22px, 4vw, 32px);
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--gc-radius-card);
  background: var(--gc-canvas-2);
  color: var(--gc-ink-soft);
}

.public-blog .blog-stellenhinweis p {
  margin: 0;
}

.public-blog .blog-stellenhinweis__titel {
  color: var(--gc-ink);
  font-size: 1rem;
  font-weight: 700;
}

.public-blog .blog-stellenhinweis__text {
  margin-top: 8px !important;
  color: var(--gc-ink-soft);
  font-size: 0.94rem;
  line-height: 1.5;
}

.public-blog .blog-stellenhinweis .btn {
  width: 100%;
  margin-top: 16px;
}

.public-blog .blog-prose__inhalt :is(ul, ol) > li:last-child {
  margin-bottom: 0;
}

.public-blog .blog-prose strong {
  color: var(--ink-hell-900);
}

.public-blog .blog-article-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(42px, 8vw, 68px);
  padding-top: 24px;
  border-top: 1px solid var(--blog-line);
}

.public-blog .blog-article-end .blog-meta {
  margin: 0;
  color: var(--ink-hell-600);
  font-size: 0.88rem;
}

.public-blog .blog-keypoint {
  margin-block: clamp(40px, 8vw, 66px);
  padding: clamp(22px, 5vw, 32px);
  border-radius: 12px;
  background: var(--sand-ton);
  color: var(--ink-hell-800);
}

/* Spaltentitel im Merkkasten: Metrik über .gc-label im Quelltext. */
.public-blog .blog-keypoint__label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-hell-900);
}

.public-blog .blog-keypoint__label::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--marker);
}

.public-blog .blog-keypoint p {
  margin-top: 10px;
}

.public-blog .blog-author {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  margin-top: clamp(50px, 9vw, 82px);
  padding-top: 24px;
  border-top: 1px solid var(--blog-line);
}

.public-blog .blog-author > div {
  display: grid;
  justify-items: start;
  min-width: 0;
  gap: 5px;
}

.public-blog .blog-author__mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--dunkel);
  color: var(--auf-dunkel);
  font-family: var(--schrift-display);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.public-blog .blog-prose .blog-author__name {
  max-width: none;
  margin: 0;
  color: var(--ink-hell-900);
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.35;
}

.public-blog .blog-prose .blog-author__role {
  max-width: none;
  margin: 0;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--blog-soft);
  color: var(--ink-hell-600);
  font-size: 0.875rem;
  line-height: 1.35;
}

/* Hinweis ohne JavaScript, wie auf der Stellendetailseite. */
.public-blog .job-ohne-js-hinweis {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(18px, 2.5vw, 28px);
  padding: 14px 16px;
  border: 1px solid var(--gc-line-strong);
  border-radius: var(--public-radius-control);
  background: var(--gc-canvas-2);
  color: var(--gc-ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}

.public-blog .job-ohne-js-hinweis p {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  text-wrap: pretty;
}

.public-blog .job-ohne-js-hinweis strong {
  color: var(--gc-ink);
}

.public-blog .job-ohne-js-hinweis a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: 0 0 auto;
  color: var(--gc-link);
  font-weight: 700;
  text-underline-offset: 4px;
}

/* Verbundene synthetische Artikeldetails ----------------------------- */

.public-blog .blog-demo-article-media .demo-medienplatzhalter {
  min-height: 100%;
}

.public-blog .blog-demo-aside {
  min-width: 0;
  align-self: start;
  padding-block: 18px;
  border-block: 1px solid var(--blog-line);
  color: var(--ink-hell-600);
}

.public-blog .blog-demo-aside h2 {
  color: var(--ink-hell-900);
  font-size: 1rem;
  line-height: 1.35;
}

.public-blog .blog-demo-aside p {
  margin-top: 9px;
  font-size: 1rem;
  line-height: 1.55;
}

.public-blog .blog-demo-aside a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 10px;
  color: var(--ink-hell-900);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.public-blog .blog-demo-article-note {
  margin-block: clamp(34px, 7vw, 54px);
  padding: clamp(20px, 4vw, 28px);
  border-radius: 12px;
  background: var(--sand-ton);
  color: var(--ink-hell-700);
}

.public-blog .blog-demo-article-note strong {
  display: block;
  color: var(--ink-hell-900);
  font-size: 1.05rem;
}

.public-blog .blog-demo-article-note p {
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.65;
}

.public-blog .blog-outline {
  margin-top: 20px;
  border-top: 1px solid var(--blog-line);
  list-style: none;
}

.public-blog .blog-outline li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 0;
  padding-block: 20px;
  border-bottom: 1px solid var(--blog-line);
}

.public-blog .blog-outline li > span {
  color: var(--dunkel);
  font-family: var(--schrift-display);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  line-height: 1.55;
}

.public-blog .blog-outline h3,
.public-blog .blog-outline p {
  max-width: 34ch;
  margin: 0;
  color: var(--ink-hell-900);
  font-size: clamp(1.08rem, 1rem + 0.32vw, 1.3rem);
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.public-blog .blog-outline a {
  display: block;
  padding-block: 11px;
  margin-block: -11px; /* Vergrößert die Linkfläche, die Listenhöhe bleibt erhalten. */
  text-decoration: underline;
  text-underline-offset: 4px;
}

.public-blog .blog-demo-related-media .demo-medienplatzhalter {
  min-height: 100%;
  padding: 8px;
}

.public-blog .blog-demo-related-media .demo-medienplatzhalter strong {
  font-size: 0.72rem;
}

.public-blog .blog-demo-related-media .demo-medienplatzhalter small {
  display: none;
}

/* Weiterlesen + Abschluss -------------------------------------------- */

.public-blog .blog-related {
  background: var(--blog-soft);
  padding-block: clamp(52px, 10vw, 102px);
}

.public-blog .blog-related__head {
  max-width: 50ch;
}

.public-blog .blog-related__title {
  color: var(--ink-hell-900);
  font-size: clamp(1.8rem, 1.45rem + 1.5vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.public-blog .blog-related__list {
  display: grid;
  gap: 28px;
  margin-top: clamp(30px, 6vw, 54px);
}

.public-blog .blog-related-card {
  overflow-wrap: anywhere;
  hyphens: auto;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding-block: 22px;
  border-top: 1px solid var(--blog-line);
}

.public-blog .blog-related-card__image {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
}

.public-blog .blog-related-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.public-blog .blog-related-card__meta {
  color: var(--ink-hell-600);
  font-size: 0.9rem;
}

.public-blog .blog-related-card__title {
  margin-top: 6px;
  color: var(--ink-hell-900);
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.35rem);
  line-height: 1.3;
}

.public-blog .blog-related-card__title a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
}

.public-blog .blog-related-card__title a:hover {
  color: var(--marker);
  text-decoration-color: currentColor;
}

.public-blog .blog-cta {
  background: var(--sand);
  color: var(--ink-hell-700);
  padding: 0 0 clamp(64px, 11vw, 116px);
}

.public-blog .blog-cta__inner {
  display: grid;
  min-width: 0;
  width: min(var(--gc-container-wide), calc(100% - 2 * var(--gc-gutter)));
  max-width: var(--gc-container-wide);
  gap: 28px;
  align-items: end;
  box-sizing: border-box;
  padding: var(--gutter);
  border-radius: var(--public-radius-panel);
  background: var(--dunkel);
  --fokus: var(--fokus-dunkel);
}

/* WEB-032: public-hero.css richtet direkte Folgeelemente an seiner
   Außenbreite aus. Die CTA ist bewusst schmaler als diese Außenbreite
   und zentriert sich deshalb innerhalb der Blog-Rail selbst. */
body.public-page.public-blog .blog-cta > .blog-cta__inner {
  margin-inline: auto;
}

.public-blog .blog-cta__inner > * {
  min-width: 0;
  max-width: 100%;
}

.public-blog .blog-cta__title {
  min-width: 0;
  max-width: 16ch;
  color: var(--auf-dunkel);
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.625rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.public-blog .blog-cta__zeile {
  display: block;
}

@media (min-width: 1200px) {
  .public-blog .blog-cta__zeile--stelle {
    white-space: nowrap;
  }
}

.public-blog .blog-cta__text {
  min-width: 0;
  max-width: 52ch;
  margin-top: 18px;
  color: var(--auf-dunkel-leise);
  font-size: 1.08rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.public-blog .blog-cta__actions {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

/* WEB-032: Auf der dunklen CTA ist der helle Akzent die bestehende
   Primärrolle aus dem Fuß. Er hält dort klaren Kontrast, ohne eine neue
   Grünvariante einzuführen. */
.public-blog .blog-cta .btn-aktion {
  border-color: var(--gc-accent);
  background: var(--gc-accent);
  color: var(--gc-dark-deep);
}

.public-blog .blog-cta .btn-aktion:hover {
  border-color: var(--gc-on-dark);
  background: var(--gc-on-dark);
  color: var(--gc-dark-deep);
}

.public-blog .blog-cta .btn:not(.btn-aktion) {
  border-color: var(--gc-line-dark-ui);
  color: var(--auf-dunkel);
}

.public-blog .blog-cta .btn {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.public-blog .blog-cta .btn:not(.btn-aktion):hover {
  border-color: var(--marker-licht);
  background: rgb(244 241 232 / 0.08);
}

@media (max-width: 699px) {
  .public-blog .blog-article-hero {
    padding-bottom: 0;
  }

  .public-blog .blog-article-hero__image {
    width: calc(100% + 2 * var(--gutter));
    max-width: none;
    margin-inline: calc(-1 * var(--gutter));
    border-radius: 0;
  }

  .public-blog .blog-cta__inner {
    gap: 24px;
    padding-block: clamp(28px, 8vw, 36px);
    text-align: center;
  }

  .public-blog .blog-cta__title,
  .public-blog .blog-cta__text {
    margin-inline: auto;
  }

  .public-blog .blog-cta__title {
    max-width: none;
  }

  .public-blog .blog-cta__actions {
    flex-wrap: nowrap;
    justify-content: stretch;
    gap: 6px;
  }

  .public-blog .blog-cta .btn {
    display: inline-flex;
    flex: 1 1 0;
    justify-content: center;
    min-height: 44px;
    padding-inline: 8px;
    font-size: 0.75rem;
    white-space: nowrap;
  }
}

/* Breitere Ansichten ------------------------------------------------- */

@media (min-width: 700px) {
  .public-blog .blog-index__head {
    flex-direction: row;
    justify-content: space-between;
    align-items: end;
  }

  .public-blog .article-teaser {
    grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(30px, 6vw, 72px);
  }

  .public-blog .article-teaser:nth-child(even) {
    grid-template-columns: minmax(0, 1.18fr) minmax(220px, 0.82fr);
  }

  .public-blog .article-teaser:nth-child(even) .article-teaser__media {
    order: 2;
  }

  .public-blog .article-teaser__media {
    aspect-ratio: 16 / 11;
  }

  .public-blog .blog-related__list {
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 64px);
  }

  .public-blog .blog-cta__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

@media (min-width: 900px) {
  .public-blog .blog-hero__grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(430px, 1.18fr);
    align-items: center;
  }

  .public-blog .blog-article-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.55fr);
    align-items: center;
  }

  .public-blog .blog-demo-aside {
    position: sticky;
    top: calc(var(--kopf-h) + 28px);
    border-block: 0;
    padding: 0;
  }

}

@media (min-width: 1024px) {
  .public-blog .blog-main {
    padding-top: var(--kopf-h);
  }

  .public-blog .blog-reading-progress {
    top: calc(var(--kopf-h) - 3px);
    display: none;
  }

  .public-blog .blog-prose h2 {
    scroll-margin-top: calc(var(--kopf-h) + 22px);
  }

  /* Patric 28.09.: Text füllt am Computer die ganze rechte Spalte der
     Containerbreite, statt bei 66ch zu enden. */
  .public-blog .blog-article-layout {
    --blog-copy: 100%;
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-areas: "aside content";
    justify-content: start;
  }

  .public-blog .blog-article-aside {
    display: flex;
    max-height: calc(100vh - var(--kopf-h) - 28px);
    flex-direction: column;
    grid-area: aside;
    order: initial;
    align-self: start;
    position: sticky;
    top: calc(var(--kopf-h) + 28px);
  }

  .public-blog .blog-toc {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
  }

  /* Der Fokusring liegt innen, sonst schneidet der Rand der scrollenden
     Liste ihn ab; scroll-padding hält den fokussierten Eintrag frei. */
  .public-blog .blog-toc__list {
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scroll-padding-block: 12px;
  }

  .public-blog .blog-toc__list a:focus-visible {
    outline-offset: -3px;
  }

  .public-blog .blog-stellenhinweis {
    flex: 0 0 auto;
    margin-top: 18px;
    padding: 20px;
  }

  .public-blog .blog-stellenhinweis__titel {
    font-size: var(--gc-fs-small);
  }

  .public-blog .blog-stellenhinweis__text {
    font-size: var(--gc-fs-small);
  }

  .public-blog .blog-stellenhinweis .btn {
    margin-top: 12px;
  }

  .public-blog .blog-prose {
    grid-area: content;
    order: initial;
  }

  .public-blog .blog-prose__inhalt .blog-section-title {
    scroll-margin-top: calc(var(--kopf-h) + 22px);
  }
}

@media (max-width: 699px) {
  /* Gemessen am 06.09.2026: Platzhalter einzeilig, echte Titel zweizeilig. */
  .public-blog .blog-article-hero__title {
    min-height: calc(2 * 1.02em);
  }

  .public-blog .job-ohne-js-hinweis {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .public-blog .job-ohne-js-hinweis p {
    flex-basis: 100%;
  }

  /* Auf schmalen Detailseiten steht der lange Artikeltitel bereits
     direkt darunter als H1. Im Breadcrumb bleiben deshalb nur die zwei
     stabilen Orientierungspunkte stehen; der dynamische Hook bleibt im
     DOM und wird vom Datenclient weiterhin aktualisiert. */
  .public-blog-detail .blog-breadcrumb li[aria-current="page"] {
    display: none;
  }

  .public-blog .article-teaser:nth-child(even) .article-teaser__media {
    order: 0;
  }

  .public-blog .blog-related-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }

}

@media (max-width: 1023px) {
  .public-blog .blog-stellenhinweis {
    display: none;
  }

  /* Chromium layoutet den geschlossenen details-Inhalt sonst intern
     weiter. Bei 320 px ragte dadurch das unsichtbare Branchen-Symbol
     um einen Pixel heraus und blieb für die Messung ein Überlauf. */
  .public-blog .menü:not([open]) > .menü__panel {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-blog .blog-feature__media img,
  .public-blog .article-teaser__media img,
  .public-blog .blog-arrow-link,
  .public-blog .blog-arrow-link::after,
  .public-blog .blog-reading-progress__bar {
    transition: none;
  }

  .public-blog .blog-feature:hover .blog-feature__media img,
  .public-blog .article-teaser__media:hover img {
    transform: none;
  }

  .public-blog .blog-arrow-link:hover::after {
    transform: rotate(45deg);
  }
}

/* =====================================================================
   D5a, 17.09.2026: Rückholregel entfernt, wirkungslos geworden.
   ---------------------------------------------------------------------
   public-brand.css senkt .gc-label unter 340 px nicht mehr auf 11 px, sondern
   hält 12 px global (AUFTRAG_D5.md, D5a Punkt 1). software-baumschule-
   bewerbermanagement.html, blog.html, blog-artikel.html und blog-archiv.html,
   die diese Regel hier auffing, stehen jetzt schon durch die Markenebene bei
   12 px. */