/* Kartenring (Reportagen + Security-Ticker), geteilt von neuigkeiten.html und index.html (2026-10-01).
   Ausgelagert aus page-news.css, damit die Startseite denselben Ring nutzt. */
/* =====================================================================
   #aktuelles: 3D-Kartenring der Fachbeiträge (js/news-ring.js, Yusuf 2026-09-30)
   Aufbau wie der GRC-Ring (page-grc.css), hier auf der weißen Karte:
   hintere Karten Navy mit weißer Schrift, vordere Karte weiß mit Kante.
   Ohne JS, mobil oder bei reduzierter Bewegung: horizontale Wischreihe.
   ===================================================================== */
.nr-ring { position: relative; margin: 40px 0 0; }
.nr-stage {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 18px; scrollbar-width: thin;
}
.nr-card {
  flex: 0 0 300px; scroll-snap-align: start; box-sizing: border-box;
  background: #fff; border: 1px solid #dce5f0; border-radius: 20px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(11,28,61,.05);
}
.nr-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.nr-card-link:focus-visible { outline: 3px solid rgba(43,138,255,.55); outline-offset: -3px; border-radius: 20px; }
.nr-card-img { display: block; width: 100%; height: 180px; object-fit: cover; background: #e8eef6; }
.nr-card-eyebrow { margin: 20px 22px 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0066cc; }
.nr-card-title { margin: 8px 22px 0; font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: #0b1c3d; }
.nr-card-lead {
  margin: 10px 22px 0; font-size: 14px; line-height: 1.55; color: #4a5568;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.nr-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 22px 0; font-size: 13px; color: #5a6578; }
.nr-card-more {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  margin: auto 22px 8px; padding-top: 8px; font-size: 15px; font-weight: 600; color: #16336a;
}
.nr-card-more span { transition: transform .25s ease; }
.nr-card-link:hover .nr-card-more span { transform: translateX(4px); }

/* Handy (2026-10-02): Reihe exakt vom Textrand (--nr-gut, Seitenrand der Seite) bis zum Bildschirmrand,
   Karte 82 % der Bildschirmbreite, Abstand = Seitenrand, damit die vorige Karte nach dem Wischen ganz verschwindet.
   Unter der Reihe Pfeile links/rechts und Punkte (44 px hoch), Punkte schrumpfen bei vielen Karten. */
@media (max-width: 720px) {
  .nr-ring { margin: 28px calc(-1 * var(--nr-gut, 20px)) 0; }
  .nr-stage { gap: var(--nr-gut, 20px); padding: 4px var(--nr-gut, 20px) 12px; scroll-padding: 0 var(--nr-gut, 20px); scrollbar-width: none; }
  .nr-stage::-webkit-scrollbar { display: none; }
  .nr-card { flex-basis: 82vw; max-width: 400px; }
  .nr-ctrl { margin-top: 0; gap: 8px; }
  .nr-ctrl .nr-prev, .nr-ctrl .nr-next { flex: none; }
  .nr-ctrl .nr-dots { max-width: 100%; min-width: 0; flex: 0 1 auto; }
  .nr-ctrl .nr-dots button, .nr-ctrl .nr-dots button[aria-current="true"] {
    flex: 0 1 44px; min-width: 20px; width: 44px; height: 44px; padding: 0; border-radius: 8px;
    background: none !important; display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
  }
  .nr-ctrl .nr-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nr-dot, #0b1c3d); opacity: .25; transition: opacity .2s ease, transform .2s ease; }
  .nr-ctrl .nr-dots button[aria-current="true"]::before { opacity: 1; transform: scale(1.3); }
}

/* ---------- 3D-Ring (nur mit JS, ab 721px, ohne reduced motion) ---------- */
.nr-ring.is-ring {
  height: 560px; margin-top: 100px; max-width: 1100px; margin-left: auto; margin-right: auto;
  perspective: 1600px; perspective-origin: 50% -45%;
  overflow-x: clip; outline: none;
}
.nr-ring.is-ring .nr-stage {
  display: block; position: absolute; inset: 0; overflow: visible; padding: 0;
  transform-style: preserve-3d; transition: transform .9s cubic-bezier(.45,0,.2,1);
}
.nr-ring.is-ring .nr-card {
  position: absolute; top: 40px; left: 50%;
  width: clamp(290px, 30vw, 350px); height: 490px;
  margin-left: calc(clamp(290px, 30vw, 350px) / -2);
  cursor: pointer; background: #132a52; border-color: rgba(255,255,255,.14);
  box-shadow: 0 22px 50px rgba(11,28,61,.35);
  transition: transform .9s cubic-bezier(.45,0,.2,1), opacity .9s ease, filter .9s ease, box-shadow .3s ease;
}
.nr-ring.is-ring .nr-card .nr-card-img { height: 200px; }
.nr-ring.is-ring .nr-card:not(.is-front) .nr-card-title { color: #fff; }
.nr-ring.is-ring .nr-card:not(.is-front) .nr-card-eyebrow { color: #9fd3ff; }
.nr-ring.is-ring .nr-card:not(.is-front) .nr-card-lead,
.nr-ring.is-ring .nr-card:not(.is-front) .nr-card-meta,
.nr-ring.is-ring .nr-card:not(.is-front) .nr-card-more { color: rgba(232,234,238,.78); }
.nr-ring.is-ring .nr-card.is-front {
  cursor: default; background: #fff; border-color: #dce5f0;
  box-shadow: 0 34px 80px rgba(11,28,61,.28), 0 0 0 1px rgba(11,28,61,.04);
}
.nr-ring.is-ring .nr-card.is-front .nr-card-link { cursor: pointer; }
.nr-ring.is-ring:focus-visible { outline: 2px solid #0071e3; outline-offset: 8px; border-radius: 20px; }

.nr-ctrl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; }
.nr-ctrl[hidden] { display: none; }
.nr-prev, .nr-next {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #c9d6e6; background: #fff; color: #0b1c3d;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.nr-prev:hover, .nr-next:hover { background: #f1f5fb; border-color: #0b1c3d; }
.nr-ctrl button:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
.nr-dots { display: flex; }
.nr-dots button {
  width: 24px; height: 24px; padding: 8px; border: 0; border-radius: 50%;
  background: rgba(11,28,61,.25); background-clip: content-box; cursor: pointer;
}
.nr-dots button[aria-current="true"] { background: #0b1c3d; background-clip: content-box; padding: 7px; }
@media (prefers-reduced-motion: reduce) { .nr-card-link:hover .nr-card-more span { transform: none; } }

/* =====================================================================
   #sicherheitslage: Ticker als 3D-Ring mit Kategorie-Reitern (js/news-ticker-ring.js,
   Yusuf 2026-09-30). Nutzt die .nr-*-Optik des Reportagen-Rings.
   Ohne JS / reduzierte Bewegung: ursprünglicher Ticker bleibt (Klasse ntr-on fehlt).
   ===================================================================== */
section.news-ticker-section.ntr-on .news-ticker { display: none !important; }
.ntr[hidden] { display: none; }
.ntr-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ntr-tab {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid #c9d6e6; background: #fff; color: #0b1c3d;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ntr-tab-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--nt); flex: none; }
.ntr-tab:hover { border-color: #0b1c3d; background: #f4f7fb; }
.ntr-tab[aria-pressed="true"] { background: #0b1c3d; border-color: #0b1c3d; color: #fff; }
.ntr-tab[aria-pressed="true"] .ntr-tab-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
.ntr-tab:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }

.ntr-ring { margin-top: 28px; }
.ntr-ring.is-ring { margin-top: 84px; }
.ntr-ring.ntr-still .nr-stage, .ntr-ring.ntr-still .nr-card { transition: none !important; }
.ntr-card .nr-card-eyebrow { color: #0b1c3d; display: flex; align-items: center; gap: 8px; }
.ntr-card .nr-card-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nt); flex: none; }
.ntr-card .nr-card-title { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ntr-card .nr-card-img { aspect-ratio: 760 / 430; height: auto; }
.nr-ring.is-ring .ntr-card .nr-card-img { height: 200px; }
.nr-ring.is-ring .ntr-card:not(.is-front) .nr-card-eyebrow { color: #fff; }
/* Kompakte Karten, Geometrie wie der Reportagen-Ring (2026-10-01): gleiche Kartenbreite (.nr-card-Regel oben),
   9 Plätze à 40° und Radius 42 % über JS, gleiche Perspektive und derselbe Augpunkt 252px über dem Ring
   (-45 % von 560px). Nur die Höhe ist kompakt: Bild, Zeit fett-blau, Quelle, Titel. */
.nr-ring .nr-card[hidden] { display: none; }
.nr-ring.ntr-ring.is-ring { height: 420px; perspective-origin: 50% -252px; }
.nr-ring.is-ring .ntr-card { height: 350px; }
.nr-ring.is-ring .ntr-card .nr-card-img { height: 200px; }
.ntr-card .nr-card-title { -webkit-line-clamp: 3; font-size: 17px; line-height: 1.35; margin-bottom: 20px; }
.ntr-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 16px 0 8px; }
.ntr-card .ntr-meta { margin: 16px 22px 0; }
.ntr-time { font-size: 14px; font-weight: 800; color: #0071e3; display: inline-flex; align-items: center; gap: 6px; }
.ntr-time::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nt, #0071e3); flex: none; }
.ntr-src { font-size: 12.5px; font-weight: 600; color: #6b7686; }
.nr-ring.is-ring .ntr-card:not(.is-front) .ntr-time { color: #9fd3ff; }
.nr-ring.is-ring .ntr-card:not(.is-front) .ntr-src { color: rgba(232,234,238,.7); }

/* Meldungen ohne Bild (2026-10-01): feste Reihe mit 3 Karten (mobil 1), Pfeile links und rechts,
   keine Scrollleiste. Ruhige weiße Karte, Warnung nur als kleines Badge in gedecktem Rot. */
.ntr-alerts { margin-top: 56px; padding-top: 28px; border-top: 1px solid #dce5f0; }
.ntr-alerts-head { margin-bottom: 16px; }
.ntr-alerts-head h3 { margin: 0; font-size: 18px; color: #0b1c3d; }
.ntr-alerts-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 14px; }
.ntr-alerts-list {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px;
  overflow-x: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 4px;
  padding: 4px; margin: -4px; scrollbar-width: none;
}
.ntr-alerts-list::-webkit-scrollbar { display: none; }
.ntr-alert-card {
  scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; min-height: 172px;
  padding: 18px 20px 20px; box-sizing: border-box; border: 1px solid #dce5f0; border-radius: 16px;
  color: #0b1c3d; text-decoration: none;
  /* leichter Rotschein nach dem Prinzip der Dienstleistungs-Karten (.lp-card: radial unten rechts + linear 160°) */
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(214,64,52,.26) 0%, rgba(214,64,52,0) 65%),
    linear-gradient(160deg, #fff6f5 0%, #fbe4e2 100%);
  border-color: #f0d2d0;
  box-shadow: 0 1px 2px rgba(11,28,61,.05); transition: border-color .2s ease, box-shadow .2s ease;
}
.ntr-alert-card .ntr-time { color: #0066cc; }
.ntr-alert-card .ntr-src { color: #5a6578; }
.ntr-alert-card:hover { border-color: #c9b3b8; box-shadow: 0 10px 26px rgba(11,28,61,.10); text-decoration: none; }
.ntr-alert-card:focus-visible { outline: 2px solid #0071e3; outline-offset: 1px; }
.ntr-alert-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px;
  border-radius: 999px; background: rgba(214,64,52,.10); color: #a3342c; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.ntr-alert-badge svg { flex: none; }
.ntr-alert-card .ntr-meta { margin: 0; }
.ntr-alert-card .ntr-time::before { display: none; }
.ntr-alert-title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 16px; font-weight: 650; line-height: 1.42; color: #0b1c3d;
}
.ntr-alerts .nr-prev[aria-disabled="true"], .ntr-alerts .nr-next[aria-disabled="true"] { opacity: .35; cursor: default; }
.ntr-alerts [aria-disabled="true"]:hover { background: #fff; border-color: #c9d6e6; }
.ntr-alerts .nr-prev:focus-visible, .ntr-alerts .nr-next:focus-visible { outline: 2px solid #0071e3; outline-offset: 3px; }
@media (max-width: 720px) {
  .ntr-alerts-row { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .ntr-alerts-list { grid-column: 1 / -1; grid-row: 1; grid-auto-columns: 100%; overflow-x: auto; }
  .ntr-alerts-prev { grid-row: 2; justify-self: end; }
  .ntr-alerts-next { grid-row: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .ntr-alert-card { transition: none; } }

@media (max-width: 720px) {
  .ntr-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 calc(-1 * var(--nr-gut, 20px)); padding: 2px var(--nr-gut, 20px) 6px; scroll-padding: 0 var(--nr-gut, 20px); scrollbar-width: none; }
  .ntr-tabs::-webkit-scrollbar { display: none; }
  .ntr-tab { font-size: 14px; padding: 0 14px; }
}

/* Themen-Grafik statt Fremdfoto (2026-10-02): eigene SVG aus images/news-cat/ + Themen-Label unten links */
.ntr-visual { position: relative; flex: none; }
.ntr-topic {
  position: absolute; left: 14px; bottom: 12px; padding: 5px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  color: #fff; background: rgba(6,18,43,.72); border: 1px solid rgba(150,190,235,.35);
}

/* Quellen-Logo als Herkunftsangabe (2026-10-03): weiße Plakette mittig auf der Themen-Grafik,
   Logo unverändert, nur verkleinert (object-fit: contain), damit auch dunkle Logos auf Navy lesbar sind. */
.nt-thumb-logo, .ntr-logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%);
  width: 46%; height: 46%; max-width: 190px; max-height: 96px; box-sizing: border-box; padding: 12px 16px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 14px; box-shadow: 0 6px 18px rgba(6,18,43,.28);
}
.nt-thumb-logo.is-wide, .ntr-logo.is-wide { width: 72%; height: 30%; max-width: 300px; max-height: 64px; padding: 10px 18px; }
.nt-thumb-logo img, .ntr-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }