/* Die Optik der Risikokarte (24.09.2026, zuerst als Testseite /riskmap-test) — nur Optik.
   Wird am Ende von riskmap.html geladen, nach allen Stilen der Karte. Das Länder-Pop-up und das Briefing bleiben absichtlich
   unberührt: keine Regel hier greift in #popup, #popup-backdrop oder das Briefing-Panel. Die neue Anordnung macht
   riskmap-optik.js; hier stehen Farben, Kopf, Suche und die Leiste unten. */

html.rt[data-neu] {
  /* Stufenfarben der Startseite: Punkt (p) und Schrift (t) */
  --rt-p3: #CE2350; --rt-t3: #FF8AA2;
  --rt-p2: #E2732B; --rt-t2: #F5A66B;
  --rt-pA: #E0B40C; --rt-tA: #FFE27A;
  --rt-p1: #E8A73C; --rt-t1: #F2C46B;
  --rt-pN: #5AAE9C; --rt-tN: #A6E9D8;
  --rt-p0: #11897A; --rt-t0: #6FF0D6;
}

/* ── Karte: ruhiges Meer, die grellen Flächen gedämpft ─────────────────────────────────────────────────────────────
   Die Länderfarben setzt das Kartenskript als fill-Attribut; eine CSS-Regel schlägt das Attribut — so ändert sich nur
   die Karte, nicht das Pop-up (das seine Farben selbst setzt). „Hinweise" war ein helles Mint (#B9E4BF), das große
   Flächen (USA, China) grell machte; „Kein besonderes Risiko" wird etwas ruhiger. */
html.rt[data-neu] #map-wrap {
  background: radial-gradient(ellipse 70% 60% at 50% 46%, #0B1D3C 0%, #071329 46%, #040914 100%);
}
/* Der warme Schein unten rechts im Seitenhintergrund (alte Optik) schien unter der Leiste und neben der Fußzeile als
   gelb-brauner Fleck durch — die neue Optik behält nur die beiden blauen Scheine oben. */
html.rt[data-neu] body::before {
  background:
    radial-gradient(ellipse 55% 42% at 18% 12%, var(--bg-deep) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 82% 25%, var(--bg-ocean) 0%, transparent 62%);
}
html.rt[data-neu] #map path[fill="#B9E4BF" i] { fill: var(--rt-pN); }
html.rt[data-neu] #map path[fill="#0A9E8A" i] { fill: var(--rt-p0); }

/* ── Kopf oben links: Überschrift, darunter die Live-Antwortzeile ──────────────────────────────────────────────── */
html.rt[data-neu] #neu-overlay { padding-left: 28px; padding-right: 28px; }
/* Kopf und Leiste von Rand zu Rand (die Seite ist sonst auf 1200 px begrenzt, die Karte nicht) */
@media (min-width: 901px) {
  html.rt[data-neu] #neu-overlay { left: calc(50% - 50vw + var(--sbw, 0px) / 2); right: calc(50% - 50vw + var(--sbw, 0px) / 2); }
}
/* Der dunkle Verlauf oben über der Karte ist leichter (vorher 92 % deckend) — so scheint die Karte durch Suche und
   Hilfe-Knopf; die Schrift oben trägt eigene Schatten */
