/* =========================================================
   evernine-media.com – Corp-2026 Artikel-Stylesheet
   Scope: .corp-article / .corp-post / .blog-article
   Tokens: paper, paper-hi, ink, ink-soft, sage, lilac, line, curve
   ========================================================= */

/* ---------- Artikel-Rahmen (Renderer) ---------- */

.corp-article,
.corp-post {
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.corp-post-head {
  max-width: 42rem; /* ~68–72 Zeichen */
  margin: 0 auto;
  padding: 2.5rem 1.25rem 0;
}

.corp-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

/* Textkörper: zentrierte Lesespalte */
.corp-body {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

/* ---------- Blog-Artikel-Struktur ---------- */

.blog-article {
  color: var(--ink);
}

.blog-article-header {
  margin-bottom: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}

.blog-article-cat {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 1rem;
  font-weight: 500;
}

.blog-article-title,
.blog-article-header h1,
.corp-body h1.blog-article-title {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 1.1rem;
}

.blog-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.15rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

.blog-article-meta-sep {
  color: var(--line);
  margin: 0 0.45rem;
  user-select: none;
}

/* Breadcrumb */
.blog-breadcrumb {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  line-height: 1.5;
}

.blog-breadcrumb a {
  color: var(--sage);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--curve), color 0.2s var(--curve);
}

.blog-breadcrumb a:hover {
  color: var(--ink);
  border-bottom-color: var(--line);
}

/* ---------- Featured Image + Quelle ---------- */

.blog-featured-img {
  margin: 0 0 2.25rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-hi);
}

.blog-featured-img img,
.corp-body .blog-featured-img img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.blog-bildquelle {
  display: block;
  margin: 0.55rem 0 0;
  padding: 0 0.15rem;
  font-size: 0.75rem;
  font-style: italic;
  text-align: right;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ---------- Takeaways-Kasten ---------- */

.blog-takeaways {
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.35rem 1.5rem 1.25rem;
  margin: 0 0 2rem;
}

.blog-takeaways-label {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--sage);
  margin: 0 0 0.75rem;
}

.blog-takeaways ul {
  margin: 0;
  padding: 0 0 0 1.15rem;
}

.blog-takeaways li {
  margin: 0 0 0.45rem;
  color: var(--ink);
  padding-left: 0.2rem;
}

.blog-takeaways li:last-child {
  margin-bottom: 0;
}

.blog-takeaways li::marker {
  color: var(--sage);
}

/* ---------- Inhaltsverzeichnis (aufklappbar) ---------- */

.blog-toc {
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin: 0 0 2.25rem;
}

.blog-toc-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 0.65rem;
  font-weight: 500;
}

/* Der Toggle ist ein span mit einem "+" INNERHALB des Labels, kein Button:
   <div class="blog-toc-label">Inhalt <span class="blog-toc-toggle">+</span></div>
   Also ein rundes Zeichen am Zeilenende, keine Pille. */
.blog-toc-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
}

.blog-toc-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.9rem;
  line-height: 1;
  color: var(--sage);
  cursor: pointer;
  transition: background 0.2s var(--curve), border-color 0.2s var(--curve),
              transform 0.2s var(--curve);
}

.blog-toc-label:hover .blog-toc-toggle {
  border-color: var(--sage);
  transform: scale(1.06);
}

.blog-toc-toggle:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
}

ol.blog-toc-list,
.blog-toc-list {
  margin: 0.85rem 0 0;
  padding: 0 0 0 1.25rem;
  list-style: decimal;
}

.blog-toc-list li {
  margin: 0 0 0.4rem;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.blog-toc-list a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--curve), border-color 0.2s var(--curve);
}

.blog-toc-list a:hover {
  color: var(--sage);
  border-bottom-color: var(--lilac);
}

/* ---------- Fließtext: nackte Elemente ---------- */

.corp-body .blog-article-body,
.blog-article-body {
  color: var(--ink);
}

.blog-article-body > p,
.corp-body p {
  margin: 0 0 1.15rem;
}

.blog-article-body > p:last-child,
.corp-body p:last-child {
  margin-bottom: 0;
}

/* Überschriften im Artikel – editorial, nicht Landingpage-hero */
.blog-article-body h2,
.corp-body .blog-article-body h2,
.corp-body h2 {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 2.4rem 0 0.9rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
}

.blog-article-body h2:first-child,
.corp-body h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 1.75rem;
}

.blog-article-body h3,
.corp-body h3 {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--sage);
  margin: 1.85rem 0 0.65rem;
}

.blog-article-body strong,
.corp-body strong {
  font-weight: 600;
  color: var(--ink);
}

