@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..700,30..100,0..1;1,9..144,300..700,30..100,0..1&display=swap');
/* ^ Live (aweos): Fraunces declared in fec-custom.css loads only on the homepage; this @import makes Fraunces self-contained for blog pages. 2026-06-10 */
/* =========================================================================
   FEC Single-Post Template — editorial long-form (2026-05-06)
   Scope: body.single-post (every individual blog post)
   Tokens: Navy #283582, Cyan #3ca3dd, Cool-white #ecf0f7, gray #6b7286/#3a3f5e
   Typography: Fraunces (headings, italic-em accent), Avenir/Inter (body),
               Rubik (eyebrows), JetBrains Mono (meta)
   Reference: KR (Kuhn Rikon) post-detail pattern, FEC editorial tone.
   ========================================================================= */

/* JetBrains Mono import removed 2026-06-10 — single-post reduced to the 3 system
   fonts (Avenir / Rubik / Fraunces) per design-system contract + 26.05 "fewer fonts". */

/* ---- HIDE DIVI HEADER + TOP-BAR + THEME-BUILDER HEADER ----------------- */
/* Editorial post-detail = no menu; full magazine immersion. */

/* 2026-08-27: Header, Hauptmenue und Admin-Bar werden NICHT mehr ausgeblendet
   (Entscheidung Jonas). Die Seite, die Stefanie abgenommen hat
   (/fec-blog-redesign/), zeigt die Navigation ebenfalls, und Besucher aus
   LinkedIn brauchen einen Weg in die Website. Ausgeblendet bleiben nur die
   Divi-Elemente, die diese Website gar nicht nutzt.
   Vorher standen hier zusaetzlich: #main-header, .et_fixed_nav #main-header,
   #top-menu, .et_header_style_left #et-top-navigation, nav.et-menu-nav und
   #wpadminbar. Wer die Magazin-Ansicht ohne Menue wiederhaben will, nimmt
   diese sechs Selektoren hier wieder auf und entfernt den Block
   "Header wieder sichtbar" am Ende der Datei. */
body.single-post #top-header,
body.single-post #et-secondary-menu,
/* Divi Theme Builder header layout (used by Margot tenants) */
body.single-post .et-l--header,
body.single-post [class*="_tb_header"],
body.single-post div[class*="et_pb_section"][class*="_tb_header"],
body.single-post .et_pb_menu__wrap { display: none !important; }

body.single-post #page-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.single-post.admin-bar #page-container,
body.single-post.admin-bar #main-content { margin-top: 0 !important; }

/* Pin hero to absolute top of viewport */
body.single-post #main-content { padding-top: 0 !important; }
body.single-post #et-main-area { padding-top: 0 !important; }
body.single-post #et-boc { padding-top: 0 !important; }

/* ---- KILL DEFAULT DIVI POST WRAPPER LAYOUT ----------------------------- */

body.single-post #left-area {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  float: none !important;
}

body.single-post #sidebar {
  display: none !important;
}

body.single-post #main-content {
  background: #ffffff;
}

