/* Node64: Bootstrap-5.3-Anpassungen im ipv64-Look.
   Farben wie im ipv64-Portal (Bootstrap-4-Palette, Orange als Markenfarbe). */

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/open-sans-v34-latin-regular.woff2") format("woff2");
}

/* Laenderflaggen (Regional Indicator Symbols) auch unter Windows, das keine Flaggen-Emojis hat: Schrift nur fuer diese
   Zeichen (unicode-range), sonst greift sie nie. "Twemoji Country Flags" aus country-flag-emoji-polyfill 0.1.8 (MIT),
   Grafiken Twemoji (c) Twitter, Inc. and other contributors, CC-BY 4.0. */
@font-face {
	font-family: "Twemoji Country Flags";
	unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
	font-display: swap;
	src: url("fonts/TwemojiCountryFlags.woff2") format("woff2");
}

:root, [data-bs-theme="light"] {
	--bs-primary: #007bff;
	--bs-primary-rgb: 0, 123, 255;
	--bs-success: #28a745;
	--bs-success-rgb: 40, 167, 69;
	--bs-danger: #dc3545;
	--bs-danger-rgb: 220, 53, 69;
	--bs-warning: #ffc107;
	--bs-warning-rgb: 255, 193, 7;
	--bs-info: #17a2b8;
	--bs-info-rgb: 23, 162, 184;
	--bs-body-font-family: "Twemoji Country Flags", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ipv64-orange: #f59c1a;
	--ipv64-dark: #272828;
	--sidebar-width: 15rem;
	--sidebar-bg: var(--bs-tertiary-bg);
}
[data-bs-theme="dark"] {
	--bs-body-bg: #121417;
	--bs-tertiary-bg: #1b1f24;
	--bs-secondary-bg: #23282e;
	--bs-border-color: #343a40;
	--sidebar-bg: #1b1f24;
	/* graue Schrift etwas heller als bei Bootstrap (0.75 / 0.5), besser lesbar */
	--bs-secondary-color: rgba(222, 226, 230, .85);
	--bs-tertiary-color: rgba(222, 226, 230, .65);
}

.btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: #0069d9; --bs-btn-hover-border-color: #0062cc; --bs-btn-active-bg: #0062cc; }
.btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); }
.btn-success { --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-bg: #218838; --bs-btn-hover-border-color: #1e7e34; }
.text-bg-success { background-color: var(--bs-success) !important; }
.text-bg-danger { background-color: var(--bs-danger) !important; }
.text-bg-info { background-color: var(--bs-info) !important; }
.text-bg-warning { background-color: var(--bs-warning) !important; }
a { color: var(--bs-primary); }

/* Logo je Farbschema */
.logo-dark { display: none; }
[data-bs-theme="dark"] .logo-light { display: none; }
[data-bs-theme="dark"] .logo-dark { display: inline; }

/* Layout: Topbar, Sidebar links, Inhalt */
/* Kopfzeile genau so hoch wie die Kante, an der die Seitenleiste klebt (sonst springt sie je nach Seitenlaenge) */
.topbar { background: var(--bs-body-bg); min-height: 3.6rem; position: sticky; top: 0; z-index: 1020; }
.app-body { min-height: calc(100vh - 3.6rem); }
.sidebar { width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); background: var(--sidebar-bg); position: sticky; top: 3.6rem; height: calc(100vh - 3.6rem); overflow-y: auto; scrollbar-width: thin; }
.sidebar-offcanvas { width: var(--sidebar-width); }
.sidebar .nav-link, .sidebar-offcanvas .nav-link { color: var(--bs-body-color); padding: .55rem 1rem; border-left: 3px solid transparent; }
.sidebar .nav-link .bi, .sidebar-offcanvas .nav-link .bi { width: 1.4rem; display: inline-block; }
.sidebar .nav-link:hover, .sidebar-offcanvas .nav-link:hover { background: var(--bs-secondary-bg); }
.sidebar .nav-link.active, .sidebar-offcanvas .nav-link.active { border-left-color: var(--ipv64-orange); font-weight: 600; background: var(--bs-secondary-bg); }
.sidebar .nav-link.disabled, .sidebar-offcanvas .nav-link.disabled { opacity: .55; }
.content { min-width: 0; } /* volle Breite auf allen Seiten */