.blog-article-body em,
.corp-body em {
  font-style: italic;
  color: var(--ink);
}

.blog-article-body a:not([class]),
.corp-body a:not([class]),
.blog-lp-link {
  color: var(--sage);
  text-decoration: none;
  border-bottom: 1px solid var(--lilac);
  transition: color 0.2s var(--curve), border-color 0.2s var(--curve);
}

.blog-article-body a:not([class]):hover,
.corp-body a:not([class]):hover,
.blog-lp-link:hover {
  color: var(--ink);
  border-bottom-color: var(--sage);
}

.blog-article-body a:focus-visible,
.corp-body a:focus-visible,
.blog-lp-link:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Listen */
.blog-article-body ul,
.corp-body ul,
.blog-article-body ol,
.corp-body ol {
  margin: 0 0 1.25rem;
  padding: 0 0 0 1.25rem;
}

.blog-article-body li,
.corp-body li {
  margin: 0 0 0.4rem;
  padding-left: 0.2rem;
}

.blog-article-body ul li::marker,
.corp-body ul li::marker {
  color: var(--sage);
}

.blog-article-body ol li::marker,
.corp-body ol li::marker {
  color: var(--lilac);
  font-weight: 500;
}

/* Bilder im Fließtext */
.blog-article-body img,
.corp-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper-hi);
}

.blog-article-body figure,
.corp-body figure {
  margin: 1.75rem 0;
  padding: 0;
}

.blog-article-body figure img,
.corp-body figure img {
  margin: 0 auto;
}

.blog-article-body figcaption,
.corp-body figcaption {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
}

/* Inline-Code */
.blog-article-body code,
.corp-body code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.875em;
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.12em 0.4em;
  color: var(--sage);
}

/* ---------- FAQ: details/summary ---------- */

.blog-article-body details,
.corp-body details {
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 0 0 0.65rem;
  padding: 0;
  overflow: hidden;
}

.blog-article-body details[open],
.corp-body details[open] {
  border-color: var(--line);
}

.blog-article-body summary,
.corp-body summary {
  cursor: pointer;
  list-style: none;
  padding: 0.95rem 1.15rem;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding-right: 2.5rem;
  transition: background 0.2s var(--curve);
}

.blog-article-body summary::-webkit-details-marker,
.corp-body summary::-webkit-details-marker {
  display: none;
}

/* Chevron als lilac-Akzent, ruhig */
.blog-article-body summary::after,
.corp-body summary::after {
  content: "";
  position: absolute;
  right: 1.15rem;
  top: 50%;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--lilac);
  border-bottom: 1.5px solid var(--lilac);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.25s var(--curve);
}

.blog-article-body details[open] summary::after,
.corp-body details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.blog-article-body summary:hover,
.corp-body summary:hover {
  background: var(--paper);
}

.blog-article-body summary:focus-visible,
.corp-body summary:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: -2px;
}

.blog-article-body details > *:not(summary),
.corp-body details > *:not(summary) {
  padding: 0 1.15rem 1.05rem;
  color: var(--ink-soft);
  margin-top: 0;
}

.blog-article-body details p,
.corp-body details p {
  margin: 0 0 0.65rem;
}

.blog-article-body details p:last-child,
.corp-body details p:last-child {
  margin-bottom: 0;
}

/* ---------- Tabellen (kritisch) ---------- */
/* Wrapper scrollt; nackte table bleibt unangetastet im Markup */

.blog-method-table,
.blog-table-wrap,
.evm-table-frame {
  width: 100%;
  margin: 1.75rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-hi);
}

.blog-method-table table,
.corp-body .blog-method-table table,
.blog-table-wrap table,
.evm-table-frame table,
.blog-article-body table,
.blog-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  background: var(--paper-hi);
}

/* Mindestbreite nur dort, wo ein scrollender Wrapper sie auffaengt. Von den 21
   Tabellen liegen 14 in .blog-method-table, sieben stehen frei im Fliesstext:
   die haetten mit erzwungener Mindestbreite keinen Container, der scrollt,
   sondern wuerden die ganze Seite horizontal aufreissen. */
.blog-method-table table,
.blog-table-wrap table,
.evm-table-frame table {
  min-width: 32rem;
}

/* Freistehende Tabellen scrollen in sich selbst, ohne Wrapper im Markup. */
.blog-article-body > table,
.corp-body > table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.blog-method-table thead,
.blog-article-body table thead {
  background: var(--sage);
  color: var(--paper);
}