html.rt:not(.is-embed)[data-neu] #neu-overlay {
  background: linear-gradient(180deg, rgba(4,9,20,0.62) 0%, rgba(4,9,20,0.42) 45%, rgba(4,9,20,0.16) 80%, rgba(4,9,20,0) 100%);
}
html.rt[data-neu] .page-toolbar { align-items: flex-start; }
html.rt[data-neu] .rt-kopf { display: flex; flex-direction: column; gap: 4px; min-width: 0; pointer-events: auto; }
/* Klein gehalten: jeder Pixel oben gehört der Karte (Martin: „mehr Karte") */
html.rt[data-neu] .rt-titel {
  margin: 0; font-family: 'Unbounded', var(--font); font-weight: 500; font-size: 24px; line-height: 1.1; letter-spacing: -0.03em;
  color: #F2F6FF; text-shadow: 0 2px 18px rgba(0,0,0,0.6);
}
html.rt[data-neu] .rt-titel em {
  font-style: normal; text-shadow: none;
  background: linear-gradient(100deg, #3DE0FF 0%, #7BE6FF 25%, #FFE5B0 60%, #FFB454 90%, #FFD278 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Eine Reihe oben (Desktop): links „Die Welt heute." mit Live-Zeile, in der Mitte die große Begrüßung (angemeldet,
   riskmap-optik.js hängt sie in die Leiste), rechts Suche und Hilfe. Die Seitenspalten sind gleich breit, damit die
   Begrüßung genau mittig steht; ihre Schrift wächst mit dem Bildschirm bis zur alten Größe (34 px). */
@media (min-width: 1280px) {
  html.rt[data-neu] .page-toolbar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 40px; align-items: start; padding-top: 4px;
  }
  html.rt[data-neu] .page-toolbar > .rt-kopf { grid-column: 1; grid-row: 1; }
  html.rt[data-neu] .page-toolbar > #welcome-banner { grid-column: 2; grid-row: 1; align-self: start; margin: 0 !important; padding: 2px 0 0 !important; }
  html.rt[data-neu] .page-toolbar > .search-wrap { grid-column: 3; grid-row: 1; justify-self: end; width: min(440px, calc(100% - 56px)); margin-right: 56px; }
  html.rt[data-neu] .page-toolbar > #help-btn { grid-column: 3; grid-row: 1; justify-self: end; }
  html.rt[data-neu] .page-toolbar > #welcome-banner.visible { gap: clamp(14px, 1.15vw, 22px); }
  html.rt[data-neu] .page-toolbar > #welcome-banner .wb-avatar { width: clamp(46px, 3.3vw, 64px); height: clamp(46px, 3.3vw, 64px); }
  html.rt[data-neu] .page-toolbar > #welcome-banner .wb-greeting { font-size: clamp(25px, 1.78vw, 34px); }
}
/* Breit genug (ab 1440 px): Bildschirm in Viertel — links „Die Welt heute.", rechts die Suche, die beiden mittleren
   Viertel für die Begrüßung, die am präsentesten sein soll: Profilbild mittig oben, der Gruß groß darunter. */
@media (min-width: 1440px) {
  html.rt[data-neu] .page-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); column-gap: 32px; }
  html.rt[data-neu] .page-toolbar > #welcome-banner.visible { flex-direction: column; gap: 10px; }
  html.rt[data-neu] .page-toolbar > #welcome-banner .wb-avatar { width: clamp(58px, 4vw, 78px); height: clamp(58px, 4vw, 78px); }
  html.rt[data-neu] .page-toolbar > #welcome-banner .wb-greeting {
    font-size: clamp(32px, 2.4vw, 48px); line-height: 1.1; white-space: normal; text-align: center; text-wrap: balance;
  }
  html.rt[data-neu] .page-toolbar > .search-wrap { width: calc(100% - 56px); }
}
/* Schmaler: Begrüßung als eigene Zeile mittig darüber, darunter links der Kopf und rechts die Suche */
@media (min-width: 901px) and (max-width: 1279px) {
  html.rt[data-neu] .page-toolbar { flex-wrap: wrap; column-gap: 10px; row-gap: 10px; }
  html.rt[data-neu] .page-toolbar > #welcome-banner { order: -1; flex: 1 1 100%; margin: 0 !important; padding: 0 !important; }
}
/* Nicht angemeldet (keine Begrüßung): „Die Welt heute." steht groß in der Mitte, die Live-Zeile bleibt links. Der Kopf
   gibt dafür seine beiden Kinder an die Leiste ab (display: contents) — die Knoten bleiben, wo sie sind. */