body.single-post .container {
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

body.single-post .et_post_meta_wrapper {
  display: none !important;            /* kill default Divi meta block */
}

/* Hide default theme post-title we'll re-render via custom block */
body.single-post .entry-content > h1.entry-title:first-child {
  display: none;
}

/* ---- ARTICLE WRAPPER --------------------------------------------------- */

body.single-post #post-wrap,
body.single-post .et_pb_post {
  position: relative;
  background: #ffffff;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: none !important;
  border: 0 !important;
}

body.single-post .et_post_meta_wrapper { display: none !important; }

body.single-post article.post {
  max-width: none;
  background: #ffffff;
  padding: 0;
}

/* The .entry-content is where Divi puts the body. We center via internal
   children (each block has its own max-width), so wrapper stays full-width. */
body.single-post .entry-content {
  position: relative;
  margin: 0;
  padding: 0;
}

/* ---- HERO: featured image as background, title overlaid --------------- */

body.single-post .fec-post-hero {
  position: relative;
  width: 100%;
  min-height: 78vh;
  background-color: #283582;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  margin: 0 0 64px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}

body.single-post .fec-post-hero.no-image {
  background-image:
    radial-gradient(120% 80% at 0% 100%, rgba(60, 163, 221, 0.32) 0%, rgba(60, 163, 221, 0) 60%),
    radial-gradient(80% 60% at 100% 0%, rgba(60, 163, 221, 0.18) 0%, rgba(60, 163, 221, 0) 60%),
    linear-gradient(135deg, #283582 0%, #1d2a6b 100%);
}

body.single-post .fec-post-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Subtle vignette for depth */
    radial-gradient(120% 100% at 50% 0%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 60%),
    /* Bottom-heavy navy→near-black gradient: stronger at bottom for H1 legibility */
    linear-gradient(180deg,
      rgba(20, 26, 65, 0.55) 0%,
      rgba(20, 26, 65, 0.62) 30%,
      rgba(15, 19, 50, 0.78) 60%,
      rgba(8, 11, 32, 0.92) 100%),
    /* Cool gray-blue desaturation tint applied across the whole image */
    linear-gradient(180deg, rgba(28, 36, 70, 0.18), rgba(28, 36, 70, 0.18));
  pointer-events: none;
}

/* 2026-08-27: Der Header liegt jetzt ueber dem Kopfbild. Die Menuepunkte sind
   siteweit weisses 30 Prozent (#ffffff4d in style.css) - auf der Navy-Flaeche
   der Unterseiten lesbar, ueber einem hellen Foto nicht. Deshalb ein
   zusaetzlicher Schleier ueber den oberen 220px, nur bei has-image. Die
   Menuefarbe selbst bleibt unangetastet, sie gilt fuer die ganze Website. */
body.single-post .fec-post-hero.has-image .fec-post-hero-overlay {
  background:
    linear-gradient(180deg, rgba(10, 14, 40, 0.58) 0%, rgba(10, 14, 40, 0) 220px),
    radial-gradient(120% 100% at 50% 0%, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg,
      rgba(20, 26, 65, 0.55) 0%,
      rgba(20, 26, 65, 0.62) 30%,
      rgba(15, 19, 50, 0.78) 60%,
      rgba(8, 11, 32, 0.92) 100%),
    linear-gradient(180deg, rgba(28, 36, 70, 0.18), rgba(28, 36, 70, 0.18));
}

body.single-post .fec-post-hero.no-image .fec-post-hero-overlay {
  background: linear-gradient(180deg,
    rgba(20, 26, 65, 0.0) 0%,
    rgba(20, 26, 65, 0.25) 100%);
}

/* 2026-08-27: Ohne Beitragsbild ist der Kopfbereich eine reine Navy-Flaeche.
   Bei 78vh bleibt darin viel Leere - und das ist mit 38 von 45 Beitraegen der
   Regelfall, solange die Bilder zu klein sind. Deshalb hier flacher, in der
   Groessenordnung der Unterseiten-Heroes (fec-sub-hero: 216px oben + Inhalt).
   Die Bildvariante behaelt ihre 78vh. */
body.single-post .fec-post-hero.no-image,
body.single-post .fec-post-hero.no-image .fec-post-hero-inner {
  min-height: 58vh;
}

body.single-post .fec-post-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 24px 72px;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
}

body.single-post .fec-post-hero-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: min(960px, 75vw);
}

/* Back-link sits at top of hero */
body.single-post .fec-post-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 16px 10px 12px;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 240ms cubic-bezier(0.165, 0.84, 0.44, 1),
              transform 240ms cubic-bezier(0.165, 0.84, 0.44, 1),
              border-color 240ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

body.single-post .fec-post-back:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateX(-2px);
  color: #ffffff;
}