.blog-method-table th,
.blog-article-body table th {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--sage);
  color: var(--paper);
  white-space: nowrap;
  vertical-align: bottom;
}

.blog-method-table td,
.blog-article-body table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: top;
}

.blog-method-table tbody tr:last-child td,
.blog-article-body table tbody tr:last-child td {
  border-bottom: none;
}

/* Zebra: paper vs paper-hi – kein Weiß */
.blog-method-table tbody tr:nth-child(even),
.blog-article-body table tbody tr:nth-child(even) {
  background: var(--paper);
}

.blog-method-table tbody tr:nth-child(odd),
.blog-article-body table tbody tr:nth-child(odd) {
  background: var(--paper-hi);
}

/* ---------- Stat-Block ---------- */

.blog-stat {
  background: var(--sage);
  color: var(--paper);
  border-radius: 16px;
  padding: 1.75rem 1.65rem;
  margin: 2rem 0;
  text-align: center;
}

.blog-stat-number {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--paper);
  display: block;
  margin-bottom: 0.55rem;
}

.blog-stat-desc {
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--paper);
  opacity: 0.92;
  margin: 0 0 0.65rem;
}

.blog-stat-source {
  display: block;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--paper);
  opacity: 0.7;
  letter-spacing: 0.02em;
}

/* ---------- Insight-Kasten ---------- */

.blog-insight {
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  margin: 1.85rem 0;
}

.blog-insight-text {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

/* ---------- Inline-CTA ---------- */

.blog-inline-cta {
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem 1.5rem;
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.blog-inline-cta-text {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
}

.blog-inline-cta-btn,
.blog-btn-primary,
.blog-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.75rem 1.35rem;
  cursor: pointer;
  transition: background 0.25s var(--curve), color 0.25s var(--curve),
    border-color 0.25s var(--curve), transform 0.25s var(--curve);
}

.blog-inline-cta-btn,
.blog-btn-primary {
  background: var(--sage);
  color: var(--paper);
  border: 1px solid var(--sage);
}

.blog-inline-cta-btn:hover,
.blog-btn-primary:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  transform: translateY(-1px);
}

.blog-btn-outline {
  background: transparent;
  color: var(--sage);
  border: 1px solid var(--sage);
}

.blog-btn-outline:hover {
  background: var(--sage);
  color: var(--paper);
  transform: translateY(-1px);
}

.blog-inline-cta-btn:focus-visible,
.blog-btn-primary:focus-visible,
.blog-btn-outline:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}

/* ---------- Bottom-CTA (dunkles Band) ---------- */

.blog-bottom-cta {
  background: var(--sage);
  color: var(--paper);
  border-radius: 16px;
  margin: 2.75rem 0 2rem;
  padding: 0;
}

.blog-bottom-cta-inner {
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
}

.blog-bottom-cta-inner p,
.blog-bottom-cta p {
  margin: 0;
  color: var(--paper);
  font-size: 1.1rem;
  line-height: 1.5;
}

.blog-bottom-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

/* Buttons im dunklen Band: paper als Fläche, outline in paper */
.blog-bottom-cta .blog-btn-primary {
  background: var(--paper);
  color: var(--sage);
  border-color: var(--paper);
}

.blog-bottom-cta .blog-btn-primary:hover {
  background: var(--paper-hi);
  color: var(--ink);
  border-color: var(--paper-hi);
}

.blog-bottom-cta .blog-btn-outline {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}

.blog-bottom-cta .blog-btn-outline:hover {
  background: var(--paper);
  color: var(--sage);
}

/* ---------- Related Articles ---------- */

.blog-related {
  margin: 3rem 0 1.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.blog-related-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 1.15rem;
  font-weight: 500;
}

.blog-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

@media (min-width: 640px) {
  .blog-related-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-related-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.15rem 1.2rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--curve), border-color 0.25s var(--curve),
    box-shadow 0.25s var(--curve);
}

.blog-related-card:hover {
  transform: translateY(-2px);
  border-color: var(--sage);
  box-shadow: 0 8px 24px rgba(26, 23, 18, 0.06);
}

.blog-related-card:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}

/* Die Kinder der Karte heissen im Markup blog-related-CARD-*, nicht
   blog-related-*. Beide Schreibweisen stehen hier, weil kuenftige Beitraege
   die kuerzere Form benutzen koennten. */
.blog-related-card-cat,
.blog-related-cat {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lilac);
}

.blog-related-card-title,
.blog-related-title {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}

/* blog-related-card-lp ist selbst ein <a> und liegt neben der Karte:
   der Verweis auf die zugehoerige Landingpage. */
