@import url("/css/fonts.css");

/* ============ Theme-Variablen (Schritt 2) ============
   Alle drei Varianten sind dunkle Skins (kein Hell-Theme - das Logo und
   die Menue-Buttons sind nicht fuer helle Hintergruende gebaut), sie
   unterscheiden sich in Akzentfarbe und Kontrast.
   Dark = 1:1 die bisherigen Farben (Standard, keine sichtbare Aenderung). */
:root,
:root[data-theme="dark"] {
    --fdmr-bg: #1c2025;
    --fdmr-surface: #20262c;
    --fdmr-nav-bg: #111111;
    --fdmr-border: rgba(255, 255, 255, 0.06);
    --fdmr-text: #a8aaa9;
    --fdmr-text-dim: #6a7a6d;
    --fdmr-accent: #65dbc8;
    --fdmr-accent-rgb: 101, 219, 200;
    --fdmr-accent-alt: #baeb9e;
    /* Pille/Symbol fuer vom Server eingefuegte Talker Aliase (Aktive QSOs) - Violett kommt in
       keinem Theme als Balken- oder Pillenfarbe vor; Themes koennen es ueberschreiben. */
    --fdmr-inject: #b48ee0;
    --fdmr-inject-rgb: 180, 142, 224;

    /* tetra.php nutzt diese Namen direkt (var(--accent, ...) usw.) -
       Werte hier = genau die bisherigen Fallbacks der Seite, damit sich
       im Dark-Theme optisch nichts aendert. */
    --surface: #1c2025;
    --border: #2a3036;
    --muted: #3a4a3d;
    --text: #c8ddc9;
    --text-dim: #6a7a6d;
    --accent: #baeb9e;
    --accent2: #65dbc8;
}

:root[data-theme="midnight"] {
    /* Cyberpunk-Zweiklang: Magenta als Hauptakzent, Cyan als zweiter -
       vorher praktisch dieselben Gruen/Tuerkis-Toene wie Dark, nur dunkler.
       Hintergrund leicht violett statt neutral schwarz. */
    --fdmr-bg: #0a0612;
    --fdmr-surface: #150f22;
    --fdmr-nav-bg: #08050d;
    --fdmr-border: rgba(255, 46, 151, 0.12);
    --fdmr-text: #e0d5f0;
    --fdmr-text-dim: #7a6690;
    --fdmr-accent: #ff2e97;
    --fdmr-accent-rgb: 255, 46, 151;
    --fdmr-accent-alt: #00e5ff;
    --fdmr-map-bridge: #9a5bff; /* Karte: Mitte des Verlaufs, wenn Pink und Cyan in einem Gebiet zusammentreffen */
    /* Violett laege hier zu nah an Magenta und am violetten Hintergrund */
    --fdmr-inject: #ffd84a;
    --fdmr-inject-rgb: 255, 216, 74;

    --surface: #150f22;
    --border: #2a1f3d;
    --muted: #3d2a55;
    --text: #e0d5f0;
    --text-dim: #7a6690;
    --accent: #00e5ff;
    --accent2: #ff2e97;
}

:root[data-theme="amber"] {
    --fdmr-bg: #1f1a14;
    --fdmr-surface: #29221a;
    --fdmr-nav-bg: #171310;
    --fdmr-border: rgba(255, 200, 140, 0.12);
    --fdmr-text: #cdbfae;
    --fdmr-text-dim: #8a7a68;
    --fdmr-accent: #e0a458;
    --fdmr-accent-rgb: 224, 164, 88;
    --fdmr-accent-alt: #baeb9e;

    --surface: #29221a;
    --border: #3a2f22;
    --muted: #4a3d2f;
    --text: #dcd0c0;
    --text-dim: #8a7a68;
    --accent: #baeb9e;
    --accent2: #e0a458;
}

/* Event-Themes - nur aktiv waehlbar, wenn cred.php den Button im passenden
   Datumsbereich anzeigt (siehe dortige $fdmr_event_themes), das Farbschema
   selbst bleibt aber ganzjaehrig im CSS stehen. */
:root[data-theme="halloween"] {
    --fdmr-bg: #100905;
    --fdmr-surface: #1c120a;
    --fdmr-nav-bg: #0c0704;
    --fdmr-border: rgba(255, 117, 24, 0.14);
    --fdmr-text: #f0d8c0;
    --fdmr-text-dim: #8a6a4a;
    --fdmr-accent: #ff7518;
    --fdmr-accent-rgb: 255, 117, 24;
    --fdmr-accent-alt: #7c4dff;

    --surface: #1c120a;
    --border: #3a2414;
    --muted: #4a3020;
    --text: #f0d8c0;
    --text-dim: #8a6a4a;
    --accent: #7c4dff;
    --accent2: #ff7518;
}

:root[data-theme="christmas"] {
    --fdmr-bg: #0a1108;
    --fdmr-surface: #101f0d;
    --fdmr-nav-bg: #070d06;
    --fdmr-border: rgba(230, 57, 70, 0.14);
    --fdmr-text: #eef0e6;
    --fdmr-text-dim: #6a8a60;
    --fdmr-accent: #e63946;
    --fdmr-accent-rgb: 230, 57, 70;
    --fdmr-accent-alt: #d4af37;

    --surface: #101f0d;
    --border: #1e3618;
    --muted: #2c4a24;
    --text: #eef0e6;
    --text-dim: #6a8a60;
    --accent: #d4af37;
    --accent2: #e63946;
}

.icon-alert::before {
  content: '⚠'; /* Unicode-Warnsymbol oder ein anderes Icon */
  color: red;
  font-size: 1.2em;
  margin-right: 0.5em;
}












/* Suche: normaler Menue-Knopf, das Eingabefeld klappt darunter auf (wie System/Help) und bleibt offen, solange es Fokus hat */
.searchdrop:focus-within .dropdown-content { display: block; }
.searchbox { padding: 0; overflow: visible; background: transparent; border: 0 !important; box-shadow: none !important; }
.searchbox form { margin: 0; }
.searchfield_inp {
        display: block;
        font-family: Roboto;
        font-size: 16px;
        font-weight: 500;
        width: 210px;
        height: 35px;
        padding: 0 14px;
        box-sizing: border-box;
        outline: none;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background-color: var(--fdmr-nav-bg);
        color: var(--fdmr-text);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        transition: border-color .15s ease, box-shadow .15s ease;
}
.searchfield_inp:focus {
        border-color: rgba(var(--fdmr-accent-rgb), 0.6);
        color: var(--fdmr-accent);
        outline: none;
}
.searchfield_inp:hover {
        border-color: rgba(var(--fdmr-accent-rgb), 0.4);
        box-shadow: 0 0 18px rgba(var(--fdmr-accent-rgb), 0.25);
}





::placeholder {
        color: #a8b2bc;
}
.sortable-header {
        cursor: pointer;
}
.sortable-header::after {
        content: " ▼";
        margin-left: 5px;
        opacity: 0.3;
}
.sorted-asc::after {
        content: " ▲";
        margin-left: 5px;
        opacity: 1;
}
.sorted-desc::after {
        content: " ▼";
        margin-left: 5px;
        opacity: 1;
}
@keyframes text-glowbow1 {
        0% {
                opacity: 0.9;
        }
        25% {
                opacity: 0.9;
        }
        50% {
                opacity: 0.7;
        }
        75% {
                opacity: 0.9;
        }
        100% {
                opacity: 0.9;
        }
}
@keyframes text-flicker1 {
        0% {
                opacity: 0.9;
        }
        2% {
                opacity: 0.7;
        }
        8% {
                opacity: 0.9;
        }
        9% {
                opacity: 0.7;
        }
        12% {
                opacity: 0.9;
        }
        20% {
                opacity: 0.7;
        }
        25% {
                opacity: 0.9;
        }
        30% {
                opacity: 0.7;
        }
        70% {
                opacity: 0.9;
        }
        72% {
                opacity: 0.7;
        }
        77% {
                opacity: 0.9;
        }
        100% {
                opacity: 0.7;
        }
}
.link {
        background-color: #112a44;
        color: #a8b2bc;
}
.dropbtn {
        background-color: #112a44;
        color: #a8b2bc;
}

/* Tabelle Main */
table,
td,
th {
        border: 0.1px solid #1a1a1a;
        padding: 3px;
        text-align: center;
        border-collapse: collapse;
}
th {
        background-color: #112a44;
        color: #a8b2bc;
}

#log {
        height: 40em;
        text-align: left;
        overflow-y: scroll;
        font-size: 13px;
        background-color: #000000;
        color: #b1eee9;
}
/* Server Activity table */
table.active-qso {
        border: 0;
        text-align: center;
        width: 100%;
        border-spacing: 0 px;
        border-collapse: collapse;
        /*background-color: #1a1a1a;
    */
        font-family: ShareTechMono;
}
.active-qso th {
        background: var(--fdmr-surface);
        color: #a8b2bc;
        border-radius: 0px;
        font-weight: bold;
        height: 25px;
        text-align: left;
}
.active-qso td {
        line-height: 1.3em;
        height: 60px;
        border-radius: 4px;
        border: 0px solid #2e3440;
        background-color: var(--fdmr-surface);
        font-size: 23pt;
        font-weight: bold;
}
table.active-qso2 {
        border: 0;
        text-align: center;
        width: 100%;
        border-spacing: 0 0px;
        border-collapse: separate;
}
.active-qso2 th {
        background-color: var(--fdmr-surface);
        color: #a8b2bc;
        border-radius: 4px;
        font-size: 9pt;
        font-weight: bold;
        height: 25px;
}
.active-qso2 td {
        line-height: 1.3em;
        height: 10px;
        border-radius: 4px;
        border: 0px solid Grey;
        background-color: var(--fdmr-surface);
        font-size: 12pt;
        font-weight: bold;
}
/* Static TG table */
table.stctg {
        font-family: SourceCodePro;
        font-weight: lighter;
        font-size: 11pt;
        table-layout: fixed;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
        background-color: #19191919;
}
.ts1-bkgnd {
        background-color: #1616169d;
}
.stctg .th1wd {
        width: 120px;
}
.stctg .th2wd {
        width: 190px;
}
.stctg .th3wd {
        width: 110px;
}
.stctg .th4wd {
        width: 40px;
}
.stctg .th5wd {
        width: 50%;
}
.stctg .th6wd {
        width: 65px;
}
.stctg .th7wd {
        width: 65px;
}
.stctg .connted-bkgnd {
        background-color: #2e5642;
}
.stctg .location {
        font-size: 92%;
        color: #b5651d;
        font-weight: bold;
}
/* Master peer table */
table.lnksys {
        font-family: SourceCodePro;
        font-weight: lighter;
        font-size: 11pt;
        table-layout: fixed;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
        background-color: #1f1f1f;
}
.lnksys .th1wd {
        width: 120px;
}
.lnksys .th2wd {
        width: 190px;
}
.lnksys .th3wd {
        width: 110px;
}
.lnksys .th4wd {
        width: 40px;
}
.lnksys .th5wd {
        width: 50%;
}
.lnksys .th6wd {
        width: 40%;
}
.lnksys .connted-bkgnd {
        background-color: #2e5642;
}
.lnksys .location {
        font-size: 92%;
        color: #b5651d;
        font-weight: bold;
}
.lnksys .peer-conn {
        font-size: 9pt;
        background-color: #2e5642;
}
.lnksys .peer-disc {
        font-size: 9pt;
        background-color: #b70101;
}
/* Last heard table */