@media (min-width: 901px) {
  html.rt:not(.is-embed)[data-neu] .page-toolbar:not(:has(> #welcome-banner.visible)) > .rt-kopf { display: contents; }
  html.rt:not(.is-embed)[data-neu] .page-toolbar:not(:has(> #welcome-banner.visible)) .rt-titel {
    font-size: clamp(30px, 2.4vw, 46px); text-align: center; justify-self: center; align-self: start; padding-top: 4px;
  }
}
@media (min-width: 1280px) {
  html.rt:not(.is-embed)[data-neu] .page-toolbar:not(:has(> #welcome-banner.visible)) .rt-titel { grid-column: 2; grid-row: 1; }
  html.rt:not(.is-embed)[data-neu] .page-toolbar:not(:has(> #welcome-banner.visible)) #answer-line { grid-column: 1; grid-row: 1; padding-top: 8px; }
}
@media (min-width: 901px) and (max-width: 1279px) {
  html.rt:not(.is-embed)[data-neu] .page-toolbar:not(:has(> #welcome-banner.visible)) .rt-titel { order: -1; flex: 1 1 100%; }
}
/* Antwortzeile wie die Live-Zeile der Startseite: grüner Punkt, Zahlen in Mint */
html.rt[data-neu] #answer-line { padding: 2px 0 0; }
html.rt[data-neu] #answer-line .al-text { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; }
html.rt[data-neu] #answer-line .al-text::before {
  content: ''; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; flex: none;
  background: #4FD6BC; box-shadow: 0 0 0 4px rgba(79,214,188,0.18);
}
html.rt[data-neu] #answer-line button.al-num { color: #4FD6BC; }
@media (min-width: 901px) {
  html.rt[data-neu] .rt-kopf { gap: 6px; }
  html.rt[data-neu] #answer-line .al-changes { margin-top: 2px; padding-left: 18px; }
  /* Bricht die Zeile um (1280–1600 px), dann bündig hinter dem Punkt und zwischen den Aussagen (.al-seg) */
  html.rt[data-neu] #answer-line .al-text { display: block; position: relative; padding-left: 18px; line-height: 1.45; }
  html.rt[data-neu] #answer-line .al-text::before { position: absolute; left: 0; top: 0.5em; margin: 0; }
  html.rt[data-neu] #answer-line .al-seg { white-space: nowrap; }
}

/* ── Suche: dieselbe Funktion, als dunkle Pille ────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  html.rt[data-neu] .search-wrap { flex: 0 1 440px; margin-top: 2px; margin-left: auto; }  /* rechts, neben der Hilfe */
  html.rt[data-neu] #help-btn { width: 44px; height: 44px; margin-top: 2px; }
}
html.rt[data-neu] #help-btn {
  border-radius: 50% !important; border: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)), rgba(8,18,40,0.2) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
/* Glas statt Block: leicht durchscheinend, die Karte schimmert weich durch (Martin, 24.09.2026: „moderner, leichte
   Transparenz"). Die Kante ist ein feiner Lichtverlauf, beim Tippen leuchtet sie auf. */
html.rt[data-neu] #search-input {
  height: 48px; padding-left: 46px; border-radius: 999px !important; font-size: 15px; letter-spacing: 0.005em;
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)), rgba(8,18,40,0.2) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.4); backdrop-filter: blur(8px) saturate(1.4);
  border: 0 !important; color: #F2F6FF;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), inset 0 1px 0 rgba(255,255,255,0.12), 0 10px 30px rgba(0,0,0,0.28) !important;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
html.rt[data-neu] #search-input:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22), inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 30px rgba(0,0,0,0.28) !important; }
html.rt[data-neu] #search-input::placeholder { color: rgba(230,240,255,0.6); }
html.rt[data-neu] #search-input:focus {
  outline: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.04)), rgba(8,18,40,0.42) !important;
  box-shadow: inset 0 0 0 1px rgba(61,224,255,0.7), 0 0 0 4px rgba(61,224,255,0.12), 0 12px 34px rgba(0,0,0,0.32) !important;
}
/* Der „/"-Hinweis entfällt (wirkte altmodisch) — die Taste / springt weiter in die Suche */
html.rt[data-neu] #search-kbd { display: none !important; }
/* Die Lupe sichtbar in der Pille; der Löschen-Knopf der Suche IN der Pille rechts (auf /riskmap rutscht er unter die
   Suche) — und das zweite, eingebaute × des Browsers entfällt, damit es nur einen gibt */
