/* ============================================================================
   osp-neuigkeiten.v1.css — Neuigkeiten-Dialog (Plan Kopf und Seitenleiste global AP-03, G-20, G-21)
   ----------------------------------------------------------------------------
   Gehört zu /shared/osp-neuigkeiten.v1.js. Der Dialog öffnet UNTER dem Kopf (top = Kopfhöhe) und verdeckt ihn nie:
   Fläche und Hintergrund beginnen erst unter der Kopfzeile. Kopfhöhe aus --okopf2-h (osp-kopf.v2.css), sonst 44 px.

   Kontrast (WCAG 2.2, relative Luminanz; Text mindestens 4,5 : 1):
     hell    Text #1F2937 auf #FFFFFF ........ 14,68 : 1   Zweittext #4B5563 auf #FFFFFF .. 7,56 : 1
             Link/Fokus #0070B0 auf #FFFFFF .. 5,32 : 1     Hinweis #7A3E00 auf #FFF4E5 ... 7,68 : 1
     dunkel  Text #E5E7EB auf #1E293B ........ 11,82 : 1    Zweittext #CBD5E1 auf #1E293B . 9,85 : 1
             Link/Fokus #7CC4F2 auf #1E293B .. 7,69 : 1     Hinweis #FDE68A auf #422006 ... 11,70 : 1
   ============================================================================ */

:root {
  --onews-bg: #FFFFFF;
  --onews-text: #1F2937;
  --onews-text2: #4B5563;
  --onews-rand: #CBD5E1;
  --onews-link: #0070B0;
  --onews-hover: #EAF3FA;
  --onews-hinweis-bg: #FFF4E5;
  --onews-hinweis-text: #7A3E00;
  --onews-hinten: rgba(15, 23, 42, .45);
}
:root[data-theme="dark"], html.dark {
  --onews-bg: #1E293B;
  --onews-text: #E5E7EB;
  --onews-text2: #CBD5E1;
  --onews-rand: #475569;
  --onews-link: #7CC4F2;
  --onews-hover: #17324A;
  --onews-hinweis-bg: #422006;
  --onews-hinweis-text: #FDE68A;
  --onews-hinten: rgba(0, 0, 0, .6);
}

.onews { position: fixed; z-index: 900; left: 0; right: 0; bottom: 0; top: var(--okopf2-h, var(--ok-kopf-h, 44px)); }
.onews-hinten { position: absolute; inset: 0; background: var(--onews-hinten); }
.onews-dialog {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  box-sizing: border-box; width: min(640px, calc(100vw - 32px)); max-height: calc(100% - 48px); overflow: auto;
  background: var(--onews-bg); color: var(--onews-text);
  border: 1px solid var(--onews-rand); border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 14px; line-height: 1.45; text-align: left;
}
.onews-dialog:focus { outline: none; }
.onews-dialog :is(a, button, summary):focus-visible { outline: 3px solid var(--onews-link); outline-offset: 2px; }
.onews-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--onews-rand); }
.onews-titel { margin: 0; font-family: 'Montserrat', 'Open Sans', system-ui, sans-serif; font-size: 17px; font-weight: 700; line-height: 1.2; }
.onews-zu {
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--onews-rand); border-radius: 8px; background: transparent; color: var(--onews-text); font: inherit; cursor: pointer;
}
.onews-zu:hover { background: var(--onews-hover); }
.onews-zu svg { width: 18px; height: 18px; }
.onews-koerper { padding: 12px 16px 16px; }
.onews-ueber { margin: 0 0 2px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.onews-untertitel { margin: 0 0 6px; color: var(--onews-text2); }
.onews-punkte { margin: 6px 0 0; padding-left: 20px; }
.onews-punkte li { margin: 0 0 4px; overflow-wrap: anywhere; }
.onews-achtung { margin: 10px 0 2px; padding: 2px 8px; display: inline-block; border-radius: 6px; background: var(--onews-hinweis-bg); color: var(--onews-hinweis-text); font-size: 12px; font-weight: 600; }
.onews-leer { margin: 0; color: var(--onews-text2); }

.onews-alle { margin-top: 14px; border-top: 1px solid var(--onews-rand); padding-top: 8px; }
.onews-alle > summary, .onews-version > summary {
  display: flex; align-items: center; min-height: 32px; padding: 4px 6px; border-radius: 6px; cursor: pointer; list-style-position: inside; font-weight: 600;
}
.onews-version > summary { font-weight: 400; }
.onews-alle > summary:hover, .onews-version > summary:hover { background: var(--onews-hover); }
.onews-version { margin-left: 4px; }
.onews-version > .onews-punkte { margin-bottom: 8px; }

@media (prefers-reduced-motion: no-preference) {
  .onews-dialog { animation: onews-ein 140ms ease-out; }
}
@keyframes onews-ein { from { opacity: 0; transform: translateX(-50%) translateY(6px); } to { opacity: 1; transform: translateX(-50%); } }
@media print { .onews { display: none !important; } }