.row-red {
  background-color: red;
  color: white; /* Optional: für besseren Kontrast */
}

/* END */

table.log {
        background-color: #2e363f;
        border-collapse: collapse;
        width: 100%;
        text-align: center;
        border-color: #000000;
        font-family: SourceCodePro;
        font-weight: lighter;
        font-size: 11pt;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3); /* Schatten hinzufügen */
        border-radius: 5px; /* Ecken abrunden */
}

.log th {
        height: 30px;
}

.log tr:nth-child(even) {
        background-color: #212529;
}

table.log td.description {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 520px;
}

.conn2srv {
        font-size: 10pt;
        font-weight: 600;
        margin-top: 5px;
        margin-bottom: 5px;
        background-image: linear-gradient(to bottom, #e9e9e9 50%, #bcbaba 100%);
        border: 1px solid LightGrey;
        border-radius: 10px;
}
.conn2srv .tittle {
        margin-left: 7px;
        margin-bottom: 5px;
        float: left;
        color: #464646;
        font-weight: 600;
        line-height: 1.5;
}
.conn2srv .hs-peers {
        clear: left;
        text-align: left;
        font-size: 9.5pt;
        font-weight: bold;
        margin: 10px 25px;
        line-height: 1.4;
        white-space: normal;
}

a:link {
        text-decoration: none;
        font-size: 9.5pt;
        font-weight: bold;
        color: #60d7c6;
        text-shadow: 1px 1px 1px black, 0 0 0.5em LightGrey, 0 0 0.1em lime;
}
/* visited link */
a:visited {
        color: #60d7c6;
        text-decoration: none;
}
/* mouse over link */
a:hover {
        color: hotpink;
        text-decoration: none;
}
/* selected link */
a:active {
        color: #0066ff;
        text-decoration: none;
}

a.button {
        background-color: var(--fdmr-nav-bg);
        color: #a8b2bc;
        font-family: Roboto;
        text-shadow: none;
         border: 0.1px solid #7a8e9e; /* GEÄNDERT: Statt #aeee99 jetzt Hellgrau */
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: 500;
        margin: 7px 3px;
        border-radius: 4px;
        /*border-radius: 8px;
    */
        box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
}

.button:hover {
        background-color: rgb(140, 140, 140);
        background: #aeee99;
        color: black;
        -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
}
.dropdown:hover .dropbtn {
        background-color: rgb(140, 140, 140);
        background: #aeee99;
        color: black;
        -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
}
a.buttonA {
        background-color: var(--fdmr-nav-bg);
        color: #be4245;
        font-family: Roboto;
        text-shadow: none;
         border: 0.1px solid #7a8e9e; /* GEÄNDERT: Statt #aeee99 jetzt Hellgrau */
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        margin: 7px 3px;
        border-radius: 4px;
        /*border-radius: 8px;
    */
        box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
}
.buttonA:hover {
        background-color: rgb(140, 140, 140);
        background: #aeee99;
        color: red;
        -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
}
a.buttonDB {
        background-color: var(--fdmr-nav-bg);
        color: #a8b2bc;
        font-family: Roboto;
        text-shadow: none;
         border: 0.1px solid #7a8e9e; /* GEÄNDERT: Statt #aeee99 jetzt Hellgrau */
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: 500;
        margin: 7px 3px;
        border-radius: 4px;
        /*border-radius: 8px;
    */
        box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
}
/* altes .buttonDB:hover (112px Orange-Blast + border-radius:2px) entfernt -
   ueberschrieb sonst die runde Ecke aus dem a.buttonDB:hover weiter unten */
.dropbtn {
        background-color: var(--fdmr-nav-bg);
        color: #a8b2bc;
        font-family: Roboto;
        text-shadow: none;
        border: 0.1px solid #aeee99;
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: 500;
        margin: 7px 3px;
        border-radius: 4px;
        /*border-radius: 8px;
    */
        box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
}
/* The container - needed to position the dropdown content */
.dropdown {
        position: relative;
        display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
        border: 0.1px solid #aeee99;
        font-family: Roboto;
        text-shadow: none;
        display: none;
        position: absolute;
        background-color: var(--fdmr-nav-bg);
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        right: 0;
top: 50px;

}
/* Links inside the dropdown */
.dropdown-content a {
        color: #a8b2bc;
        padding: 6px 16px;
        text-decoration: none;
        display: block;
        text-shadow: none;
        font-size: 15px;

}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
        background-color: rgb(140, 140, 140);
        background: #aeee99;
        color: black;
        -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
        display: block;

}
/* NEW CHANGES HERE */

testfooter {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #1c2025;
        padding: 5px;
        text-align: center;
        font-size: 14px;
        z-index: 999; /* Stellen Sie sicher, dass der Footer vor anderen Elementen liegt */
}

.footer-content {
        /* Hier können Sie Stile für den Inhalt des Footers anpassen */
}

/* Main Body */
  body {
    margin: auto;
    width: 1200px;
    background-color: var(--fdmr-bg);
    color: var(--fdmr-text);
    font-size: 16px;
    font-family: JuliusSansOne;
    text-align: center;
	padding-bottom: 50px;
	overflow-x: hidden;
	transition: background-color .2s ease, color .2s ease;
  }

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Halbtransparentes Schwarz */
    pointer-events: none; /* Klicks auf das Overlay ignorieren */
    transition: opacity 1s;
    opacity: 0; /* Standardmäßig unsichtbar */
  }
  
  
::-webkit-scrollbar {
        width: 5px;
        background: black;
}
::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px black;
        border-radius: 10px;
        background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
        background: #172a43;
}
::-webkit-scrollbar-thumb:hover {
        background: #555;
}
/* Top image */
.img-top {
        display: block;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
}
/* Server tittle */
.srv-tittle {
        /* color: #0900;
     */
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        padding: 7px;
}
/* fieldset general */
fieldset {
        /*background-color: #111111;
    */
        color: #a9b3bb;
        border: none;
        border-radius: 4px;
        border-color: #baeb9e;
        margin: 15px auto;
}
fieldset.big {
        width: 1100px;
}
fieldset.med {
        width: 900px;
}
fieldset.small {
        width: 70%;
}
legend {
        color: #a9b3bb;
        margin-left: 20px;
        text-align: left;
        padding: 0 5px;
}
/* Leer-Zustand in Masters/Peers Status (z.B. direkt nach dem Serverstart) - dezent
   statt der frueheren roten .w4data-Optik, die wie ein Fehler aussah. */
.empty-state {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-height: 70px;
        font-family: ShareTechMono, monospace;
        font-size: 0.85rem;
        letter-spacing: 1px;
        color: var(--fdmr-text-dim, #6a7a6d);
}
.es-wave {
        position: relative;
        width: 16px;
        height: 16px;
        display: inline-block;
}
.es-wave i, .es-wave b {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 8px;
        height: 8px;
        margin: -4px;
        border-radius: 50%;
        box-sizing: border-box;
}
.es-wave b {
        background: var(--fdmr-accent, #65dbc8);
}
.es-wave i {
        border: 1.5px solid var(--fdmr-accent, #65dbc8);
        opacity: 0;
        animation: fdmr-es-wave 2s ease-out infinite;
}
.es-wave i:nth-child(2) { animation-delay: 0.66s; }
.es-wave i:nth-child(3) { animation-delay: 1.33s; }
@keyframes fdmr-es-wave {
        0%   { transform: scale(1); opacity: 0.9; }
        100% { transform: scale(3.6); opacity: 0; }
}
.es-dots span {
        animation: fdmr-es-dot 2.4s infinite;
}
.es-dots span:nth-child(2) { animation-delay: 0.4s; }
.es-dots span:nth-child(3) { animation-delay: 0.8s; }
@keyframes fdmr-es-dot {
        0%, 100% { opacity: 0.15; }
        50% { opacity: 1; }
}
/* Waiting for server data tabble */
.w4data {
        width: 100%;
        background-color: #1d2025;
        font-family: SourceCodePro;
        font-size: 20px;
        margin-top: 4px;
        margin-bottom: 4px;
        border: none;
        border-collapse: collapse;
        height: 60px;
        text-align: center;
        color: brown;
        padding: 0;
}

table.opb {
        background-color: #1a1a1a;
        table-layout: fixed;
        width: 100%;
        margin-top: 5px;
        margin-bottom: 5px;
}
.opb .col1 {
        text-align: left;
        padding-left: 20px;
}
.opb .col2 {
        font-size: 9pt;
}
.opb .col3 {
        font-size: 9pt;
        font-weight: 600;
        color: #000000;
}
.opb .th1wd {
        width: 12%;
}
.opb .th2wd {
        width: 12%;
}
.opb .th3wd {
        width: 70%;
}
/* sysinfo page */
.images img {
        display: block;
        padding-bottom: 10px;
        margin-left: auto;
        margin-right: auto;
}
.bkgnd-1d1 {
        background: #78283f;
}
/* DATA Indicator */
.bkgnd-8ecfb4 {
        background-color: darkblue;
}
/* dont know */
.bkgnd-cefdce {
        background-color: #000000;
}
.bkgnd-ff0000 {
        background-color: #ff0000;
}
.txt-yellow {
        color: #fff85b;
}
.txt-b70101 {
        color: red;
}
/* TS1 Indicator */
.txt-3a4aa6 {
        color: #57dbc8;
}
/* TS2 indicator */
.txt-green {
        color: #baeb9e;
}
/* TG Names */
.txt-blue {
        color: #baeb9e;
}
/* #callsign */
.txt-red {
        color: red;
}
.txt-white {
        color: #ffffff;
}
.txt-008000 {
        color: hotpink;
}
.txt-0065ff {
        color: #7bd8bf;
}
/* Hotspot Name */
.txt-b5651d {
        color: #b5651d;
}
/* #TG Numbers */
.txt-464646 {
        color: hotpink;
}
/* #dontknow */
.txt-002d62 {
        color: #1cdfc8;
}
/* Names */
.txt-back {
        color: #346e9f;
}
.TX_A {
        background-color: #375543;
}
.RX_A {
        background-color: #6f2f3f;
}

.TX {
        background-color: #375543; /* Dunkles Rot für sprechenden User */
        animation: TXpulseAnimation 1s infinite alternate; /* Pulsierende Animation */
        transition: background-color 0.7s ease; /* Sanfter Übergang für die Hintergrundfarbe */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); /* Schatten für den Text */
        opacity: 0.8;
}

.RX {
        background-color: #6f2f3f; /* Dunkles Rot für sprechenden User */
        animation: RXpulseAnimation 1s infinite alternate; /* Pulsierende Animation für Hintergrund */
        transition: background-color 0.6s ease; /* Sanfter Übergang für die Hintergrundfarbe */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9); /* Schatten für den Text */
        opacity: 0.8;
}

@keyframes RXpulseAnimation {
        0% {
                background-color: rgba(111, 47, 63, 1);
        }
        100% {
                background-color: rgba(111, 47, 63, 0.9);
        }
}

@keyframes TXpulseAnimation {
        0% {
                background-color: rgba(55, 85, 67, 1);
        }
        100% {
                background-color: rgba(55, 85, 67, 0.9);
        }
}

.fnt-7pt {
        font-size: 7pt;
}
.fnt-8pt {
        font-size: 8pt;
}
.cred {
        font-size: 10px;
        font-family: JuliusSansOne;
        text-align: center;
}
.ver {
        font-size: 10px;
        font-family: Dosis;
        text-align: right;
        font-family: "SourceCodePro";
}
.uhr {
        font-size: 10px;
        font-family: Dosis;
        text-align: right;
        font-family: "SourceCodePro";
}
#uhr {
        font-size: 12px;
        font-family: Dosis;
        text-align: right;
        font-family: "SourceCodePro";

    transform: translate(-7%, 145%);
}

