/*
 * objectflow Website Builder - News (Liste und Artikel).
 * Umsetzung des Design-Handoffs "Valentina Bootservice - Newsseite"
 * (Designsystem Nocturne). Jeder Wert ist eine Variable: --ofn-* liest die
 * Farben aus objectflow -> Design (var(--vbc-…)) und faellt ohne Design auf
 * Nocturne zurueck. Inter kommt lokal aus objectflow Katalog (Handle
 * vbc-inter), nie von Google Fonts; fehlt der Katalog, greift die Systemschrift.
 */

.ofn {
  --ofn-font: var(--vbc-font, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --ofn-bg: var(--vbc-bg, #161826);
  --ofn-surface: var(--vbc-surface, #232532);
  --ofn-text: var(--vbc-fg, #e9e9ed);
  --ofn-accent: var(--vbc-accent, #9184d9);
  --ofn-accent-300: var(--vbc-accent-300, #d2cefd);
  --ofn-accent-400: #b5abfc;
  --ofn-accent-700: var(--vbc-accent-ink, #5d5294);
  --ofn-accent-900: #2b2741;
  --ofn-text-88: color-mix(in srgb, var(--ofn-text) 88%, transparent);
  --ofn-text-85: color-mix(in srgb, var(--ofn-text) 85%, transparent);
  --ofn-text-78: color-mix(in srgb, var(--ofn-text) 78%, transparent);
  --ofn-text-70: color-mix(in srgb, var(--ofn-text) 70%, transparent);
  --ofn-text-55: color-mix(in srgb, var(--ofn-text) 55%, transparent);
  --ofn-divider: var(--vbc-line, color-mix(in srgb, var(--ofn-text) 16%, transparent));
  --ofn-linie-soft: color-mix(in srgb, var(--ofn-text) 8%, transparent);
  --ofn-rand: color-mix(in srgb, var(--ofn-text) 6%, transparent);
  --ofn-radius: 8px;
  --ofn-gutter: clamp(20px, 5vw, 72px);
  --ofn-spalte: clamp(24px, 4vw, 64px);

  box-sizing: border-box;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--ofn-gutter) 84px;
  font-family: var(--ofn-font);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ofn-text);
  text-wrap: pretty;
}
.ofn *, .ofn *::before, .ofn *::after { box-sizing: border-box; }
.ofn :focus { outline: none; }
.ofn :focus-visible { outline: 2px solid var(--ofn-accent); outline-offset: 2px; }
.ofn ::selection { background: color-mix(in srgb, var(--ofn-accent) 30%, transparent); }
.ofn h1, .ofn h2, .ofn h3 { font-family: var(--ofn-font); font-weight: 500; color: var(--ofn-text); margin: 0; }
.ofn p { margin: 0; }
.ofn a { color: var(--ofn-accent); text-decoration: none; text-underline-offset: 3px; }
.ofn a:hover { color: var(--ofn-accent-400); }
.ofn figure { margin: 0; }
.ofn img { display: block; max-width: 100%; }

/* Seitenhintergrund: Akzent-Bloom oben rechts, Abdunkelung unten links,
   Grundfarbe. Divi/Theme-Flaechen dazwischen werden durchsichtig. */
body.ofn-news-hintergrund {
  background:
    radial-gradient(1200px 720px at 82% -160px, color-mix(in srgb, #2b2741 75%, transparent), transparent 60%),
    radial-gradient(1100px 800px at -10% 100%, rgba(0, 0, 0, 0.30), transparent 55%),
    var(--vbc-bg, #161826);
  background-attachment: scroll;
  color: var(--vbc-fg, #e9e9ed);
}
body.ofn-news-hintergrund #main-content,
body.ofn-news-hintergrund #et-main-area,
body.ofn-news-hintergrund .et_pb_section,
body.ofn-news-hintergrund .site-content,
body.ofn-news-hintergrund #content { background: transparent; }

/* — Bilder — */
.ofn .ofn-bild {
  position: relative;
  overflow: hidden;
  border-radius: var(--ofn-radius);
  mix-blend-mode: lighten;
  background-color: transparent;
}
.ofn .ofn-bild img { width: 100%; height: 100%; object-fit: cover; }
.ofn .ofn-bild-16-10 { aspect-ratio: 16 / 10; }
.ofn .ofn-bild-21-9 { aspect-ratio: 21 / 9; }
.ofn .ofn-bild-3-2 { aspect-ratio: 3 / 2; }

/* — Kicker und Trennlinie — */
.ofn .ofn-kicker { display: flex; align-items: center; gap: 14px; }
.ofn .ofn-kicker-strich { width: 44px; height: 1px; background: var(--ofn-accent); flex: none; }
.ofn .ofn-kicker-text {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ofn-accent); font-feature-settings: "tnum" 1;
}
.ofn .ofn-trenn {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--ofn-divider) 48px, var(--ofn-divider) calc(100% - 48px), transparent);
}

/* — Liste: Kopf — */
.ofn .ofn-kopf { padding: 84px 0 56px; }
.ofn-shortcode .ofn-kopf { padding-top: 0; }
.ofn .ofn-kopf-kicker { margin-bottom: 18px; }
.ofn .ofn-h1 {
  font-size: clamp(40px, 5.6vw, 72px); line-height: 1.05; letter-spacing: -0.015em;
  margin: 0 0 0 -0.04em;
}
.ofn .ofn-untertitel {
  font-size: 17px; line-height: 1.65; max-width: 54ch; margin: 22px 0 0;
  color: var(--ofn-text-78);
}
.ofn .ofn-leer { color: var(--ofn-text-70); padding: 28px 0; }

/* — Aufmacher — */
.ofn .ofn-aufmacher {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 28px var(--ofn-spalte);
  align-items: center;
  color: inherit;
  padding: 28px 0 40px;
  border-radius: var(--ofn-radius);
}
.ofn .ofn-aufmacher:hover { color: inherit; }
.ofn .ofn-datum-kicker {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ofn-accent); font-feature-settings: "tnum" 1; margin: 0 0 14px;
}
.ofn .ofn-aufmacher-titel {
  font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.012em; margin: 0 0 16px;
}
.ofn .ofn-aufmacher-teaser {
  font-size: 15.5px; line-height: 1.65; color: var(--ofn-text-78); margin: 0 0 20px; max-width: 52ch;
}
.ofn .ofn-weiter { font-size: 14px; font-weight: 500; color: var(--ofn-accent); }
.ofn .ofn-aufmacher:hover .ofn-weiter { color: var(--ofn-accent-400); }

/* — Karten-Raster — */
.ofn .ofn-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  padding-top: 40px;
  align-items: start; /* Karten wachsen nur mit ihrem Inhalt - wichtig ohne Bild */
}
.ofn-shortcode .ofn-raster:first-child { padding-top: 0; }
.ofn .ofn-karte {
  display: flex; flex-direction: column;
  background: var(--ofn-surface);
  border-radius: var(--ofn-radius);
  overflow: hidden;
  padding: 0;
  color: inherit;
  box-shadow: 0 0 0 1px var(--ofn-rand);
  transition: box-shadow .15s;
}
.ofn .ofn-karte:hover {
  color: inherit;
  box-shadow: 0 0 0 1px var(--ofn-accent-700), 0 6px 18px rgba(0, 0, 0, 0.45);
}
.ofn .ofn-karte .ofn-bild { border-radius: 0; }
.ofn .ofn-karte-text { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.ofn .ofn-karte-datum {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ofn-accent); font-feature-settings: "tnum" 1;
}
.ofn .ofn-karte-strich { width: 32px; height: 1px; background: var(--ofn-accent); margin: 4px 0 2px; }
.ofn .ofn-karte-titel { font-weight: 500; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; }
.ofn .ofn-karte.ohne-bild .ofn-karte-titel { font-size: 23px; line-height: 1.2; letter-spacing: -0.012em; }
.ofn .ofn-karte-teaser { font-size: 13.5px; line-height: 1.55; color: var(--ofn-text-70); margin: 0; }

/* — Artikel — */
.ofn .ofn-artikel { padding-top: 48px; }
.ofn .ofn-zurueck { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ofn-accent); }
.ofn .ofn-zurueck:hover { color: var(--ofn-accent-400); }
.ofn .ofn-artikel-kopf { padding: 56px 0 40px; max-width: 760px; }
.ofn .ofn-artikel-kicker { margin-bottom: 18px; }
.ofn .ofn-artikel-titel {
  font-size: clamp(32px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 0 -0.04em;
}
.ofn .ofn-lead { font-size: 19px; line-height: 1.55; margin: 24px 0 0; color: var(--ofn-text-85); }
.ofn .ofn-titelbild { margin: 0 0 48px; }
.ofn .ofn-titelbild-text { font-size: 12.5px; margin-top: 10px; color: var(--ofn-text-55); }

.ofn .ofn-artikel-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: 32px var(--ofn-spalte);
}
.ofn .ofn-marginalie { font-size: 13px; line-height: 1.6; color: var(--ofn-text-55); font-feature-settings: "tnum" 1; }
.ofn .ofn-marginalie-label { margin: 0; }
.ofn .ofn-marginalie-wert { margin: 0; color: var(--ofn-text); }
.ofn .ofn-text { max-width: 62ch; }
.ofn .ofn-absatz { font-size: 16.5px; line-height: 1.7; margin: 0 0 24px; color: var(--ofn-text-88); }
.ofn .ofn-zwischentitel { font-size: 23px; line-height: 1.25; letter-spacing: -0.01em; margin: 40px 0 16px; }
.ofn .ofn-text > .ofn-zwischentitel:first-child { margin-top: 0; }
.ofn .ofn-link { font-size: 15px; font-weight: 500; margin: -8px 0 24px; }
.ofn .ofn-link a { color: var(--ofn-accent); }
.ofn .ofn-link a:hover { color: var(--ofn-accent-400); }
.ofn .ofn-abbildung { margin: 8px 0 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ofn .ofn-abbildung-text { font-size: 12.5px; color: var(--ofn-text-55); display: flex; gap: 12px; align-items: center; }
.ofn .ofn-abbildung-strich { width: 24px; height: 1px; background: var(--ofn-accent); flex: none; }

.ofn .ofn-trenn-artikel { margin: 64px 0 40px; }
.ofn .ofn-weitere-kicker { margin-bottom: 24px; }
.ofn .ofn-weitere-liste { display: flex; flex-direction: column; }
.ofn .ofn-weitere-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: 8px var(--ofn-spalte);
  align-items: baseline;
  padding: 16px 0;
  color: inherit;
  background: linear-gradient(to right, transparent, var(--ofn-linie-soft) 48px, var(--ofn-linie-soft) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.ofn .ofn-weitere-zeile:hover { color: var(--ofn-accent-300); }
.ofn .ofn-weitere-datum { font-size: 13px; color: var(--ofn-text-55); font-feature-settings: "tnum" 1; }
.ofn .ofn-weitere-zeile:hover .ofn-weitere-datum { color: inherit; }
.ofn .ofn-weitere-titel { font-size: 17px; font-weight: 500; line-height: 1.3; }

/* Schmale Bildschirme: Marginalie und "Weitere News" einspaltig (Handoff-Empfehlung). */
@media (max-width: 480px) {
  .ofn .ofn-artikel-raster, .ofn .ofn-weitere-zeile { grid-template-columns: 1fr; }
  .ofn .ofn-artikel-raster { gap: 20px; }
  .ofn .ofn-weitere-zeile { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .ofn .ofn-karte { transition: none; }
}