html.rt[data-neu] .search-wrap { position: relative; }
html.rt[data-neu] .search-wrap .search-icon { left: 17px; z-index: 2; color: rgba(223,235,255,0.62); pointer-events: none; }
html.rt[data-neu] #search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
html.rt[data-neu] #search-clear {
  position: absolute !important; left: auto !important; right: 12px; top: 50% !important; transform: translateY(-50%); margin: 0;
  width: 28px; height: 28px; border-radius: 50%; z-index: 2;
}
/* Vorschläge: klares, stark weichgezeichnetes Glas — die Karte schimmert als Farbe durch, die Schrift bleibt ruhig
   (Martin, 24.09.2026: „moderner, transparenter"). Name in der Grundschrift, darunter leise die Zuordnung. */
html.rt[data-neu] #search-dropdown {
  margin-top: 10px; padding: 8px !important; border-radius: 22px !important; overflow-y: auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)), rgba(8,18,40,0.58) !important;
  border: 0 !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.6); backdrop-filter: blur(30px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), inset 0 1px 0 rgba(255,255,255,0.12), 0 28px 60px rgba(0,0,0,0.45) !important;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent;
}
/* Rechtsbündig unter dem Feld und mindestens 380 px breit — wächst nach links in die Karte statt über den Bildschirmrand */
@media (min-width: 901px) {
  html.rt[data-neu] #search-dropdown { left: auto !important; right: 0 !important; width: max(100%, 380px) !important; }
}
html.rt[data-neu] #search-dropdown .sd-item { padding: 10px 12px; gap: 12px; border-radius: 14px; transition: background 0.14s ease, box-shadow 0.14s ease; }
html.rt[data-neu] #search-dropdown .sd-item:hover, html.rt[data-neu] #search-dropdown .sd-item:focus {
  background: rgba(255,255,255,0.10); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
html.rt[data-neu] #search-dropdown .sd-name {
  font-family: var(--font); font-style: normal; font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; color: #F2F6FF;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
html.rt[data-neu] #search-dropdown .sd-iso, html.rt[data-neu] #search-dropdown .sd-main .sd-iso {
  font-family: var(--font); font-size: 12px; font-weight: 500; letter-spacing: 0; color: rgba(223,235,255,0.62);
}
html.rt[data-neu] #search-dropdown .sd-flag { filter: none; }
html.rt[data-neu] #search-dropdown .sd-flag img { border-radius: 5px; box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 2px 8px rgba(0,0,0,0.35); }
html.rt[data-neu] #search-dropdown .sd-lvl {
  font-family: var(--font); font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; padding: 4px 10px; border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html.rt[data-neu] #search-dropdown .sd-lvl small { font-size: 8.5px; letter-spacing: 0.1em; opacity: 0.8; }
html.rt[data-neu] #search-dropdown .sd-empty { font-family: var(--font); font-size: 13px; color: rgba(223,235,255,0.7); }

/* ── Leiste unten: Quelle und Stand, eine Zeile Filter, Farbbalken ────────────────────────────────────────────
   Die Stufen und die Umschalter als die Kappen-Knöpfe der Karte (Name, rechts die Kappe mit der Zahl in Stufenfarbe),
   alle in EINER Zeile — passt sie nicht, lässt sie sich wischen. Flach gehalten, damit die Karte Platz hat. */
html.rt[data-neu] #rt-leiste {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 45;
  display: flex; flex-direction: column; gap: 7px;
  padding: 34px 200px 16px 0; /* rechts frei für den Unterstützen-Knopf */
  background: linear-gradient(180deg, rgba(4,9,20,0) 0%, rgba(4,9,20,0.86) 42%, #040914 100%);
  pointer-events: none;
}
html.rt[data-neu] #rt-leiste > * { pointer-events: auto; }
html.rt[data-neu] #rt-leiste > #status-pill, html.rt[data-neu] #rt-balken { margin: 0 28px; }
html.rt[data-neu] #rt-leiste #status-pill {
  position: static !important; align-self: flex-start; padding: 0 !important; font-size: 11.5px;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html.rt[data-neu] #rt-leiste #stats-bar {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; width: 100%; max-width: none;
  padding: 1px 28px; box-sizing: border-box; scroll-padding: 0 28px;
  background: transparent !important; border: 0; box-shadow: none !important;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent);
}
html.rt[data-neu] #rt-leiste #stats-bar::-webkit-scrollbar { display: none; }
html.rt[data-neu] #rt-leiste .stat-btn { flex: none; width: auto; height: 30px; margin: 0; }
html.rt[data-neu] #rt-leiste .stat-divider { display: none; }
/* Die beiden grünen Kappen in den ruhigeren Kartenfarben */
html.rt[data-neu] #rt-leiste .stat-btn[data-level="N"] { --cap: var(--rt-pN); }
html.rt[data-neu] #rt-leiste .stat-btn[data-level="0"] { --cap: var(--rt-p0); }