.aqso-talkgroup {
        color: #ab682e;
        text-shadow: rgba(171, 104, 46, 0.75) 0px 0px 35px;
        animation: text-glowbow 3s linear infinite;
}
.aqso-name {
        color: #65dbc8;
        text-shadow: rgba(101, 219, 199, 0.75) 0px 0px 35px;
        animation: text-glowbow 3s linear infinite;
}
.test1 {
        font-size: 50px;
        color: #65dbc8;
        text-shadow: rgba(101, 219, 199, 0.75) 0px 0px 35px;
        animation: text-wobbi1 3s linear infinite;
}
.test2 {
        font-size: 50px;
        color: #65dbc8;
        text-shadow: rgba(101, 219, 199, 0.75) 0px 0px 35px;
        animation: text-wobbi2 3s linear infinite;
}
.test3 {
        font-size: 50px;
        color: #65dbc8;
        text-shadow: rgba(101, 219, 199, 0.75) 0px 0px 35px;
        animation: text-wobbi3 3s linear infinite;
}
/* Einfacher Pfeil nach oben */
.arrow-up {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 10px solid #ffffff;
        /* Ändern Sie die Farbe hier nach Bedarf */
}
/* Einfacher Pfeil nach unten */
.arrow-down {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 10px solid #ffffff;
        /* Ändern Sie die Farbe hier nach Bedarf */
}
/* Stil für den aufsteigenden Sortierpfeil */
.sort-asc::before {
        content: "\25B2";
        /* Aufwärtspfeil */
        margin-left: 5px;
}
/* Stil für den absteigenden Sortierpfeil */
.sort-desc::before {
        content: "\25BC";
        /* Abwärtspfeil */
        margin-left: 5px;
}
/* Pfeile für die Sortierung */
.sort-icon {
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 4px;
        vertical-align: middle;
        border: 4px solid transparent;
}
.sortable.sorted-asc .sort-icon:before {
        content: "";
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid #000;
}
.sortable.sorted-desc .sort-icon:before {
        content: "";
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #000;
}
/* News-Statuszeile und Glocke: siehe css/news.css (von scripts/ticker.js eingebunden) */

.codebox {
        background-color: #17191c;
        color: #fff;
        font-size: 14px;
        padding: 10px;
        border-radius: 5px;
        text-align: left;
}
.no-wrap {
        width: 450px !important;
        overflow: hidden;
}
/* Webkit-basierte Browser */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
        /* Benutzerdefinierte Schriftart "Source Code Pro" in Größe 12 */
        .code-box pre {
                font-family: "Source Code Pro", monospace;
                font-size: 12px;
        }

        /* Benutzerdefinierte horizontale Scrollleiste */
        .code-box::-webkit-scrollbar {
                width: 1px; /* Dicke des Scrollbalkens */
                height: 1px;
        }

        .code-box::-webkit-scrollbar-thumb {
                background-color: #888; /* Farbe des Scrollbalken-Thumb */
        }

        .code-box::-webkit-scrollbar-thumb:hover {
                background-color: #555; /* Farbe des Scrollbalken-Thumb bei Hover */
        }
}

/* Andere Browser */
.code-box {
        background-color: #000;
        color: #fff;
        padding: 10px;
        border-radius: 5px;
        max-height: 400px;
        overflow-y: auto; /* Vertikale Scrollleiste erscheint nur, wenn der Inhalt die Höhe überschreitet */
        white-space: nowrap; /* Horizontale Scrollleiste statt Zeilenumbruch */
        overflow-x: auto; /* Horizontale Scrollleiste erscheint nur, wenn der Inhalt breiter ist als die Box */
}
.code-box pre {
        margin: 0;
        overflow-wrap: break-word;
        text-align: left;
}
.imp {
        font-family: Tahoma, sans-serif;
        font-size: 18px;
        text-align: left;
}
.h1 {
}
.h2-left-med {
        text-align: left;
        font-size: 24px;
        margin-top: 60px;
        margin-bottom: 20px;
}
.noaccess {
        color: #833;
        font-family: "Source Code Pro", monospace;
        font-size: 24px;
}
.container {
        max-width: 400px;
        margin: 100px auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #111;
}
.message {
        margin-bottom: 20px;
        color: #aa0;
}

.animation-container {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
}

.blink-symbol {
        opacity: 0;
        animation: blink-animation 1.5s infinite;
        position: relative;
        font-size: 29px; /* Hier kannst du die Schriftgröße anpassen */
}

.symbol1 {
        animation-delay: 0s;
        color: red;
        text-shadow: rgba(255, 0, 51, 0.9) 0px 0px 39px;
}

.symbol2 {
        animation-delay: 0.5s;
        color: red;
        text-shadow: rgba(255, 0, 51, 0.9) 0px 0px 39px;
}

.symbol3 {
        animation-delay: 1s;
        color: red;
        text-shadow: rgba(255, 0, 51, 0.9) 0px 0px 39px;
}

@keyframes blink-animation {
        0%,
        100% {
                opacity: 0;
        }
        33% {
                opacity: 1;
        }
}

.aqso-redarrow {
        color: red;
        text-shadow: rgba(255, 0, 51, 0.9) 0px 0px 39px;
        animation: text-flicker 9s linear infinite;
}
.aqso-bluearrow {
        color: #346e9f;
        text-shadow: rgba(3, 68, 233, 1) 0px 0px 35px;
        animation: text-flicker 9s linear infinite;
}

.lauflicht {
        display: flex;
        align-items: center;
        gap: 0; /* Hier den gewünschten Abstand anpassen */
        justify-content: center; /* Fügt horizontale Zentrierung hinzu */
}

.lauflicht-red {
        margin-right: 0px; /* Abstand zwischen den Richtungen */
}

.lauflicht-blue {
        margin-left: 0px; /* Abstand zwischen den Richtungen */
}

.pfeil {
        font-size: 36px; /* Hier die gewünschte Größe anpassen */
        animation: lauflichtAnimation 11s infinite;
        transform-origin: center;
}

.lauflicht-red .pfeil {
        color: red;
        animation-direction: normal;
}

.lauflicht-blue .pfeil {
        color: blue;
        animation-direction: alternate-reverse;
}

.pfeil:nth-child(1) {
        animation-delay: 0s;
}
.pfeil:nth-child(2) {
        animation-delay: 0.15s;
}
.pfeil:nth-child(3) {
        animation-delay: 0.3s;
}
.lauflicht-blue .pfeil:nth-child(1) {
        animation-direction: alternate-reverse;
        animation-delay: 0.3s;
}
.lauflicht-blue .pfeil:nth-child(2) {
        animation-direction: alternate-reverse;
        animation-delay: 0.15s;
}
.lauflicht-blue .pfeil:nth-child(3) {
        animation-direction: alternate-reverse;
        animation-delay: 0s;
}

@keyframes lauflichtAnimation {
        0%,
        100% {
                opacity: 0;
                transform: translateX(0);
        }
        8.33%,
        25%,
        41.67%,
        58.33%,
        75%,
        91.67% {
                opacity: 0.4;
                transform: translateX(-2px);
        }
        16.67%,
        33.33%,
        50%,
        66.67%,
        83.33% {
                opacity: 0.8;
                transform: translateX(2px);
        }
}

@keyframes pulsateAnimation {
        0%,
        100% {
                background-color: rgba(255, 0, 0, 0.8);
                opacity: 0.7;
        }
        50% {
                background-color: rgba(255, 102, 102, 0.8);
                opacity: 1;
        }
}

.speaking.pulsating-cell {
        animation: pulsateAnimation 1s infinite;
        background-color: rgba(255, 0, 0, 0.8);
        opacity: 0.7;
}

/* Stil für die Sendebuttons */
.send-button {
        background-color: #111111;
        color: #a8b2bc;
        font-family: Roboto;
        text-shadow: none;
        border: 0.1px solid #aeee99;
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: 500;
        margin: 7px 3px;
        border-radius: 4px;
        box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
}

.send-button:hover {
        background-color: rgb(140, 140, 140);
        background: #aeee99;
        color: black;
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        cursor: pointer;
}

/* Stil für den ausgegrauten Zustand */
.send-button[disabled] {
        border: 1px solid #c0392b;
}