body.single-post .fec-post-back::before {
  content: "←";
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

/* 2026-08-27 (Jonas: "Texte liegen nicht in einer Flucht"): Meta, Titel und
   "Read article" beginnen alle bei der linken Kante der Inhaltsspalte. Beim
   Zurueck-Button traf das nur auf die Kapsel zu - die Beschriftung war um
   35px eingerueckt (12px Innenabstand + 15px Pfeil + 8px Luecke) und brach
   damit die senkrechte Linie. Die ganze Kapsel wird deshalb um genau diese
   35px ausgerueckt, dann steht die Beschriftung in der Flucht und die Kapsel
   haengt leicht links heraus.
   Nur ab 1025px: mobil ist der Innenabstand des Kopfbereichs nur 20px, dort
   wuerde die Kapsel abgeschnitten (der Kopfbereich hat overflow:hidden). */
@media only screen and (min-width: 1025px) {
  body.single-post .fec-post-back {
    margin-left: -35px;
  }
}

body.single-post .fec-post-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

body.single-post .fec-post-meta .fec-post-date {
  color: rgba(255, 255, 255, 0.78);
}

body.single-post .fec-post-meta .fec-post-read {
  color: rgba(255, 255, 255, 0.62);
  position: relative;
  padding-left: 18px;
}

body.single-post .fec-post-meta .fec-post-read::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
}