.blog-related-card-lp,
.blog-related-lp {
  display: inline-block;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin: 0;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s var(--curve), border-color 0.2s var(--curve);
}

.blog-related-card-lp:hover,
.blog-related-lp:hover {
  color: var(--sage);
  border-bottom-color: var(--sage);
}

.blog-related-card-arrow,
.blog-related-arrow {
  color: var(--sage);
  font-size: 0.9rem;
  margin-top: 0.25rem;
  align-self: flex-start;
  transition: transform 0.25s var(--curve);
}

.blog-related-card:hover .blog-related-card-arrow,
.blog-related-card:hover .blog-related-arrow {
  transform: translateX(3px);
}

/* Anfuehrungszeichen ueber dem Merksatz. Dekoration, deshalb aus dem
   Vorlesefluss genommen. */
.blog-insight-icon {
  font-family: "Red Hat Display", sans-serif;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--lilac);
  margin: 0 0 0.5rem;
  user-select: none;
}

/* ---------- Querverweis Magazin (xref) ---------- */

.blog-xref {
  margin: 2rem 0;
}

.blog-xref-label {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lilac);
  margin: 0 0 0.65rem;
  font-weight: 500;
}

.blog-xref-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.15rem 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--curve), border-color 0.25s var(--curve);
}

.blog-xref-card:hover {
  transform: translateY(-1px);
  border-color: var(--lilac);
}

.blog-xref-card:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}

.blog-xref-title {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: 1.2rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}

.blog-xref-mag {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.blog-xref-arrow {
  color: var(--lilac);
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

/* ---------- Empfehlungs-Aside ---------- */

aside.evm-recommend {
  background: var(--paper-hi);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
  margin: 1.75rem 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.55;
}

aside.evm-recommend a {
  color: var(--sage);
  border-bottom: 1px solid var(--lilac);
  text-decoration: none;
}

aside.evm-recommend a:hover {
  color: var(--ink);
  border-bottom-color: var(--sage);
}

aside.evm-recommend a:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
}

/* ---------- Blockquotes (falls im Content) ---------- */

.blog-article-body blockquote,
.corp-body blockquote {
  margin: 2.25rem 0;
  padding: 0;
  color: var(--ink);
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: 1.35rem;
  line-height: 1.4;
  font-style: italic;
}

/* ---------- Horizontal rule ---------- */

.blog-article-body hr,
.corp-body hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2.25rem 0;
}

/* ---------- Mobile ab 380px ---------- */