/* Stil für den ausgegrauten Zustand beim Hover */
.send-button[disabled]:hover {
        background-color: #c0392b;
        color: black;
        box-shadow: 0px 0px 93px 9px rgba(192, 57, 43, 0.9);
        cursor: not-allowed;
        position: relative;
}

/* Tooltip-Stil für den ausgegrauten Zustand beim Hover */
.send-button[disabled]:hover::after {
        content: "Fülle alle erforderlichen Felder aus";
        visibility: visible;
        width: 160px;
        background-color: #c0392b;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 150%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 1;
        transition: opacity 0.3s;
}

.send-button-container {
        margin-top: 20px;
        margin-bottom: 60px;
        z-index: 2;
}

.tooltip-send {
        visibility: hidden;
        width: 160px;
        background-color: #c0392b;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s;
}

.send-button-container:hover .tooltip-send {
        visibility: visible;
        opacity: 1;
}

#secret-hidden {
        display: none;
}

#secret-visible {
        display: block;
}

.qr-link {
        position: relative;
        display: inline-block;
}

.qr-tooltip {
        display: none;
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #fff;
        padding: 10px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.qr-tooltip img {
        width: 200px; /* Hier wird die Breite des Bildes auf 200px festgelegt */
        height: auto;
}

.qr-link:hover .qr-tooltip {
        display: block;
}

a.buttonC {
        background-color: #111111;
        color: #be4245;
        font-family: Roboto;
        text-shadow: none;
        border: 0.1px solid #aeee99;
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        margin: 7px 3px;
        border-radius: 4px;
        box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.1);
}

.buttonC:hover {
        background-color: rgb(140, 140, 140);
        background: #aeee99;
        color: red;
        -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
}

a.buttonB {
        background-color: var(--fdmr-nav-bg);
        color: #8bc687;
        font-family: Roboto;
        text-shadow: none;
        border: 0.1px solid #7a8e9e; /* GEÄNDERT: Statt #aeee99 jetzt Hellgrau */
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        font-weight: bold;
        margin: 7px 3px;
        border-radius: 4px;

        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

.buttonB:hover {
        background-color: rgb(140, 140, 140);
        background: #aeee99;
        color: black;
        -webkit-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        -moz-box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
        box-shadow: 0px 0px 93px 9px rgba(186, 235, 158, 0.9);
}

.button,
.buttonA,
.buttonB,
.buttonDB,
.searchfield {
        opacity: 0;
        transition: opacity 0.5s ease;
}

.fade-in {
        opacity: 1;
}

#gwde-status {
        font-size: 12px;
        position: absolute;
        top: 480px;
        left: 900px;
        line-height: 12px;
        border-radius: 5px;
        color: #a8e89e;
        opacity: 0.7;
        transition: opacity 2.5s ease, visibility 2.5s ease;
        z-index: 9999;
}

#opg-status {
        font-size: 12px;
        position: absolute;
        top: 480px;
        left: 250px;
        line-height: 12px;
        border-radius: 5px;
        color: #a8e89e;
        opacity: 0.7;
        transition: opacity 2.5s ease, visibility 2.5s ease;
        z-index: 9999;
}


#page-container {
        position: relative;
}

.numbercode {
        font-size: 24px;
        font-family: FBDIGI;
		color: #3e464f;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
}



#content {
  z-index: 0;
  position: relative;
}

#logo-container {
  width: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#logo {
  max-width: 100%;
  height: auto;
  transition: opacity 1s;
}


.image-overlay {
    position: relative;
    width: 100%;
    height: 226px;
    text-align: center;
    overflow: hidden;
}

/* Ein einzelnes Bild pro Seite statt der alten 8-Bilder-Zufallsblende
   (logoSwitcher.js, nie wirklich als Effekt wahrgenommen) - welches Bild
   gerade drin steht, entscheidet zentral bannerLogoSwitcher.js anhand des
   aktuellen Themes (inkl. evtl. Wechsel zwischen mehreren Logos je Theme).
   Neues Theme/Event = nur dort ergaenzen, keine Seiten mehr anfassen. */
.banner-logo {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1050px;
    height: 226px;
}



/* Dezenter Schneefall, nur im Weihnachts-Theme (siehe cred.php - blendet
   .snow per JS ein/aus, synchron zum Theme-Wechsel). position:fixed +
   negativer z-index haelt es zuverlaessig hinter dem eigentlichen Inhalt,
   ganz ohne die Karten/Tabellen selbst anfassen zu muessen. */
.snow {
    display: none;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.snowflake {
    position: absolute;
    top: -10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.35);
}

@keyframes snowfall {
    to {
        transform: translateY(110vh);
    }
}



.txt-admin1 {
  font-weight: normal;
  font-style: normal;
  font-size: 1.05em;
  color: #ff9900; /* warmes Orange */
  text-shadow: 0 0 8px #ff9900, 0 0 12px #cc7a00;
}

.txt-admin2 {
  color: #00ffff; /* oder deine Standardfarbe ohne Glow */
  text-shadow: none; /* Glow aus */
}

.txt-blue {
  color: #baeb9e; /* dein Standard-Grün für TG-Namen */
}

.txt-green {
  color: #00ff00; /* falls du reines Grün möchtest, sonst weglassen */
}


.txt-admin-tgname {
  color: #baeb9e; /* deine TG grüne Farbe */
  text-shadow: none; /* Glow aus */
}

/* Tooltip Container */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

/* Gemeinsamer Tooltip-Body */
.tooltip .tooltiptext {
  visibility: hidden;
  position: absolute;
  background-color: var(--fdmr-surface, #1f1f1f);
  color: var(--fdmr-text, #a3aeb7); /* kräftigerer Text als --fdmr-text-dim */
  text-align: left;
  border-radius: 8px;
  padding: 8px 12px;
  border: 1px solid var(--fdmr-border, rgba(255, 255, 255, 0.08));
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4);
  z-index: 10;
  font-size: 10pt; /* Etwas größer */
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  width: max-content; /* an Inhalt anpassen statt "shrink-to-fit"-Ratealgorithmus,
                          der bei schmalem Anker (kurzes Callsign) faelschlich
                          zu frueh umbricht */
  min-width: 240px; /* Mindestbreite */
  max-width: 450px; /* erweiterbar */
  word-wrap: break-word; /* Zeilenumbruch bei langen Wörtern */
  white-space: normal; /* Zeilenumbruch erlauben */
}

/* Tooltip sichtbar beim Hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Position: rechts vom Element */
.tooltip .c2s-pos1 {
  top: 50%;
  left: 105%;
  transform: translateY(-50%);
}

/* Pfeil für rechts-Position */
.tooltip .c2s-pos1::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent var(--fdmr-surface, #1f1f1f) transparent transparent;
}

/* ---- Info-Pillen (TA/ENC/TETRA/TIMEOUT/LOSS) im Last Heard - global, weil
   sowohl das Live-Last-Heard (main_table.html) als auch das persistente
   Log (log.php/lastheard_log.php) sie verwenden. ---- */
.pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 0.62rem;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-shadow: none !important;
  cursor: help;
}
.ta-pill {
  color: var(--fdmr-accent, #65dbc8);
  border: 1px solid rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.5);
  background: rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.12);
}
/* TA nach Motorola-Verfahren (Server meldet ta_type=MOTO) - gleiches Blau wie
   die PRIVATE-Pille der Live-Boxen (opb_table.html), damit es unabhaengig vom
   Theme als eigener TA-Typ erkennbar bleibt. */
.ta-moto-pill {
  color: #8aafdf;
  border: 1px solid rgba(100, 149, 237, 0.5);
  background: rgba(100, 149, 237, 0.12);
}
/* Vom Server eingefuegtes Talker Alias (Call Routing): Wellen-Symbol statt "TA", eigene Farbe
   (Variable je Theme, siehe --fdmr-inject). Symbol so gross, dass die Pille nicht hoeher wird. */