body.single-post .fec-post-meta .fec-post-cat {
  display: inline-block;
  padding: 7px 14px;
  background: #3ca3dd;
  color: #ffffff;
  border-radius: 999px;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(60, 163, 221, 0.35);
  transition: background 240ms cubic-bezier(0.165, 0.84, 0.44, 1),
              transform 240ms cubic-bezier(0.165, 0.84, 0.44, 1),
              box-shadow 240ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

body.single-post .fec-post-meta .fec-post-cat:hover {
  background: #2e96d1;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(60, 163, 221, 0.5);
}

body.single-post .fec-post-title {
  margin: 0 !important;
  max-width: 18ch;
  font-family: "Avenir-Black", "Avenir", "Avenir Next", sans-serif;
  font-weight: 900;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
  text-wrap: balance;
}

/* Long titles (4+ words): tighten character width */
body.single-post .fec-post-title:has(em),
body.single-post .fec-post-hero-content .fec-post-title {
  max-width: 22ch;
}

body.single-post .fec-post-title em {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.20em;
  color: #3ca3dd;
  text-transform: none;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  text-shadow: 0 2px 18px rgba(60, 163, 221, 0.35);
}

/* ---- HERO SCROLL CUE -------------------------------------------------- */

body.single-post .fec-post-scroll-cue {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 240ms cubic-bezier(0.165, 0.84, 0.44, 1),
              transform 240ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

body.single-post .fec-post-scroll-cue:hover {
  color: #ffffff;
  transform: translateY(2px);
}

body.single-post .fec-post-scroll-cue-arrow {
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  position: relative;
}

body.single-post .fec-post-scroll-cue-arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 7px;
  height: 7px;
  margin-left: -4px;
  border-right: 1.5px solid #ffffff;
  border-bottom: 1.5px solid #ffffff;
  transform: rotate(45deg);
  animation: fec-scroll-cue-pulse 2.4s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
}

@keyframes fec-scroll-cue-pulse {
  0%, 60%, 100% { transform: translateY(0) rotate(45deg); opacity: 1; }
  30%           { transform: translateY(4px) rotate(45deg); opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  body.single-post .fec-post-scroll-cue-arrow::before { animation: none; }
}

/* ---- DECK (italic lede right under hero) ------------------------------ */

body.single-post .fec-post-deck-wrap {
  max-width: 760px;
  margin: 0 auto 56px;
  padding: 0 24px;
}

body.single-post .fec-post-deck {
  margin: 0;
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 24px);
  font-style: italic;
  line-height: 1.5;
  color: #4f566b;
  border-left: 3px solid #3ca3dd;
  padding-left: 20px;
}

/* ---- BODY CONTENT (centered 70ch column) ------------------------------- */

body.single-post .fec-post-body {
  /* 2026-08-27: von 720 auf 808px (Jonas: "Inhalt zu schmal"). Zusammen mit
     der Neutralisierung der Divi-Raender unten kommen davon 760px als Text
     an, vorher waren es 605px - rund 87 Zeichen pro Zeile statt 69. Das ist
     die eine Zahl, an der man die Spaltenbreite dreht. */
  max-width: 808px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Der Beitragsinhalt kommt aus dem Divi Builder. Divis .et_pb_row ist 90%
   breit und zentriert, brachte also je Seite 33,6px eigenen Rand mit - von
   den 720px Spalte blieben dadurch nur 605px Text. Innerhalb des Beitrags
   neutralisieren, damit die eingestellte Spaltenbreite auch die Textbreite
   ist. Mehrspaltige Rows funktionieren weiter, Divis Spalten rechnen in
   Prozent der Row. */
body.single-post .fec-post-body .et_pb_row {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

body.single-post .fec-post-body p {
  margin: 0 0 1.4em;
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 17.5px;
  line-height: 1.72;
  color: #3a3f5e;
}

body.single-post .fec-post-body > p:first-of-type::first-letter {
  /* Drop-cap ONLY on the first paragraph that is a direct child of body
     (not inside blockquote, list, or figure) — subtle, editorial */
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 4.5em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.08em 0 -0.04em;
  color: #3ca3dd;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

body.single-post .fec-post-body p strong {
  font-weight: 700;
  color: #283582;
}

body.single-post .fec-post-body p a,
body.single-post .fec-post-body li a {
  color: #3ca3dd;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  padding-bottom: 2px;
  transition: color 240ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

body.single-post .fec-post-body p a:hover,
body.single-post .fec-post-body li a:hover {
  color: #283582;
}

body.single-post .fec-post-body h2 {
  margin: 56px 0 20px !important;
  max-width: 22ch;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #283582;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

body.single-post .fec-post-body h2 em {
  font-style: italic;
  color: #3ca3dd;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

body.single-post .fec-post-body h3 {
  margin: 40px 0 16px !important;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #283582;
}

body.single-post .fec-post-body ul,
body.single-post .fec-post-body ol {
  margin: 0 0 1.4em;
  padding-left: 28px;
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-size: 17.5px;
  line-height: 1.72;
  color: #3a3f5e;
}

body.single-post .fec-post-body li {
  margin: 0 0 8px;
  padding-left: 4px;
}

body.single-post .fec-post-body li::marker {
  color: #3ca3dd;
}

/* Pull-quote / blockquote */
body.single-post .fec-post-body blockquote {
  position: relative;
  margin: 80px -40px 80px -40px;
  padding: 56px 64px 56px 96px;
  border: 0;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(60, 163, 221, 0.06) 0%, rgba(60, 163, 221, 0) 60%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-top: 1px solid rgba(40, 53, 130, 0.08);
  border-bottom: 1px solid rgba(40, 53, 130, 0.08);
  max-width: none;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: #283582;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  text-wrap: balance;
}

/* Large decorative opening quote-glyph */
body.single-post .fec-post-body blockquote::before {
  content: "“";
  position: absolute;
  top: 8px;
  left: 28px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 120px;
  line-height: 1;
  color: #3ca3dd;
  opacity: 0.85;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  pointer-events: none;
}


body.single-post .fec-post-body blockquote p {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

body.single-post .fec-post-body blockquote cite {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b7286;
}

/* Cyan accent rule before cite */
body.single-post .fec-post-body blockquote cite::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 2px;
  background: #3ca3dd;
  flex: none;
}

/* ---- TEXT+IMAGE SPREAD MODULES (break-out from 720px column) ---------- */
/* Two patterns:
   .fec-post-spread--text-left     → text  +  portrait 3:4 image
   .fec-post-spread--image-left    → square 1:1 image  +  text                       */

body.single-post .fec-post-body .fec-post-spread {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 100vw - 48px);
  margin: 96px 0;
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

body.single-post .fec-post-body .fec-post-spread--text-left {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

body.single-post .fec-post-body .fec-post-spread--image-left {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
}

@media (max-width: 880px) {
  body.single-post .fec-post-body .fec-post-spread {
    grid-template-columns: 1fr !important;
    gap: 24px;
    margin: 64px 0;
    width: min(720px, 100vw - 32px);
  }
  /* On mobile: image always on top */
  body.single-post .fec-post-body .fec-post-spread--text-left .fec-post-spread-text     { order: 2; }
  body.single-post .fec-post-body .fec-post-spread--text-left .fec-post-spread-figure   { order: 1; }
  body.single-post .fec-post-body .fec-post-spread--image-left .fec-post-spread-figure  { order: 1; }
  body.single-post .fec-post-body .fec-post-spread--image-left .fec-post-spread-text    { order: 2; }
}

/* Text side */
body.single-post .fec-post-body .fec-post-spread-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.single-post .fec-post-body .fec-post-spread-eyebrow {
  margin: 0 0 4px;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #3ca3dd;
}

body.single-post .fec-post-body .fec-post-spread-title {
  margin: 0 0 12px;
  font-family: "Avenir-Black", "Avenir", "Avenir Next", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #283582;
  text-transform: uppercase;
  text-wrap: balance;
}

body.single-post .fec-post-body .fec-post-spread-title em {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.20em;
  color: #3ca3dd;
  text-transform: none;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

body.single-post .fec-post-body .fec-post-spread-body {
  margin: 0;
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.65;
  color: #3a3f5e;
}

body.single-post .fec-post-body .fec-post-spread-body + .fec-post-spread-body {
  margin-top: 4px;
}

/* Image side */
body.single-post .fec-post-body .fec-post-spread-figure {
  margin: 0;
  position: relative;
}

body.single-post .fec-post-body .fec-post-spread-figure .fec-post-figure-placeholder,
body.single-post .fec-post-body .fec-post-spread-figure img {
  width: 100%;
  border-radius: 6px;
  background:
    radial-gradient(120% 80% at 30% 30%, rgba(60, 163, 221, 0.08) 0%, rgba(60, 163, 221, 0) 60%),
    linear-gradient(135deg, #f5f7fb 0%, #ecf0f7 50%, #f5f7fb 100%);
  box-shadow:
    0 1px 2px rgba(40, 53, 130, 0.04),
    0 24px 48px rgba(40, 53, 130, 0.08);
}

body.single-post .fec-post-body .fec-post-spread-figure--portrait .fec-post-figure-placeholder,
body.single-post .fec-post-body .fec-post-spread-figure--portrait img {
  aspect-ratio: 3 / 4;
}

body.single-post .fec-post-body .fec-post-spread-figure--square .fec-post-figure-placeholder,
body.single-post .fec-post-body .fec-post-spread-figure--square img {
  aspect-ratio: 1 / 1;
}

body.single-post .fec-post-body .fec-post-spread-figure figcaption {
  margin: 14px 0 0;
  padding: 0;
  text-align: left;
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7286;
  max-width: none;
}

/* In-content full-bleed images — break out of 70ch column */
body.single-post .fec-post-body figure,
body.single-post .fec-post-body .fec-post-figure {
  margin: 56px -120px;
  max-width: none;
}

@media (max-width: 1024px) {
  body.single-post .fec-post-body figure,
  body.single-post .fec-post-body .fec-post-figure {
    margin: 56px 0;
  }
}

body.single-post .fec-post-body figure img,
body.single-post .fec-post-body .fec-post-figure img,
body.single-post .fec-post-body .fec-post-figure-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: #f5f7fb;
  display: block;
  box-shadow: 0 16px 32px rgba(40, 53, 130, 0.06);
}

body.single-post .fec-post-body figure figcaption,
body.single-post .fec-post-body .fec-post-figure figcaption,
body.single-post .fec-post-body .fec-post-figure-caption {
  margin: 14px auto 0;
  max-width: 70ch;
  padding: 0 24px;
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7286;
  text-align: center;
}

/* Image placeholder visual (for posts without real images yet) */
body.single-post .fec-post-figure-placeholder {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(120% 80% at 30% 30%, rgba(60, 163, 221, 0.08) 0%, rgba(60, 163, 221, 0) 60%),
    radial-gradient(80% 60% at 80% 80%, rgba(40, 53, 130, 0.06) 0%, rgba(40, 53, 130, 0) 60%),
    linear-gradient(135deg, #f5f7fb 0%, #ecf0f7 50%, #f5f7fb 100%);
  border: 1px dashed rgba(40, 53, 130, 0.22);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: rgba(40, 53, 130, 0.4);
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  overflow: hidden;
}

/* Diagonal cross-hatch (subtle "no image" signal) */
body.single-post .fec-post-figure-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 22px,
      rgba(40, 53, 130, 0.025) 22px,
      rgba(40, 53, 130, 0.025) 23px
    );
  pointer-events: none;
}

/* Camera/image icon glyph */
body.single-post .fec-post-figure-placeholder::after {
  content: attr(data-label);
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 42px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23283582' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'><rect x='3' y='5' width='18' height='14' rx='2'/><circle cx='12' cy='12' r='3.4'/><path d='M9 5l1.5-2h3L15 5'/></svg>") 14px center / 18px no-repeat,
    rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(40, 53, 130, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ---- BYLINE / FOOTER --------------------------------------------------- */

body.single-post .fec-post-footer {
  max-width: 720px;
  margin: 96px auto 0;
  padding: 0 24px;
}

body.single-post .fec-post-rule {
  margin: 0 0 28px;
  height: 1px;
  background: rgba(40, 53, 130, 0.12);
  border: 0;
}

body.single-post .fec-post-byline {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #283582;
}

body.single-post .fec-post-byline-sep {
  color: rgba(40, 53, 130, 0.40);
}

body.single-post .fec-post-byline-loc {
  color: #6b7286;
}

/* ---- "MORE FROM FEC" RELATED POSTS ------------------------------------- */

body.single-post .fec-post-related {
  max-width: 1200px;
  margin: 96px auto 120px;
  padding: 96px 24px 0;
  border-top: 1px solid rgba(40, 53, 130, 0.12);
}

body.single-post .fec-post-related-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  margin: 0 0 40px;
  flex-wrap: wrap;
}

body.single-post .fec-post-related-eyebrow {
  margin: 0 0 8px;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #3ca3dd;
}

body.single-post .fec-post-related-h2 {
  margin: 0 !important;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #283582;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

body.single-post .fec-post-related-h2 em {
  font-style: italic;
  color: #3ca3dd;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}

body.single-post .fec-post-related-cta {
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3ca3dd;
  text-decoration: none;
  border-bottom: 1px solid #3ca3dd;
  padding-bottom: 4px;
  transition: color 240ms cubic-bezier(0.165, 0.84, 0.44, 1),
              border-color 240ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

body.single-post .fec-post-related-cta:hover {
  color: #283582;
  border-color: #283582;
}

body.single-post .fec-post-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

@media (max-width: 980px) {
  body.single-post .fec-post-related-grid { grid-template-columns: 1fr; gap: 24px; }
}

body.single-post .fec-post-related-card {
  background: #ffffff;
  border: 1px solid rgba(40, 53, 130, 0.06);
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(40, 53, 130, 0.04),
    0 12px 32px rgba(40, 53, 130, 0.06);
  transition: box-shadow 360ms cubic-bezier(0.165, 0.84, 0.44, 1),
              transform 360ms cubic-bezier(0.165, 0.84, 0.44, 1);
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

body.single-post .fec-post-related-card:hover {
  box-shadow:
    0 1px 2px rgba(40, 53, 130, 0.06),
    0 32px 64px rgba(40, 53, 130, 0.14);
  transform: translateY(-4px);
  border-color: rgba(60, 163, 221, 0.28);
}

body.single-post .fec-post-related-card-img-wrap {
  overflow: hidden;
}

body.single-post .fec-post-related-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(135deg, #ecf0f7 0%, #f5f7fb 50%, #ecf0f7 100%);
  background-size: cover;
  background-position: center;
  transition: transform 540ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

body.single-post .fec-post-related-card:hover .fec-post-related-card-img {
  transform: scale(1.04);
}

body.single-post .fec-post-related-card-body {
  padding: 24px 24px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.single-post .fec-post-related-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b7286;
}

body.single-post .fec-post-related-card-pill {
  padding: 4px 10px;
  background: #3ca3dd;
  color: #ffffff;
  border-radius: 999px;
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
}

body.single-post .fec-post-related-card-title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: #283582;
}

body.single-post .fec-post-related-card-title em {
  font-style: italic;
  color: #3ca3dd;
}

/* ---- KILL DEFAULT WP COMMENTS BLOCK (Stefanie's site = no comments) ---- */

body.single-post #comment-wrap,
body.single-post .comments-area,
body.single-post .comment-respond,
body.single-post #respond {
  display: none !important;
}

/* ---- RESPONSIVE -------------------------------------------------------- */

@media (max-width: 640px) {
  body.single-post .fec-post-hero {
    min-height: 70vh;
    margin-bottom: 48px;
  }
  body.single-post .fec-post-hero-inner {
    min-height: 70vh;
    padding: 40px 20px 48px;
    gap: 32px;
  }
  body.single-post .fec-post-hero-content { max-width: 100%; gap: 18px; }
  body.single-post .fec-post-title { font-size: clamp(32px, 9vw, 44px); }
  body.single-post .fec-post-deck-wrap { padding: 0 20px; margin-bottom: 40px; }
  body.single-post .fec-post-body p { font-size: 17px; }
  body.single-post .fec-post-body > p:first-of-type::first-letter {
    font-size: 4em;
  }
  body.single-post .fec-post-related { padding-top: 64px; margin-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  body.single-post .fec-post-back,
  body.single-post .fec-post-meta .fec-post-cat,
  body.single-post .fec-post-related-card {
    transition: none !important;
  }
}

/* =========================================================================
   SINGLE-POST FINALIZE — 2026-06-10 (Stefanie 26.05 + transcript 05-06)
   - Category pills removed (hero meta + related cards) → no styling needed
   - Byline → author block: round placeholder avatar + name (cyan) + role +
     "Follow on LinkedIn" (TR 1633-1657: name the author in their expertise,
     like on LinkedIn). Placeholder until Stefanie supplies real authors/photos.
   - Fonts already reduced to the 3 system fonts (Avenir/Rubik/Fraunces).
   - Hide Margot default footer-widget cruft (Archives/Categories) on single
     posts only; on LIVE the FEC Theme-Builder footer applies instead.
   ========================================================================= */

/* ---- Author block (footer byline) --------------------------------------- */
body.single-post .fec-post-byline {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  text-transform: none;          /* override the old uppercase mono byline */
  letter-spacing: 0;
  font-size: inherit;
}

body.single-post .fec-post-author-avatar {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='9' r='3.6' fill='%23ffffff' opacity='0.92'/%3E%3Cpath d='M4.6 20c0-3.6 3.3-6 7.4-6s7.4 2.4 7.4 6' fill='%23ffffff' opacity='0.92'/%3E%3C/svg%3E") center/cover no-repeat,
    linear-gradient(135deg, #3ca3dd 0%, #283582 100%);
  box-shadow: 0 2px 8px rgba(40, 53, 130, 0.25);
}

body.single-post .fec-post-author-avatar.has-photo {
  background-size: cover;
  background-position: center;
}

body.single-post .fec-post-author-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

body.single-post .fec-post-author-name {
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #3ca3dd;                /* author cyan-highlighted ("farblich vorheben") */
}

body.single-post .fec-post-author-role {
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #6b7286;
}

/* "Follow on LinkedIn" — secondary navy pill, pushed to the right.
   LOCKED button family (navy fill, Rubik 500 uppercase, pill, cyan-glow hover). */
body.single-post a.fec-post-linkedin {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  background: #283582;
  border-radius: 999px;
  font-family: "Rubik", "Helvetica Neue", sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff !important;
  text-decoration: none;
  transition: box-shadow 240ms cubic-bezier(.4,0,.2,1),
              transform 240ms cubic-bezier(.4,0,.2,1);
}

body.single-post a.fec-post-linkedin::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1s2.48 1.12 2.48 2.5zM.2 8h4.6v14H.2V8zm7.4 0h4.4v1.9h.06c.6-1.1 2.08-2.26 4.28-2.26 4.58 0 5.42 3 5.42 6.92V22h-4.6v-6.2c0-1.48-.03-3.38-2.06-3.38-2.06 0-2.38 1.6-2.38 3.27V22h-4.6V8z'/%3E%3C/svg%3E") center/contain no-repeat;
}

body.single-post a.fec-post-linkedin:hover {
  transform: scale(1.03);
  box-shadow: 0 0 0 2px rgba(60, 163, 221, 0.55),
              0 8px 24px rgba(60, 163, 221, 0.4);
}

@media (max-width: 600px) {
  body.single-post a.fec-post-linkedin {
    margin-left: 0;
    margin-top: 6px;
  }
}

/* ---- Hide Margot default footer-widget cruft on single posts ------------- */
body.single-post #footer-widgets,
body.single-post .et_pb_widget_area {
  display: none !important;
}


/* ============ Header wieder sichtbar (2026-08-27) ============================
   Gehoert zur Entscheidung oben. Zwei Dinge muessen dafuer nachgezogen werden.

   1. style.css gibt Einzelbeitraegen einen eigenen Kopf: Hintergrundbild
      fec-slider-bg.jpg, padding 25px 0, top 47px (bzw. 79px angemeldet). Das
      stammt aus dem alten Layout mit schmalem Kopf und wuerde jetzt als Band
      im Kopfbild stehen. Der Header wird deshalb durchsichtig gestellt und auf
      denselben Abstand gebracht wie auf allen anderen Seiten (top 60px).

   2. Der Kopfbereich braucht oben Platz, damit der Zurueck-Link nicht unter
      dem Menue liegt (Unterkante des Headers 154px bei 1440px Fensterbreite).
      Hausmass aus fec-sub-hero.css: 216px oben, 150px mobil - hier etwas
      weniger, weil ueber dem Titel noch der Zurueck-Link sitzt.
   ========================================================================= */
/* Hintergrundbild in jeder Breite weg. */
body.single-post header#main-header,
body.logged-in.single-post header#main-header {
  background-image: none !important;
}

/* Abstand von oben und Innenabstand nur am Desktop angleichen. Mobil steht
   der Header ohnehin bei top:0, weil die obere Kontaktleiste dort
   ausgeblendet ist - eine unbedingte Regel hat ihn faelschlich um 60px
   nach unten geschoben und den Zurueck-Link darunter geschickt. */
@media only screen and (min-width: 981px) {
  body.single-post header#main-header,
  body.logged-in.single-post header#main-header {
    top: 60px;
    padding: 10px 0;
  }
  body.single-post .fec-post-hero-inner {
    padding-top: 150px;
  }
}

@media only screen and (max-width: 980px) {
  /* Mobil ebenfalls wie auf allen anderen Seiten: top 0, padding 10px 0.
     style.css gibt Einzelbeitraegen sonst top:47px + padding:25px 0 (Header
     47-167px), wodurch der Zurueck-Link darunter lag. Gemessen 27.08.:
     Unterseiten und /news/ stehen mobil bei 0-90. */
  body.single-post header#main-header,
  body.logged-in.single-post header#main-header {
    top: 0;
    padding: 10px 0;
  }
  body.single-post .fec-post-hero-inner {
    padding-top: 124px;
  }
}