/* Brotkrumen in der Kopfzeile; ab lg buendig mit dem Inhalt (Logo-Bereich = Seitenleiste) */
@media (min-width: 992px) {
	.topbar .topbar-start { width: calc(var(--sidebar-width) - 1rem); flex: 0 0 auto; }
	.topbar .navbar-brand { margin-right: 0; }
	.topbar .topbar-crumbs { margin-left: 0 !important; padding-left: 1.5rem !important; border-left: 0 !important; }
	/* Seitenleiste eingeklappt: nur Symbole (Beschriftung als Tooltip), Zustand im Cookie node64_nav */
	.sidebar { transition: width .2s ease, flex-basis .2s ease; overflow-x: hidden; }
	.nav-mini { --sidebar-width: 4rem; }
	.nav-mini .topbar .topbar-start { width: auto; }
	.nav-mini .topbar .topbar-crumbs { margin-left: 1rem !important; border-left: 1px solid var(--bs-border-color) !important; padding-left: 1rem !important; }
	.nav-mini .sidebar .nav-label, .nav-mini .sidebar .sidebar-footer { display: none; }
	.nav-mini .sidebar .nav-link { padding-left: 0; padding-right: 0; text-align: center; white-space: nowrap; }
	.nav-mini .sidebar .nav-link .bi { width: auto; font-size: 1.1rem; }
	.nav-mini .sidebar .nav-link.nav-sub .bi { font-size: .95rem; }
	.nav-mini .sidebar .nav-img { height: 20px; margin-right: 0; }
}
/* Healthchecks-Herz in Rot */
.bi-heart-pulse { color: var(--bs-danger); }
/* Tabellen ausserhalb von Karten: leichter Schatten (nicht im Karten-Modus auf dem Handy) */
@media (min-width: 768px) {
	.table-shadow { box-shadow: var(--bs-box-shadow-sm); border: 1px solid var(--bs-border-color-translucent); border-radius: .5rem; background: var(--bs-body-bg); }
	.table-shadow > .table { margin-bottom: 0; }
	.table-shadow > .table > :not(caption) > * > :first-child { padding-left: .75rem; }
}
/* Kopieren in die Zwischenablage */
.btn-copy.copied { color: var(--bs-success); border-color: var(--bs-success); }
.topbar-crumbs .breadcrumb { font-size: .9rem; flex-wrap: nowrap; white-space: nowrap; }
.topbar-crumbs .breadcrumb-item { overflow: hidden; text-overflow: ellipsis; }
.topbar-crumbs .breadcrumb-item:last-child { max-width: 40vw; font-weight: 600; }
.topbar-crumbs .breadcrumb-item a { color: var(--bs-secondary-color); text-decoration: none; }
.topbar-crumbs .breadcrumb-item a:hover { color: var(--bs-body-color); }
.topbar-crumb-mobile { max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* Theme-Umschalter: Sonne im Dunkelmodus, Mond im Hellmodus */
.theme-toggle .bi-sun-fill { display: none; color: var(--ipv64-orange); }
[data-bs-theme="dark"] .theme-toggle .bi-sun-fill { display: inline; }
[data-bs-theme="dark"] .theme-toggle .bi-moon-stars-fill { display: none; }

/* Login und Setup */
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 480px; }

/* Pillen fuer die letzten Messungen, wie im ipv64-Portal */
.beats { display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden; }
.beat { display: inline-block; width: 6px; height: 20px; border-radius: 50rem; background: silver; flex: 0 0 auto; transition: transform .05s; cursor: pointer; }
.beat:hover { transform: scaleY(1.15); filter: brightness(1.15); }
.beat-lg { width: 6px; height: 24px; }
/* Detailseite: schmale Pillen ueber die ganze Breite, neueste rechts; healthchecks.js passt die Anzahl an
   die Breite an und fuellt fehlende Messungen links mit Platzhaltern */