.ta-inj-pill {
  color: var(--fdmr-inject, #b48ee0);
  border: 1px solid rgba(var(--fdmr-inject-rgb, 180, 142, 224), 0.5);
  background: rgba(var(--fdmr-inject-rgb, 180, 142, 224), 0.12);
}
.ta-inj-pill svg {
  width: 14px;
  height: 8px;
  vertical-align: middle;
  margin: 0 -1px;
}
.user-ta {
  color: var(--fdmr-accent, #65dbc8) !important;
  font-weight: bold !important;
}
/* feste Farben statt Theme-Akzent bei enc/timeout/loss - Sicherheits-/
   Qualitaetsstatus, soll sich nicht mit dem Skin veraendern */
.enc-pill {
  color: #e0a458;
  border: 1px solid rgba(224, 164, 88, 0.5);
  background: rgba(224, 164, 88, 0.12);
}
.user-enc {
  color: #e0a458 !important;
  font-weight: bold !important;
}
.tetra-pill {
  color: #4dd0e1;
  border: 1px solid rgba(77,208,225, 0.5);
  background: rgba(77,208,225, 0.12);
}
/* Gleiches Blau wie der bisherige Private-Call-Pfeil (#1e90ff) - der Pfeil
   selbst ist jetzt weg (redundant zur Pille), die Farbe bleibt als
   Wiedererkennung erhalten. */
.private-pill {
  color: #1e90ff;
  border: 1px solid rgba(30, 144, 255, 0.5);
  background: rgba(30, 144, 255, 0.12);
}
/* Notruf-Call - bewusst kraeftiges Rot statt der sonst eher gedeckten
   Pillen-Farben, das ist die wichtigste Information in der Zeile. */
.emergency-pill {
  color: #ff4d4d;
  border: 1px solid rgba(255, 77, 77, 0.6);
  background: rgba(255, 77, 77, 0.16);
}
.user-tetra {
  color: #4dd0e1 !important;
  font-weight: bold !important;
}
.timeout-pill {
  /* gleiches Orange wie *TIME OUT* im Rysen-Log (log_data.php) - dieselbe
     Bedeutung, gleiche Farbe */
  color: #EF6C00;
  border: 1px solid rgba(239, 108, 0, 0.5);
  background: rgba(239, 108, 0, 0.12);
}
.user-timeout {
  color: #EF6C00 !important;
  font-weight: bold !important;
}
/* Loss zweistufig: ab Anzeige-Schwelle gelb, ab der hoeheren Schwelle rot */
.loss-pill-low {
  color: #f2c94c;
  border: 1px solid rgba(242, 201, 76, 0.5);
  background: rgba(242, 201, 76, 0.12);
}
.user-loss-low {
  color: #f2c94c !important;
  font-weight: bold !important;
}
.loss-pill-high {
  color: #e05c5c;
  border: 1px solid rgba(224, 92, 92, 0.5);
  background: rgba(224, 92, 92, 0.12);
}
.user-loss-high {
  color: #e05c5c !important;
  font-weight: bold !important;
}
/* Kurznachricht (SDS) Person-zu-Person - ersetzt das bisherige
   Doppelpfeil-Emoji, eigene Farbe damit auf Anhieb erkennbar. */
.sds-pill {
  color: #b388ff;
  border: 1px solid rgba(179, 136, 255, 0.5);
  background: rgba(179, 136, 255, 0.12);
}

/* ---- "+N"-Ueberlauf-Pille: ab mehr als 2 Pillen werden die restlichen
   dahinter versteckt (Platzgruende in der schmalen Spalte), Hover zeigt
   sie in einer kleinen Box. Eigene Klassen statt der generischen
   .tooltip/.tooltiptext, weil die eine globale "immer neutrale Textfarbe"
   Regel fuer ihren anderen Anwendungsfall (User-Infobox) mitbringt, die
   hier die Pillenfarben wieder ausgrauen wuerde. */
.more-pill {
  color: var(--fdmr-text-dim, #6a7a6d);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

/* Static-TG-Kacheln: Talkgroup-Nummer als Pille statt Komma-Liste, Tooltip
   zeigt den Namen (aus talkgroup_ids, falls schon bekannt). Neutral statt
   Statusfarbe, weil hier nichts "gemeldet" wird, sondern nur konfiguriert. */
.tg-chip {
  color: var(--fdmr-text-dim, #8a9aa0);
  border: 1px solid var(--fdmr-border, rgba(255, 255, 255, 0.15));
  background: rgba(255, 255, 255, 0.04);
}
/* Aktive Ueberschreibung (SINGLE_TS1/2) - farblich abgesetzt, entspricht der
   fruaeheren .singletg-Hervorhebung. */
.tg-chip-active {
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.5);
  background: rgba(74, 222, 128, 0.14);
}
.badge-overflow {
  position: relative;
  display: inline-block;
}
.badge-overflow-list {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 130%;
  right: 0;
  background: var(--fdmr-surface, #20262c);
  border: 1px solid var(--fdmr-border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  padding: 6px 8px;
  white-space: nowrap;
  z-index: 20;
  transition: opacity 0.15s ease;
}
.badge-overflow:hover .badge-overflow-list {
  visibility: visible;
  opacity: 1;
}

/* Pillen-Tooltip (statt haesslichem nativem Browser-Tooltip via title=) -
   nutzt die bestehende dunkle .tooltip/.tooltiptext-Box, aber oeffnet nach
   unten-links statt nach rechts (c2s-pos1), weil die Pillen ganz rechts in
   der Tabelle sitzen und ein rechts-oeffnender Tooltip ueber den Rand
   hinausragen wuerde. */
.tooltip .pill-tt {
  top: 130%;
  left: auto;
  right: 0;
  text-align: center;
  /* pre-line statt normal: erlaubt gezielte Umbrueche per \n im Pillen-Text
     (z.B. vor einer Klammer), ohne dass der Browser mitten im Klammerinhalt
     umbricht. Nur fuer Pillen-Tooltips - die allgemeine .tooltiptext-Regel
     bleibt "normal". */
  white-space: pre-line;
}

/* Spezielles Tooltip-Styling für Typ-Spalte */
.tooltip .typ-tooltip {
  visibility: hidden;
  position: absolute;
  background-color: var(--fdmr-surface, #1f1f1f);
  color: #ffd700; /* Goldene Schriftfarbe */
  text-align: center;
  border-radius: 6px;
  padding: 6px 10px;
  border: 1px solid var(--fdmr-border, rgba(255, 255, 255, 0.08));
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
  z-index: 10;
  font-size: 10pt;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  min-width: 60px;  /* Viel schmaler als normale Tooltips */
  max-width: 100px; /* Begrenzte maximale Breite */
  white-space: nowrap; /* Kein Zeilenumbruch */
  top: -40px; /* Position über dem Icon */
  left: 50%;
  transform: translateX(-50%);
  font-weight: bold; /* Etwas dickere Schrift für bessere Lesbarkeit */
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* Leichter Schatten für Kontrast */
}

/* Pfeil für Typ-Tooltip */
.tooltip .typ-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--fdmr-surface, #1f1f1f) transparent transparent transparent;
}

/* Tooltip sichtbar beim Hover */
.tooltip:hover .typ-tooltip {
  visibility: visible;
  opacity: 1;
}



/* TG Tooltip spezielle Farben und Glow */
.tooltip.tg-tooltip .tooltiptext .tg-id {
  color: #ffcc33; /* gelb/orange für TG-ID */
  font-weight: bold;
  display: block;
  line-height: 1.2;
  text-shadow:
    0 0 5px #ffcc33,
    0 0 10px #ffcc33,
    0 0 15px #ffcc33;
}

.tooltip.tg-tooltip .tooltiptext .tg-name {
  color: #baeb9e; /* dein Standard-Grün */
  font-weight: normal;
  display: block;
  margin-top: 2px;
  line-height: 1.2;
}

.ars-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* zentriert die Boxen */
  gap: 10px; /* Abstand zwischen den Boxen */
}

.ars-card {
  background-color: #111111;
  padding: 8px 12px;
  margin: 6px;
  border-radius: 4px;
  border: 0.1px solid #555;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0px 8px 10px rgba(0,0,0,0.1);
  color: #a8b2bc;
  position: relative;
}

.ars-card .tooltiptext {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 50px); /* zentriert unter der Box */
	font-family: JuliusSansOne;
	transform: translateY(25px); 
	font-size: 13px;  
    z-index: 1000;
    white-space: normal; /* damit Zeilen umbrechen */
    width: 330px; /* z. B. etwas breiter */
    background-color: #222;
    color: #aaaaaa; 
    padding: 12px 20px; 
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
	border-radius: 18px;      /* rundere Ecken */
}




.tooltip:hover .tooltiptext {
  opacity: 1;
  visibility: visible;
}

/* Statusfarben + Glow auf Hover Box */
.ars-card-online { border-color: #3a7a3a; color: #9cd691; }
.ars-card-nofix { border-color: #3a7a3a; color: #e0e03a; }
.ars-card-gps-deaktiv { border-color: #3a7a3a; color: #65dbc8; }
.ars-card-gps-nicht-vorhanden { border-color: #3a7a3a; color: #9ea5a2; }
.ars-card-unbekannt { border-color: #888888; color: #cccccc; }
.ars-card-offline { border-color: #7a3a3a; color: #e0a0a0; }

/* Hover Overglow auf Box selbst */
.ars-card-online:hover { box-shadow: 0 0 20px 5px #9cd691; }
.ars-card-nofix:hover { box-shadow: 0 0 20px 5px #e0e03a; }
.ars-card-gps-deaktiv:hover { box-shadow: 0 0 20px 5px #65dbc8; }
.ars-card-gps-nicht-vorhanden:hover { box-shadow: 0 0 20px 5px #9ea5a2; }
.ars-card-unbekannt:hover { box-shadow: 0 0 20px 5px #cccccc; }
.ars-card-offline:hover { box-shadow: 0 0 20px 5px #e0a0a0;  }


/* ARS-Status als Kacheln */
.ars-summary { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 6px; font-size: 11px; }
.ars-summary span { padding: 2px 10px; border-radius: 999px; }
.ars-sum-on { background: rgba(16,185,129,0.15); color: #10b981; }
.ars-sum-off { background: rgba(183,1,1,0.18); color: #e06666; }
.ars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.ars-tile { background: var(--fdmr-surface, #20262c); border: 1px solid var(--fdmr-border, rgba(255,255,255,0.06)); border-radius: 8px; padding: 5px 10px; cursor: pointer; min-width: 0; }
.ars-tile:hover { border-color: var(--fdmr-accent, #65dbc8); }
.ars-tile-off > :not(.ars-tip) { opacity: 0.55; }
.ars-tile-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ars-tile-name { font-size: 9.5pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ars-tile-time { font-size: 9pt; color: var(--fdmr-text-dim, #6a7a6d); margin-top: 3px; display: flex; align-items: center; }
.ars-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; flex: none; display: inline-block; }
.ars-dot.on { background: #10b981; }
.ars-dot.off { background: #b70101; }
.ars-offline { margin-top: 10px; }
.ars-empty { text-align: center; font-size: 9.5pt; color: var(--fdmr-text-dim, #6a7a6d); padding: 10px 0 14px; }
.ars-offline.ars-hidden { display: none; }
.ars-gps-wrap { align-items: center; justify-content: center; width: 24px; height: 24px; margin: -4px -4px -4px 0; border-radius: 50%; }
.ars-gps-wrap.gps-ok { color: #10b981; animation: ars-pulse 1.8s ease-out infinite; }
.ars-gps-wrap.gps-nofix { color: #f59e0b; animation: ars-blink 1.4s ease-in-out infinite; }
.ars-gps-wrap.gps-off { color: #60a5fa; }
.ars-gps-wrap.gps-na, .ars-gps-wrap.gps-unk { color: #9ca3af; }
@keyframes ars-pulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); } 100% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } }
@keyframes ars-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.ars-gps-wrap { display: flex; flex: none; }
.ars-tile.tooltip { display: block; cursor: pointer; }
.ars-tile .ars-tip { top: 100%; left: 0; margin-top: 4px; min-width: 230px; font-family: Roboto, sans-serif; font-size: 10pt; text-transform: none; letter-spacing: normal; padding: 10px 14px; }
.ars-tile.ars-tip-left .ars-tip { left: auto; right: 0; }
.ars-tile.ars-tip-up .ars-tip { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 4px; }
.ars-tt-head { display: flex; align-items: center; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--fdmr-border, rgba(255,255,255,0.08)); }
.ars-tt-row { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; }
.tooltip .ars-tip .ars-tt-label { color: var(--fdmr-text-dim, #6a7a6d) !important; }
.tooltip .ars-tip .ars-tt-head { font-weight: 500 !important; }

/* ENTFERNT Transition-Effekte für Tooltips */
.tooltip .tooltiptext,
.tooltip .typ-tooltip,
.tooltip-admin .tooltiptext, 
.tooltip-tg .tooltiptext {
    transition: none !important;
    animation: none !important;
    visibility: hidden;
    opacity: 1 !important;
}

.tooltip:hover .tooltiptext,
.tooltip:hover .typ-tooltip,
.tooltip-admin:hover .tooltiptext,
.tooltip-tg:hover .tooltiptext {
    visibility: visible;
    opacity: 1 !important;
    /* KEINE transition Eigenschaften */
}







/* ===== MEISTGENUTZTE TGs - DEUTSCH =====
   Das Fieldset selbst nutzt jetzt class="big card" (siehe Last Heard/ARS/Static TG weiter
   oben) statt der eigenen .stats-widget/.stats-widget__title Rahmen-Regeln - deshalb wurden
   die beiden entfernt. Der Rest (.stats-table und Zellen) bleibt eigenstaendig, nur an die
   Kartenoptik angeglichen (transparenter Hintergrund, dezenter Kopf, feine statt volle Linien). */
/* ===== Call Routing (templates/routing_table.html) =====
   Pro Gespraech eine Zeile: Sender -> Talkgroup -> Empfaenger, dazwischen laufende Linien
   (SVG, gezeichnet von rtDraw() in hbmon.js). Bewusst zurueckhaltend: neutrale Kaesten, die
   Farbe steckt nur im Akzent (Balken/Punkt/Linie) - Rot = sendet, Theme-Akzent = TG,
   Gruen = empfaengt. Schrift: SourceCodePro wie die Last-Heard-Tabellen (die Seiten-
   Schmuckschrift Julius Sans One setzt alles in Kapitaelchen und ist hier schlecht lesbar). */
.rt-box {
    --rt-tx: #e8776f;
    --rt-rx: #86c795;
    background: transparent;
    color: var(--fdmr-text, #a8aaa9);
    font-family: SourceCodePro, monospace;
    text-align: left;
    margin: 15px auto;
    padding: 15px 15px 4px;
    min-height: 135px;
    width: 1100px;
    box-sizing: border-box;
    position: relative;
}
.rt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.rt-title {
    font-family: ShareTechMono, monospace;
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #65dbc8;
    padding: 3px 0;
}
.rt-online {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #6a7a6d;
}
.rt-online b {
    color: #65dbc8;
    font-weight: normal;
}
.rt-lanes {
    box-sizing: border-box;   /* damit die Hoehe beim weichen Uebergang (hbmon.js) stimmt */
    display: flex;
    flex-direction: column;
    background: var(--fdmr-surface);
    border: 1px solid var(--fdmr-border);
    border-radius: 12px;
    padding: 8px 18px 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);   /* wie fieldset.card auf der Startseite */
}
/* neue Gespraechszeile blendet ein (nur Deckkraft, damit die Linien richtig gemessen werden) */
.rt-lane--new {
    animation: rt-fade-in 0.45s ease;
}
@keyframes rt-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.rt-cap,
.rt-lane {
    display: grid;
    grid-template-columns: 250px 190px minmax(0, 1fr);
    column-gap: 70px;
    align-items: center;
}
.rt-cap {
    padding: 4px 0 2px;
    font-family: ShareTechMono, monospace;
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--fdmr-text-dim, #6a7a6d);
}
.rt-cap span:nth-child(2) { text-align: center; }
.rt-lane {
    position: relative;
    padding: 10px 0;
}
.rt-lane + .rt-lane {
    border-top: 1px solid var(--fdmr-border);
}
.rt-col {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.rt-lines {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.rt-ln {
    fill: none;
    stroke-width: 1.25;
    stroke-dasharray: 4 6;
    stroke-linecap: round;
    animation: rt-flow 1s linear infinite;
}
.rt-ln--tx { stroke: var(--rt-tx, #e8776f); opacity: 0.7; }
.rt-ln--rx { stroke: var(--rt-rx, #86c795); opacity: 0.6; }
@keyframes rt-flow {
    to { stroke-dashoffset: -10; }
}
.rt-node {
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.8rem;
    line-height: 1.35;
    border: 1px solid var(--fdmr-border);
    background: rgba(255, 255, 255, 0.035);
    min-width: 0;
}
.rt-node--ph {
    border-style: dashed;
    background: transparent;
    color: var(--fdmr-text-dim, #6a7a6d);
    text-align: center;
    padding: 7px 12px;
}
.rt-node--tx {
    box-shadow: inset 3px 0 0 var(--rt-tx, #e8776f);
    padding-left: 15px;
}
.rt-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.rt-call {
    font-family: ShareTechMono, monospace;
    font-size: 1.05rem;
    font-weight: normal;
    color: #f3ece2;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rt-badges {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.rt-sub {
    font-family: SourceCodePro, monospace;
    text-transform: none;
    font-size: 0.74rem;
    color: var(--fdmr-text-dim, #8a7a68);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
.rt-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.rt-ts {
    font-family: ShareTechMono, monospace;
    font-size: 0.62rem;
    padding: 0 6px;
    border-radius: 4px;
    border: 1px solid var(--fdmr-border);
    color: var(--fdmr-text, #cdbfae);
    flex-shrink: 0;
}
.rt-timer {
    font-family: ShareTechMono, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.74rem;
    color: var(--fdmr-text-dim, #8a7a68);
    margin-left: auto;
}
.rt-timer--warn { color: #d4b85a; }
.rt-timer--late { color: var(--rt-tx, #e8776f); }
.rt-node--mid {
    background: rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.07);
    border-color: rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.35);
    text-align: center;
}
.rt-node--mid b {
    display: block;
    font-family: ShareTechMono, monospace;
    font-weight: normal;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    color: var(--fdmr-accent, #65dbc8);
}
.rt-node--mid span {
    font-family: SourceCodePro, monospace;
    text-transform: none;
    font-size: 0.74rem;
    color: var(--fdmr-text-dim, #8a7a68);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rt-node--private {
    background: rgba(138, 175, 223, 0.07);
    border-color: rgba(138, 175, 223, 0.35);
}
.rt-node--private b { color: #8aafdf; }
.rt-node--target {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 76px;
    padding-left: 15px;
    box-shadow: inset 3px 0 0 var(--rt-rx, #86c795);
}
.rt-node--bridge {
    box-shadow: inset 3px 0 0 var(--fdmr-accent, #65dbc8);
}
.rt-node--bridge .rt-call {
    color: var(--fdmr-accent, #65dbc8);
}
.rt-col--rx {
    gap: 3px;
}
.rt-node--rx {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 10px 3px 22px;
    position: relative;
}
.rt-node--rx::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--rt-rx, #86c795);
}
.rt-rx-l {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.rt-rx-l b {
    font-family: ShareTechMono, monospace;
    font-weight: normal;
    font-size: 0.86rem;
    color: #ebe3d6;
    white-space: nowrap;
}
.rt-rx-l span {
    font-family: SourceCodePro, monospace;
    text-transform: none;
    font-size: 0.72rem;
    color: var(--fdmr-text-dim, #8a7a68);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
    padding: 6px 8px;
    border: 1px dashed var(--fdmr-border);
    border-radius: 10px;
}
.rt-chip {
    position: relative;
    font-family: ShareTechMono, monospace;
    font-size: 0.74rem;
    padding: 1px 9px 1px 17px;
    border-radius: 9px;
    color: #ebe3d6;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--fdmr-border);
    white-space: nowrap;
    cursor: default;
}
.rt-obp-spacer {
    height: 50px;
    visibility: hidden;
}
.rt-obp {
    margin-top: 16px;
    height: 34px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 10px;
    background: rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.07);
    border: 1px solid rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.4);
    cursor: default;
}
.rt-obp b {
    font-family: ShareTechMono, monospace;
    font-weight: normal;
    font-size: 0.86rem;
    color: var(--fdmr-accent, #65dbc8);
}
.rt-obp-n {
    font-size: 0.72rem;
    color: var(--fdmr-text-dim, #8a7a68);
    white-space: nowrap;
}
.rt-ln--obp { stroke: var(--fdmr-accent, #65dbc8); opacity: 0.6; }
.rt-chip::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: var(--rt-rx, #86c795);
}

/* Call Routing: ruhige Zeile ist so hoch wie eine typische Gespraechszeile, damit die Seite beim
   Wechsel von "leer" auf "Gespraech" kaum springt (der Verlauf darunter bleibt stehen). */
.rt-lane--idle {
    min-height: 104px;
    box-sizing: border-box;
}
/* Verlauf ("Recent"): beendete Gespraeche, abgedunkelt und entsaettigt, damit klar ist, dass sie
   vorbei sind. Keine Linien, Empfaenger nur als Chips. */
.rt-sec {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 0;
    padding-top: 10px;
    font-family: ShareTechMono, monospace;
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--fdmr-text-dim, #6a7a6d);
    border-top: 1px solid var(--fdmr-border);
}
.rt-sec::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--fdmr-border);
}
.rt-lane--past {
    opacity: 0.6;
    filter: saturate(0.5);
    transition: opacity .15s ease;
}
/* Sender-Karten im Verlauf: kraeftigerer Rand in der Senderfarbe, sonst verschwinden sie nach dem
   Abdunkeln fast, besonders die schmalen Zeilen. Der Hintergrund bleibt unveraendert. */
.rt-lane--past .rt-node--tx,
.rt-lane--past .rt-slim {
    border-color: rgba(232, 119, 111, 0.4);
    border-color: color-mix(in srgb, var(--rt-tx, #e8776f) 42%, transparent);
}
.rt-lane--past:hover {
    opacity: 0.85;
}
.rt-lane--past + .rt-lane--past {
    border-top: 1px solid var(--fdmr-border);
}
.rt-pastrx {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.rt-cnt {
    flex-basis: 100%;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    color: var(--fdmr-text-dim, #8a7a68);
    margin: 0 0 2px;
}
.rt-chip--more {
    color: var(--fdmr-text-dim, #8a7a68);
    border-style: dashed;
    background: transparent;
}
.rt-chip--more::before {
    display: none;
}
.rt-chip--more {
    padding-left: 9px;
}
/* Linie von der TG zur OpenBridge-Karte im Verlauf (bei laufenden Gespraechen zeichnet sie rtDraw) */
.rt-obp--past {
    position: relative;
}
.rt-obp--past::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -20px;
    height: 20px;
    border-left: 1.5px dashed var(--fdmr-accent, #65dbc8);
    opacity: 0.6;
}
/* Verlauf kompakter: kleinere TG- und OpenBridge-Karte, kuerzere Linie (Spacer = Karte + Abstand) */
.rt-lane--past .rt-node--mid {
    padding-top: 4px;
    padding-bottom: 4px;
}
.rt-lane--past .rt-obp {
    margin-top: 8px;
    height: 28px;
}
.rt-lane--past .rt-obp-spacer {
    height: 36px;
}
.rt-lane--past .rt-obp--past::before {
    top: -12px;
    height: 12px;
}
/* Verlauf: mehrere Sender auf derselben Talkgroup in einer Zeile. Ein Sender = volle Karte, zwei =
   kompakte Karten, drei und mehr = schmale Zeilen (hoechstens vier, der Rest im Overlay) - die Zeile
   bleibt dadurch etwa so hoch wie ein einzelner Eintrag. */
.rt-lane--past .rt-col--snd {
    gap: 6px;
}
.rt-node--c {
    padding-top: 5px;
    padding-bottom: 5px;
}
.rt-node--c .rt-top {
    gap: 6px;
}
.rt-node--c .rt-call {
    font-size: 0.95rem;
    margin-right: auto;
}
.rt-node--c .rt-timer {
    margin-left: 0;
    font-size: 0.68rem;
    white-space: nowrap;
}
.rt-node--c .rt-sub {
    font-size: 0.68rem;
}
.rt-slim {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 2px 10px 2px 15px;
    border-radius: 8px;
    border: 1px solid var(--fdmr-border);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 3px 0 0 var(--rt-tx, #e8776f);
    line-height: 1.3;
}
.rt-slim .rt-call {
    flex: 1 0 auto;
    font-size: 0.88rem;
}
.rt-slim .rt-timer {
    margin-left: auto;
    font-size: 0.68rem;
    white-space: nowrap;
}
/* Namen und Zahlen werden nie gekuerzt, nur der Ort in der Herkunftszeile: Rufzeichen umbrechen notfalls,
   die Pillen rutschen vorher in die naechste Zeile; Alter/Dauer bleiben komplett. */
.rt-node--tx .rt-top {
    flex-wrap: wrap;
}
.rt-node--tx .rt-call,
.rt-slim .rt-call {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}
.rt-sub--parts {
    display: flex;
    min-width: 0;
}
.rt-sub-h {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rt-sub-sep {
    flex: none;
    white-space: pre;
}
.rt-sub-l {
    flex: 1 100 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rt-subrow {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.rt-subrow .rt-sub {
    flex: 1;
    min-width: 0;
    margin-top: 0;
}
.rt-subrow .rt-timer {
    flex: none;
    margin-left: 0;
    white-space: nowrap;
}
/* Empfaenger eines Direktrufs: so gross wie die Senderkarte (nicht die ganze Spalte, nicht so hoch). Im Verlauf bei
   zwei Gespraechen je Sender eine kompakte Karte in gleicher Reihenfolge. */
.rt-col--rx .rt-node--target {
    min-height: 0;
    max-width: 250px;
    box-sizing: border-box;
}
.rt-col--tgt {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 250px;
    min-width: 0;
}
.rt-lane--past .rt-node--target {
    min-height: 0;
    border-color: rgba(134, 199, 149, 0.4);
    border-color: color-mix(in srgb, var(--rt-rx, #86c795) 42%, transparent);
}
.rt-node--target.rt-node--c .rt-call {
    font-size: 0.95rem;
}
.rt-snd-more {
    position: relative;
    align-self: flex-start;
    padding: 0 10px;
    font-family: ShareTechMono, monospace;
    font-size: 0.72rem;
    color: var(--fdmr-accent, #65dbc8);
    cursor: default;
    outline: none;
}
.rt-snd-pop {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 30;
    min-width: 230px;
    padding: 6px 12px;
    background: var(--fdmr-surface, #20262c);
    border: 1px solid var(--fdmr-border, rgba(255, 255, 255, 0.08));
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    color: var(--fdmr-text, #a8aaa9);
}
.rt-snd-more:hover .rt-snd-pop,
.rt-snd-more:focus .rt-snd-pop {
    display: block;
}
/* die Zeile mit dem offenen Overlay liegt ueber den Zeilen darunter (die haben wegen der Abdunklung eigene Ebenen) */
.rt-lane--past:hover,
.rt-lane--past:focus-within {
    z-index: 5;
}
.rt-snd-pop > div {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 2px 0;
    white-space: nowrap;
}
.rt-snd-pop b {
    font-weight: normal;
    color: #f3ece2;
}
.rt-chip--obp {
    color: var(--fdmr-accent, #65dbc8);
    border-color: rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.4);
    background: rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.07);
}
.rt-chip--obp::before {
    background: var(--fdmr-accent, #65dbc8);
}
/* Meistgenutzte TGs: kompakte Karten-Liste (eine Zeile pro TG) - Rang, TG-Pille + Name,
   haeufigste Nutzer als Chips, Anteils-Balken relativ zur aktivsten TG, Zeiten rechts.
   Namen/Chips in SourceCodePro wie die Last-Heard-Tabellen (die Seiten-Schmuckschrift
   Julius Sans One setzt alles in Kapitaelchen und ist dafuer schlecht lesbar).
   Farben kommen aus den --fdmr-* Theme-Variablen. */
.tgc-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0 4px;
    font-family: SourceCodePro, monospace;
}
.tgc-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1.15fr) minmax(0, 1.2fr) minmax(140px, 0.9fr) 104px;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.025);
    transition: background-color .15s ease, border-color .15s ease;
}
.tgc-item:hover {
    background: rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.07);
    border-color: rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.25);
}
.tgc-item--top {
    background: rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.05);
    border-color: rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.14);
}
.tgc-rank {
    font-family: ShareTechMono, monospace;
    font-size: 1rem;
    color: var(--fdmr-text-dim, #6a7a6d);
    opacity: 0.7;
    text-align: center;
}
.tgc-item--top .tgc-rank {
    color: var(--fdmr-accent, #65dbc8);
    opacity: 1;
}
.tgc-head {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.tgc-id {
    flex-shrink: 0;
    box-sizing: border-box;
    width: 74px; /* feste Breite fuer bis zu 6-stellige TGs, damit die Namen buendig untereinander stehen */
    text-align: center;
    font-family: ShareTechMono, monospace;
    font-size: 0.74rem;
    padding: 1px 8px;
    border-radius: 11px;
    color: var(--fdmr-accent, #65dbc8);
    border: 1px solid rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.45);
    background: rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.1);
}
.tgc-name {
    font-family: SourceCodePro, monospace;
    text-transform: none;
    color: var(--fdmr-accent-alt, #baeb9e);
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tgc-name--unknown {
    color: var(--fdmr-text-dim, #6a7a6d);
    font-style: italic;
}
.tgc-users {
    display: flex;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
}
.tgc-user {
    flex-shrink: 0;
    font-family: SourceCodePro, monospace;
    font-size: 0.7rem;
    padding: 0 7px;
    border-radius: 9px;
    color: var(--fdmr-text, #a8aaa9);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--fdmr-border, rgba(255, 255, 255, 0.06));
}
.tgc-user--extra {
    display: none;
}
.tgc-more {
    flex-shrink: 0;
    cursor: pointer;
    font-family: ShareTechMono, monospace;
    font-size: 0.7rem;
    line-height: 1.35;
    padding: 0 8px;
    border-radius: 9px;
    color: var(--fdmr-accent, #65dbc8);
    background: rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.1);
    border: 1px solid rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.45);
}
.tgc-more:hover {
    background: rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.22);
}
.tgc-more__close {
    display: none;
}
/* Aufgeklappt: alle Nutzer zeigen, bei Bedarf in mehreren Zeilen - die Zeile waechst mit. */
.tgc-item--open .tgc-users {
    flex-wrap: wrap;
    overflow: visible;
    padding: 3px 0;
}
.tgc-item--open .tgc-user--extra {
    display: inline-block;
}
.tgc-item--open .tgc-more__open {
    display: none;
}
.tgc-item--open .tgc-more__close {
    display: inline;
}
.tgc-bar__track {
    height: 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.tgc-bar__fill {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg,
        rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.55),
        var(--fdmr-accent, #65dbc8));
    box-shadow: 0 0 8px rgba(var(--fdmr-accent-rgb, 101, 219, 200), 0.4);
}
.tgc-bar__label {
    margin-top: 3px;
    font-family: ShareTechMono, monospace;
    font-size: 0.68rem;
    color: var(--fdmr-text-dim, #6a7a6d);
    display: flex;
    justify-content: space-between;
}
.tgc-bar__label b {
    color: var(--fdmr-text, #a8aaa9);
    font-size: 0.82rem;
    font-weight: normal;
}
.tgc-stats {
    text-align: right;
    font-family: ShareTechMono, monospace;
}
.tgc-time {
    color: #fff;
    font-size: 0.92rem;
}
.tgc-avg {
    margin-top: 1px;
    font-size: 0.68rem;
    color: var(--fdmr-text-dim, #6a7a6d);
}

.stats-widget__footer {
    margin-top: 10px;
    text-align: center;
}
.stats-widget__footer small {
    color: #a9b3bb;
    font-size: 0.9em;
    opacity: 0.8;
}

.stats-widget__placeholder {
    padding: 40px 20px;
    text-align: center;
    color: brown;
    font-family: 'SourceCodePro', monospace;
    font-size: 20px;
}

table.log {
    table-layout: fixed;
    width: 100%;
}

/* Define fixed widths for each column - adjust these values as needed */
table.log th:nth-child(1), 
table.log td:nth-child(1) { width: 60px; }  /* Date - fixed width */
table.log th:nth-child(2), 
table.log td:nth-child(2) { width: 60px; }   /* Time - fixed width */
table.log th:nth-child(3), 
table.log td:nth-child(3) { width: 60px; }  /* Callsign - fixed width */
table.log th:nth-child(4), 
table.log td:nth-child(4) { width: 130px; }  /* Name - fixed width */
table.log th:nth-child(5), 
table.log td:nth-child(5) { width: 200px; }  /* TG Name - FESTE BREITE (wichtig!) */
table.log th:nth-child(6), 
table.log td:nth-child(6) { width: 50px; }   /* TX (s) - fixed width */
table.log th:nth-child(7), 
table.log td:nth-child(7) { width: 50px; }  /* System - fixed width */
table.log th:nth-child(8), 
table.log td:nth-child(8) { width: 30px; }   /* Typ - fixed width */

/* Optional: Handle long text in TG Name column with ellipsis */
table.log td:nth-child(5) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Optional: Show full TG name on hover */
table.log td:nth-child(5):hover {
    white-space: normal;
    overflow: visible;
 
}



/* Normales Tooltip - KEIN Glow */
.tooltip .tooltiptext,
.tooltip.admin-tooltip .tooltiptext,
.tooltip .tooltiptext * {
    text-shadow: none !important;
    color: var(--fdmr-text, #a3aeb7) !important;
    font-weight: normal !important;
}

/* Nur der Administrator-Text hat Glow */
.tooltip .user-admin-note {
    color: #ffcc33 !important;
    font-weight: bold !important;
    text-shadow: 0 0 8px #ffcc33, 0 0 12px #cc7a00 !important;
}

/* TG-Nummer in Tooltip gelb färben (ohne Glow) */
.tooltip .tg-id {
    color: #ffcc33 !important; /* Gelb für TG-Nummer */
    font-weight: bold !important;
    text-shadow: none !important; /* Kein Glow */
}

/* TG-Name in normaler Farbe */
.tooltip .tg-name {
    color: var(--fdmr-text, #a3aeb7) !important; /* Normale Farbe */
    font-weight: normal !important;
    text-shadow: none !important;
}


.button {
    color: white; /* Standard weiß */
}

.button.green {
    color: #90ee90; /* Helles Grün */
}

.button.orange {
    color: #ffb366; /* Helles Orange */
}

.button.red {
    color: #ff6b6b; /* Helles, kräftiges Rot */
}

.buttonA {
    color: #ff6b6b; /* Helles, kräftiges Rot */
}

/* Für ALLE Tabellen im Dashboard */
.log tr {
    cursor: pointer;
}

.log tr:hover {
    background: #374151 !important;
    cursor: pointer;
}

/* Hinweis: Die Regel oben war frueher nicht geschlossen und hat alles darunter verschluckt.
   Entfernt wurden dabei nur wirkungslose Reste des alten QSO-Designs (qso-progress-*, qso-container, EmojiFix).
   Altes Hover-Verhalten (Text in der Zeile verliert beim Darueberfahren die Fettschrift) wiederherstellen:
   .log tr:hover * { font-synthesis: none !important; } */

/* ============================================================
   Tabellen-Design "Karte": gilt nur fuer <fieldset class="big card">.
   Aktuell: Startseite (Last Heard Voice/Data, ARS User).
   Andere Seiten mit table.log bleiben unveraendert, bis sie class="card" bekommen.
   ============================================================ */
fieldset.card {
    background: var(--fdmr-surface);
    border: 1px solid var(--fdmr-border);
    border-radius: 12px;
    padding: 2px 12px 8px;
    margin: 12px auto;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    transition: background-color .2s ease, border-color .2s ease;
}

fieldset.card legend {
    font-family: ShareTechMono, monospace;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--fdmr-accent);
    padding: 0 8px;
    margin-left: 6px;
}

fieldset.card legend b {
    font-weight: normal;
}

fieldset.card table.log {
    background: transparent;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 11pt;
}

fieldset.card .log th,
fieldset.card .log td {
    border-left: 0;
    border-right: 0;
    border-top: 0;
}

fieldset.card .log th {
    background: transparent;
    color: var(--fdmr-text-dim);
    font-family: ShareTechMono, monospace;
    font-size: 0.66rem;
    font-weight: normal;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    height: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

fieldset.card .log td {
    padding: 3px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

fieldset.card .log tr:nth-child(even) {
    background: transparent;
}

fieldset.card .log tr:last-child td {
    border-bottom: none;
}

fieldset.card .log tr:hover {
    background: rgba(var(--fdmr-accent-rgb), 0.07) !important;
}

/* ============================================================
   Menue-Buttons an die Kartenoptik angleichen: rundere Ecken statt 4px,
   dezentes Hover mit sanftem Leuchten statt dem alten 93px/90%-Blitz.
   Funktionsfarben bleiben (Register gruenlich, TETRA orange, Rest tuerkis).
   ============================================================ */
a.button, a.buttonA, a.buttonB, a.buttonDB, .dropbtn {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

a.button:hover, .dropbtn:hover, .dropdown:hover .dropbtn {
    background: rgba(var(--fdmr-accent-rgb), 0.08) !important;
    border-color: rgba(var(--fdmr-accent-rgb), 0.4) !important;
    color: var(--fdmr-accent) !important;
    box-shadow: 0 0 18px rgba(var(--fdmr-accent-rgb), 0.25) !important;
}

a.buttonB:hover {
    background: rgba(186, 235, 158, 0.08) !important;
    border-color: rgba(186, 235, 158, 0.4) !important;
    color: var(--fdmr-accent-alt) !important;
    box-shadow: 0 0 18px rgba(186, 235, 158, 0.25) !important;
}

a.buttonA:hover {
    background: rgba(255, 107, 107, 0.08) !important;
    border-color: rgba(255, 107, 107, 0.4) !important;
    color: #ff6b6b !important;
    box-shadow: 0 0 18px rgba(255, 107, 107, 0.25) !important;
}

a.buttonDB:hover {
    background: rgba(255, 184, 36, 0.08) !important;
    border-color: rgba(255, 184, 36, 0.4) !important;
    box-shadow: 0 0 18px rgba(255, 184, 36, 0.25) !important;
}

.dropdown-content {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.dropdown-content a:hover {
    background: rgba(var(--fdmr-accent-rgb), 0.08) !important;
    color: var(--fdmr-accent) !important;
    box-shadow: none !important;
}

/* ============ Theme-Switch (Footer unten links) ============
   Schritt 1: nur die Buttons + Umschalt-Mechanik. Die Farben selbst
   haengen noch nicht an Variablen, das kommt in Schritt 2. */
#theme-switch {
    position: fixed;
    bottom: 8px;
    left: 10px;
    z-index: 999;
    display: flex;
    gap: 4px;
}
/* Jeder Punkt: gefuellte Mitte = Akzentfarbe des Skins, Ring drumherum =
   Hintergrundfarbe des Skins (beides per inline style gesetzt) - wie ein
   kleiner Farbchip, kein Text noetig. */
.theme-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    border-width: 4px;
    border-style: solid;
    border-radius: 50%;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform .15s ease, box-shadow .15s ease;
}
.theme-btn:hover {
    transform: scale(1.15);
}
.theme-btn.active {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}
/* Knopf "Animationen an/aus" neben den Theme-Punkten: kleine Welle, bei "aus" durchgestrichen */
.anim-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    margin-left: 4px;
    border: 0;
    background: transparent;
    color: var(--fdmr-text-dim, #6a7a6d);
    opacity: .8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.anim-btn:hover {
    opacity: 1;
    color: var(--fdmr-accent, #65dbc8);
}
.anim-btn svg {
    width: 18px;
    height: 18px;
}
.anim-btn .x {
    display: none;
}
.anim-btn.off .x {
    display: block;
}
/* Animationen aus: auch der Schneefall im Weihnachts-Theme ruht */
html[data-anim="off"] .snow {
    display: none !important;
}

/* ============ Verbindungs-Hinweis (hbmon.js) ============
   Schwebt unten mittig im Fenster, damit er auch auf langen Seiten sichtbar
   ist, und braucht keinen Platz im Layout. Warn-/Erfolgsfarbe bleibt fix
   (Status-Bedeutung, kein Design-Akzent). */
#connection-status {
    position: fixed;
    right: 0;
    bottom: 70px;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 9999;
}
.conn-toast {
    --c: 255, 138, 76;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 20px 10px 14px;
    background: var(--fdmr-surface, #20262c);
    border: 1px solid rgba(var(--c), 0.35);
    border-right: 3px solid rgb(var(--c));
    border-radius: 12px 0 0 12px;
    box-shadow: 0 0 24px rgba(var(--c), 0.12), 0 6px 20px rgba(0, 0, 0, 0.45);
    font-family: 'Share Tech Mono', monospace;
    animation: conn-in .45s cubic-bezier(.2, .8, .2, 1) both;
}
.conn-toast.conn-ok { --c: 129, 199, 132; }
/* Hotspot-Meldungen (Login/Logout) stapeln sich oberhalb des Verbindungs-Hinweises */
#hs-toasts {
    position: fixed;
    right: 0;
    bottom: 140px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
    z-index: 9998;
}
.hs-ico {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgb(var(--c));
    color: rgb(var(--c));
    font-size: 0.8rem;
    line-height: 1;
}
.conn-toast.conn-out { animation: conn-away .35s ease-in both; }
.conn-txt { display: flex; flex-direction: column; gap: 2px; }
.conn-txt b {
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgb(var(--c));
}
.conn-txt small {
    font-size: 0.72rem;
    color: #8a9a8d;
    letter-spacing: 0.5px;
}
.conn-wave { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.conn-wave i, .conn-wave b {
    position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px; margin: -4px;
    border-radius: 50%; box-sizing: border-box;
}
.conn-wave b { background: rgb(var(--c)); }
.conn-wave i {
    border: 1.5px solid rgb(var(--c));
    opacity: 0;
    animation: conn-wave 2s ease-out infinite;
}
.conn-wave i:nth-child(2) { animation-delay: .66s; }
.conn-wave i:nth-child(3) { animation-delay: 1.33s; }
.conn-check {
    width: 16px; height: 16px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(var(--c), 0.18);
    color: rgb(var(--c));
    font-size: 11px;
}
.conn-dots span { animation: conn-dot 1.5s infinite; }
.conn-dots span:nth-child(2) { animation-delay: .5s; }
.conn-dots span:nth-child(3) { animation-delay: 1s; }
@keyframes conn-in { from { transform: translateX(110%); } to { transform: none; } }
@keyframes conn-away { to { transform: translateX(110%); } }
@keyframes conn-wave { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.6); opacity: 0; } }
@keyframes conn-dot { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* Gemeinsamer Tooltip (scripts/hbmon.js, hbmonmobile.js): Element mit data-tip="..." - gleiche Optik wie .tooltiptext */
#fdmr-tip {
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  display: none;
  max-width: 320px;
  padding: 6px 10px;
  text-align: center;
  font-size: 10pt;
  line-height: 1.35;
  white-space: pre-line;
  background: var(--fdmr-surface, #1f1f1f);
  color: var(--fdmr-text, #a3aeb7);
  border: 1px solid var(--fdmr-border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.4);
}
/* Tooltip mit Mono-Schrift (Element mit data-tip-mono): feste Zeichenbreite, damit Zeiten und Zahlen untereinander stehen */
#fdmr-tip.mono {
  font-family: ShareTechMono, monospace;
  white-space: pre;
  text-align: left;
  font-size: 11pt;
}