/* Kraehennest (Elbradar, Kraehenzug, Leuchtfeuer) - Design "Hafen-Nacht", nach der
   Cardputer-Firmware Krähenauge. Wird in jeder Seite NACH deren eigenem <style> geladen.
   Datenfarben (Flugzeuge, Schiffe, Nahverkehr, Arten, Warnstufen) bleiben unveraendert.
   Schrift: Spleen (BSD, static/fonts/LICENSE-spleen.txt), nur 12 / 16 / 24 / 32 / 48 px
   mit --f-s (6x12) / --f-m (8x16) / --f-l (12x24). */

@font-face { font-family: 'Spleen6'; src: url('/static/fonts/spleen-6x12.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Spleen8'; src: url('/static/fonts/spleen-8x16.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Spleen12'; src: url('/static/fonts/spleen-12x24.woff2') format('woff2'); font-display: swap; }
/* Ergaenzung fuer Zeichen, die Spleen fehlen - gleicher Name, nur dieser Zeichenbereich */
@font-face { font-family: 'Spleen6'; src: url('/static/fonts/spleen-plus-6x12.woff2') format('woff2'); unicode-range: U+2013-2014, U+2018-201E, U+2022, U+2026, U+20AC; }
@font-face { font-family: 'Spleen8'; src: url('/static/fonts/spleen-plus-8x16.woff2') format('woff2'); unicode-range: U+201A-201B, U+201E; }
@font-face { font-family: 'Spleen12'; src: url('/static/fonts/spleen-plus-12x24.woff2') format('woff2'); unicode-range: U+201A-201B, U+201E; }

:root {
--f-s: 'Spleen6', ui-monospace, monospace;
--f-m: 'Spleen8', ui-monospace, monospace;
--f-l: 'Spleen12', ui-monospace, monospace;

/* Hafen-Nacht: blauschwarz, gedaempftes Cyan, Magenta fuer Akzente */
--bg: #0a111a;
--panel: #111b27;
--panel-2: #16222f;
--border: #22303f;
--grid: #1a2735;
--text: #a9bccc;
--text-dim: #6a7d90;
--text-mute: #56687a;
--accent: #3fd0e0;

--nn-cy: #3fd0e0;
--nn-mg: #ff4f8b;
--nn-on: #04121a;        /* Text auf Cyan */
--nn-bright: #eaf3fa;
--nn-bg: #0a111a;        /* fuer das Startbild (boot.js) */
}

/* ------------------------------------------------------------------ Grundlagen */
html { -webkit-font-smoothing: none; font-synthesis: none; }
/* Null-Spezifitaet: eigene Regeln der Seite (z.B. Leuchtfeuer 12 px) gewinnen */
:where(body) { font-family: var(--f-m); font-size: 16px; }
:where(button, input, select, textarea) { font-family: var(--f-m); font-size: 16px; }
*, *::before, *::after { border-radius: 0 !important; }
::selection { background: var(--nn-cy); color: var(--nn-on); }
svg text { font-family: var(--f-s); }
h1, h2, h3, h4 { font-weight: normal; }

/* Kopfzeile: Schriftzug statt Ueberschrift, cyane Linie */
header { border-bottom: 1px solid var(--nn-cy) !important; }
header h1, .brand h1 {
font-family: var(--f-l) !important; font-size: 24px !important; line-height: 1 !important; letter-spacing: 1px !important;
color: var(--nn-bright) !important; text-shadow: -2px 0 var(--nn-mg), 2px 0 var(--nn-cy);
}
.subtitle { color: var(--text-dim) !important; }

/* Reiter: aktiver als Cyan-Balken mit Magenta-Kante wie auf dem Cardputer */
.view-tab { border-color: transparent !important; color: var(--text-dim) !important; background: transparent !important; }
.view-tab:hover { color: var(--nn-bright) !important; }
.view-tab.active {
background: var(--nn-cy) !important; color: var(--nn-on) !important; border-color: var(--nn-cy) !important;
box-shadow: inset 3px 0 0 var(--nn-mg);
}

/* Flaechen */
#statusTicker { background: var(--bg) !important; }
.panel, .sidebar, .tile, .card { box-shadow: none !important; }
.panel h2 { color: var(--nn-mg) !important; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--nn-cy) !important; box-shadow: inset 3px 0 0 var(--nn-mg) !important; }
input[type="checkbox"] {
appearance: none; -webkit-appearance: none; width: 12px; height: 12px; margin: 0; flex-shrink: 0; cursor: pointer;
border: 1px solid var(--text-dim); background: var(--bg); vertical-align: middle;
}
input[type="checkbox"]:checked { background: var(--nn-cy); border-color: var(--nn-cy); box-shadow: inset 0 0 0 2px var(--bg); }

/* Leaflet-Popups und -Bedienelemente im gleichen Stil */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { box-shadow: none !important; border: 1px solid var(--border); }
.leaflet-bar a { background: var(--panel) !important; color: var(--nn-cy) !important; border-color: var(--border) !important; font: 16px/26px var(--f-m) !important; }

/* ---------------------------------------------------------- Leuchtturm B (Glitch) */
.lh-mascot { filter: drop-shadow(-1px 0 var(--nn-mg)) drop-shadow(1px 0 var(--nn-cy)); }
.lh-rs { fill: #7d1238 !important; } .lh-rd { fill: #c21d52 !important; } .lh-r { fill: #ff2a6d !important; } .lh-rh { fill: #ff6d99 !important; }
.lh-ws { fill: #6fb7c8 !important; } .lh-wd { fill: #b8eef5 !important; } .lh-w { fill: #e8f6ff !important; } .lh-wh { fill: #ffffff !important; }
.lh-k { fill: #000000 !important; } .lh-d { fill: #0b1016 !important; } .lh-dm { fill: #142030 !important; } .lh-g { fill: #1f3346 !important; } .lh-gh { fill: #2d4a60 !important; }
.lh-y { fill: #7ff3fa !important; } .lh-yh { fill: #e8f6ff !important; } .lh-o { fill: #05d9e8 !important; } .lh-oh { fill: #9ff8ff !important; }
.lh-s0 { fill: #03060a !important; } .lh-s1 { fill: #061520 !important; } .lh-s2 { fill: #0a2433 !important; }
.lh-s3 { fill: #0f3547 !important; } .lh-s4 { fill: #145063 !important; } .lh-s5 { fill: #1d6f86 !important; }
.lh-beam rect { fill: #05d9e8 !important; }

/* ---------------------------------------------------------------- Startbild (boot.js) */
.nn-boot {
position: fixed; inset: 0; z-index: 99999; background: var(--nn-bg); color: var(--text); cursor: pointer;
font-family: var(--f-m); font-size: 16px; line-height: 1.25;
display: flex; align-items: center; justify-content: center; transition: opacity .25s steps(3);
}
.nn-boot-out { opacity: 0; }
.nn-boot-noise b { position: absolute; height: 1px; display: block; }
.nn-boot-main { text-align: center; visibility: hidden; }
.nn-boot-on .nn-boot-main { visibility: visible; }
.nn-boot-name {
font-family: var(--f-l); font-size: 48px; line-height: 1; color: var(--nn-bright);
letter-spacing: 3px; text-shadow: -3px 0 var(--nn-mg), 3px 0 var(--nn-cy);
}
.nn-boot-jit .nn-boot-name { transform: translateX(3px); text-shadow: -6px 0 var(--nn-mg), 5px 0 var(--nn-cy); }
.nn-boot-sub { color: var(--text-dim); margin: 10px 0 24px; }
.nn-boot-bar { width: 260px; height: 12px; border: 1px solid var(--nn-cy); padding: 2px; margin: 0 auto; text-align: left; }
.nn-boot-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--nn-cy) 0 3px, transparent 3px 5px); }
.nn-boot-line { width: 260px; margin: 10px auto 0; text-align: left; color: var(--nn-mg); min-height: 20px; }
.nn-boot-skip { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: var(--border); font-family: var(--f-s); font-size: 12px; }

/* ------------------------------------------------------------------- Anmeldung */
.login-box h1 {
font-family: var(--f-l) !important; font-size: 48px !important; line-height: 1 !important; letter-spacing: 2px !important;
color: var(--nn-bright) !important; text-shadow: -3px 0 var(--nn-mg), 3px 0 var(--nn-cy);
}
.login-box button { background: var(--nn-cy) !important; color: var(--nn-on) !important; border: 1px solid var(--nn-cy) !important; }
.login-box button:hover { background: var(--panel) !important; color: var(--nn-cy) !important; }
.login-box input { background: var(--bg) !important; border: 1px solid var(--border) !important; color: var(--nn-bright) !important; }