.beats-fill { justify-content: space-between; gap: 2px; }
.beat-empty, .beat-empty:hover { background: var(--bs-secondary-bg); cursor: default; transform: none; filter: none; }
.beat-up { background: var(--bs-success); }
.beat-down { background: var(--bs-danger); }
.beat-warning { background: var(--bs-warning); }
.beat-stabilizing { background: var(--bs-info); }
.beat-paused, .beat-maintenance, .beat-unknown { background: silver; }
.beat-flapping { background: repeating-linear-gradient(45deg, var(--bs-danger) 0 3px, var(--bs-warning) 3px 6px); }

/* Logs */
.logbox { max-height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-all; background: var(--bs-tertiary-bg); }
/* Tabellenzelle mit langen Namen/URLs: bricht ueberall um, die Mindestbreite setzt der Tabellenkopf (min-width), damit
   nowrap-Nachbarspalten sie nicht auf ein Zeichen Breite druecken */
.cell-wrap { overflow-wrap: anywhere; word-break: normal; }

/* Tabellen werden auf kleinen Bildschirmen zu Karten */
@media (max-width: 767.98px) {
	.table-cards thead { display: none; }
	.table-cards tr { display: block; border: 1px solid var(--bs-border-color); border-radius: .375rem; margin-bottom: .75rem; padding: .25rem .5rem; }
	.table-cards td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .25rem 0; }
	.table-cards td::before { content: attr(data-label); font-weight: 600; color: var(--bs-secondary-color); flex: 0 0 40%; }
	.table-cards td.text-nowrap { white-space: normal !important; }
}

/* Breite Tabellen mit vielen Angaben je Zelle (PROXY64, DNS64, Honeypot): auf dem Handy je Zeile eine Karte,
   Beschriftung links (aus dem Tabellenkopf, app.js), Inhalt rechts und frei umbrochen. Spalten ohne Kopftext oder
   mit data-nolabel (Name, Knoepfe) nehmen die ganze Breite. */
@media (max-width: 767.98px) {
	.table-stack thead { display: none; }
	.table-stack, .table-stack tbody, .table-stack tr { display: block; width: 100%; }
	.table-stack tr { border: 1px solid var(--bs-border-color); border-radius: .375rem; margin: 0 .5rem .6rem; width: auto; padding: .4rem .6rem; }
	.table-stack tbody tr:first-child { margin-top: .5rem; }
	.table-stack td { display: block; position: relative; border: 0; padding: .15rem 0 .15rem 6.5rem !important; text-align: start !important;
		white-space: normal !important; max-width: none !important; overflow-wrap: anywhere; min-height: 1.5rem; }
	.table-stack td::before { content: attr(data-label); position: absolute; left: 0; top: .15rem; width: 6rem; font-weight: 600; font-family: var(--bs-body-font-family);
		color: var(--bs-secondary-color); overflow-wrap: anywhere; }
	.table-stack td:not([data-label]), .table-stack td[data-label=""] { padding-left: 0 !important; }
	.table-stack td:not([data-label])::before, .table-stack td[data-label=""]::before { content: none; }
	.table-stack td:empty { display: none; }
	.table-stack td[colspan] { padding-left: 0 !important; }
	.table-stack td[colspan]::before { content: none; }
	.table-stack .text-truncate { white-space: normal !important; }
}

/* Kennzahl-Kacheln, ueberall gleich: Name klein oben, Wert gross darunter, Symbol rechts, farbiger Rand links.
   Alle Kacheln einer Reihe sind gleich hoch (Spalten strecken sich, die Karte fuellt die Spalte).
   Schmale Kacheln (container query) werden kompakter, sehr schmale zeigen kein Symbol. */