@media (max-width: 480px) {
  .corp-post-head,
  .corp-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .blog-takeaways,
  .blog-toc,
  .blog-insight,
  .blog-inline-cta {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  .blog-stat {
    padding: 1.4rem 1.15rem;
  }

  .blog-bottom-cta-inner {
    padding: 1.5rem 1.2rem;
  }

  .blog-method-table table,
  .blog-article-body table {
    min-width: 28rem;
    font-size: 0.85rem;
  }

  .blog-method-table th,
  .blog-method-table td,
  .blog-article-body table th,
  .blog-article-body table td {
    padding: 0.65rem 0.75rem;
  }

  .blog-inline-cta-btn,
  .blog-btn-primary,
  .blog-btn-outline {
    width: 100%;
  }

  .blog-bottom-cta-btns {
    flex-direction: column;
    width: 100%;
  }

  .blog-bottom-cta-btns .blog-btn-primary,
  .blog-bottom-cta-btns .blog-btn-outline {
    width: 100%;
  }
}

/* Sehr schmal: Lesespalte bleibt, Tabellen scrollen */
@media (max-width: 380px) {
  .corp-article,
  .corp-post {
    font-size: 1rem;
  }

  .blog-article-title,
  .blog-article-header h1 {
    font-size: clamp(1.75rem, 8vw, 2rem);
  }
}

/* ---------- Reduced Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .blog-related-card,
  .blog-xref-card,
  .blog-inline-cta-btn,
  .blog-btn-primary,
  .blog-btn-outline,
  .blog-toc-toggle,
  .blog-article-body summary::after,
  .corp-body summary::after,
  .blog-breadcrumb a,
  .blog-toc-list a,
  .blog-lp-link,
  .blog-article-body a,
  .corp-body a {
    transition: none;
  }

  .blog-related-card:hover,
  .blog-xref-card:hover,
  .blog-inline-cta-btn:hover,
  .blog-btn-primary:hover,
  .blog-btn-outline:hover {
    transform: none;
  }
}

/* ---------- Print: ruhig, sparsam Tinte ---------- */

@media print {
  .corp-article,
  .corp-post {
    background: var(--paper);
    color: var(--ink);
  }

  .blog-toc-toggle,
  .blog-inline-cta,
  .blog-bottom-cta,
  .blog-related {
    break-inside: avoid;
  }

  .blog-method-table {
    overflow: visible;
  }

  .blog-method-table table {
    min-width: 0;
  }
}

/* =========================================================
   Vorrang vor dem Seiten-Supplement
   ---------------------------------------------------------
   Der Renderer haengt fuer generische Unterseiten ein Inline-Stylesheet an
   (wp_add_inline_style auf dem Handle evm-corp-2026). Dessen Selektoren sind
   mit ".corp-page .corp-body ..." zwei Klassen tief und schlagen damit die
   einklassigen Regeln oben, obwohl diese Datei spaeter laedt. Auf Beitraegen
   soll aber die Artikel-Typografie gelten, nicht die Seiten-Typografie.
   Deshalb hier dieselben Eigenschaften noch einmal, auf gleicher Tiefe.
   ========================================================= */

.corp-post .corp-body {
  max-width: 42rem;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.corp-post .corp-body p {
  margin: 0 0 1.35rem;
}

.corp-post .corp-body h2 {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 2.6rem 0 0.9rem;
}

.corp-post .corp-body h3 {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  line-height: 1.25;
  color: var(--ink);
  margin: 2rem 0 0.65rem;
}

.corp-post .corp-body ul,
.corp-post .corp-body ol {
  padding-left: 1.25rem;
  margin: 0 0 1.25rem;
}

.corp-post .corp-body li + li {
  margin-top: 0.4rem;
}

/* Tabellen: das Supplement setzt display:block und einen duennen Sage-Strich
   unter jede Zelle. Beides wuerde die Wrapper-Optik zerlegen. */
.corp-post .corp-body table {
  display: table;
  margin: 0;
  font-size: 0.9rem;
  border-collapse: collapse;
}

.corp-post .corp-body .blog-method-table table,
.corp-post .corp-body .blog-table-wrap table,
.corp-post .corp-body .evm-table-frame table {
  min-width: 32rem;
}

/* Freistehende Tabellen behalten ihren eigenen Scroll-Container. */
.corp-post .corp-body > table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  margin: 1.75rem 0;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.corp-post .corp-body th {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.85rem 1rem;
  color: var(--paper);
  border-bottom: 1px solid var(--sage);
  vertical-align: bottom;
}

.corp-post .corp-body td {
  padding: 0.75rem 1rem;
  vertical-align: top;
  text-align: left;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.corp-post .corp-body a {
  color: var(--sage);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}

/* Alles, was eine eigene Optik mitbringt, darf keine Fliesstext-Unterstreichung
   erben: Karten, Buttons, Aufklapper. */
.corp-post .corp-body a[class] {
  text-decoration: none;
}

/* Das Titelbild sitzt in einem Container, der bereits Rahmen und Radius traegt.
   Die allgemeine Bildregel weiter oben wuerde einen zweiten Rahmen darum legen. */
.blog-featured-img img,
.corp-body .blog-featured-img img {
  border: 0;
  border-radius: 0;
  margin: 0;
}

/* Die Bildquelle gehoert an die rechte Kante des Bildes, nicht an die des
   Textkoerpers: sonst steht sie ohne erkennbaren Bezug im Raum. */
.blog-featured-img + .blog-bildquelle {
  margin-top: 0.5rem;
  margin-bottom: 2.25rem;
}

/* Das Verzeichnis startet eingeklappt; das JS haengt evm-open an. */
.blog-toc-list {
  display: none;
}

.blog-toc.evm-open .blog-toc-list {
  display: block;
}

.blog-toc-label:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Tabellen duerfen breiter sein als die Lesespalte
   ---------------------------------------------------------------------------
   Eine dreispaltige Tabelle mit Saetzen in den Zellen erstickt in 42rem: die
   erste Spalte bricht auf vier Zeilen um, die dritte verschwindet im Scroll.
   Redaktionell ist der Ausbruch ueber den Satzspiegel hinaus das uebliche
   Mittel. Der Kopf darf dabei umbrechen - in Grossbuchstaben und ohne Umbruch
   war "Was Arbeitgeber direkt beeinflussen koennen" allein breiter als die
   halbe Tabelle.
--------------------------------------------------------------------------- */
.corp-post .corp-body .blog-method-table,
.corp-post .corp-body .blog-table-wrap,
.corp-post .corp-body .evm-table-frame,
.corp-post .corp-body > table {
  width: min(58rem, calc(100vw - 3rem));
  margin-left: 50%;
  transform: translateX(-50%);
}

.blog-method-table th,
.blog-article-body table th,
.corp-post .corp-body th {
  white-space: normal;
  hyphens: auto;
}

/* Erste Spalte traegt meist das Schlagwort und darf schmal bleiben,
   die Textspalten bekommen den Rest. */
.corp-post .corp-body table th:first-child,
.corp-post .corp-body table td:first-child {
  width: 26%;
}

@media (max-width: 720px) {
  .corp-post .corp-body .blog-method-table,
  .corp-post .corp-body .blog-table-wrap,
  .corp-post .corp-body .evm-table-frame,
  .corp-post .corp-body > table {
    width: 100%;
    margin-left: 0;
    transform: none;
  }

  .corp-post .corp-body table th:first-child,
  .corp-post .corp-body table td:first-child {
    width: auto;
  }
}

/* ---------------------------------------------------------------------------
   Dunkles Abschlussband: Text muss hell bleiben
   ---------------------------------------------------------------------------
   Der Override-Block weiter oben setzt fuer .corp-post .corp-body pauschal
   h3, p und a auf Ink-Schwarz. Auf dem Sage-Band ergibt das dunkle Schrift auf
   dunklem Grund - Ueberschrift und Text waren praktisch unsichtbar, der
   Hauptknopf sah aus wie ein leerer Rahmen. Diese Regeln stehen deshalb eine
   Stufe tiefer und ziehen die Farben zurueck ins Helle.
   Ohne den Padding-Fall unten steht das Band auch ohne -inner-Huelle richtig:
   von 11 Beitraegen haben nur 10 die innere Schicht.
--------------------------------------------------------------------------- */
.corp-post .corp-body .blog-bottom-cta {
  padding: 2rem 1.75rem;
  color: var(--paper);
}

.corp-post .corp-body .blog-bottom-cta-inner {
  padding: 0;
}

.corp-post .corp-body .blog-bottom-cta h2,
.corp-post .corp-body .blog-bottom-cta h3,
.corp-post .corp-body .blog-bottom-cta p,
.corp-post .corp-body .blog-bottom-cta li,
.corp-post .corp-body .blog-bottom-cta strong {
  color: var(--paper);
  border-top: 0;
  padding-top: 0;
}

.corp-post .corp-body .blog-bottom-cta h3 {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}

.corp-post .corp-body .blog-bottom-cta p {
  margin: 0 0 1.5rem;
  color: color-mix(in srgb, var(--paper) 78%, transparent);
  max-width: 46ch;
}

/* Der Zeilenumbruch zwischen den beiden Knoepfen stammt aus dem Editor und
   wuerde sie untereinander stapeln. */
.corp-post .corp-body .blog-bottom-cta br {
  display: none;
}

.corp-post .corp-body .blog-bottom-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

/* Auf dunklem Grund tauschen die Knoepfe die Rollen: der Hauptknopf wird hell,
   der Zweitknopf bekommt eine helle Kontur. */
.corp-post .corp-body .blog-bottom-cta .blog-btn-primary {
  background: var(--paper);
  color: var(--sage);
  border: 1px solid var(--paper);
}

.corp-post .corp-body .blog-bottom-cta .blog-btn-primary:hover {
  background: var(--paper-hi);
  color: var(--sage);
}

.corp-post .corp-body .blog-bottom-cta .blog-btn-outline {
  background: transparent;
  color: var(--paper);
  border: 1px solid color-mix(in srgb, var(--paper) 55%, transparent);
}

.corp-post .corp-body .blog-bottom-cta .blog-btn-outline:hover {
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  color: var(--paper);
  border-color: var(--paper);
}

.corp-post .corp-body .blog-bottom-cta a:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
}

/* Traegt eine Karte zusaetzlich die -lp-Klasse, darf die Inline-Darstellung des
   reinen Landingpage-Verweises ihr Spaltenlayout nicht kippen: sonst rutscht
   das Kategorie-Label in dieselbe Zeile wie die Ueberschrift. */
.blog-related-card.blog-related-card-lp,
.blog-related-grid .blog-related-card-lp {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border-bottom: 0;
}

/* =========================================================
   Cover-Overlap: Titelbild ueber die volle Buehne, Kopf als Karte darauf
   =========================================================
   Bis 26.07.2026 sassen Titelbild, Kopf und Brotkrume mit im Fliesstext und
   damit in der 42rem-Lesespalte: das Titelbild war exakt so breit wie eine
   Textzeile. Der Renderer schneidet die drei Bloecke jetzt heraus und ordnet
   sie neu an. Stufung: Cover (Buehne 1360px) -> Karte (48rem) -> Text (42rem).
   Entwurf der Zahlen von Grok, Kollisionen mit dem Bestand hier nachgezogen. */

.corp-post.has-cover .corp-cover-media {
  margin: 0;
  padding: 0;
  width: 100%;
  /* 560px sind rund 41% der 1360er-Buehne: editorial, kein Splash-Screen.
     Die 82vh der Referenz waeren auf Papier zu plakativ. */
  max-height: min(560px, 58vh);
  overflow: hidden;
  background: var(--ink);
}

.corp-post.has-cover .corp-cover-media img {
  display: block;
  width: 100%;
  height: min(560px, 58vh);
  max-height: min(560px, 58vh);
  object-fit: cover;
  border: 0;
  border-radius: 0;
  margin: 0;
}

/* Die Karte: breiter als der Text, schmaler als das Bild. 48rem gegen 42rem
   ergibt die sichtbare Stufe, ohne dass die Zeile fuer Weight 300 zu lang wird.
   Ueberlappung 88px, rund ein Sechstel der Bildhoehe. */
.corp-post.has-cover .corp-cover-panel {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  max-width: 48rem;
  width: calc(100% - 48px);
  margin: -88px auto 0;
  padding: 40px 48px 36px;
  /* Abhebung ohne Schattenwolke und ohne weisse Flaeche: minimal helleres
     Papier, eine Haarlinie als Kante, dazu die seitlich sichtbaren
     Bildstreifen. */
  background: var(--paper-hi);
  border: 1px solid var(--line);
  color: var(--ink);
}

/* Der Kopf bringt aus dem Bestand eine eigene Trennlinie und Abstaende mit.
   In der Karte waere das eine zweite Kante direkt ueber der echten. */
.corp-cover-panel .blog-article-header {
  margin: 0;
  padding: 0;
  border-bottom: 0;
}

.corp-cover-panel .blog-breadcrumb {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}

.corp-cover-panel .blog-article-cat {
  margin: 0 0 0.75rem;
}

/* Weight 300 braucht Flaeche, nicht Lautstaerke: 42px als oberes Ende, dichte
   Zeilen, die duennen Glyphen leicht zusammengezogen. */
.corp-cover-panel .blog-article-title,
.corp-cover-panel h1.blog-article-title {
  font-size: clamp(1.75rem, 1.15rem + 1.4vw, 2.625rem);
  line-height: 1.18;
  letter-spacing: -0.012em;
  margin: 0 0 1rem;
  max-width: 24ch;
}

.corp-cover-panel .blog-article-meta {
  margin: 0;
}

/* Bildnachweis, der am Titelbild klebte: steht als letzte Zeile in der Karte,
   damit er den Bezug zum Bild behaelt, ohne die Ueberlappung zu verschieben. */
.corp-cover-panel .blog-bildquelle {
  margin: 1.25rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  text-align: right;
}

.corp-post.has-cover .corp-body {
  margin-top: 2.75rem;
}

/* Zwischen 721 und 1100px wird die Karte fast so breit wie das Bild und die
   Ueberlappung kippt optisch zum Vollbreiten-Band. Gegenmittel: mehr sichtbarer
   Bildrand, flachere Ueberlappung, etwas niedrigeres Bild. */
@media (max-width: 1100px) and (min-width: 721px) {
  .corp-post.has-cover .corp-cover-media,
  .corp-post.has-cover .corp-cover-media img {
    height: min(480px, 50vh);
    max-height: min(480px, 50vh);
  }

  .corp-post.has-cover .corp-cover-panel {
    width: calc(100% - 64px);
    margin-top: -64px;
    padding: 34px 40px 30px;
  }

  .corp-cover-panel .blog-article-title,
  .corp-cover-panel h1.blog-article-title {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .corp-post.has-cover .corp-cover-media,
  .corp-post.has-cover .corp-cover-media img {
    height: min(320px, 42vh);
    max-height: min(320px, 42vh);
  }

  .corp-post.has-cover .corp-cover-panel {
    width: auto;
    max-width: none;
    margin: -46px 16px 0;
    padding: 28px 24px 24px;
  }

  .corp-post.has-cover .corp-body {
    margin-top: 2rem;
  }
}

/* Beitrag ohne Titelbild: die Karte verliert Flaeche und Ueberlappung, sonst
   stuende ein heller Kasten grundlos auf dem Papier. Es bleibt ein
   typografischer Kopf mit Papierkante, wie auf den uebrigen Seiten. */
.corp-post:not(.has-cover) .corp-cover-panel {
  max-width: 42rem;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1.75rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
}

.corp-post:not(.has-cover) .corp-body {
  margin-top: 2.25rem;
}

/* Der Rahmen um Seiteninhalte ist auf 48rem gedeckelt (Inline-Supplement des
   Renderers, richtig bei reinen Textseiten). Ein Beitrag mit Cover braucht die
   Bühne dagegen breit, sonst bleibt auch das Titelbild bei 653px stehen.
   Zwei Klassen tief, damit die einklassige Regel aus dem Supplement nicht
   gewinnt - ohne !important. Stufung: Bühne 1280 -> Karte 768 -> Text 672,
   dieselbe Staffelung wie auf der Schwesterseite. */
.wrap.corp-page-post {
  max-width: 1280px;
}

/* Bilder im Fliesstext brechen ueber den Satzspiegel aus. Vorher standen sie
   auf Textbreite (630px) - die Referenz zeigt an derselben Stelle 1232px.
   Gleicher Mechanismus wie bei den Tabellen. Betrifft genau die vier <figure>
   im Fliesstext; die Magazin-Logos in den Querverweis-Karten bleiben unberuehrt,
   weil sie nicht als figure ausgezeichnet sind. */
.corp-post .corp-body .blog-figure {
  /* Der zweite Wert ist exakt der Seitenrand der Bühne (.wrap benutzt dasselbe
     clamp). Ohne diese Kopplung ragt das Bild bei mittleren Fensterbreiten bis
     zu 48px über die Kante des Titelbilds hinaus. */
  width: calc(min(1280px, 100vw) - 2 * clamp(22px, 4vw, 64px));
  margin: 3rem 0;
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--paper-hi);
}

.corp-post .corp-body .blog-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.corp-post .corp-body .blog-figure-caption {
  margin: 0;
  padding: 0.9rem 1.4rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-align: left;
  font-style: normal;
}

@media (max-width: 720px) {
  .corp-post .corp-body .blog-figure {
    width: 100%;
    margin-left: 0;
    transform: none;
  }
}


/* =========================================================
   Weiterlesen: drei Karten nebeneinander, mit Bild
   =========================================================
   Vorher lief das Raster auf zwei Spalten und brach die dritte Karte in eine
   eigene Zeile um - zwei oben, eine allein darunter. Die Reihe bricht deshalb
   jetzt wie die Bilder über den Satzspiegel aus und trägt drei gleich breite
   Karten. Gerechnet auf dieselbe Kante wie Titelbild und Fliesstextbild. */
.corp-post .corp-body .blog-related {
  width: calc(min(1280px, 100vw) - 2 * clamp(22px, 4vw, 64px));
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 3.5rem;
  padding-top: 2.25rem;
}

.corp-post .corp-body .blog-related-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

/* Die Karte trägt jetzt ein Bild und wird dadurch zum Objekt, nicht zum
   Textlink: Rahmen aussen, Innenabstand nur um die Schrift. */
.corp-post .corp-body .blog-related-card {
  padding: 0;
  overflow: hidden;
  background: var(--paper-hi);
  gap: 0;
}

.blog-related-card-media {
  display: block;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--line);
}

.blog-related-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border: 0;
  border-radius: 0;
  transition: transform 0.4s var(--curve);
}