html.rt[data-neu] #rt-balken { display: flex; gap: 2px; height: 6px; }
html.rt[data-neu] #rt-balken[hidden] { display: none; }
/* Jedes Stück: 6 px zu sehen, 20 px zum Zeigen und Tippen (unsichtbar nach oben und unten verlängert) */
html.rt[data-neu] #rt-balken span { position: relative; display: block; height: 100%; cursor: pointer; transition: filter .15s, transform .15s; }
html.rt[data-neu] #rt-balken span::after { content: ''; position: absolute; left: 0; right: 0; top: -7px; bottom: -7px; }
html.rt[data-neu] #rt-balken span:first-child { border-radius: 999px 0 0 999px; }
html.rt[data-neu] #rt-balken span:last-child { border-radius: 0 999px 999px 0; }
html.rt[data-neu] #rt-balken span:only-child { border-radius: 999px; }
html.rt[data-neu] #rt-balken span:hover { filter: brightness(1.25); transform: scaleY(1.6); }
html.rt[data-neu] #rt-balken-tipp {
  position: absolute; z-index: 2; padding: 7px 12px; border-radius: 10px; pointer-events: none; white-space: nowrap;
  background: rgba(7,18,42,0.97); box-shadow: inset 0 0 0 1px rgba(120,180,255,0.24), 0 12px 28px rgba(0,0,0,0.5);
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: #F2F6FF;
}
html.rt[data-neu] #rt-balken-tipp[hidden] { display: none; }

/* Zoom-Knöpfe über der Leiste */
html.rt[data-neu] #zoom-controls { bottom: 132px; }

/* ── Handy und schmale Fenster (die Karte schaltet bei 900 px auf ihr Handy-Layout) ──────────────────────────── */
@media (max-width: 900px) {
  html.rt[data-neu] #neu-overlay { padding-left: 12px; padding-right: 12px; }
  /* Oben zählt jeder Pixel: die Überschrift entfällt, die Live-Zeile steht unter der Suche */
  html.rt[data-neu] .rt-kopf { order: 5; flex: 1 1 100%; gap: 0; }
  html.rt[data-neu] .rt-titel { display: none; }
  html.rt[data-neu] #search-input { height: 44px; }
  html.rt[data-neu] #rt-leiste { padding: 30px 0 64px; } /* unten frei für den Unterstützen-Knopf */
  html.rt[data-neu] #rt-leiste > #status-pill, html.rt[data-neu] #rt-balken { margin: 0 12px; }
  html.rt[data-neu] #rt-leiste #status-pill { font-size: 11px; }
  html.rt[data-neu] #rt-leiste #stats-bar { padding: 1px 12px; scroll-padding: 0 12px; mask-image: linear-gradient(90deg, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); }
  html.rt[data-neu] #zoom-controls { bottom: 184px; }
}

/* ── Widget für fremde Seiten (?embed=1): dieselbe Optik, ohne Überschrift ──────────────────────────────────────
   Das Widget ist ein Rahmen von meist 620 px Höhe: jeder Pixel gehört der Karte. Unten rechts steht statt des
   Unterstützen-Knopfs der Link zur Quelle (#embed-badge) — die Leiste lässt ihm darunter Platz. */
html.rt.is-embed[data-neu] .rt-titel { display: none; }
html.rt.is-embed[data-neu] #rt-leiste { padding-right: 0; padding-bottom: 50px; }

/* ── Hilfe: Glas, die Warnstufen als Skala statt Kästen (Martin, 24.09.2026: „moderner") ──────────────────────
   Nur Optik — Aufbau, Texte und die englische Oberfläche (#help-panel > p:nth-of-type) bleiben. Die Farbflächen
   zeigen die Kartenfarben dieser Optik (Hinweise und Kein Risiko sind auf der Karte gedämpft). */