.stat { border-left: 4px solid var(--bs-secondary-border-subtle); height: 100%; color: var(--bs-body-color); container-type: inline-size; }
.stat .card-body { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; }
.stat-text { flex: 1 1 auto; min-width: 0; }
.stat-label { font-size: .875rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-value-sm { font-size: 1.05rem; line-height: 1.4; white-space: normal; }
.stat-sub { font-size: .8rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-icon { flex: 0 0 auto; margin-left: auto; font-size: 1.8rem; line-height: 1; opacity: .5; color: var(--bs-secondary-color); }
.stat-ok { border-left-color: var(--bs-success); }
.stat-down { border-left-color: var(--bs-danger); }
.stat-warn { border-left-color: var(--bs-warning); }
.stat-info { border-left-color: var(--bs-info); }
.stat-primary { border-left-color: var(--bs-primary); }
.stat-muted { border-left-color: var(--bs-secondary); }
.stat-ok .stat-icon { color: var(--bs-success); }
.stat-down .stat-icon { color: var(--bs-danger); }
.stat-warn .stat-icon { color: var(--bs-warning); }
.stat-info .stat-icon { color: var(--bs-info); }
.stat-primary .stat-icon { color: var(--bs-primary); }
a.stat { text-decoration: none; }
a.stat:hover { background: var(--bs-tertiary-bg); }
@container (max-width: 12rem) {
	.stat .card-body { gap: .5rem; padding: .6rem .75rem; }
	.stat-value { font-size: 1.3rem; }
	.stat-value-sm { font-size: .95rem; }
	.stat-icon { font-size: 1.4rem; }
}
@container (max-width: 9rem) { .stat-icon { display: none; } }
@media (max-width: 575.98px) {
	.stat .card-body { gap: .5rem; padding: .6rem .75rem; }
	.stat-value { font-size: 1.3rem; }
	.stat-value-sm { font-size: .95rem; }
	.stat-icon { font-size: 1.4rem; }
}
/* Dashboard: Kennzahlen von Healthchecks, Proxmox VE und Docker kompakt (Zahl und Text in einer Zeile) */
.dash-board .stat { border-left-width: 3px; }
.dash-board .stat .card-body { gap: .4rem; padding: .3rem .55rem; }
.dash-board .stat-text { display: flex; align-items: baseline; gap: .4rem; }
.dash-board .stat-value { order: -1; flex: 0 0 auto; overflow: visible; font-size: 1.1rem; }
.dash-board .stat-label { min-width: 0; font-size: .8rem; }
.dash-board .stat-icon { font-size: 1rem; }
/* Dashboard anpassen: Werkzeuge nur im Bearbeitungsmodus, ausgeblendete Kacheln dort blass */
.dash-item { position: relative; }
.dash-tools { display: none; position: absolute; top: .35rem; right: 1.1rem; z-index: 5; gap: .25rem; align-items: center; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .1rem .25rem; }
.dash-handle { cursor: grab; color: var(--bs-secondary-color); padding: 0 .15rem; }
.dash-editing .dash-tools { display: flex; }
.dash-editing .dash-item > .card { outline: 2px dashed var(--bs-border-color); outline-offset: 2px; }
.dash-editing .dash-item { cursor: grab; }
.dash-item.dash-hidden { display: none; }
.dash-editing .dash-item.dash-hidden { display: block; opacity: .45; }
.dash-item.dash-dragging { opacity: .4; }
.dash-edit-show { display: none !important; }
.dash-editing .dash-edit-show { display: inline-block !important; }
.dash-editing .alert.dash-edit-show { display: block !important; }
.dash-editing .dash-edit-hide { display: none !important; }
.dash-chart { position: relative; height: 240px; }

/* Healthchecks */
.hc-lg { display: inline-block; width: .8rem; height: .8rem; border-radius: .2rem; vertical-align: -.1rem; margin-right: .2rem; }
.hc-group-row td { background: var(--bs-tertiary-bg) !important; padding: .45rem .75rem !important; }
.hc-group-row.collapsed .hc-group-chev { transform: rotate(-90deg); }
.hc-group-chev { display: inline-block; transition: transform .15s; }
.hc-sub-row td { background: transparent !important; padding-left: 1.75rem !important; }
@media (max-width: 767.98px) {
	.table-cards.hc-table tr.hc-group-row { display: block; padding: .4rem .6rem; border: 0; background: transparent; margin: .75rem 0 .25rem; }
	.table-cards.hc-table tr.hc-group-row td { display: block; background: transparent !important; padding: 0 !important; }
}
/* Pillen-Spalte waechst nicht ueber den Platz hinaus; aelteste Pillen werden links abgeschnitten,
   die neuesten bleiben sichtbar. So passen auf dem Tablet alle Spalten inkl. Aktionen. */
@media (min-width: 768px) {
	.hc-table td.hc-beats { width: 24%; max-width: 0; }
	.hc-table td.hc-beats .beats { justify-content: flex-end; }
}
/* Handy: kompakte Karte je Check (Zustand, Name, Aktionen; darunter die Pillen), ohne Feldnamen */
@media (max-width: 767.98px) {
	.table-cards.hc-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "status name actions" "beats beats beats"; gap: .35rem .6rem; align-items: start; padding: .6rem .7rem; }
	.table-cards.hc-table td { display: block; padding: 0; }
	.table-cards.hc-table td::before { content: none; }
	.table-cards.hc-table td.hc-c-status { grid-area: status; padding-top: .1rem; }
	.table-cards.hc-table td.hc-c-name { grid-area: name; min-width: 0; }
	.table-cards.hc-table td.hc-c-actions { grid-area: actions; }
	.table-cards.hc-table td.hc-c-actions .btn { padding: .15rem .4rem; }
	.table-cards.hc-table td.hc-beats { grid-area: beats; }
	.table-cards.hc-table .hc-target { max-width: 100%; display: block; }
	.table-cards.hc-table .hc-exec { display: none; } /* Ausfuehrungsort erst auf der Detailseite */
}
.hc-target { max-width: min(42vw, 640px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.hc-table td.hc-c-target { max-width: 0; width: 22%; } /* Ziel-Spalte: kuerzen statt die Tabelle zu verbreitern */
/* Ziel als dezentes Badge: Symbol je Art, Text gekuerzt (voller Wert im Tooltip) */
.hc-target-badge { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .15rem .5rem; border: 1px solid var(--bs-border-color); border-radius: 50rem;
	background: var(--bs-tertiary-bg); color: var(--bs-body-color); font-size: .8rem; line-height: 1.4; vertical-align: middle; }
.hc-target-badge > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--bs-font-monospace); }
.hc-target-badge > i { color: var(--bs-secondary-color); flex: 0 0 auto; }
.hc-target-badge > i.bi-lock-fill { color: var(--bs-success); }
.hc-target-badge > i.bi-unlock { color: var(--bs-warning); }
.hc-target-push > span { font-family: inherit; }
.hc-beats { min-width: 140px; }
.hc-state-up { background: var(--bs-success) !important; color: #fff; }
.hc-state-down, .hc-state-flapping { background: var(--bs-danger) !important; color: #fff; }
.hc-state-stabilizing, .hc-state-dependent { background: var(--bs-info) !important; color: #fff; }
.hc-state-degraded { background: var(--bs-warning) !important; color: #212529; }
.hc-state-unchecked { background: repeating-linear-gradient(45deg, var(--bs-warning), var(--bs-warning) 6px, #f5d26b 6px, #f5d26b 12px) !important; color: #212529; }
/* Zeilen der Check-Liste leicht einfaerben: gestoert, instabil/teilweise gestoert, nicht geprueft */
.hc-table tr.hc-row-down > * { --bs-table-bg: rgba(var(--bs-danger-rgb), .09); }
.hc-table tr.hc-row-warn > * { --bs-table-bg: rgba(var(--bs-warning-rgb), .12); }
.hc-table tr.hc-row-stale > * { --bs-table-bg: rgba(var(--bs-warning-rgb), .28); }
.hc-state-pending, .hc-state-paused, .hc-state-quota { background: var(--bs-secondary) !important; color: #fff; }
.hc-chart-wrap { position: relative; height: 280px; }
/* Proxmox VE: Graphen der Detailseite und CPU-Verlauf der letzten Stunde in den Tabellen */
.pve-chart-wrap { position: relative; height: 220px; }
.pve-spark { display: block; overflow: visible; }
.hc-json { max-height: 320px; overflow: auto; font-size: .8rem; background: var(--bs-tertiary-bg); }
.hc-exec { font-weight: 500; }
th a { color: inherit; text-decoration: none; }
th a:hover { text-decoration: underline; }

/* Tooltips der Pillen */
.hc-tip.show { opacity: 1; }
.hc-tip .tooltip-inner { text-align: left; max-width: 320px; padding: .5rem .7rem; font-size: .8rem; line-height: 1.4; color: #e9ecef; background: #1f2328; border: 1px solid #3d444d; border-radius: .4rem; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.hc-tip .tooltip-arrow::before { border-top-color: #3d444d; }
.hc-tip .hc-tip-msg { color: #9aa3ad; }
.hc-tip .hc-tip-up { color: #4cd38a; }
.hc-tip .hc-tip-down { color: #ff6b6b; }
.hc-tip .hc-tip-maintenance { color: #f0ad4e; }
.hc-tip .hc-tip-dependent { color: #9aa3ad; }
.nav-img { height: 16px; width: auto; vertical-align: -2px; margin-right: 2px; }
.hc-empty-img { max-width: 520px; }

/* Schriftgroesse (Einstellungen > Darstellung): alles ist rem-basiert und skaliert mit */
html[data-fs="sm"] { font-size: 87.5%; }
html[data-fs="lg"] { font-size: 112.5%; }
html[data-fs="xl"] { font-size: 125%; }
@media (max-width: 575.98px) {
	html[data-fs="xl"] { font-size: 118.75%; } /* Handy: etwas gebremst, damit Tabellen-Karten nicht umbrechen */
}
.ui-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: .5rem; }
.ui-choice .btn { white-space: nowrap; }
.fs-choice .fs-a-sm { font-size: .8rem; } .fs-choice .fs-a-md { font-size: 1rem; } .fs-choice .fs-a-lg { font-size: 1.2rem; } .fs-choice .fs-a-xl { font-size: 1.4rem; }

/* Messstellen als Zusatzinfo rechts */
.hc-sources .hc-src-meta { font-size: .78rem; line-height: 1.3; }
.hc-sources .list-group-item { padding-left: .75rem; padding-right: .75rem; }

/* DynDNS: Ziele unter ihrer Domain */
.dyn-domain-row > td { background: var(--bs-tertiary-bg) !important; }
.dyn-host { padding-left: 1.5rem !important; }
@media (max-width: 767.98px) { .table-cards .dyn-domain-row > td::before { content: none; } .dyn-host { padding-left: .5rem !important; } }

/* Honeypot64: Laenderkarte (Stufe 0 = keine Angriffe, 1-5 logarithmisch; eine Farbe hell -> dunkel, im Dunkelmodus
   eigene Stufen von dunkel -> hell) */
.hp-map { display: block; width: 100%; height: auto; --hp-m0: #e3e6ea; --hp-m1: #fdd0a2; --hp-m2: #fdae6b; --hp-m3: #fd8d3c; --hp-m4: #e6550d; --hp-m5: #a63603; }
.hp-map path { fill: var(--hp-m0); stroke: var(--bs-body-bg); stroke-width: .4; stroke-linejoin: round; }
.hp-map a path:hover { filter: brightness(1.12); stroke: var(--bs-body-color); stroke-width: .8; }
.hp-map path.hp-sel { stroke: var(--bs-body-color); stroke-width: 1.2; }
/* Honeypot64: Live-Karte (honeypot-live.js) - Boegen je Art-Gruppe, Ziel pulsiert; Wiederholungen blasser */
.hp-map .hp-live path.hp-arc { fill: none; stroke-width: 2.4; stroke-linecap: round; pointer-events: stroke; filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .35)); }
.hp-map .hp-live path.hp-arc-replay { stroke-width: 1.8; stroke-opacity: .7; }
.hp-map .hp-live circle.hp-src { stroke: var(--bs-body-bg); stroke-width: .6; }
.hp-map .hp-g-login { stroke: var(--bs-danger); fill: var(--bs-danger); }
.hp-map .hp-g-exploit { stroke: var(--bs-warning); fill: var(--bs-warning); }
.hp-map .hp-g-scan { stroke: var(--bs-info); fill: var(--bs-info); }
.hp-map .hp-g-log { stroke: var(--bs-primary); fill: var(--bs-primary); }
.hp-map .hp-g-probe { stroke: var(--bs-secondary); fill: var(--bs-secondary); }
.hp-map .hp-live .hp-target-dot { fill: var(--bs-danger); stroke: var(--bs-body-bg); stroke-width: .8; }
.hp-map .hp-live .hp-target-ring { fill: none; stroke: var(--bs-danger); stroke-width: 1; transform-box: fill-box; transform-origin: center; animation: hp-pulse 2s ease-out infinite; }
@keyframes hp-pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hp-map .hp-live .hp-target-ring { animation: none; } }
.hp-live-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; vertical-align: .05rem; }
[aria-pressed="true"] > .hp-live-dot { animation: hp-blink 1.4s steps(2) infinite; }
@keyframes hp-blink { 50% { opacity: .2; } }
.hp-live-row { display: flex; gap: .4rem; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-live-row > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.hp-live-sw { flex: 0 0 .55rem; height: .55rem; border-radius: 50%; }
.hp-live-sw.hp-g-login { background: var(--bs-danger); } .hp-live-sw.hp-g-exploit { background: var(--bs-warning); }
.hp-live-sw.hp-g-scan { background: var(--bs-info); } .hp-live-sw.hp-g-log { background: var(--bs-primary); }
.hp-live-sw.hp-g-probe { background: var(--bs-secondary); }
/* Live-Karte: Auswahl (feste Boegen), Hervorhebung, Logo, Vollbild mit Seitenleiste unten links ueber dem Pazifik, Logo oben
   links (Fullscreen API oder Klasse hp-fs) */
.hp-map .hp-live-sel path { fill: none; stroke-width: 3; stroke-linecap: round; stroke-opacity: .8; pointer-events: stroke; }
.hp-map text { font-family: "Twemoji Country Flags", var(--bs-body-font-family); pointer-events: none; paint-order: stroke; stroke: var(--bs-body-bg); stroke-width: 2.4px; stroke-linejoin: round; }
.hp-map .hp-lbl { pointer-events: none; } /* Klicks und Tooltips gehen an das Land darunter */
.hp-map .hp-lbl rect { fill: rgba(33, 37, 41, .72); }
.hp-map .hp-lbl text { fill: #f8f9fa; stroke: none; }
.hp-map .hp-lbl-dst text { font-weight: 600; }
.hp-map text.hp-name { fill: var(--bs-body-color); opacity: .4; text-anchor: middle; }
.hp-map path.hp-hit { fill: #ffe08a; transition: fill .4s; }
.hp-map .hp-live .hp-target.hp-hit .hp-target-dot { fill: #ffc107; } /* Kleinstaat ohne Flaeche: Zielpunkt leuchtet */
[data-bs-theme="dark"] .hp-map path.hp-hit { fill: #f5d76e; }
.hp-live-strip { gap: .3rem 1rem; }
.hp-map .hp-live path.hp-hot { stroke-width: 4; stroke-opacity: 1; }
.hp-live-rep { opacity: .65; }
.hp-live-click { cursor: pointer; border-radius: .2rem; } .hp-live-click:hover { background: var(--bs-tertiary-bg); }
.hp-live-mapwrap { position: relative; }
.hp-live-logo { position: absolute; left: .4rem; bottom: .3rem; opacity: .7; line-height: 0; }
.hp-live-logo:hover { opacity: 1; }
.hp-live-logo img { height: 18px; }
.hp-live-panel .hp-live-fs { display: none; }
.hp-live-panel [data-hp-live-selbox] { padding-top: .4rem; }
.hp-live-stage.hp-fs { position: fixed; inset: 0; z-index: 1060; background: var(--bs-body-bg); display: flex; align-items: center; justify-content: center; }
.hp-live-stage.hp-fs .hp-live-mapwrap { position: static; width: 100%; height: 100%; }
.hp-live-stage.hp-fs .hp-map { width: 100%; height: 100%; }
.hp-live-stage.hp-fs .hp-live-logo { left: 1rem; top: 1rem; bottom: auto; } .hp-live-stage.hp-fs .hp-live-logo img { height: 30px; }
.hp-live-stage.hp-fs .hp-live-panel { position: absolute; bottom: 1rem; left: 1rem; width: 22rem; max-height: calc(100% - 5rem); overflow-y: auto; padding: .7rem;
	background: rgba(var(--bs-body-bg-rgb), .88); border: 1px solid var(--bs-border-color); border-radius: .4rem; box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .25); backdrop-filter: blur(4px); }
.hp-live-stage.hp-fs .hp-live-panel .hp-live-fs { display: block; }
.hp-live-stage.hp-fs .hp-live-panel [data-hp-live-selbox] { border-top: 1px solid var(--bs-border-color); }
@media (max-width: 767.98px), (orientation: portrait) {
	.hp-live-stage.hp-fs .hp-live-panel { top: auto; bottom: 0; left: 0; right: 0; width: auto; max-height: 42%; border-radius: .4rem .4rem 0 0; }
	.hp-live-stage.hp-fs .hp-live-logo { top: 1rem; bottom: auto; }
}
.hp-map .hp-m1 { fill: var(--hp-m1); } .hp-map .hp-m2 { fill: var(--hp-m2); } .hp-map .hp-m3 { fill: var(--hp-m3); }
.hp-map .hp-m4 { fill: var(--hp-m4); } .hp-map .hp-m5 { fill: var(--hp-m5); }
.hp-sw { display: inline-block; width: .9em; height: .9em; border-radius: .2em; vertical-align: -.1em; }
.hp-sw.hp-m1 { background: #fdd0a2; } .hp-sw.hp-m2 { background: #fdae6b; } .hp-sw.hp-m3 { background: #fd8d3c; }
.hp-sw.hp-m4 { background: #e6550d; } .hp-sw.hp-m5 { background: #a63603; }
[data-bs-theme="dark"] .hp-map { --hp-m0: #2c3238; --hp-m1: #5e2d0c; --hp-m2: #8f420f; --hp-m3: #c75d14; --hp-m4: #f07f2a; --hp-m5: #ffb46b; }
[data-bs-theme="dark"] .hp-sw.hp-m1 { background: #5e2d0c; } [data-bs-theme="dark"] .hp-sw.hp-m2 { background: #8f420f; }
[data-bs-theme="dark"] .hp-sw.hp-m3 { background: #c75d14; } [data-bs-theme="dark"] .hp-sw.hp-m4 { background: #f07f2a; }
[data-bs-theme="dark"] .hp-sw.hp-m5 { background: #ffb46b; }

/* Unterpunkt im Menue (z. B. Healthchecks-Sync unter Healthchecks) */
.nav-link.nav-sub { padding-left: 2.6rem; padding-top: .2rem; padding-bottom: .2rem; }

/* PROXY64: an den Honeypot-Koeder gegebene Anfragen (lila wie im Diagramm) */
.hp-decoy { color: var(--bs-purple, #6f42c1); }
.hp-decoy-badge { background-color: var(--bs-purple, #6f42c1); color: #fff; }
/* CDN64 einschalten: Modus-Erklaerung mit Skizze, Kasten waehlt den Modus */
.c64o-ascii { font-size: .72rem; line-height: 1.25; white-space: pre; overflow-x: auto; color: var(--bs-secondary-color); }
.c64o-pick { cursor: pointer; }
.c64o-pick:hover, .c64o-pick:focus-visible { border-color: var(--bs-primary) !important; }
.c64o-pick.active { border-color: var(--bs-primary) !important; background-color: var(--bs-primary-bg-subtle); }
.c64o-mode3 { border-style: dashed !important; }