/*
 * ObjektFlow Sitebuilder – Designpaket Nocturne, Bereich News (Liste und Artikel).
 * Dunkel und ruhig, Inter 400/500, Radius 10/8, Akzent als 2-px-Verlaufslinie
 * mit auslaufenden Enden, Knöpfe 1-px-Umriss. Farben folgen der Kundenpalette
 * (ObjektFlow → Design, --vbc-*), Rückfall auf die Paket-Tokens (--of-paket-*).
 * Alle Regeln wirken nur unter .of-bereich--news.of-design--nocturne (bzw. am
 * Wurzelelement mit .of-design--nocturne); Referenz: docs/design-rueckgabe/.
 */
/* Schriften lokal (SIL Open Font License 1.1, OFL.txt in schriften/) – nie von Google Fonts. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(schriften/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(schriften/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* — Nocturne gemeinsam (gleich in allen Nocturne-Paketen des Sitebuilders) — */
.of-bereich.of-design--nocturne {
  --d-grund: var(--vbc-bg, var(--of-paket-grund, #161826));
  --d-panel: var(--vbc-panel, #1b1d2c);
  --d-flaeche: var(--of-paket-flaeche, #1e2133);
  --d-bild: #2a2e45;
  --d-schrift: var(--vbc-fg, var(--of-paket-schrift, #e9e9ed));
  --d-leise: var(--of-paket-leise, #a9aabb);
  --d-akzent: var(--vbc-accent, var(--of-paket-akzent, #9184d9));
  --d-akzent-text: var(--of-paket-akzent-text, #b5abfc);
  --d-linie: var(--vbc-line, rgba(233, 233, 237, .16));
  --d-radius: var(--of-paket-radius, 10px);
  --d-radius-klein: var(--of-paket-radius-klein, 8px);
  --d-titel: var(--vbc-font, var(--of-paket-schrift-titel, Inter, system-ui, sans-serif));
  --d-text: var(--vbc-font, var(--of-paket-schrift-text, Inter, system-ui, sans-serif));
  --d-verlauf: linear-gradient(90deg, transparent, var(--d-akzent) 48px, var(--d-akzent) calc(100% - 48px), transparent);
  font-family: var(--d-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.of-bereich.of-design--nocturne img { max-width: 100%; }
.of-bereich.of-design--nocturne :focus-visible { outline: 2px solid var(--d-akzent); outline-offset: 2px; }
.of-bereich.of-design--nocturne ::selection { background: color-mix(in srgb, var(--d-akzent) 35%, transparent); }

/* Video (YouTube der Basis): Umriss-Kreis im Akzent, Hinweis 62 %, Titel als Kicker. */
.of-design--nocturne .of-video__rahmen { border-radius: var(--d-radius-klein); background: var(--d-bild); }
.of-design--nocturne .of-video__start { background: rgba(22, 24, 38, .28); }
.of-design--nocturne .of-video__start:hover, .of-design--nocturne .of-video__start:focus-visible { background: rgba(22, 24, 38, .45); }
.of-design--nocturne .of-video__symbol { display: none; }
.of-design--nocturne .of-video__start::before {
  content: ""; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--d-akzent);
  background: rgba(22, 24, 38, .55) no-repeat 54% 50% / 20px 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Cpath d='M0 0l20 12L0 24z' fill='%23b5abfc'/%3E%3C/svg%3E");
}
.of-design--nocturne .of-video__start-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.of-design--nocturne .of-video__hinweis { background: rgba(22, 24, 38, .82); color: rgba(233, 233, 237, .62); font-size: 12px; }
.of-design--nocturne .of-video__titel { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--d-akzent-text); margin-top: 12px; }

/* Sprachumschalter [objectflow_sprachen] und Menüpunkt */
.of-design--nocturne .of-sprachen { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.of-design--nocturne .of-sprachen a { color: inherit; opacity: .62; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.of-design--nocturne .of-sprachen a:hover { opacity: 1; }
.of-design--nocturne .of-sprachen__aktiv { color: var(--vbc-accent, #b5abfc); }
/*
 * ObjektFlow Sitebuilder – Designpaket Nocturne, Bereich 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-link-bild { display: grid; gap: 12px; margin: 8px 0 32px; color: inherit; }
.ofn .ofn-link-bild .ofn-bild { transition: box-shadow .15s; }
.ofn .ofn-link-bild:hover .ofn-bild { box-shadow: 0 0 0 1px var(--ofn-accent-700), 0 6px 18px rgba(0, 0, 0, 0.45); }
.ofn .ofn-link-text { font-size: 15px; font-weight: 500; color: var(--ofn-accent); }
.ofn .ofn-link-bild:hover .ofn-link-text { 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; }
}

/* Video (YouTube der Basis) unter dem Titelbild. */
.ofn .ofn-video { margin: 0 0 48px; }
.ofn .ofn-video .of-video { border-radius: var(--vbc-radius-sm, 6px); overflow: hidden; background: var(--ofn-surface, #1d2030); }