html.rt[data-neu] #help-backdrop { background: rgba(2,6,16,0.28) !important; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
html.rt[data-neu] #help-panel {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 34px 34px 26px;
  border-radius: 28px !important; border: 0 !important;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(61,224,255,0.10), transparent 60%),
    radial-gradient(90% 50% at 100% 0%, rgba(255,180,84,0.08), transparent 60%),
    rgba(8,16,36,0.6) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.10), 0 40px 90px rgba(0,0,0,0.6) !important;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
}
html.rt[data-neu] #help-close-wrap { top: 18px; right: 18px; }
html.rt[data-neu] #help-close {
  width: 36px; height: 36px; border-radius: 50% !important; border: 0 !important;
  background: rgba(255,255,255,0.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12) !important;
}
html.rt[data-neu] #help-title {
  margin: 0 0 10px; font-family: 'Unbounded', var(--font); font-weight: 500; font-size: 26px; line-height: 1.1; letter-spacing: -0.03em; color: #F2F6FF;
}
html.rt[data-neu] #help-title em {
  font-style: normal;
  background: linear-gradient(100deg, #3DE0FF 0%, #7BE6FF 25%, #FFE5B0 60%, #FFB454 90%, #FFD278 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html.rt[data-neu] #help-panel > .help-lead:first-of-type { font-size: 13.5px; line-height: 1.55; color: rgba(223,235,255,0.72); text-transform: none; letter-spacing: 0; margin: 0 0 18px; }
/* Zwischenüberschriften als leise Etiketten mit feiner Linie */
html.rt[data-neu] #help-panel .help-lead:not(:first-of-type), html.rt[data-neu] #help-extras .help-lead {
  display: flex; align-items: center; gap: 12px; margin: 26px 0 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(159,232,247,0.85);
}
html.rt[data-neu] #help-panel .help-lead:not(:first-of-type)::after, html.rt[data-neu] #help-extras .help-lead::after {
  content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.14), transparent);
}

/* Die Warnstufen: eine Skala — links ein durchgehender Farbverlauf von Kein Risiko bis Reisewarnung, daneben die Stufen */
html.rt[data-neu] #help-legend { position: relative; gap: 0 !important; margin: 0 0 4px; padding-left: 0; }
html.rt[data-neu] #help-legend::before {
  content: ''; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; opacity: 0.55;
  background: linear-gradient(180deg, var(--rt-p0), var(--rt-pN), var(--rt-p1), var(--rt-pA), var(--rt-p2), var(--rt-p3));
}
html.rt[data-neu] #help-legend li {
  position: relative; display: grid !important; grid-template-columns: 18px 1fr; column-gap: 16px; align-items: start;
  padding: 10px 12px 10px 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-radius: 14px !important; box-shadow: none !important;
  transition: background 0.18s ease;
}
html.rt[data-neu] #help-legend li:hover { background: rgba(255,255,255,0.035) !important; }
html.rt[data-neu] #help-legend .hl-swatch {
  width: 18px !important; height: 18px !important; margin-top: 1px; border-radius: 50% !important; border: 0 !important;
  box-shadow: 0 0 0 3px rgba(8,16,36,0.95), 0 0 14px currentColor !important;
}
html.rt[data-neu] #help-legend li:nth-child(1) .hl-swatch { background: var(--rt-p0) !important; color: var(--rt-p0); }
html.rt[data-neu] #help-legend li:nth-child(2) .hl-swatch { background: var(--rt-pN) !important; color: var(--rt-pN); }
html.rt[data-neu] #help-legend li:nth-child(3) .hl-swatch { color: var(--rt-p1); }
html.rt[data-neu] #help-legend li:nth-child(4) .hl-swatch { background: var(--rt-pA) !important; color: var(--rt-pA); }
html.rt[data-neu] #help-legend li:nth-child(5) .hl-swatch { background: var(--rt-p2) !important; color: var(--rt-p2); }
html.rt[data-neu] #help-legend li:nth-child(6) .hl-swatch { background: var(--rt-p3) !important; color: var(--rt-p3); }
html.rt[data-neu] #help-legend li strong { font-size: 14px; font-weight: 600; color: #F2F6FF; letter-spacing: -0.005em; }
html.rt[data-neu] #help-legend li > div > span { font-size: 12.5px; line-height: 1.55; color: rgba(223,235,255,0.62); }