.blog-related-card:hover .blog-related-card-media img {
  transform: scale(1.03);
}

.blog-related-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.05rem 1.15rem 1.2rem;
}

/* Ohne Deckel reissen unterschiedlich lange Titel die drei Karten auf
   verschiedene Hoehen; das Raster faengt das ab, die Schrift soll trotzdem
   nicht ausufern. */
.corp-post .corp-body .blog-related-card-title {
  font-size: 1.05rem;
  line-height: 1.28;
}

@media (max-width: 900px) {
  .corp-post .corp-body .blog-related-grid {
    grid-template-columns: 1fr;
  }

  .corp-post .corp-body .blog-related {
    width: 100%;
    margin-left: 0;
    transform: none;
  }
}

/* Das Abschlussband steht direkt unter der Weiterlesen-Reihe und blieb als
   einziges Element auf Textbreite: die Kante sprang von 1165px auf 672px.
   Jetzt fluchten Titelbild, Fliesstextbild, Kartenreihe und Band auf einer
   Linie. */
.corp-post .corp-body .blog-bottom-cta {
  width: calc(min(1280px, 100vw) - 2 * clamp(22px, 4vw, 64px));
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 2.5rem;
}

@media (max-width: 900px) {
  .corp-post .corp-body .blog-bottom-cta {
    width: 100%;
    margin-left: 0;
    transform: none;
  }
}