/* Funktionen: ohne Kästen — rundes Glas-Symbol, daneben Titel und Text */
html.rt[data-neu] #help-extras .help-list { gap: 0 !important; margin: 0; }
html.rt[data-neu] #help-extras .help-list li {
  display: grid !important; grid-template-columns: 36px 1fr; column-gap: 14px; align-items: start;
  padding: 4px 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
}
html.rt[data-neu] #help-extras .he-icon {
  width: 36px !important; height: 36px !important; border-radius: 50% !important; border: 0 !important;
  display: grid; place-items: center; font-size: 15px;
  background: rgba(255,255,255,0.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12) !important;
}
html.rt[data-neu] #help-extras strong { font-size: 14px; color: #F2F6FF; margin-bottom: 3px; }
html.rt[data-neu] #help-extras .help-list li > div > span { font-size: 12.5px; line-height: 1.55; color: rgba(223,235,255,0.62); }

/* Tastenkürzel: Tasten als kleine Glaskappen, der Text daneben */
html.rt[data-neu] #help-shortcuts { display: flex !important; flex-direction: column; gap: 10px; margin-bottom: 4px; }
html.rt[data-neu] #help-shortcuts div { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; font-size: 12.5px; line-height: 1.4; color: rgba(223,235,255,0.72); }
html.rt[data-neu] #help-shortcuts kbd:last-of-type { margin-right: 6px; }
html.rt[data-neu] #help-shortcuts kbd {
  min-width: 26px; height: 26px; padding: 0 8px; display: inline-grid; place-items: center;
  font: 600 11px/1 var(--font-mono, ui-monospace, monospace); color: #F2F6FF;
  border-radius: 8px !important; border: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 2px 0 rgba(0,0,0,0.35) !important;
}

/* Einbetten: Code als dunkles Glas, Hinweis leise */
html.rt[data-neu] #help-embed code {
  display: block; border-radius: 14px !important; border: 0 !important; padding: 14px 16px; font-size: 11.5px; line-height: 1.6;
  background: rgba(0,0,0,0.32) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08) !important; color: rgba(223,235,255,0.8);
}
html.rt[data-neu] #help-embed > span { font-size: 12px; line-height: 1.55; color: rgba(223,235,255,0.55); }
html.rt[data-neu] #help-source {
  margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08) !important;
  font-family: var(--font); font-size: 11.5px; line-height: 1.55; color: rgba(223,235,255,0.45);
}

/* ── Hinweise für Gäste (Konto, Unterstützen): am Desktop über der Leiste statt auf den Filterknöpfen. Am Handy bleiben
   sie unten auf der Leiste — dort ist keine Höhe übrig, und die Karte bleibt so sichtbar. ─────────────────────── */
@media (min-width: 901px) {
  html.rt:not(.is-embed)[data-neu] #guest-banner, html.rt:not(.is-embed)[data-neu] #guest-support {
    bottom: calc(var(--rt-leiste-h, 130px) + 10px) !important;
  }
}

/* Das Anmelde-/Registrierfenster steht seit dem 24.09.2026 in auth-fenster.css — für Risikokarte und Landingpage gleich. */


/* ══ Fensterregeln (25.09.2026) ══════════════════════════════════════════════════════════════════════════════════
   EIN Aussehen für jedes Fenster über der Karte: Hilfe, Watchlist, Vergleich, Weltlage als PDF und Einführung.
   Das Anmeldefenster folgt denselben Werten, steht aber in auth-fenster.css (dasselbe Fenster auf Startseite und
   Karte, Test auth-fenster). Vorlage ist die Hilfe (Martin, 24.09.2026: „moderner"). Neue Fenster bekommen ihre Werte von hier,
   nicht eigene — sonst sieht wieder jedes anders aus (Martin, 25.09.2026: „einheitliche Regeln").
   Fläche     halbdurchsichtiges Glas, die Karte schimmert durch, oben ein Hauch Cyan und Gold
   Unschärfe  16 px, Sättigung 1,5
   Ecken      28 px (Handy: 22 px)
   Rand       feine Innenlinie statt Rahmen, Schatten 40/90
   Dahinter   leichte Abdunklung, 3 px Unschärfe
   Überschrift Unbounded 600, 26 px (Handy 21 px); das betonte Wort im Verlauf Cyan → Gold wie „Die Welt heute."
   Schließen  runder Glasknopf, 36 px, oben rechts
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
html.rt[data-neu] {
  --fenster-flaeche:
    radial-gradient(120% 60% at 0% 0%, rgba(61,224,255,0.10), transparent 60%),
    radial-gradient(90% 50% at 100% 0%, rgba(255,180,84,0.08), transparent 60%),
    rgba(8,16,36,0.62);
  --fenster-blur: blur(16px) saturate(1.5);
  --fenster-r: 28px;
  --fenster-schatten: inset 0 0 0 1px rgba(255,255,255,0.10), inset 0 1px 0 rgba(255,255,255,0.10), 0 40px 90px rgba(0,0,0,0.6);
  --fenster-schleier: rgba(2,6,16,0.34);
  --fenster-betont: linear-gradient(100deg, #3DE0FF 0%, #7BE6FF 25%, #FFE5B0 60%, #FFB454 90%, #FFD278 100%);
}
/* Fläche */
html.rt[data-neu] #help-panel,
html.rt[data-neu] #watchlist-overlay #watchlist-panel,
html.rt[data-neu] #compare-panel,
html.rt[data-neu] #rm-pdf #rm-pdf-karte,
html.rt[data-neu] #rm-intro #rm-intro-card {
  background: var(--fenster-flaeche) !important;
  -webkit-backdrop-filter: var(--fenster-blur); backdrop-filter: var(--fenster-blur);
  border: 0 !important; border-radius: var(--fenster-r) !important;
  box-shadow: var(--fenster-schatten) !important;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
}
/* Dahinter */
html.rt[data-neu] #help-backdrop,
html.rt[data-neu] #watchlist-overlay,
html.rt[data-neu] #compare-overlay,
html.rt[data-neu] #rm-pdf,
html.rt[data-neu] #rm-intro {
  background: var(--fenster-schleier) !important;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
/* Überschrift */
html.rt[data-neu] #help-title,
html.rt[data-neu] #wl-title,
html.rt[data-neu] #compare-title,
html.rt[data-neu] #rm-pdf-titel,
html.rt[data-neu] #rm-intro .rmi-title {
  font-family: 'Unbounded', var(--font-brand), var(--font); font-weight: 600; font-size: 26px; line-height: 1.1; letter-spacing: -0.025em; color: #F2F6FF;
}
html.rt[data-neu] #help-title em,
html.rt[data-neu] #wl-title em,
html.rt[data-neu] #compare-title em,
html.rt[data-neu] #rm-pdf-titel em,
html.rt[data-neu] #rm-intro .rmi-title em {
  font-style: normal; background: var(--fenster-betont);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
/* Schließen */
html.rt[data-neu] #help-close,
html.rt[data-neu] #wl-close,
html.rt[data-neu] #compare-close,
html.rt[data-neu] #rm-pdf .rp-zu,
html.rt[data-neu] #rm-intro .rmi-close {
  width: 36px !important; height: 36px !important; min-width: 36px; padding: 0 !important;
  border-radius: 50% !important; border: 0 !important;
  background-color: rgba(255,255,255,0.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12) !important;
}
html.rt[data-neu] #help-close:hover,
html.rt[data-neu] #wl-close:hover,
html.rt[data-neu] #compare-close:hover,
html.rt[data-neu] #rm-pdf .rp-zu:hover,
html.rt[data-neu] #rm-intro .rmi-close:hover { background-color: rgba(255,255,255,0.12) !important; }
@media (max-width: 760px) {
  html.rt[data-neu] { --fenster-r: 22px; }
  html.rt[data-neu] #help-title, html.rt[data-neu] #wl-title, html.rt[data-neu] #compare-title,
  html.rt[data-neu] #rm-pdf-titel, html.rt[data-neu] #rm-intro .rmi-title { font-size: 21px; }
}